# Java



--------------------------------------------------------------------------------
title: "Introducción"
description: "Crea una aplicación y hospédala en Catalyst usando el servicio Catalyst AppSail y Catalyst Data Store que te permite reportar o buscar encuentros con alienígenas en una ciudad."
last_updated: "2026-10-08T06:48:03.617Z"
source: "https://docs.catalyst.zoho.com/es/tutorials/alien-city-appsail/springboot/introduction/"
service: "All Services"
related:
- Project Directory Structure (/es/cli/v1/project-directory-structure/introduction/)
- Catalyst SDK for AppSail (/es/serverless/help/appsail/key-concepts/catalyst-configurations/#implementing-catalyst-sdk-in-appsail/)

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


# Alien City Using AppSail

### Introducción

Este tutorial te ayudará a construir una aplicación web Java Spring Boot llamada **Alien City** y hospedarla usando la oferta serverless de Catalyst, AppSail. AppSail es un componente PaaS altamente escalable que te permite programar tu aplicación en cualquier framework de programación de tu elección, independiente de cualquier estructura de código específica de Catalyst, y hospedarla en Catalyst con facilidad.

**Alien City** es una aplicación divertida que te permite buscar y reportar encuentros con alienígenas en una ciudad.

La aplicación web se verá de la siguiente manera:



Puedes acceder a una aplicación funcional y probar su funcionamiento aquí: ¡Prueba la app!

La aplicación Alien City utiliza componentes de los siguientes servicios de Catalyst:

1. **Catalyst Serverless**:
    - AppSail: Para hospedar la aplicación independiente de Java Spring Boot. Construiremos el front-end de la app así como la lógica del backend, y los empaquetaremos juntos para desplegar en AppSail.

2. **Catalyst Cloud Scale**:
    - Data Store: Para almacenar la base de datos de las ciudades donde se han reportado encuentros con alienígenas.
    - ZCQL: Para obtener datos del **Data Store** a través de consultas.

Usarás la consola web de Catalyst y la interfaz de línea de comandos (CLI) de Catalyst para construir esta aplicación.

Se te proporcionará el código de los archivos que se incluirán en la aplicación en este tutorial. Solo necesitarás copiar el código y pegarlo en los archivos apropiados según las instrucciones.

### Arquitectura de la aplicación

El funcionamiento de la aplicación Alien City se puede describir de la siguiente manera:

* **Reportar un encuentro con alienígenas**<br />Un usuario ingresa el nombre de una ciudad donde experimentó un encuentro con alienígenas. Si la ciudad ya fue reportada anteriormente, la app muestra un mensaje notificando al usuario. Si la ciudad nunca ha sido reportada, los datos se agregarán a una tabla en el **Data Store** identificando la ciudad.

* **Verificar un encuentro con alienígenas**<br />Un usuario verifica si hay un registro de un encuentro con alienígenas en una ciudad en particular proporcionando su nombre. Si existe un registro de esa ciudad en el **Data Store**, la app mostrará una respuesta positiva. De lo contrario, mostrará una respuesta negativa.
<br />


--------------------------------------------------------------------------------
title: "Requisitos previos"
description: "Crea una aplicación y hospédala en Catalyst usando el servicio Catalyst AppSail y Catalyst Data Store que te permite reportar o buscar encuentros con alienígenas en una ciudad."
last_updated: "2026-10-08T06:48:03.617Z"
source: "https://docs.catalyst.zoho.com/es/tutorials/alien-city-appsail/springboot/prerequisites/"
service: "All Services"
related:
- Catalyst CLI Documentation (/es/cli/v1/cli-command-reference/)

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


# Requisitos previos

Antes de comenzar a construir la aplicación, debes tener los siguientes requisitos previos instalados en tu sistema:

1. Catalyst CLI<br />Catalyst CLI contiene un conjunto de herramientas que te permiten inicializar, desarrollar, probar y desplegar los componentes de tu aplicación desde tu máquina local. Trabajaremos con Catalyst CLI en este tutorial.<br /> Debes realizar las siguientes acciones:

    * **Instalar Catalyst CLI**: Catalyst CLI se instala a través de NPM. Por lo tanto, debes tener NPM y Node.js instalados en tu sistema antes de instalar el CLI. Consulta la página de ayuda de instalación de Catalyst CLI para obtener detalles sobre los requisitos previos y los pasos para instalarlo.
    * **Iniciar sesión en Catalyst CLI**: Después de instalar Catalyst CLI, debes autenticar el CLI con tu cuenta de Catalyst antes de usarlo. Consulta la página de ayuda de inicio de sesión del CLI para conocer los pasos para iniciar sesión desde Catalyst CLI y las diversas opciones disponibles.

2. **Cualquier herramienta IDE para desarrollo de aplicaciones HTML y JavaScript**<br />Puedes usar cualquier IDE para programar tu aplicación. Algunas opciones populares incluyen Visual Studio Code, IntelliJ IDEA, Eclipse y Sublime Text. Descarga e instala un IDE de tu elección en tu sistema.

3. **Instalar la herramienta de automatización de compilación Apache Maven**<br />Para completar este tutorial, necesitas instalar Maven en tu sistema local. Instala la versión compatible para tu sistema usando este enlace.

Si eres usuario del IDE Visual Studio Code, puedes instalar la extensión Catalyst Tools y usar tu IDE en lugar del CLI. Puedes encontrar más detalles sobre la extensión de Catalyst para VS Code en esta sección de ayuda.


--------------------------------------------------------------------------------
title: "Crear un proyecto"
description: "Crea una aplicación y hospédala en Catalyst usando el servicio Catalyst AppSail y Catalyst Data Store que te permite reportar o buscar encuentros con alienígenas en una ciudad."
last_updated: "2026-10-08T06:48:03.617Z"
source: "https://docs.catalyst.zoho.com/es/tutorials/alien-city-appsail/springboot/create-project/"
service: "All Services"
related:
- Catalyst Console (/es/getting-started/catalyst-projects/)

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


# Crear un proyecto

Vamos a crear un proyecto de Catalyst desde la consola de Catalyst.

1. Inicia sesión en la consola de Catalyst y haz clic en **Create New Project**.
<br />

2. Ingresa el nombre del proyecto como "**AlienCity**" en la ventana emergente y haz clic en **Create**.


Tu proyecto será creado y luego se abrirá.

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


--------------------------------------------------------------------------------
title: "Crear una tabla"
description: "Crea una aplicación y hospédala en Catalyst usando el servicio Catalyst AppSail y Catalyst Data Store que te permite reportar o buscar encuentros con alienígenas en una ciudad."
last_updated: "2026-10-08T06:48:03.618Z"
source: "https://docs.catalyst.zoho.com/es/tutorials/alien-city-appsail/springboot/create-table/"
service: "All Services"
related:
- Data Store (/es/cloud-scale/help/data-store/introduction/)

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


# Crear una tabla

Ahora vamos a crear una tabla en el Data Store del proyecto **Alien City**. Esta tabla se usa para almacenar registros de nombres de ciudades donde se vieron alienígenas.

Para crear una tabla:

1. Navega a la sección *Cloud Scale* de la consola y luego haz clic en **Start Exploring**.
<br />

2. Navega a **Data Store** en *Storage* y haz clic en **Create a New Table**.
<br />

3. Ingresa el nombre de la tabla como "**AlienCity**" y haz clic en **Create**.
<br />

Nota: Asegúrate de ingresar el nombre exactamente como se indica, porque el código de la aplicación contiene el mismo nombre.

La tabla ha sido creada.

A continuación, vamos a crear una columna en la tabla para almacenar los nombres de las ciudades.

1. Haz clic en **New Column** en la sección *Schema View* de la tabla.
<br />

2. Ingresa el nombre de la columna como "**CityName**." Selecciona el tipo de dato como **Var Char** e ingresa la longitud máxima como "**100**." Haz clic en el interruptor **Is Unique** para habilitarlo.


Puedes aprender sobre los diversos tipos de datos compatibles con Catalyst, así como las otras propiedades de una columna, en la página de ayuda de Data Store.

3. Haz clic en **Create**.


La columna ha sido creada y aparece listada en la sección *Schema View*.

<br />


--------------------------------------------------------------------------------
title: "Crear un proyecto Spring Boot"
description: "Crea una aplicación y hospédala en Catalyst usando el servicio Catalyst AppSail y Catalyst Data Store que te permite reportar o buscar encuentros con alienígenas en una ciudad."
last_updated: "2026-10-08T06:48:03.618Z"
source: "https://docs.catalyst.zoho.com/es/tutorials/alien-city-appsail/springboot/initialize-springboot/"
service: "All Services"
related:
- Catalyst SDK for AppSail (/es/cli/v1/initialize-resources/introduction/)
- Spring Boot - JAR with AppSail (/es/serverless/help/appsail/help-guides/java/spring-boot/#spring-boot--jar)
- Spring Boot - WAR with AppSail (/es/serverless/help/appsail/help-guides/java/spring-boot/#spring-boot---war)
- Spring Boot Official Documentation (https://spring.io/guides/gs/spring-boot)

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


# Crear un proyecto Spring Boot

Para este tutorial, vamos a crear un proyecto **Spring Boot - JAR** usando el sitio web Spring Initializr.

1. Ve al sitio web de Spring Initializr

2. Ingresa los detalles requeridos de la siguiente manera:
    - Selecciona **Maven** como *Project*, **Java** como *Language*, y la versión más reciente de Spring Boot (evita versiones etiquetadas como SNAPSHOT o M).
    - Ingresa "**com.catalyst.appsail**" como el *Group*, y "**aliencity**" como el *Artifact*. Los campos *Name* y *Package name* se generarán automáticamente.
    - Selecciona **Jar** como el *Packaging*, y **17** como la versión de *Java*.
    <br />

3. Haz clic en el botón **ADD DEPENDENCIES**, en el lado derecho de la pantalla.
    <br />

4. Busca *Spring Web* en el menú desplegable y selecciona la dependencia. Este paso instalará todas las dependencias necesarias requeridas para construir una aplicación web Spring Boot cuando generes el paquete.
    <br />

5. Confirma todas tus selecciones y haz clic en **Generate**.
    <br />

El proyecto Spring Boot aliencity se descargará en tu sistema local como un archivo zip.

Descomprime el archivo descargado y este directorio, aliencity/, será nuestro directorio local donde inicializaremos el servicio *Catalyst AppSail* para nuestro proyecto. Junto con todas las dependencias requeridas, también contendrá el archivo AliencityApplication.java. Este archivo contendrá la lógica que te permite ejecutar la aplicación en Spring Boot.

El directorio **Spring Boot - JAR** de aliencity/ se verá así:


Nota: Este tutorial ha creado un proyecto Spring Boot para demostrar la construcción de un proyecto Spring Boot - JAR, y desplegarlo como un servicio de AppSail. Puedes aprender cómo hacer lo mismo con proyectos Spring Boot - WAR en esta documentación de ayuda.

Para más información sobre cómo crear un proyecto Spring Boot, puedes visitar su documentación oficial de ayuda.<br />


--------------------------------------------------------------------------------
title: "Inicializar tu proyecto de Catalyst"
description: "Crea una aplicación y hospédala en Catalyst usando el servicio Catalyst AppSail y Catalyst Data Store que te permite reportar o buscar encuentros con alienígenas en una ciudad."
last_updated: "2026-10-08T06:48:03.618Z"
source: "https://docs.catalyst.zoho.com/es/tutorials/alien-city-appsail/springboot/initialize-project/"
service: "All Services"
related:
- Initialize CLI Resources (/es/cli/v1/initialize-resources/introduction/)
- Project Directory Structure (/es/cli/v1/project-directory-structure/introduction/)

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


# Inicializar tu proyecto de Catalyst

Ahora puedes comenzar a trabajar en tu proyecto de Catalyst desde el CLI. El primer paso es inicializar el proyecto en un directorio vacío. Este será el directorio principal de tu proyecto y todos los archivos del proyecto se guardarán en él.

Puedes aprender más sobre esto en la página de ayuda de la estructura de directorios del proyecto. Puedes aprender sobre la inicialización de un proyecto en detalle en la documentación de ayuda del CLI.

Para esta aplicación, inicializarás el componente AppSail. El componente AppSail se inicializará en la pila de programación Java.

1. Abre la terminal del CLI de Catalyst en el directorio /aliencity que acabas de descomprimir, y ejecuta el siguiente comando del CLI.
catalyst init

Navega usando las **teclas de flecha** y selecciona tu portal preferido y haz clic en **Enter**. Si no tienes otras organizaciones asociadas con la cuenta, entonces la predeterminada será seleccionada automáticamente.

Puedes obtener más información sobre la función de portal multi-org de Catalyst en este documento de ayuda.

2. El CLI ahora te pedirá asociar un proyecto de Catalyst con el directorio. Asócialo con el proyecto que creamos anteriormente desde la consola. Selecciona **Alien City** de la lista y haz clic en **Enter**.


3. Selecciona **AppSail** usando la **barra espaciadora**, luego haz clic en **Enter** para inicializar.


4. El CLI te pedirá elegir entre Catalyst-Managed Runtime y Docker Image. Dado que estás creando este proyecto desde uno de los Catalyst-Managed Runtime, selecciona **Catalyst-Managed Runtime** y haz clic en **Enter**.


5. El CLI iniciará el servicio AppSail:
    - Dado que estás creando tu propio proyecto, ingresa "**n**" y haz clic en **Enter** para la solicitud que pregunta si deseas comenzar con una lista de proyectos recomendados.
    - Dado que has inicializado el proyecto en el directorio Alien City/ creado específicamente para esta aplicación, ingresa "**Y**" y haz clic en **Enter** para la solicitud que te pide confirmar si este es el directorio donde deseas inicializar tu servicio AppSail.


6. A continuación, comenzaremos a configurar nuestro servicio AppSail. Ingresa "**aliencity**" como el nombre de tu servicio AppSail.

7. Selecciona tu directorio actual como la ruta de compilación de tu servicio AppSail, y elige el runtime más reciente de **Java** como la pila de programación, y haz clic en **Enter**.


8. Elige **Java SE** como la plataforma para tu servicio AppSail, y haz clic en **Enter**.


El servicio AppSail ha sido inicializado para tu proyecto Alien City.


El directorio aliencity/ se modificará para contener el archivo app-config.json que incluye la configuración de tu servicio AppSail, junto con los archivos de configuración estándar del proyecto como el archivo catalyst.json y un archivo oculto .catalystrc.

La estructura del directorio del proyecto Spring Boot *aliencity* inicializado con el servicio AppSail se muestra a continuación:
<br />


--------------------------------------------------------------------------------
title: "Programar tu aplicación"
description: "Crea una aplicación y hospédala en Catalyst usando el servicio Catalyst AppSail y Catalyst Data Store que te permite reportar o buscar encuentros con alienígenas en una ciudad."
last_updated: "2026-10-08T06:48:03.619Z"
source: "https://docs.catalyst.zoho.com/es/tutorials/alien-city-appsail/springboot/code-app/"
service: "All Services"
related:
- Catalyst SDK for AppSail (/es/cli/v1/initialize-resources/introduction/)

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


# Programar tu aplicación

En el directorio aliencity/src/main/java/com/catalyst/appsail/aliencity/, crea un archivo de código Java y nómbralo AlienCity.java. Este archivo de código contendrá la lógica del backend de tu aplicación.

En el directorio aliencity/src/main/resources/static, crea los siguientes archivos:
- **index.html**: El archivo que contiene el código HTML para el front-end de la aplicación.
- **main.js**: El archivo que contiene el código JavaScript que conecta el front-end y el backend.

La estructura final del directorio del proyecto **Spring Boot - JAR** de aliencity/ se muestra a continuación:


Programarás los archivos AlienCity.java, AliencityApplication.java, index.html y main.js. También actualizarás los archivos app-config.json y pom.xml.

Nota: Por favor, revisa el código en esta sección para asegurarte de que lo comprendes completamente.

Copia el código a continuación y pégalo en los archivos correspondientes de tu proyecto usando un IDE y guarda los archivos:

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);
                    }
                }
            }


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);
        }
    }


