ESP32 avec Firebase – Création d’une application Web

Ce guide vous apprendra à créer une application Web Firebase simple pour contrôler et surveiller votre carte ESP32. L’application Web que vous allez créer est accessible dans le monde entier pour contrôler et surveiller votre ESP32 depuis n’importe où dans le monde. Cette application Web fait le pont entre la base de données Firebase Realtime et l’ESP32.

Suivez le didacticiel suivant avant de continuer :

Voici les principales étapes pour terminer ce tutoriel.

1. Création d’un projet Firebase— nous vous recommandons d’utiliser le Projet Firebase de ce tutoriel précédent.
2. Installation du logiciel requis
3. Configuration d’un projet d’application Web Firebase (code VS)
4. Créer une application Web Firebase

Nous avons un tutoriel similaire pour la carte ESP8266 : ESP8266 NodeMCU avec Firebase – Création d’une application Web

Installation du logiciel requis

Pour suivre ce projet, vous devez installer les logiciels suivants :

1. Code Visual Studio
2. Version Node.JS LTS
3. Installer le pack d’extension Node.js (code VS)
4. Installer les outils Firebase

Installation du code VS

Suivez les instructions suivantes pour installer VS Code sur votre système d’exploitation :

A) Installation de VS Code sur Windows (Code Visual Studio)

Aller à https://code.visualstudio.com/ et téléchargez la version stable pour votre système d’exploitation (Windows).

Cliquez sur l’assistant d’installation pour démarrer l’installation et suivez toutes les étapes pour terminer l’installation. Acceptez l’accord et appuyez sur le bouton Suivant.

Sélectionnez les options suivantes et cliquez sur Suivant.

Appuyez sur le bouton Installer.

Enfin, cliquez sur Terminer pour terminer l’installation.

Ouvrez VS Code et vous serez accueilli par un onglet Bienvenue avec les notes publiées de la dernière version.

C’est ça. Visual Studio Code a été installé avec succès.

B) Installation de VS Code sur Mac OS X (Visual Studio Code)

Aller à https://code.visualstudio.com/ et téléchargez la version stable pour votre système d’exploitation (Mac OS X).

Après avoir téléchargé le fichier d’application Visual Studio Code, vous serez invité avec le message suivant. Appuyez sur le bouton « Ouvrir ».

Ou ouvrez votre dossier Téléchargements et ouvrez Visual Studio Code.

Après cela, vous serez accueilli par un onglet Bienvenue avec les notes publiées de la dernière version.

C’est ça. Visual Studio Code a été installé avec succès.

C) Installation de VS Code sur Linux Ubuntu (Visual Studio Code)

Aller à https://code.visualstudio.com/ et téléchargez la version stable pour votre système d’exploitation (Linux Ubuntu).

Enregistrez le fichier d’installation :

Pour l’installer, ouvrez une fenêtre de terminal, accédez à votre dossier Téléchargements et exécutez la commande suivante pour installer VS Code.

$ cd Downloads
~/Downloads $ sudo apt install ./code_1.49.1-1600299189_amd64.deb

Une fois l’installation terminée, VS Code devrait être disponible dans le menu de vos applications.

Ouvrez VS Code et vous serez accueilli par un onglet Bienvenue avec les notes publiées de la dernière version.

C’est ça. Visual Studio Code a été installé avec succès.

Installation de Node.js

1) Aller à nodejs.org et téléchargez la version LTS.

2) Exécutez le fichier exécutable et suivez le processus d’installation.

3) Activer pour installer automatiquement tous les outils nécessaires.

4) Lorsque c’est fait, cliquez sur Terminer.

5) Une fenêtre de terminal s’ouvrira pour installer les outils supplémentaires pour Node.js. Lorsque c’est fait, cliquez sur n’importe quelle touche pour continuer. Une fois terminé, vous pouvez fermer la fenêtre du terminal.

Installation du pack d’extension Node.js (code VS)

