Comment créer un bot Facebook Messenger (Guide)

La fonctionnalité «bots de messagerie» de Facebook n'est pas nouvelle, et il existe déjà de nombreux robots géniaux. Cependant, les ressources concernant exactement comment créer votre propre bot sont rares et manquent d'explications pour les personnes qui ne connaissent pas l'API Facebook Graph. Les bots Messenger nécessitent désormais également que vous utilisiez une URL de rappel de webhook sécurisée SSL (plus à ce sujet plus tard), et la configuration de SSL n'est pas pour tout le monde, et coûte également de l'argent.

Dans cet article, je vais vous guider tout au long du processus de création d'un simple bot de messagerie Facebook, car la propre documentation de Facebook est plutôt mal expliquée. Nous allons configurer une application cloud qui utilise le protocole https, coder le bot en Node.js (qui est un langage javascript côté serveur), utiliser git pour pousser le code vers l'application cloud et le tester sur Facebook Messenger.

Bot de configuration

Vous aurez besoin de Node installé sur votre ordinateur portable. Si vous ne le faites pas, accédez au site Web de Node 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.

Créer un nouveau répertoire
mkdir testbot

Remplacez votre répertoire de travail par 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, utilisez simplement les valeurs par défaut en appuyant sur Entrée pour tout.

4. Installez les packages
demande npm install express body-parser --save

La commande s'exécutera et donnera quelques avertissements; ignore les.

5. Dans le Finder, ouvrez le répertoire "testbot"Que vous avez créé et recherchez le fichier nommé"package.json«; ouvrez ceci dans un éditeur comme Sublime Text.

6. Dans ce fichier, nous devons ajouter une ligne
"start": "node index.js"

N'oubliez pas d'ajouter un "," à la fin de la ligne précédente.

7. Ensuite, créez un nouveau fichier dans Sublime Text et insérez le code suivant à l'intérieur:

[js]

var express = require ('express');
var bodyParser = require ('body-parser');
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 TestBot Server');
);
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 non valide');

);

[/ js]

Enregistrez ce fichier sous index.js

Noter: À 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 du webhook dans Facebook.

Créer un référentiel Git

Maintenant que nous avons configuré la gestion des rappels de notre bot, nous devons pousser le code vers Heroku. Pour cela, nous devons créer un référentiel git dans notre répertoire.

Noter: «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 facile et ne prend que quelques commandes Terminal.

Noter: Assurez-vous que vous êtes à l'intérieur du "testbot»Dans le 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 ajouter .

3. git commit -m "Enregistrer le Webhook Facebook"

Configurer Heroku

Avant même d'entrer dans les pages de développement de Facebook, nous avons besoin d'une URL de rappel à 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, alors ne compliquons pas les choses. Nous utiliserons Heroku pour déployer notre code. Heroku vous donne des URL https pour vos applications et dispose d'un plan gratuit qui répond à nos demandes (très basiques).

Allez sur le site Heroku et inscrivez-vous.

Noter: 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 à outils Heroku pour votre système d'exploitation (Mac, pour moi) et installez-la. Cela vous donnera accès à Heroku sur votre terminal (ou invite de commande, sous Windows).

Ensuite, nous allons créer une application sur Heroku, qui contiendra l'intégralité du code de notre bot. Suivez les étapes ci-dessous:

1. Lancez le terminal

2. Tapez connexion heroku

Il vous sera demandé de saisir votre email et votre mot de passe.

Tapez votre e-mail, appuyez sur Entrée; puis, tapez votre mot de passe, appuyez sur Entrée.

Vous serez connecté à heroku

3. Tapez heroku créer

Cela créera une application sur Heroku et vous fournira un lien hypertexte. Notez que le lien utilise le protocole https. Facile, juste?

4. Vous pouvez maintenant transmettre le code de votre application à Heroku
git push heroku master

5. Une fois que cela est fait, votre application est essentiellement en ligne et vous pouvez visiter le lien dans votre navigateur pour vérifier que tout fonctionne correctement. Il devrait ouvrir une page Web indiquant "C'est TestBot Server".

Configuration 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 Entreprise / Organisation, sans raison particulière.

2. Les prochaines étapes affichées par Facebook sont facultatives et peuvent être ignorées.

3. Ensuite, rendez-vous sur le site Web des développeurs Facebook..

