Journalisation des données ESP32 dans la base de

données en temps réel Firebase

Dans ce guide, vous apprendrez à enregistrer des données avec l'ESP32 dans la base de données en temps réel
Firebase avec des horodatages (enregistrement de données) afin d'avoir un enregistrement de l'historique de vos
données. Par exemple, nous enregistrerons la température, l'humidité et la pression d'un capteur BME280 et nous
obtiendrons les horodatages d'un serveur NTP. Ensuite, vous pouvez accéder aux données à l'aide de la console
Firebase ou créer une application Web pour afficher les résultats.

Qu'est-ce que Firebase ?

Firebase est la plate-forme de développement d'applications mobiles de Google qui vous aide à créer,
améliorer et développer votre application. Il dispose de nombreux services utilisés pour gérer les données de
n'importe quelle application Android, IOS ou Web comme l'authentification, données en temps réel,
l'hébergement , etc.

Aperçu du projet
Le diagramme suivant montre une vue d'ensemble de haut niveau du projet que nous allons construire.

1. L'ESP32 s'authentifie en tant qu'utilisateur avec e-mail et mot de passe (cet utilisateur doit être défini
sur les méthodes d'authentification Firebase) ;
2. Après l'authentification, l'ESP obtient l'UID de l'utilisateur ;
 3. La base de données est protégée par des règles de sécurité. L'utilisateur ne peut accéder qu'aux
nœuds de la base de données sous le nœud avec son UID d'utilisateur. Après avoir obtenu l'UID de
l'utilisateur, l'ESP peut publier des données dans la base de données ;
4. L'ESP32 obtient la température, l'humidité et la pression du capteur BME280.
5. Il obtient l'heure juste après avoir obtenu les lectures (horodatage).
6. L'ESP32 envoie la température, l'humidité, la pression et l'horodatage à la base de données.
7. De nouvelles lectures sont ajoutées périodiquement à la base de données. Vous aurez un
enregistrement de toutes les lectures sur la base de données en temps réel Firebase.

Voici les principales étapes pour mener à bien ce projet :

1. Créer un projet Firebase

2. Définir les méthodes d'authentification
3. Obtenir la clé API du projet
4. Configurer la base de données en temps réel
5. Configurer les règles de sécurité de la base de données
6. Enregistrement de données ESP32 (base de données en temps réel Firebase)

Préparation de l'IDE Arduino

Pour ce tutoriel, nous allons programmer la carte ESP32 en utilisant le noyau Arduino. Assurez-vous donc
que le module complémentaire ESP32 est installé dans votre IDE Arduino :

 Installation de la carte ESP32 dans l'IDE Arduino (Windows, Mac OS X, Linux)

Si vous souhaitez programmer les cartes ESP en utilisant VS Code avec l'extension PlatformIO, suivez plutôt
le tutoriel suivant :

 Premiers pas avec VS Code et PlatformIO IDE pour ESP32 et ESP8266

1) Créer un projet Firebase

1) Accédez à Firebase et connectez-vous à l'aide d'un compte Google.

2) Cliquez sur Démarrer , puis Ajouter un projet pour créer un nouveau projet.

3) Donnez un nom à votre projet, par exemple ESP Firebase Demo .

4) Désactivez l'option Activer Google Analytics pour ce projet car il n'est pas nécessaire et cliquez sur Créer
un projet .

5) La configuration de votre projet prendra quelques secondes. Ensuite, cliquez sur Continuer quand c'est
prêt.

6) Vous serez redirigé vers la page de votre console Project.

2) Définir les méthodes d'authentification
Pour autoriser l'authentification avec e-mail et mot de passe, vous devez d'abord définir des méthodes
d'authentification pour votre application.

« La plupart des applications ont besoin de connaître l'identité d'un utilisateur. En d'autres termes, il se charge
de se connecter et d'identifier les utilisateurs (dans ce cas, l'ESP32). Connaître l'identité d'un utilisateur
permet à une application d'enregistrer en toute sécurité les données de l'utilisateur dans le cloud et de fournir
la même expérience personnalisée sur tous les appareils de l'utilisateur. Pour en savoir plus sur les méthodes
d'authentification, vous pouvez lire la documentation .

