Get fitbit steps on your personal website [Revised]

So someone on the /r/fitbit page asked a general question about how to get fitbit steps on your personal website. I had previously asked this question before, and answered it myself. However since then my solution has changed, and I failed to document it. I promised I would update him, and here I go.

Assumptions / Pre-requisites
Here are the things you are going to need to set this up
– A fitbit API key (there are lots of guides like this one to request an API key)
– An understanding in Web Technologies (HTML, CSS, Javascript) and more importantly a web programming language – I will be using PHP
– A web server that supports your languages of choice.
– You have a google account which you can use google drive on

Step 1 – Outsourcing Oauth to Google Drive

Step 1.1 – Information
I am not a web developer, I make websites as something fun to do, so naturally, oAuth scares me. luckily there is a Google Apps script that does all this for me.
All of this step 1 is dedicated to whomever wrote this article http://quantifiedself.com/2013/02/how-to-download-fitbit-data-using-google-spreadsheets/

Step 1.2 – Make a (depreciated) google spreadsheet

We need to make a google drive spreadsheet, but it needs to be the old version of sheets,   you NEED to request an old sheet with this link – https://g.co/oldsheets
This is because the sharing functionality in the older spreadsheets are superior to new spreadsheets. Hopefully google never fully deprecate these spreadsheets styles, because the whole of this process relies on old versions of google sheets.

– Request a new spreadsheet with the URL above (https://g.co/oldsheets)
– Give them a valid reason you are using an old sheet style (they seem to be asking for it now)
– Name the spreadsheet something meaningful
– Save the spreadsheet

Step 1.3 – Add the script to your Google Spreadsheet
Google drive spreadsheets (in this case sheets) have the ability to program back end scripts in javascript, The next few steps will be dealing with what is called “Google Apps Script” which link to our Google Spreadsheet.

Go to your new spreadsheet we made in the last step (Should still be open)
Go to Tools > Script Editor

http://i.imgur.com/R1Xucdp.png

If the “first time” Google Apps Script menu pops up, cancel making sure you select “Dont show again” and “close” to close all dialog popup boxes, You should now be looking at an empty page, or a blank JavaScript function currently in the script editor.

This is where we need to place the script that will do all the oAuth work for us.
Delete everything in the script box (there should be a blank function – make sure you have a blank script)
Then paste the FitbitDownload.gs script (Found Here: Original GitHuB Source or Rehosted on Pastebin) so that it is the only thing in your new google apps script code area.

Press the save button and name the script if necessary

Step 1.4 – Run the functions to configure the script

From the “Select Function” drop down
You want to run the functions in this order order

1.4.1 – Run the Authorize Function
(Note: This will allow Fitbit access to your google apps data)
Select “authorize” from the drop down
click the button that looks like a “Play” button
(Which is 2 buttons to the left of the “Select Function” drop down)
once you run the function, a popup box will appear.
click authorize and login with your fitbit account to finish this step.

1.4.2 – Run the Setup Function
Next run “setup” function with the same method as the above step
(NOTE: you will have to alt tab back to your Google Drive spreadsheet,
because a popup opens there asking for more details.- see below)
http://i.imgur.com/Y2X8Vpb.png

Once you see the above popup on the Spreadsheet tab, Enter:
a. Your API key – This need to be filled out with a valid key – unlike mine seen above.
b. Make sure you enter today’s date, unlike my screenshot above (setting a super old date will result in an error because these details are not longer request-able from fitbit)
c. Make sure you select all of the “Data Elements” by using CTRL when you click.
(Make sure they are highlighted)
Then click “Save Setup”

1.4.3 – Run the Sync Function
After you have successfully configured “Setup”
Go back to your script and run “Sync”

All your data should now be in the spreadsheet.

Step 1.5 – Add an automated trigger to your script
We now need to tell google scripts to run the “sync” function every 15-30 minutes (up to you)
You should still have the script editor open in a tab. Go back to it
(if not, go to Tools > Script Editor on your spreadsheet)
Click on the speech bubble looking icon, when hoevered over the icon will say “Current Projects Triggers”
On the dialog menu, select “Add a new trigger”
And set “Sync” to run every 15 minutes.
http://i.imgur.com/ZJH0Nbe.png

Your spreadsheet will now stay updated!

Step 1.6 – Set your spreadsheets share settings to Public
Navigate back to your Google Spreadsheet, (you may close the script editor if you like.)
From the “File” menu, select “Publish to the Web”
A popup should appear, Make sure “All Sheets” is selected before you click “Start Publishing”
You should now be able to “Get a link to the Published Data” which is a web link.
Make sure that link works in a browser. if it does we are ready to do some web coding!

Step 2 – Show the Google Docs Data on your Website

Step 2.1 – Upload my API to your site
Go to pastebin and get my API  – http://pastebin.com/GrA7xUVd
This API basically reads in the google spreadsheet
Using string manipulation, it finds the values for todays step values (using the server date)

Step 2.2 – Configure my PHP API
There are 3 variables you want to configure in my API, I have detailed them pretty clearly.
1. The location to your google spreadsheet, this is obvious, the API needs to know the URL of the spreadsheet we set up earlier.
2. If you want the API to output JSON or not
3. Set your timezone – Setting your timezone is crucial to ensuring you get todays step total.

Step 2.4 – Load the page in a browser
Once you’ve configured the settings,
And uploaded the page to your web server
You should be able to load the page in your browser!
navigate to the URL of where you uploaded the php page
And remember to add ?ddos=1 to the end of the PHP URL address, because that’s how I avoid web crawlers pulling fitbit data accidentally.
an example of your URL would be http://website/directory/fitbit_and_gdocs_api.php?ddos=1

Step 2.3 – Consider application design and page load speed
the API I have provided is not designed for fast page loads.
If you include this code in your homepage, it will slow your site load times down considerably, as you are now not only requesting your homepage, but also loading a google spreadsheet every page load.
I run this page and load the values into a MYSQL table once every 15 minutes.
Because a Mysql table statement is 100 times quicker than loading a google spreadsheet.

Done!

In theory we have now included fitbit data on your website!