Configurar el Client
Ahora, configuremos el componente client. El directorio del client contiene:
-
El archivo index.html que contiene el código HTML para la aplicación front-end
-
El archivo main.css que contiene el código CSS para la aplicación front-end
-
El archivo main.js que contiene el código JavaScript
-
El archivo de configuración client-package.json
Programaremos los archivos index.html y main.js.
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 ubicados en el directorio client/ de tu proyecto usando un IDE y guarda los archivos.
index.html
copy
<!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
copy
/* Realiza una llamada API al servidor y agrega la ciudad reportada como una 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/alien_city_function/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/alien_city_function/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("<img src='" + imagesrc + "' />");
hideLoader();
},
errror: function (error) {
alert(error.message);
}
});
}
function showLoader()
{
$("#result-container").hide();
$("#loader").show();
}
function hideLoader()
{
$("#loader").hide();
$("#result-container").show();
}
El directorio del client está ahora configurado.
Repasemos rápidamente el funcionamiento de los componentes de función y client de la aplicación:
-
Operación GET
- Operación GET: Cuando ingresas el nombre de una ciudad en el client para verificar si hay un registro de un encuentro previo 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 Advanced I/O function. La GET API definida en main.py luego invoca la función getAlienCountFromCatalystDataStore() y pasa la consulta de la solicitud.
- Esta función busca los datos en la tabla AlienCity 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.
-
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 Advanced I/O function. La POST API definida en main.py 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 AlienCity en el Data Store ejecutando una consulta ZCQL. Si el registro ya existe, se envía una respuesta que permite al client 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 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 Logs, un componente de Catalyst DevOps en la sección Monitor de la sección del servicio DevOps de la consola.
Última actualización 2026-03-20 21:51:56 +0530 IST