Poner mi conteo de pasos en mi sitio web
Pasé el fin de semana añadiendo mi conteo de pasos a mi sitio web. Ahora todo el mundo puede ver cuánto camino.
Mi smartwatch y mi teléfono Android rastrean mis pasos a lo largo del día. Como son dispositivos Android, todos esos datos se almacenan en Google Fit. Utilizo la API de Google Cloud para obtener esos datos y mostrarlos en mi sitio.
Qué muestra
Solo lo básico:
- Pasos de hoy (mostrados en el pie de página de cada página)
- Total de pasos semanales
- Total de 30 días
- Mi racha
Eso es todo. Solo pasos.
Por qué lo construí
No soy una persona de fitness. No tengo rutinas de ejercicio ni objetivos de pasos. Pero creo que la rendición de cuentas pública podría funcionar para que camine o haga ejercicio más.
Además, quería implementar una integración de API con Google Fit y este parecía un proyecto personal rápido para probarlo.
Me inspiré en Dries Buytaert, quien publica el estado de la batería de su teléfono, y Aaron Parecki, quien rastrea su sueño y salud públicamente. Estoy haciendo lo mismo con mis pasos.
Cómo funciona
Conecté mi cuenta de Google para obtener datos de Google Fit, creé un panel simple para ver mis estadísticas y añadí una página para mostrarlas. Puedo activarlo o desactivarlo cuando quiera.
Los datos se actualizan automáticamente cada hora usando un trabajo cron de Cloudflare Worker, por lo que los números se mantienen actualizados durante todo el día sin que yo tenga que hacer nada.
El lado técnico
Si quieres construir algo como esto, este es el flujo básico:
- Configura un proyecto de Google Cloud y habilita la API de Fitness
- Configura las credenciales de OAuth 2.0 para autenticar a los usuarios
- Usa la API de Google Fit para obtener datos de pasos desde el endpoint dataset.aggregate
- Almacena los tokens de acceso y actualización de forma segura en Cloudflare KV
- Calcula estadísticas como totales semanales, totales mensuales y rachas a partir de los datos sin procesar
- Crea una interfaz de usuario simple para mostrar los datos
- Configura un Cloudflare Worker con un disparador cron para actualizar los datos automáticamente
Construí esto con Next.js y TypeScript, alojado en Cloudflare Pages. La autenticación y los endpoints de la API se ejecutan como un Cloudflare Worker separado, mientras que el frontend muestra las estadísticas y los gráficos.
Verlo en vivo
Echa un vistazo a mi página de pasos para ver el rastreador en acción.