Mijn stappentelling op mijn website plaatsen
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 met Next.js en TypeScript, gehost op Cloudflare Pages. De authenticatie en API-eindpunten draaien als een aparte Cloudflare Worker, terwijl de frontend de statistieken en grafieken toont.
Bekijk het live
Bekijk mijn stappenpagina om de tracker in actie te zien.