<!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>


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();
}


<?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>  <!-- Cambia la versión a este valor -->
		<relativePath />
	</parent>
	<groupId>com.catalyst.appsail</groupId>
	<artifactId>aliencity</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>aliencity</name>
	<packaging>jar</packaging> <!-- Incluye esto -->
	<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>
		<!-- API de Servlet para HttpServlet -->
	</dependencies>
	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
				<version>2.6.1</version> <!-- Usa la versión compatible con tu proyecto -->
			</plugin>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>
	<!--Instala los repositorios requeridos-->
	<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>


Nota: No cambies la versión en la línea 14. Solo puedes hospedar tu aplicación en AppSail si la versión es 2.7.10 o menor.

{
	"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"
}


Nota: Asegúrate de proporcionar el valor correcto para la clave buildpath.

Repasemos rápidamente el funcionamiento de la aplicación:

1. **Operación GET**
    - Cuando ingresas el nombre de una ciudad en la aplicación para verificar si hay un registro de encuentros previos con alienígenas, el evento onClick del botón **Check** en index.html activa la función getAlienEncounter() definida en main.js.
    - Esto realiza una llamada Ajax a la ruta URL definida en la función AlienCity.java.
    - La **GET API** definida en AlienCity.java luego invoca la función getAlienCountFromCatalystDataStore() y pasa la consulta de la solicitud.
    - Esta función busca los datos en la tabla **Alien City** en el *Data Store* ejecutando una consulta ZCQL.
    - Si se encuentra un registro que coincide con el nombre de la ciudad en la tabla, se envía una señal *positiva* como respuesta. De lo contrario, se envía una señal *negativa* como respuesta.
    - El client luego muestra el mensaje que coincide con la respuesta. También se muestra un GIF que coincide con la respuesta definida en main.js.

