Maison >interface Web >js tutoriel >Construire un bot de chat Facebook avec Node et Heroku
Créez un chatbot Facebook à l'aide de Node.js et Heroku, évalué par des pairs par Joan Yin et Camilo Reyes. Merci à tous les pair de sitepoint pour avoir obtenu le contenu de sitepoint à son meilleur!
Lors de la conférence F8 de l'année dernière, Facebook a lancé la plate-forme Messenger, permettant aux développeurs de créer des robots pouvant parler aux personnes sur les pages Messenger ou Facebook. Avec les robots, les propriétaires d'applications peuvent mieux interagir avec les utilisateurs en fournissant des communications personnalisées et interactives qui peuvent être étendues aux masses. Depuis son lancement, l'entreprise et les propriétaires d'applications ont montré un grand intérêt pour les chatbots. Trois mois après l'annonce, on estime que 11 000 robots ont été construits sur la plate-forme.
Les chatbots profitent non seulement aux entreprises et aux propriétaires d'applications. Les utilisateurs de ces robots peuvent profiter de nombreux services, tels que:
L'intérêt actuel et l'attractivité des chatbots est évident.
Dans cet article, nous explorerons comment créer un chatbot Facebook qui peut interagir avec les utilisateurs via Messenger au nom des pages Facebook. Nous créerons un robot qui peut fournir aux utilisateurs différents détails sur les films qu'ils spécifient.
La maîtrise de l'IA peut certainement aider, surtout en ce qui concerne la construction de robots complexes, mais ce n'est pas nécessaire. Vous pouvez certainement construire un robot sans comprendre l'apprentissage automatique.
Vous pouvez construire deux types de robots. L'un est basé sur un ensemble de règles, et l'autre utilise l'apprentissage automatique. Le premier est limité en termes d'interactions qu'il peut fournir. Il ne peut répondre qu'aux commandes spécifiques. C'est le type de robot que nous allons construire.
Avec les robots d'apprentissage automatique, vous pouvez obtenir une meilleure interaction utilisateur. Les utilisateurs peuvent interagir plus naturellement avec le robot comme ils le font dans l'interaction humaine, plutôt que d'utiliser simplement les commandes. Les robots deviendront également plus intelligents en apprenant des conversations avec les gens. Nous sauverons la construction de ce type de robot dans les futurs articles. Cependant, aucune connaissance de l'apprentissage automatique n'est requise. Heureusement, il existe des services comme Wit.ai et API.ai qui permettent aux développeurs d'intégrer l'apprentissage automatique (en particulier le traitement du langage naturel - NLP) dans leurs applications.
Vous pouvez télécharger le code de l'application de démonstration terminée à partir d'ici.
Pour que votre chatbot communique avec les utilisateurs de Facebook, nous devons configurer un serveur pour recevoir, traiter et renvoyer des messages. Le serveur utilisera l'API Facebook Graph pour cela. L'API graphique est le principal moyen d'entrer et de sortir des données de la plate-forme Facebook. Le serveur doit avoir une URL de point de terminaison auquel le serveur Facebook peut accéder, donc le déploiement d'une application Web sur la machine locale ne fonctionne pas, vous devez le mettre en ligne. De plus, en commençant par la version 2.5 de l'API Graph, les nouveaux abonnements au service doivent utiliser une URL de rappel HTTPS sécurisée. Dans ce didacticiel, nous déploiement de l'application sur Heroku car tous les domaines appname.herokuapp.com par défaut ont activé SSL. Nous utiliserons Node.js pour créer des applications Web.
Tout d'abord, assurez-vous que le nœud est installé sur votre ordinateur. Vous pouvez vérifier cela en tapant le nœud -v dans le terminal. S'il est installé, il sortira le numéro de version. Installez ensuite l'interface de ligne de commande Heroku (CLI). Nous l'utiliserons plus tard pour pousser l'application vers Heroku. Utilisez Heroku --version pour vérifier que la CLI est installée.
Créez le répertoire de projet et initialisez le fichier package.json à l'aide de la commande suivante.
<code>$ mkdir spbot $ cd spbot $ npm init</code>
Suivez les invites pour définir vos préférences de projet.
Après avoir généré le fichier package.json, ouvrez-le et ajoutez la propriété Démarrer à l'objet scripts. Cela permet à Heroku de savoir quelle commande exécuter pour démarrer l'application. Lors de la configuration du projet, je définis App.js comme point d'entrée de l'application, donc j'utilise le nœud app.js comme valeur de démarrage. Modifiez ce paramètre en fonction des paramètres de votre projet.
<code>{ "name": "spbot", "version": "1.0.0", "description": "SPBot Server", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node app.js" }, "author": "Joyce Echessa", "license": "ISC" }</code>
Installez les packages de nœuds suivants.
<code>$ npm install express request body-parser mongoose --save</code>
Créez un fichier .gitignore dans le répertoire racine du projet et incluez le dossier node_modules pour empêcher qu'il ne soit soumis.
<code>node_modules</code>
Dans le répertoire racine du projet, créez un fichier nommé app.js (index.js Si le nom par défaut est utilisé). Modifiez-le comme suit:
<code class="language-javascript">var express = require("express"); var request = require("request"); var bodyParser = require("body-parser"); var app = express(); app.use(bodyParser.urlencoded({extended: false})); app.use(bodyParser.json()); app.listen((process.env.PORT || 5000)); // 服务器索引页面 app.get("/", function (req, res) { res.send("已部署!"); }); // Facebook Webhook // 用于验证 app.get("/webhook", function (req, res) { if (req.query["hub.verify_token"] === "this_is_my_token") { console.log("已验证 webhook"); res.status(200).send(req.query["hub.challenge"]); } else { console.error("验证失败。令牌不匹配。"); res.sendStatus(403); } });</code>
Le premier gestionnaire de Get sera utilisé pour nos propres tests - pour voir si l'application a été déployée avec succès. Le deuxième Get Handler est le point de terminaison Facebook utiliser pour valider l'application. Le code doit rechercher Verification_token et répondre avec la contestation envoyée dans la demande de vérification.
Vous pouvez coller votre propre jeton dans le code. Ce type de données est mieux enregistré dans les variables d'environnement, que nous ferons immédiatement après la création du projet sur Heroku.
Pour que la plate-forme Facebook se connecte à notre application backend, nous devons d'abord le mettre en ligne.
Créez un référentiel GIT et soumettez le projet en utilisant la commande suivante:
<code>$ git init $ git add . $ git commit -m "Initial commit"</code>
Si vous ne l'avez pas déjà fait, veuillez vous inscrire à un compte Heroku gratuit.
Connectez-vous à Heroku à partir de votre terminal et créez une application.
<code>$ heroku login $ heroku create $ git push heroku master $ heroku open</code>
Après avoir exécuté la commande Heroku Open, le lien pour exécuter l'application s'ouvrira dans votre navigateur par défaut. Si tout se passe bien, vous verrez une page avec le texte "déployé!".
Avant de continuer, créons une variable d'environnement sur Heroku pour enregistrer le jeton de vérification de l'application.
Ouvrez votre tableau de bord Heroku et sélectionnez l'application que vous venez de déployer. Accédez aux paramètres de l'application et cliquez sur le bouton Afficher les variables de configuration . Entrez Verification_Token comme la clé , entrez votre jeton comme la valeur , puis cliquez sur pour ajouter .
Dans votre code, modifiez votre chaîne de jeton ("This_is_my_token") pour procéder.env.verification_token. Soumettez vos modifications et poussez-les à Heroku.
Lorsque le serveur est opérationnel, nous allons maintenant créer une application Facebook et sa page associée. Vous pouvez créer une nouvelle page ou utiliser une page existante.
Pour créer une page Facebook, connectez-vous à Facebook et accédez à la page Créer. Sélectionnez le type de page dans les options données. J'ai choisi Entertainment .
Sélectionnez ensuite la catégorie et le nom de la page.
Après avoir cliqué sur Démarrer , une page sera créée et il vous sera demandé de fournir des informations plus détaillées sur votre application (description, site Web, photo de profil, public cible, etc.). Vous pouvez maintenant ignorer ces étapes de configuration.
Pour créer une application Facebook, accédez à la page Ajouter une nouvelle application et cliquez sur le lien Paramètres de base ci-dessous pour sélectionner le
ci-dessous.
Remplissez les informations détaillées nécessaires. Sélectionnez Application orientée page
comme catégorie.
Après avoir cliqué sur Créer un ID d'application
, le tableau de bord de l'application sera ouvert.
Dans les paramètres produit à droite, cliquez sur dans la section Messenger pour démarrer
. Vous serez ensuite emmené sur la page des paramètres Messenger comme indiqué ci-dessous.
Pour recevoir des messages et d'autres événements envoyés par les utilisateurs de Messenger, l'application doit permettre l'intégration de WebHook. Nous le ferons ensuite. WebHook (anciennement connu sous le nom de Live Update
) vous permet de vous abonner aux modifications que vous souhaitez suivre et recevoir des mises à jour en temps réel sans appeler l'API.Dans la section WebHook, cliquez sur Définir WebHook
Après avoir réussi à activer WebHook, vous devriez voir terminé dans la section WebHook, ainsi qu'une liste d'événements souscrits. Si vous recevez une erreur, assurez-vous que vous avez entré l'URL correct pour le point de terminaison WebHook (se terminer avec / webhook) et assurez-vous que le jeton utilisé ici est le même que celui que vous utilisez dans votre application de nœud.
Dans la section Token Generation , sélectionnez votre page dans le menu déroulant. Après l'authentification, un jeton d'accès à page sera généré pour vous.
Créez une autre variable d'environnement sur Heroku et définissez sa clé Key à page_access_token et prenez le jeton généré comme la valeur . Notez que le jeton généré n'est pas enregistré dans la page actuelle où il est affiché sur Facebook. Chaque fois que vous accédez à la page, le champ de jeton d'accès à la page sera vide et un nouveau jeton sera généré lorsque vous sélectionnez votre page Facebook dans le menu déroulant Page. Cependant, tout jeton créé précédemment continuera de fonctionner. Assurez-vous donc de copier le jeton avant de fermer la page.
Pour que votre webhook reçoive des événements sur une page spécifique, vous devez vous abonner à votre application à cette page. Dans la section webhook , sélectionnez la page à laquelle vous souhaitez vous abonner.
La première chose que les utilisateurs voient quand ils commencent une nouvelle conversation avec votre bot est l'écran de bienvenue. Cet écran affichera le nom, la description, la photo de profil et la photo de couverture de votre page. Vous pouvez personnaliser l'écran en définissant le texte de salutation, qui sera utilisé au lieu de la description de la page. Vous pouvez l'utiliser pour configurer des messages d'introduction pour informer les utilisateurs de ce qu'ils peuvent obtenir de votre bot.
Par défaut, pour démarrer une conversation, l'utilisateur enverra le premier message à votre bot. Cependant, vous pouvez activer le bouton Démarrer pour permettre à votre bot d'envoyer des messages initiaux. Le bouton enverra un événement à votre serveur, auquel vous pouvez ensuite répondre.
Pour définir le texte de salutation, ouvrez votre page et accédez à son set .
Sélectionnez Message dans le panneau de gauche et ouvrez sur le panneau de droite pour afficher les salutations Messenger . Définissez des messages sur vos préférences.
Pour activer le bouton Démarrer, remplacez la chaîne Page_ACCESS_TOKIN dans l'instruction suivante par votre jeton et collez la commande dans le terminal.
<code>$ mkdir spbot $ cd spbot $ npm init</code>
L'opération ci-dessus envoie une demande à l'API du graphique Facebook. Si la demande réussit, le bouton Démarrer apparaîtra sur l'écran de bienvenue de la nouvelle conversation. L'utilisateur clique sur ce bouton et déclenche le rappel reçu du post-dos. Votre bot peut ensuite répondre à ce post-dos.
Postback peut être déclenché par différents types de composants - bouton de dossier, bouton Démarrer, menu persistant ou messages structurés. Vous pouvez définir n'importe quelle chaîne en charge utile. Dans le backend, nous utiliserons cette chaîne pour identifier les post-doss envoyés en raison de la clic sur le bouton Démarrer. Pour recevoir des messages post-dos, votre application doit s'abonner à Postback sur votre webhook. Nous l'avons fait auparavant lors de la configuration du webhook en sélectionnant la case à cocher Messaging_Postbacks.
Si le bouton de démarrage est défini avec succès, vous verrez la réponse suivante.
<code>{ "name": "spbot", "version": "1.0.0", "description": "SPBot Server", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node app.js" }, "author": "Joyce Echessa", "license": "ISC" }</code>
N'oubliez pas que l'écran de bienvenue et les boutons de démarrage ne sont affichés que dans de nouvelles conversations. Lorsque vous encodiez et testant le bot, vous pouvez démarrer une nouvelle conversation en supprimant la conversation actuelle.
Pour traiter les messages post-dos, collez ce qui suit dans votre application de nœud.
<code>$ npm install express request body-parser mongoose --save</code>
Chaque fois que quelqu'un interagit avec votre bot ou envoie un message à votre page, les mises à jour sont envoyées via votre intégration WebHook. Pour recevoir le message, vous devez écouter un appel de publication sur le webhook. Tous les rappels seront envoyés à ce webhook.
Dans le gestionnaire ci-dessus, nous itons sur les entrées de message envoyées à la demande. Parfois, les messages sont envoyés ensemble par lots, donc une entrée peut contenir plusieurs objets. Nous itérons ensuite à travers l'événement de message pour chaque entrée et vérifions son type. Voici des messages de rappel différents qui peuvent être envoyés à l'application.
Si l'événement est post-dos, nous appellerons la fonction ProcessPostBack (), dans laquelle nous vérifierons la valeur de charge utile. N'oubliez pas que nous définissons la salutation sur la charge utile du bouton Démarrer, alors nous vérifions d'abord si l'événement de message a été envoyé en cliquant sur le bouton. Si c'est le cas, nous utiliserons l'API de profil utilisateur pour obtenir le nom de l'utilisateur et l'utiliser pour personnaliser le message qui leur sera renvoyé. Depuis l'API, vous pouvez obtenir son nom, son nom de famille, sa photo de profil, ses paramètres locaux, le fuseau horaire et le sexe.
Ensuite, envoyez le message à la fonction SendMessage (), qui le publie sur la plate-forme Messenger. Dans le gestionnaire de post WebHook, nous retournons 200 réponses HTTP OK.
Retourner 200 dès que possible est très important. Facebook attendra 200 avant d'envoyer le prochain message. Dans un bot à grande capacité, un délai de 200 rendements peut entraîner un retard important pour que Facebook remette des messages à votre webhook.
Si votre webhook renvoie une erreur (c'est-à-dire pas un état 2xx) ou un délai d'attente (c'est-à-dire que le temps de réponse dépasse 20 secondes) et continue de le faire pendant plus de 15 minutes, vous recevrez une alerte d'avertissement.
Si le webhook continue d'échouer pendant 8 heures, Facebook vous enverra une alerte vous informant que le webhook est désactivé et que votre application se désabonnera. Après avoir résolu le problème, vous devez réadapter le webhook et réécrire l'application à la page.
Soumettez des modifications et poussez-les à Heroku.
Pour tester le bot, vous pouvez utiliser votre lien court Messenger sur Facebook.com, Facebook Mobile App ou utiliser votre lien court Messenger https://www.php.cn/link/1fd37ce80d495bebcb35e0054d7384fe .
Sur Facebook et Messenger, vous pouvez trouver la page en recherchant le nom de la page.
Comme vous pouvez le voir ci-dessus, vous ne pouvez pas toujours garantir que le nom de la page est unique. Vos utilisateurs peuvent sélectionner la mauvaise page. Pour éviter cela, vous pouvez définir un nom d'utilisateur unique pour la page. Pour ce faire, accédez à la page d'accueil de votre page et sélectionnez plus dans le menu déroulant pour modifier les informations de la page .
https://www.php.cn/link/13f3d8f0b1d534d2ce312263653c5594 pour démarrer l'interaction.
Comme illustré ci-dessous, vous pouvez voir le texte de salutation que nous définissons pour l'écran de bienvenue et le boutonDémarrer .
Configurer la base de données
En raison de cette interaction de va-et-vient, le robot doit se souvenir de l'entrée de film actuelle de l'utilisateur. Facebook ne garde pas la session ouverte avec votre webhook, donc toutes les données que vous stockez dans l'objet de session seront perdues dans la prochaine demande. Nous enregistrerons ces données dans la base de données à la place - monODB spécifiquement. Nous utiliserons le module complémentaire MLAB sur Heroku.
MLAB est une base de données en tant que service pour MongoDB. Sur Heroku, bien que vous puissiez utiliser le plan gratuit Sandbox MLAB, vous devez enregistrer votre carte de crédit sur Heroku pour vérification. Si vous ne souhaitez pas fournir les détails de votre carte, vous pouvez enregistrer un compte sur le site Web MLAB, où vous créez une couche gratuite de base de données de bac à sable et lien vers cette base de données à partir de votre code (plus à ce sujet plus tard).
Pour utiliser des modules complémentaires sur Heroku, accédez au tableau de bord de l'application et sélectionnez l'onglet Ressources . Recherchez MLAB et sélectionnez le résultat. Dans la fenêtre de dialogue qui apparaît, sélectionnez Sandbox - Plan gratuit dans le menu déroulant et cliquez sur Provisioning . Vous devriez voir la confirmation pour le module complémentaire sélectionné.
Si vous vérifiez les variables d'environnement sur Heroku, vous verrez une variable avec l'ensemble MongoDB URI.
Si vous préférez configurer une base de données MongoDB sur votre site Web MLAB, inscrivez-vous un compte et accédez à la page Créer une nouvelle page de déploiement. Modifiez le paramètre plan en nœud unique et sélectionnez Sandbox dans la section standard line .
Définissez un nom pour votre base de données et cliquez sur le bouton Créer un nouveau bouton MongoDB pour terminer le processus.
Sur la page suivante, sélectionnez la base de données que vous venez de créer dans le tableau affiché. Une page s'ouvre sur des instructions sur la façon d'accéder à la base de données.
Sélectionnez l'onglet utilisateur et cliquez sur le bouton Ajouter un utilisateur de la base de données . Remplissez votre nom d'utilisateur et votre mot de passe et cliquez sur Créer . Cela créera un nouvel ensemble d'identification que vous pouvez utiliser pour permettre à votre application d'accéder à la base de données.
Dans la moitié supérieure de la page, recherchez et copiez l'uri de la base de données - il ressemble à mongodb: //
Retour à l'application Node, créez un fichier nommé film.js et enregistrez-le dans un dossier nommé Modèles. Collez ce qui suit dans le fichier:
<code>$ mkdir spbot $ cd spbot $ npm init</code>
Le modèle de base de données de films est créé ci-dessus. User_ID sera l'ID utilisateur obtenu à partir de la plate-forme Messenger, tandis que d'autres champs seront obtenus à partir de l'API du film. Nous ne stockons que les derniers films recherchés par l'utilisateur, de sorte que la base de données n'a qu'un seul enregistrement par utilisateur.
Nous pouvons omettre le champ User_ID et utiliser uniquement l'ID de l'utilisateur comme _ID pour chaque enregistrement créé. Cela fonctionnera car l'ID utilisateur est unique à la page Facebook. Si vous allez le faire, vous devez savoir que l'ID utilisateur est à l'échelle de la page. Cela signifie que l'ID de l'utilisateur est unique à la page donnée, mais l'utilisateur peut avoir différents ID pour différentes pages.
Vous n'avez besoin de le savoir que lorsque votre bot sert différentes pages (oui, un bot peut servir plusieurs pages). Donc, si votre bot sert plusieurs pages, il est possible de ne pas identifier l'utilisateur uniquement par son ID utilisateur unique garantir l'unicité entre les pages.
Une fois la base de données et le modèle configurés, nous pouvons désormais compléter le chatbot. Le code sera rendu en sections, mais si vous souhaitez coller l'intégralité du code dans votre projet, voici un lien vers le fichier app.js.
Configurez d'abord la connexion de la base de données. Mongoose aurait dû être installé avec d'autres modules auparavant.
<code>{ "name": "spbot", "version": "1.0.0", "description": "SPBot Server", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node app.js" }, "author": "Joyce Echessa", "license": "ISC" }</code>
Modifiez le gestionnaire de post du webhook comme indiqué ci-dessous.
<code>$ npm install express request body-parser mongoose --save</code>
Nous avons ajouté des vérifications des événements de type de type et les avons transmises à la fonction processMessage ().
<code>node_modules</code>
Ici, nous vérifions d'abord si le message est envoyé via le rappel du message Echo. Ce rappel se produit lorsque votre page envoie un message. Par exemple, le premier message (salutation) que nous envoyons à l'utilisateur sera renvoyé à notre webhook. Nous ne voulons traiter aucun de nos propres messages, nous l'avons donc vérifié.
Ensuite, nous vérifions si le message est du texte ou de la pièce jointe (image, vidéo, audio). Pour ce dernier, nous envoyons un message d'erreur à l'utilisateur. Pour les messages texte, nous vérifions si l'entrée correspond à certains mots clés qui indiqueront quel détail que l'utilisateur veut avoir du film. À ce stade, l'utilisateur a interrogé un film et le film sera enregistré dans la base de données. La fonction getmoviedEtail () interroge la base de données et renvoie un enregistrement spécifique.
<code class="language-javascript">var express = require("express"); var request = require("request"); var bodyParser = require("body-parser"); var app = express(); app.use(bodyParser.urlencoded({extended: false})); app.use(bodyParser.json()); app.listen((process.env.PORT || 5000)); // 服务器索引页面 app.get("/", function (req, res) { res.send("已部署!"); }); // Facebook Webhook // 用于验证 app.get("/webhook", function (req, res) { if (req.query["hub.verify_token"] === "this_is_my_token") { console.log("已验证 webhook"); res.status(200).send(req.query["hub.challenge"]); } else { console.error("验证失败。令牌不匹配。"); res.sendStatus(403); } });</code>
Si la requête de l'utilisateur ne correspond à aucun mot clé SET, le robot suppose que l'entrée est utilisée pour la requête du film, il est donc transmis à la fonction findmovie (), qui appelle l'API de la base de données de films ouvert à l'aide de l'entrée.
<code>$ git init $ git add . $ git commit -m "Initial commit"</code>
Si un film est trouvé, enregistrez ses détails avec l'ID de l'utilisateur. Si un enregistrement avec cet ID utilisateur a déjà été créé, il sera mis à jour. Nous créons ensuite un message structuré et l'envoyons à l'utilisateur.
En plus du texte, la plate-forme Messenger vous permet de renvoyer des images, des vidéos, des audio, des fichiers et des messages structurés. Les messages structurés sont des modèles qui prennent en charge différents cas d'utilisation. Les modèles de bouton vous permettent d'envoyer du texte et des boutons. Les modèles universels vous permettent de définir des images, des titres, des sous-titres et des boutons. Dans notre application, nous utilisons des modèles universels.
Modifiez la fonction ProcessPostback () comme indiqué ci-dessous.
<code>$ mkdir spbot $ cd spbot $ npm init</code>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!