La fonctionnalité «messenger bots» de Facebook n'est pas nouvelle et de nombreux robots impressionnants existent déjà. Cependant, les ressources concernant la manière de créer votre propre bot sont rares et manquent d'explications pour les personnes novices dans l'API Graph de Facebook. Les robots Messenger exigent également que vous utilisiez une URL de rappel sécurisée Webhook sécurisée par SSL (nous en parlerons plus tard), et la configuration de SSL ne convient pas à tout le monde et coûte également de l'argent.
Dans cet article, je vais vous expliquer le processus complet de création d'un simple bot de messagerie Facebook, car la documentation de Facebook est assez mal expliquée. Nous allons configurer une application cloud qui utilise le protocole https, coder le bot dans Node.js (langage javascript, côté serveur), utiliser git pour envoyer le code dans l'application cloud et le tester sur Facebook Messenger.
Bot d'installation
Vous aurez besoin d'un nœud installé sur votre ordinateur portable. Sinon, rendez-vous sur le site Web du nœud pour le télécharger et l’installer.
Une fois que vous avez terminé, vous pouvez continuer la configuration du bot. Suivez les étapes ci-dessous:
1. Lancez le terminal.
2. Vous avez besoin d'un répertoire séparé pour contenir votre code.
- Faire un nouveau répertoire
mkdir testbot
- Changez votre répertoire de travail dans le répertoire que vous venez de créer
cd testbot
3. Ensuite, initialisez l'application Node. npm init
- Il vous sera demandé de saisir des informations sur votre application. Il vous suffit d'utiliser les valeurs par défaut en appuyant sur Entrée pour tout.
4. Installer les paquets npm install express body-parser request --save
- La commande s'exécutera et donnera des avertissements; ignore les.
5. Dans le Finder, ouvrez le répertoire “ testbot ” que vous avez créé et recherchez le fichier nommé “ package.json “; ouvrez-le dans un éditeur comme Sublime Text.
6. Dans ce fichier, il faut ajouter une ligne "start": "node index.js"
- N'oubliez pas d'ajouter un ", " à la fin de la ligne précédente.
7. Créez ensuite un nouveau fichier dans Sublime Text et insérez-y le code suivant:
[js]
var express = require ('express');
var bodyParser = require ('analyseur de corps');
var request = require ('request');
var app = express ();
app.use (bodyParser.urlencoded ({extended: false}));
app.use (bodyParser.json ());
app.listen ((process.env.PORT || 3000));
app.get ('/', fonction (req, res) {
res.send ('Ceci est le serveur TestBot');
});
app.get ('/ webhook', fonction (req, res) {
if (req.query ['hub.verify_token'] === 'testbot_verify_token') {
res.send (req.query ['hub.challenge']);
} autre {
res.send ('Jeton de vérification invalide');
}
});
[/ js]
Enregistrez ce fichier sous index.js
Remarque: dans la ligne 13, la valeur de 'hub.verify_token' est définie sur ' testbot_verify_token', souvenez-vous de cette valeur car elle sera utilisée lors de la création de la connexion Web dans Facebook.
Créer un référentiel Git
Maintenant que nous avons configuré la gestion des callbacks de notre bot, nous devons transmettre le code à Heroku. Pour cela, nous devons créer un référentiel git dans notre répertoire.
Remarque: «git» est un système de contrôle de version pour les fichiers et le code logiciel. Vous pouvez en savoir plus sur Wikipedia.
La création d'un référentiel git est simple et ne nécessite que quelques commandes Terminal.
Remarque: assurez-vous que vous vous trouvez dans le répertoire « testbot » du terminal. Vous pouvez le faire en tapant la commande pwd dans le terminal.
Suivez ces étapes pour créer un référentiel git:
1. git init
2. git add .
3. git commit -m "Register Facebook Webhook"
Configuration Heroku
Avant même d’aller dans les pages de développement de Facebook, nous avons besoin d’une URL de rappel avec laquelle Facebook peut parler. Cette URL doit utiliser le protocole https, ce qui signifie que nous devons installer un certificat SSL sur notre site Web. mais, ceci est un guide du débutant sur les robots de messagerie Facebook, ne compliquons donc pas les choses. Nous utiliserons Heroku pour déployer notre code. Heroku vous fournit des URL https pour vos applications et propose un plan gratuit qui répond à nos demandes (très élémentaires).
Allez sur le site Heroku et enregistrez-vous.
Remarque: dans le champ «Choisissez votre langue de développement principale», utilisez «J'utilise une autre langue».
Une fois que vous avez terminé, installez la ceinture d'outils Heroku pour votre système d'exploitation (Mac, pour moi), puis installez-la. Cela vous donnera accès à Heroku sur votre terminal (ou une invite de commande, sous Windows).
Ensuite, nous allons créer une application sur Heroku, qui contiendra le code complet de notre bot. Suivez les étapes ci-dessous:
1. Terminal de lancement
2. Tapez heroku login
- Vous serez invité à entrer votre email et votre mot de passe.
- Tapez votre email, appuyez sur Entrée; puis, tapez votre mot de passe, appuyez sur Entrée.
- Vous serez connecté à heroku
3. Tapez heroku create
- Cela créera une application sur Heroku et vous fournira un lien hypertexte. Notez que le lien utilise le protocole https. Facile, non?
4. Vous pouvez maintenant transmettre votre code d'application à Heroku git push heroku master
5. Une fois que cela est fait, votre application est en direct, et vous pouvez visiter le lien dans votre navigateur pour vérifier que tout fonctionne correctement. Il devrait ouvrir une page Web disant " This is TestBot Server ".
Configuration de Facebook
Il est temps de connecter notre bot à Facebook! Vous devrez créer une nouvelle page Facebook ou utiliser une page existante que vous possédez. Je vais vous montrer comment procéder en créant une nouvelle page Facebook.
1. Allez sur Facebook et créez une nouvelle page.
- Vous pouvez créer une page dans la catégorie de votre choix. J'opte pour la société / organisation, sans raison particulière.
2. Les prochaines étapes que Facebook montre sont facultatives et peuvent être ignorées.
3. Ensuite, rendez-vous sur le site Web des développeurs Facebook.
- En haut à droite, passez votre souris sur “ Mes applications ” puis cliquez sur “ Ajouter une nouvelle application ” dans le menu déroulant.
- Cliquez sur « Configuration de base » lorsque Facebook vous invite à choisir une plate-forme.
4. Renseignez les détails de votre nom d'application et de votre adresse électronique de contact.
- Sélectionnez « Applications pour les pages » dans la catégorie.
- Cliquez sur « Créer un identifiant d'application ».
5. Vous serez dirigé vers le tableau de bord pour votre application. Dans la barre latérale, accédez à « + Ajouter des produits » et sélectionnez « Messenger » en cliquant sur le bouton « Commencer ».
6. Sélectionnez « Configurer les Webhooks ».
7. Remplissez les champs obligatoires, en remplaçant l'URL de rappel par l'URL de l'application Heroku, vérifiez le jeton par le jeton utilisé dans le fichier index.js et sélectionnez les champs d'abonnement suivants:
- message_deliveries
- messages
- message_optins
- messaging_postbacks
Remarque: veillez à bien ajouter « / webhook » à l'URL de rappel afin qu'index.js exécute la fonction requise lorsque Facebook essaie d'envoyer une requête ping à l'URL. Il est alors en mesure de vérifier le «jeton de vérification».
8. Cliquez sur « Verify and Save ».
9. Dans la section « Génération de jetons », cliquez sur « Sélectionner une page » et sélectionnez la page que vous avez créée précédemment.
Cela générera un « jeton d'accès à la page », sauvegardez-le quelque part. Vous en aurez besoin plus tard.
10. Ensuite, vous devrez adresser une requête POST à votre application à l'aide du jeton d'accès à la page généré à la dernière étape. Cela peut être facilement fait dans le terminal. Il suffit d'exécuter la commande suivante, en remplaçant PAGE_ACCESS_TOKEN par le jeton d'accès à la page que vous avez généré .
curl -X POST «//graph.facebook.com/v2.6/me/subscrib_apps?access_token=PAGE_ACCESS_TOKEN»
Vous devriez recevoir une réponse « succès » dans le terminal.
Plus de configuration Heroku
Oui, nous n'avons pas encore fini. Pas presque.
1. Rendez-vous sur le site Web Heroku et connectez-vous avec votre identifiant de messagerie.
2. Localisez votre application dans le «tableau de bord» et cliquez dessus.
3. Accédez à l'onglet Paramètres.
4. Cliquez sur “ Reveal Config Vars ”
5. Ajoutez le PAGE_ACCESS_TOKEN en tant que «variable de configuration », puis cliquez sur « Ajouter ».
Coder le bot réel
Maintenant que nous en avons terminé avec le travail fastidieux, nous pouvons nous concentrer sur ce qui compte vraiment: faire en sorte que le bot réponde aux messages. Pour commencer, nous allons simplement concevoir un bot qui répercute simplement les messages qu'il reçoit. En fin de compte, cette tâche simple nécessite un peu de code pour fonctionner.
1. Codage de l'écouteur de message
Avant que le bot puisse renvoyer le message, il doit pouvoir écouter les messages. Faisons cela en premier.
Dans le fichier index.js, ajoutez le code suivant:
[js]
app.post ('/ webhook', fonction (req, res) {
var events = req.body.entry [0] .messaging;
pour (i = 0; i <events.length; i ++) {
var événement = événements [i];
if (event.message && event.message.text) {
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
res.sendStatus (200);
});
[/ js]
Cette fonction vérifie les messages reçus, puis vérifie si le message contient du texte. S'il trouve du texte dans le message reçu, il appelle la fonction sendMessage (illustrée plus tard) en transmettant l'ID de l'expéditeur et le texte à renvoyer. Il est important de comprendre les valeurs suivantes et leur signification:
- event.message.text est le texte reçu dans le message. Par exemple, si quelqu'un envoie le message "Hello" à notre bot, la valeur de event.message.text sera "Hello".
- event.sender.id est l'id de la personne qui a envoyé le message au bot. Cela est nécessaire pour que le bot sache à qui adresser la réponse.
2. Codage de la fonction sendMessage
Permet de coder la fonction "sendMessage", maintenant.
[js]
function sendMessage (recipientId, message) {
demande({
url: '//graph.facebook.com/v2.6/me/messages',
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
méthode: 'POST',
json: {
destinataire: {id: recipientId},
message: message,
}
}, fonction (erreur, réponse, corps) {
si (erreur) {
console.log ('Erreur lors de l'envoi du message:', erreur);
} else if (response.body.error) {
console.log ('Erreur:', response.body.error);
}
});
};
[/ js]
La fonction «sendMessage» prend deux paramètres:
- destinataire
- message
RecipientId est requis pour que le message puisse être adressé à l'utilisateur approprié.
Le message est le texte à envoyer dans la réponse.
3. Pousser les changements à Heroku
Si vous avez terminé les étapes ci-dessus, votre bot devrait pouvoir rappeler le texte reçu. Mais d’abord, vous devez appliquer les modifications à l’application hébergée sur Heroku. Pour ce faire, suivez les étapes ci-dessous:
1. Lancez le terminal.
2. Changer le répertoire dans votre répertoire testbot
cd testbot
3. Suivez les étapes suivantes:
- git add.
- Note: Il y a un "." À la fin de "git add"
- git commit -m “Premier commit”
- git push maître heroku
4. Envoyez maintenant un message sur votre page et le bot vous le renverra en écho.
Réponses conditionnelles aka Rendre le bot plus intelligent
Nous pouvons utiliser la correspondance de texte pour permettre à notre bot de messagerie Facebook de répondre en fonction de certains mots clés spécifiques.
Pour y parvenir, nous devons ajouter une autre fonction. Je l’appelle «conditionalResponses», mais vous pouvez choisir le nom de votre choix.
1. Codage de la fonction conditionalResponses
[js]
fonction conditionnelleResponses (recipientId, text) {
text = text || "";
var quoi = text.match (/ what / gi); // vérifie si la chaîne de texte contient le mot "quoi"; ignorer le cas
varGadget-Info.com = text.match (/ beebom / gi); // vérifie si la chaîne de texte contient le mot "beebom"; ignorer le cas
var qui = text.match (/ who / gi); // vérifie si la chaîne de texte contient le mot "who"; ignorer le cas
var vous = text.match (/ you / gi); // vérifie si la chaîne de texte contient le mot "you"; ignorer le cas
// si le texte contient "quoi" et "beebom", faites ceci:
if (what! = null &&; Gadget-Info.com! = null) {
message = {
text: "Beebom est un site web offrant des ressources technologiques. Bienvenue."
}
sendMessage (recipientId, message);
retourne vrai;
}
// si le texte contient à la fois "qui" et "vous", procédez comme suit:
si (qui! = null && you! = null) {
message = {
texte: "On m'a demandé de ne pas discuter de mon identité en ligne."
}
sendMessage (recipientId, message);
retourne vrai;
}
// si rien ne correspond, retourne false pour continuer l'exécution de la fonction interne.
retourne faux;
};
[/ js]
Aux lignes 4 à 7, nous avons défini des variables en fonction de la correspondance de la chaîne reçue avec des mots particuliers. La meilleure partie de l'utilisation de “text.match ()” est qu'il utilise des expressions régulières (généralement appelées regex, pour en savoir plus, cliquez ici.). C'est bon pour nous, car cela signifie que tant que même une partie d'un mot du texte reçu correspond à l'un des mots mentionnés dans text.match (), la variable ne sera pas nulle. Cela signifie que, si le message reçu était "Qu'est-ce que Beebom?", "Var quoi" et "var beebom" ne seront pas nuls, car le mot "Quoi" contient le mot "quoi". Nous sommes donc épargnés de créer des instructions supplémentaires pour chaque variante dans laquelle une personne pourrait dire «quoi».
2. Modification de l'écouteur de message
Nous devons également modifier le programme d'écoute des messages que nous avons codé, afin de nous assurer qu'il tente également de faire correspondre le texte reçu à la fonction «conditionalResponses».
[js]
app.post ('/ webhook', fonction (req, res) {
var events = req.body.entry [0] .messaging;
pour (i = 0; i <events.length; i ++) {
var événement = événements [i];
if (event.message && event.message.text) {
// essaye d'abord de vérifier si le message reçu est qualifié pour une réponse conditionnelle.
if (! conditionalResponses (event.sender.id, event.message.text)) {
// si ce n'est pas le cas, renvoie simplement le message reçu à l'expéditeur.
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});
[/ js]
Les changements dans l'auditeur peuvent ne pas sembler très drastiques, mais leurs effets sont certains. Désormais, l’auditeur essaie d’abord de répondre avec des réponses conditionnelles et, s’il n’existe aucune condition valide pour le message reçu, il renvoie simplement le message à l’utilisateur.
3. Pousser les changements à Heroku
Avant de pouvoir essayer les nouvelles fonctionnalités, vous devez envoyer le code mis à jour à l'application hébergée sur Heroku. Suivez les étapes ci-dessous pour cela:
1. Lancez le terminal.
2. Changer le répertoire dans votre répertoire testbot
cd testbot
3. Suivez les étapes suivantes:
- git add.
- Note: Il y a un "." À la fin de "git add"
- git commit -m “Ajout de capacités conditionnelles”
- git push maître heroku
4. Envoyez maintenant un message sur votre page et le bot vous le renverra en écho.
Encore plus de fonctionnalité
Notre bot répond maintenant à un petit ensemble de commandes dans des réponses agréables et bien structurées. Mais ce n'est toujours pas très utile. Faisons quelques modifications supplémentaires dans le code pour faire de notre bot un logiciel plus « fonctionnel ». Nous allons réorganiser de nombreuses fonctions et en ajouter quelques autres, alors soyez excités.
1. Modification de l'écouteur de message
Notre auditeur de messages, à ce stade, fonctionne parfaitement. Cependant, sa mise en forme n'est pas très agréable et si nous devions augmenter continuellement les instructions imbriquées si pour ajouter des « vérifications de conditions » supplémentaires, cela deviendrait vite horrible à regarder, difficile à comprendre et plus lent à l'exécution. Nous ne voulons pas cela, maintenant, n'est-ce pas? Faisons quelques changements.
Remarque: il existe une ligne de code dans le programme d'écoute de message indiquant «res.sendStatus (200)» . Cette ligne envoie un code d'état 200 à Facebook, lui indiquant que la fonction a été exécutée avec succès. Selon la documentation de Facebook, Facebook attend 20 secondes au maximum pour recevoir le statut 200 avant de décider que le message n'a pas été transmis et d'arrêter l'exécution du code.
Notre nouvel écouteur de message ressemble à ceci. Nous utilisons la commande « res.sendStatus (200) » pour arrêter l'exécution de la fonction dès qu'une condition est vérifiée et exécutée.
[js]
app.post ('/ webhook', fonction (req, res) {
var events = req.body.entry [0] .messaging;
pour (i = 0; i <events.length; i ++) {
var événement = événements [i];
if (event.message && event.message.text) {
// première vérification du texte du message par rapport aux conditions d'intro réponse
if (introResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}
// faute de meilleur nom, j'ai appelé cette nouvelle réponse: p; vérifier cette prochaine
else if (newResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}
// sinon, je répète le message d'origine
autre {
// remplace echo par une liste de commandes valide
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});
[/ js]
2. Codage de la fonction newResponse
Notre écouteur de messages vérifie maintenant le texte du message par rapport à un ensemble de conditions dans «newResponse», mais nous devons d’abord coder la fonction newResponse. Nous utiliserons cette fonction pour vérifier si l'utilisateur a demandé des suggestions d'article sur le site Web Gadget-Info.com, effectuer une recherche sur le terme de la requête sur le site Web et présenter le lien à l'utilisateur. Une fois encore, nous allons utiliser des expressions régulières pour faire correspondre le texte à des mots clés spécifiques.
[js]
fonction newResponse (recipientId, text) {
text = text || "";
var suggest = text.match (/ suggest / gi);
var random = text.match (/ random / gi);
var article = text.match (/ article / gi);
var iphone = text.match (/ iphone / gi);
var android = text.match (/ android / gi);
var mac = text.match (/ mac / gi);
var browser = text.match (/ browser / gi);
var vpn = text.match (/ vpn / gi);
// vérifie si l'utilisateur demande des suggestions d'articles
if (suggérez! = null && article! = null) {
var requête = "";
// si des suggestions d'articles sont demandées, cochez le sujet recherché par l'utilisateur
if (android! = null) {
query = "Android";
} sinon si (mac! = null) {
query = "Mac";
} sinon si (iphone! = null) {
query = "iPhone";
} sinon si (navigateur! = null) {
query = "Navigateur";
} sinon si (vpn! = null) {
query = "VPN";
}
sendButtonMessage (recipientId, query);
retourne vrai
}
retourne faux;
};
[/ js]
Nous utilisons une autre fonction personnalisée appelée «sendButtonMessage» pour envoyer le message au cas où l'utilisateur demanderait des suggestions d'article. Nous allons créer ce prochain.
3. Codage de la fonction sendButtonMessage
La fonction sendButtonMessage prend deux paramètres, un ID de destinataire et une requête. L'ID de destinataire est utilisé pour identifier l'utilisateur auquel le message doit être envoyé, et la requête est utilisée pour identifier le sujet sur lequel l'utilisateur souhaite des suggestions d'article.
[js]
function sendButtonMessage (recipientId, query) {
var messageData = {
destinataire: {
id: recipientId
},
message: {
attachement: {
type: "template",
charge utile: {
template_type: "bouton",
text: "c'est ce que j'ai trouvé pour" + requête,
boutons:[{
type: "web_url",
url: "//www.beebom.com/?s="+query,
titre: "Beebom:" + requête
}]
}
}
}
};
callSendAPI (messageData);
}
[/ js]
Encore une fois, nous utilisons une fonction personnalisée; cette fois pour envoyer le message final, avec les liens de l'article, à l'utilisateur. La fonction est, à bien des égards, similaire à la fonction «sendMessage» que nous avons codée précédemment, mais elle est plus générique dans la façon dont elle prend les données du message, ce qui nous convient, car nos données de message changent avec la requête de l'utilisateur.
4. Codage de la fonction callSendAPI
La fonction “callSendAPI” accepte un seul paramètre, le “messageData” . Ce paramètre contient l'intégralité des données du message, formatées correctement conformément aux règles de Facebook, afin que le messager puisse les afficher correctement à l'utilisateur.
[js]
fonction callSendAPI (messageData) {
demande({
uri: '//graph.facebook.com/v2.6/me/messages',
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
méthode: 'POST',
json: messageData
}, fonction (erreur, réponse, corps) {
if (! error && response.statusCode == 200) {
var recipientId = body.recipient_id;
var messageId = body.message_id;
console.log ("Message générique envoyé avec l'identifiant% s au destinataire% s",
messageId, recipientId);
} autre {
console.error ("Impossible d'envoyer un message.");
console.error (réponse);
console.error (erreur);
}
});
}
[/ js]
5. Pousser les changements à Heroku
Nous sommes à la dernière étape pour rendre notre bot amélioré mis à jour. Nous devons juste appliquer tous les changements de code à Heroku. Le processus est le même que précédemment et est décrit ci-dessous:
1. Lancez le terminal.
2. Remplacez le répertoire par le répertoire testbot .
cd testbot
3. Procédez comme suit:
- git add.
- Remarque: Il y a un «.» À la fin de cette commande.
- git commit -m “amélioration des contrôles de condition et du formatage”
- git push maître heroku
4. Envoyez maintenant un message du type "Proposer un article sur Android" ou "Beebom, suggère-moi n'importe quel article sur le thème Android"; et le bot enverra un message bien formaté avec un lien sur lequel vous pourrez appuyer pour ouvrir les articles liés à votre requête.
Creuser plus profondément
Maintenant que vous savez comment commencer à développer des robots de messagerie Facebook, consultez la documentation de Facebook expliquant comment développer des robots de messagerie Facebook. Bien que la documentation ne soit pas bonne pour les débutants, vous n'êtes plus un débutant. Vous devriez consulter la documentation officielle et essayer de comprendre comment rendre votre bot encore plus intelligent. Introduction: Vous pouvez également envoyer des messages avec des images et des boutons! Il est également possible d'utiliser des services tels que Wit.ai et Api.ai pour coder votre bot, puis l'intégrer à Facebook, mais dans mes faibles tentatives d'utilisation de ces services, Wit.ai ne fonctionne pas très bien et Api.ai a une courbe d'apprentissage pointue pour les débutants.
Avez-vous déjà développé un bot de messagerie Facebook? Si vous l’avez fait, comment l’avez-vous fait et que peut-il faire? Avez-vous utilisé des services tels que Wit.ai et Api.ai pour créer votre bot? Si vous n'avez jamais essayé de coder un bot, développez votre propre bot de messagerie Facebook, rendez-le plus intelligent et plus performant et faites-nous part de votre expérience dans les commentaires ci-dessous.
