Créer un assistant agent immobilier sur la plateforme Facebook Messenger avec Wit.ai et NodeJs
D'après le site MordorIntelligence, la valeur du marché des chatbots et assistant virtuels devrait atteindre les 102.29 milliard de dollars américain en 2025. Ils sont de plus en plus adoptés par plusieurs entreprises pour améliorer le service client et pour bien d'autres objectifs. Dans ce tutoriel, on va créer étape par étape un chatbot qui permettra aux utilisateurs de chercher des maisons en location ou en vente sur la plateforme Messenger de Facebook. il pourra alors choisir de voir leur détails ou une carte contenant leur localisation.
- Node.js : Node.js est un environnement d'exécution JavaScript gratuit, open-source et multi-plateforme qui permet aux développeurs d'écrire des outils de ligne de commande et des scripts côté serveur en dehors d'un navigateur selon le site nodejs.dev.
- La Plateforme Facebook Messenger : Avec plus de 2,45 milliards d'utilisateurs, Facebook est parmi les plus grands réseaux sociaux au monde.
- Wit.ai : C'est un plateforme open source qui offre des fonctionnalités avancées de traitement du langage naturel (Natural Language Processing, NLP).
- Un éditeur de code (VS Code, Atom, ou n'importe quel autre)
- Une connaissance en Javascript spécialement la plateforme NodeJs avec le Framework ExpresJs. Si vous n'avez aucune notion en NodeJs, vous pouvez parcourir ce cours.
- Un ordinateur
- Le gestionnaire de paquet npm doit être installé.
Ce tutoriel est subdivisé en 5 étapes :
- Création d'une application Facebook
- Créer notre application server avec Nodejs/Expess et configurer les webhook sur notre application Facebook.
- L'introduction à wit.ai et le traitement des langages naturels
- Extraire les données du message de l'utilisateur et formuler uen reponse.
- Test
Pour créer une application sur Facebook il faut avoir un compte développeur. SI vous n'en avez pas encore, veuillez le créer à ce lien.
Dans votre compte développeur, choisissez le menu MyApps , ensuite cliquer sur le bouton create app.
Choisissez ensuite l'option Manage Business Intégration.
Sur la nouvelle page qui va s'afficher, complétez les informations relatives à l'application. Ayant déjà créer notre application, Dirigeons-nous sur la page contenant les produits pouvant être ajouté à notre application, trouver Messenger et cliquez sur le bouton Set Up.
Nous allons maintenant ajouter une page à notre application. Si vous n'avez pas encore une page, veuillez d'abord la créer.
Ensuite, sur le tableau de bord de l'application, veuillez accéder aux paramètres Messenger. Sur la rubrique Access Token , veuillez cliquer sur le bouton Add or Remove page, choisissez ensuite la page que vous allez ajouter.
Nous Allons utiliser Node/Express pour notre backend. Veuillez donc initialiser un projet et installer les librairies ci après :
- express
- body-parser
- esm
- nodemon
- axios
- dotenv
Créons ensuite le fichier_ index.js_ qui nous servira de point d'entré dans l'application. Placez-le dans un nouveau dossier que vous appelé server. le chemin de ce fichier doit être server/index.js.
Pour connecter notre backend à l'application Facebook, nous devons ajouter sur Facebook l'url de notre application. A fin de tester notre application en local nous allons utiliser ngrok pour créer un tunnel afin d'exposer notre application à l'extérieur. Créons un dossier Messenger ajoutons-y un fichier appelé webhookController. Pour la vérification de notre url, créons une fonction et appelons-le webHookVerification, Elle nous permettra de vérifier la connexion de l'application Facebook à notre backend.
Créons ensuite une autre fonction et appelons la, webhookcontroller, elle permettra de recevoir et extraire les données importante chaque fois qu'un message est envoyé sur notre page.
Importons ces deux fonctions dans notre fichier index.js et ajoutons deux routes à notre application. Créons ensuite un fichier et appelons-le handler.js, il contiendra les fonctions ou l'on traitera les requêtes de l'utilisateur. Créons-y trois fonctions vide à savoir :
- handleMessage
- handlePostback
- callSendApi Pour plus d'information concenant la configuration des webhook, consulez ce lien
Pour mieux répondre aux requêtes de l'utilisateur, nous avons besoin de traiter et comprendre ses messages . C'est ainsi que deux concepts sont communément utilisés dans la plupart de plateformes de traitement de langages naturels (Natural Language Processing platforms) dont wit.ai fait partie, à savoir : les intents : ils symbolise l'intention de l'utilisateur permettant ainsi de catégoriser la requête de l'utilisateur. Par exemple savoir s'il cherche une maison à louer , si son message n'est qu'une salutation ou bien s'il veux planifier une visite guidée. les entités (entities) : ce sont des variables contenant différents détails d'une requête. Ca peux être une caractéristique de la maison que l'utilisateur recherche, sa location, etc. A part les entités fournis par wit.ai, on peut aussi créer d'autres.
Pour mieux comprendre ce qu'est wit.ai, vous pouvez lire sa documentation. Sachant ce qu'est wit.ai, veuillez-y créer une application en suivant ces étapes :
- Rendez-vous sur wit.ai
- Connectez-vous avec votre compte Facebook
- Ensuite sur créer votre application
Télécharger le fichier contenant les données de notre application à ce lien, ce fichier contient les entités ainsi que les intents que nous allons utiliser.
Sur la formulaire de création de l'application, cliquez sur browse et choisissez le fichier téléchargé. Ensuite cliquer sur le bouton create.
Nous allons à ce point ajouter deux intents (houseSearch et greeting): cliquez sur l'option understanding et entrainer l'application. Entrer par exemple la phase je cherche une maison.
Cliquez sur choose or add intent, écrivez ,dans le champ intent, houseSearch. C'est le nom de notre intent capturant les messages liés à la recherche de maisons et ensuite cliquez sur create intent.
Répéter ces actions avec différentes autres phrase en ajoutant encore plus de caractéristiques. par ex : la ville ou l'on cherche la maison. Faites aussi la même chose pour l'intent greeting, qui regroupe les messages de salutations. Vous pouvez entrainer l'application autant de fois que vous voulez pour le rendre plus efficiente.
Rendez vous ensuite dans les paramètres de votre application et copier le token de votre application.
Rendez-vous sur la page de votre application Facebook, dans la rubrique Built-In NLP et activer le pour la page Facebook que vous avez créer Ensuite changez l'option Default langage model , en sélectionnant custom model : Ensuite ; cliquer sur le bouton link to exisiting wit app et dans le champs qui va s'afficher insérer le token de l'application wit.ai
Allons maintenant dans les codes, ouvrons le fichier handler.js et modifions la fonction callSendApi de cette manière : Créons ensuite un dossier appelé bot et ajoutons-y trois fichiers :
-
index.js : contient une fonction qui devra catégoriser le message de l'utilisateur et appeler la fonction adéquate :
-
search.js : contient les fonctionnalités nous permettant d'extraire les données en se basant sur les critères données par l'utilisateur
-
data.js : contient les données test ainsi que les fonctions nous permettant de formatter les données pour les réponses à envoyé a notre utilisateur, ce fichier contient trois fonctions :
- getFormattedData : cette fonction reçoit une liste des maisons et retourne un objet pouvant être envoyé comme réponse à partir de l'api Facebook. le format utilisé pour l'organisation des données est le template de type generique
- getDetails: cette fonction retourne les détails d'une maison sélectionnée par l'utilisateur. Elle retourne les images ainsi que le caractéristiques et demande à l'utilisateur s'in veux visiter la maison. Afin de rendre la tache facile à l'utilisateur nous lui suggérons directement les réponses sous forme de quickReply.
- getMapImage: cette fonction est appelé lorsque l'utilisateur veux visiter la maison, et nous permet d'envoyer à l'utilisateur la carte de l'emplacement de la maison en utilisant le google map static api
Nous voici arriver à la fin de notre tutoriel, nous pouvons démarrer notre serveur, démarrer une instance ngrok et enregistrer notre webhook dans les paramètres de l'application.
Après avoir telechager notre repository, suivez attentivement le readme pour la configuration du projet.