ESP8266 (Web Serveur) : développement rapide du code HTML+js avec Node.js et Pug

Accéder aux soldes du Black Friday Amazon Black friday Banggood Black Friday Gearbest
10% de remise supplémentaire* sur les produits domotiques Xiaomi

Kits domotiques, caméras de sécurité, robot aspirateur, purificateur d'air... *Hors produits déjà en promotion

Voir le code promo
39 jours restants

Le développement d’un Serveur Web pour ESP8266 peut s’avérer rapidement fastidieux. En effet, il faut télécharger les fichiers (HTML, js..) à chaque modification pour pouvoir effecter les mises au point. Heureusement, Node.js va nous permettre de développer et mettre au point sur un ordinateur tout le code de la partie Serveur Web avant de la télécharger sur l’ESP8266. Node.js est tellement génial qu’on va pouvoir utiliser directement les templates Pug (article de présentation) et même récupérer des mesures réelles directement sur l’ESP8266 !

Dans ce tutoriel, nous allons voir comment réaliser rapidement une interface HTML qui permettra d’afficher les mesures d’un DHT22 et de piloter le GPIO de l’ESP8266. On pourra également récupérer les données (et les états) sur un ordinateur à l’aide d’un mini serveur Web développé en quelques lignes de code avec Nodejs. Le code comptes du projet est disponible sur GitHub ici

Node.js est un projet Open Source populaire cross-plateforme (indépendant du système). A l’origine conçu pour développer des sites internet, Nodejs est maintenant utilisé pour réaliser des applications pour smartphones et tablettes (Meteorjs, ionicframework, phonegap). Il est possible de “transformer” le site en application. C’est par exemple le cas de l’éditeur de texte Atom développé par GitHub. Et si vous utilisez Node-RED, c’est le moteur de ce projet pour IoT d’IBM. Nous allons en rester là sur Node.js pour cette fois, nous aurons l’occasion de l’utiliser dans de nombreux projets à l’avenir.

Matériel nécessaire pour tester le code

Pour tester le code de ce tutoriel, vous pouvez réaliser rapidement un petit montage à l’aide d’un ESP8266 et d’un sonde de température DHT22.

esp8266 Wemos D1 mini Module ESP8266 ESP-12. Par exemple Wemos D1 Mini
led 3mm Led, optionnel. Pour simuler les commandes sur le GPIO depuis l’interface Web
resistance 220ohms Résistance 220Ω
Broches DHT22 Capteur de température et d’humidité

DHT11 ou DHT22

jumper dupont Jumper Dupont (optionnel)
breadboard Breadboard (optionnel)

Installer Node.js sur mac OS, PC Windows ou Linux

La première chose à faire est donc d’installer Node.js sur votre ordinateur. Avant de vous lancer, le mieux est de vérifier que Node.js n’est pas déjà installé sur votre machine. Si certainement le cas si vous utilisez Raspbian. Ouvrez le Terminal ou PowerShell sous Windows et exécutez cette commande

Si vous n’obtenez aucun résultat, allez sur le site officiel de Nodejs pour récupérer la version qui correspond à votre système. Il est préférable d’installer la version stable (LTS) afin d’éviter les effets de bords de la version en cours de développement.

nodejs download macos windows linux arm

Sur macOS, il est préférable d’installer Node.js à l’aide du gestionnaire de paquets Homebrew (page officielle du projet). Homebrew s’occupe de déclarer les chemins. Il est également plus facile de dés-installer (proprement) Node.js et npm (le gestionnaire de paquet associé) avec la commande  brew uninstall node

node-red mongodb brew

Ouvrez un Terminal et collez cette commande

Répondez aux questions pour terminer l’installation de Homebrew sur votre Mac. Une fois l’installation de Homebrew terminée, on peut installer Node.js en exécutant la commande

Node.js pour puces ARM (Raspberry Pi, Orange Pi…)

