---
title: "Configurar el Client"
url: https://docs.catalyst.zoho.com/es/tutorials/alien-city/java/configure-client/
description: "Crea una aplicación web serverless de una sola página utilizando Catalyst Advanced I/O Function y Catalyst Data Store que te permita reportar o buscar encuentros con alienígenas en una ciudad."
last_updated: 2026-03-20T16:21:56Z
service: All Services
type: tutorial
related_links:
  - name: "Client Directory Structure"
    url: /es/cli/v1/project-directory-structure/introduction/
  - name: "Web Client Hosting"
    url: /es/cloud-scale/help/web-client-hosting/introduction/
---

# Configurar el Client

Ahora, configuremos el componente del Client. El [directorio del cliente](https://docs.catalyst.zoho.com/es/cli/v1/project-directory-structure/client-directory/) contiene:

- El archivo `index.html` que contiene el código HTML para la aplicación frontend
- El archivo `main.css` que contiene el código CSS para la aplicación frontend
- El archivo `main.js` que contiene el código JavaScript
- El archivo de configuración `client-package.json`

Codificaremos `index.html` y `main.js`.

> **Nota:** Revisa el código de esta sección para asegurarte de comprenderlo completamente.

Copia el código a continuación y pégalo en los archivos correspondientes ubicados en el `client/directory` de tu proyecto usando un IDE y guarda los archivos.

**index.html**

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

```

**main.js**

```javascript
// Realiza una llamada API al servidor y agrega la ciudad reportada como ciudad con alienígenas
function postAlienEncounter() {
    var city = $("#city-post-input").val();
    // Realiza una llamada Ajax a la URL definida en el archivo de función index.js
    // Todas las URLs a la Advanced I/O Function seguirán el patrón: /server/{function_name}/{url_path}
    $.ajax({
        url: "/server/AlienCityAIO/alien",
        type: "post",
        contentType: "application/json",
        data: JSON.stringify({
            "city_name": city
        }),
        success: function (data) {
            alert(data.message);
        },
        error: function (error) {
            alert(error.message);
        }
    });
}
// Realiza una llamada API al servidor para verificar si la ciudad dada es una ciudad con alienígenas o no
function getAlienEncounter() {
    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();
    // Realiza una llamada Ajax a la URL definida en el archivo de función index.js
    // Todas las URLs a la Advanced I/O Function seguirán el patrón: /server/{function_name}/{url_path}
    $.ajax({
        url: "/server/AlienCityAIO/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();
}

```

El directorio del cliente está ahora configurado.

Repasemos rápidamente el funcionamiento de los componentes de la función y del cliente de la aplicación:

 1. **Operación GET**

- Cuando ingresas el nombre de una ciudad en el cliente para verificar si existe un registro previo de un encuentro con alienígenas, el evento `onClick` del botón **Check** en `index.html` ejecuta la función `getAlienEncounter()` definida en `main.js`.

- Esto realiza una llamada Ajax a la ruta URL definida en la Advanced I/O Function. La API `GET` definida en `AlienCityAIO.java` luego invoca la función `getDataFromCatalystDataStore` y pasa la consulta de la solicitud.

- Esta función busca los datos en la tabla _AlienCity_ en Data Store ejecutando una consulta ZCQL.

- Si se encuentra un registro que coincida con el nombre de la ciudad en la tabla, se envía una señal `positive` como respuesta. De lo contrario, se envía una señal `negative` como respuesta.

- El cliente luego muestra el mensaje que corresponde a 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 cliente para reportar un encuentro con alienígenas, el evento `onClick` del botón **Report** en `index.html` ejecuta la función `postAlienEncounter()` definida en `main.js`.

- Esto realiza una llamada Ajax a la ruta URL definida en la Advanced I/O Function. La API `POST` definida en `AlienCityAIO.java` luego invoca la función `getDataFromCatalystDataStore` 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 _AlienCity_ en Data Store ejecutando una consulta ZCQL. Si el registro ya existe, se envía una respuesta que permite al cliente mostrar un mensaje apropiado al usuario.

- Si no hay registros para el nombre de la ciudad, se crea una nueva fila en la tabla _AlienCity_ con el nombre de la ciudad ingresado por el usuario. Se muestra un cuadro emergente en el cliente confirmando la inserción del registro en Data Store. También se envía un mensaje apropiado a los logs, que se pueden consultar desde _Logs_ en la sección _Monitor_ de la consola.