Scribd
Upload
90 views37 pages

ESP32 - Firebase Web App

This document outlines the steps to create a Firebase web app using ESP32, including setting up Firebase, installing required software, and deploying the app. It details the installation of Visual Studio Code, Node.js, and Firebase tools, as well as the process of initializing a Firebase project and adding Firebase to the app. The tutorial concludes with instructions for deploying the app and interfacing it with the ESP32 to display real-time data on a web page.

Uploaded by

K SD
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
90 views37 pages

ESP32 - Firebase Web App

This document outlines the steps to create a Firebase web app using ESP32, including setting up Firebase, installing required software, and deploying the app. It details the installation of Visual Studio Code, Node.js, and Firebase tools, as well as the process of initializing a Firebase project and adding Firebase to the app. The tutorial concludes with instructions for deploying the app and interfacing it with the ESP32 to display real-time data on a web page.

Uploaded by

K SD
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 37

ESP32 with Firebase

Creating a Web App


Here are the major steps to complete this tutorial.

1. Creating Firebase
(we recommend using the Firebase project from the previous section).

2. Installing Required Software


3. Setting Up a Firebase Web App Project (VS Code)
4. Creating Firebase Web App
Installing Required Software
To follow this task, we need to install the following software:

1. Visual Studio Code


2. Node.JS LTS version
3. Install Firebase Tools
Installing VS Code on Windows (Visual Studio Code)
Go to https://code.visualstudio.com/ and download the stable build
for your operating system.

Installing Node.js
Go to nodejs.org and download the LTS version.
Installing Firebase Tools (VS Code)

• Open a new Terminal window.


• Go to Terminal > New Terminal.
• Before installing Firebase tools, run the following command to
install the latest npm package.
Npm install -g npm@latest

• Run the following command to install firebase tools globally.


npm -g install firebase-tools
• Test if Firebase was successfully installed with the following
command:
firebase --version

• It should return the Firebase version currently installed.


Setting Up a Firebase Web App Project
• Before creating the Firebase Web App, you need to set up
a Firebase Project on VS Code.

• These are the steps:


1. Creating a Project Folder
2. Firebase Login
3. Initializing Web App Firebase Project
4. Adding Firebase to Your App
1) Creating a Project Folder

• Create a folder on your computer where you want to save your


Firebase project—for example, Firebase-Project.
• 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 login

You’ll be asked to collect CLI usage and error reporting information.


Enter “n” and press Enter to deny.
• 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.
3) Initializing Web App Firebase Project
After successfully logging 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 they up and down arrows and the Space key to select the
options.
Select the following options:
• RealTime Database:
• Hosting:
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.
To check if everything went as expected, run the following command
on the VS Code Terminal window.
firebase deploy
After deploying, you should get your Hosting URL.
Go to that URL.
You should get access to a similar web page.

This web page is built using the files placed in the public folder of your Firebase project.
You can access that web page from anywhere in the world.
Now, the idea is to change the files in the public folder to show your own web page instead of that one.
4) Add Firebase To Your App
• Go to your Firebase console and select your project.
• Then, click on the +Add app button
• Then, select the web app icon.
• Give your app a name. I
simply called it test.
• Then, check the box next
to Also set up Firebase
Hosting for this App.
• Click Register app.
copy
the firebaseConfig
object because
you’ll need it later.
• Click Next on the proceeding steps.
• After this, you can also access
the firebaseConfig object if you
go to your Project settings in your
Firebase console.
Copy the authDomain. In my case, it is (the same we got in the Terminal window after setting up the Firebase project):

https://esp-project-afd59.web.app/
This is the URL that allows you to access your web app.
Creating Firebase Web App
index.html
• We are Coping a code to index.html file.

app.js
• Inside the public folder, create a file called app.js.
• This JavaScript file is responsible for interacting with the Realtime
Database and updating the values on the web page whenever
there’s a change in the database.
Firebase Configuration

Add your firebaseConfig object below.


This is required to authenticate and locate the RTDB of your project.
You get these values from the Firebase Console when you create a project and add a web app

// Your web app's Firebase configuration


const firebaseConfig = {
apiKey: "AIzaSyBpaKjG1r-xkA7kAhjvqxh-kINysxGKi2k",
authDomain: "esp-project-afd59.firebaseapp.com",
databaseURL: "https://esp-project-afd59-default-rtdb.asia-
southeast1.firebasedatabase.app",
projectId: "esp-project-afd59",
storageBucket: "esp-project-afd59.firebasestorage.app",
messagingSenderId: "284324932766",
appId: "1:284324932766:web:3ff1312752afb9afdd1f8f"
};
Deploy your App
• After saving the HTML and JavaScript files, deploy your app on VS
Code by running the following command in VS Code Terminal
window.
firebase deploy
ESP32 Arduino Sketch
• Upload the code to your ESP32.
• This is the same code used in this previous project to write to the
database.
• This code simply writes to the database every 10 seconds.
• Don’t forget to insert your network credentials, database URL, and
Firebase Project API Key, and Firebase user email and password.
Demonstration
• Go to your App URL.
• New readings will show up on the web page every 10 seconds.
• The App updates the web page whenever the ESP32 writes a new value to
the database.
• In this task, we learned how to create a Firebase Web App to interface
with the ESP32.
• You’ve learned how to use Firebase Hosting services and the Real-time
Database.
• It simply displays some random numbers on a web page.
• The idea is to replace those numbers with sensor readings or GPIO
states.
• Additionally, you may also add buttons or sliders to the web page to
control the ESP32 GPIOs.
• The possibilities are endless.
• Currently, the database is in test mode without rules, allowing anyone
to read and write data, and lacks authentication.
Thank
you

You might also like