La evolución del Internet de las Cosas (IoT) ha transformado por completo la forma en que interactuamos con el hardware. Hace unos años, conectar un microcontrolador a internet requería pesados y caros shields de red ethernet. En mi trayectoria como desarrollador, he comprobado que el ESP32 servidor web WiFi Arduino ha democratizado el acceso a la conectividad doméstica. Su procesador de doble núcleo y su transceptor inalámbrico integrado permiten correr servidores HTTP directamente en la placa de control. En este tutorial aprenderás a levantar un servidor web para controlar salidas digitales en tiempo real.
¿Por qué el ESP32 supera al Arduino UNO para IoT?
La placa de desarrollo ESP32, diseñada por Espressif Systems, se ha consolidado como el cerebro predilecto para proyectos de automatización e Internet de las Cosas, dejando atrás al tradicional Arduino UNO en aplicaciones conectadas. El ESP32 cuenta con un procesador Tensilica Xtensa Dual-Core de 32 bits que opera a frecuencias de hasta 240 MHz, una capacidad de procesamiento infinitamente superior a los 16 MHz de un solo núcleo de 8 bits del Arduino UNO.
En el ámbito de la memoria y la conectividad, la diferencia es abismal. El ESP32 posee 520 KB de memoria SRAM interna y soporte integrado para WiFi de 2.4 GHz y Bluetooth v4.2 BR/EDR y BLE. Esto nos permite ejecutar de manera holgada pilas de comunicación de red completas, encriptación SSL/TLS para transacciones seguras y levantar servidores locales directos sin necesidad de añadir módulos o cableados complementarios.
Configurar el entorno de desarrollo para ESP32 en el IDE
Para programar el ESP32 utilizando la conocida sintaxis de C++ del IDE de Arduino, debemos configurar el gestor de tarjetas para que descargue el compilador cruzado oficial de Espressif. Abre el IDE de Arduino, dirígete a Archivo > Preferencias. En el campo 'Gestor de URLs Adicionales de Tarjetas' copia y pega la URL de descarga oficial del repositorio de Espressif Systems.
Una vez agregada la dirección, abre Herramientas > Placa > Gestor de Tarjetas, busca 'esp32' e instala el paquete correspondiente. Tras este paso, en el menú Herramientas podrás seleccionar el modelo exacto de tu módulo de desarrollo (generalmente denominado 'ESP32 Dev Module') y configurar parámetros avanzados como la frecuencia de reloj y el puerto serie COM de comunicación.
Crear un servidor web con la librería WebServer de ESP32
La librería oficial WebServer.h nos permite gestionar peticiones de red de forma sumamente intuitiva estructurando rutas de enrutamiento HTTP en la memoria del ESP32. El servidor web escuchará en el puerto estándar 80. En lugar de procesar los sockets lógicos manualmente, la librería nos provee el método server.on() para asociar funciones callback cuando el cliente accede a una ruta específica.
Configuraremos dos rutas principales en el firmware: la ruta raíz (/), que responderá enviando la interfaz visual en formato de cadena de texto HTML, y rutas de acción como /led/on y /led/off, las cuales modificarán físicamente el estado de voltaje del pin digital asignado y responderán inmediatamente confirmando la operación.
Diseño de la interfaz HTML embebida para control de LEDs
Dado que el ESP32 debe responder con la interfaz completa directamente en el cuerpo del mensaje HTTP, guardaremos el código HTML en una constante de cadena de texto (string literal) dentro de la memoria Flash del microcontrolador. Diseñaremos una pantalla de control estéticamente agradable optimizada para dispositivos móviles, implementando estilos CSS directamente embebidos.
La interfaz incluirá botones grandes con esquinas redondeadas que realicen llamadas HTTP directas a las rutas de acción del ESP32. Para proyectos empresariales de automatización en Ecuador donde se requieran paneles interactivos avanzados en tiempo real, es más conveniente separar la interfaz y comunicarla con el ESP32 mediante una API de WebSockets o MQTT, como explico en mi post sobre conectividad MQTT.
Lectura de sensores y actualización de datos en el navegador
Además de actuar como receptor de comandos para encender actuadores, un servidor web embebido puede actuar como emisor de telemetría ambiental. Podemos programar el ESP32 para que lea la entrada analógica conectada a un potenciómetro o un sensor de temperatura digital y pinte dinámicamente este valor en el código HTML de respuesta utilizando concatenación de cadenas en el microcontrolador.
Para evitar que el usuario deba actualizar la pantalla manualmente para obtener la última medición, inyectaremos un pequeño fragmento de JavaScript (usando la API Fetch nativa) en el HTML embebido. Este código consultará en segundo plano un endpoint ligero (ejemplo: /leer-sensor) una vez por segundo, actualizando los textos en pantalla de forma fluida y sin recargas de página completas.
Asignar dirección IP estática al ESP32 en la red local
Por defecto, cuando el ESP32 se conecta al enrutador inalámbrico de la oficina o el hogar, el protocolo DHCP le asigna una dirección IP de forma dinámica. Esto significa que si el microcontrolador se reinicia, su IP podría cambiar, impidiendo que los usuarios accedan de forma consistente al servidor web. Para resolver esto, configuraremos una IP estática en el código.
Definiremos la IP deseada (por ejemplo: 192.168.100.150), la puerta de enlace predeterminada de la red y la máscara de subred. Al invocar la función de configuración WiFi.config() antes de iniciar la conexión inalámbrica, forzaremos al enrutador a reservar dicha IP para el ESP32, garantizando un acceso ininterrumpido en el tiempo.
Código completo para Arduino
A continuación se presenta el sketch completo para levantar el servidor web interactivo en tu placa ESP32:
#include
#include
// Credenciales de tu enrutador WiFi
const char* ssid = "Nombre_De_Tu_Red";
const char* password = "Clave_De_Tu_Red";
// Configuracion de IP estatica en tu red local
IPAddress local_IP(192, 168, 100, 150);
IPAddress gateway(192, 168, 100, 1);
IPAddress subnet(255, 255, 255, 0);
// Inicializamos el servidor web en el puerto 80
WebServer server(80);
// Pin del LED integrado (generalmente pin 2 en ESP32)
const int ledPin = 2;
bool estadoLed = false;
// Funcion para generar la interfaz HTML embebida
String generarHtml() {
String html = "";
html += "";
html += "";
html += "Servidor Web ESP32
";
html += "Estado del LED: " + String(estadoLed ? "ENCENDIDO" : "APAGADO") + "
";
html += "ENCENDER";
html += "APAGAR";
html += "";
return html;
}
void manejarRaiz() {
server.send(200, "text/html", generarHtml());
}
void encenderLed() {
digitalWrite(ledPin, HIGH);
estadoLed = true;
server.send(200, "text/html", generarHtml());
}
void apagarLed() {
digitalWrite(ledPin, LOW);
estadoLed = false;
server.send(200, "text/html", generarHtml());
}
void setup() {
Serial.begin(9600);
pinMode(ledPin, OUTPUT);
// Configuramos IP estatica
if (!WiFi.config(local_IP, gateway, subnet)) {
Serial.println("Error al configurar la IP Estatica");
}
// Conectamos a la red WiFi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("
WiFi Conectado!");
Serial.print("Servidor web en IP: http://");
Serial.println(WiFi.localIP());
// Definimos las rutas del servidor
server.on("/", manejarRaiz);
server.on("/led/on", encenderLed);
server.on("/led/off", apagarLed);
// Iniciamos el servidor
server.begin();
}
void loop() {
// Atendemos las peticiones de red continuamente
server.handleClient();
}
El loop principal invoca la función server.handleClient(), la cual detecta peticiones entrantes y las enruta a las funciones callback de forma asíncrona y transparente.
Errores comunes y cómo solucionarlos
El error más recurrente en principiantes es que la placa ESP32 se quede colgada imprimiendo puntos suspensivos en el monitor serie indefinidamente sin llegar a conectarse. Esto se debe comúnmente a escribir incorrectamente las credenciales del enrutador o a intentar conectarse a una red WiFi corporativa de 5 GHz. El chip ESP32 estándar solo soporta conexiones en la banda de 2.4 GHz. Verifica la frecuencia de tu router.
Otro problema clásico es que el navegador web imprima el error "Connection Refused" o se agote el tiempo de espera (timeout) al intentar ingresar a la dirección IP. Asegúrate de que tu computadora de desarrollo y el ESP32 estén conectados exactamente al mismo enrutador y subred, ya que el direccionamiento IP local bloquea por seguridad las peticiones de dispositivos que provengan de redes externas.
Conclusión
Montar un servidor web en un chip ESP32 es la forma ideal de ingresar al diseño de sistemas IoT. Su versatilidad y bajo costo lo posicionan como la placa preferida para crear sistemas de control remoto inteligentes. Si estás buscando implementar soluciones de automatización a nivel corporativo, te sugiero conocer mis servicios.
¿Necesitas implementar esto en un proyecto real? Revisa mis servicios de desarrollo o contáctame directamente.