# Java



--------------------------------------------------------------------------------
title: "Introduction"
description: "Create an application and host it on Catalyst using the Catalyst AppSail service and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.666Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city-appsail/springboot/introduction/"
service: "All Services"
related:
- Project Directory Structure (/en/cli/v1/project-directory-structure/introduction/)
- Catalyst SDK for AppSail (/en/serverless/help/appsail/key-concepts/catalyst-configurations/#implementing-catalyst-sdk-in-appsail/)

--------------------------------------------------------------------------------


# Alien City Using AppSail

### Introduction

This tutorial will help you build a Java Spring Boot web application called **Alien City** and host it using Catalyst's serverless offering, AppSail. AppSail is a highly scalable PaaS component that allows you to code your application in any programming framework of your choice, independent of any Catalyst-specific coding structures, and host it on Catalyst with ease.

**Alien City** is a fun application that allows you to search for and report alien encounters in a city. 

The web application will appear as follows:



You can access a working application and test its functioning here: {{%link href="https://alien-city.catalystserverlessapp.com/app/"%}}Try the App!{{%/link%}}

The Alien City application utilizes components from the following Catalyst Services:

1. {{%link href="/en/serverless/getting-started/introduction/" %}}**Catalyst Serverless**{{%/link%}}:
    - {{%link href="/en/serverless/help/appsail/introduction/" %}}AppSail{{%/link%}}: To host the independent Java Spring Boot application. We will be building the front-end of the app as well as the backend logic, and bundling them together to deploy on AppSail.

2. {{%link href="/en/cloud-scale/getting-started/introduction/" %}}**Catalyst Cloud Scale**{{%/link%}}:
    - {{%link href="/en/cloud-scale/help/data-store/introduction/" %}}Data Store{{%/link%}}: To store the database of the cities where alien encounters have been reported.
    - {{%link href="/en/cloud-scale/help/zcql/introduction/" %}}ZCQL{{%/link%}}: To fetch data from the **Data Store** through querying.

You will use the {{%link href="https://console.catalyst.zoho.com/" %}}Catalyst web console{{%/link%}} and the {{%link href="/en/cli/v1/cli-command-reference/" %}}Catalyst Command Line Interface{{%/link%}} (CLI) to build this application.

You will be given the code for the files to be included in the application in this tutorial. You will just need to copy the 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**<br />A user enters the name of a city where they experienced an alien encounter. If the city had already been reported previously, the app 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**<br />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 app will display a positive response. Otherwise, it will display a negative response.
<br />



--------------------------------------------------------------------------------
title: "Prerequisites"
description: "Create an application and host it on Catalyst using the Catalyst AppSail service and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.666Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city-appsail/springboot/prerequisites/"
service: "All Services"
related:
- Catalyst CLI Documentation (/en/cli/v1/cli-command-reference/)

--------------------------------------------------------------------------------


# Prerequisites

Before you begin building the application, you must have the following prerequisites installed on your system:

1. {{%link href="/en/cli/v1/cli-command-reference/" %}}Catalyst CLI{{%/link%}}<br />Catalyst CLI contains a host of tools that allow you to initialize, develop, test, and deploy the components of your application from your local machine. We will be working with Catalyst CLI in this tutorial.<br /> You must perform the following actions:

    * **Install Catalyst CLI**: Catalyst CLI is installed through NPM. You must therefore have NPM and Node.js installed on your system before you install the CLI. Refer to the {{%link href="/en/getting-started/installing-catalyst-cli/" %}}Install Catalyst CLI help page{{%/link%}} for details on the pre-requisites and the steps to install it.
    * **Log in to Catalyst CLI**: After you install Catalyst CLI, you must authenticate the CLI with your Catalyst account before using it. Refer to the {{%link href="/en/cli/v1/login/login-from-cli/" %}}CLI Login help page{{%/link%}} for the steps to log in from Catalyst CLI and the various options available for it.

2. **Any IDE tool for application development for HTML and JavaScript**<br />You can use any IDE to code your application. Some popular choices include Visual Studio Code, IntelliJ IDEA, Eclipse, and Sublime Text. Download and install an IDE of your choice on your system.

3. **Install Apache Maven Build Automation Tool**<br />To complete this tutorial, you need to install Maven in your local system. Install the compatible version from your system using this {{%link href="https://maven.apache.org/download.cgi" %}}link{{%/link%}}. 

{{%info image="/images/tutorials/todo-list/vscode.png"%}}If you are a Visual Studio Code IDE user, you can install the {{%bold%}}Catalyst Tools{{%/bold%}} extension, and use your IDE itself in place of the CLI. You can find more details about the Catalyst VS Code extension from this {{%link href="/en/catalyst-extensions/vs-code-extension/introduction/" %}}help section{{%/link%}}.{{%/info%}}

--------------------------------------------------------------------------------
title: "Create a Project"
description: "Create an application and host it on Catalyst using the Catalyst AppSail service and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.667Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city-appsail/springboot/create-project/"
service: "All Services"
related:
- Catalyst Console (/en/getting-started/catalyst-projects/)

--------------------------------------------------------------------------------


# Create a Project

Let’s {{%link href="/en/getting-started/catalyst-projects/#creating-a-catalyst-project" %}}create a Catalyst project{{%/link%}} from the Catalyst console.

1. Log in to the {{%link href="https://console.catalyst.zoho.com/baas/index" %}}Catalyst console{{%/link%}} and click **Create New Project**.
<br />

2. Enter the project’s name as "**AlienCity**" in the pop-up window, and click **Create**.


Your project will be created, then opened.

<!-- You can access the project later by clicking **Access Project**.
 -->

--------------------------------------------------------------------------------
title: "Create a Table"
description: "Create an application and host it on Catalyst using the Catalyst AppSail service and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.667Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city-appsail/springboot/create-table/"
service: "All Services"
related:
- Data Store (/en/cloud-scale/help/data-store/introduction/)

--------------------------------------------------------------------------------


# Create a Table

Now let’s create a table in the {{%link href="/en/cloud-scale/help/data-store/introduction/" %}}Data Store{{%/link%}} of the **Alien City** project. This table is used to store records of city names where aliens were seen.

To create a table:

1. Navigate to the *Cloud Scale* section of the console, then click **Start Exploring**.
<br />

2. Navigate to **Data Store** under *Storage* and click **Create a New Table**.
<br />

3. Enter the table’s name as "**AlienCity**" and click **Create**.
<br />

{{%note%}}{{%bold%}}Note:{{%/bold%}} Ensure that you enter the name exactly as instructed, because the application's code contains the same name.{{%/note%}}

The table is now created.

Next, let’s create a column in the table to store the names of the cities.

1. Click **New Column** in the *Schema View* section for the table.
<br />

2. Enter the column’s name as "**CityName**." Select the data type as **Var Char** and enter the max length as "**100**." Click the **Is Unique** toggle switch to enable it.


You can learn about the various data types supported by Catalyst, as well as the other properties of a column, from the {{%link href="/en/cloud-scale/help/data-store/columns/" %}}Data Store help page{{%/link%}}.

3. Click **Create**.


The column is now created and listed in the *Schema View* section.

<br />

--------------------------------------------------------------------------------
title: "Create a Spring Boot Project"
description: "Create an application and host it on Catalyst using the Catalyst AppSail service and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.667Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city-appsail/springboot/initialize-springboot/"
service: "All Services"
related:
- Catalyst SDK for AppSail (/en/cli/v1/initialize-resources/introduction/)
- Spring Boot - JAR with AppSail (/en/serverless/help/appsail/help-guides/java/spring-boot/#spring-boot--jar)
- Spring Boot - WAR with AppSail (/en/serverless/help/appsail/help-guides/java/spring-boot/#spring-boot---war)
- Spring Boot Official Documentation (https://spring.io/guides/gs/spring-boot)

--------------------------------------------------------------------------------


# Create a Spring Boot Project

For this tutorial, we are going to create a **Spring Boot - JAR** project using the Spring Initializr website.

1. Go to the {{%link href="https://start.spring.io/" %}}Spring Initializr website{{%/link%}}

2. Enter the required details in the following manner:
    - Select **Maven** as *Project*, **Java** as *Language*, and the latest Spring Boot version (avoid versions labeled SNAPSHOT or M).
    - Enter "**com.catalyst.appsail**" as the *Group*, and "**aliencity**" as the *Artificat*. The *Name* and *Package name* fields will be automatically generated.
    - Select **Jar** as the *Packaging*, and **17** as the *Java* version.
    <br />

3. Click the **ADD DEPENDENCIES** button, on the right side of the screen.
    <br />

4. Search for *Spring Web* in the drop-down and select the dependency. This step will install all the necessary dependencies required to build a Spring Boot web application when you generate the package.
    <br />

5. Confirm all your selections, and click **Generate**.
    <br />

The aliencity Spring Boot project will be downloaded to your local system as a zip file.

Unzip the downloaded file and this directory, {{%badge%}}aliencity/{{%/badge%}} will be our local directory where we initialize the *Catalyst AppSail* service for our project. Along with all the required dependencies, it will also contain the {{%badge%}}AliencityApplication.java{{%/badge%}} file. This file will contain the logic that allows you to run the application on Spring Boot.  

The {{%badge%}}aliencity/{{%/badge%}} **Spring Boot - JAR** directory will look like this:


{{%note%}}{{%bold%}}Note:{{%/bold%}} This tutorial has created a Spring Boot project to demonstrate building a {{%bold%}}Spring Boot - JAR{{%/bold%}} project, and deploying it as an {{%italics%}}AppSail{{%/italics%}} service. You can learn how to do the same with {{%bold%}}Spring Boot - WAR{{%/bold%}} projects from this {{%link href="/en/serverless/help/appsail/help-guides/java/spring-boot/#spring-boot---war" %}}help documentation{{%/link%}}.{{%/note%}}

For more information on how to create a Spring Boot project, you can visit their {{%link href="https://spring.io/guides/gs/spring-boot" %}}official help documentation{{%/link%}}.<br />

--------------------------------------------------------------------------------
title: "Initialize Your Catalyst Project"
description: "Create an application and host it on Catalyst using the Catalyst AppSail service and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.667Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city-appsail/springboot/initialize-project/"
service: "All Services"
related:
- Initialize CLI Resources (/en/cli/v1/initialize-resources/introduction/)
- Project Directory Structure (/en/cli/v1/project-directory-structure/introduction/)

--------------------------------------------------------------------------------


# Initialize Your Catalyst Project

You can now begin working on your Catalyst project from the CLI. The first step is to initialize the project in an empty directory. This will be the home directory of your project and all of the project files will be saved in it.

You can learn more about this from the {{%link href="/en/cli/v1/project-directory-structure/introduction/" %}}Project Directory Structure help page{{%/link%}}. You can learn about initializing a project in detail from the {{%link href="/en/cli/v1/initialize-resources/introduction/" %}}CLI help documentation{{%/link%}}.

For this application, you will be initializing the AppSail component. The AppSail component will be initialized in the Java programming stack.

1. Launch Catalyst CLI terminal in the {{%badge%}}/aliencity{{%/badge%}} directory you just unzipped, and execute the following CLI command.
{{%cli%}}catalyst init{{%/cli%}}

Navigate using the **arrow keys** and select your preferred portal and click **Enter**. If you have no other organizations associated with the account, then the default will be selected automatically.

You can find out more about Catalyst’s multi-org portal feature in this {{%link href="/en/getting-started/catalyst-organizations/#access-the-multi-org-portal" %}}help document{{%/link%}}.

2. The CLI will now ask you to associate a Catalyst project with the directory. Associate it with the project that we created earlier from the console. Select **Alien City** from the list and click **Enter**.


3. Select **AppSail** using the **space bar**, then click **Enter** to initialize.


4. The CLI will prompt you to choose between {{%link href="/en/serverless/help/appsail/catalyst-managed-runtimes/key-concepts/" %}}Catalyst-Managed Runtime{{%/link%}} and {{%link href="/en/serverless/help/appsail/custom-runtimes/container-registry-services/" %}}Docker Image{{%/link%}}. Because you are creating this project from one of the Catalyst-Managed Runtime, select **Catalyst-Managed Runtime** and click **Enter**. 


5. The CLI will initiate the AppSail service:
    - Because you are creating your own project, enter "**n**" and click **Enter** for the prompt asking if you wish to get started with a list of recommended projects.
    - Because you have initialized the project in the {{%badge%}}Alien City/{{%/badge%}} directory created specifically for this application, enter "**Y**" and click **Enter** for the prompt asking you to confirm if this the directory you wish to initialize your AppSail service.


6. Next, we will begin configuring our AppSail service. Enter "**aliencity**" as the name of your AppSail service.

7. Select your current directory as the build path of your AppSail service, and choose the latest runtime of **Java** as the programming stack, and click **Enter**.


8. Choose **Java SE** as the platform for your AppSail service, and click **Enter**.


The AppSail service has been initialized for your Alien City project.


The {{%badge%}}aliencity/{{%/badge%}} directory will be modified to contain the {{%link href="/en/serverless/help/appsail/key-concepts/catalyst-configurations/#the-app-configjson-file" %}}{{%badge%}}app-config.json{{%/badge%}}{{%/link%}} file which includes the configuration of your AppSail service, along with the standard project configuration files such as the {{%link href="/en/cli/v1/project-directory-structure/catalyst-json/" %}}{{%badge%}}catalyst.json{{%/badge%}}{{%/link%}} file and a hidden {{%badge%}}.catalystrc{{%/badge%}} file.

This structure of the *aliencity* Spring Boot project’s directory initialized with the AppSail service is shown below:
<br />

--------------------------------------------------------------------------------
title: "Code Your Application"
description: "Create an application and host it on Catalyst using the Catalyst AppSail service and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.668Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city-appsail/springboot/code-app/"
service: "All Services"
related:
- Catalyst SDK for AppSail (/en/cli/v1/initialize-resources/introduction/)

--------------------------------------------------------------------------------


# Code Your Application

In the {{%badge%}}aliencity/src/main/java/com/catalyst/appsail/aliencity/{{%/badge%}} directory, create a Java code file and name it {{%badge%}}AlienCity.java{{%/badge%}}. This code file will contain the backend logic of your application.

In the {{%badge%}}aliencity/src/main/resources/static{{%/badge%}} directory, create the following files:
- {{%badge%}}**index.html**{{%/badge%}}: The file that contains the HTML code for the front-end of the application.
- {{%badge%}}**main.js**{{%/badge%}}: The file that contains the JavaScript code that connects the front-end and backend.

The final structure of the {{%badge%}}aliencity/{{%/badge%}} **Spring Boot - JAR** project directory is shown below:


You will be coding the {{%badge%}}AlienCity.java{{%/badge%}}, {{%badge%}}AliencityApplication.java{{%/badge%}}, {{%badge%}}index.html{{%/badge%}}, and {{%badge%}}main.js{{%/badge%}}. You will also be updating the {{%badge%}}app-config.json{{%/badge%}}, and the {{%badge%}}pom.xml{{%/badge%}} file.

{{%note%}}{{%bold%}}Note:{{%/bold%}} Please go through the code in this section to make sure you fully understand it.{{%/note%}}

Copy the code below and paste it into the respective files of your project using an IDE and save the files:

{{%panel_with_adjustment class="language-java line-numbers" header="AlienCity.java" footer="button" scroll="set-scroll" %}}package com.catalyst.appsail.aliencity;
import org.springframework.web.bind.annotation.*;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zc.auth.CatalystSDK;
import com.zc.component.object.ZCObject;
import com.zc.component.object.ZCRowObject;
import com.zc.component.zcql.ZCQL;
import org.springframework.http.ResponseEntity;
import org.apache.commons.logging.Log;
import org.json.simple.JSONObject;
import org.json.simple.parser.JSONParser;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
import java.util.logging.Logger;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@RestController
public class AlienCity {
    Map<String, String> responseMap = new HashMap<>();
    private int getAlienCountFromCatalystDataStore(String cityName) throws Exception {
        String query = "Select * from AlienCity where CityName = '" + cityName + "'";
        Logger.getLogger(AlienCity.class.getName()).info("Query: " + query);
        ArrayList<ZCRowObject> rowList = ZCQL.getInstance().executeQuery(query);
        return rowList.size();
    }
    @GetMapping("/alien")
    public ResponseEntity<String> getAlienEncounter(@RequestParam String city_name, HttpServletRequest request,
            HttpServletResponse response) throws Exception {
        CatalystSDK.init(request);
        try {
            int length = getAlienCountFromCatalystDataStore(city_name);
            if (length == 0) {
                responseMap.put("message", "Hurray! No alien encounters in this city yet!");
                responseMap.put("signal", "negative");
                String jsonResponse = new ObjectMapper().writeValueAsString(responseMap);
                return ResponseEntity.ok()
                        .contentType(MediaType.APPLICATION_JSON)
                        .body(jsonResponse);
            } else {
                responseMap.put("message", "Uh oh! Looks like there are aliens in this city!");
                responseMap.put("signal", "positive");
                String jsonResponse = new ObjectMapper().writeValueAsString(responseMap);
                return ResponseEntity.ok()
                        .contentType(MediaType.APPLICATION_JSON)
                        .body(jsonResponse);
            }
        } catch (Exception e) {
            e.printStackTrace();
            responseMap.put("message", "Internal Server Error");
            responseMap.put("signal", "error");
            String jsonResponse = new ObjectMapper().writeValueAsString(responseMap);
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
                    .contentType(MediaType.APPLICATION_JSON)
                    .body(jsonResponse);
        }
    }
    @PostMapping("/alien")
    public ResponseEntity<String> postAlienEncounter(HttpServletRequest request, HttpServletResponse response,
            @RequestBody String requestBody) throws Exception {
                    CatalystSDK.init(request);
                    JSONParser jsonParser = new JSONParser();
                    JSONObject jsonObject = (JSONObject) jsonParser.parse(requestBody);
                    String cityname = (String) jsonObject.get("city_name");
                    try {
                        int length = getAlienCountFromCatalystDataStore(cityname);
            
                        if (length > 0) {
                            responseMap.put("message",
                                    "Looks like you are not the first person to encounter aliens in this city! Someone has already reported an alien encounter here!");
                            String jsonResponse = new ObjectMapper().writeValueAsString(responseMap);
                            return ResponseEntity.ok()
                                    .contentType(MediaType.APPLICATION_JSON)
                                    .body(jsonResponse);
                        } else {
                            ZCRowObject row = ZCRowObject.getInstance();
                            row.set("CityName", cityname);
                            ZCObject.getInstance().getTableInstance("AlienCity").insertRow(row);
                            responseMap.put("message", "Thanks for reporting!");
                            String jsonResponse = new ObjectMapper().writeValueAsString(responseMap);
                            return ResponseEntity.ok()
                                    .contentType(MediaType.APPLICATION_JSON)
                                    .body(jsonResponse);
                        }
                    } catch (Exception e) {
                        e.printStackTrace();
                        responseMap.put("message", "Internal Server Error");
                        String jsonResponse = new ObjectMapper().writeValueAsString(responseMap);
                        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
                                .contentType(MediaType.APPLICATION_JSON)
                                .body(jsonResponse);
                    }
                }
            }
{{%/panel_with_adjustment%}}

{{%panel_with_adjustment class="language-java line-numbers" header="AliencityApplication.java" footer="button" scroll="set-scroll" %}}package com.catalyst.appsail.aliencity;

import java.util.Collections;

import javax.servlet.http.HttpServlet;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class AliencityApplication extends HttpServlet {

        public static void main(String[] args) {
            String port = System.getenv().getOrDefault("X_ZOHO_CATALYST_LISTEN_PORT","3000");
            SpringApplication app = new SpringApplication(AliencityApplication.class);
            app.setDefaultProperties(Collections.singletonMap("server.port",port));
            app.run(args);
        }
    }
{{%/panel_with_adjustment%}}

{{%panel_with_adjustment class="language-xml line-numbers" header="index.html" footer="button" scroll="set-scroll" %}}<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AlientCityAppClient</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"> </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>
    <script src="/main.js"> </script>
</head>
<body>
    <br>
    <br>
    <center>
        <h1>ALIEN CITY</h1>
    </center>
    <div class="container">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="check-tab" data-toggle="tab" href="#check" role="tab"
                    aria-controls="check" aria-selected="true">Check My City</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="report-tab" data-toggle="tab" href="#report" role="tab" aria-controls="report"
                    aria-selected="false">Report Alien Encounter</a>
            </li>
        </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="check" role="tabpanel" aria-labelledby="check-tab">
                <br>
                <br>
                <form>
                    <div class="form-group">
                        <label for="city-get-input"> <b>Check if your city has aliens:</b> </label>
                        <input type="text" class="form-control" id="city-get-input" aria-describedby="checkCity"
                            placeholder="Enter City Name">
                    </div>
                    <button type="submit" class="btn btn-primary"
                        onclick="getAlienEncounter();return false;">Check</button>
                </form>
                <br>
                <br>
                <div id="result-container">
                    <div id="result-text">
                    </div>
                    <br>
                    <div id="result-image">
                    </div>
                </div>
                <div id="loader" style="display: none;">
                        <div class="spinner-border" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </div>
            </div>
            <div class="tab-pane fade" id="report" role="tabpanel" aria-labelledby="report-tab">
                <br>
                <br>
                <form>
                    <div class="form-group">
                        <div class="city-post-input">
                            <label for="exampleInputEmail1"> <b>Enter the name of the city where you encountered an alien:</b> </label>
                            <input type="text" class="form-control" id="city-post-input" aria-describedby="cityPost"
                                placeholder="Enter City Name">
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary"
                        onclick="postAlienEncounter();return false;">Report</button>
                </form>
            </div>
        </div>
    </div>
</body>
</html>
{{%/panel_with_adjustment%}}

{{%panel_with_adjustment class="language-javascript line-numbers" header="main.js" footer="button" scroll="set-scroll" %}}function postAlienEncounter() {
    debugger;
    var city = $("#city-post-input").val();
    $.ajax({
        url: "/alien",
        type: "post",
        contentType: "application/json",
        data: JSON.stringify({
            "city_name": city
        }),
        success: function (data) {
            alert(data.message);
        },
        error: function (error) {
            alert(error.message);
        }
    });
}
function getAlienEncounter() {
    debugger
    showLoader();
    var positive = "https://media.giphy.com/media/Y1GYiLui9NHcxVKhdo/giphy.gif";
    var negative = "https://media.giphy.com/media/fsPcMdeXPxSP6zKxCA/giphy.gif";
    var city = $("#city-get-input").val();
    $.ajax({
        url: "/alien?city_name=" + city,
        type: "get",
        success: function (data) {
            console.log(data);
            $("#result-text").text("");
            $("#result-text").text(data.message);
            var imagesrc = negative;
            if (data.signal == 'positive') {
                imagesrc = positive;
            }
            $("#result-image").html("");
            $("#result-image").html("<img src='" + imagesrc + "' />");
            hideLoader();
        },
        error: function (error) {
            alert(error.message);
        }
    });
}
function showLoader()
{
    $("#result-container").hide();
    $("#loader").show();
}
function hideLoader()
{
    $("#loader").hide();
    $("#result-container").show();
}
{{%/panel_with_adjustment%}}

{{%panel_with_adjustment class="language-xml line-numbers" header="pom.xml" footer="button" scroll="set-scroll" %}}<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.7.10</version>  <!-- Change version to this value -->
		<relativePath />
	</parent>
	<groupId>com.catalyst.appsail</groupId>
	<artifactId>aliencity</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>aliencity</name>
	<packaging>jar</packaging> <!-- Include this -->
	<description>learning Catalyst AppSail~</description>
	<properties>
		<java.version>17</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>com.zoho.catalyst</groupId>
			<artifactId>java-sdk</artifactId>
			<version>0.0.1</version>
		</dependency>
		<dependency>
			<groupId>com.squareup.okhttp3</groupId>
			<artifactId>okhttp</artifactId>
			<version>3.9.0</version>
			<scope>compile</scope>
		</dependency>
		<dependency>
			<groupId>org.apache.httpcomponents</groupId>
			<artifactId>httpmime</artifactId>
			<version>4.5.3</version>
			<scope>compile</scope>
		</dependency>
		<!-- Servlet API for HttpServlet -->
	</dependencies>
	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
				<version>2.6.1</version> <!-- Use the version compatible with your project -->
			</plugin>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>
	<!--Insall required Repositories-->
	<repositories>
		<repository>
			<id>spring-milestones</id>
			<name>Spring Milestones</name>
			<url>https://repo.spring.io/milestone</url>
		</repository>
		<repository>
			<id>spring-snapshots</id>
			<name>Spring Snapshots</name>
			<url>https://repo.spring.io/snapshot</url>
		</repository>
		<repository>
			<id>java-sdk</id>
			<url>https://maven.zohodl.com</url>
		</repository>
	</repositories>
	<pluginRepositories>
		<pluginRepository>
			<id>spring-milestones</id>
			<name>Spring Milestones</name>
			<url>https://repo.spring.io/milestone</url>
			<snapshots>
				<enabled>false</enabled>
			</snapshots>
		</pluginRepository>
		<pluginRepository>
			<id>spring-snapshots</id>
			<name>Spring Snapshots</name>
			<url>https://repo.spring.io/snapshot</url>
			<releases>
				<enabled>false</enabled>
			</releases>
		</pluginRepository>
	</pluginRepositories>
</project>
{{%/panel_with_adjustment%}}

{{%note%}}{{%bold%}}Note:{{%/bold%}} Do not change the version in line {{%bold%}}14{{%/bold%}}. You can host your application on AppSail only if the version is {{%badge%}}2.7.10{{%/badge%}} or less.{{%/note%}}

{{%panel_with_adjustment class="language-json line-numbers" header="app-config.json" footer="button" scroll="set-scroll" %}}{
	"command": "java -jar aliencity-0.0.1-SNAPSHOT.jar",
	"buildPath": "./target/",
	"stack": "java17",
    "env_variables": {},
    "memory": 256,
    "scripts": {
        "preserve": "mvn clean package",
        "predeploy": "mvn clean package"
    },
    "platform": "javase"
}
{{%/panel_with_adjustment%}}

{{%note%}}{{%bold%}}Note:{{%/bold%}} Ensure you provide the right value for the {{%badge%}}{{%bold%}}buildpath{{%/bold%}}{{%/badge%}} key.{{%/note%}}

Let’s quickly go through the working of the application:

1. **GET Operation**
    - When you enter a city name in the application to check for a record of previous alien encounters, the onClick event for the **Check** button in {{%badge%}}index.html{{%/badge%}} triggers the {{%badge%}}getAlienEncounter(){{%/badge%}} function defined in {{%badge%}}main.js{{%/badge%}}.
    - This fires an Ajax call to the URL route defined in the {{%badge%}}AlienCity.java{{%/badge%}} function.
    - The **GET API** defined in {{%badge%}}AlienCity.java{{%/badge%}} then invokes the {{%badge%}}getAlienCountFromCatalystDataStore(){{%/badge%}} function and passes the request query.
    - This function searches for the data in the **Alien City** table in the *Data Store* by executing a ZCQL query.
    - If a record matching the city name is found in the table, a *positive* signal is sent as the response. Otherwise, a *negative* signal is sent as the response.
    - The client then displays the message that matches the response. A GIF matching the response defined in {{%badge%}}main.js{{%/badge%}} is also displayed.

2. **POST Operation**
    - When you enter a city name in the client to report an alien encounter, the onClick event for the **Report** button in {{%badge%}}index.html{{%/badge%}} triggers the {{%badge%}}postAlienEncounter(){{%/badge%}} function defined in {{%badge%}}main.js{{%/badge%}}.
    - This fires an Ajax call to the URL route defined in the {{%badge%}}AlienCity.java{{%/badge%}} function. The POST API defined in {{%badge%}}AlienCity.java{{%/badge%}} then invokes the {{%badge%}}getAlienCountFromCatalystDataStore(){{%/badge%}} function and passes a request query to check if a record with the same city name already exists.
    - This function searches for the data in the **Alien City** table in the *Data Store* by executing a ZCQL query. If the record already exists, a response is sent, which enables the application to display a message that the city name is already added.
    - If there are no records for the city name, a new row is created in the **Alien City** table for the city name entered by the user. A pop-up box is displayed in the client confirming the insertion of the record in the *Data Store*. An appropriate message is also pushed to the logs which can be checked from the {{%link href="/en/devops/help/logs/introduction/" %}}*Logs*{{%/link%}} component present in the {{%link href="/en/devops/" %}}Catalyst DevOps{{%/link%}} service.

<br />

--------------------------------------------------------------------------------
title: "Test the Application"
description: "Create an application and host it on Catalyst using the Catalyst AppSail service and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.668Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city-appsail/springboot/test-app/"
service: "All Services"
related:
- Serve CLI Resources (/en/cli/v1/serve-resources/introduction/)

--------------------------------------------------------------------------------


# Test the Application

Before you deploy the application to the remote console, you can {{%link href="/en/cli/v1/serve-resources/introduction/" %}}test the application{{%/link%}} on a local server and check if everything works using the Catalyst CLI.

To serve the Catalyst project locally, execute the following command from your project directory:
{{%cli%}}catalyst serve{{%/cli%}}

This Alien City application is now served at default port {{%badge%}}3001{{%/badge%}}.


{{%note%}}{{%bold%}}Note:{{%/bold%}} Every time you access the home page or any of the sub-pages of your application, the CLI will display a live log of the URL accessed, along with the HTTP request method.{{%/note%}}



You can now open the application's localhost URL in a browser to access the Alien City application.


Let’s test the application by entering a city’s name and checking for the history of an alien encounter in the city. Because we have not reported an alien encounter in a city yet, the result should be negative.

Enter a city name in the text box and click **Check**.


A matching record for this city will not be found in the Data Store, and the application displays a negative response.


Now, let’s report an alien encounter. Click the **Report Alien Encounter** tab. Enter a city name and click **Report**. We have entered "**Monaco**" in our application.


The application will display a pop-up box confirming that the data has been added to the Data Store.


You can verify this by opening your Catalyst console and navigating to **Data Store** under *Cloud Scale*. Click the **Data View** tab of the table to view the record that was just inserted.


Next, let’s search for this city in the application and check if it fetches this record from the Data Store. Click the **Check My City** tab in the application and enter the name of the city that you just reported. Here, we enter "**Monaco**." Click **Check**.


The application displays a positive response.

You can also check if the application displays the duplication message by reporting the same city again.


If this setup is working correctly, you can deploy the application.

<br />

--------------------------------------------------------------------------------
title: "Deploy the Application"
description: "Create an application and host it on Catalyst using the Catalyst AppSail service and Catalyst Data Store that allows you to report or look up alien encounters in a city."
last_updated: "2026-03-18T07:41:08.669Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/alien-city-appsail/springboot/deploy-app/"
service: "All Services"
related:
- Deploy CLI Resources (/en/cli/v1/deploy-resources/introduction/)
- AppSail (/en/serverless/help/appsail/introduction/)

--------------------------------------------------------------------------------


# Deploy the Application

To {{%link href="/en/cli/v1/deploy-resources/introduction/" %}}deploy your Catalyst project{{%/link%}} from the CLI, run the following command in your terminal from your project directory:
{{%cli%}}catalyst deploy{{%/cli%}}

The URL of the AppSail service generated by Catalyst is displayed.


The application is now deployed to the Catalyst console.

Now, if you navigate to the *AppSail* component located under the *Serverless* section, you will see your service has been deployed.


Click the **Alien City service** and you will be able to view the access URL generated by Catalyst. In this section you will also have access to a live dashboard denoting the number of instances the Alien City service has spawned at any given moment. Using this section you will also be able configure and manage the AppSail service. You can find out more about this {{%link href="/en/serverless/help/appsail/console/introduction/" %}}here{{%/link%}}.


You can now access the application using the AppSail URL generated by Catalyst.


<br />