Construir un Dispositivo IoT con ESP8266-01 y Arduino Nano: Guía Completa

Componentes y Suministros

Arduino Nano R3	×	1
PCB Personalizado PCBWay	×	1
Espressif ESP8266 ESP-01	×	1
Módulo Relé de Dos Canales	×	1
LED (genérico)	×	2
Protoboard (genérica)	×	1
Cables jumper (genéricos)	×	1
Resistencia 1k ohm	×	2
Resistencia 2.21k ohm	×	1

Herramientas y Máquinas Necesarias

• Soldador (genérico)
• Hilo de soldar, sin plomo
• Flux para soldar

Aplicaciones y Servicios Online

• Microsoft Visual Studio Code (opcional)
• Arduino IDE
• Autodesk Eagle (opcional)

Sobre el Proyecto

Introducción

Hoy construiremos un dispositivo que se conecta a internet y permite al usuario controlar su hogar remotamente por WiFi. Usaremos la placa Arduino (cualquier modelo servirá) con el módulo WiFi ESP8266-01. ¡Empecemos!

¿Qué es un Hogar Inteligente?

Escenario de Funcionamiento

El Panel de Control

Construiremos una página web simple que funcione como panel de control para el usuario, permitiéndole controlar cualquier electrodoméstico conectado a nuestro sistema. Para construir la página usaremos:

• HTML
• CSS
• JQuery

El Hardware Embebido

La página web envía órdenes al ESP8266-01 que actúa como servidor web conectado a la placa Arduino. Según los datos recibidos, el Arduino realizará acciones como encender la bombilla, apagar la TV, etc. En esta parte usaremos:

• Arduino
• ESP8266-01

Primeros Pasos con el ESP8266-01

Como dijimos, necesitamos que nuestro Arduino se conecte a Internet, pero el Arduino Nano que usamos hoy no tiene esa característica. Usaremos el módulo WiFi ESP8266-01 para añadir WiFi a nuestro pequeño Arduino.

Hay muchos modelos de módulos WiFi ESP; ¿cuál elegir? Casi todos harán el trabajo, pero cada uno tiene sus características. Te animo a revisar las especificaciones de cada uno para elegir el más adecuado.

Según mis necesidades, el ESP8266-01 es el más adecuado por varias razones: es muy famoso en la comunidad maker, con una sólida comunidad online donde encontrar respuestas a casi cualquier problema. Su precio es muy barato (unos 1,5$).

También es muy fácil de usar con Arduino al ser un módulo WiFi serie que se comunica por comunicación serie. Tiene microcontrolador integrado, así que puedes usarlo como microcontrolador y módulo WiFi en uno, lo cual es genial. Tiene dos GPIOs integrados. Por solo 1,5$ obtienes todas estas características. Veamos su pinout.

Pinout del ESP8266-01

• VCC: conectar a +3.3V. No conectar a 5V, se dañará.
• GND: pin negativo, conectar a tierra del circuito.
• CH_PD: pin de habilitación del chip – Activo ALTO. Conectar a nivel lógico ALTO para permitir arranque.
• RST: pin de reinicio – Activo BAJO, al ponerse en BAJO reinicia el módulo.
• GPIO0, GPIO2: pines de entrada/salida de propósito general.
• Tx: conectar al Rx del microcontrolador (Arduino) para comunicación serie.
• Rx: conectar al Tx del microcontrolador (Arduino) para comunicación serie.

Configuración del ESP8266-01

El ESP8266-01 se comunica con Arduino por serie, lo que significa conectarlo a los pines serie 0, 1 (Tx, Rx) del Arduino. El problema es que estos pines estarán ocupados porque usaremos el monitor serie de Arduino junto con el ESP8266-01 para depuración. Necesitamos otros dos pines serie para el ESP8266-01.

Afortunadamente, Arduino lo facilita. Existe la librería "SoftwareSerial" que permite comunicación serie en otros pines digitales del Arduino, replicando la funcionalidad por software. Por ejemplo, puedo configurar pines 2, 3 (SoftwareSerial) como Rx y Tx junto con los pines 0, 1 (Hardware Serial).

