Afficher mon nombre de pas sur mon site web
J'ai passé le week-end à ajouter mon nombre de pas à mon site web. Maintenant, tout le monde peut voir combien je marche.
Ma montre connectée et mon téléphone Android suivent mes pas tout au long de la journée. Comme ce sont des appareils Android, toutes ces données sont stockées dans Google Fit. J'utilise l'API de Google Cloud pour récupérer ces données et les afficher sur mon site.
Ce que cela montre
Juste les bases :
- Pas du jour (affichés dans le pied de page de chaque page)
- Total des pas de la semaine
- Total sur 30 jours
- Ma série (streak)
C'est tout. Juste les pas.
Pourquoi je l'ai construit
Je ne suis pas une personne axée sur le fitness. Je n'ai pas de routines d'exercice ni d'objectifs de pas. Mais je pense que la responsabilité publique pourrait m'inciter à marcher ou à faire de l'exercice davantage.
De plus, je voulais implémenter une intégration API avec Google Fit et cela semblait être un projet personnel rapide pour l'essayer.
J'ai été inspiré par Dries Buytaert qui publie l'état de la batterie de son téléphone, et Aaron Parecki qui suit son sommeil et sa santé publiquement. Je fais la même chose avec mes pas.
Comment ça marche
J'ai connecté mon compte Google pour récupérer les données de Google Fit, créé un tableau de bord simple pour voir mes statistiques et ajouté une page pour les afficher. Je peux l'activer ou le désactiver à tout moment.
Les données sont actualisées automatiquement toutes les heures à l'aide d'un job cron Cloudflare Worker, afin que les chiffres restent à jour tout au long de la journée sans que j'aie à faire quoi que ce soit.
Le côté technique
Si vous souhaitez construire quelque chose de similaire, voici le flux de base :
- Configurer un projet Google Cloud et activer l'API Fitness
- Configurer les informations d'identification OAuth 2.0 pour authentifier les utilisateurs
- Utiliser l'API Google Fit pour récupérer les données de pas à partir du point de terminaison dataset.aggregate
- Stocker les jetons d'accès et de rafraîchissement en toute sécurité dans Cloudflare KV
- Calculer des statistiques telles que les totaux hebdomadaires, les totaux mensuels et les séries à partir des données brutes
- Construire une interface utilisateur simple pour afficher les données
- Configurer un Cloudflare Worker avec un déclencheur cron pour actualiser les données automatiquement
J'ai construit ceci avec Next.js et TypeScript, hébergé sur Cloudflare Pages. L'authentification et les points de terminaison de l'API s'exécutent en tant que Cloudflare Worker distinct, tandis que le frontend affiche les statistiques et les graphiques.
Voir en direct
Consultez ma page de pas pour voir le traqueur en action.