Développement d'applications programmer un chatbot en NodeJS RecastAI

Ratio: 5 / 5

Detalles: Creado: Miércoles, 10 Mayo 2017 17:20; Escrito por ConsultingIT

Développement d'applications programmer un chatbot en NodeJS RecastAI

D'habitude je développe des price scraping bots des bots de scrapping , pour récupérer des prix chez vente privée par exemple et là on me propose de créer un chatsbot! Super!

La dernière fois, on parlait de développement d'applications mobiles android bots chatbots à la conférence chez le wagon

(la 3eme partie est consultable ici NodeJS RecastAI chatbot développement d'applications 3eme partie )

developpement d applications programmer un chatbot nodejs recastai

Voici l'épisode 2, le retour! Mais cette fois, on code.

Le challenge pour moi: regarder et écouter la démo, et en même temps, coder, et rédiger l'article, tout ça en même temps et en une heure! Ca va A/B tester!

Ensuite, c'est de montrer que l'on peut créer un bot simple from scratch très simplement.

Willem fondateur d'epic bots prend la parole pour animer la soirée. Merci au Wagon à l'école de code de nous accueillir.

Florian qui vient aussi du wagon, Pierre Edouard, de chez Recast.AI. La conférence s'annonce sympa.

Sur la page facebook chatbots 102 contient un lien vers le repo

ici https://github.com/fbsamples/messenger-platform-samples le bot basique ou ici chatbot nodejs javascript

je clone le repo de facebook

https://github.com/willooz

Une question? Posez-la ici

But de la conférence, c'est de créer un bot twitter dans messenger

Il me faut une page facebook, je la crée:

Create page, brande or product page

app page / tweetbotrecast

voilà

https://www.facebook.com/Tweetbotmessenger-1640554089305680/

Je customize le username de la page en "Tweetbotmessenger" en voilà un nom sympa.

Je cree une app sur facebook:

https://developers.facebook.com/

create une nouvelle app facebook Tweetbotmessenger

Pour que la page reste active, il faut ajouter une photo

aller dans about, mettre un descriptif

Je copie colle le app secret dans mon repertoire:

\messenger-platform-samples-master\node\config\default.json

{
    "appSecret": "xxxxxxxxxx",
    "pageAccessToken": "",
    "validationToken": "",
    "serverURL": ""
}

Une question? Posez-la ici

Dans

\downloads\ngrok-stable-windows-amd64

Je copie l'url que ngrok m'a donné dans le fichier de config

ngrok http 5000

Voici l'url à mettre dans la config?

https://e84da81f.ngrok.io

dans mon fichier json

"serverURL":https://e84da81f.ngrok.io""
}

Facebook: ajouter un produit:

Faceook: add product/ messenger/get started

Je lie mon app et ma page, j'opbiens un app access token que je colle dans mon fichier de conf

On doit avoir les 4 tokens dans le fichier json qui doit ressembler à ceci:

{
    "appSecret": "xxxxxx",
    "pageAccessToken": "yyyyyyy",
    "validationToken": "",
    "serverURL":https://e84da81f.ngrok.io""
}

Une question? Posez-la ici

