LED contrôlée par Internet à l'aide d'un serveur Web basé sur ESP32 : 10 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:07

Aperçu du projet

Dans cet exemple, nous allons découvrir comment créer un serveur Web basé sur ESP32 pour contrôler l'état des LED, accessible de n'importe où dans le monde. Vous aurez besoin d'un ordinateur Mac pour ce projet, mais vous pouvez exécuter ce logiciel même sur un ordinateur peu coûteux et à faible consommation comme le Raspberry Pi.

Préparation de l'ESP32 avec l'IDE Arduino

Afin de commencer à programmer l'ESP32 à l'aide de l'IDE Arduino et du langage de programmation Arduino, vous aurez besoin d'un module complémentaire spécial. Découvrez comment préparer l'IDE Arduino pour ESP32 sur Mac OS en cliquant sur le lien suivant.

Fournitures

Pour ce tutoriel, vous aurez besoin des éléments suivants:

• Carte de développement ESP325mm
• LEDRésistance 220ohm
• Écran LCD 16x2 avec module I2C
• Planche à pain
• Fils de cavalier
• Câble micro-USB

Étape 1: Construire le circuit

Effectuez les connexions comme indiqué dans le schéma ci-dessous

Commencez par connecter la sortie de tension d'alimentation 3V3 sur l'ESP32 et GND à la maquette. Connectez la LED via la résistance à l'ESP32 en utilisant la broche GPIO 23 comme broche de sortie numérique. Après cela, connectez la broche SDA de l'écran LCD 16x2 à la broche GPIO 21 et SCL à la broche GPIO 22.

Étape 2: Présentation rapide du système de fichiers SPIFFS

SPIFFS signifie "Serial Peripheral Interface Flash File System", c'est-à-dire un système de fichiers pour la mémoire flash qui transfère les données via SPI. En conséquence, SPIFFS est un système de fichiers simplifié conçu pour les microcontrôleurs avec des puces flash qui transmettent des données via le bus SPI (comme la mémoire flash ESP32).

SPIFFS est le plus utile pour une utilisation avec ESP32 dans les situations suivantes:

• Création de fichiers pour le stockage des paramètres
• Stockage permanent des données.
• Créer des fichiers pour stocker une petite quantité de données (au lieu d'utiliser une carte microSD pour cela).
• Stockage de fichiers HTML et CSS pour la création d'un serveur Web.

Étape 3: Installation du chargeur de démarrage SPIFFS sur Mac OS

Vous pouvez créer, enregistrer et écrire des données dans des fichiers stockés dans le système de fichiers ESP32 directement à l'aide du plug-in sur Arduino IDE.

Tout d'abord, assurez-vous que la dernière version de l'IDE Arduino est installée, puis procédez comme suit:

• Ouvrez le lien suivant et téléchargez l'archive « ESP32FS-1.0.zip »
• Accédez au répertoire Arduino IDE, situé dans le dossier Documents.
• Créez un dossier d'outils, s'il n'existe pas. Dans le répertoire tools, créez un autre dossier ESP32FS. À l'intérieur d'ESP32FS, créez-en un autre, appelé outil.
• Décompressez l'archive ZIP téléchargée à l'étape 1 dans le dossier de l'outil.
• Redémarrez votre IDE Arduino.
• Pour vérifier si le plug-in a été installé avec succès, ouvrez l'IDE Arduino et cliquez sur "Outils" et vérifiez s'il y a un élément "ESP32 Sketch Data Upload" dans ce menu.

Étape 4: Installation des bibliothèques

Les bibliothèques ESPAsyncWebServer et AsyncTCP vous permettent de créer un serveur Web à l'aide de fichiers du système de fichiers d'ESP32. Pour plus d'informations sur ces bibliothèques, consultez le lien suivant.

Installer la bibliothèque ESPAsyncWebServer

• Cliquez ici pour télécharger l'archive ZIP de la bibliothèque.
• Décompressez cette archive. Vous devriez obtenir le dossier ESPAsyncWebServer-master.
• Renommez-le en "ESPAsyncWebServer".

Installer la bibliothèque AsyncTCP

• Cliquez ici pour télécharger l'archive ZIP de la bibliothèque.
• Décompressez cette archive. Vous devriez obtenir le dossier AsyncTCP-master.
• Renommez-le en "AsyncTCP".

Déplacez les dossiers ESPAsyncWebServer et AsyncTCP vers le dossier des bibliothèques, qui se trouve dans le répertoire Documents.

Enfin, redémarrez l'IDE Arduino.

Étape 5: Créez un fichier Index.html et Style.css avec le contenu suivant

Le modèle HTML/CSS pour le bouton bascule a été extrait de la source suivante.

Étape 6: Code Arduino

Principalement, le code était basé sur le code Arduino extrait du serveur Web ESP32 à l'aide de SPIFFS et sur la façon d'utiliser l'écran LCD I2C avec ESP32 sur Arduino IDE.

Étape 7: téléchargez le code et les fichiers Arduino à l'aide du chargeur SPIFFS

• Ouvrez le dossier d'esquisse du code Arduino.
• À l'intérieur de ce dossier, créez un nouveau dossier appelé « données ».
• Dans le dossier de données, vous devez mettre les index.html et style.css.
• Télécharger le code Arduino
• Ensuite, pour télécharger les fichiers, cliquez sur l'IDE Arduino sur Tools> ESP32 Sketch Data Upload

Étape 8: déterminer l'adresse IP du serveur Web ESP32

On peut le trouver de deux manières.

• Moniteur série sur Arduino IDE (Outils> Moniteur série)
• Sur écran LCD

Étape 9: Test du serveur Web local

Ensuite, ouvrez un navigateur Web de votre choix et collez l'adresse IP suivante dans la barre d'adresse. Vous devriez obtenir une sortie similaire à la capture d'écran ci-dessous.

Étape 10: Accès à un serveur Web local depuis n'importe où dans le monde à l'aide de Ngrok

Ngrok est une plate-forme qui vous permet d'organiser l'accès à distance à un serveur Web ou à un autre service exécuté sur votre PC à partir d'Internet externe. L'accès est organisé via le tunnel sécurisé créé au démarrage de ngrok.

• Suivez ce lien et inscrivez-vous.
• Après avoir créé un compte, connectez-vous et allez dans l'onglet "Auth". Copiez la ligne du champ "Your Tunnel Authtoken".
• Cliquez sur l'onglet "Télécharger" dans la barre de navigation. Sélectionnez la version de ngrok qui correspond à votre système d'exploitation et téléchargez-la.
• Décompressez le dossier téléchargé et exécutez la ligne de commande.
• Connectez votre compte en entrant la commande suivante

./ngrok jeton d'autorisation

Démarrer un tunnel HTTP sur le port 80

./ngrok http Votre_adresse_IP: 80

Si tout a été fait correctement, le statut du tunnel devrait passer à « en ligne » et un lien de redirection devrait apparaître dans la colonne « Transfert ». En entrant ce lien dans votre navigateur, vous pouvez accéder au serveur Web de n'importe où dans le monde.