Création d'un simple messager Facebook AI Bot avec en - Blog GirlieMac
Tomomi Imura
Un avocat Web ouvert et ingénieur frontal, qui aime tout mobile, et écrit sur HTML5, CSS, JS, UX, événements tech, gadgets, etc. Elle a involontairement 15min de la renommée en créant les chats d'état HTTP. En outre, les opinions exprimées ici sont uniquement ses propres et ne reflètent pas les vues ou les opinions de mon employeur.
Hé, bonne et heureuse année.
des applications écrit avec les services ne sont pas difficiles, mais il faut un certain temps la lecture de la documentation pour savoir comment les mettre en place, donc je voudrais partager mes expériences en tant que ce tutoriel, nous espérons que vous pouvez écrire votre bot en moins de temps.
Il y a deux grandes parties:
- Mettre en place un Facebook Messenger App et l'écriture du webhook
- En utilisant le domaine API.ai Small Talk et la création d'un Intentions personnalisés
Mon instruction étape par étape utilise Node.js, donc si vous souhaitez suivre la façon à, faire Node.js est sûr installé sur votre machine.
Le code source (sur la branche tutoriel-01) est sur GitHub.
1. Le développement d'un messager Facebook App
Avant de configurer votre application Messenger sur Facebook Developer, nous allons créer un webhook strict minimum avec Node.js pour commencer.
Configuration d'un webhook temporaire Endpoint avec ngrok
Je choisis ngrok à une sert localhost à une URL publique parce qu'il est simple et facile à utiliser. Cette URL sera utilisée comme point final Messenger webhook au cours du développement, de sorte que vous n'avez pas besoin de déployer sur un serveur jusqu'à ce que l'application soit terminée.
Télécharger ngrok. l'installer sur votre machine, et courir avec un numéro de port, nous allons utiliser 5000:
L'écriture d'un webhook avec express.js
Créez votre répertoire d'applications et configurer votre application Node.js:
Une fois que vous configurez votre application, installez Express et corps analyseur:
Créons un webhook.js. et instancier express et écouter le serveur sur le port 5000, ou quel que soit le port que vous avez défini avec ngrok:
Maintenant, créez HTTP GET et POST méthode de la route pour gérer la commande suivante:
Voici comment vous recevez des messages à votre webhook via Facebook Messenger- Toutes les demandes doivent venir par la poste. tandis que la route GET est utilisé au moment de configurer votre application Facebook.
Où vous voyez le tuxedo_cat. il suffit d'utiliser une chaîne arbitraire. Vous aurez besoin plus tard lors de la configuration de votre application Facebook.
Exécutez le code, et passez à l'étape suivante.
Configuration d'une application Facebook
Vous avez besoin d'une page Facebook pour configurer votre robot de chat. Créer un à partir facebook.com/pages/create. Choisissez une catégorie et sélectionnez une sous-catégorie dans le menu déroulant et remplissez le nécessaire déposé. Cliquez ensuite sur Commencer.
Donnez-lui un nom et cliquez sur le bouton, puis remplissez les informations requises:
Une fois que votre application est créée, suivez les étapes pour configurer ou sauter à votre tableau de bord.
Cliquez sur Ajouter un produit dans le menu de gauche, puis choisissez Messenger. Cliquez pour commencer.
Lors de la génération de jeton. (1) choisir la page que vous venez de créer dans le menu déroulant, et il va générer un jeton (2) que vous devrez inclure dans votre code de noeud.
Puis, au Webhooks. (3) cliquez sur le bouton Configuration Webhooks:
Dans la boîte de dialogue, remplissez le (1) URL de rappel avec l'URL de votre ngrok, (2) la chaîne aléatoire pour la validation (celui que vous avez spécifié dans votre itinéraire « GET » dans les webhook.js), puis (3) chèque messages .
Rédaction d'un Super Bot Simple Chat
Demande d'installation d'envoyer des messages:
Continuer avec vos webhook.js. implémentons sendMessage () qui répond simplement à l'expéditeur un écho à tester simplement votre bot Messenger:
Où vous voyez le PAGE_ACCESS_TOKEN. utiliser le jeton généré.
Votre entrée est simplement en écho. Ceci est ennuyeux, donc nous allons utiliser API.ai à côté de rendre cette conversation plus intéressante.
2. Utilisation API.ai avec votre Facebook Messenger Bot
API.ai permet aux développeurs d'intégrer votre application avec le système AI avec la parole en texte et le traitement du langage naturel.
Commençons avec API.ai par sigining vers le haut.
Une fois que vous obtenez votre compte, créez un agent. Vous pouvez cliquer sur le bouton qui dit CREATE AGENT ou dans le menu.
Donnez-lui un nom et remplir les informations requises:
Assurez-vous de cliquer sur le bouton Enregistrer sur le dessus chaque fois que vous apportez des modifications.
Faire « Small Talk » avec votre Messenger Bot
Au lieu d'avoir votre bot simplement vous écho, nous allons lui donner Petite fonction Talk du API.ai. Cela donne à votre bot une capacité d'avoir des conversations simples.
Dans le menu à gauche (si le menu est pas visible, cliquez sur l'icône « du menu Hamburger » en haut à gauche pour ouvrir), cliquez sur Domaines. puis activer le Small Talk.
Une fois activé, cliquez sur Afficher les détails puis activez la Accomplissement afin que vous puissiez utiliser plus tard cette fonctionnalité dans votre application et à personnaliser.
Essayez la console sur le côté de la main droite. Vous pouvez parler ou taper pour tester le domaine Small Talk:
Maintenant, nous allons utiliser cette fonctionnalité dans votre bot. Vous pouvez toujours revenir ici pour personnaliser les conversations.
Utilisation de API.ai avec Node.js
Il est en effet possible d'intégrer API.ai avec Messenger FB sans programmation, cependant, pour le rendre pleinement personnaliser la façon dont vous voulez interagir avec votre application FB, nous allons utiliser le programme de service.
Vous avez besoin de votre clé API API.ai et secret de l'API à utiliser le service avec votre robot. Dans le menu, cliquez sur le « Config » icône pour obtenir votre clé API ( « jeton d'accès client »):
Et revenir à votre webhook.js et initialiser Apiai avec la clé API:
Reportez-vous l'utilisation de son NPM doc. Il est assez simple- vous passez juste un texte à API.ai, et faire quelque chose quand vous obtenez la réponse (l'événement de réponse).
Maintenant, modifions la sendMessage ():
Qu'est-ce que l'échantillon de code ci-dessus est fait essentiellement obtenir l'information (passée en param) envoyé par un utilisateur via Messenger, et de transmettre le contenu du texte à API.ai. Une fois que le API.ai retourne la réponse, l'événement de réponse est déclenchée.
Maintenant, nous allons tester votre bot. Exécutez le code de noeud, et essayez d'envoyer des messages. Si tout fonctionne, vous devriez obtenir des réponses du bot:
Faire le Bot Tell You Météo Condition
Cependant, bien sûr, comme un ingénieur, vous pouvez toujours appeler les API 3ème partie pour ajouter les fonctionnalités par vous-même au lieu d'appuyer sur l'interrupteur et de payer. Donc, nous allons faire de votre bot pour indiquer aux utilisateurs les prévisions météo actuelles avec l'API Carte Météo Ouvrir.
L'objectif est que lorsqu'un utilisateur demande quelque chose comme « Comment est le temps à San Francisco? », Votre robot répondra à la condition météorologique actuelle dans la ville donnée.
Création Météo Intentions
Tout d'abord, de personnaliser les interfaces utilisateur de conversation, vous devez comprendre les concepts clés de API.ai, en particulier les entités et Intentions pour l'instant.
Intentions représentent une correspondance entre ce que l'utilisateur dit et quelles mesures doivent être prises par votre logiciel. Pour que votre bot répondre à l'utilisateur une information météo, vous devez créer un Intentions spécifique.
Dans le menu, allez à Intentions et cliquez sur le bouton CRETAE INTENTIONS:
Donnez-lui un nom, comme weather.city.
Ensuite, créez certains contextes. Entrez une phrase comme: « Comment est la météo à San Francisco? »
Les noms de ville importants ont été fournis déjà si vous n'avez pas besoin de les créer, si vous avez besoin de définir des entités particulières qui n'y figure pas, comme les types de voitures, la nourriture, etc, vous devrez créer manuellement. (Je ne couvre pas comment définir des entités dans cet article cette fois-ci!)
Créer des contextes plus:
Ensuite (1) défiler vers le bas à l'action. et entrez « météo ». Vous avez besoin de ce nom d'action sur votre code de noeud plus tard. Ensuite, (2) à la réponse. entrez une réponse par défaut. En supposant un utilisateur renseignez-vous sur le temps sans spécifier une ville, entrez quelque chose comme « Quelle ville? »
Enregistrez les Intentions, et passez à l'Accomplissement dans le menu. Activez le webhook, et entrez l'URL de ngrok avec un itinéraire, appelons-le / ai et Economie:
En utilisant l'API 3rd Party pour rechercher le temps
Allez ouvrir la carte météo. et inscrivez-vous pour obtenir la clé API. Nous allons utiliser l'API pour récupérer des données météo actuelles pour un emplacement.
Utilisons juste cette API REST avec un nom de ville comme param (aussi, votre clé API et l'unité de température):
Dans votre webhook.js. créer une autre voie de méthode POST / AI. Rappelez-vous le nom de l'action que vous avez spécifié avec la console API.ai plus tôt:
Assurez-vous de revenir est JSON que api.ai va lire ce webhook.
Testons votre bot de Messenger:
Yay, vous avez maintenant votre propre bot Messenger que les discussions et répondre info météo!
Si vous déployez votre robot, assurez-vous de changer vos paramètres d'webhook fois sur Facebook cadre de l'application de développeur et API.ai Accomplissement.
J'espère que vous avez apprécié l'article. Maintenant, vous pouvez adapter vos intentions, ajouter plus de fonctionnalités, et utiliser la fonction de formation pour de meilleurs résultats pour rendre votre robot plus intéressant!
Au fait…
Je travaille actuellement à Nexmo et nous travaillons sur l'API Chat, qui intègre plusieurs applications de chat, y compris Facebook, WeChat, LINE, etc. Donc, si vous avez une entreprise avec des clients de partout dans le monde, en particulier les pays comme la Chine où le Grand Pare-feu empêche les gens d'utiliser Facebook, et si vous souhaitez mettre en place un support client système de chat, vous devez soutenir quelque chose comme WeChat aussi.
L'API Nexmo Chat peut connecter plusieurs applications dans le chat tous ensemble. Il y a également l'API SMS aussi. Je vais écrire sur l'API Chat bientôt sur le blog Nexmo!