Store Arduino data in Firebase cloud with WiFi and present with CanvasJS

I was looking for many various ways of storing Arduino data in a server and presenting in client. There are many ways of doing this and one interesting way is Temboo + Google BigQuery.  It’s much easier to implement since what you have to do is just follow the steps and it will generate everything including the code for you. For some weird reason this never worked for me and I found that troubleshooting is hell of a thing because you are too much relying on generated code.

Later I found this miracle post in devacron.com  mentioning much more easier way with 100% hand written and easy to understand code.

FireBase offers very powerful back-end for apps and offers a cloud based data storage platform which is ideal solution for playground for Arduino. Most fascinating fact with Firebase is that these guys offers 1GB storage, 100 parallel connections and 10GB transfer for there free forever plan which is more than enough to power up even your most complex ‘connected’ home with Arduino.

Only problem with Firebase is that they accept only HTTPS connections which is too much for my UNO to bare. But the article in devacron uses a nice hack by having a PHP middleman to retrieve data from Arduino and send that to Firebase. Even though they didn’t mention any credit in their post, I later found that the hack was done here.

sketch
Simple illustration of the setup (Arduino + PHP + Firebase + canvasJS)

I’ll start the setup from the Firebase side.

First, create a login in Firebase and create a new app.Now go to the app URL and Press the Secrets tab on left bottom. Note down the app URL (Eg: https://myawesomearduino.firebaseio.com) and the secret, we will need it for the next step.

Next,  setup hosting for your site. I used free  000webhost.com and so far it served for my purpose. Anyway choosing the hosting is up to you and make sure the host you choose allows uploading php scripts.

After setting up the hosting, upload following firebaseLib.php and firebaseTest.php

firebaseLib.php

firebaseTest.php

In order to test the setup, manually invoke the data feed (Eg: http://myawesomearduio.netau.net/measure_temparature/firebaseTest.php?arduino_data=32.6) and verify the data saved in Firebase.

Next step is to setup Arduino to sense room temperature. I’ve used ds18b20 temperature sensor. This nice article on hacktronics provide all you know to setup  ds18b20 sensor.

I have used CC3000 WiFi shield in this example and please read my post on how to connect CC3000 to Arduino Uno.

Given below is the sketch I’ve designed using many other examples.

send_temperature_to_php.ino


6ecdeeb06135a2b7a83db317c7b1c11d155141d9cb57b1c5945c3ee3b85dbc72
Setup: Arduino + CC3000 WiFi shield, DS18B20 sensor + Bread board

Upload the sketch to your Arduino and it will start sending temperature readings to the Firebase!

As the last part, I’ve used CanvasJS plot to visualize the data in runtime.

index.html

Have a look at my example!
 http://dsignhome.netau.net/measure_temparature/
site
Temperature readings for one day. It’s unbelievably HOT!!!!!

Special thanks to everyone who shared their experience which made my attempt a success.

Thanks for reading and please share your thoughts. I’d love to know if there’s better way of doing this

Advertisement

16 thoughts on “Store Arduino data in Firebase cloud with WiFi and present with CanvasJS

Add yours

    1. Hi,

      Have you setup firebase correctly in your data feed php (in my case it’s firebaseTest.php)

      Please feel free to access my site as i mentioned in below comment and see if it’s working for you 🙂

      Cheers!

  1. Hi, my friend. I am trying to send the data from Force Sensitive Resistor to firebase using Arduino. I found your project is great and very similar to mine. However, I am facing a problem after I finished creating the website on 000webhost.com and uploading two files. I can not access the data feed link (“http://myawesomearduio.netau.net/measure_temparature/firebaseTest.php?arduino_data=32.6”) to test it. Can you give some suggestion?

  2. excuse me i am beginner
    i have followed all your steps but what i don’t understand is that
    1) http://myawesomearduio.netau.net/ is this your web address or domain? e.g my website is
    http://enggeedi.000webhostapp.com/ and domain is enggeeddi@host22.com
    2) measure_temparature where this comes from is it your fire-base database or not?
    3) when i uploading the php file to the hosting which folder do i have put it?
    4) in the firebasetest.php
    // — Set up your Firebase url structure here
    $firebasePath = ‘/temperature/’;
    how can i set up my firebase url structure

    1. Hi,

      Please find my answers. Both my hosting site and Firebase has changed drastically after this is published so unfortunately I don’t have a favorable answer at this time. I will get back soon when I have time to re-write this to compatible with new firebase format. Please find my detailed answers to your questions.

      Cheers!

      1) http://myawesomearduio.netau.net/ is this your web address or domain? e.g my website is
      http://enggeedi.000webhostapp.com/ and domain is enggeeddi@host22.com

      A: No this is not my real address. My real address is http://dsignhome.netau.net. Unfortunately 000webhost.com has switched to a new location and my web address is not working anymore. I will try to fix this and get back to you
      2) measure_temparature where this comes from is it your fire-base database or not?

      A: measure_temparature is sub directory

      3) when i uploading the php file to the hosting which folder do i have put it?

      A: \measure_temparature\firebaseTest.php

      4) in the firebasetest.php
      // — Set up your Firebase url structure here
      $firebasePath = ‘/temperature/’;
      how can i set up my firebase url structure

      A: This is the location of the firebase where data is stored. Unfortunately firebase also upgraded their access information and I didn’t have time to verify this recently. I will get back when I setup with new firebase format

  3. Hi friend…Now I am doing on this similar project. But I am very beginner of this…so I don’t know what is the step should I start…so Could you please guide me some…? Thank.

  4. Thanks. I have another problem 🙂 I wanna write to database with date and time. I don’t know php and i tried something but it didn’t work. Do you know that how i can fix it?

    Cheers.

    1. Hi Faut,

      It depends on how the date time conversion is handled in the database
      You may use following example to add registered date.

      // Change the line below to your timezone!
      //http://php.net/manual/en/timezones.php
      date_default_timezone_set(‘Asia/Colombo’);
      $curr_date = date(“Y-m-d”);
      $curr_time = date(“H:i:s”);

      $reg_time = {$curr_date}T{$curr_time}
      // eg: reg_time = 2017-05-22T16:11:45

  5. Hi, this is a great tutorial. I’m triying myself but i have a problem in chartJs. My chart is writing last data continiusly. It shouldn’t be if there is no any new data in my firebase. How can i fix it?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Website Powered by WordPress.com.

Up ↑

%d bloggers like this: