Controlar ESP32 desde el móvil: BlueGrays IoT en 5 pasos

Controlar un ESP32 desde el móvil significa encender y apagar un relé, un LED o un motor conectado a la placa desde el teléfono que llevas en el bolsillo, y ver en él los valores de los sensores. Es el primer paso más divertido para aprender IoT. Como el ESP32 integra Wi-Fi de 2,4 GHz y Bluetooth, no necesitas ningún módulo adicional. La verdadera pregunta es qué camino elegir. Para controlar el ESP32 con una app puedes programar tu propio servidor web, conectarte por Bluetooth o crear un bot de Telegram. Los paneles en la nube como Blynk y Arduino IoT Cloud también son una opción. Cada método tiene un tiempo de configuración, un alcance y unas limitaciones distintas.

En esta guía vas a montar paso a paso el camino más corto: la función BlueGrays IoT de la app BlueGrays. Ohmi prepara el código por ti. Tú solo montas el circuito y cargas el código en el ESP32 desde el Arduino IDE. La placa se conecta al servidor de BlueGrays mediante una conexión cifrada, así que el móvil y la placa no tienen que estar en la misma red. Puedes encender la lámpara de casa desde el trabajo usando datos móviles. Primero harás un interruptor de lámpara con un relé. Después añadirás un DHT22 al circuito y llevarás la temperatura y la humedad a tu móvil como valores en vivo y gráficas. Al final del artículo encontrarás también una comparativa con otros métodos y una tabla con las soluciones a los errores más comunes.

5 formas de controlar un ESP32 desde el móvil

• Servidor web local: el ESP32 sirve una página web y tú accedes a la dirección IP de la placa desde el navegador del móvil. No necesitas ninguna cuenta, pero normalmente solo funciona desde la misma red Wi-Fi. Tienes los detalles en el artículo ESP32 Async Web Server.
• Bluetooth Classic y BLE: no necesitas internet ni router; el móvil se conecta directamente a la placa. En interiores, el alcance suele rondar los 10 metros. Explicamos ambos tipos en la guía ESP32 Bluetooth.
• Bot de Telegram: envías comandos a la placa por mensaje y recibes notificaciones de ella. Funciona también fuera de casa, pero no ofrece un panel con gráficas o deslizadores. Para configurarlo, consulta el artículo ESP32 Telegram Bot.
• Paneles en la nube (Blynk, Arduino IoT Cloud): defines plantillas y variables en la consola web, escribes el código tú mismo y diseñas tu propio panel en el móvil. Es un camino flexible, pero tendrás que aprender varias pantallas y conceptos distintos. Para Blynk tienes lista la Guía de Blynk con ESP32.
• BlueGrays IoT: en la app eliges una de las 8 plantillas disponibles. Ohmi prepara el código con tu configuración de pines y tu clave de dispositivo. En el móvil aparecen automáticamente, según la plantilla, el interruptor, el deslizador, el selector de color y las gráficas. No tienes que diseñar ningún panel ni montar un servidor.

Qué necesitas: lista de materiales y software

¿Cómo funciona el control del ESP32 con la app?

En BlueGrays IoT, el móvil y el ESP32 no se conectan directamente entre sí. Al encenderse, la placa se conecta primero a la red Wi-Fi de 2,4 GHz de tu casa. Después abre una conexión WebSocket cifrada (TLS) con el servidor de BlueGrays por el puerto 443 y la mantiene abierta todo el tiempo. La app del móvil se conecta a ese mismo servidor. Cuando tocas el interruptor de la lámpara, el comando va del móvil al servidor y del servidor a la placa. Como la conexión ya está abierta, el comando llega sin esperas. El valor de temperatura que envía la placa recorre el mismo camino en sentido contrario. El 443 es el mismo puerto que usan las páginas web, así que no tienes que redirigir puertos en el router, montar tu propio servidor ni conocer la IP de la placa.

Lo que identifica a la placa ante el servidor es la clave de dispositivo. Es un texto secreto que empieza por bgd_ y que genera la app al crear el dispositivo. La placa envía la clave en la cabecera de la conexión al abrirla, y así el servidor sabe a qué placa entregar los comandos del móvil. La clave no se imprime en el Monitor Serie. Si se pierde la conexión, la librería BlueGraysIoT vuelve a intentarlo sola con intervalos cada vez mayores. Los valores medidos mientras estaba desconectada los envía al reconectarse, y cuando se va y vuelve la luz restaura el último estado de los interruptores. Basta con que la placa y el móvil tengan acceso a internet: la placa puede estar en el Wi-Fi de casa y el móvil con datos móviles en otra ciudad.