1) Ouvrez le code VS.

2) Cliquez sur l’onglet extensions et recherchez « node.js extension pack ».

3) Cliquez sur le bouton Installer dans la fenêtre de droite.

4) Redémarrez le code VS.

1) Ouvrez le code VS. Fermez tous les projets ouverts, le cas échéant.

2) Ouvrez une nouvelle fenêtre de terminal. Allez dans Terminal > Nouveau terminal.

3) Exécutez la commande suivante pour passer au chemin C:\ (vous pouvez l’installer dans n’importe quel autre chemin) :

cd \

4) Exécutez la commande suivante pour installer globalement les outils Firebase :

npm -g install firebase-tools

5) Les outils Firebase seront installés et vous obtiendrez un message similaire dans la fenêtre du terminal.

6) Testez si firebase a été installé avec succès avec la commande suivante :

firebase --version

Dans mon cas, j’obtiens l’erreur suivante.

Comme vous pouvez le voir dans le message d’erreur, il y a un message d’erreur lié au fichier firebase.ps1 sur le chemin C:\Users\username\AppData\Roaming\npm.

Accédez à ce chemin et supprimez le fichier firebase.ps1.

Revenez à VS Code et réexécutez la commande suivante.

firebase --version

Cette fois, il devrait renvoyer la version de Firebase Tools sans aucune erreur.

---

Configuration d’un projet d’application Web Firebase (code VS)

Avant de créer l’application Web Firebase, vous devez configurer un projet Firebase sur VS Code. Voici les étapes :

1. Création d’un dossier de projet
2. Connexion Firebase
3. Initialisation du projet Web App Firebase
4. Ajouter Firebase à votre application

1) Création d’un dossier de projet

1) Créez un dossier sur votre ordinateur dans lequel vous souhaitez enregistrer votre projet Firebase, par exemple, Firebase-Project.

2) Ouvrez le code VS. Allez dans Fichier > Ouvrir le dossier… et sélectionnez le dossier que vous venez de créer.

3) Allez dans Terminal > Nouveau terminal. Une nouvelle fenêtre Terminal devrait s’ouvrir sur le chemin de votre projet.

2) Connexion Firebase

4) Dans la fenêtre Terminal précédente, tapez ce qui suit :

firebase login

5) Il vous sera demandé de collecter des informations sur l’utilisation de la CLI et les rapports d’erreurs. Entrez « n » et appuyez sur Entrée pour refuser.

6) Après cela, une nouvelle fenêtre apparaîtra sur votre navigateur pour vous connecter à votre compte Firebase.

7) Autorisez Firebase CLI à accéder à votre compte Google.

8) Après cela, la connexion Firebase CLI devrait réussir. Vous pouvez fermer la fenêtre du navigateur.

3) Initialisation du projet Web App Firebase

9) Après vous être connecté avec succès, exécutez la commande suivante pour démarrer un répertoire de projet Firebase dans le dossier actuel.

firebase init

10) Il vous sera demandé si vous souhaitez initialiser un projet Firebase dans le répertoire actuel. Entrez Y et appuyez sur Entrée.

11) Ensuite, utilisez les flèches haut et bas et la touche Espace pour sélectionner les options. Sélectionnez les options suivantes :

• Base de données en temps réel : configurez le fichier de règles de sécurité pour la base de données en temps réel et (éventuellement) provisionnez l’instance par défaut.
• Hébergement : configurez les fichiers pour l’hébergement Firebase et (éventuellement) configurez les déploiements d’action GitHub

Les options sélectionnées s’afficheront avec un astérisque vert. Ensuite, appuyez sur Entrée.

12) Sélectionnez l’option « Utiliser un projet existant » – il doit être surligné en bleu – puis appuyez sur Entrée.

13) Après cela, sélectionnez le projet Firebase pour ce répertoire – il devrait s’agir du projet créé dans ce didacticiel précédent. Dans mon cas, il s’appelle esp32-firebase-demo. Appuyez ensuite sur Entrée.

