Firebase Web App with the ESP32 and ESP8266 eBook
Build a Firebase Web App to Control Outputs and Monitor Sensors from Anywhere (Includes Login/Logout Authentication)
Build a Firebase web application that can monitor and control your ESP32 and ESP8266 boards from anywhere in the world. The application allows you to control the ESP GPIOs using buttons, sliders and send input data. It also displays sensor readings sent by the ESP board. All the data is saved on the Firebase Realtime Database. The web application is protected with login using email and password, and your database is protected using database rules.
What is Firebase?
Firebase is Google’s mobile application development platform that helps you build, improve, and grow your app. It has many services used to manage data from any android, IOS, or web application. We’ll focus on the building process.
The tools provided by Firebase cover many of the backend services that you would normally have to build yourself like authentication, databases, hosting, and so on—those are the Firebase services that we’ll use and explore throughout the eBook.
Web App Features
The following picture shows a sneak peek of the web app you’ll build throughout this ebook.
Here’s a summary of the app’s main features:
- The ESP32/ESP8266 can be controlled and monitored from anywhere using the Firebase Web App we’ll build.
- The Firebase Web App is protected with login using email and password. Only an authorized user can access the data. Additionally, your database is protected by database rules.
- The web app displays two buttons to control two GPIOs ON and OFF, two sliders to control PWM outputs, an input field to insert a message, cards, charts, and a table to display sensor readings.
- All the data is saved on the Firebase Realtime Database.
- The web app gets the new readings from the database nodes that the ESP is publishing in.
- The ESP boards detect database changes and update the peripherals states almost instantaneously.
- You can access your Firebase Web App from anywhere in the world to interact with your ESP32/ESP8266 using a custom domain or the Firebase-generated domain name.
- The web app is mobile responsive.
What’s inside the eBook?
The eBook contains the step-by-step instructions to build a Firebase Web App to control and monitor the ESP32 and ESP8266 boards. We’ll use the following Firebase services: Authentication, Realtime Database, and Hosting; and you’ll program the ESP32/ESP8266 boards to interact with the web app. The boards are programmed using the Arduino core.
The eBook is divided into 6 parts:
- Part 1: Creating a Firebase Project—you’ll learn how to create a Firebase project and set up all the necessary services (Authentication and Firebase Realtime Database).
- Part 2: Organizing your Database and Database Rules—we’ll show how to organize your database and set up database rules to protect your data.
- Part 3: ESP32/ESP8266: Interacting with the Realtime Database—interact with the Firebase Realtime Database using your ESP32 and ESP8266 boards: learn how to read and send data to the database.
- Part 5: Hosting your Web App (Custom Domain Name)—host your web app and set up a custom domain name to access your web app anywhere. Alternatively, you can also access your app using the Firebase-generated domain (for free).
- (NEW) Part 6: ESP32/ESP8266 Datalogging to the Realtime Database—you’ll take your project further by adding a datalogging feature. You’ll learn how to log data with timestamps to have a record of your data history. You’ll display the data on the web app on charts and a table.
Here’s what you’ll have access to when you get the eBook:
- eBook in PDF format (6 Parts, ~230 pages)
- Unlimited Free Updates (includes future eBook updates)
- Access to a private Forum to ask questions
- Exclusive access to our Facebook group community
What you’ll learn:
By following our project, you’ll learn about the following subjects:
- Firebase Projects:
- Create a Firebase project;
- Add authentication to your Firebase project (email and password);
- Add a Realtime Database (RTDB) to your project to save data in JSON format;
- Organize your RTDB;
- Protect the RTDB using database rules;
- Add a web app to your Firebase project to control and monitor your ESP32 and ESP8266 boards;
- Host your web app in Firebase servers;
- Add a custom domain to your web app— this requires that you buy a domain name (this step is optional).
- Authenticate the ESP32 or ESP8266 board as an authorized user with email and password;
- Write data to the Firebase Realtime Database;
- Stream database—detect any database changes;
- Run tasks depending on the detected changes;
- Log data with timestamps using the ESP32/ESP8266 to the Firebase.
- Firebase Web App:
- Create a web app and connect it to your Firebase project;
- Build the webpage for your app using basic HTML and bootstrap (CSS framework): login/logout modals, buttons, sliders, table for sensor readings, and input fields;
- Query and retrieve data to display it on charts and tables.
Continue reading for the complete Table of Contents…
PART 0: Getting Started
Part 0 introduces the project. It covers what you’ll learn, how to follow this project and some recommended prerequisites. We’ll also look at the project’s main features and give you a quick introduction to Firebase.
PART 1: Creating a Firebase Project
In this part, you’ll learn how to create a Firebase project and set up the authentication methods and the realtime database.
PART 2: Organizing Your Database and Database Rules
Learn how to organize the data in the realtime database to make it easier to set up database rules. Create database nodes to save the data and apply database rules to restrict access.
PART 3: ESP32/ESP8266: Interacting with the Realtime Database
This section will teach you how to interact with the realtime database using the ESP32 or ESP8266 boards. You’ll learn to authenticate with the ESP board, read and write to the database and automatically detect any database changes.
PART 4: Creating a Firebase Web App
In this Part, you’ll create a Firebase web app to control and monitor your ESP32/ESP8266 board from anywhere. The web app contains buttons and sliders to control the GPIOs, an input field to write a text message to the OLED, and a table to display sensor readings.
PART 5: Hosting Your Web App (Custom Domain Name)
Take a step further and add a custom domain name to access your web app (this part is actually pretty simple and it only takes about 10 minutes).
PART 6: ESP32/ESP8266 Datalogging to the Realtime Database
You’ll take your project further by adding a datalogging feature. You’ll learn how to log data with timestamps to have a record of your data history. You’ll display the data on the web app on charts and a table.
Prerequisites (recommended but not mandatory)
To get a better experience following along with this project, we recommend having some previous knowledge about the following subjects:
- Basic programming of the ESP32 and/or ESP8266 with the Arduino core, like controlling outputs and reading sensors. To get familiar with these boards, you can follow our free tutorials or our premium courses:
- Being familiar with VS Code editor and VS Code with the PlatformIO extension. You can follow the next tutorials to get started with this IDE quickly:
If you don’t have previous knowledge about these topics, you can still follow along as we provide step-by-step instructions. However, it might be more challenging to understand some steps and modify the project for your specific needs. Nonetheless, we’re sure you’ll also be able to get the app working.
What do you need to follow the eBook?
To follow the project in the eBook you can either use an ESP32 or ESP8266 board. We usually use the ESP32 DEVKIT DOIT board, but you can use any other ESP32 board.
As for the ESP8266, we use the ESP8266-12E NodeMCU Kit, but once again you are free to use any other ESP8266 board.
You only need a few electronics components to follow along. Here’s the complete list:
- ESP32 or ESP8266 board;
- BME280 or any other sensor you’re familiar with;
- 4x LEDs;
- 4x 220 Ohm resistors;
- SSD1306 0.96inch OLED display;
- Jumper wires.
Invitation to Join our Private Forum!
This eBook comes with an opportunity to join our private Forum of like-minded people where you can ask questions about the eBook or other related subjects. You’ll get direct help from Rui and Sara or from other active members of the community.
Download the eBook
- Updated April 2022
- PDF eBook with ~230 pages
- Step-by-step instructions
- Code explanation
- Unlimited Updates
- Exclusive access to a Private Forum
- English language
- Created by Rui Santos and Sara Santos
Click here to get the eBook | $27
Note: after your purchase, you receive an email with a username and password that you use to access the members’ area and download the PDF eBook.
Have questions? Email me at https://randomnerdtutorials.com/support anytime for any reason.
You won’t regret it. My 60-day money-back guarantee backs up every word in this message. Proceed with confidence. See you inside,
-Rui Santos and Sara Santos
Backed by a 60 day 100% money-back guarantee
If you don’t like the course, I don’t want your money. Seriously, that’s why I offer a 60 days money back guarantee. Email me here and I will promptly refund all your money. No questions, no hassles – it’s that simple.
Frequently Asked Questions
To program the ESP32 and ESP8266 boards you can use Arduino IDE or VS Code with the PlatformIO extension. We provide the sketch files for Arduino IDE and complete project folders for VS Code.
To build the Firebase web app, we’ll use VS Code (Visual Studio Code).
The Firebase services we’ll use to build and host the web app are free. Optional: during Part 5 you can buy a custom domain name. That part is totally optional as the web app works perfectly well using the free Firebase-generated domain name.
Yes. It is not mandatory to have all the recommended prerequisites to follow along as the eBook is step-by-step style. You can still get your app working, and you’ll also learn a lot. However, it might be more challenging to modify the app for your specific needs. If this is your first time using the ESP32 or ESP8266 board, we recommend following some basic tutorials or following our ESP32 or ESP8266 eBooks first.
Yes. 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.
This eBook is for those who want to learn how to build their own web app to control and monitor the ESP32 or ESP8266 boards from anywhere using Firebase backend services (authentication, realtime database, and hosting).
If you get stuck at some point, you can use our forum to post your issue. We answer all the questions. You can also send us an email with your issue, and we’ll try to help as much as possible so that you get your app working.
Yes, we often update all our eBooks, so everyone who purchases gets free lifetime updates. You’ll also have access to future content that we might add to the eBook.
Well, if you don’t like it, I don’t want your money. Seriously, that’s why I offer a 60 days money back guarantee. Email me here and I will promptly refund all your money. No questions, no hassles – it’s that simple!
If you still have questions after reading this page please email me here. I’ll do my best to answer your questions.
Meet the Authors
Hey there, I’m Rui Santos, founder of the Random Nerd Tutorials blog. For the last couple of months, we’ve been working on this new eBook dedicated to building a web app with Firebase to control and monitor the ESP32 and ESP8266 boards from anywhere. If you like our work, you’ll certainly like the “Firebase Web App with ESP32 and ESP8266” eBook.
Hi. I’m Sara Santos and I create, write, and edit the tutorials and articles for the Random Nerd Tutorials blog. After the success of a couple of tutorials related to Firebase, we decided to create an eBook exclusively dedicated to Firebase with the ESP32 and ESP8266 boards. I’ve only started playing with Firebase recently. I only regret not having started earlier, because it is easy to use and opens many possibilities. I hope you love this project as much as I do.
See what others are saying
Thank you Rui. Anyone wondering whether you bring value can rely on my word. I’ve purchased hundreds of books over a 45 year career as engineer and entrepreneur. NONE of these books have approached your excellent method of teaching a subject. You have a rare gift as a teacher. Glad to have made the purchases.
I want to congratulate you on the manuals you have created, they are the best of the best that I have seen in many years. (… ) Your explanations are very clear and very detailed, as if you were a teacher…
I placed the order of these ebooks/courses and have downloaded the eBooks. The ebooks are very informative and very well presented, as is your website(…).
I want to thank you for the high quality of your projects. Too many others just list a series of tasks but not what to do when they do not go as planned. The detail that you have put into the writeups is amazing. I am working with my 10 year old grandson to help this interest in electronics and software. It would be much harder without your guides.
Thank you so much for all your excellent projects. I have been following you for several years and I have learned a lot and applied many of your ideas. Please continue all of this furthermore
Your e-books and website are amazing – you and Sara are fantastic teachers and I am really enjoying my new hobby.
AS SEEN ON…