Création d'un outil d'analyse des tendances avec l'API FeedRika

Je suis récemment tombé sur ce service API d'actualités sympa appelé FeedRika qui vous donne les dernières nouvelles du monde ainsi qu'un score de sentiment et des catégories pertinentes. Il a un niveau d'utilisation gratuit, j'ai donc pensé à l'essayer et à voir ce que je pouvais construire avec.

L'une de mes idées était de créer un outil pour voir comment une entreprise ou un sujet s'est comporté dans l'actualité.

Vous pouvez voir un graphique de Google Trends qui vous montre la popularité d'un terme dans l'espace public, mais qui reflète uniquement le volume de recherche. Cela ne vous donne pas une idée de si le sentiment qui l’entoure est positif ou négatif. Créons donc un outil qui parcourt l'actualité pour voir si le sujet est abordé de manière favorable ou non et affichons un graphique similaire.

Voici les grandes étapes que nous suivrons pour créer cet outil :

1. Collectez le sujet à rechercher auprès de l'utilisateur
2. Récupérer des articles d'actualité sur Feedrika qui correspondent au sujet
3. Parcourez les articles renvoyés et extrayez le score de sentiment pour chaque article
4. Tracez ces scores sur un graphique pour les afficher visuellement
5. Faites quelques calculs pour générer des statistiques supplémentaires pour le sujet, telles que le sentiment moyen, le total positif/négatif, etc...
6. Affichez les articles d'actualité sources à l'utilisateur afin qu'il puisse explorer le sujet plus en détail.

Avant de commencer

Obtenons une clé API sur le site Web Feedrika afin de pouvoir récupérer des articles d'actualité avec lesquels travailler.
Rendez-vous sur feedrika.com et créez un compte.

Une fois inscrit, vous trouverez votre clé API sur votre page de profil feedrika.com/profile ainsi que votre solde créditeur et un journal des demandes indiquant les demandes que vous avez faites.

Choisir la plateforme

Nous pourrions créer cet outil uniquement en HTML, CSS et Javascript, mais cela implique l'utilisation d'une clé API privée et ce n'est pas une bonne idée de la transmettre ouvertement sur Internet, alors utilisons node et express pour masquer la clé API sur le serveur. côté en tant que variable d’environnement et gardez-le privé.

Je vais adapter ce didacticiel aux débutants absolus, donc si vous êtes déjà familier avec Node and Express, n'hésitez pas à passer aux parties les plus intéressantes.

Installation:

1. Nœud et Express

Assurez-vous que l'environnement d'exécution Node est installé. Sinon, vous pouvez l'obtenir ici.

Créez un répertoire pour ce projet sur votre ordinateur local et naviguez à l'intérieur.

Exécutez : npm init -y dans le terminal pour initialiser un projet de nœud avec les valeurs par défaut.

Exécuter : npm i express pour installer le framework express.
Express est un simple serveur Web qui nous permettra de servir les pages et les routes API au sein de notre application. Il est facile à configurer et largement utilisé, il est donc facile de trouver de l'aide en ligne et de dépanner.

Ouvrez le dossier dans VSCode ou votre IDE préféré et regardez à l'intérieur.

Vous devriez avoir un dossier node_modules, un fichier package.json et un fichier package-lock.json.

2. Créer notre premier itinéraire

Créons une page d'index qui accueille les utilisateurs dans notre application
Créez un nouveau fichier 'welcome.html' à la racine de votre projet. Remplissez-le avec uniquement les informations de base pour commencer

    
This is my news trends app!

 

Configurons notre premier itinéraire et renvoyons cette page bienvenue.html lorsque quelqu'un ouvre l'application

Créez un fichier 'index.js' à la racine de votre application et importez le framework express.

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

Testons nos progrès.
Depuis le terminal, exécutez le nœud index.js. Vous devriez voir un message de confirmation indiquant que le serveur est en cours d'exécution

Cliquez sur le lien dans le terminal ou collez-le dans le navigateur pour confirmer que vous pouvez voir la page d'accueil

3. Variables d'environnement

Configurons une variable d'environnement pour enregistrer notre clé API.
Créez un nouveau fichier '.env' à la racine de votre projet.
Copiez et collez votre clé API depuis la page de profil Feedrika ici

Ajoutons également un fichier « .gitignore » afin de ne pas télécharger accidentellement cette clé privée sur le Web

Maintenant, un peu de ménage

Nous ne voulons pas démarrer et arrêter le serveur à partir du terminal à chaque fois que nous apportons une modification à l'application, configurons donc le rechargement automatique.

Ouvrez votre fichier package.json et ajoutez ces lignes à l'objet script

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

Nous utilisons nodemon avec l'indicateur '-w' pour surveiller les modifications dans notre dossier racine et redémarrer le serveur.

Nous pouvons maintenant démarrer notre serveur avec la commande npm run dev et il surveillera automatiquement les modifications et redémarrera le serveur pour nous.

Si vous obtenez une erreur concernant la non-reconnaissance de nodemon, exécutez ceci pour l'installer globalement et réessayez :
npm je nodemon -g

D'accord, cela termine la configuration, passons à la création de notre application !

Mettons à jour la page d'accueil et ajoutons un champ de recherche pour demander des sujets

    

        
News trends
        
Search for a topic to get started
        

            Search
        
    

Configurer les feuilles de style

Créez un dossier « public » à la racine de votre projet qui hébergera nos fichiers javascript, css et image côté client.
Ajoutez un fichier 'styles.css' au dossier public et ajoutez quelques styles de base pour la page d'accueil

styles.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;
}

Maintenant, nous devons indiquer à Express comment servir ces fichiers statiques, alors ouvrez 'index.js' et ajoutez cette ligne :
app.use(express.static("public"));

Vous devriez pouvoir voir les modifications reflétées immédiatement, actualiser la page dans votre navigateur et confirmer

Super! Voyons maintenant comment gérer la soumission de ce formulaire

Si vous remarquez le formulaire qu'il soumet à un point de terminaison « /search », configurons cette route et gérons la soumission du formulaire

Ouvrez votre fichier 'index.js' et ajoutez ces lignes

// 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);
});

Testons-le, accédez à votre navigateur, saisissez un terme de recherche dans la case et cliquez sur Soumettre
Vous devriez voir une réponse du serveur indiquant votre terme de recherche, comme ceci

Bon travail!

Maintenant que nous avons un itinéraire de recherche fonctionnel, connectons l'API FeedRika et récupérons les actualités sur le sujet.

Prochainement Partie II - Récupération de données