AWS API Gateway Explained With Real Web App - React Lambda

[Music] using api gateway helps keep your application secure and organized today we'll explain api gateway by looking at a real-life example of my app grub guide which uses it to connect a react front end to some lambda functions and aws cloud hi i'm dylan a cloud engineer living in oregon i got the idea for this video a few days ago when i posted on reddit asking people which topics they had a hard time conceptualizing as a beginner in aws and the most upvoted topic that came up was surrounding api gateway and now i have it here with the response of what they said so here it says i couldn't figure out api gateway i mean you just give it a url path and a function and it connects them so what it took me a long time to realize that that was a meaningful and useful thing to do and then he goes and talks about some uh django python examples and so the goal is videos we're going to unpack that question and get into exactly why api gateway's useful let's unpack what he means by that he's basically saying that api gateway is the same thing as url router except it's connected to the cloud you're probably familiar with url routers if you take in any sort of web development class in college for me it was cs290 a router is a central web development concept and it's actually pretty simple at its core so look right now at the url for this video you're gonna see youtube.com and then everything after the slash is the route and so what's happening is the first route watch is calling some function and then you have our id afterwards similarly if you were to go and search for a term there's going to be a different route that's passed to the youtube servers it's the same way for api gateway and any other web application you're going to build and so api gateway works in the same way as youtube or any other website so what's going on behind the scenes is when you come to your api gateway dashboard you can come down to stages and see that just like youtube has a server that's handling any requests and any routes that are passed to it you have your own server that is handling the request that you set out for your api gateway so you can see here this is the invoke url that if i want to call this i've actually already opened it up in here i can call my api and then i can call my submit route on it and that's going to do something so if you look my api's name is submit form and then within it i have the submit route and so if i call that i'm hitting enter and just like youtube had a server that's going to give me back videos this server set up to give me back whatever i want with it and you can see there's an authentication that's needed but in the context of your app when you are authenticated that would try to find the perfect restaurant given whatever input it had and so that's just like hopefully gives you an idea that it's really the same thing except we're not taking this url and throwing it in this bar we're calling it through this function and api post knows to use this base url structure and then we're adding the submit form and submit and so this is just part of their developer package to make it easier but under the hood it's it's really the same thing that's happening these are the building blocks for a complex application let's see how this plays out in a real life app this is grub guide it's built with aws amplify and react amplify makes it really easy to make applications and does a lot of the heavy lifting of connecting everything up grub guide's purpose is to deliver delightful fast and personal restaurant suggestions to tourists in my hometown of bend oregon the user fills out a survey of their preferences and has returned their perfect restaurant in order to find their perfect restaurant the survey is passed through api gateway and sent to a lambda function which processes the result pulls the restaurant from a database and stores the response alright so let's just hop right in and see how this all works together um okay so we've gone through the whole survey we've chosen all of our preferences and when we hit finish that's what's going to start the initial call to the api gateway so i'm going to click finish and right now what's happening is over in our code we have a function here that handles the submission of the form so we handled submission and part of that is we're preparing the forum data and then oh don't mind the response that's for afterwards that's a surprise okay so we have we're preparing the form and then we're calling the api gateway and so what this is saying is we're going to call the submit form api and we're going to do the slash submit route and we're going to pass into it our form data and that's what the user filled out and so okay so we call this and what happens is over in our aws console i'll go back for a second we can look at all of our apis we're calling the submit form remember the submit form api in the submit route so we have our submit form api and once that loads we can see that this only has one route you could have as many routes as you wanted but we have our slash submit route and if i click any we're going to notice when we hit this route what's happening is the client which is what we came from is going to this lambda function and it's going to call this lambda submit form dev function and if we click on that we can go in aws and see okay this is our land function launched right here you can't see the code because the the file is too large but if we go into our file structure uh you notice this is the submit form lambda function and so this is where i've been developing it this is where all the algorithm happens and so this is the function that processes all of the restaurant data makes a couple database calls stores the responses and when it's all done it returns the two top restaurants for the users and so once that happens that lambda function is gonna send its response back through back to the gateway and once that gateway gets the response it's gonna it's gonna go to this part and so we get a response and we have some error handling here and we have our results array and this is going to contain the information for the user's perfect restaurant and that's going to get passed back into the web page as we see and as you saw it was supposed to be a surprise but these are our suggestions based on what we chose and this is how the whole setup works and can be expanded on as you build out and have other things you want to do with connecting your back end to your front end as we saw api gateway is a single door connecting your front end and your back end and as a result of this your app has more organization and security this is just one example and you can get a lot more in depth than rugged i hope this video served as a building block so you can use api gateway to improve the organization and security of your own web apps feel free to drop any specific questions in the comments if you want to learn more about technology that enables business start right now by subscribing and clicking the bell so we can learn together have a great day and we'll see you next time you

Channel: Dylan Albertazzi

Views: 3,096

Keywords: how to use api gateway, api gateway tutorial, api gateway explained, API Gateway, apigateway, lambda function, lambda api gateway, api gateway lambda, lambda function api gateway, api gateway lambda function, lamda, python, aws api gateway, aws lambda, aws api gateway lambda, aws lambda api gateway, aws api gateway lambda python, aws api gateway example, aws lambda api gateway response, api gateway REST, api gateway rest api, REST api, serverless, serverless nodejs, aws cloud

Id: 52B7Gjmz4XA

Length: 8min 3sec (483 seconds)

Published: Fri Jan 29 2021