1) Dans la barre latérale gauche, cliquez sur Authentification puis sur Démarrer .

2) Sélectionnez l'option E-mail/Mot .

3) Activez cette méthode d'authentification et cliquez sur Enregistrer .

4) L'authentification avec e-mail et mot de passe doit maintenant être activée.

5) Maintenant, vous devez ajouter un utilisateur. Dans l' Authentification , sélectionnez l' Utilisateurs en
haut. Ensuite, cliquez sur Ajouter un utilisateur .
6) Ajoutez une adresse e-mail pour l'utilisateur autorisé. Il peut s'agir de l'e-mail de votre compte Google ou
de tout autre e-mail. Vous pouvez également créer un e-mail pour ce projet spécifique. Ajoutez un mot de
passe qui vous permettra de vous connecter à votre application et d'accéder à la base de données. N'oubliez
pas de sauvegarder le mot de passe dans un endroit sûr car vous en aurez besoin plus tard. Lorsque vous
avez terminé, cliquez sur Ajouter un utilisateur .

7) Un nouvel utilisateur a été créé avec succès et ajouté au Utilisateurs tableau

Notez que Firebase crée un UID unique pour chaque utilisateur enregistré. L'UID de l'utilisateur nous permet
d'identifier l'utilisateur et de garder une trace de l'utilisateur pour fournir ou refuser l'accès au projet ou à la
base de données. Il y a aussi une colonne qui enregistre la date de la dernière connexion. Pour le moment,
il est vide car nous ne nous sommes pas encore connectés avec cet utilisateur.
3) Obtenir la clé API du projet
Pour s'interfacer avec votre projet Firebase à l'aide de la carte ESP32, vous devez obtenir la clé API de votre
projet. Suivez les étapes suivantes pour obtenir la clé API de votre projet.

1) Dans la barre latérale gauche, cliquez sur Paramètres du projet .

2) Copiez la clé API Web dans un endroit sûr, car vous en aurez besoin plus tard.
4) Configurer la base de données en temps réel
Maintenant, créons une base de données en temps réel et configurons des règles de base de données pour
notre projet.

1) Dans la barre latérale gauche, cliquez sur données en temps réel , puis cliquez sur Créer
une base de données .

2) Sélectionnez l'emplacement de votre base de données. Il devrait être le plus proche de votre emplacement.

3) Configurez des règles de sécurité pour votre base de données. Vous pouvez sélectionner Démarrer en
mode test . Nous allons modifier les règles de la base de données dans un instant.
4) Votre base de données est maintenant créée. Vous devez copier et enregistrer l'URL de la base de
données , mise en évidence dans l'image suivante, car vous en aurez besoin plus tard dans votre code
ESP32.
5) Configurer les règles de sécurité de la base de données
Maintenant, configurons les règles de la base de données. Dans l' Base de données en temps réel ,
sélectionnez l' Règles en haut. Ensuite, cliquez sur Modifier les règles , copiez les règles suivantes puis
cliquez sur Publier .

Ces règles accordent l'accès à un nœud correspondant à l'UID de l'utilisateur authentifié. Cela garantit que
chaque utilisateur authentifié ne peut accéder qu'à ses propres données. Cela signifie que l'utilisateur ne peut
accéder qu'aux nœuds qui se trouvent sous un nœud avec son UID utilisateur correspondant. S'il existe
d'autres données publiées sur la base de données, pas sous un nœud avec l'UID des utilisateurs, cet
utilisateur ne peut pas accéder à ces données.

Par exemple, imaginons que notre UID utilisateur soit RjO3taAzMMXBB2Xmir2LQ . Avec nos règles de
sécurité, il peut lire et écrire des données dans la base de données sous le nœud UsersData /
RjO3taAzMMXBB2Xmir2LQ .
Vous comprendrez mieux comment cela fonctionne lorsque vous commencerez à travailler avec l'ESP32.

6) Enregistrement de données ESP32 (base de données en temps

réel Firebase)
Dans cette section, nous allons programmer la carte ESP32 pour effectuer les tâches suivantes :

