Firebase-IoT-Dashboard

This is a demonstration of IoT using Firebase Realtime Database. It is very beginner friendly and can easily be implemented in firebase without knowing backend infrastructure and hosted across the world, and so can be accessed from anywhere!

Requirements

1. Firebase - to host a dashboard page and to make a realtime database
2. Node Package Manager or npm from Node.js
3. A NodeMCU - which is an ESP8266 based microcontroller kit/board
4. Arduino IDE - arduino.cc
5. Some LEDs, resistors, sensors and other components as per requirement, to test this project.

The following are the steps to get started:

→ Clone this repository
→ Host the index.html inside the Webpage folder, on firebase hosting
→ Create a Realtime Database on Firebase
→ Head over to the Firebase-basic-iot folder
→ Open the Firebase-basic-iot.ino file with Arduino
→ Set the board as generic ESP8266
→ Upload

Firebase Integration:

• We are using Firebase Realtime Database and Firebase Hosting services, those are available under the spark plan with certain limitations, but it won't be an issue for our purpose.
  ├── Realtime Database - To store the states and Values and communicate with the IoT device(s)
  └── Firebase Hosting - Hosts an web app to interact with the realtime database
  

• Detailed instructions about firebase integration are available on this page!
  

• Firebase Hosting:
  ├── Go to the Webpage folder in this repository
  └── The index.html contains basic html, styling, and the scripting to connect to the firebase database
  

• Firebase Realtime Database:
  ├── Realtime Database in Firebase is a big nested JSON which holds all the Key and Value pairs
  └── The values can be changed both from the device and from the web page based on certain logic
  

NodeMCU setup part:

Go through this repository for all the instructions including the schematic diagrams.

• Note: If you are working with NodeMCU on Arduino IDE for the first time, you may go ahead and take a look into the NodeMCU setup instructions!

Here is a breadboard prototype diagram:

Use this diagram for NodeMCU GPIOs to use with Arduino IDE

Upload the code to NodeMCU

• At first download the FirebaseESP8266.h library.

• Then navigate to the Firebase-basic-iot folder and make a file named config.h.
  Put,
  #inlcude FIREBASE_HOST "PROJECT_ID.firebaseio.com" and
  #include FIREBASE_AUTH "DATABASE_SECRET"
  inside config.h.

  1. You will find these credentials inside settings of your firebase console page -> choose your firebase project -> Realtime Database -> Data copy the URL you see above the DB table, replace PROJECT_ID.firebaseio.com in the macro FIREBASE_HOST with that URL. Note that the URL may not end with firebaseio.com, as in this case, you can see it ends with firebasedatabase.app.
     
     
     
  2. And, ⚙ -> project settings -> Service accounts -> Database Secrets, click Show and then copy the database secret and replace it with DATABASE_SECRET in config.h
     
     

• Your code is now ready, compile it, plug the USB to Node MCU, select the proper board and port(mentioned earlier) and upload!
  

• Keep the USB connected to NodeMCU to access the serial monitor in case you want to debug!
  Type the URL from your Firebase Hosting page, if you did everything properly, you will see something like this:
  

• You have successfully hosted an webpage on firebase to control your IoT device using Firebase RTDB.

Just to see the gist or summary of this project, head over to summary