En haut à droite, passez la souris sur "Mes applications»Puis cliquez sur«Ajouter une nouvelle application"Dans le menu déroulant.

Cliquer sur "configuration de base"Lorsque Facebook vous invite à choisir une plateforme.

4. Remplissez les détails du nom de votre application et de votre adresse e-mail de contact..

Sélectionnez "Applications pour pages"Dans la catégorie.

Cliquer sur "Créer un identifiant d'application".

5. Vous serez redirigé vers le tableau de bord de votre application. Dans la barre latérale, accédez à "+Ajouter des produits"Et sélectionnez"Messager»En cliquant sur le bouton«Commencer" bouton.

6. Sélectionnez "Configurer les Webhooks".

7. Remplissez les champs obligatoires, en remplaçant «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

Noter: Assurez-vous d'ajouter "/ webhook»À l'URL de rappel afin que index.js exécute la fonction requise lorsque Facebook essaie d'envoyer un ping à l'URL, il peut vérifier le« jeton de vérification ».

8. Cliquez sur «Vérifier et enregistrer".

9. Dans le "Génération de jetons", Cliquez sur"Sélectionnez 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«, Enregistrez-le quelque part; Vous en aurez besoin plus tard.

10. Ensuite, vous devrez effectuer une requête POST sur votre application, en utilisant le jeton d'accès à la page généré à la dernière étape. Cela peut être facilement fait dans le terminal. Exécutez simplement la commande suivante, remplacement de PAGE_ACCESS_TOKEN par le jeton d'accès à la page que vous avez généré.

curl -X POST "https://graph.facebook.com/v2.6/me/subscribed_apps?access_token=PAGE_ACCESS_TOKEN"

Vous devriez recevoir un "Succès»Réponse dans le terminal.

Plus de configuration Heroku

Ouais, nous n'avons pas encore fini. Pas presque.

1. Accédez au 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 «Révéler Config Vars"

5. Ajoutez le PAGE_ACCESS_TOKEN en tant que "config var", Et cliquez sur"Ajouter".

Codage du bot réel

Maintenant que nous avons terminé notre travail, nous pouvons nous concentrer sur ce qui compte vraiment: faire en sorte que le robot réponde aux messages. Pour commencer, nous allons simplement concevoir un robot qui fait simplement écho aux messages qu'il reçoit. En fin de compte, cette tâche simple nécessite un peu de code considérable pour fonctionner.

1. Codage de l'écouteur de messages

