Meine Schrittzahl auf meiner Website anzeigen
Ich habe das Wochenende damit verbracht, meine Schrittzahl auf meiner Website hinzuzufügen. Jetzt kann jeder sehen, wie viel ich laufe.
Meine Smartwatch und mein Android-Telefon zeichnen meine Schritte im Laufe des Tages auf. Da es sich um Android-Geräte handelt, werden all diese Daten in Google Fit gespeichert. Ich verwende die API von Google Cloud, um diese Daten abzurufen und auf meiner Website anzuzeigen.
Was es anzeigt
Nur das Nötigste:
- Heutige Schritte (angezeigt in der Fußzeile jeder Seite)
- Wöchentliche Gesamtschritte
- 30-Tage-Gesamt
- Meine Serie (Streak)
Das war's. Nur Schritte.
Warum ich es gebaut habe
Ich bin keine Fitnessperson. Ich habe keine Fitnessroutinen oder Schrittziele. Aber ich denke, öffentliche Rechenschaftspflicht könnte mich dazu bringen, mehr zu laufen oder Sport zu treiben.
Außerdem wollte ich eine API-Integration mit Google Fit implementieren, und dies schien ein schnelles Nebenprojekt zu sein, um es auszuprobieren.
Ich wurde inspiriert von Dries Buytaert, der den Akkustand seines Telefons veröffentlicht, und Aaron Parecki, der seinen Schlaf und seine Gesundheit öffentlich verfolgt. Ich mache dasselbe mit meinen Schritten.
Wie es funktioniert
Ich habe mein Google-Konto verbunden, um Daten von Google Fit abzurufen, ein einfaches Dashboard erstellt, um meine Statistiken anzuzeigen, und eine Seite hinzugefügt, um sie darzustellen. Ich kann es jederzeit ein- oder ausschalten.
Die Daten werden automatisch jede Stunde mithilfe eines Cloudflare Worker Cron-Jobs aktualisiert, sodass die Zahlen den ganzen Tag über aktuell bleiben, ohne dass ich etwas tun muss.
Die technische Seite
Wenn Sie so etwas bauen möchten, ist hier der grundlegende Ablauf:
- Richten Sie ein Google Cloud-Projekt ein und aktivieren Sie die Fitness API
- Konfigurieren Sie OAuth 2.0-Anmeldeinformationen zur Authentifizierung von Benutzern
- Verwenden Sie die Google Fit API, um Schrittdaten vom Endpunkt dataset.aggregate abzurufen
- Speichern Sie Zugriffs- und Aktualisierungstoken sicher in Cloudflare KV
- Berechnen Sie Statistiken wie Wochen- und Monatsgesamtsummen sowie Serien aus den Rohdaten
- Erstellen Sie eine einfache Benutzeroberfläche zur Anzeige der Daten
- Richten Sie einen Cloudflare Worker mit einem Cron-Trigger ein, um die Daten automatisch zu aktualisieren
Ich habe dies mit Next.js und TypeScript erstellt und auf Cloudflare Pages gehostet. Die Authentifizierung und die API-Endpunkte laufen als separater Cloudflare Worker, während das Frontend die Statistiken und Diagramme anzeigt.
In Aktion sehen
Schauen Sie sich meine Schritte-Seite an, um den Tracker in Aktion zu sehen.