Aplikasi Kebugaran Cerdas: Rencana Penerapan Bertahap & Roadmap Verifikasi
ArtefakIni adalah artefak yang digunakan dalam Episode 4: Rencana Penerapan Aplikasi Tanpa Coding. Anda dapat menggunakan roadmap ini untuk mengatur pengembangan berbasis pencapaian dengan verifikasi lapisan ganda dan gerbang cabang/tag Git.
Login untuk mengakses artefak ini
Login dengan Profil Developer Google Anda untuk melihat dan menyalin artefak lengkap yang digunakan dalam seri Build It!.
Profil Developer Diperlukan
Anda tidak memenuhi syarat untuk mendapatkan profil developer. Minta administrator Workspace Anda untuk mengaktifkan fitur ini.
Buat Profil Developer
Buat Profil Developer Google gratis untuk mengakses semua perintah dan artefak Build It!
Bergabunglah dengan Builder Central untuk Membuka Akses
Klaim badge anggota Builder gratis Anda dengan sekali klik untuk membuka semua perintah dan artefak Build It!.
Status: Approved & Ready for Execution
Target Audience: Autonomous AI Developer Agent & Human Project Lead
Companion Documents: Data Architecture Spec, Client Architecture Spec, AI Trainer Agent Spec
Ringkasan Eksekutif & Strategi Eksekusi
Rencana implementasi ini mengatur pembuatan lengkap aplikasi Smart Fitness, mulai dari skema dasar hingga kesiapan produksi.
Paradigma Eksekusi: Berbasis Pencapaian dengan Verifikasi Berlapis Ganda
Untuk menyeimbangkan kecepatan agen yang tinggi dengan presisi arsitektur, rencana ini mengikuti Framework Pencapaian Berbasis Fase:
- Eksekusi Otonom dalam Milestone: Agen pelaksana bekerja secara terus-menerus melalui langkah-langkah setiap milestone, menulis kode, menjalankan build, memperbaiki error compiler, dan memperbaiki masalah secara mandiri tanpa pengelolaan mikro dari manusia.
- Verifikasi Lapisan 1 — Penghalang Pra-Gerbang Agen Otonom: Sebelum meminta persetujuan manusia, agen harus menjalankan pemeriksaan compiler, mengeksekusi skrip pengujian backend, dan meluncurkan Verifikasi Browser Otonom Google Antigravity (menggunakan Chrome DevTools) untuk menyimulasikan interaksi pengguna seluler yang sebenarnya, mengeksekusi kasus pengujian dalam bahasa Inggris biasa, memeriksa status DOM, dan mengambil screenshot.
- Verifikasi Lapisan 2 — Pos Pemeriksaan Gatekeeper Manusia: Setelah pemeriksaan otomatis agen lulus, gatekeeper manusia meninjau checklist konkret berdurasi 2 menit untuk memverifikasi nuansa UX, keselarasan bisnis, dan integritas data sebelum memberikan izin untuk melanjutkan ke tahap berikutnya.
Protokol Pemberian Tag Git & Kontrol Versi
Untuk memastikan disaster recovery, perbedaan peninjauan kode yang transparan, dan tidak ada error yang bertambah di seluruh pencapaian, agen pelaksana harus benar-benar mematuhi protokol Git berikut:
- Strategi Percabangan:
main: Cabang yang dilindungi. Hanya rilis pencapaian yang disetujui manusia yang digabungkan di sini.- Cabang Fitur Tonggak Pencapaian: Cabang khusus per tonggak pencapaian (
feat/m1-scaffolding-typeshinggafeat/m6-pwa-production).
- Upacara Komitmen Pra-Gerbang:
git add -A git commit -m "feat(mX): complete milestone X tasks and pre-gate verifications" - Peninjauan Perbedaan oleh Peninjau Manusia:
git diff main..HEAD # or across gates: git diff gate-[N-1]-approved..HEAD - Persetujuan Gate & Pemberian Tag Pencapaian:
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 & Disaster Recovery:
git checkout main git branch -D feat/mX-... git checkout -b feat/mX-... gate-[N-1]-approved
Grafik Dependensi Arsitektur Utama
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}Milestone 1: Project Scaffolding, Core Types & Database Layer
Tujuan: Membangun fondasi repositori, kontrak domain TypeScript yang ketat, koneksi Firebase SDK, dan melakukan seeding ensiklopedia latihan statis.
- Tugas 1.0: Inisialisasi Cabang Git — Buat dan beralih ke
feat/m1-scaffolding-types. - Tugas 1.1: Project Scaffolding & Toolchain Setup — Lakukan inisialisasi Next.js 19 (App Router) dengan mode ketat TypeScript, Tailwind CSS v4, Tailwind Variants, Lucide React, Zustand, TanStack Query, Firebase SDK, Google AI generatif SDK, Recharts, dan baseline PWA.
- Tugas 1.2: Definisi Jenis Domain TypeScript Kanonis — Buat modul
src/types/(exercise.ts,plan.ts,session.ts,profile.ts,chat.ts,pr.ts) yang benar-benar cocok dengan Spesifikasi Arsitektur Data. - Tugas 1.3: Penyiapan Firebase Client & Admin SDK — Implementasikan
src/lib/firebase/client.tsdansrc/lib/firebase/admin.ts. - Tugas 1.4: Menjalankan Skrip Penyemaian Ensiklopedia — Buat
scripts/seed-exercises.tsuntuk menyemai/exercisesdengan slug dan metadata kanonis. - Tugas 1.5: Aturan & Indeks Firestore — Deploy
firestore.rulesdanfirestore.indexes.json.
Verifikasi Lapisan 1 & Lapisan 2 (Gate 1): Jalankan npx tsc --noEmit, npm run lint, dan npx ts-node scripts/seed-exercises.ts; periksa git diff main..HEAD dan verifikasi dokumen Firestore yang di-seed sebelum memberi tag gate-1-approved.
Milestone 2: Pengendali Rute API Backend & Pipeline Mesin AI
Tujuan: Mengimplementasikan pengendali rute server untuk pencatatan olahraga dan pipeline pelatihan AI Gemini dengan cache konteks, penanganan mutasi memori, dan proposal bertahap.
- Tugas 2.0: Inisialisasi Cabang Git — Buat dan beralih ke
feat/m2-backend-apisdarimain. - Tugas 2.1: Helper Middleware Autentikasi — Implementasikan
src/lib/auth/server-auth.tsyang memverifikasi token ID Firebase. - Tugas 2.2: Endpoint Logging Latihan (
POST /api/workouts/log) — Menghitung volume sesi, menerapkan formula 1RM Brzycki, meng-upsert PR, mempertahankan log yang tidak dapat diubah, dan menandai hari yang dijadwalkan sebagaicompleted. - Tugas 2.3: Cache Konteks & Dynamic Prompt Assembly Gemini — Siapkan
cachedContents.createdengan Primary System Instructions dan dynamic runtime context assembly. - Tugas 2.4: Endpoint Chat Terpadu (
POST /api/coach/chat) — Menerapkan output skema JSON terstruktur, penulisan ganda keweekly_chats, dan menerapkan Isolasi Mutasi Bertahap. - Tugas 2.5: Autonomous Memory Mutation Processor — Terapkan
memory_mutations(CREATE,UPDATE,DELETE) ke/users/{userId}/profile/main. - Tugas 2.6: Alat Kueri Analitis Hanya Baca — Implementasikan
get_historical_exercise_logs,get_volume_trends, danget_pr_records.
Verifikasi Lapisan 1 & Lapisan 2 (Gerbang 2): Jalankan npx ts-node scripts/test-api-routes.ts, verifikasi isolasi mutasi yang di-stage, periksa latensi yang di-cache (<2,5 dtk), dan beri tag gate-2-approved.
Milestone 3: Infrastruktur Status Klien & Pelacak Inti Gym-Floor
Tujuan: Membangun application shell, dok bawah persisten, arsitektur status Zustand dan TanStack Query lokal, serta tampilan eksekusi lapangan gym /workout/active yang berisiko tinggi.
- Tugas 3.0: Inisialisasi Cabang Git — Buat dan beralih ke
feat/m3-client-state-trackerdarimain. - Tugas 3.1: Application Shell & Navigasi Persisten — Terapkan
<AppContainer />dan<BottomNavigationBar />dengan 5 target ketuk 48 dp yang taktil dan tombol tengah dinamis. - Tugas 3.2: Pengelolaan Status Klien & Step-Graph Flattener — Terapkan
useActiveSessionStore(Zustand +localStorage) dan algoritma Step-Graph Flattener. - Tugas 3.3: Katalog Komponen Blok Latihan yang Dapat Digunakan Kembali — Implementasikan
<WorkoutHeader />,<WorkoutExerciseSummary />,<WorkoutBlock />,<ExerciseCard />,<EmptyDayPlaceholder />, dan<ModifyWithCoachCard />. - Tugas 3.4: Tampilan Pratinjau Latihan Harian — Terapkan
DailyWorkoutViewuntuk/todaydan/workouts/:day. - Tugas 3.5: Layar Eksekusi Latihan Aktif (
/workout/active) — Implementasikan header stopwatch,<CurrentSetTargetCard />(UI optimis <16 md),<ActiveRestTimerDock />,<ExerciseSetsTable />,<SwapExerciseModal />, dan<FinishConfirmationModal />. - Tugas 3.6: Tampilan Ensiklopedia Detail Latihan (
/exercises/:exerciseId) — Terapkan<ExerciseVideoPlayer />yang di-loop otomatis dan dibisukan, target otot, langkah, dan tips postur.
Verifikasi Lapisan 1 & Lapisan 2 (Gerbang 3): Jalankan Suite 1, 2, 5, dan 6 di area pandang seluler Chrome DevTools (390x844), verifikasi pemulihan pemuatan ulang localStorage, dan beri tag gate-3-approved.
Tonggak Pencapaian 4: Hub Percakapan Pelatih AI & Antarmuka Proposal Bertahap
Tujuan: Mengimplementasikan antarmuka pelatihan percakapan (/coach) dengan dikte speech-to-text, rekomendasi chip perintah, lampiran banner konteks, dan kartu proposal bertahap yang interaktif.
- Tugas 4.0: Inisialisasi Cabang Git — Buat dan beralih ke
feat/m4-coach-chatdarimain. - Tugas 4.1: Status Chat & Sinkronisasi Real-Time — Implementasikan
useCoachChatStoredengan langgananonSnapshotFirestore. - Tugas 4.2: Tata Letak Tampilan Chat & Aliran Pesan Coach — Implementasikan
<CoachHeader />,<ChatMessageList />,<ChatBubble />, dan Spinner Berpikir Coach. - Tugas 4.3: Lampiran Konteks & Chip Perintah — Implementasikan
<ContextBanner />,<ContextualPromptsBar />,<ChatInputBar />, dan<SpeechToTextButton />. - Tugas 4.4: Implementasi Kartu Proposal Bertahap — Implementasikan
<StagedProposalCard />untuk diffUPDATE_DAYdanUPDATE_WEEK. - Tugas 4.5: Human-in-the-Loop Proposal Commitment — Commit
proposal.datake Firestoreweekly_planshanya saat[Accept Plan]diketuk.
Verifikasi Lapisan 1 & Lapisan 2 (Gerbang 4): Jalankan Suite 4 di Chrome DevTools, verifikasi isolasi mutasi bertahap dan commit [Accept Plan], serta beri tag gate-4-approved.
Milestone 5: Perombakan Jadwal, Analisis Progres & Setelan Profil
Tujuan: Selesaikan tampilan aplikasi yang tersisa: Jadwal Mingguan (/week), Progres & Analisis (/progress), dan Profil/Setelan (/settings) dengan manajemen memori 3 tingkat.
- Tugas 5.0: Inisialisasi Cabang Git — Buat dan beralih ke
feat/m5-schedule-progress-settingsdarimain. - Tugas 5.1: Week Schedule View (
/week) — Implementasikan<WeekHeader />,<WeeklyStatsSummary />,<DayScheduleCard variant="normal" />, dan<ModifyWeekWithCoachCard />. - Tugas 5.2: Tampilan Progres & Analytics (
/progress) — Implementasikan<PRShowcaseBanner />, Recharts<VolumeProgressChartCard />(4W | 3M | 1Y),<AllTimeStatsGrid />, dan<WorkoutHistorySection />. - Tugas 5.3: Tampilan Profil, Setelan & Memori AI (
/settings) — Implementasikan<UserProfileCard />,<EquipmentSelectorCard />,<PreferencesGroup />, dan<MemoryTierViewerCard />dengan penghapusan[🗑].
Verifikasi Lapisan 1 & Lapisan 2 (Gerbang 5): Jalankan Suite 3, 7, dan 8 di Chrome DevTools, verifikasi tombol diagram dan penghapusan memori, serta sebutkan gate-5-approved.
Pencapaian 6: Penguatan Produksi, Buffer Offline PWA & Persetujuan Matriks Lengkap
Tujuan: Memperkuat aplikasi untuk lingkungan gym yang sebenarnya: mengonfigurasi caching aset PWA offline, menerapkan sinkronisasi log latihan offline, dan menjalankan matriks verifikasi lengkap yang terdiri dari 42 pengujian dalam bahasa Inggris sederhana.
- Tugas 6.0: Inisialisasi Cabang Git — Buat dan beralih ke
feat/m6-pwa-productiondarimain. - Tugas 6.1: Service Worker PWA & Caching Aset — Selesaikan service worker Serwist/next-pwa dan manifes PWA mandiri.
- Tugas 6.2: Basement Gym Offline Sync Buffer — Terapkan antrean offline di IndexedDB/localStorage untuk
POST /api/workouts/logdengan flush koneksi ulang otomatis. - Tugas 6.3: Batas Error & Tampilan Penggantian — Verifikasi penggantian 404, penggantian hari tidak valid, dan penggantian latihan tidak valid.
- Tugas 6.4: Eksekusi Matriks Lengkap & Audit Performa — Jalankan semua 42 kasus pengujian dalam bahasa Inggris biasa di Suite 1–8 dan jalankan audit Lighthouse (Performa >90, LCP <2,5 dtk, target sentuh ≥48 dp).
Verifikasi Lapisan 1 & Lapisan 2 (Gerbang 6): Jalankan npm run build, simulasikan mode jaringan offline di Chrome DevTools, verifikasi bahwa seluruh 42/42 suite pengujian lulus, dan beri tag v1.0.0.
Ringkasan Gerbang Verifikasi untuk Penjaga Gerbang Manusia
| Gerbang | Area Fokus | Cabang Git & Tag Rilis | Hasil Kerja Utama Agen | Perkiraan Waktu Verifikasi Manual |
|---|---|---|---|---|
| Gerbang 1 | Jenis, Skema DB & Seed | feat/m1-scaffolding-typesTag: gate-1-approved |
src/types/, skrip seed dijalankan, kompilasi bersih |
~2 menit (memeriksa diff & DB yang di-seed) |
| Gerbang 2 | API Backend & Pipeline Gemini | feat/m2-backend-apisTag: gate-2-approved |
/api/workouts/log, /api/coach/chat, pengujian integrasi |
~3 menit (menjalankan skrip pengujian API & memeriksa skema) |
| Gerbang 3 | Status Klien & Pemantau Aktivitas | feat/m3-client-state-trackerTag: gate-3-approved |
Shell, /today, /workout/active, pengujian browser lulus |
~3 menit (ketuk kontrol latihan fisik & uji stopwatch) |
| Gerbang 4 | Chat Pelatih & Proposal Bertahap | feat/m4-coach-chatTag: gate-4-approved |
/coach, <StagedProposalCard />, commit proposal |
~3 menit (percakapan dengan pelatih, uji [Accept Plan]) |
| Gerbang 5 | Jadwal, Analisis & Setelan | feat/m5-schedule-progress-settingsTag: gate-5-approved |
/week, /progress, /settings, pengelola memori |
~3 menit (meninjau diagram & menghapus memori pengujian) |
| Gerbang 6 | Sinkronisasi Offline & Rilis Lengkap PWA | feat/m6-pwa-productionTag: v1.0.0 |
Build produksi, cache PWA, 42/42 pengujian lulus | ~5 menit (meninjau laporan akhir & pemeriksaan kewarasan seluler) |