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
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.