Construire un objet connecté IoT avec ESP8266-01 et Arduino Nano : Guide complet

Composants et fournitures

Arduino Nano R3	×	1
PCB personnalisé PCBWay	×	1
Espressif ESP8266 ESP-01	×	1
Module relais 2 canaux	×	1
LED (générique)	×	2
Plaque d'essai (générique)	×	1
Fils de câblage (générique)	×	1
Résistance 1 kΩ	×	2
Résistance 2,21 kΩ	×	1

Outils et machines nécessaires

• Fer à souder (générique)
• Fil à souder, sans plomb
• Flux à souder

Applications et services en ligne

• Microsoft Visual Studio Code (optionnel)
• Arduino IDE
• Autodesk Eagle (optionnel)

À propos du projet

Introduction

Aujourd'hui, nous allons construire un dispositif qui se connecte à Internet et permet à l'utilisateur de contrôler son domicile à distance via Wi-Fi. Nous utiliserons une carte Arduino (tout modèle convient) avec le module Wi-Fi ESP8266-01. C'est parti !

Qu'est-ce qu'une maison connectée ?

Scénario de fonctionnement

Le panneau de contrôle

Nous allons créer une page web simple servant de panneau de contrôle pour piloter tout appareil domestique connecté à notre système. Technologies utilisées :

• HTML
• CSS
• jQuery

Le matériel embarqué

La page web envoie des ordres à l'ESP8266-01 qui fonctionne comme serveur web connecté à l'Arduino. Selon les données reçues, l'Arduino agit : allumer une ampoule, éteindre la TV, etc. Composants :

• Arduino
• ESP8266-01

Prise en main de l'ESP8266-01

L'Arduino Nano n'a pas de connectivité Internet native. Nous utiliserons le module ESP8266-01 pour ajouter le Wi-Fi.

Il existe de nombreux modèles ESP. Lequel choisir ? Presque tous feront l'affaire, mais chacun a ses spécificités. Étudiez les fiches techniques pour choisir selon vos besoins.

Selon mes besoins, l'ESP8266-01 est le plus adapté pour plusieurs raisons :

• Très populaire dans la communauté makers → forte communauté en ligne, réponses à presque toutes les questions
• Prix très bas (environ 1,5 $)
• Facile à utiliser avec Arduino : module série, communication série avec l'Arduino
• Microcontrôleur intégré → utilisable en autonome (MCU + Wi-Fi en un)
• 2 GPIO intégrés

Examinons ce module de plus près.

Brochage ESP8266-01

• VCC : +3,3V. Ne pas connecter au 5V, destruction assurée.
• GND : Masse, à relier à la masse du circuit.
• CH_PD : Activation puce – HIGH actif. Relier à HIGH pour démarrer le module.
• RST : Reset puce – LOW actif. À LOW, réinitialise le module.
• GPIO0, GPIO2 : Entrées/sorties générales.
• Tx : Vers Rx du microcontrôleur (Arduino) pour communication série.
• Rx : Vers Tx du microcontrôleur (Arduino) pour communication série.

Configuration de l'ESP8266-01

L'ESP8266-01 communique avec l'Arduino via la liaison série (broches 0, 1 Tx/Rx). Problème : ces broches seront occupées par le moniteur série pour le débogage. Il faut deux autres broches série.

Heureusement, la bibliothèque SoftwareSerial permet la communication série sur d'autres broches numériques, par logiciel. Par exemple, broches 2, 3 (SoftwareSerial) comme Rx/Tx en plus des 0, 1 (Hardware Serial).

Attention : SoftwareSerial fonctionne bien jusqu'à 19 200 bauds. Or l'ESP8266-01 sort d'usine à 115 200 bauds, trop rapide pour SoftwareSerial. Il faut le reprogrammer à 9600 bauds via des commandes AT.

Changer la vitesse de communication de l'ESP8266-01

Étape 1 : Téléverser un programme vide sur l'Arduino

Cela garantit qu'aucun code ne s'exécute en arrière-plan.

Étape 2 : Câbler l'ESP8266-01 avec l'Arduino

Pour reconfigurer l'ESP8266-01, on utilise les commandes AT. Ce sont des instructions pour contrôler modems, modules Bluetooth, Wi-Fi, GSM. « AT » signifie « ATtention » – chaque commande commence par « AT ».

Commandes AT importantes

La commande n°4 dépend du firmware : si AT+CIOBAUD=<baud> ne fonctionne pas, essayez AT+UART_DEF=<baud>,8,1,0,0

Étape 1 : Ouvrir le moniteur série

