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 )
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
et
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?
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
Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser..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)
├── Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.
└── Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser. (media-typer@0.3.0, Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.)
Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser..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
├── Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser..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)
├── Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser. (media-typer@0.3.0, Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.)
├── Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser..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, Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.)
└── finalhandler@1.0.2 (unpipe@1.0.0, debug@2.6.4)
Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser..1 node_modules\config
├── os-homedir@1.0.2
└── json5@0.4.0
Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser..0 node_modules\request
├── aws-sign2@0.6.0
├── oauth-sign@0.8.2
├── forever-agent@0.6.1
├── is-typedarray@1.0.0
├── tunnel-agent@0.6.0
├── stringstream@0.0.5
├── Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser..0
├── isstream@0.1.2
├── safe-buffer@5.0.1
├── json-stringify-safe@5.0.1
├── aws4@1.6.0
├── extend@3.0.1
├── performance-now@0.2.0
├── uuid@3.0.1
├── qs@6.4.0
├── combined-stream@1.0.5 (delayed-stream@1.0.0)
├── tough-cookie@2.3.2 (punycode@1.4.1)
├── Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser. (Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser..0)
├── form-data@2.1.4 (asynckit@0.4.0)
├── hawk@3.1.3 (cryptiles@2.0.5, Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser..1, sntp@1.0.9, Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser..3)
├── http-signature@1.1.1 (assert-plus@0.2.0, jsprim@1.4.0, Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser..0)
└── har-validator@4.2.1 (har-schema@1.0.5, Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser..8)
Une question? Posez-la ici
Lancer
"npm start"
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 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
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