Using various services of AWS to build an end-to-end Web Application...

Learning theory is simple, but putting it into practice is difficult and essential to really grasp the topic.

In this blog, we will be building a simple Web Application using various services of AWS.

Workflow of the Project:

Understanding the services which we will be using for building web application.

AWS Amplify: To create/host webpage.
AWS IAM: To handle various permissions and accessing request across services.
AWS Lambda: To run your code for any type of application.
AWS DynamoDB: NoSQL Database used to store and retrieve the data
AWS API Gateway: To route HTTP request to Lambda/To invoke the Lambda Functionality.

Github: Repository for the Code

Prerequisite: Create a free tier AWS Account Click here

Let's get started!!
We are going to make a simple "Power of Math" Application to understand these services

Step 1: Let's deploy our code to AWS Amplify for building and hosting our webpage

• Search for Amplify in the search bar

• Click on Deploy with Git Provider and continue..

• Starting with the manual deployment
  1. Name your application
  2. Write environment name as (dev)
  3. Select Method Drag and Drop
  4. Drag a zip file of (index-ORIGINAL.html) page you want to host ( Code/File uploaded on github )
  5. Click save and deploy!!

Now you can see the Domain Link which you can share with your friends once the project is completed!!

This is how your live page should look where the users can navigate to..

Congratulations on Successful Deployment...

Step 2: We will now use Lambda Function which will help us to do calculations for our application.
Lambda function is a bit of code that runs and responds on some trigger.

In our project, the input values given by the user will trigger the lambda function to return the results for the inputs.
Lambda Functions are serverless (you don't have to manually setup any server) AWS manages everything behind the scenes.

We will use Python "math" Library to do the necessary calculations.

For setting up Lambda Function,
Search for Lambda in the search bar...

1. Click of create function ( top left corner )
2. Select ( Author from Scratch )
3. Give your function a name ( eg. powerofmathfunction )
4. Select Runtime as Python 3.9
5. Keep the rest as default
6. Click on create function

Replace the code with the ( PowerOfMathFunction-Lambda-Original ) code provided on Github. We will update the code later .

Importing json utility library and python math library to do the calculations.
User will be passing two numbers ( base and exponent ) we will grab those values through the event object and plug in them into ( math.pow) for power which will give us the result , later we will return the result down in the json object.

Save the code!!
Click on Deploy.
Now let us Test our Function.

1. Click on the drop down arrow near Test button
2. Select Configure test event

1. Click on create new event.
2. Enter the Event Name.
3. Down below pass the values ( base and exponent ) as 2 and 3.
4. Scroll down and click on Save.

We have successfully configured the Test Event. Now to run the test, Click on Test button and check the results. It should now return "Your test result is 8.0".

Step 3: To invoke the Lambda Function we need a public endpoint or URL that can be called to trigger that function to run.

API Gateway provides tools for creating and documenting web APIs that route HTTP requests to Lambda functions.
An API gateway is an API management tool that sits between a client and a collection of backend services.

Let's build our own API!!
Go ahead search for API Gateway in the search bar..

1. Click on Create API
2. We will be using REST API, click on Build Button.
3. Give a name to your API.
4. Keep rest as default and click on Create API Button.

This is an empty API created, there are no methods that somebody will call. Let's do that next...

1. In the left select Resources.
2. Select the backslash ()
3. On the actions menu, select ( Create Method )
4. Select the type of Method as POST( user will be sending the values).
5. Click the checkmark.
6. Enter your Lambda Function name.
7. Click on save.

1. Select Post and click on Enable CORS( Cross origin resource sharing ).

Web application running in one origin or domain(Amplify) will be able to access resources from different origins or domains(Lambda, Dynamodb etc)

1. Enable CORS and Click on YES.
2. In the actions, select deploy API.
3. Give Deployment stage as New Stage.
4. Give Stage name as dev.
5. Click on Deploy.

Copy the invoke URL and save it in the text file.

To test if the API is working,

1. Go to Resources, Click on Post and Select Blue lightning bulb below Test.
2. Pass the Base and the Exponent values in the Request Body.

1. Click on Test. You should get the result as 16.0.

Step 4: Creating a Database to store/return the math results.

We will be using AWS DynamoDB.
Amazon DynamoDB is a fully managed, serverless, key-value NoSQL database designed to run high-performance applications at any scale.

1. Search for DynamoDB in the search bar

1. Click on Create table.
2. Enter Table Name and Partition key
3. Leave the rest as default and Click on Create Table.
4. Click on the table which is you have created, in the General information, go to Additional info and copy the ARN provided.
5. Save the ARN in a text file.

Step 5: Now we have to give permissions to our Lambda Function to write to this table using AWS IAM.

1. Go back to Lambda Function.
2. In the Configuration section, Click on Permissions and the on the Execution Role Provided.

1. In the Add permissions, click on create inline policy.

1. Click on the JSON tab and add the below policy { "Version": "2012-10-17", "Statement": [ { "Sid": "VisualEditor0", "Effect": "Allow", "Action": [ "dynamodb:PutItem", "dynamodb:DeleteItem", "dynamodb:GetItem", "dynamodb:Scan", "dynamodb:Query", "dynamodb:UpdateItem" ], "Resource": "YOUR-TABLE-ARN" } ] }

With this policy, the Lambda Function will have the permissions to Put, Delete, Get, Scan, Query, and Update Item in DynamoDB.

DONOT FORGET TO ADD THE TABLE ARN WHICH YOU COPIED EARLIER

1. Click on Create Policy and give name to the policy and again click on Create Policy.

Now let us update the Lambda Function to go and write to the database!!

6 Copy the (PowerofMathFunction-Lambda-Final) code from the file provided on Github.

1. Go to the Lambda Function and paste the new code.

MAKE SURE YOU CHECK THE TABLE NAME OF YOUR DATABASE AND UPDATE IT IN THE CODE.

1. Save and Deploy the code.
2. Test your function again.
3. Now, go back to DynamoDB, click on Explore table Items.

1. Scroll down. You will now see the results stored in our Database.

Step 6: Let's now connect our AWS Amplify to AWS API Gateway!!

1. We will now update the index.html page
2. Open the index.html file in notepad++

1. Edit the code ( Paste the final code provided on Github as index.html )
2. Enter the API Gateway URL copied earlier when creating the API Gateway.
3. Update the code with your API URL.

1. Create a zip file.
2. Come back to AWS Amplify, add the updated/new zip file and click on deploy.

1. Click on the domain link and there you go....

Your very own end-to-end application using different AWS services is ready!!

On our html page, as soon as the user inputs the values and clicks on results that script is going to call the API Gateway that triggers the Lambda Function to do the calculations and the result gets written to the database and we will get the message returned to us in the browser showing us the results through API Gateway.

Thank you for reading. All suggestions are appreciated!

Comments

[Rohan Hazari]

Wow what a coincidence looks quite similar to what she did in this video