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 …

Image for post
Image for post

Je pars d’un nouveau design encore une fois :

Image for post
Image for post

et je commence par configurer ma carte ESP32 :

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

à 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 …

Image for post
Image for post

Je me base sur un dépôt github existant de la société Cesanta derrière le framework Mongoose OS :

Image for post
Image for post

et je paramètre le fichier YAML mos.yml :

Image for post
Image for post

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 :

Image for post
Image for post

La carte est parametrée pour se connecter au WiFi local :

Image for post
Image for post

La carte a son adresse et expose le chatbot vocal via son serveur web embarqué :

Image for post
Image for post

et je peux vérifier localement que le chatbot vocal répond bien :

Image for post
Image for post

Ce chatbot vocal est sous la forme d’une Progressive Web App en lien avec des API cognitives extérieures :

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

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 :

Image for post
Image for post

Je vois donc le device en ligne :

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

avec des infos et en particulier les logs …

Image for post
Image for post

que je peux récupérer en JSON via l’API REST du tableau de bord :

Image for post
Image for post

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 :

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

Avec là encore l’utilisation d’Armbian (en version Debian 9 Stretch).

Image for post
Image for post

Je crée des certifcats auto-signés localement que je vais coupler à un programme nommé simplement Reverse Proxy via Node.js :

Image for post
Image for post

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 :

Image for post
Image for post

et je lance la commande pour le reverse proxy :

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

via un fichier de configuration :

Image for post
Image for post

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

Image for post
Image for post

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 :

Image for post
Image for post

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 :

Image for post
Image for post

Pour configurer cette carte, j’utilise les outils de développement en ligne de Texas Instrument :

Image for post
Image for post

par le biais de son agent local qui permet de faire la liaison entre la carte et mon navigateur web :

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

Les sources du Beacon sont alors chargées dans l’IDE en ligne :

Image for post
Image for post

Je créé en amont le raccourci de l’URL du reverse proxy emis par la carte Orange Pi Zero Plus 2 :

Image for post
Image for post

et je modifie les sources pour l’inclure :

Image for post
Image for post

je n’ai plus qu’à lancer le “Build and Flash” pour charger cette appli dans la carte :

Image for post
Image for post

Je vois alors via une application dédiée au scan des Beacons que mon URL est bien propagée localement :

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

Ce qui induit une notification sur le smartphone invitant à ouvrir cet URL qui cache en fait une Progressive Web App :

Image for post
Image for post

et un lien est généré dans l’écran d’accueil du smartphone :

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

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 :

Image for post
Image for post

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 :

Image for post
Image for post

et je lance localtunnel qui me fournit l’endpoint en HTTPS :

Image for post
Image for post

Le chatbot qui tourne localement sur la carte ESP32 devient accessible en externe :

Image for post
Image for post

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 :

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

Même si j’avais auparavant un meilleur score :

Image for post
Image for post

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 …

Image for post
Image for post

A suivre !

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