Tresavis

ESP8266 i Firebase.

Descripció.

El objectiu de aquesta practica és iniciar-se amb Firebase fen servir la placa de desenvolupament ESP8266 NodeMCU. Firebase és una aplicació de Google per gestionar dades des de Android, IOS o per dades d’una WEB-app. Aprendrem a guardar dades a la base de dades de Firebase i com després llegir-les.

Contingut:

• Components.
• Estudis previs.
• Què és Firebase.
• Crear un nou projecte en Firebase.
• Configurar els mètodes d’autentificació.
• Crear una base de dades.
• Obtenir la API Key del projecte.
• Configurar el projecte Firebase Web App en VS Code.
• Login en Firebase.
• Inicialitzar el projecte.
• Afegir Firebase a la nostre App.
• index.html
• app.js
• Programem la ESP8266.
• Despleguem l’aplicació.
• Bibliografia.

Components.

• 1.- Placa NodeMCU.
• 2.- Editor VS Code.
• 3.- Firebase.

Estudis previs.

Per com instal·lar el editor VS-Code i com configurar-lo per treballar amb Firebase cal consultar la pagina de tresavis.cat:

Què és Firebase.

Firebase és una plataforma de desenvolupament de Google que ajuda a construir, millorar i engrandir la nostre aplicació. Els serveis que ofereix són: base de dades, analítiques, autentificació, magatzem de fitxers, etc.

En aquesta practica configurarem un NodeMCU i Firebase per inserir i després poder llegir dades guardades en la base de dades de Firebase. En una segona part crearem una WEB App connectada a Firebase per controlar la placa ESP8266 i poder inserir i llegir les dades dels sensors des de qualsevol lloc del mon.

Crear un nou projecte en Firebase.

Per crear un nou Firebase projecte, tenim que seguir les següents instruccions:

Anar a Firebase fent servir un compte de Google. Anar a:

Click “Comenzar” i després “Crear un projecto” per crear el nostre projecte. Donem el nom del projecte, en el nostre cas: NodeMCU Firebase.

Click “Continue”.

Des habilitem “Google Analytics” perquè no ho necessitem de moment.

Cick en “Crear proyecto”.

Tarda uns segons a crear el nou projecte, després clic en “Continuar” i ens mostra la pàgina principal del projecte:

Configurar els mètodes d’autentificació.

Clic en el menú de l’esquerra, el botó “Compilación” > ”Authentication”

Clic en “Comenzar”. Hi ha diferents mètodes de autenticació, per mail, telèfon, Google, etc.

Per el nostre projecte escollim el mètode d’autenticació “Anonimo”, és un compte temporal i no requereix cap credencial. Activem “Anónimo”.

Habilitem i després guardem.

Crear una base de dades.

Per crear una base de dades a Firebase, seguirem els següents passos:

En el menú de l’esquerra cliquem “Realtime Database”.

Clic en “Crear una base de datos”.

Escollim la localització de la base de dades:

Configurem la seguretat de la nostre base de dades, en aquesta practica utilitzem la forma senzilla, “En modo de prueba”.

Clic en “Habilitar” i ja tenim la base de dades creada.

Copiem la URL de la base de dades, que després necessitarem:

https://nodemcu-firebase-ceddb-default-rtdb.europe-west1.firebasedatabase.app/

Obtenir la API Key del projecte.

En el menú de la esquerra clic en “Descripción general” i després en “Configuración del proyecto”.

En el menú de l’esquerra cliquem “Realtime Database”.

Copiem la clau API key:

AIzaSyAIXu2lgtplJqioYD_A8SoMOjtn3q5Hsl8

Configurar el projecte Firebase Web App en VS Code.

Podem fer servir Arduino IDE o també VisualEstudio VS Code amb la extensió PlatformIO.

Farem servir en aquesta practica VS Code, que servirà per crear una app Web que farà de pont entre la placa i Firebase.

Per com instal·lar el editor VS-Code i com configurar-lo per treballar amb Firebase cal consultar la pagina:

Crear una carpeta per el projecte on es guardaran els fitxers, l’anomenem:

Firebase-projecte

En el VS Code anem a Arxiu > Obrir carpeta i seleccionem la carpeta que acabem de crear.

Si anem a Terminal > Nova terminal, la finestra de la terminal s’obre en la ruta de la careta del projecte.

Login en Firebase.

En la terminal escrivim:

Firebase login

Ens pregunten si volem el ús de CLI i reportar errors, diem que NO.

Després d’això s’obre una finestra en el navegador per entrar a Firebase.

Iniciem sessió a Google per permetre a Firebase CLI accedir a la nostre compte de Google.

Clic en “Permitir”.

Ja és pot tancar el navegador.

Inicialitzar el projecte.

Després de haver entrat a Firebase, en el terminal de VS Code i en la carpeta del projecte, escrivim:

Firebase init

Ens pregunten si volem inicialitzar el projecte en aquest directori, diem que sí:

