ESP32/ESP8266: Firebase Data Logging Web App (Gauges, Charts, and Table)

In this project, you’ll create a Firebase Web App that displays all the sensor readings saved on the Firebase Realtime Database. We’ll create a web interface with gauges, charts, and a table to display all your data records. We’ll also add a button that allows you to delete all data from the database and checkboxes to customize the user interface. This web application will be protected with authentication (using email and password) and all the data is restricted to the user using database rules.
This project is Part 2 of the following tutorial (there is a version for ESP32 and a version for ESP8266):
ESP32 Data Logging to Firebase Realtime Database
ESP8266 Data Logging to Firebase Realtime Database
You must follow one of those tutorials first, before proceeding
Here’s a summary of the web app features:
login with email and password
displays time of the last update
cards to display the last sensor readings
gauges to display the last sensor readings
charts that display data history with timestamps
select how many readings to display on charts
checkboxes to enable/disable the different display options
table that displays all readings saved on the database
button to delete database data
Project Overview
In this tutorial (Part 2), you’ll create a web app to display the sensor readings logged with timestamps on the Firebase Realtime Database (read this previous tutorial –
ESP32 version
/
ESP8266 version
).
The following video shows the web app project we’ll build—programming the ESP32/ESP8266 and setting up the Firebase Project was done in Part 1 (
ESP32 Part 1
;
ESP8266 Part 1
).
Firebase hosts your web app over a global CDN using Firebase Hosting and provides an SSL certificate. You can access your web app from anywhere using the Firebase-generated domain name.
When you first access the web app, you need to authenticate with an authorized email address and password. You already set up that user and the
authentication method in Part 1
After authentication, you can access a web app page that shows the sensor readings. The sensor readings are displayed in cards, gauges, charts and table. You can select how many readings you want to show on the charts and you can also choose how you can view your data.
There is a button to show/hide all readings saved on the database on a table with timestamps.
There’s also a Delete button that allows you to delete all data from the database.
All the data is restricted using database rules.
Prerequisites
Before start creating the Firebase Web App, you need to check the following prerequisites:
Creating a Firebase Project
You should have followed one of the next tutorials first:
ESP32 Data Logging to Firebase Realtime Database
ESP8266 Data Logging to Firebase Realtime Database
The ESP32/ESP8266 must be running the code provided in that tutorial. The realtime database and authentication must be set up also as shown in the tutorial.
Install Required Software
Before getting started you need to install the required software to create the Firebase Web App. Here’s a list of the software you need to install (click on the links for instructions):
Visual Studio Code
Node.JS LTS version
Install Firebase Tools
1) Setting Up a Firebase Web App Project (VS Code)
Follow the next steps to create a Firebase Web App Project using VS Code.
1) Creating a Project Folder

Create a folder on your computer where you want to save your Firebase project—for example,
Firebase-Project
on the Desktop.

Open VS Code. Go to
File
>
Open Folder…
and select the folder you’ve just created.

Go to
Terminal
>
New Terminal
. A new Terminal window should open on your project path.
2) Firebase Login

On the previous Terminal window, type the following:
firebase

You’ll be asked to collect CLI usage and error reporting information. Enter “
n
” and press
Enter
to deny.
Note:
[email protected]
”.

After this, it will pop up a new window on your browser to login into your Firebase account.

Allow Firebase CLI to access your Google account.

After this, Firebase CLI login should be successful. You can close the browser window.
3) Initializing Web App Firebase Project

After successfully login in, run the following command to start a Firebase project directory in the current folder.
firebase
init

You’ll be asked if you want to initialize a Firebase project in the current directory. Enter
Y
and hit
Enter

Then, use up and down arrows and the Space key to select the options. Select the following options:
Realtime Database
: Configure security rules file for Realtime Database and (optionally) provision default instance.
Hosting
: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
The selected options will show up with a green asterisk. Then, hit
Enter

Select the option “Use an existing project”—it should be highlighted in blue—then, hit Enter.

After that, select the Firebase project for this directory—it should be
the project created in this previous tutorial
. In my case, it is called
ESP-project
. Then hit
Enter

Then, select the hosting options as shown below:
What do you want to use as your public directory? Hit
Enter
to select
public
Configure as a single-page app (rewrite urls to /index.html)?
No
Set up automatic builds and deploys with GitHub?
No

Press
Enter
on the following question to select the default database security rules file: “
What file should be used for Realtime Database Security Rules?
“

The Firebase project should now be initialized successfully. Notice that VS Code created some essential files under your project folder.
The
index.html
file contains some HTML text to build a web page. For now, leave the default HTML text. The idea is to replace that with your own HTML text to build a custom web page for your needs. We’ll do that later in this tutorial.

To check if everything went as expected, run the following command on the VS Code Terminal window.
firebase
deploy
You should get a
Deploy complete!
message and a URL to the Project Console and the Hosting URL.

Copy the hosting URL and paste it into a web browser window. You should see the following web page. You can access that web page from anywhere in the world.
The web page you’ve seen previously is built with the HTML file placed in the
public
folder of your Firebase project. By changing the content of that file, you can create your own web app. That’s what we’re going to do in the next section.
2) Creating a Firebase Web App
Now that you’ve created a Firebase project app successfully on VS Code, follow the next steps to customize the app to display the sensor readings on a login-protected web page.
index.html
Copy the following to your
index.html
file (it is inside the
public
folder).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ESP Datalogging Firebase App</title>

<!-- include highchartsjs to build the charts-->
<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- include to use jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!--include icons from fontawesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<!-- include Gauges Javascript library-->
<script src="https://cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.7/all/gauge.min.js"></script>
<!--reference for favicon-->
<link rel="icon" type="image/png" href="favicon.png">
<!--reference a stylesheet-->
<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<!--TOP BAR-->
<div class="topnav">