Low code approach for building Serverless form using Kumologica

In this article we will be showing you how to building a simple form and its backend on a single lambda function. We will be doing this using a low code tooling, Kumologica.

For those who are new to Kumologica I would recommend to go through our articles and youtube videos to get an insight.

Training & Certification
For a limited time, Kumologica offers free online certification for developers on https://training.kumologica.com/

Form + Backend + function

The monolith function we are building will be having a two Kumologica flows.

1. Flow which will be hosting the UI form rendered from the server side.(GET /contact/form)
2. Flow which will be the backend endpoint that will be invoked when form is submitted. (POST /contact)

Prerequisite

1. Kumologica Designer — Download the designer for building the flow.
2. AWS account — For running the Kumologica flow as lambda. (Optional)

If you don't have an AWS account you can run this solution locally. All you need is Kumologica designer.

Implementation

We will be creating two flows in our Kumologica project. Let’s start building the first flow that will be rendering the contact form html. This flow will be hosted on the endpoint /contact/form.

Form flow

Steps

1. Open Kumologica Designer, click the Home button and choose Create New Kumologica Project.
2. Enter name (for example FormService), select directory for project.
3. press Create Button.

4. Drag and drop EventListener node to the canvas the provide the following configuration.

Display Name :  GET /contact/form
Provider : AWS
Event Source : Amazon API gateway
Verb : GET
URL : /contact/form

5. Add the Form node from the web category in the palette. Provide the following configuration and Save. The form is defined using JSONform UI schema. Wire the Form node to EventListener node.

Form node will not be part of the palette by default. You need to click on "Add more nodes" to install the Form node.
Submit path : http://localhost:1880/customer (This is for local testing.When deploying to AWS this endpoint has to change)
Form: {
  "schema": {
    "name": {
      "title": "Name",
      "description": "Nickname allowed",
      "type": "string"
    },
    "gender": {
      "title": "Gender",
      "description": "Your gender",
      "type": "string",
      "enum": [
        "male",
        "female",
        "alien"
      ]
    },
    "email": {
      "title": "Email",
      "description": "Personal email address",
      "type": "string"
    }
  }
}

6. Add EventListener End node and wire with the SQS node. Provide the following configuration. Wire the node to Forms node.

Display Name :  Success
Status Code : 200
Content-Type : text/html
Payload : msg.payload

The final response of this flow will be an html content.

Now let’s start building the second flow which is the API endpoint invoked by the form when submitted.

API endpoint flow

1. Drag and drop EventListener node to the canvas the provide the following configuration.

Display Name :  POST /contact
Provider : AWS
Event Source : Amazon API gateway
Verb : GET
URL : /contact/form

2. Add a Logger node and wire with the EventListener node. Provide the following message. Wire the logger node to EventListener node.

Message : msg.payload
Log format : JSON

3. Add EventListener End node and wire with the logger node. Provide the following configuration.

Display Name :  Success
Status Code : 200
Content-Type : text/html
Payload : <p>Form submitted</p>

The final response of this flow will be an html content.

Testing locally

Open the browser and type the following url : http://localhost:1880/customer/form . You will be seeing the following form displayed.

Form rendered by Form node

Provide the name, gender , email and click submit. you should see the following message : “Form submitted” . In Kumologica designer terminal you could see the submitted messaged printed by the API flow.

log printed by API flow

Deploying to AWS

1. Select AWS icon on the right hand side vertical tab of Kumologica designer, select your AWS Profile.

Note: If you haven’t mapped the your local AWS profile with the designer then you may follow the below video to configure it.

Mapping the AWS profile to Kumologica designer

1. Click Connect. If successfully connected will show the rest of the configuration options.
2. Set the Memory to 512mb and Timeout as 20 seconds.
3. Go to “Trigger” section under cloud tab and select the Amazon API Gateway trigger.

API trigger setting

Conclusion

This article has shown how easy to build a simple form and its backend on a single lambda function using Forms node in Kumologica.

Remember Kumologica is totally free to download and use. Go ahead and give it a try, we would love to hear your feedback.