Build a Serverless Application With AWS Lambda and p5.js

Build a Serverless Application With AWS Lambda and p5.js

Learn how to build a Serverless application with AWS Lambda and p5.js. The goal of this project is twofold: to showcase serverless computing technology; to create a minimalist editor for haiku. Diving into a real project is perhaps the best way to learn.

The goal of this project is twofold: 1) to showcase serverless computing technology; 2) to create a minimalist editor for haiku. Diving into a real project is perhaps the best way to learn.

Why a Dedicated Editor

We can use any text editor to write, but haiku deserves some special treatment for the following reasons:

  • Haiku is extremely short; we need an editor to center the poem instead of defaulting it at the top-left corner.
  • Haiku conform to 5–7–5 syllable count. A built-in syllable counter is helpful, but they do not exist in Microsoft Word or Google Doc.

With this analysis, our goal is clear.

  1. An editor allows three lines of text in the center.
  2. An on-demand syllable counter.
  3. Renders in elegant fonts. Because it’s poetry.

The Architecture

We’re building a mobile-friendly editing tool with an application layer for the syllable counter. To keep it simple, we can use p5.js to create and host the web presence of the application.

The syllable counter can be implemented using Lambda and API Gateway on AWS, and we can use Python as the programming language for Lambda.

Serverless Computing With Lambda & API Gateway

AWS Lambda is a cost-effective way to create cloud-based services. For applications with moderate traffic, Lambda is much cheaper than keeping a virtual machine running. Lambda is also easy to maintain and fast to deploy.

1) Prepare AWS layer

Python excels with rich third-party library support. The best practice to use the external library is via AWS layers.

For our project, we need an external library syllapy for syllable count. We need to prepare a zip file to include the library, which will be uploaded to Lambda.

Let’s create a directory for syllapy and run the following command inside that directory.

mkdir python
cd python
pip3 install syllapy -t .

cd ..
zip -r python.zip ./python

We’re ready to upload the zip to our Lambda function now. Choose Python 3.8 as runtime and hit the [Create] button.

Create AWS Lambda Layer screenshot

Fig 1. Create AWS Lambda Layer

2) Create a Lambda function

Create a Lambda function z3syl_count, and choose runtime Python 3.8.

Create function screen screenshot

Fig 2. Lambda -> Create Function

Under Lambda [Configuration] [Designer], click on Layers to reveal the Layers panel.

Lambda [Configuration] -> [Designer] screenshot

Fig 3. Lambda [Configuration] -> [Designer]

Click on [Add a layer].

Lambda Add layer screenshot

Fig 4. Lambda Add layer

The Python program is straight forward. It expects a JSON string{‘text’:’the poem separated by \n’} as input. The default entry point for the Lambda function is lambda_handler, and HTTP POST data is passing into the parameter called event.

3) Configure REST API gateway

Under Lambda [Configuration] [Designer], click [Add trigger] (as shown in Fig. 3), choose [REST API], and then click [Add] Button.

Lambda Add trigger screenshot

Fig 5. Lambda Add trigger

Click on the name z3syl_count-API of the newly created API.

AWS API Gateway screenshot

Fig 6. AWS API Gateway

Configure API Gateway. We only need HTTP POST. Lambda is hooked up under [Integration Request].

AWS REST API screenshot

Fig 6. AWS REST API

javascript programming aws serverless developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire AWS Developer

Looking to Hire Professional AWS Developers? The technology inventions have demanded all businesses to use and manage cloud-based computing services and Amazon is dominating the cloud computing services provider in the world. **[Hire AWS...

Hire Dedicated AWS Developer

Want to Hire AWS Developer for cloud computing services? At **[HourlyDeveloper.io](https://hourlydeveloper.io/ "HourlyDeveloper.io")**, we leverage maximum benefits from the AWS platform ensuring prominent Solutions for business requirements....

How To Unite AWS KMS with Serverless Application Model (SAM)

AWS KMS is a Key Management Service that let you create Cryptographic keys that you can use to encrypt and decrypt data and also other keys. You can read more about it here.

A Serverless Shipping Application using JavaScript, VueJS and AWS

Build a servlerless web app using JavaScript and VueJS, and using a number of AWS Service. Front end is VueJS hosted in S3 & CloudFront, Backend will use API Gateway & Lambda Functions, Authentication will be handled by AWS Cognito, Local label printing service will be built with .NET Core

Learning JavaScript: Development Environments for JavaScript Programming

One of the nice things about learning JavaScript these days is that there is a plethora of choices for writing and running JavaScript code. In this article, I’m going to describe a few of these environments and show you the environment I’ll be using in this series of articles.