Depuis quelques années, les bots, ces agents logiciels autonomes en charge de réaliser des tâches définies, reviennent sur le devant de la scène. Utilisés depuis longtemps pour l’automatisation de certaines tâches comme l’indexation de pages web par Google ou encore pour assister les clients sur les sites de commerce en ligne ; nous devons leur retour en force, en particulier celui des chatbots – agents conversationnels – aux progrès de l’intelligence artificielle et à leur intégration récente dans les principales plateformes de messagerie instantanée notamment Facebook Messenger et son milliard d’utilisateurs.

Le chatbot, une interface simple et intuitive

A titre d’exemple, nous avons développé dans le cadre du Citizen Clan, un bot nommé Justin Biker, qui vous informe de la disponibilité en temps réel des stations de vélo en libre service, directement depuis Messenger, dans plus de 25 villes à travers le monde dont New York, Londres, Paris, Bruxelles, Chicago, San Francisco, Lille, Lyon, Marseille, Séville, Dublin, etc. Alors qu’auparavant vous deviez utiliser une application dédiée ou vous connecter sur un site web ; avec ce bot, il suffit simplement d’entrer en conversation avec Justin Biker sur Messenger et lui envoyer sa position.

Capture d’écran du bot V’Lille Clan

Je vais dans cet article vous guider dans le développement d’un bot (plus simple) pour la ville de Paris et ses vélos en libre service : Vélib.

Outils et environnement de développement

Les messages envoyés par les utilisateurs de notre service sont traités par un serveur web que nous devons mettre en place. Pour cet exemple, nous développerons un serveur Node.js en nous appuyant sur le framework Express. Si tout cela est nouveau pour vous, ne vous inquiétez surtout pas : vous trouverez le détail de l’installation dans mon article sur le développement d’API.

Pour vérifier la bonne installation de Node.js et de son gestionnaire de paquets npm, entrez les commandes suivantes dans votre console :

Cela devrait retourner le numéro de version de Node.js. De même pour npm.

Nous allons justement utiliser npm pour initialiser notre application. Tout d’abord nous allons créer un dossier. Depuis la console, naviguez vers ce dossier nouvellement créé et entrez la commande suivante :

Renseignez les informations demandées : nom, version et description de l’application, auteur, etc. Pour « start », ce sera le nom du fichier principal de votre application ; dans mon cas, je l’ai nommé « frugalbot.js ».

Un fichier package.json est normalement apparu dans votre dossier. Ce fichier sert à gérer les modules dont nous avons besoin. Justement nous devons maintenant installer (toujours dans le même dossier) les modules Express (si ce n’est pas déjà fait), body-parser, et request pour développer notre serveur web :

Si vous retournez lire le fichier package.json, vous verrez que ces modules sont maintenant inscrits avec le numéro de version correspondant.

Voilà pour la mise en place de l’environnement, il nous manque une dernière chose : la création de notre fichier principal (frugalbot.js me concernant).  Ci-dessous un code exemple pour démarrer rapidement :

Si vous avez suivi l’article sur les API, ce code devrait vous être familier, à l’exception du Facebook Webhook sur lequel nous reviendrons par la suite.

Pour tester ce code, depuis la console, entrez la commande node suivie du nom de votre fichier et rendez-vous sur le lien http://localhost:3000. Le message « Je suis le serveur du bot frugal » devrait apparaître.

Une fois cela fait, nous allons maintenant créer une page Facebook (les bots sont toujours liés à des pages) et inscrire notre application depuis le site Facebook Developer.

Inscription du bot chez Facebook

Pour commencer, nous avons besoin de créer une page Facebook. Ensuite, nous devons nous inscrire chez Facebook developers et créer une application. Lors de la création du nouvel ID d’app, dans la liste déroulante des catégories, choisissez Apps pour Messenger.

Création d’une application Facebook

Pour identifier notre serveur, Facebook utilise ce qu’on appelle un webhook. Petite difficulté : pour interagir avec Facebook, notre serveur doit être en https. Nous allons utiliser pour cela Heroku, une solution d’hébergement en ligne.

Configuration Heroku

Je vous invite pour commencer à créer un compte sur Heroku. Une fois le compte créé, nous aurons besoin de Heroku Command Line Interface (CLI) que vous pouvez télécharger en cliquant sur ce lien.

Une fois installé, vous pourrez depuis la console vous connecter à Heroku et créer votre application. Pour vous connecter, entrez la commande suivante depuis la console et renseignez l’adresse email et le mot de passe utilisés lors de la création de votre compte Heroku.

Nous aurons besoin d’un dernier outil pour charger notre application sur Heroku, il s’agit de Git que vous pouvez télécharger en cliquant sur ce lien. Si vous êtes sur Windows, je vous conseille d’installer la console cmdr avec git intégré. Pour tester l’installation de git :

Avant de continuer avec Git, nous allons créer un fichier dans le dossier de notre application que nous allons nommer : .gitignore (là vous n’avez pas le choix).  N’oubliez pas le point, c’est bien .gitignore. Ce fichier va nous permettre d’exclure les fichiers qui ne sont pas utiles à notre application lors de son déploiement. Ci-dessous, le contenu de mon fichier .gitignore :