2. **Operación POST**
    - Cuando ingresas el nombre de una ciudad en el client para reportar un encuentro con alienígenas, el evento onClick del botón **Report** en index.html activa la función postAlienEncounter() definida en main.js.
    - Esto realiza una llamada Ajax a la ruta URL definida en la función AlienCity.java. La POST API definida en AlienCity.java luego invoca la función getAlienCountFromCatalystDataStore() y pasa una consulta de solicitud para verificar si ya existe un registro con el mismo nombre de ciudad.
    - Esta función busca los datos en la tabla **Alien City** en el *Data Store* ejecutando una consulta ZCQL. Si el registro ya existe, se envía una respuesta que permite a la aplicación mostrar un mensaje de que el nombre de la ciudad ya fue agregado.
    - Si no hay registros para el nombre de la ciudad, se crea una nueva fila en la tabla **Alien City** para el nombre de la ciudad ingresado por el usuario. Se muestra un cuadro emergente en el client confirmando la inserción del registro en el *Data Store*. También se envía un mensaje apropiado a los logs que se puede verificar desde el componente *Logs* presente en el servicio Catalyst DevOps.


--------------------------------------------------------------------------------
title: "Probar la aplicación"
description: "Crea una aplicación y hospédala en Catalyst usando el servicio Catalyst AppSail y Catalyst Data Store que te permite reportar o buscar encuentros con alienígenas en una ciudad."
last_updated: "2026-10-08T06:48:03.620Z"
source: "https://docs.catalyst.zoho.com/es/tutorials/alien-city-appsail/springboot/test-app/"
service: "All Services"
related:
- Serve CLI Resources (/es/cli/v1/serve-resources/introduction/)

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


