Website visitors counter backed with API Gateway, Lambda and DynamoDB - Part Two

I’ll continue on my previous lab here. I already set-up a DynamoDB table, Lambda function and API Gateway, now it’s time to write a little bit of JavaScript code for my website that’ll make calls to API and return the visits value from DynamoDB.

Services Covered

DynamoDB
Lambda
API Gateway

Lab description

Enable CORS in API Gateway
Write JavaScript for website
Create a Lambda Function
Create API Gateway
Create DynamoDB Table
Integrate API with Lambda function

Lab date

06-10-2021

Prerequisites

AWS account
Postman

Lab steps

Deploy your API, so it’s ready for testing. Next in in Actions drop down menu go to Enable CORS

Allow the GET and OPTIONS methods and leave rest of the values as default. This will activate CORS in you API.

Next you want to add a script in you HTML file that will make a call to API and display fetched value

<p class="counter"> The number of visitors to this website is </p>
  <p id ="body"></p>
      <script type = "text/javascript">
        var apiUrl = "https://y1gxvl8ow1.execute-api.eu-north-1.amazonaws.com/Dev";
            fetch(apiUrl)
               .then(response => response.json())
               .then(data =>{
                    var count = document.getElementById('body');
                count.innerHTML = data.body;
                console.log(data)});
         </script>

First line gives it some line to indicate what the number suppose to show. Then comes the field for the value with id body. The script fetches the value from and then returns the value to the html code on your website. On my website (still in developement stage) and in inspector it looks like taht, and obviously the number updates every name some hits the site or refreshes:

Additional configuration in CORS would be to limit down the accessibility of the API. Only your application should be able to make calls to the API. In your API Gateway, choose your GET method and then in both Method Response and Integration Response continute to HTTP Status 200:

The configuration should look like that:

And then in Integration Response add your websites ip address (the white field on my screen):

Lab files

Acknowledgements

Website visitors counter backed with API Gateway, Lambda and DynamoDB – Part Two