Aventure dans le Physical Web avec des cartes ESP32, Orange Pi Zero Plus 2 H5, TI CC2640R2 et le Chatbot vocal FranceConnect en Progressive Web App …
Je pars d’un nouveau design encore une fois :
et je commence par configurer ma carte ESP32 :
à l’aide du framework Mongoose OS disponible sous Apache License Version 2.0. Il prend en charge les microcontrôleurs connectés de faible puissance tels que: ESP32, ESP8266, TI CC3200, TI CC3220, STM32 …
Je me base sur un dépôt github existant de la société Cesanta derrière le framework Mongoose OS :
et je paramètre le fichier YAML mos.yml :
Comme on peut le voir il va charger les sources de mon chatbot dédié à FranceConnect et l’exposer via un serveur web embarqué. Build et flash de la carte ESP32 via la ligne de commande :
La carte est parametrée pour se connecter au WiFi local :
La carte a son adresse et expose le chatbot vocal via son serveur web embarqué :
et je peux vérifier localement que le chatbot vocal répond bien :
Ce chatbot vocal est sous la forme d’une Progressive Web App en lien avec des API cognitives extérieures :
Rappel sur les anciens articles à ce sujet :
et en mode autonome, la carte ESP32 reste accessible et contrôlable via un tableau de bord offert par Mongoose OS :
Je vois donc le device en ligne :
avec des infos et en particulier les logs …
que je peux récupérer en JSON via l’API REST du tableau de bord :
Dès lors, je vais créer sur la carte Orange Pi Zero Plus 2 H5 qui est en ARMv8 64 Bits (contrairement à ses petites soeurs Orange Pi Zero en ARMv7 32 Bits), un service de reverse proxy en HTTPS vers le serveur web embarqué de la carte ESP32 … Rappel des caractéristiques techniques de cette carte :
Avec là encore l’utilisation d’Armbian (en version Debian 9 Stretch).
Je crée des certifcats auto-signés localement que je vais coupler à un programme nommé simplement Reverse Proxy via Node.js :
Je crée ce certificat auto-signé en utilisant une adresse en Wildcard DNS pour simplifier la reconnaissance de ce dernier sur un navigateur web :
et je lance la commande pour le reverse proxy :
via un fichier de configuration :
et je peux voir que localement avec ce reverse proxy en HTTPS, le chatbot répond (l’utilisation d’un certificat SSL est important car le chatbot est en fait sous la forme d’une Progressive Web App ou PWA) :
Il en me reste plus enfin qu’à utiliser la carte TI CC2640R2 spécialisée dans le bluetooth pour me lancer dans ce test du Physical Web. Rappel, en automne 2014, Google annonçait la création du Physical web, un projet open source permettant à tous les objets connectés de communiquer avec un smartphone :
Cette carte va en fait être utilisée comme un Beacon propageant en broadcast des trames Eddystone-URL (trames d’adresse URL). Afin de simplifier le travail des développeurs, Google a proposé deux API associées à Eddystone. L’API Nearby est conçue pour faciliter la recherche par les applications des balises à proximité. L’API Proximity Beacon permet aux développeurs d’associer à des balises des informations sémantiques de localisation et des données, stockées dans le Cloud :
Pour configurer cette carte, j’utilise les outils de développement en ligne de Texas Instrument :
par le biais de son agent local qui permet de faire la liaison entre la carte et mon navigateur web :
Les sources du Beacon sont alors chargées dans l’IDE en ligne :
Je créé en amont le raccourci de l’URL du reverse proxy emis par la carte Orange Pi Zero Plus 2 :
et je modifie les sources pour l’inclure :
je n’ai plus qu’à lancer le “Build and Flash” pour charger cette appli dans la carte :
Je vois alors via une application dédiée au scan des Beacons que mon URL est bien propagée localement :
Ce qui induit une notification sur le smartphone invitant à ouvrir cet URL qui cache en fait une Progressive Web App :
et un lien est généré dans l’écran d’accueil du smartphone :
Si je n’ai pas envie d’utiliser un certificat auto-signé afin de proposer à l’extérieur ce chatbol vocal en PWA, il est possible d’utiliser par exemple le service localtunnel qui me fournira automatique un endpoint en HTTPS :
Il s’installe sur la carte Orange Pi Zero Plus 2 avec npm. Je repars avec un reverse proxy sur le port local HTTP 8080 :
et je lance localtunnel qui me fournit l’endpoint en HTTPS :
Le chatbot qui tourne localement sur la carte ESP32 devient accessible en externe :
et via l’extension Lighthouse, je peux récupérer les scores des tests pour cette PWA qui sont raisonnables avec cette petite connexion WiFi :
Même si j’avais auparavant un meilleur score :
Avec le Physical Web, les navigateurs passent à l’ère des objets connectés tout en s’affranchissant de l’installation via des magasins en ligne …
A suivre !
