Con la tarjeta de desarrollo ESP32 y la Base de Datos en tiempo real Firebase, podremos realizar el control de manera remota de cargas eléctricas como un LED, lampara, luminarias, motores, o lo que desees controlar.
En el mundo de la electrónica y el Internet de las Cosas (IoT), combinar hardware, bases de datos en la nube y desarrollo web puede resultar en soluciones innovadoras y prácticas. En esta guía, exploraremos cómo encender y apagar un LED conectado a un ESP32 utilizando Firebase para la transmisión de datos en tiempo real, y una página web programada con JavaScript (VueJS) y HTML para la interfaz de usuario. Este proyecto es ideal para quienes buscan aprender a integrar diferentes tecnologías en una aplicación IoT funcional y escalable.
Tutorial Encender LED con WIFI y JavaScript Usando ESP32 y Firebase
¿Por Qué Elegir ESP32, Firebase y JavaScript?
El ESP32 es un microcontrolador económico y potente, ideal para proyectos IoT gracias a su conectividad WiFi integrada. Firebase, por su parte, es una solución en la nube que permite manejar datos en tiempo real, lo que lo convierte en una herramienta perfecta para sincronizar dispositivos remotos. Con JavaScript y frameworks como VueJS, puedes crear interfaces web interactivas que permitan a los usuarios controlar dispositivos fácilmente desde cualquier navegador.
Materiales Necesarios
- ESP32
- LED y Resistor (220 ohmios)
- Cables de conexión
- Protoboard
- Cuenta en Firebase
- Editor de texto (como Visual Studio Code)
- Navegador Web
Para poder realizar la programación de la placa NodeMCU ESP32 previamente se debe contar con el IDE de Arduino correctamente configurado para poder subir el código, solo basta especificar la siguiente dirección URL en el gestor de tarjetas del IDE Arduino:
Gestor URL de Tarjetas: https://dl.espressif.com/dl/package_esp32_index.json
En el siguiente vídeo se explican los pasos para configurar el IDE de Arduino para programar la placa ESP32 facilmente.
Tutorial Como Programar la ESP32 con Arduino IDE
Después de tener el entorno de desarrollo listo para escribir las lineas de código, puedes probar con este código para realizar la conexión entre la ESP32 y Firebase:
CÓDIGO ESP32
#include <WiFi.h>
#include "FirebaseESP32.h"
#define FIREBASE_HOST "your-firebase-host"
#define FIREBASE_AUTH "your-firebase-auth"
#define WIFI_SSID "Wifi-name"
#define WIFI_PASSWORD "your-password-Wifi"
FirebaseData firebaseData;
String path = "/Test";
void setup() {
Serial.begin(9600);
pinMode(2,OUTPUT);
pinMode(27,OUTPUT);
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
Serial.print("[Wi-Fi]...Connecting");
while (WiFi.status() != WL_CONNECTED)
{
Serial.print(".");
delay(300);
}
Serial.println();
Serial.print("Connected with IP: ");
Serial.println(WiFi.localIP());
Serial.println();
Firebase.begin(FIREBASE_HOST, FIREBASE_AUTH);
Firebase.reconnectWiFi(true);
//Firewall that allows only GET and POST requests
//Firebase.enableClassicRequest(firebaseData, true);
}
void loop() {
Firebase.getInt(firebaseData, path + "/LED");
Serial.println("Data= " + String(firebaseData.intData()));
delay(200);
if(firebaseData.intData()==1)
{
digitalWrite(2,HIGH);
digitalWrite(27,HIGH);
}
else{
digitalWrite(2,LOW);
digitalWrite(27,LOW);
}
// Firebase.end(firebaseData);
}
CÓDIGO HTML Y JAVASCRIPT CON VUEJS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<form @submit.prevent="enviarMensaje">
LED:
<select v-model="LED" style="width:100px; height:30px">
<option value=0>0</option>
<option value=1>1</option>
</select>
<input type="submit" value="Enviar!">
</form>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- The core Firebase JS SDK is always required and must be listed first
<script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-app.js"></script>-->
<script src="https://www.gstatic.com/firebasejs/7.13.1/firebase.js"></script>
<script src="./main.js"></script>
</html>
CÓDIGO JAVASCRIPT (main.js)
var firebaseConfig = {
apiKey: "YOUR APIKEY",
authDomain: "YOUR DOMAIN",
databaseURL: "YOUR URL",
projectId: "YOUR ID",
storageBucket: "YOUR STORAGE",
messagingSenderId: "YOUR MESSAGING",
appId: "YOUR APPID"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const app = new Vue({
el: "#app",
data: {
LED: null,
},
methods: {
enviarMensaje() {
firebase.database().ref("/Test")
.set({
LED: parseInt(this.LED),
});
}
}
});
Si deseas ver otro ejemplo de programación de la página web con HTML y Javascript (VueJS), puedes encontrar el código aquí:
-Código HTML y JavaScript de Página Web para Encender y Apagar LED: https://alex7tutoriales.blogspot.com/2020/04/esp8266-firebase-javascript-vuejs-iot.html
También puedes seguir este tutorial para la programación de la página web donde es posible controlar el encendido y apagado del LED remotamente:
Tutorial Aplicación Web IoT con ESP8266 y Firebase con JavaScript y VueJS
Si aún no sabes como crear un proyecto el Firebase, este tutorial te guiará para crear uno desde cero y sin necesidad de tener conocimientos previos, es bastante intuitiva:
Tutorial Cómo Crear un Proyecto en FIREBASE
Espero les sea de mucha utilidad estos tutoriales y el código de programación de la ESP32 para conectar con Firebase y así puedan realizar el control a distancia de sus proyectos de Electrónica.
Cómo Funciona el Proyecto
El ESP32 se conecta a Firebase para enviar y recibir datos en tiempo real. A través de una interfaz web desarrollada con HTML y JavaScript (utilizando VueJS), puedes enviar comandos para encender o apagar el LED. Estos comandos se reflejan en la base de datos en tiempo real de Firebase, y el ESP32 actúa en consecuencia, controlando el estado del LED.
Paso a Paso: Configuración del Proyecto
1. Configuración del Hardware
Conecta el LED al ESP32 de la siguiente manera:
- Conecta el ánodo del LED (la pata más larga) a un pin GPIO del ESP32, por ejemplo, el pin 26.
- Conecta un resistor de 220 ohmios en serie con el LED para limitar la corriente.
- Conecta el cátodo del LED (la pata más corta) a GND.
2. Configuración de Firebase
- Ingresa a la Consola de Firebase y crea un nuevo proyecto.
- Activa la base de datos en tiempo real y configura las reglas para permitir lectura y escritura (idealmente solo para pruebas).
- Copia las credenciales de tu proyecto, incluyendo el host y la clave de autenticación.
3. Programación del ESP32
El ESP32 necesita conectarse a Firebase y leer los cambios en la base de datos para controlar el LED. Usa el IDE de Arduino con la librería Firebase ESP32.
Ejemplo de código:
#include <WiFi.h>
#include <FirebaseESP32.h>
#define WIFI_SSID "TuRedWiFi"
#define WIFI_PASSWORD "TuContraseñaWiFi"
#define FIREBASE_HOST "TuProyecto.firebaseio.com"
#define FIREBASE_AUTH "TuClaveFirebase"
#define LED_PIN 26
FirebaseData firebaseData;
void setup() {
pinMode(LED_PIN, OUTPUT);
digitalWrite(LED_PIN, LOW);
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
}
Firebase.begin(FIREBASE_HOST, FIREBASE_AUTH);
}
void loop() {
if (Firebase.getBool(firebaseData, "/LED")) {
digitalWrite(LED_PIN, firebaseData.boolData() ? HIGH : LOW);
}
}
4. Desarrollo de la Página Web
Crea una página web sencilla con HTML, JavaScript y VueJS para controlar el LED:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Control LED IoT</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.15.0/firebase-database.js"></script>
</head>
<body>
<div id="app">
<h1>Controla el LED con Firebase</h1>
<button @click="encenderLED">Encender LED</button>
<button @click="apagarLED">Apagar LED</button>
</div>
<script>
// Configuración de Firebase
const firebaseConfig = {
apiKey: "TuApiKey",
authDomain: "TuProyecto.firebaseapp.com",
databaseURL: "https://TuProyecto.firebaseio.com",
projectId: "TuProyecto"
};
firebase.initializeApp(firebaseConfig);
const db = firebase.database();
new Vue({
el: '#app',
methods: {
encenderLED() {
db.ref('/LED').set(true);
},
apagarLED() {
db.ref('/LED').set(false);
}
}
});
</script>
</body>
</html>
5. Pruebas del Sistema
Sube el código al ESP32.
Abre la página web en tu navegador, conéctala al mismo proyecto Firebase, y prueba los botones para encender y apagar el LED.
Aplicaciones Prácticas
- Domótica: Control de luces y dispositivos en el hogar desde una página web.
- Educación: Enseñar integración de hardware y software a estudiantes de electrónica.
- Prototipos IoT: Bases para desarrollar sistemas más complejos, como controles de maquinaria o dispositivos inteligentes.
Consejos y Mejoras
- Implementa Autenticación: Protege el acceso a Firebase para evitar el uso no autorizado.
- Integra más Dispositivos: Usa el mismo sistema para controlar múltiples LEDs u otros aparatos.
- Diseño Responsive: Adapta la interfaz web para que funcione bien en dispositivos móviles.
Este proyecto demuestra cómo integrar el ESP32 con Firebase y JavaScript para crear una aplicación IoT sencilla pero poderosa. Es un excelente punto de partida para explorar el mundo de la electrónica conectada y aprender a combinar hardware, software y servicios en la nube.
Como siempre, espero que estos videos e información les sea muy útil, no olvides suscribirte a mi canal en YouTube. Saludos 😎
Tags
Arduino
conexión
electrónica
ESP32
Firebase
Internet de las Cosas
Internet Of Things
IoT
JavaScript
wifi