1:HL["/_next/static/media/0484562807a97172-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}] 2:HL["/_next/static/media/b957ea75a84b6ea7-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}] 3:HL["/_next/static/media/eafabf029ad39a43-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}] 4:HL["/_next/static/css/0fc228ca39709660.css","style"] 5:HL["/_next/static/css/8c9f314d086fc629.css","style"] 6:HL["/_next/static/css/2dee32d950ed747d.css","style"] 7:I[2846,[],""] 9:I[7331,["5166","static/chunks/5166-ebb064f8026ae65e.js","2972","static/chunks/2972-dcf712b978c9ea32.js","4574","static/chunks/4574-a21996810c3d2011.js","7347","static/chunks/7347-743b1c7f8c598ea9.js","3162","static/chunks/app/%5Blocale%5D/tag/%5Bslug%5D/page-f4538ffaba951adb.js"],"AnimatedSection"] a:I[2972,["5166","static/chunks/5166-ebb064f8026ae65e.js","2972","static/chunks/2972-dcf712b978c9ea32.js","4574","static/chunks/4574-a21996810c3d2011.js","7347","static/chunks/7347-743b1c7f8c598ea9.js","3162","static/chunks/app/%5Blocale%5D/tag/%5Bslug%5D/page-f4538ffaba951adb.js"],""] b:I[7347,["5166","static/chunks/5166-ebb064f8026ae65e.js","2972","static/chunks/2972-dcf712b978c9ea32.js","4574","static/chunks/4574-a21996810c3d2011.js","7347","static/chunks/7347-743b1c7f8c598ea9.js","3162","static/chunks/app/%5Blocale%5D/tag/%5Bslug%5D/page-f4538ffaba951adb.js"],"default"] d:I[4707,[],""] 10:I[6423,[],""] 14:I[1060,[],""] c:Tbc6,

Ik heb het weekend besteed aan het toevoegen van mijn stappenteller aan mijn website. Nu kan iedereen zien hoeveel ik loop.

Mijn smartwatch en Android-telefoon houden mijn stappen gedurende de dag bij. Aangezien het Android-apparaten zijn, wordt al die data opgeslagen in Google Fit. Ik gebruik de API van Google Cloud om die data op te halen en op mijn site weer te geven.

Wat het toont

Alleen de basis:

Stappen van vandaag (weergegeven in de voettekst van elke pagina)
Wekelijks totaal aantal stappen
Totaal van 30 dagen
Mijn reeks (streak)

Dat is alles. Alleen stappen.

Waarom ik het heb gebouwd

Ik ben geen fitnesspersoon. Ik heb geen fitnessroutines of stappendoelen. Maar ik denk dat publieke verantwoording me kan motiveren om meer te lopen of te sporten.

Bovendien wilde ik een API-integratie met Google Fit implementeren en dit leek een snel 'pet project' om het uit te proberen.

Ik liet me inspireren door Dries Buytaert die de batterijstatus van zijn telefoon plaatst, en Aaron Parecki die zijn slaap en gezondheid publiekelijk bijhoudt. Ik doe hetzelfde met mijn stappen.

Hoe het werkt

Ik heb mijn Google-account gekoppeld om data uit Google Fit te halen, een eenvoudig dashboard gemaakt om mijn statistieken te bekijken en een pagina toegevoegd om ze weer te geven. Ik kan het wanneer ik wil in- of uitschakelen.

De data wordt automatisch elk uur ververst met behulp van een cronjob van Cloudflare Worker, zodat de cijfers de hele dag actueel blijven zonder dat ik iets hoef te doen.

De technische kant

Als je zoiets wilt bouwen, is dit de basisstroom:

Zet een Google Cloud-project op en schakel de Fitness API in
Configureer OAuth 2.0-referenties om gebruikers te authenticeren
Gebruik de Google Fit API om stapgegevens op te halen uit het dataset.aggregate-eindpunt
Sla toegangs- en vernieuwingstokens veilig op in Cloudflare KV
Bereken statistieken zoals wekelijkse totalen, maandelijkse totalen en streaks uit de ruwe data
Bouw een eenvoudige UI om de data weer te geven
Stel een Cloudflare Worker in met een cron-trigger om de data automatisch te vernieuwen

Ik heb dit gebouwd

#Oauth

Mijn stappentelling op mijn website plaatsen

Blijf op de hoogte