Node.js est également disponible pour les plateformes ARM v6, v7 et v8. L’archive est directement récupérable en téléchargement mais le plus simple reste de passer par le Terminal. On commence par ajouter les sources de Nodejs au gestionnaire de dépôt du système. Complétez la commande en fonction de la version désirée.

Pour la version 7.x en cours de développement

Pour la version stable

Maintenant, une simple commande apt-get pour installer Node.js sur votre Raspberry Pi par exemple.

Tester si tout fonctionne

Nodejs dispose de son propre shell qu’on lance tout simplement avec la commande node dans le Terminal. Si tout est correctement installé, vous obtiendrez l’invite (>). Faites une petite addition. Pour sortir du shell, saisissez .exit

Préparer un serveur de développement pour Web Serveur ESP8266

On démarre un serveur Web en quelques lignes avec Node.js. Ici, nous allons utiliser express.js qui est un framework simplifiant la gestion des routes (et accélère le rendu des pages, mais c’est accessoire ici). On utilise npm pour installer de nouveau package.

Pour faire des requêtes HTTP et récupérer des données réelles sur l’ESP8266, nous aurons besoin du package request

Utiliser directement les Templates Pug

Ce serait dommage de devoir générer les fichiers HTML après chaque modification. Pour pouvoir utiliser les fichiers Pug, il faut faire 3 choses :

  • Installer le package pug avec la commande  npm install pug
  • Créer un dossier views dans le dossier data du projet. Ensuite déplacez tous les fichiers pug à l’intérieur. Il est possible de conserver l’arborescence (mais je n’ai pas testé)
  • Indiquer que le view engine sera pug.

Voici le code du serveur qui va nous permettre de tester en locale l’interface HTML de nos projets ESP8266. Il ne faut que 7 lignes de code pour faire fonctionner l’interface

Enregistrez le fichier sous le nom server.js et lancez le serveur avec la commande node server.js  depuis le Terminal (sans oublier de vous placer dans le répertoire du projet). Ouvrez un navigateur et saisissez localhost:8080 dans la barre d’adresse. Et voilà, vous pouvez maintenant développer vos interfaces et le code javascript beaucoup plus rapidement sur votre propre ordinateur !

nodejs esp8266 webserveur fast development

Mettre à disposition les ressources (images…)

Si votre projet contient des ressources, par exemple un dossier avec des images, vous devez les rendre accessible au navigateur internet. Pour cela, il faut créer un dossier public dans lequel vous devrez déplacer les ressources (images entre autre). Ensuite on indique à express.js de rendre accessibles les resources publiques au client Web.

L’arborescence du projet modifiée.

Relancer automatiquement le serveur après chaque modification

Vous avez du remarquer qu’il est nécessaire de relancer le serveur après chaque modification (scripts js, templates pug…). On va donc automatiser le redémarrage du serveur Web après chaque modification. Pour cela, il existe le plugin nodemon qui ne nécessite que très peu de configuration. Cela évite d’installer et configurer un gestionnaire de tâche tel que Grunt ou Gulp, surdimensionnés dans ce cas !

Maintenant, on lance le serveur à l’aide de la commande nodemon server.js . Il y a beaucoup de paramètres disponibles que l’on peut mettre dans un petit fichier de configuration qu’il faudra nommer nodemon.json et placer au même niveau que le fichier server.js. Dans la section watch, on indique les répertoires à surveiller. La clé ext permet d’indiquer les extensions des fichiers à surveiller.

Maintenant, on démarre le serveur avec la commande nodemon server.js . On peut voir ici qu’il y a bien 2 fichiers surveillés. On remarque que le serveur a été automatiquement relancé après une modification du fichier index.pug. Il est aussi possible de relancer le serveur web à n’importe quel moment en saisissant rs.

Remarque. Nodemon ne s’occupe pas d’actualiser la page sur le navigateur (pas de Livereload), il faut le faire manuellement

Répondre aux requêtes de l’interface Web :

