Building a Simple Web Application

Create a single-page serverless web application using Catalyst Advanced I/O Function and Catalyst Data Store that allows you to report or look up alien encounters in a city.

Introduction

This tutorial will help you build a simple web application, titled Alien City, that allows you to report and look up alien encounters in a city. Alien City is built as a single-page serverless application using Catalyst.

The client application will look like this:

You can access a working application and test its functioning here: alien-city.zohocatalystapp.com.

The Alien City application contains the following fundamental Catalyst components:

  • Advanced I/O Function: The Advanced I/O function can be coded either in Java or Node.js platform. It contains APIs that enable the user to report or check for an alien encounter in a city
  • Client: The front end of the application that is hosted on Catalyst through web client hosting

The Cat.ly application uses the following Catalyst features: 

  • Data Store: To store the database of the cities where alien encounters have been reported
  • ZCQL: To fetch the data from the Data Store through querying

We will use the Catalyst web console and the Catalyst Command Line Interface (CLI) to build this application. In this tutorial, we have provided the code for the files to be included in the Advanced I/O function and client components. You will just need to copy the provided code and paste it into the appropriate files as directed.

Application Architecture

The Alien City application's functioning can be described as follows:

  • Reporting an alien encounter
    A user enters the name of a city where they experienced an alien encounter. If the city had already been reported previously, the client displays a message notifying the user of it. If the city has never been reported, the data will be added to a table in the Data Store identifying the city.
  • Checking for an alien encounter
    A user checks for a record of an alien encounter in a particular city by providing its name. If a record of that city exists in the Data Store, the client will display a positive response. Otherwise, it will display a negative response.