# Probar la aplicación

Antes de desplegar la aplicación en la consola remota, puedes probar la aplicación en un servidor local y verificar si todo funciona usando el CLI de Catalyst.

Para servir el proyecto de Catalyst localmente, ejecuta el siguiente comando desde el directorio de tu proyecto:
catalyst serve

La aplicación Alien City ahora se sirve en el puerto predeterminado 3001.


Nota: Cada vez que accedas a la página principal o cualquiera de las subpáginas de tu aplicación, el CLI mostrará un log en vivo de la URL accedida, junto con el método de solicitud HTTP.



Ahora puedes abrir la URL localhost de la aplicación en un navegador para acceder a la aplicación Alien City.


Probemos la aplicación ingresando el nombre de una ciudad y verificando el historial de un encuentro con alienígenas en la ciudad. Dado que aún no hemos reportado un encuentro con alienígenas en una ciudad, el resultado debería ser negativo.

Ingresa el nombre de una ciudad en el campo de texto y haz clic en **Check**.


No se encontrará un registro coincidente para esta ciudad en el Data Store, y la aplicación muestra una respuesta negativa.


Ahora, reportemos un encuentro con alienígenas. Haz clic en la pestaña **Report Alien Encounter**. Ingresa el nombre de una ciudad y haz clic en **Report**. Hemos ingresado "**Monaco**" en nuestra aplicación.


