---
title: "Configurar el client"
url: https://docs.catalyst.zoho.com/es/tutorials/newsapp/nodejs/configure-client/
description: "Construya una aplicación web de noticias que obtiene automáticamente noticias de un servicio de terceros periódicamente utilizando el componente Cron de Catalyst Job Scheduling, y una Job Function y función Advanced I/O codificadas en Node.js."
last_updated: 2026-03-20T16:21:56Z
service: All Services
type: tutorial
related_links:
  - name: "Client"
    url: /es/cli/v1/project-directory-structure/introduction
  - name: "Advanced I/O Function"
    url: /es/serverless/help/functions/advanced-io
---

# Configurar el Client

Ahora configuremos el componente client. El [directorio](https://docs.catalyst.zoho.com/es/cli/v1/project-directory-structure/introduction) 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`.

> **Nota**: Por favor, revise el código en esta sección para asegurarse de que lo comprende completamente.

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.

**index.html**

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

```

**main.css**

```css
.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);
    }
  }

```

**main.js**

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

```

> **Nota**: Si ha elegido un nombre diferente para su función Advanced I/O, entonces reemplace **news_app_function** con ese nombre en la línea **10**.

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](https://docs.catalyst.zoho.com/es/cloud-scale/help/zcql/introduction) 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.