At this point in my life, starting a new routine that isn't lean toward self-destruction, for instance walking everyday for at least 5 km, is not an easy task. Modern era of digital world provide human with a lot of information, and distraction. Digital world distraction reduce our ability to stay focus doing an activity for quite long period of time; reading, walking/running or studying.
To keep me motivated and accountable I decided to develop a public record of my walking/running routine by integrating STRAVA API to own website. So when I skipped a walk I would be a bit embarrass. It also trigger some small happiness when I see the graph of consistency.
To be able using strava API first we need to setup our application account at api setting. Strava will provided us a credentials (client id, client secret, access token, refresh token) to access their API.
Figure 1. API settings
Strava API allowed developer accessing some of their api such as athlete, athlete activities, routes etc. But by default they only give athlete data scope access token. To be able to access athlete activities data, we need a read_all access token, to get it, Strava using OAuth authentication flow. So this is why we need to get it manually.
Figure 2. Acquiring Access Token
Strava OAuth 2.0 authentication starts by redirecting user to their page, to let user authorize an access to developer application. After user give the access, strava will redirect them back to url that you set in the api application settings, the URL query string will include an authorization code and the scope granted by the athlete/user.
With the authorization code now we can request the access token.
Finally we have all the necessary credentials to do request athlete activities without needing to do the OAuth 2.0 authentication anymore.
You are not supposed to store this credentials unless it is your own data, in this case I am the owner of the data.
After acquired the read_all access token, now we can use it to access athlete activities endpoint, by sending a request with our own API credentials (client_secret, client_id, refresh_token).
Here how it is done with Next.
and finally I can display latest activities as a table.
Figure 3. Athlete Activities Table
Display the data as table is good, but it will be more right to visualize it as a chart. Chart help to quickly see your consistency and whether you make an improvement or setback.
Here I use chartjs library to visualize the graph. The chartjs documentation is pretty straightforward and easy to use.
You can customize the style of your chart the way you like with the options.
Figure 4. Activities Chart
And voila! we got ourselves a nice looking chart. we can see how we improve by looking at the gap between two point of distance and time graph. As the gap bigger mean we make improvement by covering more distance in less time.
Hopefully we this walking/running habit 'dashboard' being public will keep me accountable and consistent. Perhaps, it will also inspire some people to start their own good habit and shared it to the internet.