Étape 2 : Régler la vitesse à 115 200 bauds

L'ESP communique à 115 200 bauds au départ. Réglez le moniteur série sur cette vitesse pour la première fois. Sélectionnez « Both NL & CR ».

Étape 3 : Envoyer « AT » et attendre la réponse

Étape 4 : Changer la vitesse de l'ESP8266-01

Mon module a le firmware 1.6, et AT+UART_DEF=9600,8,1,0,0 fonctionne. Si réponse « OK », la vitesse est passée à 9600 bauds. FÉLICITATIONS !

Remettez le moniteur série à 9600 bauds et envoyez « AT » pour vérifier la communication à la nouvelle vitesse.

Ça fonctionne ! L'ESP8266-01 communique maintenant à 9600 bauds.

Connexion au réseau Wi-Fi

Après validation, l'ESP recherche et se connecte au réseau. En cas de succès :

WIFI CONNECTED
WIFI GOT IP

À ce stade, l'ESP8266-01 est configuré à 9600 bauds. Passons à la création de la page web de contrôle !

C'est quoi Internet ?

Internet est un fil enterré (fibre, cuivre, satellite). Deux ordinateurs connectés à ce fil peuvent communiquer. Connecté directement = serveur. Connecté indirectement = client.

Serveur : Ordinateur spécial (OS type Apache) hébergeant pages web, fichiers, bases de données. Adresse IP unique (ex: 172.217.171.228). Les noms de domaine (google.com) remplacent les IP pour la mémorisation.

Client : Votre ordinateur, connecté via FAI, avec IP unique.

Scénario de fonctionnement

Une requête part du navigateur (client) vers le serveur web, qui répond avec une page HTML ou document.

Dans notre projet : le navigateur (client) envoie une requête à l'ESP8266-01 (serveur web) sur le même réseau local. La requête contient des données indiquant à l'Arduino d'allumer/éteindre une ampoule. Construisons la page web !

Construction de la page web

HTML, CSS, JavaScript. Si ces termes sont nouveaux, pas de panique.

HTML : « HyperText Markup Language » – structure de la page (boutons, images, paragraphes...). Balises (tags) pour indiquer au navigateur comment afficher.

CSS : « Cascading Style Sheets » – mise en forme (couleurs, polices, alignement). Sélecteurs et blocs de déclaration.

JavaScript : Langage de programmation pour interactivité (animations, cartes, requêtes HTTP). Nous l'utiliserons pour envoyer une requête GET du navigateur vers l'ESP8266-01.

Structure de la page web

Pour bien comprendre, lisez cette introduction HTML.

Notre panneau est simple : deux en-têtes de tailles différentes, une image, deux boutons (allumer/éteindre une LED).

Code HTML

<!DOCTYPE html>
<html>
<head>
  <title>Smart Home System</title>
</head>
<body>
  <h1> Smart Home Control Panel</h1>
  <h4>Sorry But I'm a Meme Addict!</h4>
  <img src="dogMeme.jpg" width="400px" height="400px">
  <br>
  <button id="111" class="button">LAMP ON</button>
  <br>
  <button id="110" class="button">LAMP OFF</button>
</body>
</html>

Explication du code

• <!DOCTYPE html> : document HTML5
• <html> : élément racine
• <head> : méta-informations
• <title> : titre (onglet navigateur)
• <body> : contenu visible
• <h1>, <h4> : en-têtes
• <img> : image (dans le même dossier)
• <br> : saut de ligne
• <button> : bouton

Chaque bouton a deux attributs clés : id et class. Nous verrons leur rôle dans le code jQuery.

Mise en forme (CSS)

Lisez cette introduction CSS.

Fond vert, contenu centré, polices modifiées. Code :

<body style="background-color: seagreen; color: seashell; text-align: center;">
  <h1> Smart Home Control Panel</h1>
  <h4>Sorry But I'm a Meme Addict!</h4>
  <img src="dogMeme.jpg" width="400px" height="400px">
  <br>
  <button style="margin: 10px;" id="111" class="button">LAMP ON</button>
  <br>
  <button style="margin:10px;" id="110" class="button"> LAMP OFF</button>
</body>

Explication

Style dans <body> : centrage, fond seagreen, police seashell. margin: 10px sur les boutons pour l'espacement.

Envoi d'une requête au serveur web (jQuery)

Lisez cette introduction jQuery.

