Devtej
Chapter 2: Site counter through API Gateway, DynamoDB and Lambda

Chapter 2: Site counter through API Gateway, DynamoDB and Lambda

teju fam's photo
teju fam
·

4 min read

In this chapter, I'll walk you through how I built a site counter using the API Gateway, Lambda, and DynamoDB. We will be creating a serverless framework, managing incoming traffic, and storing data in a seamless NoSQL database.

1: Set up DynamoDB

With DynamoDB, you can create database tables that can store and retrieve any amount of data and serve any level of request traffic.

  • Navigate to the DynamoDB service.

  • Click on the "Create table" button and fill in the table name e.g. :

    • Table name: "visitor_count_ddb"

    • Primary key: "id" (type: String)

  • Click on the "Create" button to create the table.

  • In the "Items" tab, click the "Create item" button.

    • Enter the following information for the item:

      • "id": "Visits"

      • "value": 0 (type: Number, the screenshot below illustrates a prebuilt Database)

  • Click on the "Save" button to save the item.

    2: Create a Lambda function

    • Navigate to the Lambda service.

    • Click on the "Create function" button and select "Author from scratch".

    • Enter the following information e.g. :

      • Function name: "desired name here"

      • Runtime: Choose the desired programming language (in my case, Python 3.8)

      • Create a new execution role or use an existing one (this creates an IAM role that allows you access to lambda

      • Click on the "Create function" button.

Python code used in the code section of the function. Created environmental variables for the code. in this case;
Key: "databaseName"

  • Value: "Visits"

  • ```python import json import boto3 import os

    Initialize DynamoDB boto3 object

    dynamodb = boto3.resource('dynamodb')

    Set DynamoDB table name variable from env

    ddbTableName = os.environ['databaseName'] table = dynamodb.Table(ddbTableName)

def lambda_handler(event, context): try:

Try to update the item

table.update_item( Key={ 'id': 'Visits' }, UpdateExpression='SET Visits = Visits + :value', ExpressionAttributeValues={ ':value': 1 } ) except:

If the item doesn't exist, create it

table.put_item( Item={ 'id': 'Visits', 'Visits': 1 } )

Retrieve the updated item

ddbResponse = table.get_item( Key={ 'id': 'Visits' } )

Access the item's attributes

item = ddbResponse.get('Item') if item is not None: visits = item.get('Visits', 0) else: visits = 0

Format the response body

responseBody = json.dumps({"count": int(visits)})

Create API response object

apiResponse = { "isBase64Encoded": False, "statusCode": 200, 'headers': { 'Access-Control-Allow-Headers': 'Content-Type', 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'OPTIONS,POST,GET' }, "body": responseBody }

Return API response object

return apiResponse


    * In the Designer view section, you attach the trigger with the "Add triggers" button and add an HTTP API Gateway trigger (to trigger the count).

        * API: "Create a new API"

        * Security: "Open" (for testing purposes)

        * API Type: HTTP API

        * Security: Open

        * Tick the ‘Cross-origin resource sharing (CORS) box - CORS with API Gateway allows you to control and secure access to your APIs from web applications hosted on different domains. Properly configuring CORS settings ensures that your API remains secure while still allowing authorized clients to access its resources.

    * Select "Add" button to add the trigger.


    ### 3: Setting up AWS API Gateway

    * Navigate to the API Gateway service.

    * Navigate to the "visitor\_count" API we just created

        ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1709210148164/e96c501b-b965-44c0-b7a8-25bcf8dd33e3.png align="center")

    * Add your website’s URL to the ‘Access-Control-Allow-Origin-

        ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1709210271318/45265ba0-829d-46ec-918c-c42994a967ab.png align="center")

    * Note the "Invoke URL" for the API, which will be used in the next step.


    ### Step 4: Connecting the API with the website

    * Now we have to implement AJAX request on the website (Exchange data with the webserver) to the API Gateway endpoint using the "Invoke URL" we got in the previous step to activate the function and get the site count updates.


    ```plaintext
    // GET API REQUEST
    async function get_visitors() {
        // call post api request function
        //await post_visitor();
        try {
            let response = await fetch('https://v6a34dzaoe.execute-api.eu-west-2.amazonaws.com/default/terraform_lambda_func', {
                method: 'GET',
            });
            let data = await response.json()
            document.getElementById("visitors").innerHTML = data['count'];
            console.log(data);
            return data;
        } catch (err) {
            console.error(err);
        }
    }


    get_visitors();
  • Display the visitor count on the website.
    <p>Site Count: <span id="visitors"></span></p>

Step 5: Test the solution

  • Give the website a quick refresh to see the count increase

DynamoDBapigateway