Chatbot vocal de test utilisant Web Speech API et sous la forme d’une Progressive Web App …

Il y a eu une déferlante d’articles depuis le début de l’année sur les Progressive Web Apps (PWA) créées par Google en 2015 et supportés notamment par Chrome et certains autres navigateurs … Ici je reprends le chatbot vocal créé précedemment mais en l’intégrant cette fois-çi dans un cadre mobile et en me basant sur ce dépôt github .

Ce qui donne le résultat suivant : https://vimeo.com/235194503

Image for post
Image for post

Avec le dépôt Github constitué pour le cas FranceConnect :

Pour cela utilisation des PWA qui offrent certains avantages vis à vis des applications dites “natives” :

Image for post
Image for post
Image for post
Image for post

Je pars d’une appli web en contenu statique (HTML + Javascript) qui va être transformée en PWA via ManifoldJS :

Image for post
Image for post

avec l’insertion stratégique du Service Worker et du Manifest dans l’application :

Image for post
Image for post

et le workflow suivant :

Image for post
Image for post

Pour publier ma PWA je vais utiliser le service gratuit d’hosting de contenu statique offert par Firebase (qui en backend utilise simplement le stockage objet fourni par Google Cloud Platform et sur le même principe que la publication de contenu statique dans AWS S3) :

Image for post
Image for post
Image for post
Image for post

J’obtiens l’adresse de publication avec Firebase et le tout est lié au projet dans API.ai. Je peux tester mon éligibilité comme PWA avec l’extension Lighthouse de Google avec Chrome avec un excellent score :

Mais si j’ai envie de reproduire ce déploiement sur mes VMs, je peux utiliser notamment Caddy (car ce serveur HTTP/2 va me permettre d’obtenir automatiquement via Let’s Encrypt des certificats SSL et une liaison HTTPS indispensable au bon fonctionnement de la PWA) :

Image for post
Image for post

Pour cela je pars d’une micro-instance dans Outscale (qui correspond à la moitié du format gratuit offert chez les principaux cloud providers) en 1 vCPU et 0,5 Go RAM :

Image for post
Image for post

Je commence par installer PM2 de l’entreprise française Keymetrics qui va me fournir du clustering pour mon application localement dans cette instance :

Image for post
Image for post

et je lance 4 processes en arrière fond en mode cluster avec PM2 et l’utilitaire Node.js http-server :

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

J’ai un endpoint interne qui émet sur le port TCP 8888 et le tout ne consomme pas plus de 256 Mo :

Image for post
Image for post

J’installe et lance Caddy avec son fichier de configuration Caddyfile qui me permet d’obtenir mon endpoint en HTTPS via Let’s Encrypt et de manière totalement automatique :

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Ma PWA est disponible :

Image for post
Image for post

et un certificat SSL valide :

Image for post
Image for post
Image for post
Image for post

et le score fourni par l’extension Lighthouse est encore très bon :

Image for post
Image for post

Mais je peux également partir du nouveau cluster Azure Service Fabric dans Linux et qui prend en charge les fichiers de configuration de Docker-Compose. J’en ai un actif avec des noeuds Ubuntu 16.04 LTS :

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Je pars donc d’un fichier docker-compose.yml pour déployer ma PWA dans le cluster Azure Service Fabric via les CLI python fournis :

Image for post
Image for post

Une fois déployée la PWA apparaît en exécution dans le dashboard :

Image for post
Image for post
Image for post
Image for post

mais sur le port 80 (ce qui pose des problèmes dans Chrome) :

Je profite donc de la nouvelle gamme B-Series (gamme ulta low-cost) d’instances dans Azure sortie il y a à peine 10 jours pour réutiliser Caddy (Azure Application Gateway voire Azure Traffic Manager aurait pu faire le job) :

Image for post
Image for post
Image for post
Image for post

Je recrée un nouveau fichier Caddyfile adapté aux bons endpoints et je lance caddy dans cette micro instance Ubuntu :

Image for post
Image for post

avec une consommation aux alentours de 216 Mo comme précedemment :

Image for post
Image for post

Ma PWA est disponible :

Image for post
Image for post

avec encore un bon score avec Lighthouse :

Image for post
Image for post

Il y a déjà une pile de framework qui permettent d’obtenir des templates PWA prêt à l’emploi : à suivre donc comme évolution (sachant que la prochaine étape ce sont les Instant Apps) …

PS: Dans le contexte du déménagement de la tour Mirabeau, le SG des Ministères sociaux avait annoncé qu’une distance de parcours de 30 à 40 minutes maximum depuis le site de Duquesne devait être respecté : test avec l’API Navitia (issue d’une sous filiale digitale de la SNCF et alimentée par les datasets notamment du STIF hébergés dans … OpenDataSoft encore une fois). Récupération d’un token et lancement de la plateforme Node.js Navitia Playground pour générer des isochrones =>

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

avec les résultats suivants (qui devraient mettre le site de Bois-Colombe hors jeu) :

Image for post
Image for post
Image for post
Image for post

Vérification avec un nouveau Chatbot géographique dédié au calcul d’itinéraire (nommé HERE) dans Messenger :

Image for post
Image for post
Image for post
Image for post

A suivre ! …

Originally published at telegra.ph on September 24, 2017.

Above the clouds, the sky is always blue ...

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store