Construire un tableau interactif : WhatsApp, SMS et MMS vers un site web (Partie 1)

Introduction

Vous souhaitez créer un tableau interactif pour afficher des messages lors d'événements ? Ce tutoriel sur la création d'une application web Node.js Express vous guidera pour recevoir des SMS, MMS et messages WhatsApp, les enregistrer dans une base de données et les afficher sur un site web. En outre, je vous donnerai des conseils pour que vos messages soient sûrs pour votre famille. En Partie 2 je vous montrerai comment créer l'application web à l'aide d'AI Studio, alors restez à l'écoute !

Le code du projet est sur GitHub. Clonez-le, et passons au tutoriel ci-dessous. J'ai préparé pour vous l'explication de tous les éléments, étape par étape.

Conditions préalables

Certaines choses sont attendues de vous avant que nous ne commencions ce projet. Je les énumère ci-dessous :

• Un Account Vonage - pour utiliser les API de communication afin de recevoir des SMS, des MMS et des messages WhatsApp.

• Un Account Airtable - pour stocker le numéro de téléphone, les SMS et les images

• ngrok - est un tunnel permettant d'exposer le code local à l'internet

Répartition du projet

Structure du projet

L'interaction commence par l'envoi par un utilisateur d'un SMS, d'un MMS ou d'un message WhatsApp à un numéro. La structure du projet que nous allons créer étape par étape devrait ressembler à ceci à la fin du tutoriel.

Routes d'API exposées

Nous utilisons Express.js et les routes suivantes (points d'extrémité qui exposent différentes fonctionnalités d'une application web) que l'application expose pour les messages entrants, les sortant vers un site web en récupérant des données sur Airtable.

• /inbound: Route POST pour les messages entrants, interaction avec Airtable pour le stockage.

• /messages/:messageId/:status: Route POST pour la mise à jour de l'état des messages dans Airtable.

• /messages: Route GET pour récupérer les messages filtrés par statut depuis Airtable.

Exposer le serveur local en cours d'exécution à l'Internet à l'aide de Ngrok

Nous ajouterons toutes les composantes au fur et à mesure de l'avancement de ce tutoriel ; pour l'instant, exposons le projet que nous exécuterons localement à l'Internet ; nous utiliserons la technologie ngrok.

Exécuter ngrok http 3001 à partir de votre terminal, dans ce cas, parce qu'il fonctionne sur le port 3001. Nous ajouterons ensuite le point de terminaison du webhook généré à notre tableau de bord Vonage en utilisant l Messages API dans la sous-section suivante.

Créer une nouvelle application Vonage

S'inscrire ou se connecter à son Account Vonage

Comme indiqué au début de cet article, disposer d'un compte Vonage est un prérequis pour ce tutoriel. Vous pouvez suivre les étapes ci-dessous pour vous inscrire afin de créer un nouveau compte.

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Recevoir des SMS ou des MMS

• Connectez-vous à votre tableau de bord Vonage

• Allez dans "Numbers" et cliquez sur "Acheter des Numéros" dans le menu de gauche.

• Rechercher et acheter un numéro de téléphone dans votre pays

• Allez dans "Applications" dans le menu de gauche et cliquez sur "Créer une nouvelle application"

• Donnez à l'application un nom tel que "Tableau interactif"

• Sous Capacités, activer Messages

• Sous Inbound SMS Webhook, définissez l'URL comme étant l'URL de votre serveur + la route '/inbound'.

• Sous Status Webhook, définissez l'URL comme étant l'URL de votre serveur + la route '/status'.

  Messages Inbound and Status URLs.

• Cliquez pour enregistrer la demande au bas de la page de droite

• Reliez votre numéro acheté au bas de la page de candidature en cliquant sur "Lien" en face de celui-ci.

Tout SMS ou MMS envoyé à ce numéro sera acheminé et traité. /inbound et sera traité. Pour que le numéro soit en mesure d'envoyer des MMS, il faut que certaines conditions soient remplies ; je les ai énumérées dans cet article de blog, How to Send MMS Messages with Node.js (Comment envoyer des messages MMS avec Node.js)..

Recevoir des messages WhatsApp

