Contrôler un ESP32 depuis son téléphone : BlueGrays IoT en 5 étapes

Contrôler un ESP32 depuis son téléphone, c'est allumer ou éteindre un relais, une LED ou un moteur branché sur la carte avec le smartphone que tu as en poche, et y lire les valeurs des capteurs. C'est aussi la première étape la plus amusante pour apprendre l'IoT. L'ESP32 intègre le Wi-Fi 2,4 GHz et le Bluetooth : pas besoin de module supplémentaire. La vraie question, c'est le chemin à choisir. Pour piloter un ESP32 avec une application, tu peux écrire ton propre serveur web, passer par le Bluetooth ou créer un bot Telegram. Les tableaux de bord cloud comme Blynk et Arduino IoT Cloud sont aussi une option. Chaque méthode a son temps d'installation, sa portée et ses limites.

Dans ce guide, tu vas mettre en place pas à pas la solution la plus rapide : la fonction BlueGrays IoT de l'application BlueGrays. Ohmi prépare le code pour toi. Toi, tu montes le circuit et tu téléverses le code sur l'ESP32 depuis l'Arduino IDE. La carte se connecte au serveur BlueGrays via une connexion chiffrée, donc ton téléphone et la carte n'ont pas besoin d'être sur le même réseau. Tu peux même allumer la lampe de la maison depuis le bureau, en données mobiles. Tu commenceras par un interrupteur de lampe avec un relais. Ensuite, tu ajouteras un DHT22 au circuit pour afficher la température et l'humidité sur ton téléphone, en valeurs en direct et en graphiques. À la fin de l'article, tu trouveras une comparaison avec les autres méthodes et un tableau de dépannage des erreurs les plus fréquentes.

5 façons de contrôler un ESP32 depuis son téléphone

• Serveur web local : l'ESP32 sert une page web et tu ouvres l'adresse IP de la carte dans le navigateur du téléphone. Aucun compte n'est nécessaire, mais en temps normal l'accès n'est possible que depuis le même réseau Wi-Fi. Tous les détails dans l'article ESP32 Async Web Server.
• Bluetooth Classic et BLE : pas besoin d'Internet ni de box, le téléphone se connecte directement à la carte. En intérieur, la portée tourne généralement autour de 10 mètres. Les deux types sont expliqués dans le guide ESP32 Bluetooth.
• Bot Telegram : tu envoies des commandes à la carte par message et tu reçois ses notifications. Ça fonctionne aussi hors de chez toi, mais il n'y a pas de tableau de bord avec graphiques ou curseurs. Pour l'installation, consulte l'article ESP32 Telegram Bot.
• Tableaux de bord cloud (Blynk, Arduino IoT Cloud) : tu définis modèles et variables dans la console web, tu écris le code toi-même et tu conçois toi-même le tableau de bord sur le téléphone. C'est une voie flexible, mais il faut apprendre plusieurs écrans et notions différents. Pour Blynk, le guide Blynk ESP32 est prêt.
• BlueGrays IoT : dans l'application, tu choisis l'un des 8 modèles prêts à l'emploi. Ohmi prépare le code avec tes réglages de broches et ta clé d'appareil. Sur le téléphone, interrupteurs, curseurs, sélecteur de couleur et graphiques apparaissent automatiquement selon le modèle. Pas de tableau de bord à concevoir, pas de serveur à installer.

Ce qu'il te faut : matériel et logiciels

Comment fonctionne le contrôle d'un ESP32 par application ?

Avec BlueGrays IoT, le téléphone et l'ESP32 ne se connectent pas directement l'un à l'autre. Au démarrage, la carte se connecte d'abord au réseau Wi-Fi 2,4 GHz de la maison. Elle ouvre ensuite une connexion WebSocket chiffrée (TLS) vers le serveur BlueGrays sur le port 443 et la garde ouverte en permanence. L'application du téléphone se connecte au même serveur. Quand tu touches l'interrupteur de la lampe, la commande va du téléphone au serveur, puis du serveur à la carte. Comme la connexion est déjà ouverte, la commande arrive sans attendre. La valeur de température envoyée par la carte suit le même chemin dans l'autre sens. Le port 443 est celui qu'utilisent aussi les sites web. Tu n'as donc pas besoin de redirection de port sur ta box, ni de ton propre serveur, ni de connaître l'adresse IP de la carte.