La librería "SoftwareSerial" funciona bien mientras la velocidad de transmisión sea menor a 19.200 baudios. Pero hay un problema: el ESP8266-01 viene de fábrica programado a 115.200 baudios, difícil para "SoftwareSerial". Necesitamos reprogramar el módulo WiFi a 9600 baudios, que funciona bien con "SoftwareSerial". Usaremos "Comandos AT".

Cambiar la Velocidad de Comunicación del ESP8266-01

Paso 1: Subir un programa vacío al Arduino

Subimos código vacío para asegurar que nada se ejecute en segundo plano.

Paso 2: Cablear ESP8266-01 con Arduino

Para reconfigurar el ESP8266-01 y cambiar la velocidad (baud rate) usamos comandos AT. Son instrucciones para controlar módems, móviles, Bluetooth, WiFi, GSM. Con ellos podemos obtener info básica como fabricante, modelo, IMEI, etc. "AT" significa "ATtention" y se llaman comandos AT porque cada uno empieza con "AT". El prefijo "AT" no es parte del comando, solo indica el inicio.

Algunos Comandos AT Importantes

El comando "4" depende de la versión de firmware de tu ESP8266-01; si no funciona AT+CIOBAUD=<baud>, prueba AT+UART_DEF=<baud>,8,1,0,0.

Paso 1: Abrir Monitor Serie

Paso 2: Configurar velocidad a 115.200 baudios

El ESP viene de fábrica a 115.200 baudios. Configuramos el Arduino a esa velocidad solo la primera vez; luego la cambiaremos. Selecciona "Both NL & CR".

Paso 3: Enviar "AT" y esperar respuesta para confirmar que el ESP te oye.

Paso 4: Cambiar velocidad de comunicación del ESP8266-01

Mi ESP8266-01 tiene firmware 1.6 y el comando AT+UART_DEF=<baud>,8,1,0,0 me funciona. Si no te funciona, prueba AT+CIOBAUD=<baud>. Si responde "OK", la velocidad cambió de 115.200 a 9600 baudios. ¡FELICIDADES!

Cambia el monitor serie a 9600 y envía "AT" de nuevo para ver si el ESP nos oye a la nueva velocidad.

¡FUNCIONA! El ESP8266-01 ahora se comunica con Arduino a 9600 baudios.

Ahora, intentemos conectar a la red WiFi

Al pulsar Enter, el ESP8266-01 buscará la red y se conectará. Si tiene éxito devolverá:

WIFI CONNECTED
WIFI GOT IP

En este punto, cambiamos la velocidad del ESP8266-01 a 9600 baudios. Ahora construyamos el panel de control (página web) que el usuario usará para controlar sus electrodomésticos.

¿Qué es Internet?

En realidad, internet es un cable enterrado bajo tierra: fibra óptica, cobre o incluso satélite; pero internet es simplemente un cable. Cualquier dos computadoras conectadas a ese cable pueden comunicarse. Si la computadora está conectada directamente se llama servidor; si no, cliente.

Servidor: computadora especial que ejecuta un SO específico como Apache; guarda páginas web, archivos, bases de datos en su disco. Todo servidor conectado a internet tiene una IP única como 172.217.171.228, igual que un número de teléfono. Como las IPs no son fáciles de recordar, les damos un nombre: google.com (nombre de dominio).

Cliente: computadora como la que usamos diario, conectada indirectamente a internet a través de un proveedor (ISP) y también con IP única.

Escenario de Funcionamiento

Empieza con una petición enviada desde un navegador (Cliente) como Chrome, Firefox y termina con la respuesta del servidor web.

Introduces la URL makesomestuff.org en un navegador desde un computador (cliente); el navegador envía una petición al servidor web que aloja el sitio; el servidor devuelve una respuesta con página HTML u otro documento para mostrarla.

Exactamente eso haremos hoy: enviar una petición desde el navegador (Cliente) al ESP8266-01 (Servidor web), ambos en la misma red local. La petición contiene datos que dicen al Arduino qué hacer: encender o apagar una bombilla. ¡Construyamos la página web!

Construir la Página Web

Para construir nuestra web trataremos HTML, CSS, Javascript. Si nunca oíste estos nombres, no te preocupes, te explico.