Un autre fichier nous sera nécessaire pour le fonctionnement de notre application sur Heroku : le fichier Procfile. Ce fichier indique à la plateforme Heroku, la commande à utiliser pour lancer notre application. Créez donc un fichier nommé Procfile (pas le choix non plus) avec un P majuscule. Dans notre cas, nous utilisons la commande node suivi du nom de notre fichier principal (frugalbots.js ici). Sans oublier le web: qui indique que nous utiliserons un routage HTTP.

Passons maintenant à la création de notre répertoire Git. Toujours dans le dossier de notre application, depuis la console (ou depuis le shell git), entrez la commande suivante :

Ensuite, ajoutons nos fichiers à notre git (localement pour le moment).

Il s’agit maintenant de créer une application sur Heroku, cela peut se faire directement depuis la console (choisissez un nom qui n’est pas déjà utilisé sinon cela ne fonctionnera pas) :

Enfin pour déployer votre application, tapez :

En allant sur le lien https:// »nom de votre application ».herokuapp.com/, vous devriez tomber sur notre message « Je suis Frugal ».  Dans l’exemple utilisé ici, le lien est https://monbotfrugal.herokuapp.com/.

Vous pouvez aussi tester l’application directement depuis la console en tapant :

Si vous n’avez pas réussi à configurer correctement votre application sur Heroku, vous trouverez sur ce lien, un guide explicatif de la procédure.

Nous avons maintenant une adresse https, nous pouvons finir de configurer notre application sur Facebook.

Configuration de notre bot chez Facebook

Revenons donc au tableau de bord de notre application chez Facebook Developer. Naviguez vers la rubrique Messenger (sous le menu PRODUITS).  Sélectionnez la page créée précédemment afin de générer un token. Copiez ce token dans un fichier, nous en aurons besoin par la suite.

Génération de tokens

Après cela, cliquez sur « Configurer des webhooks », cochez toutes les cases d’abonnement, inscrivez dans le champ « URL de rappel », l’adresse en https fournie par Heroku suivi de « /webhook » pour que le rappel soit fait sur l’URI que nous avons déclaré dans notre code.  Renseignez également le token que nous avons choisi dans le code exemple à savoir « monbotfrugal_verify_token ».

Configuration des webhooks

Pour terminer, toujours dans la rubrique Webhooks, vous devez maintenant abonner votre application à la page que vous avez créée. Si vous rencontrez des soucis, vous pouvez vous référer au guide explicatif.

Développement du bot Vélib Clan

Nous pouvons enfin passer au développement de notre bot. Nous allons devoir prendre en charge les appels POST sur le webhook. Nous allons démarrer avec le code exemple de Facebook. Ajoutez le code suivant à la fin du fichier frugalbot.js.

Pour comprendre en détail ce code, je vous invite à vous référer au guide explicatif de Facebook.

N’oubliez surtout pas de renseigner votre token dans la fonction callSendAPI.

A ce stade, le bot ne fait que renvoyer à l’utilisateur le texte reçu. Pour mettre à jour notre application sur la plateforme Heroku et pouvoir tester le bot, il suffit de taper de nouveau les commandes suivantes :

Mais ce qui nous intéresse ici, c’est de pouvoir récupérer les coordonnées d’un utilisateur qui nous envoie sa position et aller interroger l’API de la mairie de Paris pour connaître la disponibilité des stations vélib les plus proches des coordonnées transmises (exemple, si je me trouve à la tour Eiffel).

Pour ce faire nous allons quelque peu modifier le code exemple de Facebook. La ligne qui nous intéresse est la suivante :

La position envoyée par l’utilisateur est un « messageAttachments » de type « location ». Nous allons donc tester cela. Ensuite, nous allons extraire les coordonnées du message envoyé par l’utilisateur et appeler l’API. Pour finir, nous allons envoyer le résultat avec la fonction sendGenericMessage que nous allons compléter.

N’oubliez pas de compléter la fonction sendGenericMessage comme suit :

Après une mise à jour de votre application sur Heroku, votre bot Messenger est normalement fonctionnel !

Capture d’écran de notre bot Messenger

Pour le moment, votre application ne peut être utilisée que par les administrateurs, développeurs et testeurs que vous aurez indiqués dans la rubrique Rôles depuis Facebook Developer. Afin de rendre votre bot accessible à tous, vous devez le soumettre à un examen par Facebook.

Un bot Vélib Clan (un peu plus abouti) est disponible sur Messenger si vous souhaitez utiliser le service au quotidien.

Et si vous n’êtes ni de la métropole lilloise, ni de Paris ; vous pouvez reproduire cela pour votre ville si elle est équipée d’un système de vélos en libre service ou encore pour proposer un autre type de service comme la disponibilité des places de parking par exemple. N’hésitez pas à nous en faire part sur ce blog ou via le Citizen Clan.  Vous êtes bien entendu les bienvenus au sein de l’association pour nous aider à construire des services citoyens innovants et frugaux !

Comme d’habitude, si des erreurs se sont glissées dans l’article, n’hésitez pas à nous en faire part.

Pour être informé des prochains articles, rendez-vous sur Twitter.

Merci, et à très bientôt sur Frugal Prototype