Conexión del ESP8266 con Firebase usando JavaScript y Vue.js: Control de Lámpara AC desde una Aplicación Web IoT

byAlex7 Tutoriales -
0
ESP8266 Conexión Firebase con JavaScript y VueJS (Aplicación Web IoT).
Control de encendido de Bombillo o Lampara AC desde Wifi usando ESP8266 NodeMCU conectado a la base de datos en tiempo real Firebase, la programación de la app web se hizo con Vanilla JavaScript y VueJS.

ESP8266 Conexión Firebase con JavaScript y VueJS (Aplicación Web #IoT) ⚡💻


-----------------------------------------

CÓDIGO HTML JAVASCRIPT Y VUEJS

CÓDIGO 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="status" 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>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);

//Referencia a la base de datos firebase
var db=firebase.database();

//Guardar con set
/*
db.ref("/pinOut").set({

    status: 1

});*/

new Vue({

el: "#app",

data: {
    status: null,
},

methods: {

  enviarMensaje() {
    db.ref("/pinOut")
    .set({
       status: parseInt(this.status),
    });
  }

}

});

</script>

</html>

CÓDIGO CON VANILLA JAVASCRIPT (SIN 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>

        <form onSubmit="return enviarMensaje()">
    
          LED:
          <select id="status" style="width:100px; height:30px">
            <option value=0>0</option>
            <option value=1>1</option>
          </select>
    
          <input type="submit" value="Enviar!">
          
        </form>
    
      </div>

</body>

<!-- 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>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);

//Referencia a la base de datos firebase
var db=firebase.database();

//Guardar con set
/*
db.ref("/pinOut").set({

    status: 1

});*/

function enviarMensaje()
{
    var status=document.getElementById("status").value;
    db.ref("/pinOut")
    .set({
       status: parseInt(status),
    });
    return (false);
    
}


</script>

</html>

CÓDIGO ESP32 (ARDUINO)


#include <WiFi.h>
#include "FirebaseESP32.h"

#define FIREBASE_HOST "#########"

#define FIREBASE_AUTH "#########"

#define WIFI_SSID "######"

#define WIFI_PASSWORD "######"

FirebaseData firebaseData;

String path = "/pinOut";

int valor_sensado = 0;

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() {

//Leer datos de Firebase y enviar a actuadores

Firebase.getInt(firebaseData, path + "/status");

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);

delay(1000);

}

El Internet de las Cosas (IoT) está transformando la forma en que interactuamos con la tecnología, permitiendo que dispositivos cotidianos sean controlados de manera remota a través de aplicaciones web. En esta entrada, exploraremos cómo integrar el módulo ESP8266 NodeMCU con Firebase, una base de datos en tiempo real, para controlar el encendido y apagado de una lámpara o bombilla AC mediante WiFi. Además, se utilizarán tecnologías como Vanilla JavaScript y Vue.js para desarrollar una aplicación web intuitiva y funcional.


¿Qué es el ESP8266 NodeMCU y por qué usar Firebase?
El ESP8266 NodeMCU es un microcontrolador con conectividad WiFi integrado, ideal para proyectos IoT. Este dispositivo puede conectarse a internet y comunicarse con servidores o bases de datos, lo que lo hace perfecto para aplicaciones como automatización del hogar, monitoreo de sensores y control remoto de dispositivos.
Firebase, por su parte, es una plataforma de Google que proporciona una base de datos en tiempo real, lo que significa que cualquier cambio realizado en los datos es reflejado casi instantáneamente en todos los dispositivos conectados. Esto lo convierte en una herramienta esencial para proyectos que requieren sincronización inmediata, como el control remoto de una lámpara.
Proyecto: Control de Lámpara AC a través de WiFi
El objetivo de este proyecto es simple pero poderoso: crear una aplicación web que permita encender y apagar una lámpara desde cualquier lugar utilizando WiFi. Para lograrlo, seguimos estos pasos:

Configuración del ESP8266 NodeMCU
El ESP8266 se conecta a Firebase para leer y escribir datos. Cuando un usuario interactúa con la aplicación web, el estado de la lámpara (encendida o apagada) se actualiza en Firebase, y el ESP8266 reacciona en consecuencia, activando o desactivando el relé que controla la lámpara AC.
Desarrollo de la Aplicación Web
La interfaz de usuario se desarrolla con Vue.js, un framework de JavaScript que facilita la creación de aplicaciones dinámicas. Por otro lado, se utiliza Vanilla JavaScript para manejar la lógica de interacción con Firebase, asegurando un rendimiento óptimo y una implementación ligera.
Integración con Firebase
Firebase actúa como intermediario entre la aplicación web y el ESP8266. Las actualizaciones en tiempo real permiten que los comandos enviados desde la web se reflejen instantáneamente en el microcontrolador.


Cómo se desarrolló la solución


Configuración del ESP8266 NodeMCU
Para iniciar, cargamos un código en el ESP8266 que lo conecta a la red WiFi y a Firebase. El microcontrolador está programado para escuchar cambios en la base de datos y actuar en consecuencia. Por ejemplo, si la aplicación web envía un comando para encender la lámpara, el ESP8266 detecta el cambio y activa un relé conectado al circuito eléctrico de la lámpara.


Desarrollo de la aplicación web
La aplicación web utiliza HTML, CSS, y JavaScript para crear una interfaz interactiva que permite a los usuarios controlar la lámpara. Con Vue.js, se implementan componentes reutilizables y una experiencia de usuario optimizada.


Conexión con Firebase
Firebase se configura para recibir solicitudes de la aplicación web y enviar actualizaciones en tiempo real al ESP8266. Esto se logra a través de su API REST y la integración con el SDK de Firebase para JavaScript.


Ventajas del Proyecto
Este proyecto ofrece múltiples beneficios tanto para principiantes como para expertos en IoT:

  • Automatización: Control remoto de dispositivos eléctricos sin necesidad de estar físicamente presente.
  • Escalabilidad: La solución puede expandirse para incluir múltiples dispositivos controlados desde la misma aplicación.
  • Accesibilidad: Todo lo que necesitas es un navegador web y acceso a internet para controlar tus dispositivos.
Aplicaciones Prácticas
  • Monitoreo y control de electrodomésticos.
  • Sistemas de seguridad en el hogar.
  • Automatización de sistemas de riego en jardines.
¿Cómo empezar tu propio proyecto?
  • Adquiere un ESP8266 NodeMCU y un módulo de relé.
  • Configura una cuenta en Firebase y crea una base de datos en tiempo real.
  • Diseña tu interfaz web con Vue.js y conecta tu proyecto a Firebase.
  • Programa el ESP8266 para interactuar con Firebase y controlar el dispositivo deseado.
Integrar el ESP8266 NodeMCU con Firebase utilizando tecnologías como JavaScript y Vue.js abre un mundo de posibilidades para la automatización y el control remoto en el hogar y más allá. Este proyecto es una excelente manera de adentrarse en el fascinante campo del IoT mientras se aprende sobre microcontroladores, bases de datos en tiempo real y desarrollo web.

Tutorial de Conexión de ESP8266 y Firebase

Tutorial Conexión de Relé 5V con ESP8266 y Firebase

Tutorial de ESP8266 y Firebase

Tutorial Crear un Proyecto en FIREBASE



Relé 5V con ESP8266 y Firebase Conexión (IoT) Tutorial: https://alex7tutoriales.blogspot.com/2020/03/rele-5v-con-esp8266-y-firebase-conexion.html



Como siempre, espero que estos videos e información les sea muy útil, no olvides suscribirte a mi canal en YouTube. Saludos 😎

Tags

Alex7 Tutoriales

Tutoriales que en algún momento te pueden ser útiles.... Suscribete!

You might like

Publicar un comentario

Artículo Anterior Artículo Siguiente