Explore How Future of AWS Greengrass Hinges On DynamoDB (Part - II)

1. Introduction:

In this blog you’ll configure Amazon Simple Storage Service (S3) to host the static resources for your web application. In subsequent modules you’ll add dynamic functionality to these pages using JavaScript to call remote RESTful APIs built with AWS Lambda and Amazon API Gateway.

2. Create S3 Bucket:

Open S3 from Storage Service.
Create S3 Bucket.
All of your static web content including HTML, CSS, JavaScript, images and other files will be stored in Amazon S3.

Enter a unique name for your Bucket name.
If entered name is already exists than enter another name.
We can give name by adding meaning to it by putting “– “.
Example: registration-login.
Now, Click on Create Button located on left side.
Then Upload intended files in bucket.
Now, Click on Upload located on left side.

{
  "Version": "2012-10-17",
  "Statement":[
     {
       "Effect": "Allow",
       "Principal": "*",
       "Action": "s3.GetObject",
       "Resource": "arn:aws:s3:::[YOUR_BUCKET_NAME]/*"
     }
   ]
}

3. Additional settings:

Uncheck to Add Public full access to webpage, as here we are not taking any confidential details from them. But usually as per requirement check and uncheck it.
Now, In Permissions tag: Go in Bucket Policy to add below code.
In the confirmation modal that appears, type ‘confirm’ and then click Confirm.
Then Save the Bucket Policy by Clicking on the Save button located on right side at top.
Now in Properties tag: Host Static Website Hosting.
In resource, add your bucket name instead of what I mention here.

4. Static website hosting:

From the bucket detail page in the S3 console, choose the Properties tab.
Choose the Static website hosting card. Select Use this bucket to host a website and enter 1-register.html for the Index document.
Leave the other fields blank. Note the Endpoint URL at the top of the dialog before choosing Save.
You will use this URL throughout the rest of the workshop to view your web application.
From here on this URL will be referred to as your website’s base URL.
Click Save to save your changes.

Now, Copy the Endpoint URL.
Paste it on your Browser to open Registration Page.

This is Registration Page what we have uploaded on S3 bucket.
After filling details successfully SIGNUP.
That will direct you towards Login Page.
The data entered here will be stored in Dynamo DB which is the database of AWS cloud.
Using cookie in HTML file, if the user is already registered then by clicking on Login Here, the user will directly have redirected to login page

The main use of Registration page is; particular user can see only their data.
Using Ajax, API is called, Email Id and password are matched with the data registered in Dynamo DB.
After Successfully Logged in, the user will see the Raspberry Pi ID and the water Level of Tank.
The data which is Displayed are fetched from Database and at the reloaded time, the data might be updated as the database update.

5. Flow Diagram:

6. Conclusion:

After completing these implementation steps you should be able to access your static website by visiting the website endpoint URL for your S3 bucket.
Usually people are getting stuck where they have to host their webpage or say website. Whereas AWS service S3 under Storage is useful to host static website.
But you might think that how all the entered data are stored in DynamoDB through Lambda Function, then you need to direct to next blog for further.

GITHUB