This is an official tutorial for building a full stack web application to operate database.

https://aws.amazon.com/getting-started/hands-on/build-web-app-s3-lambda-api-gateway-dynamodb/

I will show the process  with screenshot below when I followed this tutorial. That means I describe all the traps below and I am sure you can build one successfully if you follow me. The article involves AWS Amplify, AWS API GateWay, AWS Lambda, AWS dynamoDB.

Now Firstly we should follow last article to create a IAM user and authorize it with a few roles for building this app. You know we should not use root user account for explicit workload.

1.Login as root user and add a few roles to a IAM user.

These are all the necessary policies.

2.Login the IAM user and follow the tutorial step by step.

Firstly create a table use AWS DynamoDB.

The table name should be the same as tutorial and the region must be "US East(N.Virginia) us-east-1". I will explain this later.

Then click the Items menu in the left  and chose your table. You should find no results because you never insert data into the table.

Here we should note down the ARN of this table.It is useful later.

Create a lambda function.

You only need to input the function name and choose java11 in the dropdown. Here I choose to use java to build backend.

Then click create function button

After that, config the permissions of the function so that it has the access to write or read the DB table we created just know. Click the role link below.

click Add inline policy.

Replace the Json with the json string below according to the tutorial.

and replace the YOUR-TABLE-ARN with the ARN of the DB table. So we finish the step to add permission.

{"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"    }    ]}

Next we start to define the code content of the function. The jar file provided by the tutorial finish this. So we just need to download it and upload it as follow.

Then we need to update the handler of this function into "com.example.app.SavePersonHandler::handleRequest" because this is the entry method of the jar file. You can confirm this by unzipping the jar file.

Then the definition of the function is finished. We can test it now according to the tutorial.

Attention: the jar provided by AWS tutorial can only insert data into the table HelloWorldDatabase in us-east-1 region. That 's why we must create table in this region just now. Of course you can build a jar and designate the connection info by yourself as long as you have enough confidence.

You can find the inserted data in the db table if everything goes correctly.

Create a AWS API Gateway to distribute request to the lambda function.

Just follow the tutorial of AWS step by step. I want to emphasize that when you create a http method, you should designate the correct region of the lambda function you created.

Attention: every time you update your api, you must redeploy it.

Deploy API

At this moment, you finish the backend, You can test it use postman or some others. I succeed to test it using angular demo locally.

Create a front static application using AWS Amplify.

If you follow all the steps of the tutorial, you will fail. Because the index.html provided by the tutorial has some errors.

I updated it and It succeed. The content of the updated one is as below.

Just replace the following lines.

// make API call with parameters and use promises to get response

fetch("YOUR-URL", requestOptions)

  .then(response => response.json()

  .then(res => alert(res.message)))

  .catch(error => console.log('error', error));

enter your test data and You will find it is inserted in the db table.

Congratulations.