Ce qui identifie la carte auprès du serveur, c'est la clé d'appareil. Il s'agit d'un texte secret commençant par bgd_, généré par l'application lors de la création de l'appareil. La carte envoie cette clé dans l'en-tête de connexion à l'ouverture. Le serveur transmet alors la commande du téléphone à la bonne carte. La clé n'est jamais affichée dans le Moniteur série. Si la connexion tombe, la bibliothèque BlueGraysIoT retente d'elle-même à intervalles croissants. Les valeurs mesurées hors ligne sont envoyées à la reconnexion, et après une coupure de courant, l'état des interrupteurs est restauré. Il suffit que la carte et le téléphone aient accès à Internet : la carte peut être sur le Wi-Fi de la maison et le téléphone en données mobiles dans une autre ville.

Le circuit : brancher le module relais sur l'ESP32

Dans les modèles Lampe avec relais et Station de pièce, les broches par défaut sont les suivantes : l'entrée IN du relais va sur GPIO26, la broche de données du DHT22 sur GPIO4. Tu peux changer ces broches à l'étape 3 de la configuration. Vérifie le brochage de ta carte avec l'outil Pinout. Sur certaines cartes, la broche 5 V est marquée VIN, sur d'autres 5V.

Configuration de BlueGrays IoT : les 5 étapes dans l'application

Dans l'application, suis le chemin Atelier › Mes appareils › Ajouter un appareil. En haut de l'écran, tu vois un compteur du type « Étape 1 / 5 ». Les trois premières étapes se font sur le téléphone, la quatrième sur l'ordinateur et la cinquième de nouveau sur le téléphone.

1. Carte et modèle : à la question « Quelle est ta carte ? », choisis ESP32 ; à la question « Que va-t-elle faire ? », coche l'un des 8 modèles. Pour un premier essai, « Lampe avec relais » ou la « Station de pièce » avec capteur sont de bons points de départ. Donne à l'appareil un nom facile à reconnaître, comme « Lampe du salon ».
2. Composants et circuit : la liste « Prépare les composants » indique les pièces dont le modèle a besoin. Le schéma « Branche les fils » montre quelle borne va sur quelle broche. Dans les modèles à relais, tu verras l'avertissement « Si tu travailles en 220 V, fais-le avec quelqu'un qui s'y connaît. Essaie d'abord avec une LED. »
3. Wi-Fi et code : saisis le nom et le mot de passe de ton réseau Wi-Fi. Le nom du réseau doit être exactement identique et appartenir à la bande 2,4 GHz. Si tu veux, remplace GPIO26 et GPIO4 par d'autres broches dans la section « Broches de connexion ». Appuie ensuite sur le bouton « Créer l'appareil et préparer le code ». Ohmi prépare le code avec ta clé d'appareil ; transfère-le sur ton ordinateur avec « Copier le code » ou « Partager ».
4. Téléverser avec l'Arduino IDE : tu téléverses le code sur l'ESP32. Les sous-étapes de l'application sont détaillées une par une dans la section suivante.
5. Connexion : l'écran « En attente de ta carte » passe automatiquement à la suite dès que la carte se connecte au serveur.

Étapes 4 et 5 : téléverser le code et vérifier la connexion

1. Si l'Arduino IDE n'est pas installé, installe-le. Les étapes sont dans l'article Installer l'Arduino IDE.
2. Dans le Gestionnaire de carte, cherche « esp32 » et installe le paquet esp32 d'Espressif. La version 3.x de ce paquet est requise ; si l'ancienne version 2.x est installée, mets-la à jour. L'installation du paquet est aussi décrite dans l'article Qu'est-ce que l'ESP32 ?.
3. Branche la carte avec un câble USB qui transmet les données. Dans Outils › Carte, choisis ESP32 Dev Module (ou le modèle de ta carte), puis dans Outils › Port, sélectionne le nouveau port qui apparaît. Si le port n'apparaît pas, change de câble. Installe ensuite le pilote CP210x ou CH340 selon la puce USB de ta carte.
4. Dans le Gestionnaire de bibliothèque, cherche BlueGraysIoT et clique sur Installer. Quand il te demande pour les dépendances, choisis « Tout installer » ; WebSockets, ArduinoJson et DHT sensor library seront installées aussi. En cas de blocage, consulte le guide Ajouter une bibliothèque Arduino.
5. Ouvre un nouveau croquis, efface son contenu, colle le code copié depuis l'application et clique sur Téléverser. Si la fenêtre du bas reste bloquée sur « Connecting… », maintiens enfoncé le bouton BOOT de la carte. Relâche-le dès que les pourcentages d'écriture apparaissent.
6. Ouvre le Moniteur série et règle la vitesse sur 115200. Tu dois voir d'abord « Wi-Fi connected » (Wi-Fi connecté), puis quelques secondes plus tard la ligne « BlueGrays IoT: connected » (BlueGrays IoT : connecté).

