Basic Angular forms app with AWS Serverless Backend in Python — Part 2

This guide follows on the work done in Part 1, by the end of this article you will have a fully working app with a Python Serverless backend and AWS DynamoDB database.

Here is the plan:

  • Set up an account with AWS, create a basic service with the Serverless Framework using the Python template and deploy it.
  • Write the functions needed to run our app and deploy the API.
  • Create services in Angular and update the components to add HTTP requests to our new API.
  • Done !

A demo of the app available here.

Set up AWS and the Serverless Framework:

Creating a new Amazon Web Services account is quite easy and straight forward just follow the steps in the documentation. And since we are not doing any heavy cloud computing, you will fall well within the free tier which gives you 1 million free Lambda requests per month.

Make sure you have Python 2.7 installed on your machine then go ahead and install Serverless with the following command

npm install -g serverless

Next you need to set up your provider credentials by following the steps here.

Now you are ready to create a new service and deploy it using the following commands

$ sls create --template aws-python --path inputform-backend
$ cd inputform-backend
$ sls deploy

Once you create the boilerplate you should see on the terminal window the version of the framework you’re using, v1.10.1 in this case

Terminal boilerplate

Deploying should take a minute or two and once the process is done, you should see the name of the service and the functions deployed. The boilerplate hello function was deployed in this case

Terminal deploy

The lambda function should be live on your AWS console as well.

Now we need to create the lambda functions starting by creating 4 Python files and update the serverless.yml file. We can go ahead and delete the handler that got created for the hello function as we won’t need it.

First up is the create.py file, this is the function that will load data into our DynamoDB. As you can see, we are accounting for all the data that will be passed from the forms: firstName, lastName, email, comments and options.

The second python script will scan the database and returns a list of all the profiles available in the database using a http get method.

The third script is pretty similar to the previous one but in this one we will query the database using the id key to retrieve only one profile rather than the whole list.

This final script is just a workaround for a bug in Python where the JSON encoder is unable to handle decimal numbers.

Finally we need to update the serverless.yml file by adding the functions with their corresponding methods and paths as well as the resources for the DynamoDB tables. Make sure that the service name is the same as the one used to deploy it.

The backend is now done and the directory should look similar to this.

├── create.py
├── decimalencoder.py
├── get.py
├── handler.py
├── list.py
└── serverless.yml

Now deploy the functions by running

sls deploy

This time when the deployment is done, we will end up with actual endpoints for our API and the corresponding methods.

We can test that the functions are correctly running by testing them in the terminal with an example. Make sure you use the proper URL that you get from deploying the service.

curl -X POST https://vwabl3g6ig.execute-api.us-east-1.amazonaws.com/dev/form --data '{"firstName":"Dipper", "lastName": "Pines", "email":"dipper@gmail.com", "comments":"Gravity Falls is weird", "options":"Tabs"}'

If the call is successful you should see a JSON dump on the terminal with the information that just got entered with its id and time stamp. You can also see the item added on the AWS console for DynamoDB.


Add services and update the HTML form

First we need to create the service that will handle the HTTP requests.

Create a directory called services inside the app folder and inside that folder create a file called database.services.ts. This service will have two main usage cases: listing the entries available in the database and creating new entries. The API_URL will be the same as the one you created from deploying the lambdas previously.

After the service is set up we need to call these methods in the forms.component.ts. After injecting the DatabaseService in our constructor and added it to the providers, we can access the methods created and pass the input gathered from the form.

Now we need to update the forms.component.html to bind the information gathered as well as validate it.

The database.component.ts is responsible for scanning the database using the database service and calling the getInfo method then storing the objects in an array.

Finally the database.component.html will display the items on the database by looping over the list using *ngFor. The data will be displayed in a table.

At this point, you should have a working app that takes input from the user, stores it in DynamoDB and displays it in a table.

Some improvements that can be made:

  • Add an API Key
  • Add a delete option on the table
  • Make use of the form/{id} to display user specific information
  • Display the profile in a different form — cards maybe ?
  • Unit tests, unit tests, unit tests and unit tests.

The Github repo can be accessed here:

A demo of the app available here.

Please keep in mind that I am not an expert and decided to write this guide to help me better my understanding of this stack and hopefully help others as well. Feel free to ask me any questions and I will answer them to the best of my ability and if you see any improvement that can be made please share them.

If you found this guide helpful tweet me @zaksoufiani and Thank you !

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.