{"id":88,"date":"2015-05-01T02:31:58","date_gmt":"2015-05-01T02:31:58","guid":{"rendered":"http:\/\/p337.info\/blog\/?p=88"},"modified":"2016-01-18T02:35:10","modified_gmt":"2016-01-18T02:35:10","slug":"get-fitbit-steps-on-your-personal-website-revised","status":"publish","type":"post","link":"https:\/\/p337.info\/blog\/get-fitbit-steps-on-your-personal-website-revised\/","title":{"rendered":"Get fitbit steps on your personal website [Revised]"},"content":{"rendered":"<p>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.<\/p>\n<p><strong>Assumptions \/ Pre-requisites<br \/>\n<\/strong>Here are the things you are going to need to set this up<br \/>\n&#8211; A fitbit API key (there are lots of guides like <a title=\"Wiki How link to Getting a fitbit API\" href=\"http:\/\/www.wikihow.com\/Fitbit-Api-Key\" target=\"_blank\">this one<\/a> to request an API key)<br \/>\n&#8211; An understanding in Web Technologies (HTML, CSS, Javascript) and more importantly a web programming language &#8211; I will be using PHP<br \/>\n&#8211; A web server that supports your languages of choice.<br \/>\n&#8211; You have a google account which you can use google drive on<\/p>\n<p><strong><span style=\"text-decoration: underline;\">Step 1 &#8211; Outsourcing Oauth to Google Drive<\/span><br \/>\n<\/strong><\/p>\n<p><strong>Step 1.1 &#8211; Information<br \/>\n<\/strong>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.<br \/>\nAll of this step 1 is dedicated to whomever wrote this article <a href=\"http:\/\/quantifiedself.com\/2013\/02\/how-to-download-fitbit-data-using-google-spreadsheets\/\">http:\/\/quantifiedself.com\/2013\/02\/how-to-download-fitbit-data-using-google-spreadsheets\/<\/a><\/p>\n<p><strong>Step 1.2 &#8211; Make a (depreciated) google spreadsheet<\/strong><\/p>\n<p>We need to make a google drive spreadsheet, but it needs to be the old version of sheets, \u00a0 you NEED to request an old sheet with this link &#8211;\u00a0<a href=\"https:\/\/g.co\/oldsheets\">https:\/\/g.co\/oldsheets<\/a><br \/>\nThis 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\u00a0relies on old versions of google sheets.<\/p>\n<p>&#8211; Request a new spreadsheet with the URL above (<a href=\"https:\/\/g.co\/oldsheets\">https:\/\/g.co\/oldsheets<\/a>)<br \/>\n&#8211; Give them a valid reason you are using an old sheet style (they seem to be asking for it now)<br \/>\n&#8211; Name the spreadsheet something meaningful<br \/>\n&#8211; Save the spreadsheet<\/p>\n<p><strong>Step 1.3 &#8211; Add\u00a0the\u00a0script to your Google Spreadsheet<br \/>\n<\/strong>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 &#8220;Google Apps Script&#8221; which link to our Google Spreadsheet.<\/p>\n<p>Go to your new spreadsheet we made in the last step (Should still be open)<br \/>\nGo to Tools &gt; Script Editor<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"http:\/\/i.imgur.com\/R1Xucdp.png\" alt=\"http:\/\/i.imgur.com\/R1Xucdp.png\" width=\"281\" height=\"195\" \/><\/p>\n<p>If the &#8220;first time&#8221; Google Apps Script menu pops up, cancel making sure you select &#8220;Dont show again&#8221; and &#8220;close&#8221; to close all dialog popup boxes,\u00a0You should now be looking at an empty page, or a blank JavaScript function currently in the script editor.<\/p>\n<p>This is where we need to place the script that will do all the oAuth work for us.<br \/>\nDelete everything in the script box (there should be a blank function &#8211; make sure you have a blank script)<br \/>\nThen paste the FitbitDownload.gs script (Found Here: <a href=\"https:\/\/github.com\/qslabs\/FitbitDailyData\/blob\/master\/FitbitDailyData.gs\" target=\"_blank\">Original GitHuB Source<\/a>\u00a0or <a href=\"http:\/\/pastebin.com\/qBxRxi0m\" target=\"_blank\">Rehosted on Pastebin<\/a>) so that it is the only thing in your new google apps script code area.<\/p>\n<p>Press the save button and name the script if necessary<\/p>\n<p><strong>Step 1.4 &#8211; Run the functions to configure the script<\/strong><\/p>\n<p>From the &#8220;Select Function&#8221; drop down<br \/>\nYou want to run the functions in this order order<\/p>\n<p><span style=\"text-decoration: underline;\">1.4.1 &#8211; Run the\u00a0Authorize Function<\/span><br \/>\n(Note: This will allow Fitbit access to your google apps data)<br \/>\nSelect\u00a0&#8220;authorize&#8221;\u00a0from the drop down<br \/>\nclick the button that looks like a &#8220;Play&#8221; button<br \/>\n(Which is 2 buttons to the left of the &#8220;Select Function&#8221; drop down)<br \/>\nonce you run the function, a popup box will appear.<br \/>\nclick authorize and login with your fitbit account to finish this step.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/9bj3m0G.png\" alt=\"\" data-reactid=\".1.0.0.$9bj3m0G=1png\" \/><\/p>\n<p><span style=\"text-decoration: underline;\">1.4.2 &#8211; Run the\u00a0Setup Function<\/span><br \/>\nNext run &#8220;setup&#8221; function with the same method as the above step<br \/>\n(NOTE: you will have to alt tab back to your Google Drive spreadsheet,<br \/>\nbecause a popup opens\u00a0there asking for more details.- see below)<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"http:\/\/i.imgur.com\/Y2X8Vpb.png\" alt=\"http:\/\/i.imgur.com\/Y2X8Vpb.png\" width=\"335\" height=\"232\" \/><\/p>\n<p>Once you see the above popup on the Spreadsheet tab, Enter:<br \/>\na. Your API key &#8211; This need to be filled out with a valid key &#8211; unlike mine seen above.<br \/>\nb. Make sure you enter today&#8217;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)<br \/>\nc. Make sure you select all of the &#8220;Data Elements&#8221; by using CTRL when you click.<br \/>\n(Make sure they are highlighted)<br \/>\nThen click &#8220;Save Setup&#8221;<\/p>\n<p><span style=\"text-decoration: underline;\">1.4.3 &#8211; Run the Sync Function<\/span><br \/>\nAfter you have successfully configured &#8220;Setup&#8221;<br \/>\nGo back to your script and run &#8220;Sync&#8221;<\/p>\n<p>All your data should now be in the spreadsheet.<\/p>\n<p><strong>Step 1.5 &#8211;\u00a0Add an automated trigger to your script<br \/>\n<\/strong>We now need to tell google scripts to run the &#8220;sync&#8221; function every 15-30 minutes (up to you)<br \/>\nYou should still have the script editor open in a tab. Go back to it<br \/>\n(if not, go to Tools &gt; Script Editor on your spreadsheet)<br \/>\nClick on the speech bubble looking icon, when hoevered over the icon will say &#8220;Current Projects Triggers&#8221;<br \/>\nOn the dialog menu, select &#8220;Add a new trigger&#8221;<br \/>\nAnd set &#8220;Sync&#8221; to run every 15 minutes.<br \/>\n<img decoding=\"async\" src=\"http:\/\/i.imgur.com\/ZJH0Nbe.png\" alt=\"http:\/\/i.imgur.com\/ZJH0Nbe.png\" \/><\/p>\n<p>Your spreadsheet will now stay updated!<\/p>\n<p><strong>Step 1.6 &#8211; Set your spreadsheets share settings to Public<\/strong><br \/>\nNavigate back to your Google Spreadsheet, (you may close the script editor if you like.)<br \/>\nFrom the &#8220;File&#8221; menu, select &#8220;Publish to the Web&#8221;<br \/>\nA popup should appear, Make sure &#8220;All Sheets&#8221; is selected before you click &#8220;Start Publishing&#8221;<br \/>\nYou should now be able to &#8220;Get a link to the Published Data&#8221; which is a web link.<br \/>\nMake sure that link works in a browser. if it does we are ready to do some web coding!<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Step 2 &#8211; Show the Google Docs Data on your Website<\/strong><\/span><\/p>\n<p><strong>Step 2.1 &#8211; Upload my API to your site<\/strong><br \/>\nGo to pastebin and get my API \u00a0&#8211;\u00a0http:\/\/pastebin.com\/GrA7xUVd<br \/>\nThis API basically reads in the google spreadsheet<br \/>\nUsing string manipulation, it finds the values for todays step values (using the server date)<\/p>\n<p><strong>Step 2.2 &#8211; Configure my PHP API<\/strong><br \/>\nThere are 3 variables you want to configure in my API, I have detailed them pretty clearly.<br \/>\n1. The location to your google spreadsheet, this is obvious, the API needs to know the URL of the spreadsheet we set up earlier.<br \/>\n2. If you want the API to output JSON or not<br \/>\n3. Set your timezone &#8211; Setting your timezone is crucial to ensuring you get todays step total.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"http:\/\/i.imgur.com\/rXZRKIy.png\" alt=\"\" width=\"583\" height=\"181\" data-reactid=\".1.0.0.$rXZRKIy=1png\" \/><\/p>\n<p><strong>Step 2.4 &#8211; Load the page in a browser<\/strong><br \/>\nOnce you&#8217;ve configured the settings,<br \/>\nAnd uploaded the page to your web server<br \/>\nYou should be able to load the page in your browser!<br \/>\nnavigate to the URL of where you uploaded the php page<br \/>\nAnd remember to add ?ddos=1 to the end of the PHP URL address, because that&#8217;s how I avoid web crawlers pulling fitbit data accidentally.<br \/>\nan example of your URL would be <em>http:\/\/website\/directory\/fitbit_and_gdocs_api.php?ddos=1<\/em><\/p>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/e0Bc2wD.png\" alt=\"\" data-reactid=\".1.0.0.$e0Bc2wD=1png\" \/><\/p>\n<p><strong>Step 2.3 &#8211; Consider application design and page load speed<\/strong><br \/>\nthe API I have provided is not designed for fast page loads.<br \/>\nIf 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.<br \/>\nI run this\u00a0page and load the values into a MYSQL table once every 15 minutes.<br \/>\nBecause a Mysql table statement is 100 times quicker than loading a google spreadsheet.<\/p>\n<p><strong>Done!<\/strong><\/p>\n<p>In theory we have now included fitbit data on your website!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"_links":{"self":[{"href":"https:\/\/p337.info\/blog\/wp-json\/wp\/v2\/posts\/88"}],"collection":[{"href":"https:\/\/p337.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/p337.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/p337.info\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/p337.info\/blog\/wp-json\/wp\/v2\/comments?post=88"}],"version-history":[{"count":7,"href":"https:\/\/p337.info\/blog\/wp-json\/wp\/v2\/posts\/88\/revisions"}],"predecessor-version":[{"id":140,"href":"https:\/\/p337.info\/blog\/wp-json\/wp\/v2\/posts\/88\/revisions\/140"}],"wp:attachment":[{"href":"https:\/\/p337.info\/blog\/wp-json\/wp\/v2\/media?parent=88"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/p337.info\/blog\/wp-json\/wp\/v2\/categories?post=88"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/p337.info\/blog\/wp-json\/wp\/v2\/tags?post=88"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}