Quand on va recevoir un message sur messenger, il faut que facebook sache oùenvoyer le message. Le serveur sera notre localhost (serveur

Dans mon cmd, je vais installer tous les modules node dont j'ai besoin:

NPM install

ca va chercher les dependances dans le package.json et ca va descendre toutes les librairies dont on a besoin, soit:

H:\messenger-platform-samples-master\node>npm install
ejs@2.5.6 node_modules\ejs

Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo..1 node_modules\body-parser
├── content-type@1.0.2
├── bytes@2.4.0
├── depd@1.1.0
├── qs@6.4.0
├── on-finished@2.3.0 (ee-first@1.1.1)
├── raw-body@2.2.0 (unpipe@1.0.0)
├── http-errors@1.6.1 (setprototypeof@1.0.3, statuses@1.3.1, inherits@2.0.3)
├── debug@2.6.1 (ms@0.7.2)
├── Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.
└── Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo. (media-typer@0.3.0, Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.)

Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo..2 node_modules\express
├── escape-html@1.0.3
├── methods@1.1.2
├── encodeurl@1.0.1
├── content-type@1.0.2
├── range-parser@1.2.0
├── parseurl@1.3.1
├── setprototypeof@1.0.3
├── array-flatten@1.1.1
├── utils-merge@1.0.0
├── merge-descriptors@1.0.1
├── cookie-signature@1.0.6
├── fresh@0.5.0
├── etag@1.8.0
├── path-to-regexp@0.1.7
├── content-disposition@0.5.2
├── cookie@0.3.1
├── Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo..1
├── vary@1.1.1
├── statuses@1.3.1
├── depd@1.1.0
├── on-finished@2.3.0 (ee-first@1.1.1)
├── qs@6.4.0
├── debug@2.6.1 (ms@0.7.2)
├── proxy-addr@1.1.4 (forwarded@0.1.0, ipaddr.js@1.3.0)
├── Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo. (media-typer@0.3.0, Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.)
├── Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo..1 (destroy@1.0.4, ms@0.7.2, mime@1.3.4, http-errors@1.6.1)
├── accepts@1.3.3 (negotiator@0.6.1, Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.)
└── finalhandler@1.0.2 (unpipe@1.0.0, debug@2.6.4)

Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo..1 node_modules\config
├── os-homedir@1.0.2
└── json5@0.4.0

Une question? Posez-la ici

Lancer

"npm start"

webhook ok

Sur Facebook, ajouter maintenant un webhook pour que Facebook sache qu'on dialogue avec notre bot

dans app /Webhooks faire setup Webhooks

cocher messages et messaging_postbacks

dans la callback url, je colle https://43d252b6.ngrok.io

et le password qui va bien

Sur facebook, aller creer un bouton:

https://www.facebook.com/Tweetbotmessenger/

cliquer sur le "add button"

Une question? Posez-la ici

et choisir

"get in touch" send message"

survoler le buton et choisir "test button"

la fenetre avec le bot s'ouvre

Voilà, je peux discuter avec le bot

Avec certains mots clés, le bot renvoie des choses

Je bascule dans app.js pour voir comment fonctionne le bot et faire une revue de code

Je vois me webhook

J'ai le fonction principale qui capte tous les messages avec les evenements: des notifications de messages livrés, notifications de messages lus, etc...

Je continue à descendre, je vois la fonction coeur du bot "receivedMessage" , c'est là que tous les messages envoyés au bot arrivent.

Ensuite, je vois un "si le message est textuel", j'ai un switch, gif, audio,

On peut tape ces mots clés pour qu'il nous en renvoie d'autres

Je rajoute une nouvelle variable "greeting" qu ireconnait tous les bonjours possibles (hello, salut, hi, bonjour, hola, howdy, hey, yo...)

Je reponds avec un "hello there" au lieu de repeter avec un echo.

le bot repete

Le bot perroquet!

Voilà mon bot est opérationnel! Pour l'instant il n'a pas d'intelligence artificielle, il répète juste ce qu'on lui dit, c'est rigolo

Le serveur local et l'API Facebook "discutent" bien

Une question? Posez-la ici

Je peux récupérer les données utilisateur de facebook pour que le bot puisse dire bonjour "prénom"

Ajoute de l'intelligence artificielle pour récupérer des tweets

Maintenant on peut se connecter à un service exterieur pour que le bot puisse rendre un service: donner des tweets en images.

On va chercher la data chez twitter

https://dev/twitter.com

je vais sur mon app, j'en choisis une

dans keys et access token, je récupère la clé, l'API key et le secret

Ensuite dans la doc d'authentification twitter, je construis le bearer token avec tous mes elements

On copie tout dans le default.json

J'ajoute dans mon app un module npm install --save twitter

Ce module me donne accès à du code spécifique twitter

Dans mon app.js, je crée la variable TwitterClient qui est ma porte vers twitter

Alons maintenant chercher les tweets

Dans ma fonction "receivedmessages" je veux identifier que l'on recoit des tweets, donc des hashtags quoi, le pattern est une expression régulière

var hashtag = new RegExp(/^#\w+/i);

Et je définis ma fonciton getTweets qui va chercher mes tweets

Je filtre les tweets qui ont une illustration et je les range sous forme de carte

Voilà, on peut consulter twitter dans messengers! Merci le bot

2eme partie, nouvelle fonctionnalité: réponse à une question après traitement

Si jamais l'utilisateur écrit "trends" je vais chercher les "trends" et les afficher.

Il fa chercher le strends et affiche les tweets associés, super!

Une question? Posez-la ici

Derniere partie ajoute de l'intelligence avec RecastAI

Se connecter sur Recast

Creer bot recast : + new bot

default bot

onglet "train" dans lequel je vais trouver toutes mes intents. Par defaut, Recast nous donne une intent greeting et une intent goodbye.

Dans l'intent greetings, je vois comment le moteur d'intelligence artificielle de Recast me renvoie les réponse à mes "bonjour"

Copie du request access token dans mon fichier de configuration json comme d'habitude

J'installe le module recast maintenant sous node NPM install --save recastai

J'instancie mon client recast

Je peux rajouter les questions types que me posent mes clients, du genre

"comment on configure le bot?"

"comment on ajoute un intent?"

"quand est-ce qu'on mange?..."

...

Bref, toutes les questions que les clients sont succeptibles de poser.

Une question? Posez-la ici

Pour mettre le bot en production, au lieu d'utiliser ngrok, on peut le pousser dans le Cloud, par exemple sur Heroku avec un vrai serveur web (hebergement du code github). L'application en node va ecouter sur cette url/webhook. On peut choisir quel repo github va etre synchronisé.

Par contre, attention, il faut donner les droits "testeur ou developpeur", ou passer par la phase de validation de Facebook qui validera notre app.

Avec des plates formes comme Chatfuel ou Recast, le oauth configure tout automatiquement