HTML: "HyperText Markup Language", usamos para construir la estructura principal de cualquier web: botones, imágenes, párrafos, cabeceras, tablas, etc. Consiste en una serie de elementos que dicen al navegador cómo mostrar el contenido. Estos elementos se representan con etiquetas (tags).

CSS: "Cascading Style Sheets". Tras construir la estructura, necesitas que se vea bonita; aquí entra CSS para dar estilo. Es un lenguaje que describe el estilo de un elemento HTML. Consiste en selectores y bloques de declaración.

Javascript: lenguaje de programación para hacer la web más interactiva: animaciones, mapas, cosas complejas. Hoy lo usaremos para enviar una petición HTTP del cliente (navegador) al servidor (ESP8266-01) para acciones como encender/apagar una bombilla.

Construir la Estructura de la Página Web

Para entender fácilmente la explicación, recomiendo leer esta genial introducción a HTML.

Nuestro panel es simple: dos cabeceras de distinto tamaño, una imagen y dos botones: uno para encender un LED y otro para apagarlo.

Código

<!DOCTYPE html> <html> <head> <title>Smart Home System</title> </head> <body> <h1> Smart Home Control Panel</h1> <h4>Sorry But I'm a Meme Addict!</h4> <img src="dogMeme.jpg" width="400px" height="400px"> <br> <button id="111" class="button">LAMP ON</button> <br> <button id="110" class="button">LAMP OFF</button> </body> </html>

Explicación del Código

• <!DOCTYPE html>: define que es documento HTML5.
• <html>: elemento raíz.
• <head>: contiene meta información.
• <title>: título del documento, aparece en pestaña del navegador.
• <body>: contenido visible.
• <h1>: cabecera grande.
• <h4>: cabecera más pequeña; al disminuir el valor, disminuye la fuente.
• <img>: añade imagen; debe estar en misma carpeta del proyecto.
• <br>: salto de línea.
• <button>: añade botón.

Cada botón tiene dos atributos importantes: id y class. Hablaremos de por qué en la explicación de JQuery.

Estilizar la Página Web

Recomiendo leer esta genial introducción a CSS.

Ahora la web se ve mejor (NO DEMASIADO xD): fondo verde marino, contenido centrado, color y fuente de cabeceras cambiados. Usamos CSS para todo esto.

Código

<!DOCTYPE html> <html> <head> <title>Smart Home System</title> </head> <body style="background-color: seagreen; color: seashell; text-align: center;"> <h1> Smart Home Control Panel</h1> <h4>Sorry But I'm a Meme Addict!</h4> <img src="dogMeme.jpg" width="400px" height="400px"> <br> <button style="margin: 10px;" id="111" class="button">LAMP ON</button> <br> <button style="margin:10px;" id="110" class="button"> LAMP OFF</button> </body> </html>

Explicación

Añadimos style="background-color: seagreen; color: seashell; text-align: center;" dentro de la etiqueta body para centrar contenido, fondo verde marino y fuente color seashell.

También añadimos style="margin: 10px;" en las dos etiquetas button para margen de 10px alrededor de cada botón.

Enviar una Petición al Servidor Web

Recomiendo leer esta genial introducción a JQuery.

Ahora, tras construir estructura y estilo, añadimos funcionalidad a los dos botones. Cuando el usuario pulse "LAMP ON", su navegador enviará una petición con datos únicos al servidor (ESP8266-01); esos datos dicen al Arduino que encienda la lámpara. Lo mismo con "LAMP OFF". Veamos el código.

<!DOCTYPE html> <html> <head> <title>Smart Home System</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body style="background-color: seagreen; color: seashell; text-align: center;"> <h1> Smart Home Control Panel</h1> <h4>Sorry But I'm a Meme Addict!</h4> <img src="dogMeme.jpg" width="400px" height="400px"> <br> <button style="margin: 10px;" id="111" class="button">LAMP ON</button> <br> <button style="margin:10px;" id="110" class="button"> LAMP OFF</button> <script> //starting Javascript. $(".button").click(function () { var p = $(this).attr('id'); pin: p $.get("https://192.168.1.4:80/", { pin: p }); }); </script> </body> </html>

Explicación del Código