14) Appuyez sur Entrée à la question suivante pour sélectionner le fichier de règles de sécurité de la base de données par défaut : « Quel fichier doit être utilisé pour les règles de sécurité de la base de données en temps réel ? »

15) Ensuite, sélectionnez les options d’hébergement comme indiqué ci-dessous :

• Que voulez-vous utiliser comme répertoire public ? Appuyez sur Entrée pour sélectionner public.
• Configurer en tant qu’application d’une seule page (réécrire les URL dans /index.html) ? Non
• Configurer des builds et des déploiements automatiques avec GitHub ? Non

16) Le projet Firebase devrait maintenant être initialisé avec succès. Notez que le code VS a créé des fichiers essentiels dans votre dossier de projet.

Le fichier index.html contient du texte HTML pour créer une page Web. Pour l’instant, laissez le texte HTML par défaut. L’idée est de le remplacer par votre propre texte HTML pour créer une page Web personnalisée selon vos besoins. Nous le ferons plus tard dans ce tutoriel.

17) Pour vérifier si tout s’est passé comme prévu, exécutez la commande suivante dans la fenêtre VS Code Terminal.

firebase deploy

Maintenant, vous devez obtenir l’URL de votre application Web pour y accéder.

4) Ajoutez Firebase à votre application

Laissez VS Code ouvert. En attendant, vous devez accéder à votre compte Firebase pour ajouter Firebase à votre application.

18) Accédez à votre console Firebase et sélectionnez votre projet. Ensuite, cliquez sur l’icône Web pour ajouter une application Web à Firebase (ou sur le bouton + Ajouter une application).

19) Donnez un nom à votre application. Je l’ai simplement appelé test. Ensuite, cochez la case à côté de Configurer également l’hébergement Firebase pour cette application. Cliquez sur Enregistrer l’application.

20) Ensuite, copiez l’objet firebaseConfig car vous en aurez besoin plus tard.

Cliquez sur Suivant dans les étapes suivantes.

Après cela, vous pouvez également accéder à l’objet firebaseConfig si vous accédez aux paramètres de votre projet dans votre console Firebase.

21) Copiez le authDomain. Dans mon cas, c’est :

esp32-firebase-demo.firebaseapp.com

Il s’agit de l’URL qui vous permet d’accéder à votre application Web.

Collez le domaine dans votre navigateur. Vous devriez voir la page Web suivante. Cette page Web est construite avec les fichiers placés dans le dossier public de votre projet firebase.

Vous pouvez accéder à cette page Web de n’importe où dans le monde.

Félicitations, vous avez correctement configuré votre projet d’application Firebase. Maintenant, modifions les fichiers du dossier public pour afficher votre propre page Web au lieu de celle-là.

---

Créer une application Web Firebase

Maintenant que vous avez créé une application de projet Firebase avec succès sur VS Code, suivez les étapes suivantes pour personnaliser l’application afin d’afficher les valeurs enregistrées sur la base de données en temps réel.

index.html

Copiez ce qui suit dans votre fichier index.html. Ce fichier HTML crée une page Web simple qui affiche les lectures enregistrées sur la base de données en temps réel créée sur ce projet précédent.

