Отображение количества шагов на моем сайте
На выходных я добавил счетчик своих шагов на свой сайт. Теперь все могут видеть, сколько я хожу.
Мои умные часы и телефон на Android отслеживают мои шаги в течение дня. Поскольку это устройства Android, все эти данные сохраняются в Google Fit. Я использую API Google Cloud, чтобы извлекать эти данные и отображать их на своем сайте.
Что это показывает
Только самое основное:
- Шаги за сегодня (отображаются в футере каждой страницы)
- Общее количество шагов за неделю
- Общее количество за 30 дней
- Моя серия (стрик)
Вот и все. Только шаги.
Почему я это сделал
Я не фанат фитнеса. У меня нет фитнес-рутин или целей по количеству шагов. Но я думаю, что публичная подотчетность может помочь мне больше ходить или заниматься спортом.
Кроме того, я хотел реализовать интеграцию с API Google Fit, и это показалось мне быстрым пет-проектом, чтобы попробовать.
Меня вдохновили Дрис Бейтарт, который публикует уровень заряда батареи своего телефона, и Аарон Парецки, который отслеживает свой сон и здоровье публично. Я делаю то же самое со своими шагами.
Как это работает
Я подключил свою учетную запись Google для получения данных из Google Fit, создал простую панель мониторинга для просмотра статистики и добавил страницу для ее отображения. Я могу включать или выключать это в любое время.
Данные автоматически обновляются каждый час с помощью cron-задания Cloudflare Worker, поэтому цифры остаются актуальными в течение дня без каких-либо моих действий.
Техническая сторона
Если вы хотите создать что-то подобное, вот основной процесс:
- Настройте проект Google Cloud и включите Fitness API
- Настройте учетные данные OAuth 2.0 для аутентификации пользователей
- Используйте Google Fit API для получения данных о шагах из конечной точки
dataset.aggregate - Безопасно храните токены доступа и обновления в Cloudflare KV
- Рассчитайте статистику, такую как еженедельные и ежемесячные итоги, а также серии, на основе необработанных данных
- Создайте простой пользовательский интерфейс для отображения данных
- Настройте Cloudflare Worker с триггером cron для автоматического обновления данных
Я создал это с помощью Next.js и TypeScript, разместив на Cloudflare Pages. Аутентификация и конечные точки API работают как отдельный Cloudflare Worker, в то время как фронтенд отображает статистику и графики.
Посмотреть в действии
Посетите мою страницу шагов, чтобы увидеть трекер в работе.