AWS Lambda | API Gateway | DynamboDB | S3 | Develop & Deploy Interactive Dynamic Web App | Demo

hi and welcome to the channel to receive all the latest videos please subscribe to the channel through this video we are going to perform a mini project using the four different aww services is 3 lambda API gateway and dynamodb we are going to create an interactive web application using the combination of these 4 AWS services just to have a quick glance over the architecture diagram provided here we are going to host our web application in the s3 bucket which will have the data supplied to the database in the dynamo DB why are the api gateway a peg gateway is going to route our HTTP request to the lambda service which will create using the Python and deployed as a server server less and this whole system is going to walk as an interactive web application which will take a data from the user and persist it into the DynamoDB this project seems to be very exciting let's get started with the next steps launch browser and login to your AWS account click on services and locate the storage under storage history click on this 3 and click on the create bucket orange button give some meaningful name to the bucket I'm going to use the code school as a name to the bucket and you can choose the region according to your need I'm going to keep it as a default US is that's the default region for my account in here block all public access and check it and check the last one which is for cross account access rest of the things will be unchecked make sure you the acknowledgement and then click on create bucket it will finish up quickly so once your bucket is created you will see the successfully created bucket with the bucket name this is the bucket that I have just created so once your bucket is created click on the bucket name and then you will see nothing here so next step is to click on the upload and upload two of the files basically which is going to be HTML one is index dot HTML and second one is arrow dot HTML so I will click add files I have something which is pre already prepared for this demo and I'll be sharing these all these information which is required for the project to complete so I'll be leaving them into the description how you can download and get it to complete it so don't worry about it I will show you the contents as well so this is like a basic HTML I'm going to upload two of the files which is required to create my website using s3 so these two two files that I have selected and I'll let them upload clicking the upload button upload has a start at 50% how I present done so these two files are something that is already uploaded so I'm going to make them publicly available so mark them as they make public and once these two are public then you can click on one of them and take this URL you can copy this URL and open a new tab and put this this is wrong URL looks like it's not copied so I'm going to just paste again and there's the URL and this is website basically so what I have created is a very basic HTML page which has the HTML which contains a basic information about about this website right so this basic content so same thing inside the error dot HTML if you see a red dot HTML this is a page which we would like to display when there is website not accessible right so the moment we do not have access to the index dot HTML for certain region then we throw this page out right so we are good with the content voice I'll be sharing both of the files we'll leave the link in the description so you can directly download it and then you can use it for your project or definitely will be enhancing this to on the go so right now this is very basic pages and we are going to enhance it further into the next step so let's take baby steps here now going back at the bucket level I'll select the bucket over here or click on the bucket link and come back inside and from the properties click the static website hosting this option and use this bucket to host the website and give the names of the file that we have uploaded so we will call it as same name what we created the HTML files index dot HTML and error dot HTML and we are going to just save it this services enable now just to chase this quickly let's click on static website hosting and copy the endpoint from here and let's test that our website is up and ready awesome so the website is up and running now we can see our contents are coming using the end point given next step is to create the lambda function so let's locate the lambda function from here say lambda once the lambda function window opens then you can click on the orange button create function and we are going to let the default settings like this only thing is going to change first is the Python so we are going to stick to the Python version 3.8 so we will take the latest one and we'll give the function name lambda function name is hello world function we'll just click on a create function and this will take some time and it will take us to the editor where we can keep our code of the pythons you as a lambda function in here so if you see the default handler is created for us so what we are going to do we are going to replace it with the one that I have prepared already so I'll leave these details in the link and the description how you can get them for projected steps to complete I'm just going to copy it from my local file to here so I'll just replace it with the handler that I have so in this handler I'm not doing much this is all basic function right now we'll revisit and develop it with the dynamic functionalities so right now I'm just going to complete the wiring and then come back and then develop the functionality so this lambda function handler is going to just pick the two variable parameter as event or first name and last name and then return the as a combined name to the website or caller with hello from lambda as a prefix so let's test it we'll click on the selector test event create click on the configure test events and in the event we are going to just put this data set which I'll give you the data point L as well these are all minor data so you're sending the same event parameter which is first time and last name so you can have a full bar I'm going to give the event name as a hello world test event and then click on create click on the test now to see the result if everything is works so in our test program you can see this is the response that we are receiving so the lambda part is as of now fine we can just finally save our lambda function whatever the last changes that we have made to make sure all the changes are there let's move to the next part or next step where we will create the API gateway to call this lambda function so quickly click on services and then click on APA gateway let it load and then once it loads then we will locate the rest API and click on the orange button built for REST API since it's a REST API we have already selected that and then click on new API give a PA name as a hello world API and from the endpoint type we can put it as a edge optimized it will cache the responses for static information once you click on create APA the APA will be created let's click on actions by having the forward slash selected and create on click on create method we'll select the post okay and from here on the post we will let the lambda function be selected so that's the default option and we get our lambda function here so if we try if we will see our lambda function name and save it that's all we are going to do over here in this window alright so next thing we'll target is to enable the course it's a cross region connectivity for having the client in a different domain and server in a different so we'll go with this default settings we'll just click on the enable course we'll just say yes replace existing values we'll wait for the steps to complete next step is to deploy and test so we can click on the deploy from the action deploy API we can say new stage and give a stage name as a div and then deploy it alright so click on the Save Changes and copy this URL this is ready and we can test this so it should be invoking the lambda services so what we are going to do is we will just take this URL and hit it from the postman to test it I'm just launching the postman once first man is ready I'm just going to have this URL set over here and in the body part I'm going to have first-name lastname right this way and hit it let's see if we can hit yes so this is what message we get back from the server lambda function is hitting using the API gateway API gateway is successfully able to send our request to the server and the server less launches the lambda function and then it runs and gives the response as we can see here apparently let's move to the next service which is DynamoDB so we need a table let's click on DynamoDB from here once the DynamoDB service launches click on create table give a table name as a hello world database and give that I primary key as a ID rest of the things we can leave as it is click and then we will see the table is getting created we have to wait for the table to get ready for us so now it is ready this is something we required arrant while we are giving the permission to the lambda function to access this table and hit the queries so if we need a connectivity from lambda function which is a Python program to access the dynamodb function we have to allow this air in access to the Lamb of function so we'll be using the IM service to allow this create a policy and allow the lambda function to use this right I just copied this Aaron of this data table that we have created in a DynamoDB let's quickly move to the lambda function lambda once again and from the lambda services will configure the ion policy for this so click on the function that we have created in a previous to previous step click on the permission tab over here and then click on the roll it will open up in a new tab to I am basically and in here you click on the add in line policy and click the Jason switch to the Jason mode and then quickly take the permission that I have locally composed and kept it ready for this which I'll again put it in our description link which you can't use it so here whatever the link of Erin that we have copied in the previous step from the DynamoDB that has to be replaced over here so you have to replace this part and then say review policy give some good name over here to this so we can call it as a hello world dynamo policy policy and then create policy and you will see this policy is created and your policy is over here so we're good we can close this tab come back so in here let's go back to our configuration and then see our lambda function in the editor so replace it with another developed version so I have done all the basic development of this stuff in a background and this is what you have so I'll be keeping all this as a link to download so in here what I'm doing is I'm creating a dynamo DB connection and then connect keeping the reference of the table that we have created so we given a name as a hello world database so same name and then I'm having some kind of time stamp generated and what I'm doing is I'm taking this first name and last in the last lambda function that we were doing so same thing but that last function has capability of dynamo DB connection and then doing the put operation so this is like updating the item or inserting the item into the dynamo DB table with the ID as a name name is like a combination of first name and last name and then greeting time which is the now parameter which is nothing but the date and time parameter kind of timestamp which i'm concatenating together over here and then putting it in the database so this is what the next new lambda function is going to do I'll just save it if you want you can run the test you can click on the test and the last test event that we have created so the same data will be used you can see your test results over here in the top and you can see the same program only only change happen this time is the data has been stored into the dynamo DB so let's quickly verify so while we ran the test the dynamo DB was supposed to receive our basically the tables so here we are expecting one item entry so this is our test data so this first name last name together as an ID and the time stamp for the greetings so that's what we have here great fantastic so we have done the all almost always tips the final thing is we have to put our developed HTML page which is index dot HTML with the dynamic calls which is going to be JavaScript with the capacity of calling the restful web services to hit the API gateway and match whatever the architecture diagram we were looking into in the very first view of our slides so just get into the s3 bucket now and upload the final version of our index dot HTML one more upload which we are going to replace the older file older version of HTML which we can look at it as this way so in the properties let's see what we have right now so if we remember this very basic website that we got and quickly come back to the overview and upload and then final version of the index dot HTML which is here and we say just upload we don't need to change anything is the same thing well I think we are going to modify is once this upload is successful you select it and then say make public so you're going to make it public once again because by default everything is restricted on access so you have to allow the access and this time this is the final moment to test so if we refresh it we see the different website now wow it's a cool so then I give a name as a first name last name need H and Kumar and then call API and then we should be able to go and verify it will end up in our dynamo DB dashboard where we can see in the table our table name is hello volta database the item should have the new item with stem for stem which we created so this is the information that got persisted recently right so that's the end of our test just to quickly have a look on what we have into the index dot HTML so here I have some of their changes for you so this is a script a JavaScript basically which is handling the back end call which is invoking primarily to API gateway which we created and this is certainly leading to the server lists which is our lambda function and lambda function is having those data saved persisted inside DynamoDB table so this is the whole project which we have completed and that's the end of whole mini project so hope you enjoy it and hope you got this all working for you if not then please leave me comments if you enjoyed it then also leave me comments thanks

Channel: thecodeschool

Views: 5,701

Keywords: aws tutorial for beginners, aws cloud practitioner, aws solution architect certification, aws projects for beginners, aws lambda python, thecodeschool, niraj kumar, lambda dynamodb, lambda dynamodb py

Id: 95C9PkSwM1Q

Length: 23min 16sec (1396 seconds)

Published: Sun May 24 2020