Consulting, services, computer engineering. Implementation of technology solutions and support for businesses.

User Rating: 5 / 5

Star ActiveStar ActiveStar ActiveStar ActiveStar Active
 

Développement d'applications mobiles android bots conference chez Le Wagon 3

Merci Stéphanie, Sébastien, Sébastien Saunier, Edouard Foussier et au sponsor Le Wagon de nous accueillir dans leur repère de développeurs d'applications au 16 Villa Gaudelet, 75011 PARIS.

 

 

Suite de l'épisode 2 où l'on a créé la dernière un fois un bot Facebook-Twitter que je vous invite à relire. Ou depuis l'épisode 1 ici.

 

Encore un "café-philo" qui parle de développement d'applications mobiles android javascript bots avec:

- Florian Barbato, Web developer @ hellocasa.fr & founder @ Traverse chatbot

- Pierre-Edouard Lieb, Partnerships Manager @ Recast.Ai 
Willem Browne, Founder @EpicBots

 

Cet article permet aux absents de suivre ce dont nous on avons parlé, ça fait de la pub aux partenaires, pour moi de l'A/B testing SEO temps réel. Que du win-win pour tout le monde!

 

Nous sommes toujours aussi accueillis dans une grande salle. 1 énorme écran pour projeter les slides. Et il y a un excellent Wi-fi guest. On vient me dire bonjour, on m'offre une bière de la "volcelest", on me la décapsule, j'adore, ça commence bien :-)

Le Wagon, on ne présente plus cette école de développement très connue dans le milieu

  

Cest la 3eme édition de cette conference chatbot, on va faire du NLP, natural language processing. Les 2 premières séances on a créé un chatbot sympa, et là on va faire du LNP.

De quoi a-t-on besoin pour faire un bot? De 5 couches:

 

Les channels

email

slack

telegram

facebook

 

2eme couche, LE NLP, traitement

Recast AI

 

3eme couche

Call à l'API

 

4eme couche, le hosting

Heroku, AWS, Azure, localhost...

 

5eme couche, les analytics

Pour analyser tout ça, faire des statistiques

analytics nlp on voit la diversité sémantique de chaque intent

On peut voir les intents qui sont appelés le plus souvent

 

Une question? Posez-la ici

 

La 2eme couche le NLP

 

intent puis entities: les 2 scopes pour créer un chatbot

Détection des intents: "i want to eat something"  : une personne exprime qu'elle a envie de manger

exemple2: "i need a sushi restaurant for 1pm in Paris"

NER, reconnaissance d'entité nommée: extraction des mots clés qui apportent le contexte : sushi, paris, date

 

On va créer un bot qui va aller chercher les repo githubs qui sont les plus visibles actuellement, les "trends"

 

Il faut creer un compte RECAST

 

Une fois connecté à RECAST, on voit notre profil et la liste des bots que l'on a déja créé.

 

"start with a template" : on crée un bot avec un "talking bot" et commence avec 2 intentions

 

On a maintenant le bot créé sur RecastAI avec une vingtaine d'intentions qui répertorie les intentions les plus récurentes: "bonjour, ça va" ...

 

Scope du bot: "bonjour, quels sont les dépots repositories sur github qui ont le plus d'étoiles sur Github"

 

On crée l'intention

"add an expression":

On donne des expressions pour exprimer cette intention: "i want most stars repositories in swift "

Voilà, on a créé notre 1ere expression.

Il y a plusieurs entités . Par défaut, 30 codes entities sont déja là: location, emails, sons, volumes, distances, déja créées.

Ce qui nous intérésse, c'est "swift" un programmng langage. On le surligne et on clique sur "programming language"

 

On crée une 2eme expression:

"Get me the most starts repositories in javascript in github"

 

Il vaut mieux faire 10 phases minimum pour un bot d'entreprise. Au fur et à mesure des tags, la plateforme va apprendre ce qu'est un programming language.

Une 3eme expression:

"Get me the most starts repositories in java in github"

 

 

Et là la plateforme reconnait Java comme un programming langage: elel apprend en même temps ce qu'est un programming language.

 

 

Une 4eme expression:

"Get me the most starts repositories in C++in github"

 

Je rappelle qu'on va demander le plus de dépots avec des étoiles et avec le plus de forks aussi. On tag "stars" avec "star" pour que Recast analyse les entitées pour les classifier.

On va spécifier que "star" et "fork" sont des entités séparées.

 

 

developpement applications mobiles bot recast ai

 

On a une petite bulle qui nous permet des tester nos intentions

 

