The other day I bought the cloudBit Starter Kit from LittleBits (Amazon US | Amazon DE). They claim that the cloudBit is the easiest way to create internet-connected devices. Especially the part about it working with ifttt supports that claim. Press a physical button to send an email is as easy as activating a pre-defined „recipe“.
But I wanted something a little bit more sophisticated: An analogue display of the count of people currently active on our website (mymuesli.com).
First step: Setup your circuit
My circuit is very simple: usb power | button (not necessary) | cloudBit | servo. To display the value I’m using the LittleBits servo that is part of the cloudBit Starter Kit. If you set it to „turn“ you are able to send a value from 0-100 and it will turn to the according position.
Get the cloudBit to output a specific value when you open/refresh a website.
As ifttt recipes only update every 15min and a few other options didn’t pan out I started to look into working directly with the cloudBit API. I’ve connected to the API using PHP, but you can probably also use other languages, but as PHP is part of most web hosting packages it’s probably a popular choice.
So fire up your editor of choice and create a php-file for your code, so you end up with a path to your file like this: yourdomain.com/littlebit/update.php
The code
Before we can get started head over to cloud control and grab your Device ID and AccessToken on the lower part of the page „Advanced“. Just fill in Device-ID and Auth-Token accordingly in the code.
The important part happens in the cloudData array. There you can set the duration and output value by editing the variable-data. The „-1“ at duration tells the servo to keep the position forever instead of moving back to 0 after a while.
Testing time: Just save the file and open it in a webbrowser. If you succeeded in adapting the code the servo of your cloudBit will turn to 80. Try other other values – experiment a little.
Getting a dynamic value for the output
Hopefully everything went fine and we can go ahead and think about the next step. You probably want a dynamic value to display on your very own dashboard. The possibilities are endless. You could make a weather box or even display data from another smart home appliance like the Netatmo with the according API.
Connecting to the Google Real Time Reporting API
In my case I wanted to get the number of people that are currently active on our website. What I have to do is connecting to the Real Time Reporting API of Google, get the according value and pass it into the percent-variable of the littleBit API call. Easy right?
The hard part isn’t getting the value itself though – it’s getting authorization up and running on your server. There are quite a few steps to do here.
Prepare for server-side authentication
1) Head over the Google Developer Console (being logged in with a google account) and create a project. Give it a descriptive name like LittleBits-Dashboard.
2) Search for the Analytics API in the Overview and activate it. It will prompt you to create login-credentials to use the API – click the link to do that.
3) When creating the credentials select Analytics API in the dropdown which API you’re using. Select „Other non-UI (e.g cronjob)“ in the dropdown asking you where you will be calling the API from. Choose „Application Data“ for the kind of data you want to access. In the last question click the radio-button saying that you’re not using Google App/Compute Engine.
4) Create a service-account at the next screen by typing another descriptive name in the fields. This is what it should look like, just pick another name.
Once you click continue a .json file will be automatically downloaded by your browser. You need that in a minute.
5) Click on „manage service accounts“ in the Credentials part of the console to get a hold of that email-address you’ve just created. It should look something like YOURPROJECTNAME@PRJOJECT.iam.gserviceaccount.com. Copy that email-address to your clipboard.
6) Head over to your Google Analytics Admin Center. In the Account level click „User Management“ and add that email-address to your account and give it access to „Read & Analyze“ your data.
7) In the View level of your Google Analytics account click on „View Settings“ and locate your View Id. Copy it and have it ready for later.
Preparing to connect to the Google Real Time API using PHP
Now we need to setup the web server to be able to connect to the Google Real Time API. Make sure you have PHP version 5.2.1 or greater active on your web server.
1) Download the latest stable release of the Google API PHP Client and unpack it.
2) Copy the contents of the zip into a subfolder of your website, like yourdomain.com/google-api-php
3) Optional: In that folder create a .htaccess file with the following content
Order deny,allow
Deny from all
This will disallow everybody other than your server to access that folder.
4) Copy that .json file that was downloaded before into that new folder you just created.
Connecting to the Google Real Time API using PHP
We should have everything in place now to retrieving some data from Google Analytics. Place this code above your call to the LittleBit API. There are 4 things to fill out in the code. Don’t forget the VIEW-ID that you saved before. The „ga:“ part needs to be there, just add the number of your view to the string.
The hardest part here is to figure out where to point the includes to. If you have trouble navigating into that folder (google-api-php) you’ve just created try placing this line in the script to let you know where your script is located at.
echo realpath(dirname(__FILE__));
Hopefully you get it to work and your script (yourdomain.com/littlebit/update.php) will display the correct number. Our variable carrying the live count is $count, we can now reference it in other code-parts.
Hooking up the LittleBit API to the Google API
The LittleBit Output accepts input from 0 to 100, so you’ll have to make sure that your count from Google Analytics ($count) is translated into that range. My code for that does that preparing for a scale of a maximum of 500 people.
if ($count > 500) {
$littlebitcount = 100;
} else {
$littlebitcount = round($count/500*100);
};
The only thing left to do is placing the new variable ($littlebitcount) into the API call to your cloudBit. Just locate the following part in the code and change it accordingly.
// The data to send to the API
$cloudData = array(
'percent' => $littlebitcount,
'duration_ms' => -1
);
Final step: Automatically call the script every minute to update to the current number
Finally we need some way of calling that script automatically. Luckily there are very simple (and free) services to do exactly that. The one I use is www.cron-job.org.
Register an account and create a new „cronjob“. Just provide the the location of your file and set the schedule. Hit „create cronjob“ and your done! Now this service will automatically call your very own script and that way update your count and consequently send it to your cloudBit.
Have fun building – let me know if this tutorial helped you and most importantly what you built!
Extra goodie
You can download a PDF of the drawing that I did for my dashboard. As a needle I just used a long toothpick and painted it red with nail-polish.