Avant que le bot ne 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 s'il y a du texte dans le message. S'il trouve du texte dans le message reçu, il appelle la fonction sendMessage (illustrée plus loin), 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'identifiant de la personne qui a envoyé le message au bot. Ceci 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 (destinataireId, message)
demander(
url: 'https://graph.facebook.com/v2.6/me/messages',
qs: access_token: process.env.PAGE_ACCESS_TOKEN,
méthode: 'POST',
json:
destinataire: id: destinataireId,
message: message,

, fonction (erreur, réponse, corps)
if (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:

destinataireId

un message

Le destinataireId est requis pour que le message puisse être adressé au bon utilisateur.

Le message est le texte réel qui doit être envoyé dans la réponse.

3. Pousser les changements vers Heroku

Si vous avez terminé les étapes ci-dessus, votre bot devrait être en mesure de renvoyer le texte reçu. Mais d'abord, vous devez pousser les modifications vers l'application hébergée sur Heroku. Pour ce faire, suivez les étapes ci-dessous:

1. Lancez le terminal.

2. Remplacez le répertoire par votre répertoire testbot
cd testbot

3. Suivez les étapes suivantes:

git ajouter .

Noter: Il y a un "." à la fin de "git add"

git commit -m "Premier commit"

git push heroku master

4. Envoyez maintenant un message à votre page et le bot vous renvoie le message.

Réponses conditionnelles, c'est-à-dire 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éciaux.

Pour y parvenir, nous devons ajouter une autre fonction. Je le nomme "réponses conditionnelles", mais vous pouvez choisir le nom que vous préférez.

1. Codage de la fonction de réponses conditionnelles

[js]

function conditionalResponses (ID de destinataire, texte)
texte = texte || "";

var quoi = texte.match (/ quoi / gi); // vérifie si la chaîne de texte contient le mot "quoi"; ignorer la casse
var beebom = text.match (/ beebom / gi); // vérifie si la chaîne de texte contient le mot "beebom"; ignorer la casse
var who = text.match (/ who / gi); // vérifie si la chaîne de texte contient le mot "who"; ignorer la casse
var vous = text.match (/ vous / gi); // vérifie si la chaîne de texte contient le mot "vous"; ignorer la casse

// si le texte contient à la fois "what" et "beebom", procédez comme suit:

if (quoi! = null &&; beebom! = null)
message =
text: "Beebom est un site Web proposant des ressources techniques. Bienvenue."

sendMessage (ID de destinataire, message);
retourne vrai;

// si le texte contient à la fois "qui" et "vous", procédez comme suit:
if (who! = null && vous! = null)
message =
texte: "On m'a demandé de ne pas discuter de mon identité en ligne."

sendMessage (ID de destinataire, message);
retourne vrai;

// si rien ne correspond, retourne false pour continuer l'exécution de la fonction interne.
retourne faux;
;

[/ js]

Dans les 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, lisez plus ici.). C'est bon pour nous, car cela signifie que tant qu'une partie d'un mot dans le texte reçu correspond à l'un ou l'autre des mots que nous avons mentionnés dans text.match (), la variable ne sera pas nulle. Cela signifie que si le message reçu était «What's Beebom?», «Var what» et «var beebom» ne seront pas nuls, car le mot «What's» contient le mot «what». Nous sommes donc évités de créer des déclarations supplémentaires pour chaque variante dans laquelle quelqu'un pourrait dire «Quoi».

2. Modification de l'écouteur de messages

Nous devons également modifier l'écouteur de message que nous avons codé, pour nous assurer qu'il essaie également de faire correspondre le texte reçu avec la fonction «réponses conditionnelles»..

[js]

// essayez d'abord de vérifier si le message reçu se qualifie 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 le sont certainement. Maintenant, l'auditeur essaie d'abord de répondre avec des réponses conditionnelles, et s'il n'y a pas de condition valide pour le message reçu, il renvoie simplement le message à l'utilisateur..

3. Pousser les changements vers Heroku

Avant de pouvoir essayer les nouvelles fonctionnalités, vous devrez pousser le code mis à jour vers l'application hébergée sur Heroku. Suivez les étapes ci-dessous pour ce faire:

1. Lancez le terminal.

2. Remplacez le répertoire par votre répertoire testbot
cd testbot

3. Suivez les étapes suivantes:

git ajouter .

Noter: Il y a un "." à la fin de "git add"

git commit -m «Ajout de capacités conditionnelles»

git push heroku master

4. Envoyez maintenant un message à votre page et le bot vous renvoie le message.

Encore plus de fonctionnalités

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. Apportons quelques modifications supplémentaires au code pour rendre notre bot plus "fonctionnel”Morceau de logiciel. Bien être réorganiser de nombreuses fonctions, et en ajoutant quelques autres, alors soyez excité.

1. Modification de l'écouteur de messages

Notre écouteur de message, à ce stade, fonctionne très bien. Cependant, ce n'est pas très bien formaté et si nous devions continuer à augmenter les instructions if imbriquées pour ajouter des informations supplémentaires "vérifications de l'état«, Il deviendra vite moche à regarder, difficile à comprendre et plus lent à l'exécution. Nous ne voulons pas de ça, maintenant, n'est-ce pas? Faisons quelques changements.

Noter: Il y a une ligne de code dans l'écouteur de message qui lit "Res.sendStatus (200)", cette ligne envoie un code de statut 200 à Facebook, lui indiquant que la fonction s'est exécutée avec succès. Selon la documentation de Facebook, Facebook attend un maximum de 20 secondes pour recevoir un 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 le "res.sendStatus (200)»Commande pour arrêter l'exécution de la fonction dès qu'une condition est mise en correspondance et exécutée.

[js]

// Vérifiez d'abord le texte du message par rapport aux conditions d'introResponse
if (introResponse (event.sender.id, event.message.text))
res.sendStatus (200);

// faute d'un meilleur nom, j'ai appelé cette newResponse: p; vérifier ceci ensuite
else if (newResponse (event.sender.id, event.message.text))
res.sendStatus (200);

// sinon, renvoie simplement le message d'origine
autre
// remplace l'écho 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 message vérifie maintenant le texte du message par rapport à un ensemble de conditions dans "NewResponse" aussi, mais d'abord, nous devons coder la fonction newResponse. Nous utiliserons cette fonction pour vérifier si l'utilisateur a demandé suggestions d'articles depuis le site Web de Beebom, rechercher la requête terme sur le site Web, et présenter le lien à l'utilisateur. Encore une fois, nous utiliserons des expressions régulières pour faire correspondre le texte avec des mots-clés spécifiques.

[js]

function newResponse (destinataireId, texte)
texte = texte || "";
var suggest = text.match (/ suggest / gi);
var random = text.match (/ random / gi);
var article = text.match (/ article / gi);
var iphone = texte.match (/ iphone / gi);
var android = text.match (/ android / gi);
var mac = texte.match (/ mac / gi);
var browser = text.match (/ browser / gi);
var vpn = texte.match (/ vpn / gi);

// vérifier si l'utilisateur demande des suggestions d'articles
if (suggest! = null && article! = null)
var query = "";
// si des suggestions d'articles sont demandées, vérifiez le sujet recherché par l'utilisateur
if (android! = null)
query = "Android";
else if (mac! = null)
query = "Mac";
else if (iphone! = null)
query = "iPhone";
else if (navigateur! = null)
query = "Navigateur";
else if (vpn! = null)
query = "VPN";

sendButtonMessage (ID de destinataire, requête);
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'articles. Nous allons créer ce prochain.

3. Codage de la fonction sendButtonMessage

La fonction sendButtonMessage prend deux paramètres, un identifiant du destinataire et un mettre en doute. L'ID du destinataire est utilisé pour identifier l'utilisateur à qui le message doit être envoyé et la requête est utilisée pour identifier le sujet sur lequel l'utilisateur souhaite des suggestions d'articles.

[js]

function sendButtonMessage (ID de destinataire, requête)
var messageData =
destinataire:
id: destinataireId
,
un message:
attachement:
type: "modèle",
charge utile:
template_type: "bouton",
text: "Voici ce que j'ai trouvé pour" + requête,
boutons:[
type: "web_url",
url: "http://www.beebom.com/?s="+query,
title: "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 "envoyer le message" fonction que nous avons codée plus tôt, mais 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 que l'utilisateur fait.

4. Codage de la fonction callSendAPI

le "CallSendAPI" fonction prend un seul paramètre, la "MessageData". Ce paramètre contient l'intégralité des données du message, correctement formatées selon les règles de Facebook, afin que le messager puisse les afficher correctement à l'utilisateur..

[js]

function callSendAPI (messageData)
demander(
uri: 'https://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 (! erreur && response.statusCode == 200)
var destinataireId = body.recipient_id;
var messageId = body.message_id;

console.log ("Message générique envoyé avec succès avec l'ID% s au destinataire% s",
messageId, destinataireId);
autre
console.error ("Impossible d'envoyer le message.");
console.error (réponse);
console.error (erreur);

);

[/ js]

5. Pousser les changements vers Heroku

Nous sommes à la dernière étape de la mise en ligne de notre bot amélioré. Nous avons juste besoin de pousser toutes les modifications de code vers Heroku. Le processus est le même que précédemment et est décrit ci-dessous:

1. Lancez le terminal.

2. Changez de répertoire en testbot annuaire.
cd testbot

3. Procédez comme suit:

git ajouter .

Noter: Il y a un "." à la fin de cette commande.

git commit -m "amélioration de la vérification des conditions et du formatage"

git push heroku master

4. Envoyez maintenant un message tel que «Suggérer un article sur Android», ou «Beebom, suggère-moi un article sur le sujet Android»; et le bot enverra un message joliment formaté avec un lien sur lequel vous pouvez appuyer pour ouvrir les articles liés à votre requête.

VOIR AUSSI: 16 trucs et astuces Facebook Messenger à connaître

Creuser plus profondément

Maintenant que vous savez comment commencer à développer des bots de messagerie Facebook, parcourez la documentation Facebook sur la façon de développer des bots 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 trouver comment rendre votre bot encore plus intelligent. Teaser: 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 précise pour les débutants.

Avez-vous déjà développé un bot de messagerie Facebook? Si c'est le cas, comment avez-vous procédé pour le développer et que peut-il faire? Avez-vous utilisé des services comme 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 meilleur, et faites-nous part de votre expérience dans les commentaires ci-dessous.