Ajoutons la fonctionnalité aux boutons. Au clic sur « LAMP ON », le navigateur envoie une requête avec données uniques au serveur (ESP8266-01) → Arduino allume la lampe. Idem pour « LAMP OFF ».

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(".button").click(function () {
    var p = $(this).attr('id');
    $.get("https://192.168.1.4:80/", { pin: p });
    // IMPORTANT : REMPLACEZ L'ADRESSE IP PAR CELLE DE VOTRE ESP8266 !
  });
</script>

Explication

• Import jQuery via CDN Google
• $(".button").click(...) : déclencheur au clic sur classe « button »
• var p = $(this).attr('id') : récupère l'id du bouton cliqué
• pin: p : dictionnaire clé-valeur à envoyer
• $.get(...) : requête GET vers l'ESP8266 avec les données

Logique des IDs : 111 et 110 se décomposent en deux parties :

• Partie 1 (11) : broche Arduino (ici broche 11)
• Partie 2 (1 ou 0) : état de la broche (ON/OFF)

Côté Arduino, on sépare ces deux parties : pinNumber et pinState, puis digitalWrite(pinNumber, pinState).

Connexion de la charge

Testons d'abord avec des LED (basse tension) avant le haut voltage. Schéma :

LED + sur broche digitale 11, - sur GND via résistance 1 kΩ.

Code Arduino

#include <SoftwareSerial.h>
SoftwareSerial esp8266(2, 3);  // Rx=2, Tx=3
#define serialCommunicationSpeed 9600
#define DEBUG true

int redLED = 12;
int blueLED = 11;

void setup() {
  pinMode(redLED, OUTPUT);
  pinMode(blueLED, OUTPUT);
  digitalWrite(redLED, LOW);
  digitalWrite(blueLED, HIGH);
  Serial.begin(serialCommunicationSpeed);
  esp8266.begin(serialCommunicationSpeed);
  InitWifiModule();
  digitalWrite(blueLED, LOW);
}

void loop() {
  if (esp8266.available()) {
    if (esp8266.find("+IPD,")) {
      delay(1000);
      int connectionId = esp8266.read() - 48;
      esp8266.find("pin=");
      int pinNumber = (esp8266.read() - 48) * 10;
      pinNumber += (esp8266.read() - 48);
      int statusLed = (esp8266.read() - 48);
      digitalWrite(pinNumber, statusLed);
      
      Serial.println(connectionId);
      Serial.print(pinNumber);
      Serial.print(" ");
      Serial.println(statusLed);
      
      String closeCommand = "AT+CIPCLOSE=";
      closeCommand += connectionId;
      closeCommand += "\r\n";
      sendData(closeCommand, 1000, DEBUG);
    }
  }
}

String sendData(String command, const int timeout, boolean debug) {
  String response = "";
  esp8266.print(command);
  long int time = millis();
  while ((time + timeout) > millis()) {
    while (esp8266.available()) {
      char c = esp8266.read();
      response += c;
    }
  }
  if (debug) Serial.print(response);
  return response;
}

void InitWifiModule() {
  sendData("AT+RST\r\n", 2000, DEBUG);
  sendData("AT+CWJAP=\"VOTRE_SSID\",\"VOTRE_MOT_DE_PASSE\"\r\n", 2000, DEBUG);
  delay(3000);
  sendData("AT+CWMODE=1\r\n", 1500, DEBUG);
  delay(1000);
  sendData("AT+CIFSR\r\n", 1500, DEBUG);
  delay(1000);
  sendData("AT+CIPMUX=1\r\n", 1500, DEBUG);
  delay(1000);
  sendData("AT+CIPSERVER=1,80\r\n", 1500, DEBUG);
}

Explication du code

Deux fonctions : sendData() gère l'envoi des commandes AT, InitWifiModule() fournit la séquence d'initialisation.

Dans loop() : lecture de l'en-tête HTTP, recherche de « +IPD, » (requête arrivée), lecture de la valeur « pin » (111 = ON, 110 = OFF).

N'oubliez pas de mettre votre SSID et mot de passe Wi-Fi ligne 103.

Pour plus de détails, lisez les commentaires dans le code (bien documenté).

Comment ça marche

Après téléversement, ouvrez le moniteur série. Si vous voyez « OK » à la fin, l'ESP est connecté au Wi-Fi avec IP et MAC. Ouvrez votre page web et contrôlez vos appareils !

Si « FAIL » ou « ERROR » : vérifiez SSID/mot de passe.

Ajout d'une charge haute tension

Après validation avec LED, remplacez par une charge haute tension (climatiseur, TV, lampe) via relais.

Qu'est-ce qu'un relais ? Interrupteur mécanique commandé par une bobine. Permet de piloter un circuit puissant (230V) avec un signal faible (5V/0V).