1. Authentifiez-vous en tant qu'utilisateur avec e-mail et mot de passe ( l'utilisateur que vous avez
configuré dans cette section ) ;
2. Obtenez des lectures BME280 : température, humidité et pression ;
3. Obtenez l'heure d'époque (horodatage) d'un serveur NTP ;
4. Envoyez les relevés des capteurs et l'horodatage à la base de données en temps réel en tant
qu'utilisateur autorisé.

Diagramme schématique

Dans ce didacticiel, nous allons envoyer les lectures du capteur BME280 à la base de données en temps réel
Firebase. Vous devez donc câbler le capteur BME280 à votre carte.

Nous allons utiliser la communication I2C avec le module de capteur BME280. Pour cela, câblez le capteur
aux broches ESP32 SCL ( GPIO 22 ) et SDA ( GPIO 21 ) par défaut, comme indiqué dans le schéma suivant.
Installation des bibliothèques

Pour ce projet, vous devez installer les bibliothèques suivantes :

 Bibliothèque cliente Firebase ESP

 Bibliothèque Adafruit BME280
 Bibliothèque de capteurs unifiés Adafruit

Installation de bibliothèques - VS Code

Suivez les instructions suivantes si vous utilisez VS Code avec l'extension PlatformIO.

Installer la bibliothèque client Firebase-ESP

Il existe une librairie avec plein d'exemples pour utiliser Firebase avec l'ESP32 : la librairie Firebase-ESP-
Client . Cette bibliothèque est compatible avec les cartes ESP32 et ESP8266.

Cliquez sur l' PIO Home et sélectionnez l' onglet Bibliothèques . Recherchez « Firebase ESP Client ».
Sélectionnez la bibliothèque client Firebase Arduino pour ESP8266 et ESP32 .
Ensuite, cliquez sur Ajouter au projet et sélectionnez le projet sur lequel vous travaillez.

Installer la bibliothèque BME280

Dans l' Bibliothèques , recherchez BME280 . Sélectionnez la Adafruit BME280 .

Ensuite, cliquez sur Ajouter au projet et sélectionnez le projet sur lequel vous travaillez.

Changez également la vitesse du moniteur à 115200 en ajoutant la ligne suivante au platformio.ini de votre
projet :

Installation - Arduino IDE

Suivez cette section si vous utilisez Arduino IDE.

Vous devez installer les bibliothèques suivantes :

 Bibliothèque cliente Firebase ESP

 Bibliothèque Adafruit BME280
 Bibliothèque de capteurs unifiés Adafruit

Accédez à Sketch > Inclure la bibliothèque > Gérer les bibliothèques , recherchez les noms des
bibliothèques et installez les bibliothèques.

Pour la bibliothèque client Firebase, sélectionnez la bibliothèque client Firebase Arduino pour ESP8266 et
ESP32 .

Maintenant, vous êtes prêt à commencer à programmer la carte ESP32 pour interagir avec la base de données.
de base de données en temps réel Firebase code

Copiez le code suivant dans votre IDE Arduino ou dans le main.cpp si vous utilisez VS Code.

Vous devez insérer vos informations d'identification réseau, la clé API du projet, l'URL de la base de données,
ainsi que l'adresse e-mail et le mot de passe de l'utilisateur autorisé.

// D:\POLYTECH\ENSEIGNEMENT\firebase\DATALOGGER_FIREBASE

Comment fonctionne le code

Continuez à lire pour savoir comment le code fonctionne ou passez à la section de démonstration .

Inclure les bibliothèques

Tout d'abord, incluez les bibliothèques requises. La WiFi.h pour connecter l'ESP32 à Internet, la
Firebase_ESP_Client.h pour interfacer les cartes avec Firebase, le Wire , Adafruit_Sensor et
Adafruit_BME280 pour s'interfacer avec le capteur BME280, et la temps bibliothèque de

Vous devez également inclure les éléments suivants pour que la bibliothèque Firebase fonctionne.

Informations d'identification réseau

Incluez vos informations d'identification réseau dans les lignes suivantes afin que vos cartes puissent se
connecter à Internet en utilisant votre réseau local.
Clé API du projet Firebase, utilisateur Firebase et URL de la base de données

