स्मार्ट फ़िटनेस ऐप्लिकेशन: चरणबद्ध तरीके से लागू करने का प्लान और पुष्टि करने का रोडमैप
आर्टिफ़ैक्टइस आर्टफ़ैक्ट का इस्तेमाल, एपिसोड 4: बिना कोड वाले ऐप्लिकेशन को लागू करने का प्लान में किया गया है. इस रोडमैप का इस्तेमाल करके, दो लेयर वाली पुष्टि और Git ब्रांच/टैग गेट की मदद से, माइलस्टोन के हिसाब से डेवलपमेंट को मैनेज किया जा सकता है.
इस आर्टफ़ैक्ट को ऐक्सेस करने के लिए साइन इन करें
Build It! सीरीज़ में इस्तेमाल किए गए पूरे आर्टफ़ैक्ट को देखने और कॉपी करने के लिए, अपनी Google डेवलपर प्रोफ़ाइल से साइन इन करें.
डेवलपर प्रोफ़ाइल ज़रूरी है
आपके लिए डेवलपर प्रोफ़ाइल बनाने की सुविधा उपलब्ध नहीं है. अपने Workspace एडमिन को इस सुविधा को चालू करने के लिए कहें.
डेवलपर प्रोफ़ाइल बनाएं
Build It! के सभी प्रॉम्प्ट और आर्टफ़ैक्ट अनलॉक करने के लिए, बिना किसी शुल्क के Google डेवलपर प्रोफ़ाइल बनाएं.
अनलॉक करने के लिए Builder Central में शामिल हों
एक क्लिक में बिल्डर मेंबर का बैज मुफ़्त में पाएं. इससे आपको Build It! के सभी प्रॉम्प्ट और आर्टफ़ैक्ट का ऐक्सेस मिलेगा.
स्थिति: मंज़ूरी मिल गई है और लागू करने के लिए तैयार है
टारगेट ऑडियंस: ऑटोनॉमस एआई डेवलपर एजेंट और ह्यूमन प्रोजेक्ट लीड
साथ में दिए गए दस्तावेज़: डेटा आर्किटेक्चर की खास जानकारी, क्लाइंट आर्किटेक्चर की खास जानकारी, एआई ट्रेनर एजेंट की खास जानकारी
कारोबार के बारे में कम शब्दों में बताने वाली खास जानकारी और उसे लागू करने की रणनीति
इस प्लान में, स्मार्ट फ़िटनेस ऐप्लिकेशन को पूरी तरह से बनाने का तरीका बताया गया है. इसमें बुनियादी स्कीमा से लेकर प्रोडक्शन के लिए तैयार होने तक की जानकारी शामिल है.
प्रोजेक्ट को पूरा करने का तरीका: माइलस्टोन के हिसाब से काम करना और दो चरणों में पुष्टि करना
एजेंट की तेज़ रफ़्तार और आर्किटेक्चर की सटीक जानकारी के बीच संतुलन बनाए रखने के लिए, यह प्लान फ़ेज़-गेटेड माइलस्टोन फ़्रेमवर्क का इस्तेमाल करता है:
- माइलस्टोन के अंदर अपने-आप काम करना: लागू करने वाला एजेंट, हर माइलस्टोन के चरणों को पूरा करने के लिए लगातार काम करता है. वह कोड लिखता है, बिल्ड को एक्ज़ीक्यूट करता है, कंपाइलर की गड़बड़ियों को ठीक करता है, और समस्याओं को खुद ठीक करता है. इसके लिए, इंसानों को हर छोटी-छोटी चीज़ को मैनेज करने की ज़रूरत नहीं पड़ती.
- पहले लेवल की पुष्टि — ऑटोनॉमस एजेंट प्री-गेट बैरियर: किसी व्यक्ति से साइन-ऑफ़ का अनुरोध करने से पहले, एजेंट को कंपाइलर की जांच करनी होगी, बैकएंड टेस्ट स्क्रिप्ट को चलाना होगा, और Google Antigravity Autonomous Browser Verification (Chrome DevTools का इस्तेमाल करके) को लॉन्च करना होगा. इससे, मोबाइल उपयोगकर्ता के असल इंटरैक्शन को सिम्युलेट किया जा सकेगा, आसान अंग्रेज़ी में टेस्ट केस चलाए जा सकेंगे, डीओएम की स्थिति की जांच की जा सकेगी, और स्क्रीनशॉट कैप्चर किए जा सकेंगे.
- दूसरे लेवल की पुष्टि — ह्यूमन गेटकीपर चेकपॉइंट: एजेंट की ऑटोमेटेड जांच पूरी होने के बाद, ह्यूमन गेटकीपर दो मिनट की चेकलिस्ट की समीक्षा करता है. इसमें यूएक्स के अनुभव, कारोबार के अलाइनमेंट, और डेटा के रखरखाव की पुष्टि की जाती है. इसके बाद ही, अगले माइलस्टोन पर जाने की अनुमति दी जाती है.
वर्शन कंट्रोल और Git टैगिंग प्रोटोकॉल
आपदा के बाद डेटा की बहाली, कोड रिव्यू के दौरान अंतर को साफ़ तौर पर दिखाने, और माइलस्टोन के दौरान होने वाली गड़बड़ियों को कम करने के लिए, एजेंट को Git प्रोटोकॉल का सख्ती से पालन करना चाहिए:
- ब्रांचिंग की रणनीति:
main: सुरक्षित की गई ब्रांच. यहां सिर्फ़ वे माइलस्टोन रिलीज़ मर्ज की जाती हैं जिन्हें किसी व्यक्ति ने मंज़ूरी दी हो.- माइलस्टोन फ़ीचर ब्रांच: हर माइलस्टोन के लिए अलग ब्रांच (
feat/m1-scaffolding-typesसेfeat/m6-pwa-productionतक).
- प्री-गेट कमिट सेरेमनी:
git add -A git commit -m "feat(mX): complete milestone X tasks and pre-gate verifications" - Human Gatekeeper Diff Review:
git diff main..HEAD # or across gates: git diff gate-[N-1]-approved..HEAD - गेट अप्रूवल और माइलस्टोन टैगिंग:
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" - रोलबैक और आपदा के बाद डेटा की बहाली:
git checkout main git branch -D feat/mX-... git checkout -b feat/mX-... gate-[N-1]-approved
प्राइमरी आर्किटेक्चर डिपेंडेंसी ग्राफ़
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}माइलस्टोन 1: प्रोजेक्ट स्कैफ़ोल्डिंग, कोर टाइप, और डेटाबेस लेयर
मकसद: रिपॉज़िटरी का फ़ाउंडेशन, TypeScript डोमेन के सख्त कॉन्ट्रैक्ट, और Firebase SDK टूल के कनेक्शन सेट अप करना. साथ ही, स्टैटिक एक्सरसाइज़ एनसाइक्लोपीडिया को सीड करना.
- टास्क 1.0: Git ब्रांच को शुरू करना —
feat/m1-scaffolding-typesबनाएं और उस पर स्विच करें. - टास्क 1.1: प्रोजेक्ट स्कैफ़ोल्डिंग और टूलचेन सेटअप — Next.js 19 (ऐप्लिकेशन राऊटर) को TypeScript स्ट्रिक्ट मोड, Tailwind CSS v4, Tailwind वैरिएंट, Lucide React, Zustand, TanStack Query, Firebase SDK टूल, Google जनरेटिव एआई SDK टूल, Recharts, और PWA बेसलाइन के साथ शुरू करें.
- टास्क 1.2: कैननिकल TypeScript डोमेन टाइप डेफ़िनिशन — डेटा आर्किटेक्चर की खास जानकारी से पूरी तरह मैच करने वाला
src/types/मॉड्यूल (exercise.ts,plan.ts,session.ts,profile.ts,chat.ts,pr.ts) बनाएं. - टास्क 1.3: Firebase Client और Admin SDK सेटअप —
src/lib/firebase/client.tsऔरsrc/lib/firebase/admin.tsलागू करें. - टास्क 1.4: एक्सरसाइज़ एन्साइक्लोपीडिया सीडिंग स्क्रिप्ट — कैननिकल स्लग और मेटाडेटा के साथ
/exercisesको सीड करने के लिए,scripts/seed-exercises.tsबनाएं. - टास्क 1.5: Firestore के नियम और इंडेक्स —
firestore.rulesऔरfirestore.indexes.jsonको डिप्लॉय करें.
लेयर 1 और लेयर 2 की पुष्टि (गेट 1): npx tsc --noEmit, npm run lint, और npx ts-node scripts/seed-exercises.ts चलाएं; gate-1-approved को टैग करने से पहले, git diff main..HEAD की जांच करें और सीड किए गए Firestore दस्तावेज़ों की पुष्टि करें.
माइलस्टोन 2: बैकएंड एपीआई रूट हैंडलर और एआई इंजन पाइपलाइन
मकसद: वर्कआउट लॉग करने और Gemini एआई कोचिंग पाइपलाइन के लिए, सर्वर रूट हैंडलर लागू करना. इसमें कॉन्टेक्स्ट के लिए कैश मेमोरी, मेमोरी म्यूटेशन हैंडलिंग, और स्टेज किए गए प्रपोज़ल शामिल हैं.
- टास्क 2.0: Git ब्रांच को शुरू करना —
mainसेfeat/m2-backend-apisबनाएं और उस पर स्विच करें. - टास्क 2.1: Authentication Middleware Helper — Firebase आईडी टोकन की पुष्टि करने के लिए,
src/lib/auth/server-auth.tsको लागू करें. - टास्क 2.2: कसरत को लॉग करने वाला एंडपॉइंट (
POST /api/workouts/log) — सेशन के वॉल्यूम का हिसाब लगाएं, Brzycki 1RM फ़ॉर्मूला लागू करें, पीआर को अपसर्ट करें, लॉग को सेव करें, और शेड्यूल किए गए दिन कोcompletedके तौर पर मार्क करें. - टास्क 2.3: Gemini के लिए कॉन्टेक्स्ट को कैश मेमोरी में सेव करने की सुविधा और डाइनैमिक प्रॉम्प्ट असेंबली — सिस्टम के मुख्य निर्देशों और डाइनैमिक रनटाइम कॉन्टेक्स्ट असेंबली के साथ
cachedContents.createसेट अप करें. - टास्क 2.4: यूनिफ़ाइड चैट एंडपॉइंट (
POST /api/coach/chat) — स्ट्रक्चर्ड JSON स्कीमा आउटपुट लागू करें,weekly_chatsमें ड्यूअल-राइट करें, और स्टेज्ड म्यूटेशन आइसोलेशन लागू करें. - टास्क 2.5: ऑटोनोमस मेमोरी म्यूटेशन प्रोसेसर —
memory_mutations(CREATE,UPDATE,DELETE) को/users/{userId}/profile/mainपर लागू करें. - टास्क 2.6: सिर्फ़ पढ़ने के लिए उपलब्ध ऐनलिटिकल क्वेरी टूल —
get_historical_exercise_logs,get_volume_trends, औरget_pr_recordsको लागू करें.
लेयर 1 और लेयर 2 की पुष्टि (गेट 2): npx ts-node scripts/test-api-routes.ts चलाएं, स्टेज किए गए म्यूटेशन आइसोलेशन की पुष्टि करें, कैश मेमोरी में सेव की गई लेटेंसी (<2.5 सेकंड) की जांच करें, और gate-2-approved को टैग करें.
तीसरा लक्ष्य: क्लाइंट स्टेट इन्फ़्रास्ट्रक्चर और कोर जिम-फ़्लोर ट्रैकर
मकसद: ऐप्लिकेशन शेल, हमेशा दिखने वाला बॉटम डॉक, लोकल Zustand और TanStack Query स्टेट आर्किटेक्चर, और हाई-स्टेक /workout/active जिम-फ़्लोर एक्ज़ीक्यूशन व्यू बनाना.
- टास्क 3.0: Git ब्रांच को शुरू करना —
feat/m3-client-state-trackerबनाएं औरmainसे इस पर स्विच करें. - तीसरा टास्क: ऐप्लिकेशन शेल और परसिस्टेंट नेविगेशन —
<AppContainer />और<BottomNavigationBar />को लागू करें.इसके लिए, 48dp के पांच टैक्टाइल टैप टारगेट और डाइनैमिक सेंटर बटन का इस्तेमाल करें. - टास्क 3.2: क्लाइंट स्टेट मैनेजमेंट और स्टेप-ग्राफ़ फ़्लैटनर —
useActiveSessionStore(Zustand +localStorage) और स्टेप-ग्राफ़ फ़्लैटनर एल्गोरिदम को लागू करें. - टास्क 3.3: फिर से इस्तेमाल किए जा सकने वाले वर्कआउट ब्लॉक कॉम्पोनेंट कैटलॉग —
<WorkoutHeader />,<WorkoutExerciseSummary />,<WorkoutBlock />,<ExerciseCard />,<EmptyDayPlaceholder />, और<ModifyWithCoachCard />को लागू करें. - टास्क 3.4: हर दिन के वर्कआउट की झलक दिखाने वाले व्यू —
/todayऔर/workouts/:dayके लिएDailyWorkoutViewलागू करें. - तीसरा टास्क, पांचवां सब-टास्क: कसरत की जानकारी दिखाने वाली स्क्रीन (
/workout/active) — स्टॉपवॉच हेडर,<CurrentSetTargetCard />(<16 मि॰से॰ ऑप्टिमिस्टिक यूआई),<ActiveRestTimerDock />,<ExerciseSetsTable />,<SwapExerciseModal />, और<FinishConfirmationModal />को लागू करें. - टास्क 3.6: कसरत की जानकारी देने वाले एनसाइक्लोपीडिया व्यू (
/exercises/:exerciseId) को लागू करना — अपने-आप लूप होने वाले म्यूट वीडियो<ExerciseVideoPlayer />, टारगेट की गई मांसपेशियों, कसरत के चरणों, और कसरत करने के सही तरीके से जुड़ी सलाह को लागू करें.
लेयर 1 और लेयर 2 की पुष्टि (गेट 3): Chrome DevTools के मोबाइल व्यूपोर्ट (390x844) में सुइट 1, 2, 5, और 6 को चलाएं. साथ ही, localStorage को फिर से लोड करने की सुविधा की पुष्टि करें और gate-3-approved को टैग करें.
माइलस्टोन 4: एआई कोच का बातचीत वाला हब और स्टेज के हिसाब से प्रस्ताव देने वाला इंटरफ़ेस
मकसद: बातचीत के ज़रिए कोचिंग देने वाला इंटरफ़ेस (/coach) लागू करना. इसमें बोली को लिखाई में बदलने की सुविधा, प्रॉम्प्ट चिप के सुझाव, कॉन्टेक्स्ट बैनर अटैचमेंट, और इंटरैक्टिव स्टेज्ड प्रपोज़ल कार्ड शामिल हैं.
- टास्क 4.0: Git ब्रांच को शुरू करना —
mainसेfeat/m4-coach-chatबनाएं और उस पर स्विच करें. - टास्क 4.1: चैट की स्थिति और रीयल-टाइम में सिंक करने की सुविधा — Firestore
onSnapshotकी सदस्यता के साथuseCoachChatStoreको लागू करें. - टास्क 4.2: कोच चैट व्यू लेआउट और मैसेज स्ट्रीम —
<CoachHeader />,<ChatMessageList />,<ChatBubble />, और कोच थिंकिंग स्पिनर को लागू करें. - टास्क 4.3: कॉन्टेक्स्ट अटैचमेंट और प्रॉम्प्ट चिप —
<ContextBanner />,<ContextualPromptsBar />,<ChatInputBar />, और<SpeechToTextButton />को लागू करें. - टास्क 4.4: Staged Proposal Card Implementation —
UPDATE_DAYऔरUPDATE_WEEKdiffs के लिए<StagedProposalCard />लागू करें. - टास्क 4.5: निगरानी में काम करने वाले एआई मॉडल के सुझाव को सेव करना —
proposal.dataको Firestoreweekly_plansमें सिर्फ़ तब सेव करें, जब[Accept Plan]पर टैप किया जाए.
लेयर 1 और लेयर 2 की पुष्टि (गेट 4): Chrome DevTools में Suite 4 को चलाएं. साथ ही, स्टेज किए गए म्यूटेशन आइसोलेशन और [Accept Plan] कमिट की पुष्टि करें. इसके बाद, gate-4-approved को टैग करें.
माइलस्टोन 5: शेड्यूल में बदलाव, प्रोग्रेस के आंकड़े, और प्रोफ़ाइल सेटिंग
मकसद: ऐप्लिकेशन के बाकी व्यू पूरे करना: हफ़्ते का शेड्यूल (/week), प्रोग्रेस और आंकड़े (/progress), और प्रोफ़ाइल/सेटिंग (/settings). इसके लिए, तीन लेवल वाले मेमोरी मैनेजमेंट का इस्तेमाल करना.
- टास्क 5.0: Git ब्रांच को शुरू करना —
mainसेfeat/m5-schedule-progress-settingsबनाएं और उस पर स्विच करें. - टास्क 5.1: हफ़्ते के शेड्यूल का व्यू (
/week) —<WeekHeader />,<WeeklyStatsSummary />,<DayScheduleCard variant="normal" />, और<ModifyWeekWithCoachCard />को लागू करें. - टास्क 5.2: प्रोग्रेस और Analytics व्यू (
/progress) —<PRShowcaseBanner />, Recharts<VolumeProgressChartCard />(4W | 3M | 1Y),<AllTimeStatsGrid />, और<WorkoutHistorySection />को लागू करें. - टास्क 5.3: प्रोफ़ाइल, सेटिंग, और एआई की यादों की स्क्रैपबुक व्यू (
/settings) —[🗑]को मिटाने के साथ-साथ<UserProfileCard />,<EquipmentSelectorCard />,<PreferencesGroup />, और<MemoryTierViewerCard />को लागू करें.
लेयर 1 और लेयर 2 की पुष्टि (गेट 5): Chrome DevTools में सुइट 3, 7, और 8 को चलाएं. साथ ही, चार्ट टॉगल और मेमोरी मिटाने की पुष्टि करें. इसके बाद, gate-5-approved को टैग करें.
छठी उपलब्धि: प्रोडक्शन को बेहतर बनाना, PWA ऑफ़लाइन बफ़र, और फ़ुल मैट्रिक्स साइन-ऑफ़
मकसद: ऐप्लिकेशन को जिम के असल माहौल के लिए तैयार करना: ऑफ़लाइन पीडब्ल्यूए ऐसेट कैश मेमोरी को कॉन्फ़िगर करना, ऑफ़लाइन वर्कआउट लॉग सिंक को लागू करना, और 42-टेस्ट वाले पूरे प्लेन-इंग्लिश वेरिफिकेशन मैट्रिक्स को लागू करना.
- टास्क 6.0: Git ब्रांच को शुरू करना —
mainसेfeat/m6-pwa-productionबनाएं और उस पर स्विच करें. - टास्क 6.1: पीडब्ल्यूए सर्विस वर्कर और ऐसेट कैशिंग — Serwist / next-pwa सर्विस वर्कर और स्टैंडअलोन पीडब्ल्यूए मेनिफ़ेस्ट को फ़ाइनलाइज़ करें.
- टास्क 6.2: Basement Gym के लिए ऑफ़लाइन सिंक बफ़र —
POST /api/workouts/logके लिए, IndexedDB/localStorage में ऑफ़लाइन सूची लागू करें. साथ ही, इंटरनेट से फिर से कनेक्ट होने पर, सूची में मौजूद डेटा को अपने-आप सिंक होने की सुविधा चालू करें. - टास्क 6.3: गड़बड़ी की सीमाएं और फ़ॉलबैक व्यू — 404 फ़ॉलबैक, अमान्य दिन के फ़ॉलबैक, और अमान्य कसरत के फ़ॉलबैक की पुष्टि करें.
- टास्क 6.4: फ़ुल मैट्रिक्स एक्ज़ीक्यूशन और परफ़ॉर्मेंस ऑडिट — सुइट 1 से 8 में मौजूद, आसान अंग्रेज़ी वाले सभी 42 टेस्ट केस चलाएं. साथ ही, Lighthouse ऑडिट चलाएं (परफ़ॉर्मेंस >90, एलसीपी <2.5 सेकंड, टच टारगेट ≥48dp).
लेयर 1 और लेयर 2 की पुष्टि (गेट 6): npm run build चलाएं, Chrome DevTools में ऑफ़लाइन नेटवर्क मोड को सिम्युलेट करें, पुष्टि करें कि सभी 42/42 टेस्ट सुइट पास हो गए हैं, और v1.0.0 को टैग करें.
मानवीय गेटकीपर के लिए, पुष्टि करने के गेट की खास जानकारी
| गेट | विषय | Git ब्रांच और रिलीज़ टैग | एजेंट से मिलने वाले मुख्य फ़ायदे | मैन्युअल तरीके से पुष्टि करने में लगने वाला अनुमानित समय |
|---|---|---|---|---|
| गेट 1 | टाइप, डीबी स्कीमा, और सीड | feat/m1-scaffolding-typesटैग: gate-1-approved |
src/types/, सीड स्क्रिप्ट को एक्ज़ीक्यूट किया गया, क्लीन कंपाइल |
~2 मिनट (डिफ़ और सीड किए गए डीबी की जांच करें) |
| गेट 2 | बैकएंड एपीआई और Gemini पाइपलाइन | feat/m2-backend-apisटैग: gate-2-approved |
/api/workouts/log, /api/coach/chat, इंटिग्रेशन टेस्ट |
~तीन मिनट (एपीआई टेस्ट स्क्रिप्ट चलाएं और स्कीमा की जांच करें) |
| गेट 3 | क्लाइंट स्टेट और ऐक्टिव ट्रैकर | feat/m3-client-state-trackerटैग: gate-3-approved |
Shell, /today, /workout/active, ब्राउज़र टेस्ट पास किया गया |
~तीन मिनट (कसरत के कंट्रोल पर टैप करें और स्टॉपवॉच की जांच करें) |
| गेट 4 | कोच चैट और स्टेज्ड प्रपोज़ल | feat/m4-coach-chatटैग: gate-4-approved |
/coach, <StagedProposalCard />, प्रस्ताव को स्वीकार किया गया |
~तीन मिनट (कोच से चैट करें, [Accept Plan] की जांच करें) |
| गेट 5 | शेड्यूल, आंकड़े, और सेटिंग | feat/m5-schedule-progress-settingsटैग: gate-5-approved |
/week, /progress, /settings, मेमोरी मैनेजर |
~3 मिनट (चार्ट की समीक्षा करना और टेस्ट मेमोरी मिटाना) |
| गेट 6 | पीडब्ल्यूए का ऑफ़लाइन सिंक और फ़ुल रिलीज़ | feat/m6-pwa-productionटैग: v1.0.0 |
प्रोडक्शन बिल्ड, पीडब्ल्यूए कैश मेमोरी, 42 में से 42 टेस्ट पास | ~5 मिनट (फ़ाइनल रिपोर्ट की समीक्षा करना और मोबाइल पर जांच करना) |