Réseau domotique en ESP8266: Début d'un projet avec preact

Pour mon projet domotique, j'ai besoin d'un dashboard. C'est a dire un endroit ou toutes les informations importantes seront accessibles. Comme je compte servir ce dashboard depuis un ESP8266 pour éviter d'installer un raspberry pi juste pour un serveur web, je dois garder une taille de fichiers la plus minimale possible.

Pourquoi preact ?

Le projet sera réalisé en React. Tout d'abord parce que je travaille tous les jours avec depuis 5 ans, et donc c'est la technologie avec laquelle je suis le plus efficace. Mais aussi parce qu'un dashboard c'est bien, mais un dashboard réactif et rapide c'est mieux! Enfin, comme dis dans l'intro, la puissance coté "serveur" sera limitée puisque tout sera hébergé sur un ESP8266. Du coup avoir un affichage 100% coté client est un must dont on ne peux pas se passer !

Toujours pour cette histoire de limiter les besoins en serveur, j'ai choisi Preact. Preact est une version alégée de React (seulement 12% !)

Preact fait 16K, en comparaison React a besoin de 133K, soit 12% seulement, pour les mêmes fonctionnalités

Pourquoi héberger sur un ESP

Je ne vois pas la domotique comme une aide au jour le jour. Je trouve que le controle des lumiéres et autres surprises du genre ne sont rien de plus que des gadgets. Par contre la ou, pour moi, la domotique à sa place, c'est dans les économies d'énergie. Pouvoir surveiller sa maison a longueur de journée est un atout majeur pour réduire notre impact écologique.

En gardant cette vision la, il est difficile de justifier une base domotique écologique, tout en rajoutant l'empreinte énergetique d'un raspberry pi (environ 5W) qui tourne h24 pour se servir du serveur web environ 5 jours par mois?

Partant de la, étant donné qu'on a déjà un réseau wifi en ligne, et des ESP connectés dessus pour les capteurs, on peux plus facilement justifier d'en rajouter juste un pour centraliser le tout !

Passons au code

Création d'un nouveau projet preact

Pour notre application, on va partir d'un starter de create-preact-app (comme create-react-app, mais en preact quoi!)

npm install preact-cli
preact create default dashboard

On va ensuite lancer l'application que l'on viens juste de créer:

cd dashboard
yarn start dev

Et voila! Si on ouvre http://localhost:8080/ on obtient l'application d'exemple:

btVDQ3L

Customisation de l'architecture

Actuellement, notre arborescence contient un dossier src (source), avec des components (sous composants, donc sous parties), des routes (les composants qui définissent les pages), un dossier style (pour le design) et enfin un index qui branche tout ça ensemble.

Notre objectif final est d'avoir un design de ce genre la:

luke-chesser-JKUTrJ4vK00-unsplash

Pour ne pas recoder notre design de zéro, on va utiliser une bibliotheque de composants tout faits: Preact Fluid. On utilisera aussi un moteur de CSS-in-JS: PicoStyle.

L'ajout de ces librairies dans notre projet se fait avec la commande:

yarn add preact-fluid picostyle

Pour notre projet, le dossier composant va contenir nos graphiques et les widgets de notre dashboard. Le dossier route contiendra notre seule page (pour l'instant).

Pour la suite, rendez vous au prochain article !