Les étapes ci-dessous expliquent comment configurer votre bac à sable de messages WhatsApp pour le tester. Vous pourriez également le configurer avec des numéros de téléphone virtuels et des numéros de téléphone professionnels WhatsApp.

• Connectez-vous à votre tableau de bord Vonage

• Cliquez sur "Messages Sandbox" sous "Developer Tools" dans le menu de gauche "Messages API" et cliquez sur "Create a new WhatsApp Sandbox"

• Choisissez le bac à sable de WhatsApp. Vous pouvez vous connecter à cette sandbox en envoyant un message WhatsApp au numéro de téléphone autorisé ou en scannant le code QR fourni.

• Sous Webhooks, définissez l'URL du message entrant comme étant l'URL de votre serveur + la route '/inbound'.

Votre numéro de téléphone peut envoyer et recevoir des messages WhatsApp avec le bac à sable de l'API Messages de Vonage.

Ajouter les variables d'environnement

Que vous ayez cloné le lien du dépôt GitHub fourni ou que vous soyez en train de créer le dossier du projet, assurez-vous d'avoir un dossier principal pour ce projet ; nous pouvons l'appeler 'interactive-board'. Ensuite, assurez-vous qu'il y a un fichier .env contenant nos variables d'environnement pour ce projet, nous ajouterons les variables suivantes :

Créer un Jeton d'accès Airtableet ajoutez les champs d'application que nous utiliserons pour ce projet : data.records:read to Voir les données dans les enregistrements et data.records:write to créer, modifier et supprimer des enregistrements. Enfin, donnez-lui accès à l'espace de travail que nous utilisons actuellement pour ce projet. Cliquez pour créer et ajouter le jeton à la variable d'environnement 'AIRTABLE_ACCESS_TOKEN'. Nous aurons également besoin de notre identifiant de base Airtable. Vous pouvez consulter leur documentation pour obtenir de l'aide Trouver des ID dans l'API Airtable. Votre URL de base devrait ressembler à https://airtable.com/AIRTABLE_BASE/string-of-characters. L'identifiant AIRTABLE_BASE est la première série de caractères après airtable.com/ et avant le deuxième /.

Afficher des messages avec HTML et CSS

Nous utiliserons HTML et CSS pour afficher les messages que le fichier main.js récupère les messages de notre API et gère la logique javascript. Créez un dossier public suivi d'un fichier index.html pour afficher l'interface utilisateur du tableau d'affichage et importer le fichier main.js pour accéder aux données des messages.