<!-- Complete Project Details at: https://Raspberryme.com/ -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ESP Firebase App</title>

    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>

    <!-- TODO: Add SDKs for Firebase products that you want to use
        https://firebase.google.com/docs/web/setup#available-libraries -->
    <script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-database.js"></script>

    <script>
    // REPLACE WITH YOUR web app's Firebase configuration
    var firebaseConfig = {
        apiKey: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
        authDomain: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
        databaseURL: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
        projectId: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
        storageBucket: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
        messagingSenderId: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
        appId: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    var database = firebase.database();
</script>
<script src="https://www.raspberryme.com/esp32-firebase-web-app/app.js" defer></script>

</head>
<body>
    <h1>ESP32 Firebase Web App Example</h1>
    <p>Reading int: <span id="reading-int"></span></p>
    <p>Reading float: <span id="reading-float"></span></p>
</body>
</html>

Afficher le code brut

Vous devez modifier le code avec votre propre objet firebaseConfig (à partir de l’étape 20).

Examinons rapidement le fichier HTML.

Dans le du fichier HTML, nous devons ajouter toutes les métadonnées requises.

Le titre de la page Web est ESP Firebase App, mais vous pouvez le modifier dans la ligne suivante.

<title>ESP Firebase App</title>

Vous devez ajouter la ligne suivante pour pouvoir utiliser Firebase avec votre application.

<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>

Vous devez également ajouter tous les produits Firebase que vous souhaitez utiliser. Dans cet exemple, nous utilisons la base de données en temps réel.

<script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-database.js"></script>

Ensuite, remplacez l’objet firebaseConfig par celui que vous avez obtenu à l’étape 20.

var firebaseConfig = {
    apiKey: "AIzaSyBPIfTiBcoWhVQ3ozmHH3JzgjQZAsCGuyk",
    authDomain: "esp32-firebase-demo.firebaseapp.com",
    databaseURL: "https://esp32-firebase-demo-default-rtdb.europe-west1.firebasedatabase.app",
    projectId: "esp32-firebase-demo",
    storageBucket: "esp32-firebase-demo.appspot.com",
    messagingSenderId: "112982951680",
    appId: "1:112982951680:web:f55c1f591739c33b8a15e5"
};

Enfin, Firebase est initialisé et nous créons une variable globale appelée database qui fait référence à notre Firebase Realtime Database.

firebase.initializeApp(firebaseConfig);
var database = firebase.database();

Nous référençons également le fichier app.js que nous allons créer ensuite pour inclure les fonctions JavaScript qui nous permettront de mettre à jour la page HTML avec les valeurs de la base de données.

<script src="https://www.raspberryme.com/esp32-firebase-web-app/app.js" defer></script>

Nous en avons fini avec les métadonnées. Passons maintenant aux parties HTML qui sont visibles par l’utilisateur — allez entre les balises et .

Nous créons un titre avec le texte suivant : Exemple d’application Web Firebase ESP32, mais vous pouvez le modifier comme bon vous semble.

<h1>ESP32 Firebase Web App Example</h1>

Ensuite, nous ajoutons deux paragraphes pour afficher les valeurs float et int enregistrées dans la base de données. Nous créons des balises avec des identifiants spécifiques, afin de pouvoir faire référence à ces éléments HTML à l’aide de JavaScript et insérer les valeurs de la base de données.

<p>Reading int: <span id="reading-int"></span></p>
<p>Reading float: <span id="reading-float"></span></p>

Après avoir apporté les modifications nécessaires, vous pouvez enregistrer le fichier HTML.

app.js

Dans le dossier public, créez un fichier appelé app.js. Vous pouvez le faire sur VS Code en sélectionnant le dossier public, puis en cliquant sur l’icône +fichier. Ce fichier JavaScript est responsable de la mise à jour des valeurs sur la page Web chaque fois qu’il y a un changement dans la base de données.

Copiez ce qui suit dans votre fichier app.js.

// Complete Project Details at: https://Raspberryme.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 to save database current values
var floatReading;
var intReading;

// Attach an asynchronous callback to read the data
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);
});

Afficher le code brut

L’extrait de code suivant est responsable de l’écoute des modifications apportées au chemin de la base de données test/float.

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

Chaque fois que vous insérez une nouvelle valeur sur ce chemin de base de données, nous mettons à jour la valeur sur l’élément HTML avec l’identifiant reading-float.

document.getElementById("reading-float").innerHTML = floatReading;

Nous suivons une procédure similaire pour mettre à jour les lectures sur le chemin de la base de données test/int.

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

Enregistrez le fichier JavaScript.

Déployez votre application