Fent servir les tecles d’amunt i avall i l’espai per seleccionar, seleccionem els dos punts següents de la llista:

RealTime Database: Configurar regles de seguretat...

Hosting: Configurar fitxers per el Hosting...

Quan veiem els dos asteriscs verds li donem al Enter.

Seleccionem l’opció: Usar un projecte existent.

Seleccionem el nostre projecte: NodeMCU Firebase.

A la pregunta de: Quin fitxer fer servir per les regles de seguretat de la base de dades. Premem Enter.

Seleccionem les opcions de Hosting:

Com volem usar el directori públic ?, clic enter a públic.

Configurar com una app de pàgina unica, posem NO.

Configuració automàtica, posem NO.

I ja hem acabat la inicialització de Firebase.

En el editor VS Code s’han creat un quants nous fitxers, essencials per el nostre projecte.

El fitxer index.html preestablert de moment no el farem servir. Crearem el nostre propi index.html.

El index.html preestablert és com segueix:

Per comprovar si tot funciona correctament, usem el següent comando:

firebase deploy

Observem el missatge de èxit complert: “Deploy complete”.

Afegir Firebase a la nostre App.

Mantenir VS obert i entrar a la Web de Firebase i en la seva consola afegirem Firebase a la nostre app.

Seleccionem el nostre projecte i clic en el botó Agregar app:

Anomenem la nostre app, li posem el nom de “test”. Comprovem que està marcat la casella de “també configurar el hosting per la app”.

Registrem la app.

Copiem la “firebasecConfig”, que necessitarem després:

// Your web app's Firebase configuration

const firebaseConfig = {

  apiKey: "AIzaSyAIXu2lgtplJqioYD_A8SoMOjtn3q5Hsl8",

  authDomain: "nodemcu-firebase-ceddb.firebaseapp.com",

  databaseURL: "https://nodemcu-firebase-ceddb-default-rtdb.europe-west1.firebasedatabase.app",

  projectId: "nodemcu-firebase-ceddb",

  storageBucket: "nodemcu-firebase-ceddb.appspot.com",

  messagingSenderId: "1071505467034",

  appId: "1:1071505467034:web:fb9d26eb13fd2443e32123"

};
          

Cliquem següent en el passos posteriors.

Copiem authDomain, que ens servirà per accedir a la Web app:

authDomain: "nodemcu-firebase-ceddb.firebaseapp.com"

Comprovem posant la URL anterior al navegador:

Ara toca canviar aquesta pàgina per mostrar la nostre pròpia web. És troba en el directori públic.

Index

Crearem una Web app per visualitzar les dades guardades en la base de dades de Firebase.

El nou Index serà com segueix, és te que posar la pròpia firebaseConfig:

<!-- Complete Project Details at: https://RandomNerdTutorials.com/ -->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!—Posem el títol de la web -->
    <title>NodeMCU Firebase App</title>

    <!—-El nucli Firebase JS SDK, es té que posar sempre i primer -->
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>

    <!-- Afegir Firebase products, afegim Firebase Realtime,
        https://firebase.google.com/docs/web/setup#available-libraries -->
    <script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-database.js"></script>

    <script>
    // Aquí posem la nostre FirebaseConfig
    // Your web app's Firebase configuration

const firebaseConfig = {

  apiKey: "AIzaSyAIXu2lgtplJqioYD_A8SoMOjtn3q5Hsl8",

  authDomain: "nodemcu-firebase-ceddb.firebaseapp.com",

  databaseURL: "https://nodemcu-firebase-ceddb-default-rtdb.europe-west1.firebasedatabase.app",

  projectId: "nodemcu-firebase-ceddb",

  storageBucket: "nodemcu-firebase-ceddb.appspot.com",

  messagingSenderId: "1071505467034",

  appId: "1:1071505467034:web:fb9d26eb13fd2443e32123"

};
    // Initializem Firebase
    firebase.initializeApp(firebaseConfig);
    var database = firebase.database();
</script>
<!—app.js inclou les funcions JavaScript necesaries per actualitzar els valors de la web-->
<script src="app.js" defer></script>

</head>
<body>
    <h1>NodeMCU Firebase Web App</h1>
	<!—Els dos span tenen ids que el codi de app.js reconeix i inserta els valors del enter i del decimal -->
    <p>Lectura de un enter: <span id="reading-int"></span></p>
    <p> Lectura de un decimal: <span id="reading-float"></span></p>
</body>
</html>


         

app.js

A dins de la carpeta públic crearem un nou arxiu app.js que s’encarregarà de agafar les dades de la base de dades i actualitzar-les a la web cada vegada que hi hagin canvis.

// Complete Project Details at: https://RandomNerdTutorials.com/

// Database Paths
var dataFloatPath = 'test/float';
var dataIntPath = 'test/int';

// Get a database reference 
const databaseFloat = database.ref(dataFloatPath);
const databaseInt = database.ref(dataIntPath);

// Variables que guarden els valors actualitzats de la base de dades
var floatReading;
var intReading;