El circuito: conectar el módulo de relé al ESP32

En las plantillas de interruptor de lámpara y estación de habitación, los pines por defecto son estos: el pin IN del relé va a GPIO26 y el pin de datos del DHT22 a GPIO4. Puedes cambiar estos pines en el paso 3 de la configuración. Comprueba el patillaje de tu placa con la herramienta Pinout. En algunas placas el pin de 5 V aparece rotulado como VIN y en otras como 5V.

Configurar BlueGrays IoT: los 5 pasos en la app

En la app, ve a Taller › Mis dispositivos › Añadir dispositivo. En la parte superior de la pantalla verás un contador del tipo "Paso 1 de 5". Los tres primeros pasos se hacen en el móvil, el cuarto en el ordenador y el quinto de nuevo en el móvil.

1. Placa y plantilla: en la pregunta "¿Qué placa tienes?" elige ESP32 y en "¿Qué va a hacer?" marca una de las 8 plantillas. Para la primera prueba, "Lámpara con relé" o la "Estación de habitación" con sensor son un buen comienzo. Ponle al dispositivo un nombre fácil de reconocer, como "Lámpara del salón".
2. Componentes y circuito: la lista "Prepara los componentes" muestra las piezas que necesita la plantilla. El esquema "Conecta los cables" dibuja qué terminal va a cada pin. En las plantillas con relé verás el aviso "Si vas a trabajar con 220 V, hazlo con alguien que sepa. Prueba primero con un LED.".
3. Wi-Fi y código: introduce el nombre y la contraseña de tu red Wi-Fi. El nombre de la red debe ser exactamente igual y pertenecer a la banda de 2,4 GHz. Si quieres, en la sección "Pines de conexión" puedes cambiar GPIO26 y GPIO4 por otros pines. Después pulsa el botón "Crear dispositivo y preparar código". Ohmi prepara el código con tu clave de dispositivo; pásalo a tu ordenador con "Copiar código" o "Compartir".
4. Cargar en el Arduino IDE: cargas el código en el ESP32. Explicamos uno a uno los subpasos de la app en la siguiente sección.
5. Conexión: la pantalla "Esperando a tu placa" avanza sola en cuanto la placa se conecta al servidor.

Pasos 4 y 5: cargar el código y comprobar la conexión

1. Si no tienes instalado el Arduino IDE, instálalo. Tienes los pasos en el artículo Instalación del Arduino IDE.
2. En el Gestor de placas, busca "esp32" e instala el paquete esp32 de Espressif. Necesitas la versión 3.x de este paquete; si tienes instalada la antigua 2.x, actualízala. La instalación del paquete también está explicada en el artículo ¿Qué es el ESP32?.
3. Conecta la placa con un cable USB que transmita datos. En el menú Herramientas › Placa elige ESP32 Dev Module (o el modelo de tu placa) y en Herramientas › Puerto elige el puerto nuevo que aparezca. Si no aparece ningún puerto, cambia el cable. Después instala el driver CP210x o CH340, según el chip USB de tu placa.
4. En el Gestor de bibliotecas, busca BlueGraysIoT y pulsa Instalar. Cuando te pregunte por las dependencias, elige "Instalar todo"; así se instalan también WebSockets, ArduinoJson y DHT sensor library. Si te atascas, consulta la guía Cómo añadir librerías en Arduino.
5. Abre un sketch nuevo, borra su contenido, pega el código que copiaste de la app y pulsa Subir. Si en la ventana inferior se queda atascado en "Connecting…", mantén pulsado el botón BOOT de la placa. Suelta el botón cuando empiecen a aparecer los porcentajes de escritura.
6. Abre el Monitor Serie y ajusta la velocidad a 115200. Primero deberías ver la línea "Wi-Fi connected" y unos segundos después "BlueGrays IoT: connected".