Après avoir enregistré les fichiers HTML et JavaScript, déployez votre application sur VS Code en exécutant la commande suivante.

firebase deploy

Esquisse Arduino ESP32

Téléchargez le code suivant sur votre ESP32. Il s’agit du même code utilisé dans ce projet précédent pour écrire dans la base de données. Ce code écrit simplement dans la base de données toutes les 15 secondes.

N’oubliez pas d’insérer vos informations d’identification réseau, l’URL de la base de données et la clé API du projet Firebase.

/*
  Rui Santos
  Complete project details at our blog.
    - ESP32: https://Raspberryme.com/esp32-firebase-realtime-database/
    - ESP8266: https://Raspberryme.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
*/

#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"

// Insert your network credentials
#define WIFI_SSID "REPLACE_WITH_YOUR_SSID"
#define WIFI_PASSWORD "REPLACE_WITH_YOUR_PASSWORD"

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

// Insert RTDB URLefine the RTDB URL */
#define DATABASE_URL "REPLACE_WITH_YOUR_FIREBASE_DATABASE_URL" 

//Define 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("Connecting to Wi-Fi");
  while (WiFi.status() != WL_CONNECTED){
    Serial.print(".");
    delay(300);
  }
  Serial.println();
  Serial.print("Connected with IP: ");
  Serial.println(WiFi.localIP());
  Serial.println();

  /* Assign the api key (required) */
  config.api_key = API_KEY;

  /* Assign the RTDB URL (required) */
  config.database_url = DATABASE_URL;

  /* Sign up */
  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());
    }
  }
}

Afficher le code brut

Manifestation

L’ESP32 devrait envoyer de nouvelles lectures toutes les 15 secondes à la base de données.

Accédez à l’URL de votre application. Vous verrez les lectures mises à jour toutes les 15 secondes. L’application met à jour la page Web chaque fois que l’ESP32 écrit une nouvelle valeur.

Dans votre console Firebase, vous pouvez accéder à la page de votre projet et vérifier que de nouvelles valeurs sont écrites dans la base de données toutes les 15 secondes.

Toutes nos félicitations! Vous avez créé une application Web Firebase pour s’interfacer avec l’ESP32.

Conclusion

Dans ce tutoriel, vous avez appris à créer une application Web Firebase pour s’interfacer avec l’ESP32. Vous avez appris à utiliser les services d’hébergement Firebase et la base de données en temps réel.

Nous avons créé un exemple simple pour vous aider à démarrer avec Firebase. Il affiche simplement des nombres aléatoires sur une page Web. L’idée est de remplacer ces chiffres par des lectures de capteurs ou des états GPIO. De plus, vous pouvez également ajouter des boutons ou des curseurs à la page Web pour contrôler les GPIO ESP32. Les possibilités sont infinies.

L’exemple présente certaines limites mais vous permet de comprendre le potentiel de Firebase Web Apps pour l’ESP32. Par exemple, à ce stade, n’importe qui peut écrire et lire des données dans votre base de données car nous n’avons défini aucune règle de base de données (elle est en mode test). De plus, nous ne l’avons protégé avec aucun type d’authentification. Néanmoins, nous espérons que vous trouverez ce tutoriel utile. Et si vous voulez en savoir plus, vous pouvez également consulter le Documentation Firebase.

S’il y a suffisamment d’intérêt pour ce sujet, nous pouvons créer plus de tutoriels Firebase avec l’ESP32. Faites-nous savoir dans les commentaires ci-dessous si c’est un sujet qui vous intéresse.

Nous espérons que vous trouverez ce tutoriel utile.

Nous espérons que vous trouverez ce tutoriel utile. Si vous souhaitez en savoir plus sur Firebase avec les cartes ESP32 et ESP8266, consultez notre nouvel eBook :

Apprenez-en plus avec l’ESP32 grâce à nos ressources :

Merci d’avoir lu.

Cette vidéo vous emmène dans l’histoire de Raspberry Pi :