Intro

This is how I created a simple activity logger with AWS API Gateway direct integrations with DynamoDB to record some nuisance activities of one of the neighbors.

There are few activities he does which annoy us, such as door slam, punch to the wall, and walking with klomps which make a heavy sound. He is not corporating, so before going for further actions, I wanted to keep track of when he does those activities. I wanted a quick way to record these as and when required easily, so I built this small app.

This post describes how I built this, literally in a couple of hours on a weekend.

Architecture

It is pretty basic, where I used direct integrations of API gateway with DynamoDB.

API has only 3 endpoints:

• To submit an activity (saves data in Dynamodb table)
• Retrieve activities for today (query data from Dynamodb table)
• Delete an activity (delete a record from Dyanamodb table)

Image: Architecture

How it works

Frontend

Image: Frontend

1. A simple VueJS application with a form submission.

2. Also lists the activities of the current day.

3. Delete functionality for a single activity in case added inaccurately.

4. Saved the web page as a shortcut on my mobile for easy access.

Backend

1. API Gateway direct integration configured to a Dynamodb table.

2. S3 static web hosting used to host the frontend.

3. Used AWS SAM as IaC with OpenAPI definition to define the API to be imported into API Gateway.

4. Authentication: I have restricted the access to the app for a given IP address/range ex: home network

5. There is no get all view/functionality added as I can simply export the whole table to csv from the AWS console or from cli as below:
   

aws dynamodb scan \
    --profile [Profile] \
    --table-name [TableName] \
    --query "Items[*].[activityDate.S,time.S,activityType.S,comments.S]" \
    --output text > output.csv

Code

Complete source code can be found at: https://github.com/pubudusj/simple-activity-logger

How to set up

You may deploy the stack using AWS SAM framework easily.

Prerequisites:

• AWS SAM cli + AWS profile set up
• npm (to build frontend)

Deployment

For convenient deployment, I have added a shell script that will deploy both backend and frontend and output the public url of the app.

1. Clone the repository and duplicate the .env.example file as .env in the root directory.

2. You need to set the parameters in this .env with your desired values.
   STACK_NAME - name of the stack
   PROFILE - AWS CLI profile. Keep as default if you use the default profile.
   REGION - AWS region in which you are going to create the stack.
   STAGE - AWS API gateway stage
   ALLOWED_IP - This is the IP you need to whitelist to access the project.

3. Once above env variables are set, please run:
   

chmod 755 deploy.sh && ./deploy.sh

Final public url of the system will be output.

To Cleanup

To clean up the project removing all the resources created in AWS, run:

chmod 755 tear-down.sh && ./tear-down.sh

Some lessons learned

1. CORS issues: Due to the open API definition, even the CORS settings are defined in the SAM template, it is not sufficient. Had to define the CORS settings in the API definition file adding relevant settings under responseParameters for each endpoint.

Please feel free to try this and let me know your thoughts.

Keep building keep sharing!