Mettere il mio conteggio dei passi sul mio sito web
Ho passato il fine settimana ad aggiungere il mio conteggio dei passi al mio sito web. Ora tutti possono vedere quanto cammino.
Il mio smartwatch e il telefono Android tracciano i miei passi durante il giorno. Poiché sono dispositivi Android, tutti questi dati vengono archiviati in Google Fit. Utilizzo l'API di Google Cloud per recuperare tali dati e visualizzarli sul mio sito.
Cosa mostra
Solo le basi:
- Passi di oggi (mostrati nel piè di pagina di ogni pagina)
- Passi totali settimanali
- Totale 30 giorni
- La mia serie positiva (streak)
Questo è tutto. Solo i passi.
Perché l'ho costruito
Non sono una persona che si dedica al fitness. Non ho routine di allenamento o obiettivi di passi. Ma penso che la responsabilità pubblica possa funzionare per farmi camminare o fare più esercizio.
Inoltre, volevo implementare un'integrazione API con Google Fit e questo mi è sembrato un rapido progetto personale per provarla.
Mi sono ispirato a Dries Buytaert che pubblica lo stato della batteria del suo telefono, e ad Aaron Parecki che tiene traccia del suo sonno e della sua salute pubblicamente. Sto facendo la stessa cosa con i miei passi.
Come funziona
Ho collegato il mio account Google per recuperare i dati da Google Fit, ho creato una semplice dashboard per visualizzare le mie statistiche e ho aggiunto una pagina per mostrarle. Posso attivarlo o disattivarlo quando voglio.
I dati vengono aggiornati automaticamente ogni ora utilizzando un lavoro cron di Cloudflare Worker, quindi i numeri rimangono aggiornati durante il giorno senza che io debba fare nulla.
Il lato tecnico
Se vuoi costruire qualcosa di simile, ecco il flusso di base:
- Configura un progetto Google Cloud e abilita l'API Fitness
- Configura le credenziali OAuth 2.0 per autenticare gli utenti
- Utilizza l'API Google Fit per recuperare i dati dei passi dall'endpoint dataset.aggregate
- Archivia i token di accesso e di aggiornamento in modo sicuro in Cloudflare KV
- Calcola statistiche come totali settimanali, totali mensili e serie positive (streak) dai dati grezzi
- Crea una semplice interfaccia utente per visualizzare i dati
- Imposta un Cloudflare Worker con un trigger cron per aggiornare i dati automaticamente
Ho costruito questo con Next.js e TypeScript, ospitato su Cloudflare Pages. L'autenticazione e gli endpoint API vengono eseguiti come un Cloudflare Worker separato, mentre il frontend mostra le statistiche e i grafici.
Vedi in azione
Dai un'occhiata alla mia pagina dei passi per vedere il tracker in azione.