Primero importamos la librería JQuery en el head:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Toda la magia ocurre aquí:

<script>
$(".button").click(function () {
  var p = $(this).attr('id');
  pin: p
  $.get("https://192.168.1.4:80/", { pin: p });
});
</script>

• $(".button").click(function () {: al hacer clic en cualquier botón con class "button", dispara la función.
• var p = $(this).attr('id');: obtiene el valor del atributo "id" del botón pulsado y lo guarda en variable "p".
• pin: p: pone el valor de "p" en un diccionario (clave-valor) con clave "pin".
• $.get("https://192.168.1.4:80/", { pin: p });: envía petición GET al servidor con IP "192.168.1.4" (puerto 80) con datos del diccionario {pin: p}. IMPORTANTE: CAMBIA LA IP POR LA DE TU ESP8266.

Si pulsas "LAMP ON" (id=111), la petición GET contendrá pin=111. Si pulsas "LAMP OFF" (id=110), contendrá pin=110.

Lógica del Código

¿Por qué 111 y 110? El número se divide en dos partes:

• Parte uno: los dos primeros dígitos ("11") = pin Arduino donde está conectada la carga a controlar.
• Parte dos: el tercer dígito (1 o 0) = estado del pin (ENCENDIDO/APAGADO).

En el código Arduino recibiremos estos datos, separaremos las dos partes y guardaremos cada una en variable distinta: pinNumber y pinState, y ejecutaremos digitalWrite(pinNumber, pinState);.

Conectar la Carga

Conectamos la carga al Arduino para controlarla. Antes de conectar dispositivos de alto voltaje (aire acondicionado, TV), probamos con baja tensión (LEDs) para verificar que todo funciona. Aquí el diagrama:

El cableado es simple: pata positiva del LED al pin digital 11 del Arduino, negativa a GND a través de resistencia 1k ohm.

Código Arduino

#include <SoftwareSerial.h>
SoftwareSerial esp8266(2,3); // Rx=Pin2, Tx=Pin3
#define serialCommunicationSpeed 9600
#define DEBUG true
int redLED =12;
int blueLED =11;

void setup() {
  pinMode(redLED,OUTPUT);
  pinMode(blueLED,OUTPUT);
  digitalWrite(redLED,LOW);
  digitalWrite(blueLED,HIGH);
  Serial.begin(serialCommunicationSpeed);
  esp8266.begin(serialCommunicationSpeed);
  InitWifiModule();
  digitalWrite(blueLED,LOW);
}

void loop() {
  if(esp8266.available()) {
    if(esp8266.find("+IPD,")) {
      delay(1000);
      int connectionId = esp8266.read()-48;
      esp8266.find("pin=");
      int pinNumber = (esp8266.read()-48)*10;
      pinNumber = pinNumber + (esp8266.read()-48);
      int statusLed = (esp8266.read()-48);
      digitalWrite(pinNumber, statusLed);
      Serial.println(connectionId);
      Serial.print(pinNumber);
      Serial.print(" ");
      Serial.println(statusLed);
      String closeCommand = "AT+CIPCLOSE=";
      closeCommand+=connectionId;
      closeCommand+="\r\n";
      sendData(closeCommand,1000,DEBUG);
    }
  }
}

String sendData(String command, const int timeout, boolean debug) {
  String response = "";
  esp8266.print(command);
  long int time = millis();
  while((time+timeout) > millis()) {
    while(esp8266.available()) {
      char c = esp8266.read();
      response+=c;
    }
  }
  if(debug) Serial.print(response);
  return response;
}

void InitWifiModule() {
  sendData("AT+RST\r\n", 2000, DEBUG);
  sendData("AT+CWJAP=\"PUT YOUR SSID\",\"PUT YOUR PASSWORD\"\r\n", 2000, DEBUG);
  delay(3000);
  sendData("AT+CWMODE=1\r\n", 1500, DEBUG);
  delay(1000);
  sendData("AT+CIFSR\r\n", 1500, DEBUG);
  delay(1000);
  sendData("AT+CIPMUX=1\r\n", 1500, DEBUG);
  delay(1000);
  sendData("AT+CIPSERVER=1,80\r\n", 1500, DEBUG);
}

Explicación del código

El código es directo: implementamos dos funciones InitWifiModule() y sendData().

• sendData() regula cómo se envían los comandos AT al ESP8266-01.
• InitWifiModule() proporciona a sendData() los comandos AT necesarios.

En loop() leemos la cabecera de la petición HTTP entrante y buscamos "+IPD," que indica llegada exitosa; luego leemos el valor del pin: "111" si pulsaron "LAMP ON", "110" si "LAMP OFF".

No olvides poner tu SSID y contraseña WiFi en la línea 103 del código Arduino:

sendData("AT+CWJAP=\"PUT YOUR SSID\",\"PUT YOUR PASSWORD\"\r\n", 2000, DEBUG);

Para más explicación lee los comentarios en el código, está bien documentado.

Cómo Funciona

Tras subir el código al Arduino, abre el monitor serie y lee las respuestas del ESP.

Al inicio, si ves algo como la imagen anterior con "OK" al final, significa que el ESP8266-01 se conectó exitosamente a tu WiFi (punto de acceso) y obtuvo IP y MAC. Ahora abre tu web y controla cosas 😉

Si ves "FAIL" o "ERROR", el ESP no conecta a tu WiFi; verifica SSID y contraseña.

Añadir Carga de Alto Voltaje

Tras probar el código y confirmar que todo funciona, reemplazamos el LED aburrido por una carga de alto voltaje: aire acondicionado, TV, bombilla. Para controlar estos electrodomésticos necesitamos relés.

¿Qué son y por qué relés? Un relé es un interruptor mecánico que se activa/desactiva energizando una bobina. Se usa para controlar circuitos de alta potencia con señal de baja potencia (5V o 0V). Así controlamos dispositivos de alta potencia (aire acondicionado, lámpara AC) con solo señal 5V/0V. ¡Increíble!

El módulo relé de dos canales tiene dos pines de control (IN1, IN2) que conectamos a dos pines digitales Arduino para controlar el estado de las bobinas, cerrando/abriendo el circuito de carga.

En el lado opuesto del módulo, el COM (común) se conecta a un extremo de la carga. El otro extremo va a NC (Normalmente Cerrado) o NO (Normalmente Abierto); si va a NO, la carga está desconectada antes de activar y viceversa.

Diagrama de Cableado

Usamos módulo relé de dos canales para controlar dos cargas AC distintas. Conectamos el primer relé al pin digital 11 (Arduino) y el segundo relé al pin digital 12 (Arduino).

Modificamos ligeramente la web: añadimos dos botones más (ON/OFF) para la segunda carga.

<!DOCTYPE html> <html> <head> <title>Smart Home System</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body style="background-color: seagreen; color: seashell; text-align: center;"> <h1> Smart Home Control Panel</h1> <h4>Sorry But I'm a Meme Addict!</h4> <img src="dogMeme.jpg" width="400px" height="400px"> <br> <button style="margin: 10px;" id="111" class="button">Blue LED ON</button> <button id="110" class="button">Blue LED OFF</button> <br> <button style="margin:10px;" id="121" class="button"> Red LED ON</button> <button id="120" class="button">Red LED OFF</button> <script> $(".button").click(function () { var p = $(this).attr('id'); pin: p $.get("https://192.168.1.4:80/", { pin: p }); }); </script> </body> </html>

Cómo Funciona

Igual que antes: subes código Arduino (si no subido), abres monitor serie y verificas que el ESP conecta exitosamente a tu punto de acceso y obtiene IP y MAC. Luego abres tu web y controlas tus cosas 😉

Hacerlo Más Profesional

¿Qué tal pasar nuestro circuito de protoboard a una placa de circuito impreso (PCB) profesional para hacer el proyecto más rígido y sólido? Diseñé el circuito con Autodesk Eagle. Todos los archivos PCB son open-source: https://www.pcbway.com/project/shareproject/IoT_Using_Arduino_and_ESP8266_01.html

Porque amamos el open source 😉

Puedes pedir tu propia PCB en PCBWay, empresa con buena reputación que envía a más de 170 países a precios razonables. Solo abre el enlace a archivos PCB y pulsa "Add to cart". ¡Eso es todo!

Solución de Problemas

Si tu módulo ESP se conecta exitosamente al punto de acceso pero no pasa nada al pulsar botones de la web:

• Asegúrate de enviar la petición desde el navegador por puerto 80 (HTTP). Ejemplo: $.get("https://192.168.1.4:80/")
• Verifica que tu PC/Portátil y el ESP estén conectados al mismo punto de acceso.
• En código JQuery, asegúrate de poner la IP correcta del módulo ESP.
• Verifica que conectas la carga en pines digitales 11 y 12 del Arduino.
• No olvides guardar el archivo de la web tras cualquier cambio y recargar la página en el navegador para que surta efecto.

Conclusión

¡Terminamos! En este tutorial aprendimos a construir una web simple con HTML, CSS y JQuery. También a controlar una carga AC de forma inalámbrica desde un panel web, y a usar el genial módulo WiFi ESP8266-01 con Arduino.

¿Quieres ver más tutoriales y proyectos open source? Visita mi blog www.makesomestuff.org

Por último, si tienes preguntas déjalas en los comentarios, ¡estaré encantado de responder! 😉

Código

Página Web HTML

<!DOCTYPE html> <html> <head> <title>Smart Home System</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body style="background-color: seagreen; color: seashell; text-align: center;"> <h1> Smart Home Control Panel</h1> <h4>Sorry But I'm a Meme Addict!</h4> <img src="dogMeme.jpg" width="400px" height="400px"> <br> <button style="margin: 10px;" id="111" class="button">Blue LED ON</button> <button id="110" class="button">Blue LED OFF</button> <br> <button style="margin:10px;" id="121" class="button"> Red LED ON</button> <button id="120" class="button">Red LED OFF</button> <script> $(".button").click(function () { var p = $(this).attr('id'); pin: p $.get("https://192.168.1.4:80/", { pin: p }); }); </script> </body> </html>

Código Arduino Final Arduino

#include <SoftwareSerial.h>
SoftwareSerial esp8266(2,3);
#define serialCommunicationSpeed 9600
#define DEBUG true
int redLED =12;
int blueLED =11;

void setup() {
  pinMode(redLED,OUTPUT);
  pinMode(blueLED,OUTPUT);
  digitalWrite(redLED,LOW);
  digitalWrite(blueLED,HIGH);
  Serial.begin(serialCommunicationSpeed);
  esp8266.begin(serialCommunicationSpeed);
  InitWifiModule();
  digitalWrite(blueLED,LOW);
}

void loop() {
  if(esp8266.available()) {
    if(esp8266.find("+IPD,")) {
      delay(1000);
      int connectionId = esp8266.read()-48;
      esp8266.find("pin=");
      int pinNumber = (esp8266.read()-48)*10;
      pinNumber = pinNumber + (esp8266.read()-48);
      int statusLed = (esp8266.read()-48);
      digitalWrite(pinNumber, statusLed);
      Serial.println(connectionId);
      Serial.print(pinNumber);
      Serial.print(" ");
      Serial.println(statusLed);
      String closeCommand = "AT+CIPCLOSE=";
      closeCommand+=connectionId;
      closeCommand+="\r\n";
      sendData(closeCommand,1000,DEBUG);
    }
  }
}

String sendData(String command, const int timeout, boolean debug) {
  String response = "";
  esp8266.print(command);
  long int time = millis();
  while((time+timeout) > millis()) {
    while(esp8266.available()) {
      char c = esp8266.read();
      response+=c;
    }
  }
  if(debug) Serial.print(response);
  return response;
}

void InitWifiModule() {
  sendData("AT+RST\r\n", 2000, DEBUG);
  sendData("AT+CWJAP=\"Decoder\",\"1241997GoGo\"\r\n", 2000, DEBUG);
  delay(3000);
  sendData("AT+CWMODE=1\r\n", 1500, DEBUG);
  delay(1500);
  sendData("AT+CIFSR\r\n", 1500, DEBUG);
  delay(1500);
  sendData("AT+CIPMUX=1\r\n", 1500, DEBUG);
  delay(1500);
  sendData("AT+CIPSERVER=1,80\r\n", 1500, DEBUG);
}

Esquemáticos