Quickstart #01 – ChatBot pour Facebook Messenger

Partager surShare on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Email this to someonePrint this page

Vous pensez que développer un Bot conversationnel (couramment appelé ChatBot) peut s’avérer compliqué, long et fastidieux ?

Pour ce premier Quickstart #01, nous allons développer ensemble, pas à pas, un Bot conversationnel pour Facebook Messenger.

On va même utiliser notre localhost en guise de serveur SSL webhook grâce à petit utilitaire qui automatise la choseSimplement, sans devoir investir dans un serveur Heroku et le tout en moins d’une heure. 😉

chatbot facebook messenger

Exemple de ChatBot

1. Récupérer le sample « Facebook Messenger Platform Bot »

Avant tout, il va falloir récupérer le « Facebook Messenger Platform sample« .

C’est un véritable « Starter Kit » composé d’un simple serveur NodeJS pré-configuré qui embarque tout ce dont vous avez besoin pour bien commencer. Ce sample est proposé par l’équipe de Facebook sur leur Github et c’est là que l’on va aller le récupérer.

La méthode la plus simple consiste à le récupérer via Git:

> git clone git@github.com:fbsamples/messenger-platform-sample.git
> cd node && npm install

2. Enregistrer notre ChatBot Facebook Messenger

Après avoir récupéré le « Starter Kit », nous allons avoir besoin d’un compte Facebook Développeur afin de pouvoir réaliser les étapes suivantes.

nb: Ne vous inquiétez pas si vous n’en avait pas, Facebook va vous proposer d’en créer un nouveau.

Étape 1 — Créer une nouvelle Page Facebook pour notre ChatBot en cliquant ici

Lors de la création d’une nouvelle Page Facebook, il va nous être demander de renseigner quelques informations basiques.

Étape 2 — Activer une nouvelle Facebook App pour notre ChatBot en cliquant ici

 

Choisir un nom pour notre ChatBot

Renseigner quelques informations concernant notre ChatBot

Cliquer sur « Skip Quick Start »

 

Cliquer sur « Add Product »

 

 

Créer un nouveau « Messenger Product » en cliquant sur « Get Started » dans la section « Messenger »

 

Activer les Webhooks en cliquant sur « Setup Webhooks »

À ce stade nous avons:

  • Récupéré le « Starter Kit » de Facebook pour développer son but
  • Créé un compte Facebook Developper (si ce n’était pas déjà le cas)
  • Créé une Page Facebook qui va accueillir notre ChatBot
  • Créé notre App Messenger (ChatBot)
  • Activé les Webhooks de notre App

Et croyez moi, le plus compliqué est derrière nous !

3. Création d’un endpoint Webhook SSL local avec Ngrok

Tout est en place, mais pour que Facebook puisse communiquer avec notre serveur local NodeJS (qui correspond à l’Intelligence Artificielle de notre ChatBot) nous allons avoir besoin d’un serveur SSL qui va recevoir et traiter les requêtes Webhooks envoyées par Facebook.

Mais pourquoi avons nous besoin d’un serveur SSL ?

— Tout simplement parce que les ChatBots Facebook Messenger fonctionnent en envoyant des requêtes a un serveur externe lorsqu’une action est déclenchée sur notre page. Dans notre cas: la réception d’un message chat provenant d’un utilisateur qui converse avec notre ChatBot. C’est ce que l’on appel un Webhook.

 

Pour les curieux.se.s, concernant les Webhooks je vous met ça là:

Introduction complète aux Webhooksource AF83

 

Mais comme je vous l’ai dit en introduction de ce Quickstart, nous allons utiliser notre localhost en guise de serveur SSL pour réceptionner les Webhooks que Facebook va nous envoyer.

N’ayez crainte, nous allons faire ça en 20 secondes maximum. Grâce à Ngrok.

Qu’est-ce que Ngrok ?

Ngrok est service qui va nous permettre d’exposer un serveur local derrière un NAT ou un firewall… directement sur internet.

Concept de la gestion des Webhooks Facebook par Ngrok résumé en un dessin:

Principe de Ngrok

Principe de Ngrok

 

Tout d’abord, nous allons télécharger Ngrok et suivre les instructions d’installation en fonction de notre système d’exploitation.

Une fois l’installation terminé, lancer Ngrok dans un Terminal.