En cuanto aparece el mensaje de conectado en el monitor serie, la pantalla "Esperando a tu placa" del móvil pasa a "Conectado: los valores ya llegan en tiempo real.". Ahora toca el interruptor de la lámpara: deberías oír el clic del relé o ver cómo se enciende el LED. Si la placa no se conecta en 2 minutos, la app te pide que compruebes tres cosas. ¿Elegiste la red de 2,4 GHz? ¿Aparece "Wi-Fi connected" en el monitor serie? ¿Están bien las mayúsculas y minúsculas de la contraseña? Si la primera línea no aparece nunca, el problema está en el Wi-Fi. En ese caso te servirá la lista de comprobación del artículo El ESP32 no se conecta al WiFi.

Primer código: encender y apagar una lámpara desde el móvil

El código que prepara la app para la plantilla "Lámpara con relé" es parecido al de abajo. Las tres primeras líneas vienen rellenas con tu clave de dispositivo, el nombre de tu red y tu contraseña; aquí se muestran con marcadores de posición. El resto del código es corto: una función para el relé, la definición de un interruptor y un loop() de una sola línea.

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

Añadir un sensor: Estación de habitación (relé + DHT22)

Ahora vamos a añadir un DHT22 a la misma placa para enviar datos al móvil. Si eliges la plantilla "Estación de habitación" en la app, junto al interruptor de la lámpara aparecen los valores de temperatura (°C) y humedad (%) con sus gráficas. El DHT22 mide entre -40 y 80 °C con una precisión de unos ±0,5 °C. Mide la humedad en el rango del 0 al 100 % y se puede leer como máximo una vez cada 2 segundos. Conecta el pin de datos a GPIO4, VCC a 3V3 y GND a GND. Explicamos de forma comparada cómo funciona la familia DHT en el artículo Sensor de temperatura y humedad 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 parte del relé es igual que en el primer código; hay tres novedades. La primera es la línea bg.send("sicaklik", dht.readTemperature()): envía un valor de la placa a la app, y el primer parámetro es el nombre de la variable en la app. La segunda es la línea bg.setDeadband("sicaklik", 0.1). Define el margen mínimo de cambio: la temperatura no se vuelve a enviar hasta que cambia 0,1 °C, y para la humedad ese margen es del 1 %. La tercera es la comprobación millis() - lastReadMs >= 2000 dentro del loop. El sensor se lee cada 2 segundos, pero entretanto bg.loop() sigue ejecutándose sin esperar. La librería solo envía el valor cuando cambia y no supera la frecuencia del plan. Entre dos envíos de la misma variable pasa como mínimo 1 segundo en el plan gratuito y 0,2 segundos en Premium. Estos límites se controlan en el servidor; cambiar los números del código no permite saltárselos. Si la temperatura de la habitación se queda varios minutos en 23,4 °C, la placa no envía ningún valor nuevo; cuando pasa a 23,5 °C se envía un único mensaje. Si un cable está suelto o falta la resistencia pull-up, la lectura es inválida (NaN). Si no llegan valores, comprueba primero la conexión de GPIO4 y la alimentación.

¿Qué ves en el móvil?

• Estado: en la parte superior de la pantalla del dispositivo pone En línea o Sin conexión, y debajo aparece la información "Último dato hace…". Es lo primero que te dice si la placa está realmente conectada.
• Controles: en la plantilla de lámpara aparece un interruptor de encendido/apagado. En la de tira RGB tienes un selector de color, brillo del 0 al 100 % y selección de efectos. Y en la de cortina hay un deslizador de ángulo de 0 a 180°.
• Valores en vivo y gráficas: hay rangos de 1 h, 24 h, 7 días y 30 días. En las vistas de 7 y 30 días se muestra la media por hora. La gráfica indica los valores Mínimo, Máximo y Último. Mientras la placa sigue conectada, se añade un punto nuevo cada minuto.
• Código y clave: aquí puedes ver más tarde el código completo, la clave de dispositivo y los datos del Wi-Fi. Si necesitas volver a programar la placa, copia el código desde aquí.
• Renovar clave: úsalo si alguien ha visto tu clave o si has cambiado de placa. La clave antigua deja de ser válida al instante y basta con cargar una vez el nuevo código en la placa.
• Eliminar dispositivo: se borran el dispositivo y su historial de gráficas, y recuperas el hueco de dispositivo.

Gratis y Premium: ¿cuánto puedes usarlo?

Tu primer dispositivo es gratis. Para montar un interruptor de lámpara o una estación de habitación con un ESP32 no necesitas nada más. En la estación de habitación, la temperatura y la humedad son dos variables distintas. En el plan gratuito te llegan al móvil los valores en vivo de las dos, pero el historial de gráficas solo se guarda para una variable. Abajo tienes las diferencias entre planes; los detalles están en el artículo ¿Qué desbloquea BlueGrays Premium?.

