Application de fitness intelligente : plan d'implémentation par étapes et feuille de route de validation
ArtefactIl s'agit de l'artefact utilisé dans l'épisode 4 : Plan d'implémentation d'une application sans code. Vous pouvez utiliser cette feuille de route pour orchestrer un développement basé sur des jalons avec une vérification à deux niveaux et des portes de branche/tag Git.
Connectez-vous pour accéder à cet artefact
Connectez-vous avec votre profil de développeur Google pour afficher et copier l'artefact complet utilisé dans la série Build It!.
Profil de développeur requis
Vous n'êtes pas éligible à un profil de développeur. Demandez à votre administrateur Workspace d'activer cette fonctionnalité.
Créer un profil de développeur
Créez un profil de développeur Google sans frais pour débloquer tous les prompts et artefacts Build It!.
Rejoignez Builder Central pour débloquer
Récupérez votre badge de membre Builder sans frais en un clic pour débloquer tous les prompts et artefacts Build It!.
État : approuvé et prêt pour l'exécution
Public cible : agent développeur d'IA autonome et chef de projet humain
Documents complémentaires : Spécifications de l'architecture des données, Spécifications de l'architecture client, Spécifications de l'agent d'entraînement d'IA
Synthèse et stratégie d'exécution
Ce plan d'implémentation orchestre la compilation complète de l'application Smart Fitness, des schémas de base à la préparation à la production.
Le paradigme d'exécution : axé sur les jalons avec une validation à deux niveaux
Pour trouver un équilibre entre la rapidité des agents et la précision architecturale, ce plan suit un framework de jalons par phases :
- Exécution autonome au sein des jalons : l'agent d'implémentation exécute en continu les étapes de chaque jalon, écrit du code, exécute des builds, corrige les erreurs du compilateur et résout les problèmes de manière autonome, sans microgestion humaine.
- Vérification de niveau 1 : barrière de pré-validation de l'agent autonome : avant de demander l'approbation d'un humain, l'agent doit exécuter des vérifications du compilateur, exécuter des scripts de test de backend et lancer la vérification du navigateur autonome Google Antigravity (à l'aide des Outils pour les développeurs Chrome) pour simuler des interactions utilisateur réelles sur mobile, exécuter les scénarios de test en anglais simple, inspecter l'état du DOM et effectuer des captures d'écran.
- Validation de niveau 2 – Point de contrôle humain : une fois que l'agent a réussi les vérifications automatisées, le contrôleur humain passe en revue une checklist concrète de deux minutes pour vérifier l'expérience utilisateur, l'alignement sur les objectifs de l'entreprise et l'intégrité des données avant d'autoriser le passage à l'étape suivante.
Le protocole de contrôle des versions et de taggage Git
Pour garantir la reprise après sinistre, des différences de revue de code transparentes et l'absence d'erreurs cumulées entre les jalons, l'agent d'implémentation doit respecter strictement le protocole Git suivant :
- Stratégie de ramification :
main: branche protégée. Seules les versions majeures approuvées par un humain sont fusionnées ici.- Branches de fonctionnalités par version intermédiaire : branche dédiée par version intermédiaire (
feat/m1-scaffolding-typesàfeat/m6-pwa-production).
- Cérémonie de validation avant la porte :
git add -A git commit -m "feat(mX): complete milestone X tasks and pre-gate verifications" - Examen des différences par un contrôleur humain :
git diff main..HEAD # or across gates: git diff gate-[N-1]-approved..HEAD - Approbation des étapes et taggage des jalons :
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 et reprise après sinistre :
git checkout main git branch -D feat/mX-... git checkout -b feat/mX-... gate-[N-1]-approved
Graphique des dépendances de l'architecture principale
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}Étape 1 : Échafaudage du projet, types de base et couche de base de données
Objectif : établir la base du dépôt, les contrats de domaine TypeScript stricts, les connexions au SDK Firebase et amorcer l'encyclopédie d'exercices statiques.
- Tâche 1.0 : Initialisation de la branche Git : créez la branche
feat/m1-scaffolding-typeset basculez vers celle-ci. - Tâche 1.1 : Structure du projet et configuration de la chaîne d'outils : initialisez Next.js 19 (App Router) avec le mode strict TypeScript, Tailwind CSS v4, Tailwind Variants, Lucide React, Zustand, TanStack Query, les SDK Firebase, le SDK Google IA générative, Recharts et la référence PWA.
- Tâche 1.2 : Définitions de types de domaine TypeScript canoniques — Créez le module
src/types/(exercise.ts,plan.ts,session.ts,profile.ts,chat.ts,pr.ts) correspondant strictement à la spécification de l'architecture des données. - Tâche 1.3 : Configurer le SDK client et le SDK Admin Firebase : implémentez
src/lib/firebase/client.tsetsrc/lib/firebase/admin.ts. - Tâche 1.4 : Exercice : Script d'amorçage de l'encyclopédie : créez
scripts/seed-exercises.tspour amorcer/exercisesavec des slugs canoniques et des métadonnées. - Tâche 1.5 : Règles et index Firestore : déployez
firestore.rulesetfirestore.indexes.json.
Validation de couche 1 et de couche 2 (Gate 1) : exécutez npx tsc --noEmit, npm run lint et npx ts-node scripts/seed-exercises.ts, inspectez git diff main..HEAD et validez les documents Firestore d'amorçage avant d'ajouter le tag gate-1-approved.
Étape 2 : Gestionnaires de routes d'API backend et pipeline du moteur d'IA
Objectif : implémenter les gestionnaires de routes du serveur pour l'enregistrement des entraînements et le pipeline de coaching IA Gemini avec la mise en cache du contexte, la gestion des mutations de mémoire et les propositions par étapes.
- Tâche 2.0 : Initialisation de la branche Git : créez la branche
feat/m2-backend-apisà partir demainet basculez vers celle-ci. - Tâche 2.1 : Assistant de middleware d'authentification : implémentez
src/lib/auth/server-auth.tspour valider les jetons d'ID Firebase. - Tâche 2.2 : Point de terminaison de journalisation des entraînements (
POST /api/workouts/log) : calculer le volume de la session, appliquer la formule 1RM de Brzycki, faire un upsert des records personnels, conserver un journal immuable et marquer le jour planifié commecompleted. - Tâche 2.3 : Mise en cache du contexte Gemini et assemblage de requêtes dynamiques : configurez
cachedContents.createavec les instructions système principales et l'assemblage de contexte d'exécution dynamique. - Tâche 2.4 : Point de terminaison de chat unifié (
POST /api/coach/chat) : appliquez une sortie de schéma JSON structurée, effectuez une double écriture dansweekly_chatset appliquez l'isolation des mutations par étapes. - Tâche 2.5 : Processeur de mutation de mémoire autonome : appliquez
memory_mutations(CREATE,UPDATE,DELETE) à/users/{userId}/profile/main. - Tâche 2.6 : Éditeurs de requêtes analytiques en lecture seule : implémentez
get_historical_exercise_logs,get_volume_trendsetget_pr_records.
Validation de couche 1 et de couche 2 (porte 2) : exécutez npx ts-node scripts/test-api-routes.ts, vérifiez l'isolation de la mutation préparée, vérifiez la latence mise en cache (< 2,5 s) et ajoutez le tag gate-2-approved.
Jalon 3 : Infrastructure de l'état du client et outil de suivi de base de la salle de sport
Objectif : créer le shell d'application, le dock inférieur persistant, l'architecture d'état Zustand et TanStack Query locale, et la vue d'exécution de la salle de sport /workout/active à enjeux élevés.
- Tâche 3.0 : Initialisation de la branche Git : créez la branche
feat/m3-client-state-trackerà partir demainet basculez vers celle-ci. - Tâche 3.1 : Shell d'application et navigation persistante : implémentez
<AppContainer />et<BottomNavigationBar />avec cinq cibles tactiles de 48 dp et un bouton central dynamique. - Tâche 3.2 : Gestion de l'état du client et aplatissement du graphe d'étapes : implémentez
useActiveSessionStore(Zustand +localStorage) et l'algorithme d'aplatissement du graphe d'étapes. - Tâche 3.3 : Catalogue de composants de blocs d'entraînement réutilisables : implémentez
<WorkoutHeader />,<WorkoutExerciseSummary />,<WorkoutBlock />,<ExerciseCard />,<EmptyDayPlaceholder />et<ModifyWithCoachCard />. - Tâche 3.4 : Vues d'aperçu de l'entraînement quotidien : implémentez
DailyWorkoutViewpour/todayet/workouts/:day. - Tâche 3.5 : Écran d'exécution de l'entraînement actif (
/workout/active) : implémentez l'en-tête du chronomètre,<CurrentSetTargetCard />(UI optimiste < 16 ms),<ActiveRestTimerDock />,<ExerciseSetsTable />,<SwapExerciseModal />et<FinishConfirmationModal />. - Tâche 3.6 : Vue encyclopédique des détails de l'exercice (
/exercises/:exerciseId) : implémentez la lecture automatique en boucle de<ExerciseVideoPlayer />sans le son, les muscles ciblés, les étapes et les conseils de posture.
Validation des couches 1 et 2 (étape 3) : exécutez les suites 1, 2, 5 et 6 dans la fenêtre d'affichage mobile des outils pour les développeurs Chrome (390 x 844), vérifiez la récupération après actualisation de localStorage et ajoutez le tag gate-3-approved.
Étape 4 : Hub conversationnel du coach IA et interface de proposition par étapes
Objectif : implémenter l'interface de coaching conversationnel (/coach) avec la reconnaissance vocale, les recommandations de chips de prompt, les pièces jointes de la bannière de contexte et les fiches de proposition interactives par étapes.
- Tâche 4.0 : Initialisation de la branche Git : créez la branche
feat/m4-coach-chatà partir demainet basculez vers celle-ci. - Tâche 4.1 : État du chat et synchronisation en temps réel : implémentez
useCoachChatStoreavec l'abonnement FirestoreonSnapshot. - Tâche 4.2 : Mise en page de la vue de chat et flux de messages de Coach : implémentez
<CoachHeader />,<ChatMessageList />,<ChatBubble />et l'icône de chargement de Coach. - Tâche 4.3 : Ajout de contexte et chips de prompt : implémentez
<ContextBanner />,<ContextualPromptsBar />,<ChatInputBar />et<SpeechToTextButton />. - Tâche 4.4 : Implémentation de la fiche de proposition par étapes : implémentez
<StagedProposalCard />pour les différencesUPDATE_DAYetUPDATE_WEEK. - Tâche 4.5 : Engagement de proposition human-in-the-loop : validez
proposal.datadans Firestoreweekly_plansuniquement lorsque l'utilisateur appuie sur[Accept Plan].
Validation de couche 1 et de couche 2 (porte 4) : exécutez la suite 4 dans les outils pour les développeurs Chrome, vérifiez l'isolation des mutations de préproduction et le commit [Accept Plan], puis ajoutez le tag gate-4-approved.
Étape 5 : Refonte du calendrier, analyse de la progression et paramètres du profil
Objectif : Compléter les vues d'application restantes : "Week Schedule" (/week), "Progress & Analytics" (/progress) et "Profile/Settings" (/settings) avec une gestion de mémoire à trois niveaux.
- Tâche 5.0 : Initialisation de la branche Git : créez la branche
feat/m5-schedule-progress-settingset passez-y depuismain. - Tâche 5.1 : Vue du planning hebdomadaire (
/week) : implémentez<WeekHeader />,<WeeklyStatsSummary />,<DayScheduleCard variant="normal" />et<ModifyWeekWithCoachCard />. - Tâche 5.2 : Vue "Progression et analyse" (
/progress) : implémentez<PRShowcaseBanner />, Recharts<VolumeProgressChartCard />(4W | 3M | 1Y),<AllTimeStatsGrid />et<WorkoutHistorySection />. - Tâche 5.3 : Vue Profil, Paramètres et Mémoire de l'IA (
/settings) : implémentez<UserProfileCard />,<EquipmentSelectorCard />,<PreferencesGroup />et<MemoryTierViewerCard />avec la suppression de[🗑].
Validation de niveau 1 et de niveau 2 (étape 5) : exécutez les suites 3, 7 et 8 dans les outils pour les développeurs Chrome, vérifiez les boutons d'activation/de désactivation des graphiques et la suppression de la mémoire, puis taguez gate-5-approved.
Étape 6 : Renforcement de la production, tampon hors connexion de la PWA et validation de la matrice complète
Objectif : Renforcer l'application pour les environnements de salle de sport réels : configurer la mise en cache des éléments de la PWA hors connexion, implémenter la synchronisation du journal d'entraînement hors connexion et exécuter la matrice de vérification complète de 42 tests en langage naturel.
- Tâche 6.0 : Initialisation de la branche Git : créez la branche
feat/m6-pwa-productionet passez-y depuismain. - Tâche 6.1 : Service worker PWA et mise en cache des éléments : finalisez le service worker Serwist/next-pwa et le fichier manifeste PWA autonome.
- Tâche 6.2 : Tampon de synchronisation hors connexion pour Basement Gym : implémentez une file d'attente hors connexion dans IndexedDB/localStorage pour
POST /api/workouts/logavec vidage automatique lors de la reconnexion. - Tâche 6.3 : Limites d'erreur et vues de remplacement : vérifiez le remplacement 404, le remplacement de jour non valide et le remplacement d'exercice non valide.
- Tâche 6.4 : Exécution de la matrice complète et audit des performances : exécutez les 42 scénarios de test en langage naturel dans les suites 1 à 8 et exécutez l'audit Lighthouse (performances > 90, LCP < 2,5 s, cibles tactiles ≥ 48 dp).
Validation de niveau 1 et de niveau 2 (porte 6) : exécutez npm run build, simulez le mode réseau hors connexion dans les outils pour les développeurs Chrome, vérifiez que les 42 tests de la suite de tests sont réussis et ajoutez le tag v1.0.0.
Résumé des portes de validation pour le validateur humain
| Porte | Domaine d'action | Branche Git et tag de version | Livrable de l'agent clé | Délai de vérification manuelle prévu |
|---|---|---|---|---|
| Porte 1 | Types, schéma de base de données et amorçage | feat/m1-scaffolding-typesTag : gate-1-approved |
src/types/, script d'amorçage exécuté, compilation propre |
~2 minutes (inspecter les différences et la base de données amorcée) |
| Porte 2 | API de backend et pipeline Gemini | feat/m2-backend-apisTag : gate-2-approved |
/api/workouts/log, /api/coach/chat, tests d'intégration |
~3 minutes (exécuter le script de test de l'API et vérifier le schéma) |
| Porte 3 | État du client et suivi actif | feat/m3-client-state-trackerTag : gate-3-approved |
Shell, /today, /workout/active, test du navigateur réussi |
~3 minutes (appuyer sur les commandes d'entraînement et tester le chronomètre) |
| Porte 4 | Chat avec le coach et propositions par étapes | feat/m4-coach-chatTag : gate-4-approved |
/coach, <StagedProposalCard />, engagement de la proposition |
~3 minutes (discuter avec le coach, tester [Accept Plan]) |
| Porte 5 | Programmation, analyses et paramètres | feat/m5-schedule-progress-settingsTag : gate-5-approved |
/week, /progress, /settings, gestionnaire de mémoire |
~3 minutes (examiner les graphiques et supprimer une mémoire de test) |
| Porte 6 | Synchronisation hors connexion et lancement complet de la PWA | feat/m6-pwa-productionTag : v1.0.0 |
Build de production, cache PWA, 42/42 tests réussis | Environ 5 minutes (examen du rapport final et vérification de l'intégrité sur mobile) |