On va utiliser le port 5000 car le serveur NodeJS de notre ChatBot se lance sur ce port, on indique donc à Ngrok d’exposer uniquement ce port à internet.

$ ./ngrok http 5000
Après avoir lancé Ngrok, le terminal nous renvoie le status de la session Ngrok en cours

Après avoir lancé Ngrok, le terminal nous renvoie le status de la session Ngrok en cours

4. Configuration

On va maintenant configurer notre serveur NodeJS

On ouvre “./messenger-platform-sample/node/config/default.json” et on renseigne les informations de notre App Facebook, example:

{
“appSecret”: “MY_APP_SECRET”,
“pageAccessToken”: “MY_PAGE_ACCESS_TOKEN”,
“validationToken”: “CHOOSE_A_PERSONNAL_TOKEN”,
“serverURL”: “https://YOUR_SERVER_URL"
}

Pour connaitre notre “appSecret” et “pageAccessToken”, retournons dans les réglages de notre Bot Facebook:

Pour récupérer le “pageAccessToken” sélectionnez la page Facebook de notre bot que l'on a créé en amont, un token sera généré, copiez le.

Pour récupérer le “pageAccessToken” sélectionnez la page Facebook de notre bot que l’on a créé en amont, un token sera généré, copiez le.

Pour récupérer “appSecret”, aller sur “Dashboard” et cliquez sur “Show”, copiez le code

Récupérer “appSecret”, aller sur “Dashboard” et cliquez sur “Show”, copiez le code

C’est bon ! Notre bot est correctement configuré.

5. Initialisation

Démarrer le bot depuis le dossier “messenger-platform-sample/node”

$ node app.js

 

6. Finaliser l’enregistrement du ChatBot Facebook Messenger

Maintenant nous avons un serveur SSL valide qui forward le traffic vers notre serveur NodeJS local (qui contient toute la logique de notre Bot).

On va indiquer à Facebook, notre URL de callback serveur (url généré plus tot par Ngrok)

Remplacer

Remplacer « Callback URL » par l’url généré par ngrok (n’oubliez pas d’indiquer l’url https et de rajouter ‘/webhook’ à la fin de l’url). Remplacer « VERIFY_TOKEN » par notre propre token de validation indiqué précédemment dans le fichier ‘default.json’.

Assurez vous que les « Subscriptions Fields » suivants soient bien sélectionnés:

  • message_deliveries
  • messaging_optins
  • messaging_postbacks
  • messages

 

Vérification de la connection Webhooks

Premièrement, on clique sur “Verify and Save”. Si aucun message d’erreur n’apparait , notre Chatbot est en ligne !

Ensuite, allons vérifier que tout fonctionne en lui envoyant un message par le biais de sa Page Facebook créé plus tôt.

Pour conclure, si tout est correctement en place, on devrait voir apparaître quelques messages de logs sur notre serveur NodeJS et console Ngrok…

Envoyez des messages au ChatBot, si tout est convenablement en place il vous répond !

Envoyez des messages au ChatBot, si tout est convenablement en place il vous répond !

 

On voit clairement les appels Webhooks opérés par Facebook sur notre console locale Ngrok.

On voit clairement les appels Webhooks opérés par Facebook sur notre console locale Ngrok.

 

Et bien entendu, on peut voir les requêtes émises et reçues par notre ChatBot, dans la console de notre serveur NodeJS !

Et bien entendu, on peut voir les requêtes émises et reçues par notre ChatBot, dans la console de notre serveur NodeJS !

 

 

Et Voilà !

Vous venez de développer votre premier ChatBot pour Facebook Messenger !

Libre à vous de l’améliorer, le modifié et de jouer avec, vous trouverez sur internet beaucoup de ressources pour géré l’intelligence artificielle d’un Chatbot, je vous met tout de même quelques références ci-dessous:

 

Api.ai – Conversational UX Platform

Wit.ai – Développer simplement de manière graphique l’inteligence artificielle de votre Bot.

 The ChatBotFactory – Startup Française leader et spécialiste des chatbots intelligents et évolutifs.

BotWiki.org – Outils, tutos,  vous trouverez tout un tas de ressources concernant les ChatBots

ChatbotMagazine – Référence (en anglais) en matière de news sur les Chatbots

 


Cet article est une traduction d’un de mes posts rédigé en anglais sur le site Medium disponible ici.

Partager surShare on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Email this to someonePrint this page

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *