){kind=small}
Construire un tableau interactif : WhatsApp, SMS et MMS vers un site web (Partie 2)
Temps de lecture : 9 minutes
En Partie 1nous avons créé un tableau d'affichage interactif pour recevoir des SMS, des MMS et des messages WhatsApp et les afficher sur une page Web. Cette application utilisait l'API Messages de Vonage et un serveur Express.
Dans la deuxième partie, nous reproduirons cette fonctionnalité avec un petit quelque chose en plus. Nous utiliseronsAI Studio de Vonagepour gérer les messages entrants. Nos messages seront stockés dans une base de données Airtable, puis affichés par notre application Node.js.
Vonage AI Studio est une plateforme à code bas qui permet aux développeurs et aux non-développeurs de créer facilement des assistants virtuels. Grâce à son interface intuitive de type " glisser-déposer ", vous pouvez concevoir des flux conversationnels.
Vous pouvez trouver le code pour l'affichage du tableau de bord de l'administrateur sur ce dépôt GitHub. Clonez, et suivons le tutoriel ci-dessous que j'ai préparé pour vous, expliquant tous les bits étape par étape.
Interaction avec l'utilisateur: Un utilisateur démarre l'interaction en envoyant un message WhatsApp à un numéro de téléphone virtuel Vonage spécifique lié à l'Applications Vonage contenant le flux.
Réception des messages: Le flux de conversation commence par le nœud "Start", qui permet à l'utilisateur d'envoyer ou de recevoir des messages.
Stockage de données: Une fois traité, le message est enregistré sur Airtable, une plateforme en ligne permettant de créer et de partager des bases de données relationnelles.
Afficher : Construire notre tableau de bord administratif : Une page web, continuellement mise à jour, récupère ces messages d'Airtable et les affiche.
Tout d'abord, créons notre stockage de données, donc créons un Account sur Airtable. Une fois connecté, trouvez les étapes ci-dessous dans le tableau de bord d'Airtable. Par rapport à la partie 1, j'ai choisi de simplifier pour la partie 2 et de créer une seule table appelée Messages.
Créez une base appelée "Interactive Board" 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 remplir si vous le souhaitez et à aller jusqu'à la fin de la création de la base où je suis amené à la base Messages.
Vous pouvez maintenant voir quelques lignes numérotées vides. Créons un tableau intitulé Messages. Il comporte les colonnes suivantes : 'Message', 'Numbers' (numéro de téléphone), 'Statut' de type 'Sélection unique' et ajoutons les options 'Accepté', 'En attente' et 'Rejeté'. Et enfin, "ImageUrl".
Créer des vues comme la "vue en grille" pour filtrer les messages
Une fois que les enregistrements sont enregistrés dans Airtable, ils ont le statut " En attente ". Vos modérateurs peuvent accéder à la base de données Airtable et changer manuellement le statut de chaque enregistrement en "Rejeté" ou "Accepté". S'ils sont acceptés, ils seront publiés sur le site Web du tableau interactif.
Je vais décomposer chaque étape pour que vous puissiez créer le flux de notre application conversationnelle.
Accéder à AI Studio:
Se connecter/ s'inscrire à Vonage AI Studio. Vous le trouverez sur le tableau de bord de Vonage, sous le menu de gauche. Sélectionnez " AI Studio " et cliquez sur " Go to AI Studio ".
AI Studio
Configuration de l'agent WhatsApp:
Choisissez "WhatsApp" comme type d'agent et cliquez sur "Suivant".
Whatsapp Agent CreationComplétez les informations requises telles que la région, le nom de l'agent (par exemple, "Interactive Board"), la langue et le fuseau horaire (par exemple, Europe/Londres) et cliquez sur "Suivant".
Agent Creation Details
Sélection de modèles:
Cliquez sur "Créer un agent". Pour créer une nouvelle application, visitez Agents de Vonage AI Studio.
Choisissez le modèle "Start from Scratch".
Sélectionnez "Événement de session entrante" et cliquez sur "Créer". Cette étape est essentielle pour que les utilisateurs initient la session avec l'agent.
Cette section va plonger dans les spécificités de la création d'une application conversationnelle avec l'intégration de WhatsApp :
Vonage AI Agent Dashboard
Créer un message d'accueil (Envoyer un message) juste après l'itinéraire START pour souhaiter la bienvenue aux utilisateurs, expliquer les capacités du robot dans l'entrée "Agent says", et cliquer sur "Save and Exit" (Enregistrer et quitter).
Greeting Node
Créer un Collecter des données choisissez le paramètre MESSAGE, sélectionnez "Liste des messages" et ajoutez une section pour "Voir les messages" et une autre pour "Envoyer les messages", ajoutez toute autre information que vous jugez nécessaire pour que l'utilisateur puisse comprendre la description et cliquez sur "Enregistrer et quitter".
Input collection
Créer une Conditions (je l'ai appelé "Menu Condition : voir ou envoyer") avec deux conditions : "Voir le message" et "Envoyer le message". La première condition doit être Parameter : MESSAGE, Operation : Contient, Valeur : Voir. La deuxième condition devrait être Parameter : MESSAGE, Operation : Contient, Valeur : Envoyer.
Menu Condition
Après le bloc des conditions, nous créerons deux blocs :
Un nœud "Envoyer des messages" lié à notre condition "Voir" (je l'ai appelé Message à Voir des messages). Le message devrait être le suivant : Si vous souhaitez voir tous les messages de sortie, veuillez accéder à ce lien.
Nous mettrons à jour ce lien ultérieurement avec le lien ngrok que vous aurez avec votre serveur express. Pour l'instant, vous pouvez le laisser avec un message fictif.
Message to See MessagesUn deuxième nœud lié à "Send" de type "Collect Input" (je l'ai appelé "Send Messages") et dans l'invite, ajoutez un message du type "Go ahead and send me the message or image you'd like to share !" et sélectionnez "Text" et "Image" comme entrée attendue, car c'est ce que nous attendons de nos utilisateurs qu'ils envoient !
Send Message
Utilisons maintenant la classification pour traiter les données de nos utilisateurs. Dans la partie 1, nous avons ajouté un fichier contenant les mots bloqués pour notre application web. Maintenant, dans la partie 2, avec Vonage AI Studio, nous pouvons ajouter un nœud de classification. Il se trouve dans le menu de gauche : Nœud > Conversation > Classification. Ajoutez ce bloc au flux juste après " Envoyer des messages " et remplissez-le avec les informations suivantes :
Classification Intent
Paramètre de classification : MESSAGE Nous allons créer deux intentions : Envoyer un message et Bloquer des mots Dans le menu de gauche, vous pouvez cliquer sur "Propriétés" et créer une nouvelle intention, ou même à partir de la vue de classification dans laquelle vous vous trouvez actuellement, vous pouvez cliquer sur "Intention" et en créer une nouvelle à partir de là, puis ajouter l'ensemble de formation pour chaque intention.
Mots bloquants : Vous pouvez ajouter les mots qui sont bloqués pour votre flux (par exemple, les jurons).
Envoyer un message : vous pouvez ajouter des exemples de messages que les utilisateurs peuvent envoyer, par exemple : "Superbe événement", "Je passe un bon moment", "J'adore cet endroit, mais j'aimerais qu'il y ait des sushis".
En savoir plus sur la classification et pensez à de futures étapes d'amélioration en ajoutant l'intégration de l'analyse des sentiments pour détecter automatiquement les messages négatifs.
Créez un nœud d'envoi de message appelé "Allowlist alert". L'agent doit dire "Le message précédent était contraire à nos directives concernant les mots autorisés. Veuillez envoyer un autre message".
Allowlist alert
L'option "liste de blocage" de la classification devrait y être liée, et elle devrait être liée à l'entrée de message "Envoyer des messages".
Links
Ensuite, nous utiliserons un nœud Webhook (que j'ai nommé "Webhook : Create record") pour ajouter nos messages à notre backend Airtable. Pour ajouter des enregistrements à Airtable, cliquez sur Integrations > Webhook et remplissez les informations suivantes :
Method : POST Request URL : https://api.airtable.com/v0/BASE_URL/Messages Headers : Key : Authorization, Value : Bearer 'YOUR_AIRTABLE_ACCESS_TOKEN' Clé : Content-Type, Valeur : application/json
Webhook node
Remarque : L'URL de la demande doit correspondre à votre table dans Airtable.
Si vous êtes bloqué ou si vous avez des doutes, pour une explication plus détaillée, lisez L'effet de levier du code faible : AI Studio avec Airtable de Benjamin Aronov, où il explique en détail comment utiliser AI Studio avec Airtable.
Dans le deuxième onglet du webhook appelé 'Body', ajoutez les informations suivantes de type JSON. Cela signifie que nous ajoutons le message que l'utilisateur a envoyé contenant soit du texte soit une image, attribuant le numéro de téléphone de la personne interagissant avec cet agent, et définissant le statut de Pending, où les modérateurs peuvent le changer en Accepted ou Rejected à partir de Numbers.
{
"records": [
{
"fields": {
"Message":"$MESSAGE",
"Number": "$SENDER_PHONE_NUMBER",
"ImageUrl": "$MESSAGE",
"Status":"Pending"
}
}
]
}Liez l'option de réussite du webhook à un nouveau nœud "Send Message". Créez un nouveau nœud "Send Message", nommez-le "Media Receipt" et ajoutez sous Agent Says "Thanks for sending this over !" et cliquez sur save and exit.
Media receipt
Lier l'option d'échec du webhook à l'envoi précédent du message Collect Input pour le leur demander à nouveau. Reliez le nœud "Media receipt" au nœud "Message to See Messages" préexistant, puis reliez-le à "End Conversation".
Flow
Le code est similaire à celui que nous avons vu dans la partie 1. Cependant, nous pouvons éliminer l'élément blocklist.txt car cela est maintenant géré dans le flux de conversation dans AI Studio de Vonage et la création de l'utilisateur et l'insertion des enregistrements dans Airtable. Cependant, nous conservons le point de terminaison qui modifie l'état du message "/messages/:messageId/:status" en plus du point de terminaison qui récupère les messages /messages. Voici à quoi ressemble le fichier index.js pour ce projet.
Comme indiqué dans la partie 1, vous devez faire tourner ngrok et retourner dans le flux de l'agent AI Studio pour mettre à jour le nœud See Messages avec l'URL ngrok fournie ; vous pouvez toujours héberger votre site web et ajouter la page web qui y est liée pour ce tutoriel de démonstration en utilisant ngrok à partir de notre localhost suffit.
Vous pouvez voir un bouton Tester en haut à droite de l'AI Studio de Vonage ; vous pouvez tester votre conversation sans la publier. Allez-y et sélectionnez " Session entrante " et cliquez sur le bouton " Commencer la conversation ". Vous pouvez pré-remplir les paramètres avec lesquels vous voulez que l'agent travaille (en cliquant sur l'icône des paramètres/de l'engrenage) et choisir le mode de test. Consultez la Page du testeur pour en savoir plus.
Nous avons utilisé l'entrant pour commencer avec les messages WhatsApp, mais si nous devions utiliser le MMS, vous pourriez toujours utiliser le même numéro attribué au chatbot WhatsApp. Il y a quelques conditions à remplir pour obtenir un numéro MMS depuis les États-Unis 10DLC, TFN et Shortcode que vous avez dans votre tableau de bord vers d'autres numéros à l'intérieur des États-Unis. Pour en savoir plus Comment envoyer des messages MMS avec Node.js.
Dans Vonage AI, il existe une action appelée " Envoyer un SMS ". Vous pouvez ajouter ce bloc à votre flux de conversation pour envoyer un SMS, remplissez les champs contenant les numéros de l'expéditeur et du destinataire ainsi que le corps du message, cliquez sur " Enregistrer et quitter " et connectez-le au nœud auquel vous souhaitez envoyer le message. Vous pouvez en savoir plus sur Envoi de SMS à l'aide de Vonage AI.
Lorsque j'ai eu fini de construire cette application conversationnelle de démonstration, j'ai voulu voir ce qu'elle donnait sur WhatsApp et être en mesure de versionner et de publier mes modifications. Pour ce faire, j'ai acheté un numéro de téléphone, je l'ai attribué à l'agent, je l'ai lié à l'aide de l'API Messages et j'ai créé un WhatsApp Business Account avec le numéro que je venais d'acheter. Vous pouvez en savoir plus sur comment publier votre agent pour publier le vôtre et le partager avec d'autres !
Consultez la documentation sur l'IA de Vonage AI docsSi vous avez besoin d'aide, partagez vos expériences, vos commentaires et toute utilisation innovante que vous avez trouvée en utilisant nos API avec notre communauté par l'intermédiaire de X, anciennement connu sous le nom de Twitter ou la Communauté Slack.