Insérez la clé API de votre projet Firebase , celle que vous avez obtenue dans cette section .

Insérez l' e-mail autorisé et le mot de passe correspondant — ce sont les détails de l'utilisateur que vous avez
ajouté dans cette section .
Attendez un peu jusqu'à ce que vous obteniez des lectures sur la base de données. Développez les nœuds
pour vérifier les données.

Emballer
Dans ce didacticiel, vous avez appris à enregistrer les lectures de vos capteurs avec des horodatages dans
la base de données en temps réel Firebase à l'aide de l'ESP32. Ce n'était qu'un exemple simple pour que
vous compreniez comment cela fonctionne.
ESP32/ESP8266 : application Web
d'enregistrement de données Firebase (jauges,
graphiques et tableau)
Dans ce projet, vous allez créer une application Web Firebase qui affiche toutes les lectures de capteurs
enregistrées sur la base de données en temps réel Firebase. Nous créerons une interface Web avec des
jauges, des graphiques et un tableau pour afficher tous vos enregistrements de données. Nous ajouterons
également un bouton qui vous permet de supprimer toutes les données de la base de données et des cases
à cocher pour personnaliser l'interface utilisateur. Cette application Web sera protégée par une
authentification (à l'aide d'un e-mail et d'un mot de passe) et toutes les données sont limitées à l'utilisateur à
l'aide de règles de base de données.

Voici un résumé des fonctionnalités de l'application Web :

 connectez-vous avec email et mot de passe

 affiche l'heure de la dernière mise à jour
 cartes pour afficher les dernières lectures de capteur
 jauges pour afficher les dernières lectures du capteur
 des graphiques qui affichent l'historique des données avec des horodatages
 sélectionner le nombre de lectures à afficher sur les graphiques
 cases à cocher pour activer/désactiver les différentes options d'affichage
 tableau qui affiche toutes les lectures enregistrées dans la base de données
 bouton pour supprimer les données de la base de données
 Firebase héberge votre application Web sur un CDN mondial à l'aide de Firebase Hosting et fournit
un certificat SSL. Vous pouvez accéder à votre application Web de n'importe où en utilisant le nom
de domaine généré par Firebase.
  Lorsque vous accédez pour la première fois à l'application Web, vous devez vous authentifier avec
une adresse e-mail et un mot de passe autorisés. Vous avez déjà configuré cet utilisateur et la
méthode d'authentification dans la partie 1 .
 Après l'authentification, vous pouvez accéder à une page d'application Web qui affiche les lectures
du capteur. Les lectures des capteurs sont affichées sur des cartes, des jauges, des graphiques et
des tableaux. Vous pouvez sélectionner le nombre de lectures que vous souhaitez afficher sur les
graphiques et vous pouvez également choisir comment vous pouvez afficher vos données.
 Il y a un bouton pour afficher/masquer toutes les lectures enregistrées sur la base de données sur
une table avec des horodatages.
 Il y a aussi un bouton Supprimer qui vous permet de supprimer toutes les données de la base de
données.
 Toutes les données sont restreintes à l'aide de règles de base de données.

Installer le logiciel requis

Avant de commencer, vous devez installer le logiciel requis pour créer l'application Web Firebase. Voici une
liste des logiciels que vous devez installer (cliquez sur les liens pour obtenir des instructions) :

 Code Visual Studio

 Version Node.JS LTS
 Installer le pack d'extension Node.js (code VS)
 Installer les outils Firebase
5) Cliquez Suivant dans les étapes suivantes, et enfin sur Continuer vers la console .
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.
La page Web que vous avez vue précédemment est construite avec le fichier HTML placé dans le public de
votre projet Firebase. En modifiant le contenu de ce fichier, vous pouvez créer votre propre application Web.
C'est ce que nous allons faire dans la section suivante.

index.html

