Conseils, services, ingénierie en informatique. Mise en place de solutions technologiques, et support, pour les entreprises.

Note utilisateur: 5 / 5

Etoiles activesEtoiles activesEtoiles activesEtoiles activesEtoiles actives
 

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

et

 

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

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"

 

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"

 

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

 

 

l application facebook discute avec notre serveur local

 

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