Comparativa con otros métodos

La elección correcta depende de lo que necesites. Si no tienes nada de internet, Bluetooth o un servidor web local son la única opción. BlueGrays IoT, Blynk y Arduino IoT Cloud necesitan que la placa y el móvil tengan acceso a internet. Si buscas configuraciones flexibles, como diseñar la interfaz desde cero o integrarte con Home Assistant, ESP32 MQTT y los paneles en la nube ofrecen más opciones. BlueGrays IoT tiene 8 plantillas listas. A cambio, el esquema del circuito, la lista de componentes, el código y la interfaz del móvil vienen preparados y encajan entre sí. Mientras aprendes, hay menos probabilidades de que te equivoques en algún punto.

Seguridad: clave, contraseña del Wi-Fi y código

• La clave de dispositivo es la identidad de la placa. Quien conozca la clave que empieza por bgd_ puede hacerse pasar por tu placa. Por eso no la compartas en capturas de pantalla, foros ni grupos de mensajería.
• La contraseña del Wi-Fi se queda en el móvil. La contraseña no se envía al servidor; el nombre de la red sí se guarda con el dispositivo para poder mostrarte el código más tarde. Pero el código que cargas en la placa sí lleva la contraseña escrita.
• No compartas el código. Como avisa la propia app, el código contiene tu clave de dispositivo y la contraseña de tu Wi-Fi. Si vas a enseñar el código en un foro para pedir ayuda, borra antes las líneas DEVICE_KEY, WIFI_NAME y WIFI_PASSWORD.
• La conexión está cifrada. El tráfico entre la placa y el servidor va por el puerto 443 con TLS, así que nadie en la misma red puede leer los comandos.
• Si sospechas algo, renueva la clave. El botón Renovar clave anula la clave antigua al instante. Si vas a darle la placa a otra persona, renueva también la clave o elimina el dispositivo.

Errores frecuentes y soluciones

Ideas de proyectos IoT que puedes hacer con un ESP32

• Interruptor de lámpara: la versión completa del primer circuito de este artículo está en el proyecto Interruptor de lámpara IoT con ESP32 (relé). El proyecto incluye esquema del circuito y lista de componentes.
• Estación de habitación: relé y DHT22 juntos, con gráfica de temperatura: Estación de habitación IoT con ESP32 (relé + DHT22).
• Riego de plantas: el sensor de humedad del suelo se conecta a GPIO34 (un pin ADC1). Cuando la humedad baja del deslizador Umbral de riego del móvil, la bomba se enciende, y se apaga cuando sube 10 puntos por encima del umbral. Página del proyecto: Riego de plantas IoT con ESP32 (sensor de humedad + bomba). Para calibrar el sensor, consulta también el artículo Sensor de humedad del suelo.
• Tira LED RGB: elige desde el móvil el color, el brillo y el efecto (Fijo, Arcoíris, Respiración, Parpadeo) de una tira WS2812B de 30 LED en GPIO13: Tira LED RGB IoT con ESP32 (WS2812B). 30 LED en blanco total pueden consumir unos 1,8 A; alimenta la tira con una fuente de 5 V aparte. Más detalles en el artículo WS2812B NeoPixel.
• Abridor de cortinas: gira el servo SG90 de GPIO18 con un deslizador de 0 a 180°: Abridor de cortinas IoT con ESP32 (servo SG90). Alimenta también el servo con una fuente de 5 V aparte y une las GND.
• Otras plantillas: los proyectos de sensor de puerta, contador de movimiento y temperatura y humedad están explicados con la Pico W. En la app también puedes elegir estas plantillas para el ESP32.

Una vez montado el camino entre la placa, el servidor y el móvil, añadir un dispositivo nuevo te lleva unos minutos. Empieza con el interruptor de lámpara, luego comprueba con el DHT22 cómo llegan los datos al móvil y después pasa a proyectos más grandes como el riego o la cortina. En la app BlueGrays puedes ver estos proyectos IoT con ESP32 paso a paso, con su esquema del circuito y su código. Usa el filtro de proyectos IoT de Explorar y, con la tarjeta "Configurar como dispositivo IoT" de la página del proyecto, conecta el mismo circuito directamente a tu móvil.