Partager:
){kind=small}
Ancien directeur de la formation des développeurs chez Vonage. Avec une expérience de développeur créatif, de gestionnaire de produits et d'organisateur de journées de hacking, Martyn travaille comme défenseur de la technologie depuis 2012, après avoir travaillé dans le secteur de la radiodiffusion et dans de grandes maisons de disques. Il forme et responsabilise les développeurs du monde entier.
Construire un bot Facebook Messenger avec Dialogflow (API Tutorial)
Temps de lecture : 17 minutes
Article mis à jour par Amanda Cavallaro
Dans ce tutoriel, vous apprendrez à créer un robot Facebook Messenger sur votre page Facebook en utilisant Google Dialogflow et l Vonage Messages API.
L'application chatbot de cet exemple prendra les messages entrants via le bouton " Envoyer un message " d'une page Facebook ou via l'appli Facebook Messenger. Les deux fonctionneront parfaitement avec l'application de chatbot.
Les messages seront acheminés par notre application vers Google Dialogflow. Dialogflow utilisera alors le traitement du langage naturel (NLP) pour générer des réponses aux questions. Notre chatbot renverra ensuite ces réponses à Facebook Messenger via l'API.
Dans cet exemple, nous utilisons l'agent agent Small Talk préconstruit dans Dialogflow. Nous utiliserons l'agent Small Talk pour construire un bot Facebook qui répondra avec des réponses gazouillantes aux questions entrantes. L'agent Small Talk est facile à utiliser et est parfait pour le développement.
Nous avons inclus des instructions étape par étape pour construire un bot Facebook Messenger avec une intégration Dialogflow en utilisant l'API Message de Vonage. Tout au long du tutoriel, vous trouverez des exemples de code que vous utiliserez pour construire votre chatbot.
Vous pouvez télécharger le code à partir de ce site GitHub sur GitHub.
Pour créer un bot Dialogflow pour Facebook Messenger, vous aurez besoin des prérequis suivants :
A Compte Facebook avec une page de marque/entreprise que vous pouvez utiliser pour les tests
A Google Dialogflow ES Account
Node.js v12 ou supérieur
Un compte gratuit Compte API Vonage gratuit
L'interface de ligne de commande Interface de ligne de commande de Vonage
Pour créer un bot à l'aide de Facebook Messenger, Dialogflow et l'API Messages, suivez les étapes ci-dessous :
Créer un squelette d'application pour le robot Facebook
Créer une application de messages dans l'API de Vonage
Connecter l'API Messages de Vonage à Facebook
Envoyer des messages Facebook à Dialogflow
Envoyer des réponses Dialogflow à Facebook
Testez votre robot Facebook Messenger
La première étape de la réalisation de votre bot Facebook Messenger consiste à créer un squelette d'application.
Pour recevoir des messages de Facebook, vous devez configurer deux webhooks qui permettent à l'appli de recevoir des données sur les messages et les statuts de livraison.
Nous commencerons par construire l'application de base avec ces deux routes.
Dans un nouveau dossier, initialisez une nouvelle application Node.js en exécutant
Ensuite, installez les dépendances du projet :
En outre, nous utiliserons l'excellent logiciel Nodemon et DotEnv pour que notre application reste opérationnelle pendant que des changements sont effectués, afin que vous n'ayez pas à la redémarrer sans cesse. Installez-les en tant que devDependencies.
Enfin, ajoutez une petite structure de dossier en créant routes et controllers à la racine de votre répertoire.
Le code GitHub est accompagné d'un fichier .env.sample copiez-le et renommez-le en env. Vous devrez ajouter les valeurs aux clés suivantes.
VONAGE_API_KEY: Il se trouve sur la page d'accueil du tableau de bord de Vonage lorsque vous êtes connecté.
VONAGE_API_SECRET: Lorsque vous êtes connecté, vous pouvez le trouver sur le tableau de bord de l'API de Vonage (Vonage API Dashboard). tableau de bord de l'API de Vonage.
VONAGE_APPLICATION_ID: Il se trouve sur le tableau de bord Vonage à l'intérieur de l'application.
VONAGE_PRIVATE_KEY: Un fichier téléchargeable à partir du tableau de bord de Vonage à l'intérieur de l'application avec des capacités de message.
FACEBOOK_PAGE_ID: Vous pouvez trouver cette information en accédant aux paramètres du profil. Vous la trouverez sous Résumé > Informations sur la page.
DIALOGFLOW_PROJECT_ID: Vous pouvez trouver l'ID du projet dans Google Cloud Platform ou dans l'onglet 'General' des paramètres du projet Dialogflow dans le tableau de bord Dialogflow ES. Voici une autre façon de trouver l'ID de la page fournie par leurs FAQs.
DIALOGFLOW_SESSION_ID: L'identifiant de session peut être une chaîne générée de manière aléatoire ou un identifiant d'utilisateur haché. Sa longueur ne doit pas dépasser 36 caractères.
DIALOGFLOW_LANGUAGE_CODE: Vous pouvez choisir plusieurs langues ; ajoutez celle que vous trouvez sur votre tableau de bord Dialogflow.
GOOGLE_APPLICATION_CREDENTIALS: Vous pouvez créer une clé de compte de service ici.
Koa est un framework pour Node.js écrit par les créateurs de Express. Il est léger et n'est livré qu'avec un ensemble de fonctionnalités de base, ce qui le rend parfait pour créer un petit serveur de webhook comme celui dont nous avons besoin ici.
Créez le fichier principal du serveur en ajoutant un nouveau fichier dans votre répertoire racine appelé server.js.
Dans ce nouveau fichier, ajoutez le code suivant :
const Koa = require('koa');
const router = require('koa-route');
const bodyParser = require('koa-bodyparser');
const routes = require('./routes');
const port = process.env.PORT || 3000;
// Set up a new Koa app and tell it to use
// the bodyParser middleware for inbound requests
const app = new Koa();
app.use(bodyParser());
// Routes
app.use(router.post('/webhooks/status', routes.status));
app.use(router.post('/webhooks/inbound', routes.inbound));
// Have the app listen on a default port or 3000
app.listen(port, () => console.log(`App is waiting on port ${port}`));
La constante routes est utilisée pour stocker et accéder aux itinéraires dans l'application :
const routes = require('./routes');Nous aurons également besoin d'un nouveau fichier dans le dossier routes appelé index.js. Créez ce fichier et ajoutez le code suivant :
const routes = {
inbound: async ctx => {
// Get the detail of who sent the message, and the message itself
const { from, message } = ctx.request.body;
console.log(from, message);
ctx.status = 200;
},
status: async ctx => {
const status = await ctx.request.body;
console.log(status);
ctx.status = 200;
}
};
module.exports = routes;
Une fois ces éléments en place, exécutez la commande suivante pour démarrer le serveur :
L'application sera lancée sur le port 3000.
Utilisez Ngrok pour ouvrir ce port au monde et notez les URL qu'il produit pour vous ; cela devrait ressembler à : https://f70f-82-10-85-156.ngrok.io
Voici un guide pratique pour travailler avec Ngrok si vous l'utilisez pour la première fois.
TLDR ? Vous pouvez démarrer Ngrok (s'il est installé) en lançant cette commande dans un onglet séparé du terminal :
Ensuite, vous devrez créer une application Applications dans votre compte Vonage API. Cette application vous permettra de connecter Facebook et Dialogflow et d'envoyer des messages entre eux.
Créez une nouvelle application Applications via le tableau de bord Vonage.
Veillez à ajouter /webhooks/inbound et /webhooks/status à l'URL que vous obtenez de Ngrok lorsque vous les collez dans le formulaire (comme dans l'image ci-dessous).
Messages Webhook
N'oubliez pas de cliquer également sur le bouton Générer une paire de clés publiques/privées lien. Cela téléchargera un fichier appelé private.key.
Localisez le fichier private.key sur votre système et déplacez-le dans le dossier racine de votre application.
Finaliser la configuration de l'application en cliquant sur le bouton Créer une application et vous avez terminé la configuration.
Notez votre numéro d'identification de l'application ; vous en aurez besoin à l'étape suivante.
Pour que Facebook soit au courant de votre application de chatbot nouvellement créée, vous devez connecter l'application de chatbot à Facebook....
Tout d'abord, vous devez créer un jeton Web JSON pour autoriser Facebook à utiliser votre application, ce que vous pouvez faire à l'aide de la fonction CLI de Vonage.
Ouvrez votre terminal et assurez-vous d'être à la racine de votre dossier d'application.
Utilisation de la CLI de VonageExécutez la commande suivante :
Veillez à remplacer VONAGE_APPLICATION_ID par l'ID de l'application que vous venez de créer.
En exécutant cette commande, vous obtiendrez une grande chaîne de lettres et de chiffres - il s'agit de votre Token Web JSON. Copiez le tout.
Vous pouvez ensuite visualiser le JWT avec :
Pour connecter votre page Facebook à votre application, nous avons créé une page pratique :
Effectuez les étapes suivantes :
Connectez-vous avec vos identifiants Facebook.
Sélectionnez la page Facebook que vous souhaitez connecter à votre application Vonage.
Cliquez sur Terminer l'installation.
Si tout se passe bien, vous verrez apparaître une boîte de dialogue verte qui vous félicitera de votre réussite et vous indiquera l'identifiant de votre page Facebook.
Notez cet identifiant.
Vous pouvez vérifier le contenu de votre JWT en utilisant jwt.io.
Note: Si un élément de ce document doit être clarifié, il existe un guide sur la création de JWTs à utiliser dans ce contexte dans notre tutoriel Facebook Messenger.
Votre application est maintenant connectée à votre page Facebook.
Alors que votre serveur fonctionne toujours et que Ngrok continue de l'exposer au monde entier, rendez-vous sur votre page Facebook et repérez le bouton de messagerie.
Cliquez dessus pour ouvrir la fenêtre de messagerie et commencer à envoyer de merveilleuses missives. Vous pouvez également commencer par Bonjour.
Tout message que vous envoyez est transmis au Webhook entrant que vous avez spécifié dans la configuration de votre application. Cela correspond directement à la fonction inbound dans le fichier routes.js dans le fichier
Actuellement, la fonction inbound est paramétrée pour enregistrer les from et message de ce qui est envoyé par Facebook à la console.
Vous devriez voir vos messages apparaître dans la console.
Maintenant que l'application reçoit des messages entrants, il est temps d'envoyer ces messages à Dialogflow.
Dans le dossier controllers créez un nouveau fichier appelé dialogflow.js et ajoutez le contenu du fichier JavaScript controllers/dialogflow.js.
La fonction exportée dans le fichier permet d'obtenir les résultats suivants :
Une fonction asynchrone appelée
dialogflowHandlerest instanciée et accepte un paramètre appeléquery.Un objet appelé
requestest créé, contenant toutes les clés attendues par Dialogflow.L'objet de la demande est envoyé à Dialogflow.
La réponse de l'agent Small Talk, contenue dans
result[0].queryResult.fulfillmentTextest renvoyée.
const dialogflowHandler = async query => {
// Create a text query request object
const request = {
session: sessionPath,
queryInput: {
text: {
text: query,
languageCode: languageCode
}
}
};
// Send the text query over to Dialogflow and await the result
// using .catch to throw any errors
const result = await sessionClient
.detectIntent(request)
.catch(err => console.error('ERROR:', err));
// Pick out the response text from the returned array of objects
const reply = await result[0].queryResult.fulfillmentText;
// Return the reply
return reply;
};
module.exports = dialogflowHandler;
Pour utiliser cette fonction dialogflowHandler ouvrez le fichier routes/index.js et l'exiger en haut de la page :
const dialogflowHandler = require('../controllers/dialogflow');Modifiez la fonction inbound pour qu'elle ressemble à ceci :
inbound: async ctx => {
const { from, message } = await ctx.request.body;
console.log(from, message);
const dialogflowResponse = await dialogflowHandler(message.content.text);
console.log(dialogflowResponse);
ctx.status = 200;
};
Envoyez un nouveau message (quelque chose comme "Bonjour !") depuis votre page Facebook (ou via votre application Facebook Messenger).
Cette fois-ci, vous verrez le message entrant enregistré dans la console, ainsi que la réponse renvoyée par Dialogflow.
Note : Si vous avez besoin d'aide pour configurer Dialogflow, suivez les instructions suivantes SmallTalk Prebuilt Agent pour vous aider à configurer Dialogflow.
La dernière pièce du puzzle consiste à prendre la réponse Dialogflow et à l'envoyer à l'utilisateur via le bot Facebook Messenger.
L'API Vonage Messages API s'occupera de tout cela pour nous.
Créer un nouveau fichier dans le dossier controllers appelé vonage.js et le remplir avec le contenu de ce fichier : controllers/vonage.js.
La principale fonction exportée dans ce fichier s'appelle messageResponder.
Cette fonction utilise la bibliothèque client Node.js de Vonage pour renvoyer un message à l'utilisateur.
La fonction reçoit un objet appelé message qui contiendra le id de l'utilisateur à qui envoyer la réponse et le dialogflowResponse (le texte à envoyer dans le message).
const messageResponder = async (message) => {
vonage.messages.send(
new MessengerText({
text: message.dialogflowResponse,
to: process.env.FACEBOOK_PAGE_ID, // Who the message goes to
from: $FB_RECIPIENT_ID, // Who the message comes from. The PSID of the user you want to reply to. The FB_RECIPIENT_ID is the PSID of the Facebook User you are messaging. This value is the from.id value you received in the inbound messenger event on your Inbound Message Webhook URL.
}),
(err, data) => {
if (err) {
throw new Error(err);
} else {
console.log(
`Replied to ${message.id} with '${message.dialogflowResponse}' (ID: ${
data.message_uuid
})`
);
}
}
);
};
Pour utiliser cette fonction messageResponder il faut l'importer dans le fichier routes/index.js dans le fichier
Au début du fichier, sous la déclaration require du fichier dialogflow.js créée précédemment, ajoutez ce qui suit :
const messageResponder = require('../controllers/vonage');Ensuite, dans la fonction inbound ajoutez le code suivant juste au-dessus de la ligne ctx.status = 200 de la fonction :
messageResponder({ from, dialogflowResponse });
ctx.status = 200;Comme vous pouvez le voir, nous passons un objet dans messageResponder avec le contenu de fromavec la réponse de Dialogflow ES.
L'objet transmis à la fonction ressemblera alors à ceci :
{
from: '111111111111', // ID of the user on Facebook that sent the message
dialogflowResponse: 'Greetings!'
}
Le décor est planté. Avec ce dernier fichier, la boucle est bouclée, et tout message entrant devrait recevoir une réponse immédiatement. Vous êtes maintenant prêt à tester votre bot Facebook Messenger et votre intégration Dialogflow.
Envoyez à nouveau un message depuis votre page Facebook. La réponse de Dialogflow devrait maintenant apparaître dans la même fenêtre !
Félicitations ! En suivant les étapes de ce tutoriel, vous avez construit un bot Facebook Messenger alimenté par Dialogflow, avec un coup de main de l'API Messages de Vonage.
Le préconstruit Small Talk est parfait pour les tests, mais l'étape suivante consisterait à créer votre propre agent, capable de transmettre des connaissances utiles à l'utilisateur.
Pour plus d'informations sur la construction d'agents Dialogflow, vous pouvez consulter les guides pratiques Dialogflow.
Avec le code de ce tutoriel, vous avez déjà le lien entre Facebook et Dialoglow, vous pouvez donc aller de l'avant et construire l'agent le plus puissant de tous les temps.
Si vous avez des questions sur cet article de blog, n'hésitez pas à nous contacter sur notre Communauté Vonage Slack ou envoyez-nous un message sur X, anciennement connu sous le nom de Twitter.
Partager:
Ancien directeur de la formation des développeurs chez Vonage. Avec une expérience de développeur créatif, de gestionnaire de produits et d'organisateur de journées de hacking, Martyn travaille comme défenseur de la technologie depuis 2012, après avoir travaillé dans le secteur de la radiodiffusion et dans de grandes maisons de disques. Il forme et responsabilise les développeurs du monde entier.