// llegeix les dades de la base de dades i les mostra a la web
databaseFloat.on('value', (snapshot) => {
  floatReading = snapshot.val();
  console.log(floatReading);
  document.getElementById("reading-float").innerHTML = floatReading;
}, (errorObject) => {
  console.log('The read failed: ' + errorObject.name);
});

databaseInt.on('value', (snapshot) => {
  intReading = snapshot.val();
  console.log(intReading);
  document.getElementById("reading-int").innerHTML = intReading;
}, (errorObject) => {
  console.log('The read failed: ' + errorObject.name);
});


         

Programem la ESP8266.

Programem la manera de interactuar la placa ESP8266 amb la base de dades.

El sketch el que fa es escriure cada 15 minuts dos nombres aleatoris, un enter i un de decimal , a la base de dades de Firebase. Els nombres els genera la placa.

El codi es pot implementar amb el IDE d’Arduino o també amb VS Code amb la extensió PlatformIO. Per treballar amb Firebase es millor fer servir VS Code per si volem crear una aplicació web, aquesta faria de pont entre la placa i Firebase.

Codi:

/*
  Rui Santos
  Complete project details at our blog.
    - ESP32: https://RandomNerdTutorials.com/esp32-firebase-realtime-database/
    - ESP8266: https://RandomNerdTutorials.com/esp8266-nodemcu-firebase-realtime-database/
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  Based in the RTDB Basic Example by Firebase-ESP-Client library by mobizt
  https://github.com/mobizt/Firebase-ESP-Client/blob/main/examples/RTDB/Basic/Basic.ino
*/
// El codi serveix per ESP32 i per ESP8266
#include <Arduino.h>
#if defined(ESP32)
  #include <WiFi.h>
#elif defined(ESP8266)
  #include <ESP8266WiFi.h>
#endif
#include <Firebase_ESP_Client.h>

//Provide the token generation process info.
#include "addons/TokenHelper.h"
//Provide the RTDB payload printing info and other helper functions.
#include "addons/RTDBHelper.h"

// Aquí posem les dades de la wifi
#define WIFI_SSID "REPLACE_WITH_YOUR_SSID"
#define WIFI_PASSWORD "REPLACE_WITH_YOUR_PASSWORD"

// Inserim Firebase project API Key
#define API_KEY "REPLACE_WITH_YOUR_FIREBASE_PROJECT_API_KEY"

// Inserim la RTDB URL */
#define DATABASE_URL "REPLACE_WITH_YOUR_FIREBASE_DATABASE_URL" 

//Definim la variable Firebase Data object
FirebaseData fbdo;

FirebaseAuth auth;
FirebaseConfig config;

unsigned long sendDataPrevMillis = 0;
int count = 0;
bool signupOK = false;

void setup(){
  Serial.begin(115200);
  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
  Serial.print("Connectant a la Wi-Fi");
  while (WiFi.status() != WL_CONNECTED){
    Serial.print(".");
    delay(300);
  }
  Serial.println();
  Serial.print("Connectat amb la IP: ");
  Serial.println(WiFi.localIP());
  Serial.println();

  /* Assignem la api key*/
  config.api_key = API_KEY;

  /* Assignem la RTDB URL */
  config.database_url = DATABASE_URL;

  /* Entrem a Firebase */
  if (Firebase.signUp(&config, &auth, "", "")){
    Serial.println("ok");
    signupOK = true;
  }
  else{
    Serial.printf("%s\n", config.signer.signupError.message.c_str());
  }

  /* Assign the callback function for the long running token generation task */
  config.token_status_callback = tokenStatusCallback; //see addons/TokenHelper.h
  
  Firebase.begin(&config, &auth);
  Firebase.reconnectWiFi(true);
}

void loop(){
  if (Firebase.ready() && signupOK && (millis() - sendDataPrevMillis > 15000 || sendDataPrevMillis == 0)){
    sendDataPrevMillis = millis();
    // Write an Int number on the database path test/int
    if (Firebase.RTDB.setInt(&fbdo, "test/int", count)){
      Serial.println("PASSED");
      Serial.println("PATH: " + fbdo.dataPath());
      Serial.println("TYPE: " + fbdo.dataType());
    }
    else {
      Serial.println("FAILED");
      Serial.println("REASON: " + fbdo.errorReason());
    }
    count++;
    
    // Write an Float number on the database path test/float
    if (Firebase.RTDB.setFloat(&fbdo, "test/float", 0.01 + random(0,100))){
      Serial.println("PASSED");
      Serial.println("PATH: " + fbdo.dataPath());
      Serial.println("TYPE: " + fbdo.dataType());
    }
    else {
      Serial.println("FAILED");
      Serial.println("REASON: " + fbdo.errorReason());
    }
  }
}


         

Despleguem l’aplicació.

Escrivim en el navegador la següent url:

https://nodemcu-firebase-ceddb.firebaseapp.com/

I si consultem la nostre base de dades de Firebase, veiem que les dades son les mateixes.

Bibliografia.