Ajoutez le style CSS qui comprend trois classes fondamentales : .message-record pour les messages individuels, avec un arrière-plan en dégradé et un remplissage ; .event-title pour le titre principal, également avec un dégradé pour le mettre en valeur, et .message-grid pour organiser les messages dans une grille réactive. J'utilise une balise <style> dans ce code, mais si vous préférez, vous pouvez créer un fichier CSS et l'importer dans votre fichier HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Interactive Board</title>
    <style>
      .message-record {
        background: linear-gradient(135deg,#871fff,#7ec9f4);
        padding: 10px;
        box-sizing: border-box;
      }
      .event-title {
        background: linear-gradient(135deg,#d41f9c,#ffa78c);
      }
      .message-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        grid-gap: 10px;
      }
    </style>
  </head>
  <body>
    <h1 class="event-title">Vonage ♥s <Event Name></h1>
    <div id="messages"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

Récupérer les messages

Il est temps de créer le main.js fichier sous le dossier public que nous avons importé dans notre HTML et d'ajouter le code pour récupérer les messages du serveur Express et les afficher dans une grille.

Créer le main.js fichier dans le dossier public et ajoutez les éléments de code suivants :

const messagesDiv = document.getElementById("messages");
messagesDiv.className = "message-grid";

Récupérer les messages du serveur :

function fetchMessages() {
  fetch("http://localhost:3001/messages?status=Accepted")
    .then(response => response.json())
    .then(data => {
      // Process data...
    })
    .catch(error => console.error(error));
}

Actualiser les messages toutes les 60 secondes :

setInterval(fetchMessages, 60000);

Recevoir des messages entrants et les enregistrer dans la base de données

Voyons comment le serveur Express gère les messages entrants et les enregistre dans Airtable. Ajoutez le code suivant dans le fichier 'index.js'.

Importer des dépendances

Nous importons la dépendance dotenv pour charger les variables d'environnement de .envExpress pour gérer les requêtes web, et le SDK Airtable pour s'intégrer à l'API Airtable.

const dotenv = require('dotenv').config(); // loads environment variables
const express = require('express') // web framework 
const Airtable = require('airtable') // Airtable SDK

Initialiser Airtable

const base = new Airtable({apiKey: process.env.AIRTABLE_ACCESS_TOKEN})  
  .base(process.env.AIRTABLE_BASE)

Utilisez le jeton d'accès Airtable et l'ID de la base stockés dans .env pour initialiser la base Airtable. (Voir l'étape Variables d'environnement de ce tutoriel). Cette base contient les tables Numbers et Messages.

Recevoir/inbound Demandes

app.post('/inbound', (req, res) => {

  // ... handle incoming messages 
  const { from, text, channel, message_type } = req.body;
  console.log(JSON.stringify(req.body));
  res.send('Message received!');
})

Nous définissons une route POST à /inbound pour recevoir les messages entrants. Elle affichera "Message reçu !" à l'écran lorsqu'une demande atteindra la route /inbound à l'écran. Nous remplacerons cela plus tard par un enregistrement dans la base de données, mais c'est un moyen rapide de vérifier que les messages arrivent.

Vérification des utilisateurs existants

base('Numbers').select({
  filterByFormula: `Number=${from}` 
}).eachPage(records => {

  if(records.length == 0) {
    // create a new user
  } else {
    // existing user, get ID
  }

})

Recherchez le numéro de l'expéditeur dans le tableau Numbers. S'il n'y a pas de correspondance, créez un nouvel utilisateur. Dans le cas contraire, obtenez l'ID d'enregistrement de l'utilisateur existant.

Sauvegarder le message

let status = 'Pending'

base('Messages').create({
  Message: text,
  Number: [numberId],
  Status: status,
  ImageUrl: imageUrl
})

Créez un nouvel enregistrement de message dans Airtable avec le contenu du message, l'ID de l'expéditeur, le statut et l'URL de l'image.

Mise en œuvre d'une liste de blocage pour le filtrage des messages

Notre application utilise un fichier modifiable manuellement pour la modération des messages. blocklist.txt pour la modération des messages, ce qui vous permet d'ajouter des mots ou des phrases jugés inappropriés ou non pertinents.

1. Charger la liste de blocage: Le fichier blocklist.txt est initialement lu à l'aide du module de système de fichiers fs de Node.js. Chaque ligne de ce fichier représente un mot ou une phrase à bloquer. Ceci est réalisé avec le code suivant :

   let blocklist = fs.readFileSync('blocklist.txt', 'utf8').split(/\s+/);

   Copie

Cette ligne lit le contenu du fichier, en le divisant en un tableau de mots/phrases basé sur les espaces et les sauts de ligne.

1. Vérification des messages: Lorsque l'application reçoit un nouveau message au niveau de la route ' /inbound', elle vérifie si le texte contient des mots bloqués. La vérification compare le texte du message à chaque mot bloqué sans tenir compte des majuscules ou des minuscules. Cela permet de s'assurer que le filtre fonctionne même si quelqu'un tape un mauvais mot avec des majuscules bizarres.

   if (blocklist.some(word => message.toLowerCase().includes(word.toLowerCase()))) {
     // actions to reject the message
   } 
   

   Copie

2. Poignées d'allumettes: Si un message contient un mot de la liste de blocage, son statut devient rapidement "Rejeté". Par défaut, le statut de chaque message est "En attente", ce qui indique qu'il attend d'être modéré.

   let status = "Pending";
   
   if (blocklist match) {
     status = "Rejected"; 
   }
   
   // Code to save the message with its updated status

   Copie

3. Mise à jour de la liste de blocage: Pour ajouter de nouveaux mots ou de nouvelles phrases, ouvrez blocklist.txtinsérer les nouvelles entrées (une par ligne) et sauvegarder le fichier. Un redémarrage du serveur peut être nécessaire pour que les modifications soient prises en compte.

Ce mécanisme de liste de blocage est une couche fondamentale de la modération de contenu, permettant de filtrer les messages indésirables sur la base de critères spécifiques. Bien qu'il s'agisse d'un processus manuel, il offre un moyen simple et efficace de maintenir la qualité et la pertinence des messages affichés sur votre forum.

L'intégration de l'IA dans le système de liste de blocage pourrait améliorer considérablement le filtrage des messages. L'IA peut comprendre le contexte et le sentiment, ce qui améliore la détection du spam ou du contenu inapproprié. Cette approche avancée permet une modération plus précise et plus adaptable.

Stocker des informations dans la base de données Airtable

Comme l'indiquent les conditions préalables, vous devez créer un Account sur Airtable. Une fois connecté, suivez les étapes ci-dessous à partir du tableau de bord d'Airtable.

1. Créez une base appelée "Messages" en cliquant sur "+ Create a base", et choisissez une couleur de thème et une icône optionnelle ; j'ai sauté le reste de la configuration, mais n'hésitez pas à la compléter si vous le souhaitez, et je suis allé jusqu'à la fin de la création de la base où je suis amené à la base Messages.

2. Vous pouvez maintenant voir quelques lignes numérotées vides. Continuons et créons deux tables : Numbers pour stocker les numéros de téléphone des utilisateurs et Messages pour stocker les messages entrants.

3. Ajouter une colonne "Nombre" au tableau Numbers.

4. La table Messages doit comporter les colonnes suivantes : "Message", "Numéro" (lié au tableau Numbers), et "Statut" de type "Sélection unique" et ajouter les options "Accepté", "En attente" et "Rejeté". Et enfin, "ImageUrl".

5. Créer des vues comme la "vue en grille" pour filtrer les messages

Travailler avec des tableaux

Dans les étapes ci-dessous, je vais vous montrer comment faire correspondre la base Airtable au code, utiliser les tables Numbers et Messages, et effectuer des opérations CRUD comme créer, sélectionner, mettre à jour, et utiliser des filtres pour interroger les statuts des messages, allez-y et ajoutez les étapes ci-dessous à votre fichier 'index.js'.

1. Il est temps d'initialiser " Base " ; nous ajouterons la clé API Airtable et la base dans notre code JavaScript.

const base = new Airtable({apiKey: process.ENV.AIRTABLE_KEY}).base(process.ENV.ACCESS_TOKEN);

1. Le tableau Numbers est utilisé pour rechercher ou créer de nouveaux utilisateurs :

base('Numbers').create({Number: phoneNum}) 

base('Numbers').select({filterByFormula: `Number=${phoneNum}`})

1. La table des messages est utilisée pour créer de nouveaux messages entrants :

base('Messages').create({
  Message: text,
  Number: [numberId], 
  Status: status,
  ImageUrl: imageUrl
})

1. Les messages sont sélectionnés à l'aide de filtres :

base('Messages').select({
  filterByFormula: `Status="${statusFilterValue}"` 
})

1. Les statuts des messages sont mis à jour :

base('Messages').update(messageId, {
  Status: status
})

Testez-le

Maintenant que le code et la base de données sont en place, il est temps de tout tester. Assurez-vous que toutes les dépendances sont installées en lançant npm install. Lancez le projet en tapant la commande node index.js depuis votre terminal, et assurez-vous que vous avez une instance de ngrok en cours d'exécution.

Naviguez vers localhost:3001 sur votre navigateur. Envoyez un SMS, un MMS ou un message WhatsApp au numéro virtuel de téléphone Vonage associé à votre appli web. Allez dans votre base Airtable et changez le statut du message que vous avez reçu. En cas d'acceptation, vous verrez le message sur le site web fonctionnant sur localhost:3001.

Conclusion

Aujourd'hui, vous avez appris à construire un tableau interactif qui reçoit des SMS, des MMS ou des messages WhatsApp et les restitue. J'ai utilisé Airtable pour cet exemple, mais vous pouvez utiliser toute autre base de données de votre choix (par exemple, MongoDB / Firebase) pour stocker et récupérer des informations. Pour la prochaine série de ce tutoriel, vous apprendrez à réaliser la même fonctionnalité à l'aide de notre AI Studio.

N'hésitez pas à discuter avec nous et à nous dire ce que vous avez pensé de ce tutoriel sur notre site Web. X, puis sur Twitter ou Communauté Slack!