Configurar el client
Ahora configuremos el componente client. El directorio 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
- El archivo main.js que contiene el código JavaScript
- El archivo de configuración client-package.json
Codificaremos index.html, main.js y main.css.
Copia el código a continuación y pégalo en los archivos respectivos ubicados en el directorio client/ de tu proyecto usando un IDE y guarda los archivos.
<!DOCTYPE html>
<html>
<title>NewsApp</title>
<script src="main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body onload="fetchNews('HEADLINES')">
<center>
<h1>Welcome to The Daily Broadcast</h1>
<h3>Today's News</h3>
<h2>HEADLINES</h2><br>
</center>
<div class="sidenav">
<img src="https://i.pinimg.com/236x/e6/71/5f/e6715f8bd963c783f75f11fdc37fa4aa.webp" width="220" height="200"
onclick="fetchNews('HEADLINES')"><br>
<a onclick="return fetchNews('BUSINESS');">Business</a><br>
<a onclick="return fetchNews('ENTERTAINMENT');">Entertainment</a><br>
<a onclick="return fetchNews('HEALTH');">Health</a><br>
<a onclick="return fetchNews('SCIENCE');">Science</a><br>
<a onclick="return fetchNews('SPORTS');">Sports</a><br>
<a onclick="return fetchNews('TECHNOLOGY');">Technology</a><br>
</div>
<div class="loading" id="loader" style="display: none;"></div>
<div class="main">
<ul id="newsList"></ul>
</div>
</body>
</html>
.sidenav {
height: 100%;
width: 220px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
}
a{
cursor: pointer;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
font-family: "Helvetica", sans-serif;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 200px;
font-size: 20px;
padding: 0px 10px;
font-family: “Poynter”, sans-serif;
}
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
.loading {
height: 0;
width: 0;
padding: 15px;
border: 6px solid rgb(155, 155, 155);
border-right-color: rgb(88, 88, 88);
border-radius: 22px;
-webkit-animation: rotate 1s infinite linear;
/* left, top and position just for the demo! */
position: absolute;
left: 50%;
top: 50%;
}
@-webkit-keyframes rotate {
/* 100% keyframe for clockwise.
use 0% instead for anticlockwise */
100% {
-webkit-transform: rotate(360deg);
}
}
function fetchNews(name) {
//Ya que mostramos las noticias como nodos, elimina los nodos existentes para cada cambio de categoría
const nodes = document.getElementById("newsList");
nodes.innerHTML = '';
document.getElementById("loader").style.display = "block";
var tablename = name;
console.log(tablename);
//Hace una llamada API a la función Advanced I/O para obtener las noticias de una tabla particular
$.ajax({
url: "/server/NewsApp_AIO/fetchData?tablename=" + tablename, //Si inicializaste la función Advanced I/O con un nombre diferente, asegúrate de reemplazar news_app_function con ese nombre.
type: "get",
success: function (response) {
var data = response;
var i;
document.getElementById("loader").style.display = "none";
//Analiza la respuesta de la función Advanced I/O y la renderiza en la página HTML creando una lista de nodos
for (i = 0; i < data.content.length; i++) {
var list = document.getElementById('newsList');
var anchor = document.createElement('a');
var li = document.createElement('li');
var linebreak = document.createElement("br");
anchor.href = data.content[i][tablename].url;
anchor.innerText = data.content[i][tablename].title;
anchor.setAttribute('target', '_blank');
li.appendChild(anchor);
list.appendChild(li);
list.appendChild(linebreak);
}
}, error: function (error) {
alert(error.data);
}
});
}
El directorio del client ahora está configurado.
Funcionamiento de las funciones y el client
Revisemos rápidamente el funcionamiento de los componentes de función y client de la aplicación:
-
Cuando un cron recursivo se configura para ejecutarse en un intervalo de tiempo especificado, digamos una vez cada hora, y se asocia con la job function FetchNews.java, automáticamente inicia la ejecución de la función una vez cada hora.
-
Se hace una llamada API a http://newsapi.org/v2/top-headlines para obtener los titulares de noticias. Esta solicitud se autentica usando la clave API obtenida de NewsAPI. La elección de país, la clave API y la categoría de noticias asociada con la tabla respectiva en el Data Store se pasan como parámetros de consulta.
-
El método pushNewstoDatastore inserta los datos obtenidos de la llamada API para los parámetros title y url en una lista. Una consulta ZCQL luego obtiene el conteo de filas de cada tabla. Si los datos ya están poblados en una tabla de una llamada API anterior hecha a NewsAPI, los datos se reemplazan con los elementos de noticias actualizados. Si no existen filas, se envían nuevos datos a la tabla.
-
El script definido en el componente client main.js hace una llamada API a la función Advanced I/O ejecutando una solicitud GET a la ruta /fetchData definida en la función. Los nombres de las tablas se pasan en la URL de la solicitud.
-
La función Advanced I/O consulta las tablas relevantes en el Data Store y obtiene el title y url de los elementos de noticias. Esto se construye como una respuesta JSON y se pasa de vuelta a main.js.
Última actualización 2026-03-20 21:51:56 +0530 IST