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.
Copie el código a continuación y péguelo en los archivos respectivos ubicados en el directorio client/ de su proyecto usando un IDE y guarde 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) {
//Como mostramos los elementos de 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);
//Realiza una llamada API a la función Advanced I/O para obtener el elemento de noticias de una tabla particular
$.ajax({
url: "/server/news_app_function/fetchData?tablename=" + tablename, //Si inicializó la función Advanced I/O con un nombre diferente, asegúrese 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 está ahora configurado.
Funcionamiento de las Functions y el Client
Repasemos 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 newsapp, automáticamente inicia la ejecución de la función una vez cada hora.
-
Se realiza 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 del 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 realizada a NewsAPI, los datos se reemplazan con los elementos de noticias actualizados. Si no existen filas, se insertan nuevos datos en la tabla.
-
El script definido en el componente client main.js realiza 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 la url de los elementos de noticias. Esto se construye como una respuesta JSON y se devuelve a main.js.
-
main.js analiza la respuesta JSON obtenida de la función y la renderiza en la página HTML creando una lista de nodos.
Última actualización 2026-03-20 21:51:56 +0530 IST