Il est beaucoup plus facile de développer et mettre au points les interfaces lorsqu’on dispose d’un jeu de données. On va donc répondre aux appels de l’interface et renvoyer des données. C’est comme ça que j’ai mis au point l’intégration des graphiques Google Charts.

Avec express.js, on récupère un appel sur une route à l’aide de la fonction app.use(‘/route’, function(req, res, next){}). Par exemple, ici on intercepte une demande de données sur la route /mesures.json.

On va tenter de récupérer des mesures réelles sur l’ESP8266, et si l’ESP8266 n’a pas répondu dans les 2 secondes (timeout:2000),

Il va nous suffire de tester la réponse ou intercepter une erreur pour renvoyer les données de l’ESP8266 ou un jeu de test si l’ESP8266 n’a pas répondu à notre demande. La réponse de l’ESP8266 est contenu dans le body

Ce qui donne une fois assemblé

Pour le GPIO, c’est un peu plus compliqué. Souvenez-vous, on peut décoder facilement une requête dans laquelle les données sont passées en paramètres dans l’url. Par exemple http://192.168.1.21/gpio&id=D7&etat=1. Coté Node.js, il va falloir construire la requête qui va bien. On va utiliser la fonction request mais cette fois-ci on ne va lui passer une série d’options qui va lui permettre de construire l’URL

On récupère le valeur de chaque paramètre à l’aide de la fonction req.param(‘param’). Il ne reste plus qu’à interroger l’ESP8266 et renvoyer la réponse ou un jeu de test si ce dernier reste muet après 2 secondes.

Code complet du serveur

Voici le code complet du serveur que vous pouvez adapter à vos besoins. Il est également présent dans les dépôts GitHub du projet Web Server ESP8266.

Maintenant, si un ESP8266 est connecté au réseau, vous êtes en mesure de récupérer des données pour mettre au point facilement votre projet. Les messages envoyés sur le Terminal à l’aide de la commande console.log() permettent de faciliter encore un peu plus la mise au point.

nodejs esp8266 donnees reelles

Voilà, vous pouvez maintenant développer beaucoup plus rapidement vos interfaces HTML et code javascript pour vos projets ESP8266. C’est un tutoriel en mode accéléré. Nous reviendrons plus en détail sur les différentes technologies abordées ici dans de prochains tutoriels.

Mises à jour :

[8/08/2017] installation du package pug. Merci Frédéric.

 

Inscrivez-vous à la newsletter hebdomadaire

Aucun spam et aucun autre usage ne sera fait de votre email. Vous pouvez vous dés inscrire à tout moment.

Comparateur de prix

Bons plans

Les offres suivantes se terminent bientôt. Utilisez le coupon indiqué pour profiter du prix promo

Tags:

  • Frédéric Fred

    Merci, très bon tuto, comme toujours.
    Pour que la page pug puisse être interprétée, le module pug doit aussi être installé dans node.js en faisant “npm install pug”. Sinon, le serveur renvoie “Error: Cannot find module ‘pug'” quand on lance la page web localhost:8080
    Il faudrait pouvoir ajouter cette précision dans le tuto, car étant novice, j’ai passé du temps à trouver la solution.
    Serait il possible d’avoir “serveur.js” qui renvoie juste des valeurs aléatoires (par qq instructions javascript ?) pour que ça s’affiche sur la page web client, sans avoir besoin de se connecter à un ESP8266 pour avoir des valeurs. Ca permet d’avoir un exemple fonctionnel totalement autonome sur PC pour aller plus doucement dans la progression avant de brancher du hardware. Parce ça fait vraiment beaucoup en même temps, pour moi.

    • Bonjour Frédéric. Merci beaucoup pour le retour. Je viens de modifier l’article. Pour générer des valeurs, il existe la fonction random() qui renvoi un nombre compris entre 0 et 1. Il suffira ensuite de la multiplier par un coefficient pour avoir une valeur plus grande et réaliste https://www.w3schools.com/JSREF/jsref_random.asp.

Projets DIY - Domotique et objets connectés à faire soi-même