Login

Home automation using Firebase

Objectives

  • Create an app to control household appliances from your smartphone over the internet.
  • Control the switches in the UI programmatically by listening to changes in the real-time database.
  • Setup a firebase account.
  • Create database entries in the real-time database.
  • Create UI for the android app to control appliances.
  • Connect android app to firebase’s real-time database.

Let’s begin!

We will utilize firebase’s realtime database feature to accomplish this. Firebase also provides many other useful features for developers like analytics, crashlytics etc, You can learn more about them on their official website https://firebase.google.com/

Get started on Firebase

Step 1: Visit https://firebase.google.com/ and login with your google account.

Step 2: Click on get started

 

Firebase homepage

 

Step 3: Click on add project

 

Add firebase project

 

Step 4: Give a project name and hit continue

 

Create project dialog

 

Step 5: Go through the terms and conditions , accept it and click create project

Step 6: Your new project is now created, in the sidebar, search for database and click on it

 

Click on database

 

Step 7: Scroll down in the next page and select create Realtime database. And create it in the locked mode.

 

Create Realtime database

 

Step 8: After creating the database the result would look like something like this, the name might be different depending on what you chose as the name while creating the project.

 

After creating Realtime database

 

Creating database entries to control home appliances

Data in this database is stored in json format

Step 1: Hover over the database name and click + to create fields for the database

 

Adding fields to real-time database

 

Step 2: Click on + to create the  field

 

Create child of root field

 

Step 3: Now click on + button beside value field to create a child of smartAC field, name it status and give it an initial value of OFF

 

Create child of smartAC

 

Step 4: Click on Add to create the field

 

After creating smartAC field

 

Step 5: Hover over the database name to create more such fields, we can add as many fields as we wish.But we will create only three fields for now.

 

After creating necessary fields

 

Step 6: We need to modify the rules of the database so that any device can access our database. To do this just go to the rules tab and set both read and write to true and hit publish.

 

Set read and write access to true

 

That’s it we have set up the database!

Creating UI to control appliances

Step 1: Create a new android studio project.

  • To make the textviews attractive, we will round it and apply color to its border.
  • Roundtextviews are not readily available, so we will define a drawable resource with our custom border sizes and set thios drawable resource as out textviews background.

Step 2: Click on drawable -> drawable resource file-> name it ring_file ->click OK

 

Create drawable dialog

 

Step 3: Paste the below code into the ring_file

To copy the code, right click on view raw at the bottom of the code, click on open link in new tab and then copy the code.

  • Here we are setting the shape to a ring and giving other necessary parameters like color, thickness etc.
  • Then we set its corners attribute to half the size of activity_main.xml’s textview attributes, so that when this ring is set as the textview’s background, it will give the impression of a rounded textView.

Setting up activity_main.xml

Step 1: In acvtivity_main.xml, create three textViews and three switch buttons, set the textview’s id, and set the layout_width, layout_height attribute to double the size of corners size in ring drawable.

Step 2: Set the background of these textviews to @drawable/ring.

Step 3: Create a master switch that controls all these three switches and a textview to display the status of the master switch.

  • If you remember relative layout from the last module correctly, you will be able to easily setup the activity_main.xml to look like this

 

activity_main.xml

 

  • Activity_main.xml will look like this after the changes.

To copy the code, right click on view raw at the bottom of the code, click on open link in new tab and then copy the code.


Adjust the margins according to your requirements and your phone’s display size. Use your creativity to get the UI to look more beautiful.

Connecting our app to firebase

Now lets connect our app to firebase

Step 1: Click on Tools > Firebase , then from the tools pane on the right side select Real-Time Database and click on save and retrieve data.

 

Connect app to firebase

 

Step 2: Choose the existing database that you created and click connect.

 

Select the Realtime database created on firebase

 

Now you will be connected to the databases successfully.

 

Confirmation after successful connection

 

Step 3: After this step for the app to communicate to firebase, we need to go back to firebase -> Click on project name -> click on the app name that you just connected from android studio -> click on the settings icon -> scroll down and download google-services.json

 

google-services.json

 

Step 4: Now in file explorer -> open your project -> Navigate to app folder ->Paste the google-services.json file there 

Getting a reference to the database from Java code

We need a reference to this database inside our mainActivity to programmatically change the real-time database whenever we toggle the switches.

Step 1: The lines below get a reference to our database inside mainActivity

Step 2: This creates a connection to the root of the database tree. To move further down the database tree , you can create another Database Reference like this.

To copy the code, right click on view raw at the bottom of the code, click on open link in new tab and then copy the code.

Step 3: Make objects for the text and button elements. And instantiate them inside the onCreate method.

To copy the code, right click on view raw at the bottom of the code, click on open link in new tab and then copy the code.

Step 4: To grab data from Firebase we will use Firebase API’s onDataChange, onCancelled methods by calling a onValueChange listener.

To copy the code, right click on view raw at the bottom of the code, click on open link in new tab and then copy the code.

The if-else check inside OnDataChange is to check for the initial state of master switch s4 on app startup and allow the switch s1 to toggle only if master switch is on.

Step 5: Similarly add valueEventListeners to smartBulb and smartFan.

Step 6: Now we need to update the database whenever we toggle any of the switches.

To copy the code, right click on view raw at the bottom of the code, click on open link in new tab and then copy the code.

Step 7: Add similar methods for s2 and s3.

Step 8: Then add this method to check the state of the master switch

To copy the code, right click on view raw at the bottom of the code, click on open link in new tab and then copy the code.

Final Code

After all these changes, the mainActivity will look like this.

To copy the code, right click on view raw at the bottom of the code, click on open link in new tab and then copy the code.

You can play around with the android app and see the values of your Realtime database changing in your database page on the firebase website.

Testing Firebase on a NodeMCU board

To test this out, you can take a Nodemcu and connect an RGB LED to mimic appliances and dump the code shown below into it. 

Step 1: Install the ESP8266WiFi and FirebaseArduino libraries from Tools -> Manage libraries inside arduino

Step 2: Connect red LED to pin D0, green to D1 and blue to D2. Imagine these LED’s representing your smartAC, smartBulb and smartFan respectively.

Step 3: To get the database host id and auth id Goto realtime database in firebase wesite, click on settings icon at the top beside project overview.

 

Getting host id and auth id

 

Step 4: Navigate to service accounts tab and click on database secrets.

Step 5:Hover over the database secret and click show. Copy this secret. This will be the Host Id

Step 6: Navigate back to database homepage and the https url that you see is the Host Id but paste this url excluding https://

 

Host Id

 

To copy the code, right click on view raw at the bottom of the code, click on open link in new tab and then copy the code.

There you go!

Now whenever you toggle smartAC switch inside your app. You will see the Red LED glow, similarly for smartBulb and smartFan green and blue LED’s will glow.

Note:

  • You should switch toggle the master switch on to toggle any of the remaining switches.
  • The app will not work till you have downloaded google-services.json file to app folder, and set the database permissions on firebase correctly.
SEE ALL Add a note
YOU
Add your Comment

We would love to see what you build out of these learnings!

Click here to submit your projects, share it with the world and stand a chance to be rewarded.

top

Knowledge and Content by Li2 Technologies | © 2021 NASSCOM Foundation | All rights reserved

X