Le matériel, dont nous présentons aujourd'hui la traduction, est consacré au développement d'un chat bot pour Facebook Messenger. Un bot appelé Aww Bot, communiquant avec les utilisateurs, leur enverra des photos de chats et de chiens mignons.
Pour commencer
Commençons par créer une page sur
Facebook en remplissant les champs obligatoires. Cette page est pour le bot. De plus,
nous créerons une application Facebook, après quoi, sur la page Ajouter un produit, nous connecterons le produit Messenger à l'application. Ensuite, nous nous retrouverons sur la page des paramètres de messagerie. Ici, vous devez trouver la section Génération de jetons, en elle - sélectionnez la page du bot dans la liste des pages. Après cela, nous serons interrogés sur les autorisations et un jeton d'accès sera créé. Le bot utilisera ce jeton pour passer des appels à l'API Facebook Messenger, ce qui lui permettra de communiquer avec les utilisateurs.
Configuration du serveur Web
Nous utiliserons node.js et express.js pour créer un serveur HTTP. Exécutez la commande suivante:
npm install express body-parser request config
Ajoutez le code suivant Ă
index.js qui vous permet de créer un simple serveur HTTP:
'use strict'; let express = require('express'), bodyParser = require('body-parser'), app = express(); app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); app.listen(8989, () => console.log('Example app listening on port 8989!')); app.get('/', (req, res) => res.send('Hello World!'));
Maintenant, si vous dĂ©marrez le serveur et allez, Ă l'aide de votre navigateur, Ă
http://127.0.0.1:8989 , vous verrez une page avec la réponse du serveur -
Hello World! .
HTTPS et l'environnement de développement local
Avant de passer à la technologie Webhook, nous devons configurer HTTPS pour l'environnement de développement. Le messager n'acceptera pas l'adresse Webhook utilisée pour envoyer des notifications à notre serveur si vous utilisez un certificat SSL auto-signé. Un certificat gratuit est disponible auprès de
Let's Encrypt . Ici, cependant, vous ne pouvez obtenir un certificat que pour un domaine et non pour une adresse IP. Nous utiliserons le service
ngrok , qui vous permettra d'organiser l'accès au serveur local via une URL publique utilisant HTTPS.
Configuration de Ngrok
ngrok simple. Il vous suffit de télécharger l'
archive compressée à partir du site du projet, de la décompresser et d'exécuter la commande suivante:
./ngrok http 80
N'oubliez pas de rediriger le port 80 vers 8989 dans les paramètres WAN de votre routeur. Par conséquent,
ngrok créera des adresses HTTP et HTTPS publiques pour le serveur local.
Utilisation des notifications de Webhook
Le messager utilise la technologie Webhook pour l'authentification et pour envoyer des notifications sur les événements à votre application. Du point de vue de la programmation, tout cela se résume aux fonctions de rappel habituelles pour le traitement des requêtes HTTP qui recevront des données sur les événements, tels que les messages reçus par le chatbot. Pour analyser les requêtes GET et POST, nous utiliserons le module
body-parser .
Ajoutez l'itinéraire suivant à l'application. Il est nécessaire pour le traitement des demandes de vérification de Webhook.
// GET- webhook app.get('/webhook', (req, res) => { // . , let VERIFY_TOKEN = "SOMETHING_RANDOM"; // let mode = req.query['hub.mode']; let token = req.query['hub.verify_token']; let challenge = req.query['hub.challenge']; // , mode token if (mode && token) { // mode token if (mode === 'subscribe' && token === VERIFY_TOKEN) { // challenge console.log('WEBHOOK_VERIFIED'); res.status(200).send(challenge); } else { // '403 Forbidden' res.sendStatus(403); } } });
Vous devez maintenant ouvrir les paramètres de messagerie, y trouver la section Webhooks et configurer l'intégration de l'application avec les notifications Webhook. Sur la page des paramètres, dans le champ URL de rappel, entrez notre URL HTTPS reçue de ngrok. Le jeton de vérification (celui qui est présent dans le code et représente une chaîne aléatoire que nous avons créée) doit être placé dans le champ Verify Token. Après cela, vous devriez pouvoir vérifier et enregistrer les paramètres en cliquant sur le bouton Vérifier et enregistrer si votre URL de traitement des notifications Webhook est disponible et que le jeton de vérification correspond à celui du code.
Configurer le jeton et l'URL pour que l'application reçoive les notifications WebhookAprès l'enregistrement, sélectionnez votre page dans la liste déroulante et abonnez-vous aux événements de page.
Créez maintenant une route POST pour gérer les événements POST à ​​partir du messager. Ajoutez le code suivant à l'application.
// webhook app.post('/webhook', (req, res) => { let body = req.body; if (body.object === 'page') { // , body.entry.forEach(function(entry) { // entry.messaging , // , 0 let webhook_event = entry.messaging[0]; console.log(webhook_event); // PSID let sender_psid = webhook_event.sender.id; console.log('Sender PSID: ' + sender_psid); // , , message postback, // - if (webhook_event.message) { console.log(webhook_event.message) } else if (webhook_event.postback) { console.log(webhook_event.postback) } }); // '200 OK' res.status(200).send('EVENT_RECEIVED'); } else { // '404 Not Found', , res.sendStatus(404); } });
Nous avons configuré l'application pour qu'elle gère deux types d'événements -
message et
postback . Afin de vérifier le fonctionnement du mécanisme de notification Webhook, ouvrez le messager et envoyez un message à la page du bot. Si tout fonctionne comme il se doit, le PSID de l'expéditeur, les informations sur l'événement et le contenu du message seront enregistrés. Nous allons maintenant écrire des fonctions de gestionnaire pour les événements qui nous intéressent.
// message const handleMessage = (sender_psid, received_message) => { let response; if (received_message.text) { } } // postback const handlePostback = (sender_psid, received_postback) => { let response; // postback let payload = received_postback.payload; if(payload === 'GET_STARTED'){ } }
La méthode
handleMessage() est responsable du traitement des messages entrants et la méthode
handlePostback() est
handlePostback() du traitement des événements
postback entrants. Mettez à jour votre code existant en ajoutant des appels à ces méthodes:
// // - if (webhook_event.message) { handleMessage(sender_psid, webhook_event.message); } else if (webhook_event.postback) { handlePostback(sender_psid, webhook_event.postback); }
DĂ©sormais, lorsque nous recevons un
message ou des
postback , les données seront transmises aux gestionnaires correspondants avec le PSID de l'expéditeur.
Configuration de l'écran d'accueil et des événements de publication pour démarrer un dialogue avec le bot
Lorsqu'un nouvel utilisateur démarre une conversation avec le bot, le bouton Commencer s'affiche dans la fenêtre de discussion. Vous pouvez configurer votre propre événement de publication pour cette situation. Par exemple, définissez un message pour un utilisateur qui décrit le bot et comment communiquer avec lui. Pour configurer votre propre message d'accueil, exécutez cette commande
curl dans le terminal:
curl -X POST -H "Content-Type: application/json" -d '{ "greeting": [ { "locale":"default", "text":"Hello {{user_first_name}}! Are you ready to see the cutests cats and dogs" } ] }' "https://graph.facebook.com/v2.6/me/messenger_profile?access_token=YOUR_PAGE_ACCESS_TOKEN"
Nous avons configuré Aww Bot pour qu'il affiche un message demandant à l'utilisateur s'il est prêt à voir les chats et les chiens les plus mignons. Afin de configurer l'événement de publication, exécutez cette commande dans le terminal:
curl -X POST -H "Content-Type: application/json" -d '{ "get_started": {"payload": "GET_STARTED"} }' "https://graph.facebook.com/v2.6/me/messenger_profile?access_token=YOUR_PAGE_ACCESS_TOKEN"
Voici Ă quoi ressemble la session de chat avec le bot.
Écran de démarrageConfiguration de l'application
Nous utiliserons le module de configuration npm pour stocker le jeton d'accès à la page dans un fichier de configuration distinct. Créez le répertoire
config dans notre projet et le fichier
default.json dedans. Dans ce fichier, vous devez ajouter le jeton d'accès à la page et enregistrer ce fichier dans
.gitignore .
{ "facebook": { "page": { "access_token": "PAGE_ACCESS_TOKEN" } } }
Nous obtiendrons le jeton d'accès à la page dans la méthode
callSendAPI() utilisant la commande
config.get('facebook.page.access_token') .
Gérer un événement de démarrage
Voici le code de gestion des événements de démarrage.
const handlePostback = (sender_psid, received_postback) => { let response;
Créons la méthode
askTemplate() , qui retournera un objet de réponse correctement préparé pour l'API messenger. La méthode
callSendAPI() enverra un message à l'utilisateur. Ajoutez les méthodes suivantes à l'application:
const askTemplate = (text) => { return { "attachment":{ "type":"template", "payload":{ "template_type":"button", "text": text, "buttons":[ { "type":"postback", "title":"Cats", "payload":"CAT_PICS" }, { "type":"postback", "title":"Dogs", "payload":"DOG_PICS" } ] } } } } // API Send const callSendAPI = (sender_psid, response, cb = null) => { // let request_body = { "recipient": { "id": sender_psid }, "message": response }; // HTTP- Messenger Platform request({ "uri": "https://graph.facebook.com/v2.6/me/messages", "qs": { "access_token": config.get('facebook.page.access_token') }, "method": "POST", "json": request_body }, (err, res, body) => { if (!err) { if(cb){ cb(); } } else { console.error("Unable to send message:" + err); } }); }
Nous envoyons à l'utilisateur un message contenant deux boutons et du texte. Lorsque l'utilisateur sélectionne ce dont il a besoin en cliquant sur le bouton approprié, une demande sera envoyée à notre adresse Webhook avec les données de l'événement de
postback et nous la traiterons.
L'utilisateur est invité à sélectionner le type d'image qui l'intéresse.Gestion des événements de publication personnalisés
Mettez à jour le code de fonction du gestionnaire d'événements postback:
const handlePostback = (sender_psid, received_postback) => { let response; // postback- let payload = received_postback.payload; // , if (payload === 'CAT_PICS') { response = imageTemplate('cats', sender_psid); callSendAPI(sender_psid, response, function(){ callSendAPI(sender_psid, askTemplate('Show me more')); }); } else if (payload === 'DOG_PICS') { response = imageTemplate('dogs', sender_psid); callSendAPI(sender_psid, response, function(){ callSendAPI(sender_psid, askTemplate('Show me more')); }); } else if(payload === 'GET_STARTED'){ response = askTemplate('Are you a Cat or Dog Person?'); callSendAPI(sender_psid, response); } // }
Lorsque l'utilisateur clique sur le bouton
Cats , une demande avec un événement de
postback contenant des données
CAT_PICS sera
CAT_PICS à notre adresse utilisée pour traiter les notifications Webhook. Le choix de l'option
Dogs enverra un événement de
postback avec des données
DOG_PICS . Nous avons ajouté une autre méthode au système,
imageTemplate() , qui renvoie un message contenant un lien vers une image d'un chat ou d'un chien.
Créer une API simple qui renvoie des liens d'image
Nous allons écrire une API simple pour renvoyer des liens vers des images de chats ou de chiens qui seront utilisés dans les messages envoyés par le bot aux utilisateurs. Créez un fichier
pics.js et ajoutez-y le code suivant:
module.exports = { cats : [ 'https://i.imgur.com/Qbg7CeM.jpg', 'https://i.imgur.com/nUzkpJY.jpg', 'https://i.imgur.com/NpDcKph.jpg', 'https://i.imgur.com/oJtSDaO.jpg', 'https://i.redd.it/82ajpsrd17111.jpg', 'https://i.redd.it/00km1d2rt0111.jpg', 'https://i.redd.it/rdbavhp0y7111.jpg', 'https://i.redd.it/5hn3mg0n98111.jpg', 'https://i.redd.it/d23pb8mta6111.jpg', 'https://i.redd.it/d2gyrwgy7oz01.jpg', 'https://i.redd.it/z4sgl84q72z01.jpg', 'https://i.redd.it/wvykzo8n1cy01.jpg' ], dogs : [ 'https://i.redd.it/6tjihi2qe7111.jpg', 'https://i.imgur.com/etRCs56.jpg', 'https://i.redd.it/nibw50f8y4111.jpg', 'https://i.redd.it/izcvnvj1o7111.jpg', 'https://i.redd.it/eqs1g9dldz011.jpg', 'https://i.redd.it/civ9dnu9u1111.jpg', 'https://i.redd.it/kk03qwclkp011.jpg', 'https://i.redd.it/2694pupjne011.jpg', 'https://i.redd.it/qk49ls5y6oy01.jpg', 'https://i.imgur.com/oM3mKgB.jpg', 'https://i.redd.it/8kx2riaulux01.jpg' ] };
Connectez-le maintenant dans l'application.
images = require('./pics');
Ajoutez la méthode suivante au code utilisé pour composer un message contenant un lien vers l'image.
const = imageTemplate(type, sender_id) => { return { "attachment":{ "type":"image", "payload":{ "url": getImage(type, sender_id), "is_reusable":true } } } }
Dans le processus d'interaction de l'utilisateur avec le bot, les images sont extraites séquentiellement du réseau et envoyées en tant que réponses de bot à l'utilisateur. Après avoir envoyé la dernière image, nous retournons en haut de la liste.
Nous ajoutons le code suivant au projet, conçu pour stocker et traiter les données sur les utilisateurs communiquant avec le bot.
let users = {}; const = getImage(type, sender_id) => { // - if(users[sender_id] === undefined){ users = Object.assign({ [sender_id] : { 'cats_count' : 0, 'dogs_count' : 0 } }, users); } let count = images[type].length, // user = users[sender_id], // , user_type_count = user[type+'_count']; // let updated_user = { [sender_id] : Object.assign(user, { [type+'_count'] : count === user_type_count + 1 ? 0 : user_type_count + 1 }) }; // users = Object.assign(users, updated_user); console.log(users); return images[type][user_type_count]; }
Nous stockons le PSID de chacun des utilisateurs communiquant avec le bot comme clé dans l'objet
users . S'il n'y a pas encore d'enregistrement utilisateur, créez un nouvel enregistrement. Nous mettrons à jour les informations du numéro d'image chaque fois qu'un utilisateur demande une photo d'un chat ou d'un chien. Ensuite, nous renvoyons le chemin absolu vers l'image qui sera utilisée dans le modèle de message. Ensuite, nous envoyons un message avec l'image sous la forme d'une réponse à l'événement de
postback généré lorsque l'utilisateur sélectionne le type d'image qui l'intéresse.
// , postback- if (payload === 'CAT_PICS') { response = imageTemplate('cats', sender_psid); callSendAPI(sender_psid, response, function(){ callSendAPI(sender_psid, askTemplate('Show me more')); }); } else if (payload === 'DOG_PICS') { response = imageTemplate('dogs', sender_psid); callSendAPI(sender_psid, response, function(){ callSendAPI(sender_psid, askTemplate('Show me more')); }); } else if(payload === 'GET_STARTED'){ response = askTemplate('Are you a Cat or Dog Person?'); callSendAPI(sender_psid, response); }
De plus, après l'envoi de l'image, nous passons une fonction de rappel à la méthode
callSendAPI() pour envoyer à l'utilisateur une nouvelle question sur les images qui l'intéressent. En cas de succès, nous appelons cette fonction. Ce schéma de travail, tenant compte de la nature asynchrone des fonctions de rappel, permet à l'utilisateur de recevoir un message avec une question sur l'image suivante après qu'un message lui a été envoyé avec l'image demandée précédemment.
Communication avec le botRésumé
Voici le référentiel de ce projet. Là , dans le fichier
readme.md , vous pouvez trouver des instructions pour installer et configurer le bot. Pour que d'autres personnes puissent discuter avec votre bot, votre application Facebook doit être approuvée. Jusqu'à présent, seuls les administrateurs et testeurs de votre application pourront parler avec le bot.
Voici une vidéo montrant le processus de communication avec le bot.
Chers lecteurs! Envisagez-vous de créer des robots pour Facebook Messenger?