Une feature sympa: "les gazettes" qui sont des dictionnaires d'entités pour donner des synonymes. On va la remplir avec les langages utilisés sur github.

 

Astuce: le site http://githut.info nous donne tous les langages les plus utilisés sur github: on peut les copier-coller pour faire des intents.

 

githut top langages developpement

 

Tiens, comme par hasard, Javascript est premier au classement général

 

La gazette est comme un tableau que l'on peut fermer ou laisser ouvert en fonction des types que l'on connait ou pas. Exemple, si on remplit les stations de métros de Paris.

 

 Nouvelle intention:

"Get the most forks repositories in Python"

Python est automatiquement tagé car on a tagué la gazette avec tous les langages de programmation, super!

 

Dans la gazette, on rajoute tous les "programming langages" pour aider à la classification

 

 Nouvelle intention:

"Get the most forks repositories in C#"

 etc...

 

On va rajouter une nouvelle intention:

"show langages" pour permettre au client de montrer quelques langages de programmation

expression : "show me a list of some programming langages"

 

Pensez à bien mettre des structures sémantiques différentes pour rendre le bot encore plus intelligent.

On reteste dans la console pour vérifier que l'on n'a rien cassé dans les intentions précédantes en rajoutant l'expression.

 

Une question? Posez-la ici

 

On va dans le builder pour construire l'arbre

 

"launch the builder"

La premiere intention: "greetings" que l'on a tout en bas de la liste. On déplace cette action dans l'espace, on va l'éditer: on clique sur le petit crayon à gauche.

Si l'utilisateur dit "bonjour" par exemple on donne une réponse automatique:

"helle i'm the github bot and i can help you to get the most stars and forks repositories"

On peut même créer plusieurs "bonjours" et prendre un réponse au hasard

2me action que l'on va ajouter:

"most stars"

"most forks"

"show language"

en déplacant les réctangles.

 

developpement d applications mobiles android bots recastai builder

 

 

On les relie entre elles avec les liens verts et rouges : pour faire les liens, on clique sur le petit arc de cercle sur la gauche

Maintenant qu'on a ajouté toutes ces actions, on va les éditer

"Flotting intents" = intents qui ne dépendant pas de l'arbre

 

Ajout d'une "notion" = entité pour valider l'action courante. "add notion" .

Pour valider l'action "most stars" on a besoin d'un "programming language"

Si on ajouts plusieurs notions, ça fait des "ou".

Pour valider l'action, on a besoin d'un langage de programmation .

 

Your bot reply :"i want to know the programming langate"

Si le bot ne comprend pas, on ajoute la réponse "sorry i don't understand your answer"

On peut tester le bot dans le builder en temps réel, sympa la plate-forme.

 

On a une mémoire par conversation

 

Une question? Posez-la ici

 

Développement d'applications mobiles android bots : insertion dans Facebook

 

Dans l'onglet "run" on va connecter l'onglet à messenger

 

On revient sur notre page Facebook (voir épisode 2)

 

Onglet "run" bot connectero, "messenger" , puis + create a page, follow this link, donner un nom à la page

 

Allez ensuite sur https://developers.facebook.com

 

Une question? Posez-la ici

 

Une fois loggué "add a new app" si on n'a pas déja créé l'app

 

A gauche, on ajoute "messenger" "get started" ; On choisit sur quelle page brancher le bot, et on voit le page access token généré, on le copie-colle, puis on revient dans RECASTAI et on le colle dans le "page access token" , Idem pour le "app-secret" dans le dashboard. Ca génère une callback URL coté Recast que l'on va utiliser pour messenger.

 

Dans le Messenger de https://developers.facebook.com on retourne sur "setup web hooks" et on call le "callback url"

 

On copie le "verify token"

 

Quand messenger va recevoir un de vos messages, il va l'envoyer sur la callbak URL.

 

Ensuite on va sur webhook, et on selectionne la page sur laquelle on veut écouter les éléments: l'app écoute les evenements de cette page sur cette app.

 

On retoure sur messenger, on se connecte avec notre compte facebook et on cherche le bot, on peut envoyer des message, et ça fonctionne!

 

developpement d applications mobiles android bots recastai demo chat

 

Le bot ne comprend pas tout, mais quand je lui dit "hello", il répond, c'est déja ça

 

On peut ensuite ajouter d'autres intentions statiques dans le builder: "est-ce que tu es un bot?", "quelle heure est-il? " etc.

 

On clone le dépot:

https://gitlab.com/plieb/chatbot103

 

Petite revue de code du repo:  l'infrastructure de RecastAI est basée sur du javascript avec du NodeJS et des envois de fichiers en JSON.

 

