แอปฟิตเนสอัจฉริยะ: ข้อกำหนดสถาปัตยกรรมไคลเอ็นต์
Artifactนี่คืออาร์ติแฟกต์ที่ใช้ในตอนที่ 3: เพิ่มสมองให้แอป และตอนที่ 4: แผนการติดตั้งใช้งานแอปแบบไม่เขียนโค้ด คุณสามารถใช้ข้อกำหนดนี้เป็นข้อมูลอ้างอิงสำหรับมุมมองฟรอนท์เอนด์, คอมโพเนนต์ UI ที่นำกลับมาใช้ใหม่ได้, การจัดการสถานะไคลเอ็นต์ และกรอบการทดสอบภาษาอังกฤษแบบเข้าใจง่าย
ลงชื่อเข้าใช้เพื่อเข้าถึงอาร์ติแฟกต์นี้
ลงชื่อเข้าใช้ด้วยโปรไฟล์นักพัฒนาแอปของ Google เพื่อดูและคัดลอกอาร์ติแฟกต์ทั้งหมดที่ใช้ในซีรีส์ Build It!
ต้องมีโปรไฟล์นักพัฒนาแอป
คุณไม่มีสิทธิ์สร้างโปรไฟล์นักพัฒนาแอป แจ้งให้ผู้ดูแลระบบ Workspace เปิดใช้ฟีเจอร์นี้
สร้างโปรไฟล์นักพัฒนาซอฟต์แวร์
สร้างโปรไฟล์นักพัฒนาแอปของ Google ฟรีเพื่อปลดล็อกพรอมต์และอาร์ติแฟกต์ทั้งหมดของ Build It!
เข้าร่วม Builder Central เพื่อปลดล็อก
รับป้ายการเป็นสมาชิก Builder ฟรีในคลิกเดียวเพื่อปลดล็อกพรอมต์และอาร์ติแฟกต์ทั้งหมดของ Build It!
สถานะ: พร้อมสำหรับเซสชันการวางแผน (กำลังร่างด้วยเอกสารประกอบการวางแผนของลูกค้า)
เอกสารประกอบ: ข้อกำหนดสถาปัตยกรรมข้อมูล
เป้าหมายสถาปัตยกรรม: การสร้างฟรอนท์เอนด์ใหม่ที่สะอาดตา บำรุงรักษาได้ เป็นโมดูล และทดสอบได้ของต้นแบบฟิตเนสอัจฉริยะของ AI Studio
0. สแต็กทางเทคนิคหลักและมาตรฐานทางวิศวกรรม
- เฟรมเวิร์กรันไทม์: Next.js (App Router, React 19) + การแคชเนื้อหาออฟไลน์ของ Progressive Web App (PWA)
- สถาปัตยกรรมการจัดรูปแบบ: Tailwind CSS v4 + Tailwind Variants (สำหรับการจัดรูปแบบคอมโพเนนต์เชิงกำหนด) + Lucide React (ไอคอน)
- แผนกสถานะลูกค้า:
- Zustand (เซสชันในเครื่อง): จัดการสถานะการออกกำลังกายที่ไม่แน่นอน (
useActiveSessionStore) ตัวจับเวลา นาฬิกาจับเวลา บัฟเฟอร์เซ็ตที่ใช้งานอยู่ และลำดับขั้นตอนที่คำนวณไว้ล่วงหน้า ซิงค์กับlocalStorageเพื่อกู้คืนการล็อกโทรศัพท์แล้ว - TanStack Query (สถานะเซิร์ฟเวอร์): จัดการการแคชเอกสาร Firestore, การตรวจสอบความถูกต้องอีกครั้งในเบื้องหลัง และการอัปเดตในเชิงบวกสำหรับ
weekly_plans,user_profiles,prsและworkout_logs
- Zustand (เซสชันในเครื่อง): จัดการสถานะการออกกำลังกายที่ไม่แน่นอน (
- การแสดงภาพแผนภูมิ: Recharts (จัดรูปแบบด้วยโทเค็นโหมดมืดที่กำหนดเองสำหรับยิม)
- การตรวจสอบสิทธิ์: การตรวจสอบสิทธิ์ Firebase ที่มีส่วนหัวการตรวจสอบสิทธิ์โทเค็นสำหรับผู้ถือซึ่งส่งไปยังปลายทางเซิร์ฟเวอร์ทั้งหมด
1. หลักการและหลักการออกแบบของฟรอนท์เอนด์
- หลักสรีรศาสตร์ที่เน้นการใช้งานในยิม: ออกแบบมาเพื่อการใช้งานด้วยมือเดียวที่สัมผัสได้ง่ายขณะออกกำลังกายแม้ว่ามือจะเปียกเหงื่อ เป้าหมายการแตะขนาดใหญ่ (อย่างน้อย 48x48dp) ความสามารถในการอ่านที่มีคอนทราสต์สูง และการพิมพ์ที่จำเป็นน้อยที่สุด
- UI ที่ตอบสนองทันทีและความยืดหยุ่นเมื่อออฟไลน์: การบันทึกเซ็ต การเริ่มตัวจับเวลาพัก และการสลับท่าออกกำลังกายต้องตอบสนองทันที (<16 มิลลิวินาที) ใน UI การซิงค์ในเบื้องหลังจะจัดการความต่อเนื่องของเซิร์ฟเวอร์กับ
POST /api/workouts/logโดยไม่บล็อกผู้ใช้ - การแยกความรับผิดชอบอย่างเข้มงวด: คอมโพเนนต์ Dumb/Presentational จะรับข้อมูลและส่งเหตุการณ์โดยใช้พร็อพ ส่วนมุมมองคอนเทนเนอร์อัจฉริยะจะจัดการตรรกะทางธุรกิจ พื้นที่เก็บข้อมูลสถานะ และการประสานงาน API
- UX การเปลี่ยนแปลงแบบแบ่งระยะ: ข้อเสนอที่โค้ช AI (
POST /api/coach/chat) สร้างขึ้นจะแสดงผลเป็นการ์ดตัวอย่างแบบแบ่งระยะที่โต้ตอบได้ พร้อมการควบคุม [ยอมรับแผน] และ [แก้ไข] ที่ชัดเจนก่อนที่จะยืนยันการเปลี่ยนแปลงสถานะแอปพลิเคชัน - คุณภาพที่ขับเคลื่อนด้วยพฤติกรรม: ทุกหน้า คอมโพเนนต์ และการโต้ตอบจะจับคู่กับกรอบการทดสอบภาษาอังกฤษแบบธรรมดาที่กำหนดพฤติกรรมที่คาดหวังไว้อย่างชัดเจน
2. การนำทางแอปพลิเคชันและลำดับชั้นการแสดงผล
| เส้นทางของเส้นทาง | ชื่อข้อมูลพร็อพเพอร์ตี้ | วัตถุประสงค์หลัก | องค์ประกอบสำคัญที่มีอยู่ |
|---|---|---|---|
/ |
การเปลี่ยนเส้นทางระดับรูท | เปลี่ยนเส้นทางไปยัง /today ทันที |
(การเปลี่ยนเส้นทางเราเตอร์) |
/today |
ตัวอย่างการออกกำลังกายวันนี้ | มุมมองเริ่มต้น เปลี่ยนเป็นวันปัจจุบันของสัปดาห์โดยอัตโนมัติและแสดงตัวอย่างการออกกำลังกายของวันนี้ | <BackButton />, <WorkoutHeader />, <CoachNoteCard />, <WorkoutExerciseSummary />, <WorkoutBlock />, <ExerciseCard />, <EmptyDayPlaceholder />, <ModifyWithCoachCard /> |
/workouts/:day |
ตัวอย่างการออกกำลังกายประจำวัน | แสดงตัวอย่างการออกกำลังกายสำหรับวันใดวันหนึ่งในสัปดาห์ (เช่น /workouts/monday, /workouts/thursday) |
<BackButton />, <WorkoutHeader />, <CoachNoteCard />, <WorkoutExerciseSummary />, <WorkoutBlock />, <ExerciseCard />, <EmptyDayPlaceholder />, <ModifyWithCoachCard /> |
/workout/active |
เครื่องมือติดตามเซสชันที่ใช้งานอยู่ | หน้าจอการออกกำลังกายที่มีความสำคัญสูง (เซ็ต จำนวนครั้ง ตัวจับเวลา) แถบนำทางด้านล่างจะยังคงแสดงอยู่ | <ActiveSessionStickyHeader />, <ActiveExerciseCardHeader />, <CoachTipCard />, <CurrentSetTargetCard />, <SetNavigationRow />, <ExerciseSetsTable />, <ActiveRestTimerDock />, <SessionExerciseOverview />, <ActiveSessionControlsDock />, <SwapExerciseModal />, <FinishConfirmationModal /> |
/week |
ตารางการฝึกอบรม / มุมมองสัปดาห์ | ภาพรวมกำหนดการแบบเต็ม 7 วันพร้อมข้อมูลรวมปริมาณ/เวลาแบบรายสัปดาห์ | <WeekHeader /> <WeeklyStatsSummary /> <DayScheduleCardList /> <DayScheduleCard /> <ModifyWeekWithCoachCard /> |
/coach |
แชทกับโค้ช AI | การโค้ชแบบสนทนาด้วยชิปตามบริบทและข้อเสนอการออกกำลังกายแบบเป็นขั้นเป็นตอน | <CoachHeader />, <ChatMessageList />, <ChatBubble />, <StagedProposalCard />, <ContextualPromptsBar />, <ChatInputDock />, <ContextBanner />, <ChatInputBar />, <SpeechToTextButton /> |
/progress |
ความคืบหน้าและข้อมูลวิเคราะห์ | บันทึกการฝึกที่ผ่านมา ความสำเร็จ PR และแผนภูมิปริมาณ | <ProgressHeader />, <PRShowcaseBanner />, <VolumeProgressChartCard />, <AllTimeStatsGrid />, <WorkoutHistorySection />, <HistorySessionCard />, <EmptyHistoryPlaceholder /> |
/settings |
โปรไฟล์ผู้ใช้และค่ากำหนด | โปรไฟล์อุปกรณ์ การแจ้งเตือน และการจัดการหน่วยความจำ 3 ระดับ | <SettingsHeader />, <UserProfileCard />, <EquipmentSelectorCard />, <EquipmentToggleChip />, <PreferencesGroup />, <MemoryTierViewerCard />, <MemoryItemCard />, <AccountActionsGroup /> |
/exercises/:exerciseId |
รายละเอียดสารานุกรมการออกกำลังกาย | คู่มือการออกกำลังกายที่ทำ Deep Link ได้ (เช่น /exercises/incline-db-bench-press) พร้อมเคล็ดลับเกี่ยวกับวิดีโอและท่าทาง |
<BackButton /> <ExerciseVideoPlayer /> <TargetMusclesCard /> <HowToPerformCard /> <FormTipsCard /> |
3. ข้อกำหนดของหน้าเว็บและยอดดู
ดู: DailyWorkoutView (/today และ /workouts/:day)
- วัตถุประสงค์: แสดงโปรแกรมการฝึกที่กำหนดเวลาไว้สำหรับวันหนึ่งๆ ซึ่งรวมถึงจุดเน้นของการออกกำลังกาย ระยะเวลา การกระจายภาระกล้ามเนื้อเป้าหมาย บันทึกของโค้ช บล็อกสเตรทเซ็ต และบล็อกซูเปอร์เซ็ต พร้อมสถานะว่างเปล่าที่ชัดเจนเมื่อไม่มีการออกกำลังกายที่กำหนดเวลาไว้
- โครงสร้างภาพ
- ด้านบน:
<BackButton label="Back to Week" targetRoute="/week" /> - ส่วนหัว: ชื่อบรรทัดเดียว (
"Today"หรือวันในสัปดาห์) พร้อมป้าย"✓ Completed"แบบมีเงื่อนไข แถบระยะเวลา ("⏱ 50 min") และแถบเปอร์เซ็นต์ความหนักของกล้ามเนื้อเป้าหมาย - หมายเหตุจากโค้ช: การ์ดคำแนะนำตามบริบทพร้อมไอคอนและสีขอบสีเขียว
- เนื้อหา: รายการบล็อกการออกกำลังกายที่เลื่อนได้โดยใช้
<WorkoutExerciseSummary />(เซ็ตปกติหรือซูเปอร์เซ็ตที่มีป้ายborder-left: 3px solid #a3e635และ🔁 SUPERSET BLOCK) - สถานะว่างเปล่า:
<EmptyDayPlaceholder message="Nothing scheduled for this day" /> - การดำเนินการในส่วนท้ายด้านล่าง:
<ModifyWithCoachCard />(นำไปยัง/coach?day=:day)
- ด้านบน:
ดู: WeekScheduleView (/week)
- วัตถุประสงค์: แสดงภาพรวมกำหนดการฝึกซ้อม 7 วันแบบสมบูรณ์ ซึ่งรวมถึงเมตริกปริมาณ/เวลาการฝึกซ้อมรายสัปดาห์ระดับสูง รายการวันที่ออกกำลังกายที่คัดสรรมา (กรองวันที่ไม่ได้กำหนดเวลา/วันที่พักออกอย่างเคร่งครัด) และทางลัดโดยตรงเพื่อปรับปรุงแผนรายสัปดาห์ด้วยโค้ช AI
- โครงสร้างภาพ:
<WeekHeader />,<WeeklyStatsSummary />3 คอลัมน์ (เวลาทั้งหมด, ปริมาณทั้งหมด, ความถี่), รายการวันที่กำหนดเวลาโดยใช้<DayScheduleCard variant="normal" />(พร้อมป้ายTODAYสีเขียวนีออนในวันปัจจุบัน) และ<ModifyWeekWithCoachCard />(เส้นทางไปยัง/coach?context=week)
ดู: CoachChatView (/coach)
- วัตถุประสงค์: ศูนย์กลางการโค้ชแบบสนทนาด้วย Agent เทรนเนอร์ Gemini ให้คำแนะนำในการฝึกซ้อมที่สร้างแรงบันดาลใจและเป็นเชิงกลยุทธ์ รองรับการพิมพ์ตามคำบอกด้วยการแปลงเสียงพูดเป็นข้อความ และแสดงผลการปรับการออกกำลังกายแบบแบ่งระยะแบบมีมนุษย์ร่วมพร้อมการควบคุมการยอมรับที่ชัดเจน
- องค์ประกอบภาพ:
<CoachHeader />,<ChatMessageList />แบบเลื่อนได้ (<ChatBubble />และ<StagedProposalCard />),<ContextualPromptsBar />แบบมีเงื่อนไข และ<ChatInputDock />แบบตรึง (<ContextBanner />พร้อม[✕]ปิด +<ChatInputBar />+<SpeechToTextButton />)
ดู: ExerciseDetailView (/exercises/:exerciseId)
- วัตถุประสงค์: รายการสารานุกรมที่ทำ Deep Link ได้ซึ่งแสดงวิดีโอสาธิตแบบปิดเสียงที่วนซ้ำอัตโนมัติ (
<ExerciseVideoPlayer />) ป้ายกล้ามเนื้อเป้าหมายหลักเทียบกับรอง (<TargetMusclesCard />) วิธีการออกกำลังกายแบบทีละขั้นตอนตามลำดับ (<HowToPerformCard />) และเคล็ดลับเกี่ยวกับท่าทาง (<FormTipsCard />)
ดู: ActiveWorkoutView (/workout/active)
- วัตถุประสงค์: หน้าจอการออกกำลังกายที่มีความเสี่ยงสูงและการบันทึกเซ็ต จัดการสถานะนาฬิกาจับเวลาของเซสชันแบบเรียลไทม์ เป้าหมายเซ็ตปัจจุบัน ข้อมูลจำนวนครั้ง/น้ำหนักที่ป้อน การทำเครื่องหมายว่าเสร็จสมบูรณ์ทันที (<16 มิลลิวินาที) การสลับซูเปอร์เซ็ตอัตโนมัติ การนับถอยหลังของตัวจับเวลาการพักพร้อมการตอบสนองการสัมผัส/เสียง การสลับท่าออกกำลังกาย และการบันทึกข้อมูลขั้นสุดท้ายลงใน
POST /api/workouts/log - องค์ประกอบภาพ:
<ActiveSessionStickyHeader />,<ActiveExerciseCardHeader />,<CoachTipCard />,<CurrentSetTargetCard />,<ActiveRestTimerDock />แบบลอย (+30s,Skip),<SetNavigationRow />,<ExerciseSetsTable />(+ Add Set),<SessionExerciseOverview />,<ActiveSessionControlsDock />แบบตรึง ([⇄ SWAP EXERCISE]+[▶ START WORKOUT]/[⏸ PAUSE]/[▶ RESUME]),<SwapExerciseModal />และ<FinishConfirmationModal />
ดู: ProgressView (/progress)
- วัตถุประสงค์: ติดตามความก้าวหน้าด้านกีฬาเมื่อเวลาผ่านไป ฉลองสถิติส่วนตัวล่าสุด (
<PRShowcaseBanner />) แสดงภาพแนวโน้มปริมาณรายสัปดาห์/รายเดือนด้วย Recharts แบบอินเทอร์แอกทีฟ (<VolumeProgressChartCard />พร้อมปุ่มเปิด/ปิด4W | 3M | 1Y) แสดง<AllTimeStatsGrid />และเก็บเซสชันการออกกำลังกายที่เสร็จสมบูรณ์แล้วในอดีต (<WorkoutHistorySection />/<HistorySessionCard />)
ดู: SettingsView (/settings)
- วัตถุประสงค์: จัดการข้อมูลโปรไฟล์ของนักกีฬา (
<UserProfileCard />) รายการอุปกรณ์ (<EquipmentSelectorCard />/<EquipmentToggleChip />) ค่ากำหนดการออกกำลังกาย (<PreferencesGroup />สำหรับLBS / KGการโต้ตอบการสัมผัส เสียง) และให้การจัดการผู้ใช้ที่โปร่งใสและการลบความทรงจำแบบ 3 ระดับของเทรนเนอร์ AI (<MemoryTierViewerCard />/<MemoryItemCard />)
4. แคตตาล็อกและอินเทอร์เฟซคอมโพเนนต์ที่ใช้ซ้ำได้
สัญญาพร็อพคอมโพเนนต์ TypeScript ที่สำคัญในแอปพลิเคชัน:
// src/components/workout/WorkoutExerciseSummary.tsx
interface WorkoutExerciseSummaryProps {
blocks: Array<{
label?: string;
category?: string;
exercises: Array<{
exercise_id: string; // Canonical slug (e.g. 'incline-db-bench-press')
name: string; // Denormalized display name (e.g. 'Incline DB Bench Press')
target_sets: number;
target_reps: string | number;
rest_seconds?: number;
}>;
}>;
activeExerciseId?: string;
onSelectExercise?: (exerciseId: string) => void;
}
// src/components/week/DayScheduleCard.tsx
interface DayScheduleCardProps {
dayName: string;
dayShort: string;
subtitleLabel?: string;
isToday?: boolean;
title: string;
focusBadge: string;
durationMin: number;
volumeLbs?: number;
targetMuscles: string[];
variant?: 'normal' | 'condensed';
onPress: (dayName: string) => void;
}
// src/components/coach/StagedProposalCard.tsx
interface StagedProposalCardProps {
proposalId: string;
type: 'UPDATE_DAY' | 'UPDATE_WEEK';
targetDay?: string;
summaryDiff: string;
proposalData: any;
isApplied?: boolean;
onAccept: (proposalId: string, data: any) => void;
onModify: (summaryDiff: string) => void;
}
// src/components/workout/CurrentSetTargetCard.tsx
interface CurrentSetTargetCardProps {
setNumber: number;
targetWeightLbs: number;
targetReps: number;
isCompleted: boolean;
onWeightChange: (weight: number) => void;
onRepsChange: (reps: number) => void;
onToggleComplete: () => void;
}5. เมทริกซ์การจัดการสถานะไคลเอ็นต์และโฟลว์ข้อมูล
5.1 นโยบายเกี่ยวกับเวลาในการตอบสนองและการโหลด: เครื่องมือ 2 ความเร็ว
- UI ที่ตอบสนองทันทีในยิม (<16 มิลลิวินาที): การดำเนินการที่ต้องสัมผัสในยิม เช่น การทำเครื่องหมายเซ็ตที่เสร็จแล้ว การเพิ่มน้ำหนัก/จำนวนครั้ง การสลับแท็บ และการเปิด/ปิดอุปกรณ์ จะอัปเดตสถานะในเครื่องและแสดงผลใหม่ภายใน 16 มิลลิวินาที ผู้ใช้จะไม่ถูกบล็อกโดยสัญญาณบอกสถานะการโหลดขณะถือตุ้มน้ำหนัก
- ภาพหมุนและสัญญาณบอกสถานะการโหลดที่ชัดเจนสำหรับการดำเนินการแบบอะซิงโครนัส:
- การสนทนากับโค้ช AI (
POST /api/coach/chat): การส่งข้อความแชทจะแสดงบับเบิลภาพหมุนแสดงการคิดของโค้ชแบบเคลื่อนไหวในสตรีมแชททันทีจนกว่า Gemini จะแสดงคำตอบหรือข้อเสนอการออกกำลังกาย - การเริ่มระบบแบบ Cold Start และการซิงค์เครือข่ายครั้งแรก: คอนเทนเนอร์มุมมองจะแสดงตัวโหลดโครงร่างและภาพหมุนโหลดที่มีคอนทราสต์สูงขณะดึงข้อมูล
weekly_plansหรือhistorical_workouts - การส่งข้อมูลการออกกำลังกาย (
[Finish]): โมดัลยืนยันการเสร็จสิ้นจะแสดงภาพหมุนที่กำลังโหลดอยู่ขณะที่เพย์โหลดเซสชันได้รับการคอมมิตไปยังPOST /api/workouts/logใน Cloud Firestore
- การสนทนากับโค้ช AI (
5.2 สถาปัตยกรรมของ Client Store และขอบเขตโดเมน
| เลเยอร์ร้านค้า | โดเมนสถานะและพร็อพเพอร์ตี้หลัก | นโยบายความต่อเนื่องและแคช | สัญญาแบ็กเอนด์ที่ประสานงานกัน |
|---|---|---|---|
useActiveSessionStore (Zustand) |
sessionState (unstarted, running, paused), elapsedSeconds, currentStepIndex, steps: WorkoutStep[], loggedExercises |
ซิงค์กับ localStorage ทุกวินาทีเพื่อการกู้คืนการล็อก/รีเฟรชโทรศัพท์ที่ปลอดภัย |
ส่งเพย์โหลดที่เสร็จสมบูรณ์ไปยัง POST /api/workouts/log |
useWeeklyPlanQuery (TanStack Query) |
กำหนดการ 7 วันปัจจุบัน, ออบเจ็กต์การออกกำลังกายประจำวัน, บล็อกซูเปอร์เซ็ต, สถานะการทำเสร็จ (scheduled, completed) |
แคชใน TanStack Query (staleTime: 5 min) และดึงข้อมูลล่วงหน้าเมื่อเปิดใช้งาน |
ดำเนินการเมื่อผู้ใช้แตะ [Accept Plan] สำหรับข้อเสนอจาก POST /api/coach/chat |
useCoachChatStore (Zustand + TanStack) |
บับเบิลข้อความตามลำดับเวลา activeContext ชิปพรอมต์ isCoachTyping: boolean ข้อเสนอที่จัดเตรียมไว้ |
ซิงค์กับที่เก็บข้อมูลแชทรายสัปดาห์ของ Firestore โดยใช้การสมัครใช้บริการแบบเรียลไทม์ (onSnapshot) |
ส่งคำค้นหาไปยัง POST /api/coach/chat |
useProgressQuery (TanStack Query) |
ที่เก็บข้อมูลการออกกำลังกายที่ผ่านมา, บอร์ดบันทึก PR (/users/{userId}/prs), ปริมาณรวมทั้งหมด, ตัวกรองกรอบเวลา (4W, 3M, 1Y) |
แคชใน TanStack Query (staleTime: 10 min) |
อัปเดตทันทีเมื่อเซสชันการออกกำลังกายเสร็จสิ้น |
useUserProfileStore (TanStack Query) |
คลังอุปกรณ์, หน่วย (LBS/KG), ปุ่มเปิด/ปิดเสียง/การโต้ตอบการสัมผัส, ความทรงจำที่มีชีวิต 3 ระดับ (หลัก, ทางกายภาพ, ตามสถานการณ์) |
แคชใน TanStack Query พร้อมการซิงค์แบบ 2 ทางกับ Firestore user_profiles |
อัปเดตโดยอัตโนมัติโดยใช้ memory_mutations จาก POST /api/coach/chat |
useExerciseLibraryQuery (TanStack Query) |
รายการสารานุกรมแบบคงที่, URL ของวิดีโอ, กล้ามเนื้อหลัก/รอง, ขั้นตอน, เคล็ดลับเกี่ยวกับท่าทาง | แคชก่อนแบบเชิงรุกที่มี TTL ไม่จำกัด (staleTime: Infinity) |
อ่านอย่างเดียวจากคอลเล็กชัน Firestore exercises ที่เปลี่ยนแปลงไม่ได้ |
5.3 กราฟขั้นบันไดของเซสชันกิจกรรมที่คำนวณไว้ล่วงหน้า
export interface WorkoutStep {
stepIndex: number; // 1-based index (e.g. 1 to 13)
totalSteps: number; // Total sets in the session
blockIndex: number; // Index of block in day plan
blockType: 'straight' | 'superset';
exerciseId: string; // Canonical slug
exerciseName: string; // Display name
setNumber: number; // Set index for this exercise (1, 2, 3...)
targetWeightLbs: number; // Target weight in lbs
targetReps: string | number; // Target reps (e.g. "8-10")
restSecondsAfter: number; // Prescribed rest duration
isCompleted: boolean; // Completion checkmark status
actualWeightLbs?: number; // User entered weight
actualRepsCompleted?: number; // User entered reps
}5.4 เมทริกซ์การกลายพันธุ์และการไหลของข้อมูลแบบต้นทางถึงปลายทาง
| ทริกเกอร์ผู้ใช้ | มุมมองต้นทาง | มีการเปลี่ยนแปลงร้านค้าของลูกค้า | เวลาในการตอบสนองของ UI/สถานะการโหลด | การประสานงานแบ็กเอนด์ | การย้อนกลับ/การจัดการความล้มเหลว |
|---|---|---|---|---|---|
แตะ [✓] ตั้งค่าให้เสร็จสมบูรณ์ |
/workout/active |
useActiveSessionStore |
<16ms (มองโลกในแง่ดี) |
อัปเดตบัฟเฟอร์เซสชันในเครื่องแล้ว ไม่ต้องรอเครือข่าย | การเขียนหน่วยความจำในเครื่องที่มีความคงทนในเครื่องที่เชื่อถือได้ |
แตะ [Finish Workout] |
/workout/active |
useActiveSessionStore, useWeeklyPlanStore, useProgressStore |
ปุ่มแสดงไอคอนหมุนขณะซิงค์ | ส่งไปยัง POST /api/workouts/log ทำเครื่องหมายวัน Firestore เป็น completed |
หากออฟไลน์อยู่ ระบบจะจัดคิวเพย์โหลดไปยังบัฟเฟอร์การซิงค์ในเครื่องและลองอีกครั้งเมื่อเชื่อมต่อใหม่ |
แตะ [Accept Plan] |
/coach |
useWeeklyPlanStore, useCoachChatStore |
แสตมป์ UI ทันที ("✓ Plan Applied") |
คอมมิต proposal.data ไปยัง Firestore weekly_plans |
หากเครือข่ายล้มเหลว การแจ้งเตือนข้อความโทสต์จะแจ้งเตือนผู้ใช้และปุ่มต่างๆ จะยังคงทำงานอยู่เพื่อให้ลองอีกครั้ง |
| ส่งข้อความใน Chat | /coach |
useCoachChatStore, useUserProfileStore |
เพิ่มลูกโป่งมองโลกในแง่ดี + ไอคอนหมุนแสดงการคิดของโค้ช | การโทร POST /api/coach/chat คอมมิตแสดงผล memory_mutations รายการ |
แทนที่ภาพหมุนด้วย "ส่งไม่สำเร็จ แตะเพื่อลองอีกครั้ง" |
| เปิด/ปิดชิปอุปกรณ์ | /settings |
useUserProfileStore |
ปุ่มเปิด/ปิดทันที (<16ms) |
ส่งการเขียนในเบื้องหลังไปยัง Firestore user_profiles |
เปลี่ยนกลับการเลือกชิปและแสดงข้อความ Toast แสดงข้อผิดพลาดหากเขียนไม่สำเร็จ |
ลบรายการความทรงจำของ AI [🗑] |
/settings |
useUserProfileStore |
การลบทันที (<16ms) |
ส่งการเปลี่ยนแปลงการลบไปยัง Firestore user_profiles |
กู้คืนรายการความทรงจำและแจ้งเตือนผู้ใช้หากลบไม่สำเร็จ |
6. เส้นทางของผู้ใช้ตั้งแต่ต้นจนจบและเมทริกซ์ทดสอบภาษาอังกฤษแบบเข้าใจง่าย
- ชุดที่ 1: App Shell, การนำทาง และการจัดการเส้นทาง (การทดสอบ 1.1-1.6: การเปลี่ยนเส้นทางการเปิดรูท, แถบที่อยู่ด้านล่างแบบถาวร, การกลับไปยังเซสชันกิจกรรมที่ใช้งานอยู่อย่างรวดเร็ว, การสำรองข้อมูลวันในสัปดาห์ที่ไม่ถูกต้อง, การสำรองข้อมูล 404 เส้นทางที่ไม่รู้จัก, การสำรองข้อมูล Deep Link ของการออกกำลังกายที่ไม่ถูกต้อง)
- ชุดที่ 2: มุมมองการออกกำลังกายประจำวันและการแสดงผลบล็อก (การทดสอบ 2.1-2.7: การแสดงผลชื่อวันแบบไดนามิก, เส้นทางวันและปุ่มย้อนกลับที่เฉพาะเจาะจง, การจัดการบล็อกแบบเดี่ยวเทียบกับแบบซูเปอร์เซ็ต, ตัวยึดตำแหน่งวันว่าง, ตราประทับการออกกำลังกายที่เสร็จสมบูรณ์, การนำทางล้วนๆ บนปุ่มเล่นตรงกลาง, การแก้ไขด้วยการแนบบริบทโค้ช)
- ชุดที่ 3: มุมมองกำหนดการรายสัปดาห์และการ์ดกำหนดการรายวัน (การทดสอบ 3.1-3.6: การแสดงผลสถิติรายสัปดาห์, ตัวกรองเฉพาะวันที่กำหนดเวลาไว้, ภาพไฮไลต์ของวันนี้, การไปยังส่วนต่างๆ ของการ์ดรายวัน, การแก้ไขการไปยังส่วนต่างๆ ของสัปดาห์, การแสดงผลตัวแปรแบบย่อ)
- ชุดที่ 4: แชทกับโค้ชและการเปลี่ยนแปลงแบบแบ่งระยะ (การทดสอบ 4.1-4.7: การแสดงผลสตรีมข้อความแชท, การแนบและการปิดแบนเนอร์บริบท, การป้อนข้อมูลชิปพรอมต์ล่วงหน้า, การเปิด/ปิดการพิมพ์ตามคำบอก, การแยกการเปลี่ยนแปลงแบบแบ่งระยะ, การยอมรับและการคอมมิตข้อเสนอ, การแสดงตัวอย่างและการคอมมิตข้อเสนอการยกเครื่องรายสัปดาห์)
- ชุดที่ 5: รายละเอียดการออกกำลังกายและสารานุกรม (การทดสอบ 5.1-5.5: การแสดงผลรายละเอียดการออกกำลังกาย, การเล่นแบบวนซ้ำอัตโนมัติโดยปิดเสียง, การสลับหยุดวิดีโอชั่วคราว, แท็กกล้ามเนื้อหลักเทียบกับกล้ามเนื้อรอง, การนำทางย้อนกลับและโหมดสำรองของประวัติ)
- ชุดที่ 6: เครื่องมือติดตามและบันทึกการออกกำลังกายที่ใช้งานอยู่ (การทดสอบ 6.1-6.7: สถานะเริ่มต้นที่ยังไม่ได้เริ่มและเริ่มด้วยตนเอง, หยุดชั่วคราวและกลับมาจับเวลาต่อ, การบันทึกเซ็ตแบบสัมผัสและการสลับเครื่องหมายถูก, การสลับขั้นตอนซูเปอร์เซ็ต, โมดัลสลับการออกกำลังกายและการแทนที่, การยืนยันการเสร็จสิ้นและการซิงค์เซิร์ฟเวอร์, การกู้คืนสถานะเซสชันเมื่อโหลดซ้ำ)
- ชุดที่ 7: ความคืบหน้าและการวิเคราะห์ย้อนหลัง (การทดสอบ 7.1-7.5: การแสดงผลภาพรวมแดชบอร์ดความคืบหน้า, การแสดงแบนเนอร์แสดงผล PR, การสลับกรอบเวลาของแผนภูมิ, สถานะประวัติว่างเปล่า, การแตะประวัติเซสชันที่ผ่านมา)
- ชุดที่ 8: การตั้งค่าผู้ใช้ อุปกรณ์ และหน่วยความจำ AI (การทดสอบ 8.1-8.4: การแสดงผลมุมมองการตั้งค่า การอัปเดตปุ่มเปิด/ปิดอุปกรณ์ การเปลี่ยนหน่วย การลบรายการหน่วยความจำ AI)