Chào mừng mọi người đến với Day 4. Hôm nay chúng ta đi vào phần cốt lõi nhất của pipeline: từ BD tạo DD, từ DD tạo Code. Day 3 đã hoàn thành RD — hôm nay chúng ta tiếp tục BD cho các màn hình còn lại, rồi đi sâu vào DD Generation với 9 section template, 4-State Model, và cuối cùng là Code Generation với Coder Pack.
Đây là lịch trình tổng thể tuần 3 và 4. Hôm nay là Day 4 — ngày đầu tiên thực hành với nexa-sample-1. Mục tiêu: hoàn thành BD cho tất cả màn hình, rồi tạo DD. Ngày mai Day 5 sẽ tạo Code từ DD. Day 6 tạo Test Case. Sau đó chuyển sang nexa-sample-2 với quy trình tương tự. Cuối cùng Day 9 áp dụng vào PoC thực tế. Các buổi 16:00 là review online — học viên trình bày kết quả bài tập.
Chương trình Day 4: chia làm 2 phần. Phần 1 — lý thuyết BD/SoT/DD workflow, rồi hướng dẫn 1 màn hình mẫu + thực hành toàn bộ. Phần 2 — tiếp tục thực hành DD, rồi Code Generation với Coder Pack. Cấu trúc: lý thuyết → demo 1 màn hình → thực hành tất cả màn hình, theo XLSX training plan.
Bắt đầu với phần BD tiếp tục và DD Generation. Mục tiêu: hoàn thành BD cho tất cả màn hình, rồi hiểu quy trình tạo DD từ BD.
Ôn tập Day 3: đã tạo RD, bắt đầu BD cho màn hình đầu tiên. Hôm nay tiếp tục hoàn thành BD cho các màn hình và API còn lại, rồi chuyển sang DD Generation — bản thiết kế chi tiết đủ để tạo code tự động.
Day 3 đã học cách tạo RD và thao tác các command cơ bản. Hôm nay Day 4: giảng viên sẽ hướng dẫn tạo BD cho 1 màn hình mẫu, rồi tạo DD cho 1 màn hình mẫu. Bài tập về nhà: hoàn thành BD và DD cho tất cả màn hình còn lại. Ngày mai Day 5 sẽ review kết quả và chuyển sang Code Generation.
Slide hands-on tổng quát. Trái: BD generation với SCREEN-001 Login — màn hình đơn giản, dễ hiểu cấu trúc BD. Phải: DD generation với SCREEN-005 Task Create/Edit — màn hình phức tạp có form, validation, CRUD — lý tưởng để demo 4-State Model và EVT_XXX events. Mỗi phần giảng viên demo trước, rồi giao bài tập về nhà hoàn thành tất cả màn hình còn lại.
Slide git workflow cho BD exercise. Bước 1: checkout từ checkpoint/01-rd-complete — đây là branch có RD hoàn chỉnh, chưa có BD. Bước 2: tạo branch cá nhân theo quy ước trainee/tên/cp2-bd. Bước 3: chạy /bd:generate cho 2 màn hình SCREEN-001 Login và SCREEN-002 Dashboard. Bước 4: commit và push lên remote. Bước 5: so sánh kết quả với branch đáp án checkpoint/02a-bd-doing (có 3 màn: Login, Dashboard, Board View).
Slide chi tiết từng bước thực hành. Trái: BD generation — 4 bước rõ ràng: mở Claude Code, chạy bd:generate, chạy bd:review, và xử lý khi score thấp. Phải: DD generation — 4 bước: copy SoT (bắt buộc!), dd:generate (3-5 phút), dd:review (score ≥ 70), dd:validate (BD↔DD nhất quán). Mỗi bước có command cụ thể và expected output. Học viên follow từng bước.
SoT Rule 3 rất quan trọng ở đây: BD Output được copy vào DD Input. Đây là Input cho DD Generation — AI sẽ đọc BD từ 03_詳細設計/90_Input/ để tạo DD. Rule 4: KHÔNG BAO GIỜ sửa file trong 90_Input — nếu BD cần sửa, sửa ở 02_基本設計 rồi copy lại. Đây là nguyên tắc SoT: nguồn duy nhất, luôn mới nhất.
Slide git workflow cho DD exercise. Bước 1: checkout từ checkpoint/02-bd-complete — branch có BD hoàn chỉnh 8 màn hình. Bước 2: tạo branch cá nhân trainee/tên/cp3-dd. Bước 3: chạy /sync:bd-to-dd để copy SoT, rồi /dd:generate cho 2 màn hình SCREEN-001 Login và SCREEN-005 Task Create/Edit. Bước 4: commit và push. Bước 5: so sánh với branch đáp án checkpoint/03a-dd-doing (có 3 màn: Login, Dashboard, Board View + SHARED-SPECS).
4 lệnh DD: dd:plan phân tích BD và tạo kế hoạch DD — xác nhận scope, components, API connections. dd:generate tạo DD document thực tế. dd:review đánh giá chất lượng bằng điểm số — phải ≥ 70. dd:validate kiểm tra tính nhất quán giữa BD và DD — field names, API endpoints, business rules phải match. 4 bước này đảm bảo DD đủ chất lượng để tạo code.
Demo thực tế: 4 bước chạy liên tiếp. dd:plan mất vài giây, dd:generate mất 3-5 phút cho màn hình phức tạp. Kết quả review thường là 70-80 ở v1 — cần fix CRITICAL và HIGH issues rồi review lại. Ví dụ: v1 đạt 78, có 1 CRITICAL (thiếu max value cho amount), sửa xong v2 đạt 85.
Phần 2: đi sâu vào cấu trúc DD template — 9 sections mà AI tạo ra, và 4-State Model cho UI. Sau đó học Code Generation với Coder Pack.
DD template có 9 sections chuẩn — lấy từ DD thực tế của SCREEN-001-login trong nexa-sample-1. §1 Component Tree, §2 Type Definitions, §3 State Management, §4 API Integration, §5 Event Handlers, §6 Validation Rules, §7 Error Handling, §8 Screen Transitions, §9 UI/Layout Specs. AI tạo tất cả 9 sections từ BD input.
4-State Model thực tế từ SCREEN-001 Login DD. DEFAULT: form trống, button disabled. INPUTTING: user nhập email/password, validate realtime. SUBMITTING: isLoading=true, button disabled + spinner. SUCCESS: lưu JWT, redirect /dashboard. ERROR: hiện ErrorAlert với message từ API. Đây là pattern chuẩn cho mọi form trong project.
Event handlers thực tế từ SCREEN-001 Login DD. handleSubmit: click login → set isLoading → POST /api/auth/login → 200 thì save JWT + redirect, 401 thì set apiError, 500 thì show server error. handleChange: thay đổi input → update state → clear error → validate. Validation: email required + email format, password required + min 8 chars. Đây là mức chi tiết đủ để implement code.
Code Generation thực tế từ nexa-sample-1. Coder Pack gồm DD document, project structure, coding rules. Output: frontend tạo pages, components, hooks matching DD component tree; backend tạo controller, service, DTO, repository. code:review kiểm tra 4 chiều: DD compliance 35%, code standards 30%, security 20%, performance 15%.
Full pipeline overview dùng nexa-sample-1. BD Phase: generate + review 8 màn hình, score ≥ 70. SoT Copy: BD output sang DD input (Rule 3, không sửa). DD Phase: generate + review + validate, 9 sections + state + events. Code Phase: plan + process + review — thực hành Day 5. Pipeline hoàn chỉnh: BD → DD → Code.
Tổng kết Day 4: 6 điểm chính. Hoàn thành BD cho tất cả screens. DD workflow 4 bước. DD template 9 sections. 4-State Model cho UI. EVT_XXX event specs. Code generation với Coder Pack. Ngày mai Day 5 — thực hành: tạo code frontend+backend, code review, test generation, và tổng kết pipeline.
Checklist 9 mục cho DD Generation. Trước khi chuyển sang Code phase, tất cả 9 mục phải checked. Đặc biệt: 4-State Model và EVT_XXX là hai phần hay bị thiếu — kiểm tra kỹ. CRITICAL phải bằng 0, score phải ≥ 70, và dd:validate phải pass BD↔DD consistency.
Hẹn gặp lại ở Day 5 — ngày cuối cùng! Chúng ta sẽ thực hành hands-on: tạo code frontend+backend, code review, test generation với tcgen, và tổng kết toàn bộ pipeline RD→BD→DD→Code→Test. Hãy ôn lại DD template 9 sections và Coder Pack workflow — ngày mai sẽ cần dùng ngay!