AWS API Gateway & AWS Lambda | AWS Serverless tutorial | Part II

hey guys and welcome to the create a server list app part 2 video tutorial in part 1 of the series we downloaded and installed the application you I created a products table using dynamo DB we created a lambda basic execution role to enable our lambda functions to talk to our database and finally we created 4 lambda functions to handle all of our credits so if you haven't seen part 1 you might want to pause this video and go through that one first so that you have everything you need to proceed with the next phase of our project which is building a REST API for our application using AWS API gateway so if that sounds good please continue to watch this video and we'll get started right away [Music] you alright guys so first of all let's head on over to aws.amazon.com and login to the management console and let's head on over to API gateway alright so before we start to build out our REST API it's important to know what the shape of it's going to be what it's going to look like so let's do a little planning first so we've got four lambda functions that we want to target with our REST API the first one is let's see put ok which is a create creating an item okay then we have delete then we have get all then we have update alright so what is our rest endpoint going to look like for each lambda function or for each operation so start with a domain calm whatever our domain names gonna be right and then for the path I think we want it to be named products because that's the the type of the object that we're targeting here so I'll say products and then for putting an item for creating a new item we're targeting one particular product right so we need an ID to identify that specific product now for delete our rest endpoint is going to look much the same because still we're targeting one item here to delete one item at a time so we'll need to look it up by ID all right now forget all this one's going to be different because we don't have one particular item that we're targeting so we want to return basically all of the products in the table so we'll just leave our rest endpoint as domain.com slash products ok now update again we're targeting one particular product so it can look the same our endpoint can look the same as our put and delete alright so with that in mind let's go ahead and create a new API by clicking on the create API button all right so now we're ready to create our REST API so let's go ahead and click on create API okay so under choose the protocol just ensure that rest is selected that should be the default option under create new API let's make sure that new API is selected and let's give our API a name I'm gonna say hex all products API okay now let's give it a brief description and for endpoint type we've got a couple of options here now with regional selected basically AWS will deploy this REST API to my local region only which happens to be us West - alright so that's fine if I know that my users are local or if this is just for testing however if I do have users that are located far away say in Australia or another part of the world then they will experience some serious latency every time their request goes all the way to the origin here in Seattle so what I want to do is select the second option edge optimized now what edge optimized does is AWS will now deploy my REST API to various edge locations around the globe these are sort of proxy servers so with this option enabled requests will first go to an edge location which chances are there's one pretty much close to any user around the globe and only if the the rest API is not available there will the requests go all the way to the origin so this will basically result in much less latency in most cases for most users so I want to make sure edge optimized is selected and let's go ahead and click create API alright so the first thing we want to do is go to the actions drop-down and select create resource alright so let's give our resource a name this is going to be products ok and the resource path is automatically populated so we've got slash products and I'm going to go ahead and click enable API gateway course make sure that option is checked because we'll end up with a different domain for our REST API than what we have for our UI which will be localhost at first alright so make sure that's selected and go ahead and click on create resource alright so we're dealing with putting an item first so we said that we wanted to have products slash ID so let's go back up to the actions drop-down and let's again select create resource this time it's going to be ID now if we want ID to be a variable and not literally the string ID what we can do is surround it with curly braces in our resource path all right so again make sure we've got cores selected and create resource okay great so the next thing we want to do is actually set up a method so under actions this time select create method and you'll have some options from the drop-down here since we're creating an item let's select post ok and let's save that ok so we've got some more options integration type should be lambda function since we're integrating with a lambda now use lambda proxy integration we definitely want to make sure that this is selected what this option will do will be to allow us to allow our lambda function to access various request parameters the the path parameter and the request body through the event object so that'll be very important once we go back to our lambda and refactor it to work with API gateway alright so make sure your lambda region is selected and then go ahead and select your lambda function oh I thought there'd be some options here but let's see there we go so you just have to start to type the name hex all put now one thing to notice here even though the the document client method is put we definitely want to use post for our API gateway method alright and we can we can leave the default timeout selected for now ok so go ahead and click on save ok and this will just tell you that you're about to give permissions to invoke your lambda function that is what we want so go ahead and click OK alright so our post method is ready to go now we've got a few more configuration items to take care of so let's go ahead and click on method request alright so under settings let's look at we want to change this to AWS I am now this gives us the option of controlling or creating fine-grained controls over who has permissions to make changes to our REST API using iam roles so it's good practice to have that selected for a request validator let's say we want to validate the body of this request so so select validate body API key required we don't need a key so we can leave that as false we don't need to do anything here we don't need to do anything with query string parameters because we have none under HTTP request headers let's add a content type header ok let's save that request body let's expand that section ok so add Model API gateway has the concept of models a model is pretty much a schema for the the body object that we're going to be sending through for the request in this case which will be a product so we need to go ahead and create a model first and then add it here so on the left hand menu let's select models and select create all right so let's give it a model name I'm gonna say product content type is going to be application JSON and we can leave the model description blank for now okay so for model schema we do need to use specific syntax as dictated by AWS so I'm going to go ahead and open up a new tab and I've got this bookmarked where we can we can grab an example model and then modify it for our means okay so I will have the I will make this link available in the video description so you guys can find it so once you're here basically scroll down about a quarter of the way down the page to where it says we can use the following JSON schema to define the model for the above data let's go ahead and copy this example code and paste it into our AWS model schema text editor ok so what we want to do is pretty much nuke everything under properties and then we'll create our own properties so I'm going to delete I think that's right yep there we go first of all let's change our title I'm going to change grocery store input model to products input model and then under properties we've got two properties that we need to add to this object one is going to be ID okay that's going to take an object with type and string just like that all right so then add a comma and we've got one more property which is going to be product name okay and that's going to take the same type definition so go ahead and copy that one from ID paste that there alright that looks good so let's go ahead and save this scroll down a bit and click on create model Oh invalid content type specified application JSON up I miss build something there didn't I you guys probably saw that all right all right I'm still not a pro at talking and typing at the same time as you can see so alright once that's corrected you probably don't have the same mistake I did but go ahead and click on create model and there we go so let's go back to our API let's go back to our post method let's go back to method requests and let's pop open our request body and now we can select our model so just click on add model okay I'll specify application application JSON and then model name from the drop-down product okay so go ahead and save that and I just want to make sure the other things I said are still there good okay that looks good so we can close that up and oh the settings aren't there they didn't persist so let me go ahead and change those back real quick and sorry if you had to do this again like I did I probably didn't save it yeah that's the problem so go ahead and click on the little checkbox there it's not very obvious that you have to do that to save it but that should do the trick all right so looking good so far let's go back up one level to method execution now we could test this right way but we know it's gonna fail and why is that that's because if you recall our lambda function is still hard-coded to contain the product data so what we need to do is revisit our lambda do a bit of refactoring to remove that hard-coding and access the the product ID and the product name via the event object coming from API gateway so let's do that next all right guys so let's head over to our IDE s and let's pull up our put function X I'll put J s now let's see what we can do to make this play a little bit better with API gateway so our main goal here is to remove this these hard-coded values and instead extract those values from the request body so here's what we can do I'm gonna go right under our response body and status code variables and create a new variable okay and we're going to extract oops use a destructuring syntax here to extract the ID and the product name from event dot body ok so that's going to contain our body object our request body ok now one thing we do need to do before we can use this in our code is parse this ok from string into JSON so I can say json.parse and then pass in event body all right now we can come down to our params object and remove this hard-coding replace the string with simply ID and replace this string with product name ok and that is pretty much all we need to do here so go ahead and save that and I'm gonna select all copy and let's go back to lambda ok so I'm gonna open lambda in a new window and a new tab and let's select our hex all put function and I'm just going to copy and paste our newly refactored code in the window here ok so I'm gonna go ahead and save that all right so let's go back over to API gateway and let's test out our our post okay so select post and let's go to test all right so we're going to be creating a new product here so let's say one two three four seven we don't need any query string so we can skip that part now let's do let's see header I think the format is just like this but we'll see content type I don't know if I need to put it in an object or if this is fine okay what doesn't that like there I wonder if this needs to be like in an object mm I don't remember but I think it's just like that so we'll find out in a second anyway alright so for request body let's construct our request we're gonna say ID I'll make it the same as what we have above 1 2 3 4 7 and let's do a product name and let's say generators alright so you may notice that we have the product ID in both the path and the body it's not necessary to have it in the path because we're actually reading it from the request body there's arguments for and against it you can say that maybe you don't want to reveal the ID of a product in the path where it's visible to the user but I think it's ok I think it'll actually be helpful for debugging so I'm gonna go ahead and leave that in the path alright and let's go ahead and click on the test button all right so it's invoking our endpoint which is invoking our lambda and let's see status 201 so that's a good indication and I'm just briefly scanning the logs here to see if I see anything amiss there's our request body that looks good alright so I'll tell you what let's go over to dynamodb it looks successful from the stand point and let's see if our new products there so I'm gonna go services I'm gonna open dynamodb in a new tab okay I'm gonna go to tables and I'm gonna go to products items tab and there we go all right first try so that's looking good so far all right so we've got our post function set up an API gateway and now we just need to do three more so I think the next three will go pretty quickly now that we kind of know we're doing and we've got a pattern established so let's do our delete method next that way we can test it with this item that we just added to the system all right so let's navigate back to our API gateway tab okay so again this is gonna be our delete method we said should also look like product slash ID right since we're targeting a specific ID so go ahead and click on the ID portion of the path and then from the act and then from the actions drop-down select create method okay so this time we're creating a delete method so go ahead and select delete and go ahead and save that by clicking on the check there alright so this is gonna look very similar to what we did previously integration type of lamda use lamda proxy yes make sure your region is set and for lambda function let's see this was hex all delete so go ahead and choose that and leave everything else as is go ahead and click on save okay all right so let's click into method request authorization I'm just gonna use the same settings as before request validator what do I want to do here there's no body so let's just do query string and headers I guess we'll keep it simple request paths that's good no query string parameters so let's go down to headers let's just add the same header here okay and go ahead and save that there's no request body so we are pretty much done here feels like I'm missing something but I think oh that's what it was I didn't save those two alright let's go back to method execution and okay so we need to refactor our lambda now for delete so before we test let's go back to our IDE okay let's go ahead and open up our hex all delete j/s now again there's just a few things we'll need to refactor here so let's see underneath response body and status code again we'll create our [Music] create art we'll extract our variables from the path constants this time we just need ID so oops what am I doing here I don't need that equal sign there Const ID equals and again we'll do this time we'll do a vent dot path parameters okay so when we want to access the request body its event body when we want to request or we want when we want to access path parameters its event dot path parameters alright so let's just replace our string here with ID and that should do the trick alright so let's go ahead and save that select all copy let's go back over to lamda let's go back to functions and let's select our hex all delete function scroll down a bit and we can just blow this code out and replace it save that go ahead and click on save don't forget to do that and let's hop back over to API gateway and let's give it a test run so I'm gonna click on test alright so for the path we're gonna put in the ID one two three four seven query strings headers so we'll do a header content type and I forgot my quotes I know so I gotta add those application JSON content type make sure I've got my quotes in there and let's go ahead and test it out go ahead and click on test all right and let's see what it has to say no data okay that's okay there's no data from the response it should be a 204 good we got a 204 response and just quickly let's look at the logs don't see any indication that something's gone wrong so that looks good successful complete successfully completed execution all right so let's go to dynamodb and so let's see if that item has been deleted so this is what we're looking for again one two three four seven generators let's just refresh the page and there we go excellent so our delete lamda is working our delete method in our API gateway is working alright so next I think we'll do let's handle our get all next all right so let's head on back over to API gateway and again we want to okay so for this one we want to go back up to products alright because we're not using ID in this case and this should be the easiest one we have to handle because we don't require any changes to our lambda since we're just doing slash products we don't have any ID we don't have any data that we need to extract from our request so this one should be very straightforward let's go up to the actions drop-down and let's select create method okay this is gonna be a get get method so go ahead and save that okay so integration type again is going to be lambda we do not need to use the proxy integration I don't believe we need it yeah because we don't need to access anything from the event object so let's just leave that unselected make sure your region is correct and what did we call this one hex all get items all right and leave timeout as the default go ahead and click on save okay let's go to method request and I'm just gonna use the same settings that I did before request a validator we don't have anything to validate here really so I'm just gonna leave it to none I'm gonna leave API key required to false I'm not going to require any headers for this one okay since we're not sending in anything and there's no request body so again this one's super straightforward let's go back to method execution and let's just test this one straight away and nothing to enter here even since we're just relying on the the path itself to trigger the correct function so let's click on test and there we go we can already see that this is working correctly so here's our body here's our response body and it's got the two products from our table is that two or three two water pumps and LED lights great so that one was very easy and there was nothing hard-coded in that lamda so we don't need to do anything there all right we're off to our last one which is update so let's go back to ID okay because we are going to use the ID parameter for update let's go to actions and create method and let's select just put our patch I believe this is patch go ahead and select patch and save that alright so for this method we will be using ID and product name from the event body so let's go back to our lambda and let's go back to our IDE and update our lambda function okay so let's open up Excel update item J s alright and again right below the response body and status code let's extract the variables that we need so I'm gonna do Const brackets ID comma product name and this will come from json.parse event body okay pretty much the same thing we had for our post okay all right so let's see we need to replace the ID here so we can get rid of this hard-coded string and just do ID and then we need to replace the product name or replace this hard-coded string with product name all righty and that should do it so go ahead and save that select all and copy and let's head over to lamda let's go back to our functions and hexyl update item is what we want okay so go ahead and delete the existing code and copying our modified version okay save now let's go back to API gateway oh and we didn't finish it kind of left you halfway here but let's finish setting up our patch okay so again we can leave lambda function proxy integration we do want that and for our lambda function let's do hex all update item okay again leave the timeout as is and click on save okay okay let's click in the method request and let's change our authorization to AWS I am save that I forget to save these ones for some reason let's validate the body and save that one all right let's go down to request body and we should be able to use the same model that we set up before which was the product model so I'm going to add a content type application JSON and then I'm going to select the products model or the product model go ahead and save that alright and we are done here so let's go back up to method execution let's click into test and let's see all right so let's figure out which one we want to update here let's go back to dynamo dB let's see what we have to work with here so I'll change water pumps back to solar energy or solar panels so that's the one two three four five product all right so let's see path I'm going to do one two three four five headers I'm gonna do content type equals application JSON okay go down to request body and let's do CID equals make sure this is a string one two three four five comma and let's do product name now remember this is what this is the new value that we want so let's do solar panels all right all right that looks good so let's go ahead and click on test let's go back up to the top okay so far so good 204 that is what we expect for a successful request it's going to return no data that's fine there is our request body that looks good and I think everything else looks good here so let's check our table let's go over to dynamo DB and give it a refresh and there we go solar panels alright very good ok so let's see how are we doing on time here ok so we are done with our API gateway REST API so I think this is a good place to stop the video and in the next video we're going to integrate our REST API with our application UI ok and that way we'll we'll do a little bit of refactoring of the code so that we can actually have all of these systems working together in concert with our server list back end and our UI and we should by the end of the next video we should be able to actually add remove and update products via our UI alright so thanks for sticking with me and I will see you guys in the next video [Music] [Music] [Music]

Channel: Cloud Path

Views: 27,451

Rating: 4.971292 out of 5

Keywords: create a serverless app, aws serverless tutorial, aws serverless, serverless tutorial, aws api gateway, aws api gateway tutorial, api gateway tutorial, aws lambda tutorial, aws lambda, build a serverless app, aws serverless app, api gateway serverless, aws lambda serverless, build a rest api with api gateway, rest api api gateway

Id: xJvfcg9dW4U

Length: 29min 43sec (1783 seconds)

Published: Mon Feb 25 2019