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.
ESP32 y Firebase - Encender LED con WIFI y JavaScript
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.
ESP32 con Arduino (Programación PRIMEROS PASOS)
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:
ESP8266 Conexión Firebase con JavaScript y VueJS (Aplicación Web #IoT) ⚡💻
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:
Crear un Proyecto en FIREBASE [ESP8266 y Firebase IoT]
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.
Si aun no estas suscrito a mi canal en YouTube aquí lo puedes encontrar y activar la campanita para que te lleguen notificaciones de cuando suba un vídeo:
Saludos.
