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 "alex7tutoriales.firebaseio.com"
#define FIREBASE_AUTH "1jPg3OHGq2M1FvCmhVgVwomq2xeI6xBxv7iwMHN3"
#define WIFI_SSID "Wifi TOVAR"
#define WIFI_PASSWORD "tovarsarmiento"
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);
}