On retourne sur RecastAI, onglet "run" et "bot hosting" on va le selectionner, on voit "current bot webhook" c'est l'instance déployée : le code est généré sur une instance AWS

 

On se connecte sur notre bot Github, et on peut selectionner le repo github associé. "connect my repo". On fork le repo on le clode

Recast va copier le code du dépot github et l'instancier sur AWS.

"monitor your instance" on voit bien les logs qui arrivent, et on voit la dernière phrase que l'on a envoyé, c'est super:

 

developpement applications mobiles bot recastai log

 

On va créer les fichier associés aux 3 intentions "show languages" "most forks" "most starred". Dans le index.js

 

 
const agent = require('superagent-promise')(require('superagent'), Promise)
const formatter = require('../formatter')
const languages = ['Assembly', 'C', 'C++', 'Go', 'Java', 'JavaScript', 'Python', 'Ruby', 'C#', 'Swift',]

export default async function showLanguage(res) {
   
console.log('SHOW LANGUAGE')

   
const replies = []
   
const quickReplies = []
    languages.
forEach((l) => {
        quickReplies.
push({
           
name: l,
           
value: `Top starred repos in ${l}`,
       
})
    })
    replies.
push(formatter.formatQuickReplies(quickReplies, res.reply()))
   
return replies
}

 

 src/actions/most-starred...

 

/* trending-stars */
const agent = require('superagent-promise')(require('superagent'), Promise)
const formatter = require('../formatter')

export default async function trendingStars(res) {
   
console.log('TRENDING STARS')

   
const replies = []
   
const cardsReplies = []
   
const language = res.getMemory('language')
   
console.log('======================================')
   
console.log(language)
   
console.log('======================================')
    replies.
push(formatter.formatMsg(res.reply()))
   
const response = await agent('GET', `https://api.github.com/search/repositories?q=language:${language.value}&sort=stars&order=desc`)

   
console.log('======================================')
   
console.log(response)
   
console.log('======================================')
   
const repos = response.body.items.slice(0, 10)
   
console.log('======================================')
   
console.log(repos)
   
console.log('======================================')
    repos.
forEach((rep) => {
        cardsReplies.
push({
           
name: rep.name,
           
picture: rep.owner.avatar_url,
           
link: rep.html_url,
       
})
    })
    replies.
push(formatter.formatCardsReplies(cardsReplies))
   
return replies
}

    

 

on ajoute les index.js et show-languages.js dans notre repositories, on les commit et on les push

replies = await actions[currentAction].default(res,payload)

 

 On a linke le repository github à recast. On a modifié le code, on l'a pushé et déployé sur rescast

automatiquement quand on fait un push, ca deploy sur l'infra recast

 on récupère la réponse à chaque fois avec un const response = await agent('GET','https://api.github.com/search..."

 

 

Une question? Posez-la ici

 

Résumé du flot pour construire un bot:

use case

création des intentions sur le service (Recast)

Enrichir les expressions, tagguer, acceder au builder

ajouter les réponses associés si elles sont statiques

on connecte le bot à messager

on teste

Sur les intentions si besoin d'un overide, on connecte le repository on deploy

dans l'index.js, on regarde si l'action existe dans le tableau, si elle n'éxiste pas, on appelel la réponse associée au builder.

 

Plein de tutoriaux sont sur https://blog.recast.ai voir le pokebot ou le starwarsbot en JS...

 

 

Développement d'applications mobiles android bots chatbots? Besoin d'aide en javascript?

Remplissez ce formulaire:

/* trending-stars */
const agent = require('superagent-promise')(require('superagent'), Promise)
const formatter = require('../formatter')

export default async function trendingStars(res) {
   
console.log('TRENDING STARS')

   
const replies = []
   
const cardsReplies = []
   
const language = res.getMemory('language')
   
console.log('======================================')
   
console.log(language)
   
console.log('======================================')
    replies.
push(formatter.formatMsg(res.reply()))
   
const response = await agent('GET', `https://api.github.com/search/repositories?q=language:${language.value}&sort=stars&order=desc`)


   
console.log('======================================')
   
console.log(response)
   
console.log('======================================')
   
const repos = response.body.items.slice(0, 10)
   
console.log('======================================')
   
console.log(repos)
   
console.log('======================================')
    repos.
forEach((rep) => {
        cardsReplies.
push({
           
name: rep.name,
           
picture: rep.owner.avatar_url,
           
link: rep.html_url,
       
})
    })
    replies.
push(formatter.formatCardsReplies(cardsReplies))
   
return replies