Dès que le message de connexion apparaît dans le moniteur série, l'écran « En attente de ta carte » du téléphone passe à « Connecté : les valeurs arrivent maintenant en direct. » Touche alors l'interrupteur de la lampe : tu dois entendre le clic du relais ou voir la LED s'allumer. Si la carte ne se connecte pas dans les 2 minutes, l'application te demande de vérifier trois choses. As-tu choisi un réseau 2,4 GHz ? Le moniteur série affiche-t-il « Wi-Fi connected » ? Les majuscules et minuscules du mot de passe sont-elles correctes ? Si la première ligne n'arrive jamais, le problème vient du Wi-Fi. Dans ce cas, la check-list de l'article L'ESP32 ne se connecte pas au WiFi te sera utile.

Premier code : allumer et éteindre une lampe depuis le téléphone

Le code préparé par l'application pour le modèle « Lampe avec relais » ressemble à celui ci-dessous. Les trois premières lignes arrivent remplies avec ta clé d'appareil, le nom de ton réseau et ton mot de passe ; ici, elles sont montrées avec des valeurs fictives. Le reste du code est court : une fonction pour le relais, la déclaration d'un interrupteur et une loop() d'une seule ligne.

1/*
2 * Salon lambası · BlueGrays IoT
3 * BlueGrays · bluegrays.com
4 * Bu kodu paylaşma: içinde cihaz anahtarın ve Wi-Fi şifren var.
5 * Do not share this code: it contains your device key and Wi-Fi password.
6 */
7
8#include <BlueGraysIoT.h>
9
10// Uygulama bu üç satırı senin bilgilerinle doldurur / The app fills these three lines with your details
11const char *DEVICE_KEY = "bgd_UYGULAMADAKI_ANAHTARIN";
12const char *WIFI_NAME = "EV_AGI_2_4_GHZ";
13const char *WIFI_PASSWORD = "WIFI_SIFREN";
14
15BlueGraysIoT bg(DEVICE_KEY);
16
17const int RELAY_PIN = 26;
18const bool RELAY_ACTIVE_LOW = true;  // çoğu röle modülü LOW ile çeker / most relay modules switch on LOW
19void setRelay(bool on) { digitalWrite(RELAY_PIN, (on != RELAY_ACTIVE_LOW) ? HIGH : LOW); }
20
21void setup() {
22  Serial.begin(115200);
23  pinMode(RELAY_PIN, OUTPUT);
24  setRelay(false);                  // açılışta lamba kapalı / lamp off at power-up
25  bg.onSwitch("lamba", setRelay);   // uygulamadaki "Lamba" anahtarı / the "Lamba" switch in the app
26  bg.setDebug(Serial);              // durum mesajları Seri Port Ekranı'na / status messages to the Serial Monitor
27  bg.setLanguage(BG_LANG_TR);
28  bg.begin(WIFI_NAME, WIFI_PASSWORD);
29}
30
31void loop() {
32  bg.loop();  // burada uzun delay() kullanma / avoid long delay() calls here
33}
34

Ajouter un capteur : Station de pièce (relais + DHT22)

Ajoutons maintenant un DHT22 sur la même carte pour envoyer des données au téléphone. Si tu choisis le modèle « Station de pièce » dans l'application, tu obtiens, à côté de l'interrupteur de la lampe, les valeurs de température (°C) et d'humidité (%) ainsi que leurs graphiques. Le DHT22 mesure de -40 à 80 °C avec une précision d'environ ±0,5 °C. Il mesure l'humidité sur la plage 0–100 % et peut être lu au maximum toutes les 2 secondes. Branche la broche de données sur GPIO4, VCC sur 3V3 et GND sur GND. Le fonctionnement de la famille DHT est expliqué, avec une comparaison, dans l'article Capteur de température et d'humidité DHT11.