Le module 2 canaux a deux broches de commande (IN1, IN2) → deux broches digitales Arduino. Côté charge : COM (commun) vers une extrémité de la charge, l'autre vers NO (normalement ouvert) ou NC (normalement fermé).

Schéma de câblage avec relais

Relais 1 sur broche 11, relais 2 sur broche 12.

Page web modifiée (4 boutons)

<button id="111" class="button">Blue LED ON</button>
<button id="110" class="button">Blue LED OFF</button>
<br>
<button id="121" class="button">Red LED ON</button>
<button id="120" class="button">Red LED OFF</button>

Rendre le projet plus professionnel (PCB)

Transférez le circuit sur un circuit imprimé (PCB) pour plus de rigidité. J'ai conçu le PCB avec Autodesk Eagle. Fichiers open-source : PCBWay

Dépannage

Si l'ESP est connecté mais les boutons ne font rien :

• Vérifiez que la requête part du port 80 (HTTP) : $.get("https://192.168.1.4:80/")
• PC et ESP sur le même point d'accès
• Adresse IP de l'ESP correcte dans le code jQuery
• Charge connectée sur broches 11 et 12
• Sauvegardez la page web après modification et rechargez le navigateur

Conclusion

Nous avons appris à : créer une page web (HTML/CSS/jQuery), piloter une charge AC sans fil via panneau web, utiliser l'ESP8266-01 avec Arduino.

Pour plus de tutoriels : www.makesomestuff.org

Questions ? Commentaires ci-dessous, je répondrai avec plaisir !

Code

Page Web HTML

<!DOCTYPE html> <html> <head> <title>Smart Home System</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body style="background-color: seagreen; color: seashell; text-align: center;"> <h1> Smart Home Control Panel</h1> <h4>Sorry But I'm a Meme Addict!</h4> <img src="dogMeme.jpg" width="400px" height="400px"> <br> <button style="margin: 10px;" id="111" class="button">Blue LED ON</button> <button id="110" class="button">Blue LED OFF</button> <br> <button style="margin:10px;" id="121" class="button"> Red LED ON</button> <button id="120" class="button">Red LED OFF</button> <script> $(".button").click(function () { var p = $(this).attr('id'); $.get("https://192.168.1.4:80/", { pin: p }); }); </script> </body> </html>

Code Arduino Final Arduino

#include <SoftwareSerial.h>
SoftwareSerial esp8266(2,3);
#define serialCommunicationSpeed 9600
#define DEBUG true
int redLED =12;
int blueLED =11;

void setup() {
  pinMode(redLED,OUTPUT);
  pinMode(blueLED,OUTPUT);
  digitalWrite(redLED,LOW);
  digitalWrite(blueLED,HIGH);
  Serial.begin(serialCommunicationSpeed);
  esp8266.begin(serialCommunicationSpeed);
  InitWifiModule();
  digitalWrite(blueLED,LOW);
}

void loop() {
  if(esp8266.available()) {
    if(esp8266.find("+IPD,")) {
      delay(1000);
      int connectionId = esp8266.read()-48;
      esp8266.find("pin=");
      int pinNumber = (esp8266.read()-48)*10;
      pinNumber += (esp8266.read()-48);
      int statusLed = (esp8266.read()-48);
      digitalWrite(pinNumber, statusLed);
      Serial.println(connectionId);
      Serial.print(pinNumber);
      Serial.print(" ");
      Serial.println(statusLed);
      String closeCommand = "AT+CIPCLOSE=";
      closeCommand+=connectionId;
      closeCommand+="\r\n";
      sendData(closeCommand,1000,DEBUG);
    }
  }
}

String sendData(String command, const int timeout, boolean debug) {
  String response = "";
  esp8266.print(command);
  long int time = millis();
  while((time+timeout) > millis()) {
    while(esp8266.available()) {
      char c = esp8266.read();
      response+=c;
    }
  }
  if(debug) Serial.print(response);
  return response;
}

void InitWifiModule() {
  sendData("AT+RST\r\n", 2000, DEBUG);
  sendData("AT+CWJAP=\"VOTRE_SSID\",\"VOTRE_MOT_DE_PASSE\"\r\n", 2000, DEBUG);
  delay(3000);
  sendData("AT+CWMODE=1\r\n", 1500, DEBUG);
  delay(1500);
  sendData("AT+CIFSR\r\n", 1500, DEBUG);
  delay(1500);
  sendData("AT+CIPMUX=1\r\n", 1500, DEBUG);
  delay(1500);
  sendData("AT+CIPSERVER=1,80\r\n", 1500, DEBUG);
}

Schémas