La aplicación mostrará un cuadro emergente confirmando que los datos se han agregado al Data Store.


Puedes verificar esto abriendo tu consola de Catalyst y navegando a **Data Store** en *Cloud Scale*. Haz clic en la pestaña **Data View** de la tabla para ver el registro que se acaba de insertar.


A continuación, busquemos esta ciudad en la aplicación y verifiquemos si recupera este registro del Data Store. Haz clic en la pestaña **Check My City** en la aplicación e ingresa el nombre de la ciudad que acabas de reportar. Aquí, ingresamos "**Monaco**." Haz clic en **Check**.


La aplicación muestra una respuesta positiva.

También puedes verificar si la aplicación muestra el mensaje de duplicación reportando la misma ciudad nuevamente.


Si esta configuración funciona correctamente, puedes desplegar la aplicación.

<br />


--------------------------------------------------------------------------------
title: "Desplegar la aplicación"
description: "Crea una aplicación y hospédala en Catalyst usando el servicio Catalyst AppSail y Catalyst Data Store que te permite reportar o buscar encuentros con alienígenas en una ciudad."
last_updated: "2026-10-08T06:48:03.620Z"
source: "https://docs.catalyst.zoho.com/es/tutorials/alien-city-appsail/springboot/deploy-app/"
service: "All Services"
related:
- Deploy CLI Resources (/es/cli/v1/deploy-resources/introduction/)
- AppSail (/es/serverless/help/appsail/introduction/)

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


# Desplegar la aplicación

Para desplegar tu proyecto de Catalyst desde el CLI, ejecuta el siguiente comando en tu terminal desde el directorio de tu proyecto:
catalyst deploy

Se muestra la URL del servicio AppSail generada por Catalyst.


La aplicación ha sido desplegada en la consola de Catalyst.

Ahora, si navegas al componente *AppSail* ubicado en la sección *Serverless*, verás que tu servicio ha sido desplegado.


Haz clic en el **servicio Alien City** y podrás ver la URL de acceso generada por Catalyst. En esta sección también tendrás acceso a un dashboard en vivo que indica el número de instancias que el servicio Alien City ha generado en un momento dado. Usando esta sección también podrás configurar y gestionar el servicio AppSail. Puedes obtener más información sobre esto aquí.


Ahora puedes acceder a la aplicación usando la URL de AppSail generada por Catalyst.


<br />