Smart Fitness App: Phased Implementation Plan & Verification Roadmap
ArtefaktDies ist das Artefakt, das in Folge 4 „Der No-Code-App-Implementierungsplan“ verwendet wird. Mit dieser Roadmap können Sie die meilensteinbasierte Entwicklung mit zweistufiger Verifizierung und Git-Branch-/Tag-Gates orchestrieren.
Melden Sie sich an, um auf dieses Artefakt zuzugreifen
Melden Sie sich mit Ihrem Google-Entwicklerprofil an, um das vollständige Artefakt aus der Build It!-Reihe anzusehen und zu kopieren.
Entwicklerprofil erforderlich
Sie sind nicht berechtigt, ein Entwicklerprofil zu erstellen. Bitten Sie Ihren Workspace-Administrator, diese Funktion zu aktivieren.
Entwicklerprofil erstellen
Erstellen Sie ein kostenloses Google-Entwicklerprofil, um alle Build It!-Prompts und ‑Artefakte freizuschalten.
Builder Central beitreten, um freizuschalten
Fordern Sie mit nur einem Klick Ihr kostenloses Builder-Mitglieder-Badge an, um alle Build It!-Prompts und ‑Artefakte freizuschalten.
Status: Genehmigt und bereit für die Ausführung
Zielgruppe: Autonomer KI-Entwickler-Agent und menschlicher Projektleiter
Begleitdokumente: Spezifikation der Datenarchitektur, Spezifikation der Client-Architektur, Spezifikation des KI-Trainer-Agenten
Kurzfassung und Ausführungsstrategie
Dieser Implementierungsplan koordiniert den gesamten Build der Smart Fitness-Anwendung, von den grundlegenden Schemas bis zur Produktionsbereitschaft.
Das Ausführungsparadigma: Meilensteinorientiert mit zweistufiger Verifizierung
Um eine hohe Agent-Geschwindigkeit mit architektonischer Präzision in Einklang zu bringen, folgt dieser Plan einem phasenbasierten Meilenstein-Framework:
- Autonome Ausführung innerhalb von Meilensteinen: Der Implementierungs-Agent arbeitet die Schritte der einzelnen Meilensteine kontinuierlich ab, schreibt Code, führt Builds aus, behebt Compilerfehler und behebt Probleme selbstständig, ohne dass ein menschliches Eingreifen erforderlich ist.
- Ebene 1: Überprüfung – Pre-Gate-Barriere für autonome Agenten: Bevor der Agent eine manuelle Freigabe anfordert, muss er Compilerprüfungen ausführen, Backend-Testskripts ausführen und die Google Antigravity Autonomous Browser Verification (mit Chrome-Entwicklertools) starten, um echte mobile Nutzerinteraktionen zu simulieren, die Testfälle in natürlicher Sprache auszuführen, den DOM-Status zu prüfen und Screenshots zu erstellen.
- Ebene 2: Überprüfung durch Gatekeeper: Sobald die automatisierten Prüfungen des KI-Agenten erfolgreich abgeschlossen sind, prüft der Gatekeeper eine konkrete 2-minütige Checkliste, um die UX, die Ausrichtung auf die Geschäftsziele und die Datenintegrität zu überprüfen, bevor er die Erlaubnis erteilt, zum nächsten Meilenstein überzugehen.
Versionsverwaltung und Git-Tagging-Protokoll
Um die Notfallwiederherstellung, transparente Code-Review-Diffs und die Vermeidung von Fehlern über Meilensteine hinweg zu gewährleisten, muss der implementierende Agent das folgende Git-Protokoll strikt einhalten:
- Branching-Strategie:
main: Geschützter Zweig. Hier werden nur von Menschen genehmigte Meilenstein-Releases zusammengeführt.- Meilenstein-Feature-Branches: Ein dedizierter Branch pro Meilenstein (
feat/m1-scaffolding-typesbisfeat/m6-pwa-production).
- Pre-Gate Commit Ceremony:
git add -A git commit -m "feat(mX): complete milestone X tasks and pre-gate verifications" - Diff-Überprüfung durch menschlichen Gatekeeper:
git diff main..HEAD # or across gates: git diff gate-[N-1]-approved..HEAD - Gate-Genehmigung und Meilenstein-Tagging:
git checkout main git merge --no-ff feat/mX-... -m "merge: approve milestone X" git tag -a gate-X-approved -m "Milestone X: Verified and approved by Gatekeeper" - Rollback und Notfallwiederherstellung:
git checkout main git branch -D feat/mX-... git checkout -b feat/mX-... gate-[N-1]-approved
Abhängigkeitsdiagramm der primären Architektur
M1 [Milestone 1: Foundations, Types & Database Seed] ──> G1 {Gate 1 Sign-Off}
├──> M2 [Milestone 2: Server APIs & Gemini Coach Engine] ──> G2 {Gate 2 Sign-Off}
└──> M3 [Milestone 3: Client State & Gym-Floor Tracker] ──> G3 {Gate 3 Sign-Off}
├──> M4 [Milestone 4: Coach Chat & Staged Proposal Interface] ──> G4 {Gate 4 Sign-Off}
└──> M5 [Milestone 5: Schedule, Analytics & Profile Settings] ──> G5 {Gate 5 Sign-Off}
└──> M6 [Milestone 6: PWA Offline Sync & E2E Validation] ──> G6 {Gate 6: Final Production Acceptance}Meilenstein 1: Projektgerüst, Kerntypen und Datenbankebene
Ziel: Repository-Grundlage, strenge TypeScript-Domainverträge und Firebase SDK-Verbindungen einrichten und die statische Übungsenzyklopädie mit Daten füllen.
- Aufgabe 1.0: Git-Branch initialisieren – Erstellen Sie den Branch
feat/m1-scaffolding-typesund wechseln Sie zu ihm. - Aufgabe 1.1: Projektgerüst und Toolchain einrichten – Next.js 19 (App Router) mit striktem TypeScript-Modus, Tailwind CSS v4, Tailwind Variants, Lucide React, Zustand, TanStack Query, Firebase SDKs, Google Generative AI SDK, Recharts und PWA-Baseline initialisieren.
- Aufgabe 1.2: Kanonische TypeScript-Domänentypdefinitionen – Erstellen Sie das Modul
src/types/(exercise.ts,plan.ts,session.ts,profile.ts,chat.ts,pr.ts), das genau der Datenarchitekturspezifikation entspricht. - Aufgabe 1.3: Firebase Client und Admin SDK einrichten – Implementieren Sie
src/lib/firebase/client.tsundsrc/lib/firebase/admin.ts. - Aufgabe 1.4: Skript zum Seeding der Enzyklopädie ausführen – Erstellen Sie
scripts/seed-exercises.ts, um/exercisesmit kanonischen Slugs und Metadaten zu füllen. - Aufgabe 1.5: Firestore-Regeln und -Indexe –
firestore.rulesundfirestore.indexes.jsonbereitstellen.
Überprüfung von Ebene 1 und Ebene 2 (Gate 1): Führen Sie npx tsc --noEmit, npm run lint und npx ts-node scripts/seed-exercises.ts aus. Prüfen Sie git diff main..HEAD und verifizieren Sie die Firestore-Dokumente, bevor Sie gate-1-approved taggen.
Meilenstein 2: Backend-API-Routen-Handler und KI-Engine-Pipeline
Ziel: Implementieren Sie die Server-Route-Handler für das Protokollieren von Workouts und die Gemini AI-Coaching-Pipeline mit Kontext-Caching, Verarbeitung von Änderungen an gemerkten Informationen und gestaffelten Vorschlägen.
- Aufgabe 2.0: Git-Branch initialisieren – Erstellen Sie den Branch
feat/m2-backend-apisausmainund wechseln Sie zu ihm. - Aufgabe 2.1: Authentifizierungs-Middleware-Hilfsprogramm – Implementieren Sie
src/lib/auth/server-auth.ts, um Firebase-ID-Tokens zu prüfen. - Aufgabe 2.2: Endpunkt für die Trainingsprotokollierung (
POST /api/workouts/log) – Trainingsvolumen berechnen, Brzycki-Formel für das 1RM anwenden, persönliche Rekorde aktualisieren, unveränderliches Protokoll persistent speichern und geplanten Tag alscompletedmarkieren. - Aufgabe 2.3: Gemini-Kontext-Caching und dynamische Prompt-Zusammenstellung – Richten Sie
cachedContents.createmit primären Systemanweisungen und dynamischer Laufzeitkontext-Zusammenstellung ein. - Aufgabe 2.4: Unified Chat Endpoint (
POST /api/coach/chat) – Erzwingen Sie eine strukturierte JSON-Schemaausgabe, schreiben Sie Daten gleichzeitig inweekly_chatsund erzwingen Sie die Staged Mutation Isolation. - Aufgabe 2.5: Autonomer Prozessor für die Speichermutation –
memory_mutations(CREATE,UPDATE,DELETE) auf/users/{userId}/profile/mainanwenden. - Aufgabe 2.6: Schreibgeschützte Abfragetools – Implementieren Sie
get_historical_exercise_logs,get_volume_trendsundget_pr_records.
Überprüfung von Ebene 1 und Ebene 2 (Gate 2): Führen Sie npx ts-node scripts/test-api-routes.ts aus, überprüfen Sie die Isolation der bereitgestellten Mutation, prüfen Sie die im Cache gespeicherte Latenz (< 2,5 Sekunden) und taggen Sie gate-2-approved.
Meilenstein 3: Client State Infrastructure und Core Gym-Floor Tracker
Ziel: Erstellen der Anwendungsshell, des persistenten unteren Docks, der lokalen Zustand- und TanStack Query-Zustandsarchitektur und der wichtigen /workout/active-Ausführungsansicht für den Trainingsbereich.
- Aufgabe 3.0: Git-Branch initialisieren – Erstellen Sie den Branch
feat/m3-client-state-trackerausmainund wechseln Sie zu ihm. - Aufgabe 3.1: Anwendungsshell und dauerhafte Navigation – Implementieren Sie
<AppContainer />und<BottomNavigationBar />mit 5 taktilen 48-dp-Tippzielen und einer dynamischen mittleren Taste. - Aufgabe 3.2: Client-Zustandsverwaltung und Step-Graph Flattener – Implementieren Sie
useActiveSessionStore(Zustand +localStorage) und den Step-Graph Flattener-Algorithmus. - Aufgabe 3.3: Katalog mit wiederverwendbaren Workout-Block-Komponenten – Implementieren Sie
<WorkoutHeader />,<WorkoutExerciseSummary />,<WorkoutBlock />,<ExerciseCard />,<EmptyDayPlaceholder />und<ModifyWithCoachCard />. - Aufgabe 3.4: Ansichten für die Vorschau des täglichen Trainings – Implementieren Sie
DailyWorkoutViewfür/todayund/workouts/:day. - Aufgabe 3.5: Bildschirm für die Ausführung des aktiven Trainings (
/workout/active) – Implementiere die Stoppuhr-Kopfzeile,<CurrentSetTargetCard />(<16 ms optimistische Benutzeroberfläche),<ActiveRestTimerDock />,<ExerciseSetsTable />,<SwapExerciseModal />und<FinishConfirmationModal />. - Aufgabe 3.6: Detailansicht der Übung in der Enzyklopädie (
/exercises/:exerciseId) – Implementiere automatisch wiederholte, stummgeschaltete<ExerciseVideoPlayer />, Zielmuskeln, Schritte und Tipps zur Ausführung.
Überprüfung von Ebene 1 und Ebene 2 (Gate 3): Führen Sie die Suites 1, 2, 5 und 6 im mobilen Darstellungsbereich der Chrome-Entwicklertools (390 × 844) aus, überprüfen Sie die Wiederherstellung nach dem Neuladen von localStorage und taggen Sie gate-3-approved.
Meilenstein 4: KI-Coach Conversational Hub und Staged Proposal Interface
Ziel: Implementieren Sie die dialogorientierte Coaching-Oberfläche (/coach) mit Sprache-zu-Text-Diktat, Prompt-Chip-Empfehlungen, Kontextbanner-Anhängen und interaktiven, gestaffelten Vorschlagskarten.
- Aufgabe 4.0: Git-Branch initialisieren – Erstellen Sie den Branch
feat/m4-coach-chatund wechseln Sie vonmaindorthin. - Aufgabe 4.1: Chatstatus und Echtzeitsynchronisierung – Implementieren Sie
useCoachChatStoremit dem Firestore-onSnapshot-Abo. - Aufgabe 4.2: Layout der Coach-Chatansicht und Nachrichtenstream – Implementieren Sie
<CoachHeader />,<ChatMessageList />,<ChatBubble />und den Coach-Thinking-Spinner. - Aufgabe 4.3: Kontextanhänge und Prompt-Chips – Implementieren Sie
<ContextBanner />,<ContextualPromptsBar />,<ChatInputBar />und<SpeechToTextButton />. - Aufgabe 4.4: Implementierung der Karte für gestaffelte Vorschläge – Implementieren Sie
<StagedProposalCard />fürUPDATE_DAY- undUPDATE_WEEK-Diffs. - Aufgabe 4.5: Human-in-the-Loop-Commitment für Vorschläge –
proposal.datanur dann in Firestoreweekly_plansübernehmen, wenn auf[Accept Plan]getippt wird.
Überprüfung von Ebene 1 und Ebene 2 (Gate 4): Führen Sie Suite 4 in den Chrome-Entwicklertools aus, überprüfen Sie die Isolierung der bereitgestellten Mutation und den [Accept Plan]-Commit und taggen Sie gate-4-approved.
Meilenstein 5: Überarbeitung des Zeitplans, Fortschrittsanalyse und Profileinstellungen
Ziel: Die verbleibenden Anwendungsansichten „Wochenplan“ (/week), „Fortschritt und Analysen“ (/progress) und „Profil/Einstellungen“ (/settings) mit dreistufiger Speicherverwaltung fertigstellen.
- Aufgabe 5.0: Git-Branch initialisieren – Erstellen Sie den Branch
feat/m5-schedule-progress-settingsausmainund wechseln Sie zu ihm. - Aufgabe 5.1: Wochenplanansicht (
/week) – Implementieren Sie<WeekHeader />,<WeeklyStatsSummary />,<DayScheduleCard variant="normal" />und<ModifyWeekWithCoachCard />. - Aufgabe 5.2: Ansicht „Fortschritt und Analysen“ (
/progress) – Implementieren Sie<PRShowcaseBanner />, Recharts<VolumeProgressChartCard />(4W | 3M | 1Y),<AllTimeStatsGrid />und<WorkoutHistorySection />. - Aufgabe 5.3: Profil, Einstellungen und KI-Speicheransicht (
/settings) – Implementieren Sie<UserProfileCard />,<EquipmentSelectorCard />,<PreferencesGroup />und<MemoryTierViewerCard />mit Löschung von[🗑].
Überprüfung von Ebene 1 und Ebene 2 (Gate 5): Führen Sie die Suites 3, 7 und 8 in den Chrome-Entwicklertools aus, überprüfen Sie die Diagramm-Umschalter und das Löschen von gemerkten Informationen und taggen Sie gate-5-approved.
Meilenstein 6: Produktionshärtung, PWA-Offline-Puffer und vollständige Matrixfreigabe
Ziel: Die Anwendung für reale Fitnessstudio-Umgebungen optimieren: Offline-Caching von PWA-Assets konfigurieren, Offline-Synchronisierung des Trainingsprotokolls implementieren und die vollständige Verifizierungsmatrix mit 42 Tests in natürlicher Sprache ausführen.
- Aufgabe 6.0: Git-Branch initialisieren – Erstellen Sie den Branch
feat/m6-pwa-productionund wechseln Sie vonmaindorthin. - Aufgabe 6.1: PWA-Service-Worker und Asset-Caching – Serwist-/next-pwa-Service-Worker und eigenständiges PWA-Manifest fertigstellen.
- Aufgabe 6.2: Offline-Synchronisierungspuffer für Basement Gym – Implementieren Sie eine Offline-Warteschlange in IndexedDB/localStorage für
POST /api/workouts/logmit automatischer Leerung bei Wiederherstellung der Verbindung. - Aufgabe 6.3: Fehlergrenzen und Fallback-Ansichten – Prüfen Sie das 404-Fallback, das Fallback für ungültige Tage und das Fallback für ungültige Übungen.
- Aufgabe 6.4: Vollständige Matrixausführung und Leistungsprüfung – Führen Sie alle 42 Testläufe in natürlicher Sprache in den Suites 1–8 aus und führen Sie eine Lighthouse-Prüfung durch (Leistung > 90, LCP < 2,5 s, Berührungszielbereiche ≥ 48 dp).
Überprüfung von Ebene 1 und Ebene 2 (Gate 6): Führen Sie npm run build aus, simulieren Sie den Offlinemodus in den Chrome-Entwicklertools, prüfen Sie, ob alle 42 Tests bestanden wurden, und taggen Sie v1.0.0.
Zusammenfassung der Prüfschritte für menschliche Gatekeeper
| Gate | Schwerpunkt | Git-Zweig und Release-Tag | Wichtigste Ergebnisse des KI-Agenten | Erwartete Dauer der manuellen Verifizierung |
|---|---|---|---|---|
| Gate 1 | Typen, DB-Schema und Seed | feat/m1-scaffolding-typesTag: gate-1-approved |
src/types/, Seed-Skript ausgeführt, fehlerfreie Kompilierung |
~2 Minuten (Diff und Seed-Datenbank prüfen) |
| Gate 2 | Backend-APIs und Gemini-Pipeline | feat/m2-backend-apisTag: gate-2-approved |
/api/workouts/log, /api/coach/chat, Integrationstests |
~3 Minuten (API-Testskript ausführen und Schema prüfen) |
| Gate 3 | Clientstatus und aktiver Tracker | feat/m3-client-state-trackerTag: gate-3-approved |
Shell, /today, /workout/active, Browsertest bestanden |
~3 Minuten (auf Trainingssteuerung tippen und Stoppuhr testen) |
| Gate 4 | Coach-Chat und gestaffelte Vorschläge | feat/m4-coach-chatTag: gate-4-approved |
/coach, <StagedProposalCard />, Angebotszusage |
~3 Minuten (Chat mit Coach, Test von [Accept Plan]) |
| Gate 5 | Zeitplan, Analysen und Einstellungen | feat/m5-schedule-progress-settingsTag: gate-5-approved |
/week, /progress, /settings, Speichermanager |
~3 Minuten (Diagramme ansehen und gemerkte Testinformationen löschen) |
| Gate 6 | PWA-Offlinesynchronisierung und vollständige Veröffentlichung | feat/m6-pwa-productionTag: v1.0.0 |
Produktions-Build, PWA-Cache, 42/42 Tests bestanden | ~5 Minuten (Abschlussbericht prüfen und Plausibilitätsprüfung für Mobilgeräte durchführen) |