Python-powered chat apps with Twilio and SendGrid Transcripts
Chapter: Creating the Flask Python web app
Lecture: Allowing external systems to call our dev API with NGrok
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
So we've run into a bit of a problem and I have a fantastic solution for
0:04
you, but let me lay out the problem really quick.
0:06
We have our local Web API running right here, on local host.
0:12
We cannot get to it outside of this computer.
0:15
It's very unlikely we want to set up some mechanism to do so.
0:18
We've got this computer which probably is a firewall.
0:21
It's probably behind a wireless router,
0:22
which has some kind of NAT firewall.
0:25
Exposing that all the way out to the Internet is tricky.
0:28
And then our ip changes and all sorts of stuff can be complicated
0:31
there. I'm gonna show you a really cool general purpose way to expose local API's
0:37
and Endpoints and even just Web applications in general,
0:41
outside of our network, in a really,
0:43
really straightforward and simple way. But we're going to use a tool called in ngrok
0:47
The idea is that in ngrok will create an ssh tunnel from our computer all
0:53
the way out to the end. ngrok servers, then the ngrok servers,
0:56
Listen on the public Internet. So what we're gonna do is when a point twilio
0:59
studio at the public in ngrok Server,
1:02
which will, behind the scenes,
1:04
find a way for that request through ssh to actually get to our web endpoint as
1:09
if it came directly to us.
1:12
And that's going to be how we are going to develop and test this end point
1:16
is going to be really, really awesome.
1:18
All we gotta do is download in ngrok and you can see we're gonna run it
1:21
right there, like so it has a free version,
1:23
so that's great. So we're gonna hop over to the terminal if you're on windows
1:27
do this in the command prompt and what we're gonna type is in ngrok,
1:32
and then we're going to type the type of tunnel we're going to create.
1:35
What? We want to listen to http.
1:36
Also https traffic. And then we say,
1:39
the local port on this machine that we want to listen on.
1:43
You look over in flask. You can see that there's Port: 5000 right there.
1:48
So we say 5000 and check that out.
1:50
We got an http and Https port like so,
1:56
And if I just go throw that address into the browser,
2:02
check it out. It's cloud city.
2:04
But cake Company. So this is the actual end point.
2:08
This is our our local server running.
2:11
See, down here we're getting those requests by Erase that and make another request.
2:16
You can see there's our get right there.
2:18
So this is our local Dev machine,
2:19
our local Dev environment exposed out on the Internet in a public way.
2:23
This is a public end point so we can put something like this in the twilio
2:27
studio and test our code. However,
2:31
instead of just running it this way if you have a paid account.
2:35
No if you don't, this is fine.
2:37
Just do that. Take that.
2:38
You're all but notice if I rerun it and now have a totally different thing.
2:41
5c, if I rerun it again and now it's f0.
2:44
Every time you rerun it, it's going to be starting over.
2:48
So if you're doing this and you don't have a paid account,
2:51
just run it and leave it running.
2:52
It doesn't matter if the website up and running or not.
2:55
But what I'm gonna do is I'm gonna go over here.
3:01
I'm gonna say sub domain is Cloud City and notice this I can go to a
3:08
more stable endpoint cloudcity.ngrok.io. That way,
3:12
throughout the course, I don't have to keep changing it,
3:14
going back and sinking it up and whatnot again.
3:17
This requires one that domain to be available currently and to do you have a paid
3:21
account. But if you don't just use the temporary one,
3:24
So let's go over here and put this in, as the end point right here.
3:29
Now we don't want just this.
3:30
Remember, we want api/order,
3:33
but this may well do it.
3:35
It's it's save, and now we're going to be able to go and do our
3:40
post against that endpoint. Let's just double check that really quick with postman.
3:49
Do a post against https for Cloud City.
3:52
Send it and sure enough, we're getting something back.
3:56
Let me just make a change.
4:00
Show that actually this data is live.
4:02
It's not just some kind of caching.
4:04
There we go. It looks like a round trip through in ngrok,
4:07
exposing our API to the public
4:08
Internet is up and running. You can use ngrok for all sorts of amazing
4:13
tools. If you got to do like a Web hook at Git Hub.
4:16
If you're building a mobile app and you want to be able to debug,
4:19
the API calls that the APP is making all those kinds of things are possible and
4:23
easy with ngrok. Definitely, definitely recommend it,
4:26
and it's going to be what we'll use to integrate Twilio studio into our dev environment
4:30
before we push our API itself into production.