1/*
2 * Oda istasyonu · BlueGrays IoT
3 * BlueGrays · bluegrays.com
4 * Bu kodu paylaşma: içinde cihaz anahtarın ve Wi-Fi şifren var.
5 * Do not share this code: it contains your device key and Wi-Fi password.
6 */
7
8#include <BlueGraysIoT.h>
9#include <DHT.h>
10
11const char *DEVICE_KEY = "bgd_UYGULAMADAKI_ANAHTARIN";
12const char *WIFI_NAME = "EV_AGI_2_4_GHZ";
13const char *WIFI_PASSWORD = "WIFI_SIFREN";
14
15BlueGraysIoT bg(DEVICE_KEY);
16
17const int RELAY_PIN = 26;
18const bool RELAY_ACTIVE_LOW = true;  // çoğu röle modülü LOW ile çeker / most relay modules switch on LOW
19void setRelay(bool on) { digitalWrite(RELAY_PIN, (on != RELAY_ACTIVE_LOW) ? HIGH : LOW); }
20DHT dht(4, DHT22);                   // DHT22 veri ucu GPIO4 / DHT22 data on GPIO4
21unsigned long lastReadMs = 0;
22
23void setup() {
24  Serial.begin(115200);
25  pinMode(RELAY_PIN, OUTPUT);
26  setRelay(false);
27  bg.onSwitch("lamba", setRelay);
28  dht.begin();
29  bg.setDeadband("sicaklik", 0.1);   // 0,1 °C değişmeden gönderme / send only after a 0.1 °C change
30  bg.setDeadband("nem", 1.0);        // %1 değişmeden gönderme / send only after a 1 % change
31  bg.setDebug(Serial);
32  bg.setLanguage(BG_LANG_TR);
33  bg.begin(WIFI_NAME, WIFI_PASSWORD);
34}
35
36void loop() {
37  bg.loop();  // burada uzun delay() kullanma / avoid long delay() calls here
38  if (millis() - lastReadMs >= 2000) {  // DHT22 en fazla 2 saniyede bir okunur / DHT22 reads at most every 2 s
39    lastReadMs = millis();
40    bg.send("sicaklik", dht.readTemperature());
41    bg.send("nem", dht.readHumidity());
42  }
43}
44

La partie relais est identique au premier code ; il y a trois nouveautés. La première est la ligne bg.send("sicaklik", dht.readTemperature()) : elle envoie une valeur de la carte vers l'application, et le premier paramètre est le nom de la variable dans l'application. La deuxième est la ligne bg.setDeadband("sicaklik", 0.1). Elle fixe la plus petite variation prise en compte : la température n'est renvoyée que si elle change d'au moins 0,1 °C ; pour l'humidité, ce seuil est de 1 %. La troisième est le test millis() - lastReadMs >= 2000 dans loop. Le capteur est lu toutes les 2 secondes, mais entre-temps bg.loop() continue de tourner sans attendre. La bibliothèque n'envoie la valeur que lorsqu'elle change et ne dépasse pas le débit autorisé par l'offre. Pour une même variable, il s'écoule au moins 1 seconde entre deux envois avec l'offre gratuite, et au moins 0,2 seconde en Premium. Ces limites sont contrôlées côté serveur ; modifier les nombres dans le code ne permet pas de les contourner. Si la température de la pièce reste à 23,4 °C pendant plusieurs minutes, la carte n'envoie aucune nouvelle valeur ; un seul message part quand elle passe à 23,5 °C. Si un fil est desserré ou si la pull-up manque, la lecture est invalide (NaN). Si aucune valeur n'arrive, vérifie d'abord le branchement de GPIO4 et l'alimentation.

Que vois-tu sur le téléphone ?

• État : en haut de l'écran de l'appareil s'affiche En ligne ou Hors ligne, avec en dessous l'information « Dernière donnée il y a … ». C'est le premier endroit où vérifier si la carte est vraiment connectée.
• Commandes : le modèle de lampe affiche un interrupteur marche/arrêt. Le modèle de ruban RGB propose un sélecteur de couleur, une luminosité de 0 à 100 % et un choix d'effets. Le modèle de rideau comporte un curseur d'angle de 0 à 180°.
• Valeurs en direct et graphiques : les plages 1 h, 24 h, 7 jours et 30 jours sont disponibles. Les vues sur 7 et 30 jours affichent des moyennes horaires. Le graphique indique les valeurs Minimum, Maximum et Dernière. Tant que la carte reste connectée, un nouveau point s'ajoute chaque minute.
• Code et clé : tu retrouves ici à tout moment le code complet, la clé d'appareil et les informations Wi-Fi. Si tu dois reprogrammer la carte, copie le code depuis cet écran.
• Renouveler la clé : à utiliser si quelqu'un a vu ta clé ou si tu as changé de carte. L'ancienne clé devient immédiatement invalide ; il suffit de téléverser une fois le nouveau code sur la carte.
• Supprimer l'appareil : l'appareil et l'historique des graphiques sont effacés, et ton emplacement d'appareil est libéré.

Gratuit ou Premium : jusqu'où peux-tu aller ?

Ton premier appareil est gratuit. Pour monter un interrupteur de lampe ou une station de pièce avec un ESP32, tu n'as besoin de rien d'autre. Dans la station de pièce, la température et l'humidité sont deux variables distinctes. Avec l'offre gratuite, les deux valeurs en direct arrivent sur le téléphone, mais l'historique des graphiques n'est conservé que pour une seule variable. Les différences entre les offres sont détaillées ci-dessous ; plus d'infos dans l'article Que débloque BlueGrays Premium ?.

