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

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

Karim

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


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" :

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



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

et le workflow suivant :



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) :


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) :

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 :



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


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


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


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 :


Ma PWA est disponible :



et un certificat SSL valide :



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



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 :


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 :


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


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) :



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


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

Ma PWA est disponible :


avec encore un bon score avec Lighthouse :



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 =>



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

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


A suivre ! ...










Report Page