LED controlado por Internet utilizando un servidor web basado en ESP32: 10 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:42

Descripción del proyecto

En este ejemplo, descubriremos cómo crear un servidor web basado en ESP32 para controlar el estado del LED, al que se puede acceder desde cualquier parte del mundo. Necesitará una computadora Mac para este proyecto, pero puede ejecutar este software incluso en una computadora económica y de bajo consumo como la Raspberry Pi.

Preparación del ESP32 con Arduino IDE

Para comenzar a programar el ESP32 usando el IDE de Arduino y el lenguaje de programación Arduino, necesitará un complemento especial. Lea sobre cómo preparar el IDE de Arduino para ESP32 en Mac OS en el siguiente enlace.

Suministros

Para este tutorial, necesitará los siguientes elementos:

• Placa de desarrollo ESP32 5mm
• LEDResistor 220ohm
• Pantalla LCD 16x2 con módulo I2C
• Tablero de circuitos
• Cables de puente
• Cable micro USB

Paso 1: construcción del circuito

Realice las conexiones como se muestra en el siguiente diagrama esquemático a continuación

Comience conectando la salida de voltaje de suministro de 3V3 en el ESP32 y GND a la placa de pruebas. Conecte el LED a través de la resistencia al ESP32 usando el pin 23 de GPIO como pin de salida digital. Después de eso, conecte el pin SDA de la pantalla LCD 16x2 al pin 21 de GPIO y SCL al pin 22 de GPIO.

Paso 2: Descripción general rápida del sistema de archivos SPIFFS

SPIFFS son las siglas de "Serial Peripheral Interface Flash File System", es decir, sistema de archivos para memoria flash que transfiere datos a través de SPI. En consecuencia, SPIFFS es un sistema de archivos simplificado diseñado para microcontroladores con chips flash que transmiten datos a través del bus SPI (como la memoria flash ESP32).

SPIFFS es más útil para usar con ESP32 en las siguientes situaciones:

• Crear archivos para almacenar configuraciones
• Almacenamiento de datos permanente.
• Crear archivos para almacenar una pequeña cantidad de datos (en lugar de usar una tarjeta microSD para esto).
• Almacenamiento de archivos HTML y CSS para crear un servidor web.

Paso 3: instalación del cargador de arranque SPIFFS en Mac OS

Puede crear, guardar y escribir datos en archivos almacenados en el sistema de archivos ESP32 directamente usando el complemento en Arduino IDE.

En primer lugar, asegúrese de tener instalada la última versión del IDE de Arduino y luego haga lo siguiente:

• Abra el siguiente enlace y descargue el archivo "ESP32FS-1.0.zip"
• Vaya al directorio IDE de Arduino, que se encuentra en la carpeta Documentos.
• Cree una carpeta de herramientas, si no existe. Dentro del directorio de herramientas, cree otra carpeta ESP32FS. Dentro de ESP32FS cree otro, que se llama herramienta.
• Descomprima el archivo ZIP descargado en el paso 1 en la carpeta de herramientas.
• Reinicie su Arduino IDE.
• Para comprobar si el complemento se instaló correctamente, abra el IDE de Arduino y haga clic en "Herramientas" y compruebe si hay un elemento "Carga de datos de Sketch ESP32" en este menú.

Paso 4: instalación de bibliotecas

Las bibliotecas ESPAsyncWebServer y AsyncTCP le permiten crear un servidor web utilizando archivos del sistema de archivos de ESP32. Para obtener más información sobre estas bibliotecas, consulte el siguiente enlace.

Instale la biblioteca ESPAsyncWebServer

• Haga clic aquí para descargar el archivo ZIP de la biblioteca.
• Descomprime este archivo. Debería obtener la carpeta ESPAsyncWebServer-master.
• Cambie el nombre a "ESPAsyncWebServer".

Instale la biblioteca AsyncTCP

• Haga clic aquí para descargar el archivo ZIP de la biblioteca.
• Descomprime este archivo. Debería obtener la carpeta AsyncTCP-master.
• Cambie el nombre a "AsyncTCP".

Mueva las carpetas ESPAsyncWebServer y AsyncTCP a la carpeta de bibliotecas, que se encuentra dentro del directorio Documentos.

Finalmente, reinicie el IDE de Arduino.

Paso 5: cree un archivo Index.html y Style.css con el siguiente contenido

La plantilla HTML / CSS para el botón de alternancia se tomó de la siguiente fuente.

Paso 6: Código Arduino

Básicamente, el código se basó en el código Arduino que se tomó del servidor web ESP32 usando SPIFFS y Cómo usar I2C LCD con ESP32 en Arduino IDE.

Paso 7: Cargue el código y los archivos de Arduino usando el cargador SPIFFS

• Abra la carpeta de bocetos del código Arduino.
• Dentro de esta carpeta, cree una nueva carpeta llamada "datos".
• Dentro de la carpeta de datos, debe colocar index.html y style.css.
• Cargar código Arduino
• Luego, para cargar los archivos, haga clic en Arduino IDE en Herramientas> Carga de datos de boceto ESP32

Paso 8: Determine la dirección IP del servidor web ESP32

Se puede encontrar de dos formas.

• Monitor serie en Arduino IDE (Herramientas> Monitor serie)
• En la pantalla LCD

Paso 9: probar el servidor web local

A continuación, abra un navegador web de su elección y pegue la siguiente dirección IP en la barra de direcciones. Debería obtener una salida similar a la siguiente captura de pantalla.

Paso 10: Acceso a un servidor web local desde cualquier lugar del mundo usando Ngrok

Ngrok es una plataforma que le permite organizar el acceso remoto a un servidor web o algún otro servicio que se ejecute en su PC desde Internet externo. El acceso se organiza a través del túnel seguro creado al inicio de ngrok.

• Siga este enlace y regístrese.
• Después de crear una cuenta, inicie sesión y vaya a la pestaña "Auth". Copie la línea del campo "Your Tunnel Authtoken".
• Haga clic en la pestaña "Descargar" en la barra de navegación. Seleccione la versión de ngrok que coincida con su sistema operativo y descárguela.
• Descomprima la carpeta descargada y ejecute la línea de comando.
• Conecte su cuenta ingresando el siguiente comando

./ngrok authtoken

Inicie un túnel HTTP en el puerto 80

./ngrok http Su_IP_Dirección: 80

Si todo se hizo correctamente, entonces el estado del túnel debería cambiar a "en línea", y debería aparecer un enlace de redireccionamiento en la columna "Reenvío". Al ingresar este enlace en su navegador, puede acceder al servidor web desde cualquier parte del mundo.