Creación de una herramienta de análisis de tendencias con la API FeedRika

Recientemente me encontré con este excelente servicio API de noticias llamado FeedRika que te brinda las últimas noticias mundiales junto con una puntuación de sentimiento y categorías relevantes. Tiene un nivel de uso gratuito, así que pensé en probarlo y ver qué puedo crear con él.

Una de mis ideas fue crear una herramienta para ver cómo le ha ido a una empresa o tema en las noticias.

Puedes ver un gráfico de Google Trends que muestra qué tan popular es un término en el espacio público, pero que solo refleja el volumen de búsqueda. No te da una idea de si el sentimiento que lo rodea es positivo o negativo. Así que creemos una herramienta que recorra las noticias para ver si se escribe favorablemente o no sobre el tema y mostremos un gráfico similar.

Estos son los pasos generales que seguiremos para construir esta herramienta:

1. Recoger el tema a buscar, del usuario
2. Obtener artículos de noticias de Feedrika que coincidan con el tema
3. Recorra los artículos devueltos y extraiga la puntuación de opinión de cada artículo
4. Traza estas puntuaciones en un gráfico para mostrarlas visualmente
5. Haga algunos cálculos para generar estadísticas adicionales para el tema, como sentimiento promedio, total positivo/negativo, etc...
6. Muestre los artículos de noticias originales al usuario para que pueda explorar el tema con más detalle.

Antes que empecemos

Obtengamos una clave API del sitio web de Feedrika para que podamos buscar artículos de noticias con los que trabajar.
Dirígete a feedrika.com y regístrate para obtener una cuenta.

Una vez que te registres, encontrarás tu clave API en tu página de perfil feedrika.com/profile junto con tu saldo de crédito y un registro de solicitudes que muestra las solicitudes que has realizado.

Elegir la plataforma

Podríamos crear esta herramienta solo en HTML, CSS y Javascript, pero implica el uso de una clave API privada y no es una buena idea transmitirla abiertamente a través de Internet, así que usemos node y express para ocultar la clave API en el servidor. side como variable de entorno y manténgalo privado.

Voy a adaptar este tutorial a principiantes absolutos, así que si ya estás familiarizado con node y express, no dudes en pasar a las partes más interesantes.

Configuración:

1. Nodo y Expreso

Asegúrese de tener instalado el entorno de ejecución de Node. Si no, puedes conseguirlo aquí.

Cree un directorio para este proyecto en su máquina local y navegue dentro de él.

Ejecute: npm init -y en la terminal para inicializar un proyecto de nodo con los valores predeterminados.

Ejecute: npm i express para instalar el marco express.
Express es un servidor web simple que nos permitirá servir las páginas y rutas API dentro de nuestra aplicación. Es fácil de configurar y se usa ampliamente, por lo que es fácil encontrar ayuda en línea y solucionar problemas.

Abre la carpeta en VSCode o tu IDE favorito y mira dentro.

Debe tener una carpeta node_modules, un archivo package.json y un archivo package-lock.json.

2. Creando nuestra primera Ruta

Creemos una página de índice que dé la bienvenida a los usuarios a nuestra aplicación
Cree un nuevo archivo 'welcome.html' en la raíz de su proyecto. Llénelo solo con la información básica para comenzar

    
This is my news trends app!

 

Configuremos nuestra primera ruta y regresemos esta página de bienvenida.html cuando alguien abra la aplicación

Cree un archivo 'index.js' en la raíz de su aplicación e importe el marco expreso.

// Import the express framework
express = require("express");

// tell node that we are creating an express app
const app = express();

// define the port that the server will run on
const port = 3000;

// define the route for the index page
app.get("/", (req, res) => {
 res.sendFile(__dirname   "/welcome.html");
});

// Start the server and tell the app to listen for incoming connections on the port
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

Probemos nuestro progreso.
Desde la terminal ejecute el nodo index.js. Deberías ver un mensaje de confirmación que dice que el servidor se está ejecutando

Haga clic en el enlace en la terminal o péguelo en el navegador para confirmar que puede ver la página de bienvenida

3. Variables de entorno

Configuremos una variable de entorno para guardar nuestra clave API.
Crea un nuevo archivo '.env' en la raíz de tu proyecto.
Copie y pegue su clave API desde la página de perfil de Feedrika aquí

Agreguemos también un archivo '.gitignore' para no cargar accidentalmente esta clave privada en la web

Ahora algo de limpieza

No queremos iniciar y detener el servidor desde la terminal cada vez que editamos la aplicación, así que configuremos la recarga automática.

Abra su archivo package.json y agregue estas líneas al objeto script

"start": "node index.js",
"dev": "nodemon index.js -w"

Estamos usando nodemon con el indicador '-w' para observar cambios en nuestra carpeta raíz y reiniciar el servidor.

Ahora podemos iniciar nuestro servidor con el comando npm run dev y automáticamente observará los cambios y reiniciará el servidor por nosotros.

Si recibes un error acerca de no reconocer nodemon, ejecuta esto para instalarlo globalmente y vuelve a intentarlo:
npm i nodemon -g

Bien, eso completa la configuración, ¡pasemos a desarrollar nuestra aplicación!

Actualicemos la página de bienvenida y agreguemos un cuadro de búsqueda para preguntar por temas

    

        
News trends
        
Search for a topic to get started
        

            Search
        
    

Configurar hojas de estilo

Cree una carpeta 'pública' en la raíz de su proyecto que alojará nuestros archivos javascript, css y de imagen del lado del cliente.
Agregue un archivo 'styles.css' a la carpeta pública y agregue algunos estilos básicos para la página de bienvenida

estilos.css:

/* Import the Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
}

#container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* SEARCH FORM */

.search-form input {
    padding: 1em;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.search-form button {
    padding: 1em;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #313131;
    cursor: pointer;
    color: #fff;
}

Ahora necesitamos decirle a Express cómo servir estos archivos estáticos, así que abra 'index.js' y agregue esta línea:
aplicación.use(express.static("público"));

Deberías poder ver los cambios reflejados de inmediato, actualiza la página en tu navegador y confirma

¡Excelente! Ahora digamos a Express cómo manejar el envío de este formulario.

Si observa que el formulario se envía a un punto final '/search', configuremos esta ruta y manejemos el envío del formulario

Abre tu archivo 'index.js' y agrega estas líneas

// define the route for the /search endpoint
app.get("/search", (req, res) => {
  // get the query string from the request
  let query = req.query.topic;
  // send the query string back as the response
  res.send(query);
});

Probemoslo, vaya a su navegador, ingrese un término de búsqueda en el cuadro y haga clic en enviar
Deberías ver una respuesta del servidor que muestra tu término de búsqueda, como este

¡Buen trabajo!

Ahora que tenemos una ruta de búsqueda funcionando, conectemos la API FeedRika y busquemos noticias sobre el tema.

Próximamente Parte II: Obtención de datos