This weekend it was my birthday. 32 (gulp).

I spent friday night and a few sneaky hours here and there playing around with my relatively new Nike Fuelband and the Nike+ API.

I wanted to see if I could build my own dashboard for displaying my fuel score and other key metrics.

Here's the result

There's a few things going on in here.

First up, the basics:

I used Twitter Bootstrap & HTML5 Boilerplate to create my HTML, CSS and a little jQuery.

API Integration:

I'm using two different techniques here, both using PHP.

First up is Schitzel's NikeFuelBandAPI scripts, which parse the HTML pages of the Nike+ site to display some interesting data. You can see the result on the right hand side of the page - 

  • Last full day Fuel Points (there's some logic behind this)
  • Daily Target Fuel Points
  • Total Daily Calories
  • Total Daily Steps
  • Total Daily Active Time

The logic behind this is basically to find the last full day's points - so most recent day will only ever be yesterday (since today isn't complete until it becomes yesterday).

The logic recursively goes back through the days in the week to find the last full day, and even then into previous weeks.

I'm not going to post their code here, please do check out the Github Repo

It's quite straightforward to integrate. I really just worked out which variables I wanted to create from the array returned by their main object $my_full_activity, e.g. 

$fuelPoints = $my_full_activity->value;

$dailyGoal = $my_full_activity->dailyGoal;

$activeTime = $my_full_activity->activeTime;

I also converted the $activeTime to hours/minutes format

function activeTimeFormatted($time, $format = '%d:%d') {
settype($time, 'integer');
if ($time < 1) {
return;
}
$hours = floor($time/60);
$minutes = $time%60;
return sprintf($format, $hours, $minutes);
}

Next I decided to display the day's Fuel Points earned expressed as a percentage of the daily target. I found a really nice bunch of charts, built for Raphaeljs (we've been using Raphael quite a bit for Braindu recently), by Josh Carver, called Raphy.

Again, this was pretty easy to hook up and just added my new variable $fuelPercent as an attribute in creating the Chart percentage. The chart format doesn't like values more than 100%, it kind screws with the animation / shape position, so I had to limit it to showing 100% if Daily Fuel points exceeded the Target amount.

Finally, I used Bootstrap's alerts and a small "IF" statement to show different messages if I has exceeded my target or like a lemon, failed to hit the poxy 3000 fuelpoints (I have failed a few times - turns out sitting at my desk all day doesn't do much for the points).

<?php if ($fuelPercent >= 100) {
echo "<div id='alert-success' class='alert alert-success'><button type='button' class='close' data-dismiss='alert'>&times;</button><strong>Woo Hoo!</strong> You're on fire! Great Job.</div>";
} else {
echo "<div id='alert-fail' class='alert alert-error'><button type='button' class='close' data-dismiss='alert'>&times;</button><strong>D'oh!</strong> You've got some catching up to do Lardy!</div>";
}
?>

Second up, I wanted to dig a bit deeper into the newer Nike+ API to get some more detailed stats, in particular, my total cumulative points total, my current streak and some working averages (day/week).

Nike have recently updated the API, but it's far from complete. They talk about using an Authentication protocol, but as yet that hasn't been released. Perhaps they're waiting for the first Nike+ Accelerator programme to bear fruit before updating for mass consumption.

In the meantime, I came across a very helpful integration provided by dmyers2004. Once again using a PHP include, I can access the API via my Token created at the Nike developer portal.

Then, like before, it's just about selecting which values you wish to extract from the arrays available. dmyers2004 kindly provides some template methods for returning Sports, Activities, specifics on Activities and GPS data. Pretty cool!

My plan is to try and add in some basic nutritional information from another service, of which I've started playing with a couple. The goal being to show alongside this info - the what is going out of the body - the quantification of what's going in.

What do you think?