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)

GET THE EBOOK »

We are currently running an early Black Friday Deal on our Firebase eBook. You can grab it with a 24% discount during the next few days (the discount ends when the timer below hits zero).

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 4: Creating the Firebase Web App—set up HTML and JavaScript files to create the web app to control and monitor your boards.

• 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)
• Source Code + Project Files (Arduino sketches, VS Code project folders, HTML and JavaScript files to build the web app)
• 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).
• ESP32/ESP8266: 
  • 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;
  • Listen to database changes to update the web app data using JavaScript;
  • Write to the database to control the ESP32 or ESP8266 outputs using JavaScript;
  • 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:
  • Free ESP32 Tutorials
  • Free ESP8266 Tutorials
  • Learn ESP32 with Arduino IDE (eBook + Video course)
  • Home Automation using ESP8266 (eBook + videos)

• 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:
  • Getting Started with VS Code and PlatformIO IDE for ESP32 and ESP8266
  • VS Code Workspaces with ESP32 and ESP8266 Projects

• Basic knowledge of HTML, CSS, and JavaScript. We assume that you have basic knowledge about HTML (basic HTML tags), CSS, and JavaScript (variables, functions, and events). A good place to get started quickly with the basics is the W3schools website. We also cover these topics in our Build Web Servers with the ESP32 and ESP8266 eBook.

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;
• Breadboard;         
• 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

GET THE EBOOK | $35 $25 USD »

Click here to get the eBook | $35 $25 USD

We are currently running an early Black Friday Deal on our Firebase eBook. You can grab it with a 24% discount during the next few days (the discount ends when the timer below hits zero).

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

Frequently Asked Questions

Meet the Authors

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.

Paul

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…

Tino Fernández

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(…).

Robert Kyle

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.

Doug Hogg

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

Michael Moske

Your e-books and website are amazing – you and Sara are fantastic teachers and I am really enjoying my new hobby.

W Bos

AS SEEN ON…

GET THE EBOOK | $35 $25 USD »

Click here to get the eBook | $35 $25 USD