Comparaison avec les autres méthodes

Le bon choix dépend de ton besoin. Sans aucun accès Internet, le Bluetooth ou un serveur web local sont les seules options. BlueGrays IoT, Blynk et Arduino IoT Cloud demandent que la carte et le téléphone aient accès à Internet. Si tu veux des installations flexibles, comme concevoir l'interface de zéro ou te connecter à Home Assistant, ESP32 MQTT et les tableaux de bord cloud offrent plus de possibilités. BlueGrays IoT propose 8 modèles prêts à l'emploi. En contrepartie, schéma du circuit, liste des composants, code et interface du téléphone arrivent prêts et cohérents entre eux. Pendant l'apprentissage, tu as moins de risques de te tromper quelque part.

Sécurité : clé, mot de passe Wi-Fi et code

• La clé d'appareil est l'identité de ta carte. Quelqu'un qui connaît ta clé bgd_ peut se faire passer pour ta carte. Ne la partage donc ni dans une capture d'écran, ni sur un forum, ni dans un groupe de discussion.
• Le mot de passe Wi-Fi reste sur le téléphone. Il n'est pas envoyé au serveur ; le nom du réseau, lui, est enregistré avec l'appareil pour pouvoir réafficher le code plus tard. Mais le mot de passe figure en clair dans le code téléversé sur la carte.
• Ne partage pas le code. Comme l'application le rappelle, il contient ta clé d'appareil et ton mot de passe Wi-Fi. Si tu veux montrer ton code sur un forum pour demander de l'aide, supprime d'abord les lignes DEVICE_KEY, WIFI_NAME et WIFI_PASSWORD.
• La connexion est chiffrée. Le trafic entre la carte et le serveur passe en TLS sur le port 443 ; une personne sur le même réseau ne peut pas lire les commandes.
• Au moindre doute, renouvelle la clé. Le bouton Renouveler la clé rend l'ancienne clé immédiatement invalide. Si tu donnes la carte à quelqu'un, renouvelle aussi la clé ou supprime l'appareil.

Erreurs fréquentes et solutions

Idées de projets IoT à réaliser avec un ESP32

• Interrupteur de lampe : la version complète du premier circuit de cet article se trouve dans le projet Interrupteur de lampe IoT ESP32 (relais). Le projet est fourni avec son schéma et sa liste de composants.
• Station de pièce : relais et DHT22 réunis, avec graphique de température : Station de pièce IoT ESP32 (relais + DHT22).
• Arrosage de plantes : le capteur d'humidité du sol est branché sur GPIO34 (une broche ADC1). Quand l'humidité passe sous le curseur Seuil d'arrosage du téléphone, la pompe démarre ; elle s'arrête quand l'humidité dépasse le seuil de 10 points. Page du projet : Arrosage de plantes IoT ESP32 (capteur d'humidité + pompe). Pour l'étalonnage du capteur, consulte aussi l'article Capteur d'humidité du sol.
• Ruban LED RGB : choisis depuis le téléphone la couleur, la luminosité et l'effet (Fixe, Arc-en-ciel, Respiration, Clignotement) d'un ruban WS2812B de 30 LED sur GPIO13 : Ruban LED RGB IoT ESP32 (WS2812B). En blanc à pleine puissance, 30 LED peuvent consommer environ 1,8 A ; alimente le ruban avec une source 5 V séparée. Détails dans l'article WS2812B NeoPixel.
• Ouvre-rideau : fais tourner le servo SG90 sur GPIO18 avec un curseur de 0 à 180° : Ouvre-rideau IoT ESP32 (servo SG90). Alimente aussi le servo avec une source 5 V séparée et relie les GND entre elles.
• Autres modèles : les projets capteur de porte, compteur de mouvements et température et humidité sont présentés avec le Pico W. Dans l'application, tu peux aussi choisir ces modèles pour l'ESP32.

Une fois le chemin entre la carte, le serveur et le téléphone mis en place, ajouter un nouvel appareil ne te prendra que quelques minutes. Commence par l'interrupteur de lampe, regarde ensuite les données du DHT22 arriver sur ton téléphone, puis passe à des projets plus ambitieux comme l'arrosage ou le rideau. Dans l'application BlueGrays, tu peux consulter ces projets IoT ESP32 pas à pas, avec schéma et code. Utilise le filtre Projets IoT de l'onglet Découvrir, et connecte directement le même circuit à ton téléphone grâce à la carte « Configurer comme appareil IoT » de la page du projet.