Copiez ce qui suit dans votre index.html (il se trouve dans le public dossier

D:\POLYTECH\ENSEIGNEMENT\firebase

Ensuite, copiez ce qui suit dans le style.css fichier

D:\POLYTECH\ENSEIGNEMENT\firebase

Le fichier CSS comprend quelques styles simples pour améliorer l'apparence de notre page Web. Nous n'aborderons
pas le fonctionnement de CSS dans ce didacticiel.
Fichiers JavaScript

Nous allons créer quatre fichiers JavaScript ( auth.js , index.js , charts-definition.js et gauges-definition.js )
dans un scripts dossier public .

 Sélectionnez le public , puis cliquez sur l' +dossier icône Appelez scripts dans ce nouveau dossier.
 Ensuite, sélectionnez le scripts et cliquez sur l' +fichier icône Créez un fichier appelé auth.js .
Ensuite, répétez les étapes précédentes pour créer les fichiers index.js , charts-definition.js et
gauges-definition.js .

L'image suivante montre à quoi devrait ressembler la structure de dossiers de votre projet d'application Web.

auth.js

Copiez ce qui suit dans le auth.js que vous avez créé précédemment.

D:\POLYTECH\ENSEIGNEMENT\firebase

Ensuite, enregistrez le fichier. Ce fichier prend en charge tout ce qui concerne la connexion et la déconnexion de
l'utilisateur.

index.js

Le index.js gère l'interface utilisateur : il affiche le bon contenu en fonction de l'état d'authentification de
l'utilisateur. Lorsque l'utilisateur est connecté, ce fichier obtient de nouvelles lectures de la base de données
chaque fois qu'il y a un changement et les affiche aux bons endroits.
Copiez ce qui suit dans le index.js .

D:\POLYTECH\ENSEIGNEMENT\firebase

charts-definition.js

Copiez ce qui suit dans le charts-definition.js . Ce fichier crée les différents graphiques à l'aide de la
bibliothèque javascript highcharts .

D:\POLYTECH\ENSEIGNEMENT\firebase

gauges-definition.js

Dans notre application Web, nous afficherons une jauge pour la température et une autre pour l'humidité. Le
gauges-definition.js contient des fonctions pour créer les jauges.

D:\POLYTECH\ENSEIGNEMENT\firebase

Fichier d'icône de favori

Pour afficher un favicon dans votre application Web, vous devez déplacer l'image que vous souhaitez utiliser
comme favicon dans le public dossier L'image doit s'appeler favicon.png . Vous pouvez simplement faire
glisser le fichier favicon de votre ordinateur dans le public de VS Code.

Nous utilisons l'icône suivante comme favicon pour notre application Web :

Favicon.zip dans D:\POLYTECH\ENSEIGNEMENT\firebase

Déployez votre application

Après avoir enregistré les fichiers HTML, CSS et JavaScript, déployez votre application sur VS Code en
exécutant la commande suivante dans la fenêtre Terminal.
Manifestation
Toutes nos félicitations! Vous avez déployé votre application avec succès. Il est maintenant hébergé sur un
CDN mondial utilisant l'hébergement Firebase. Vous pouvez accéder à votre application Web de n'importe
où sur l'URL d'hébergement fournie. Dans mon cas, c'est https://esp-firebase-demo.web.app .

L'application Web est réactive et vous pouvez y accéder à l'aide de votre smartphone, ordinateur ou tablette.

Lorsque vous accédez pour la première fois à l'application Web, vous verrez un formulaire pour insérer le
nom d'utilisateur et le mot de passe de l'e-mail.
Emballer
Dans ce didacticiel, vous avez créé une application Web Firebase avec une authentification de
connexion/déconnexion qui affiche les lectures des capteurs de différentes manières. Les relevés des
capteurs sont enregistrés dans la base de données en temps réel. La base de données est protégée à l'aide
de règles de base de données (que vous avez déjà configurées dans un didacticiel précédent).

Vous pouvez appliquer ce que vous avez appris ici pour afficher tout autre type de données, et vous pouvez
modifier les fichiers dans le public pour ajouter différentes fonctionnalités et caractéristiques à votre projet.

Nous n'avons pas expliqué le fonctionnement des fichiers javascript car le projet est assez long. Cependant,
s'il y a suffisamment d'intérêt pour ce sujet, nous pouvons diviser cette application en projets plus petits afin
que vous compreniez comment gérer les données à l'aide de requêtes et comment les afficher de différentes
manières. Faites-nous savoir ce que vous pensez dans les commentaires ci-dessous.