Làm app cùng AI agent

Giao diện

Thông tin kiểm chứng ngày 2026-10-24T00:00:00.000Z

9. Thực hành: Sổ chia tiền nhóm ​

90 phút, chạy trọn một vòng workflow chính trên một app nhỏ nhưng thật: có giao diện, có lưu dữ liệu, có logic đủ để viết test. Bạn đóng vai người duyệt. Agent làm phần còn lại.

Tất cả nằm trong repo tài liệu:

Đường dẫnLà gì
practice/starter/Bộ cấu hình AI, chưa có code app. Bạn bắt đầu từ đây
practice/lab/de-bai.mdĐề bài, viết như người dùng kể
practice/lab/checkpoint-1-spec.mdSpec mẫu, dùng khi bị lạc ở bước brainstorm
practice/lab/checkpoint-2-plan.mdPlan mẫu, dùng khi bị lạc ở bước lập kế hoạch
practice/lab/dap-an/App hoàn chỉnh, dùng khi bị lạc ở bước thực thi
practice/lab/backlog.mdBài về nhà

Quy tắc vàng của buổi lab

Đừng tự viết code. Khi muốn sửa gì, nói với agent. Bạn chỉ đọc, trả lời câu hỏi, duyệt và chặn.

Lịch 90 phút ​

PhútBướcBạn nhận đượcTrễ thì
0–10Chuẩn bịDự án mở trong Claude Code, plugin đã bật—
10–20Dựng khungApp mẫu chạy được, 1 commitChạy tay lệnh trong skill scaffold-app
20–40Brainstorm → specFile spec trong docs/superpowers/specs/Chép checkpoint 1
40–50Lập kế hoạchFile plan trong docs/superpowers/plans/Chép checkpoint 2
50–80Thực thiCode + test + commit theo từng taskChép dap-an/
80–90Kiểm tra & nhìn lạiApp chạy trên trình duyệt, đã đọc diff—

Bước 0: Chuẩn bị (0–10) ​

Cần có: bun, git, Claude Code đã đăng nhập (gói Pro/Max/Team).

bash
cp -r practice/starter ~/so-chia-tien
cd ~/so-chia-tien
git init && git add -A && git commit -m "chore: starter"
claude

Claude Code hỏi có tin thư mục này không: chọn tin. Nếu nó đề nghị cài plugin trong .claude/settings.json thì đồng ý. Dù có hay không, gõ tiếp các lệnh sau trong Claude Code (plugin đã có thì lệnh không làm gì thêm), rồi kiểm tra bằng /plugin:

text
/plugin install superpowers@claude-plugins-official
/plugin install context7@claude-plugins-official
/plugin install playwright@claude-plugins-official
/plugin install ralph-loop@claude-plugins-official
/plugin enable cc-plugin-you-should-know@builtin

Trong lúc chờ, mở và đọc lướt AGENTS.md, CLAUDE.md. Đó là "luật nhà" agent sẽ theo suốt buổi. Xem lại CLAUDE.md / AGENTS.md nếu cần.

Bước 1: Dựng khung (10–20) ​

Gõ:

text
Dùng skill scaffold-app để dựng khung app.

Agent chạy lệnh Better-T-Stack đã ghim phiên bản, đẩy schema, chạy typecheck, kiểm tra CLAUDE.md/AGENTS.md/.claude/ còn nguyên, rồi commit.

Bạn kiểm tra: git log --oneline có commit mới; thư mục có apps/web, apps/server, packages/api, packages/db.

Trễ hoặc hỏng?

Mở .claude/skills/scaffold-app/SKILL.md, chép lệnh bunx create-better-t-stack@3.49.0 ... và chạy tay trong terminal, rồi git add -A && git commit -m "chore: scaffold".

Vì sao lại có sẵn bộ khung: xem Bộ khung app.

Bước 2: Brainstorm → spec (20–40) ​

Gõ, rồi dán toàn bộ nội dung practice/lab/de-bai.md vào sau:

text
Mình muốn làm app dưới đây. Brainstorm với mình trước, đừng code vội.

<dán đề bài>

Superpowers sẽ hỏi từng câu một. Trả lời ngắn, bằng lời của bạn. Vài câu bạn nên chủ động nói nếu agent chưa hỏi:

  • Tiền là số nguyên đồng, chia lẻ thì dồn cho người đầu danh sách.
  • Logic tính tiền phải là hàm thuần, có test.
  • Giao diện chưa cần đẹp.

Cuối bước, agent viết spec và nhờ bạn duyệt. Đọc nó. Đây là chỗ đáng tiền nhất để sửa hiểu lầm: một câu sửa ở spec rẻ hơn một giờ sửa code.

Bạn nhận được: docs/superpowers/specs/<ngày>-<tên>-design.md, đã commit.

Trễ hoặc lạc đề?
bash
mkdir -p docs/superpowers/specs
cp <repo-tài-liệu>/practice/lab/checkpoint-1-spec.md docs/superpowers/specs/so-chia-tien-design.md
git add -A && git commit -m "docs: spec"

Rồi gõ: Spec ở docs/superpowers/specs/so-chia-tien-design.md đã duyệt. Viết plan.

Bước 3: Lập kế hoạch (40–50) ​

Nếu agent chưa tự sang bước này, gõ:

text
Spec đã duyệt. Viết plan.

Bạn duyệt: mỗi task có file cụ thể, test cụ thể, lệnh kiểm tra và bước commit. Task đầu tiên phải là logic chia tiền có test trước. Nếu thấy task "viết UI" đứng trước "viết logic", bảo agent đổi.

Bạn nhận được: docs/superpowers/plans/<ngày>-<tên>.md.

Trễ hoặc plan rối?
bash
mkdir -p docs/superpowers/plans
cp <repo-tài-liệu>/practice/lab/checkpoint-2-plan.md docs/superpowers/plans/so-chia-tien.md
git add -A && git commit -m "docs: plan"

Rồi gõ: Thực thi plan docs/superpowers/plans/so-chia-tien.md.

Bước 4: Thực thi (50–80) ​

Agent hỏi chọn cách thực thi. Chọn subagent-driven nếu muốn xem mỗi task có người review riêng, hoặc inline nếu muốn nhanh và rẻ hơn.

Trong lúc agent chạy, bạn quan sát, không gõ chen:

Nhìn vào đâuThấy gì là tốt
Output testTest fail trước, rồi mới pass (TDD thật, không phải viết test sau)
Hook StopAgent định dừng mà typecheck/test còn đỏ thì bị chặn lại, tự sửa tiếp
Ghi chú You Should KnowNhắc những chỗ dễ sót, ví dụ test bị skip, lệnh lỗi bị lướt qua
git log --onelineMỗi task một hoặc vài commit nhỏ, message rõ

Agent hỏi gì thì trả lời. Agent xin quyền chạy lệnh lạ thì đọc lệnh trước khi đồng ý.

Trễ hoặc hỏng nặng?

Lấy app hoàn chỉnh để đi tiếp bước 5:

bash
cp -r <repo-tài-liệu>/practice/lab/dap-an ~/so-chia-tien-dap-an
cd ~/so-chia-tien-dap-an
cp apps/server/.env.example apps/server/.env
cp apps/web/.env.example apps/web/.env
bun install && bun run db:push && bun run dev

Trong đáp án, logic nằm ở packages/api/src/settle.ts (test settle.test.ts), API ở packages/api/src/routers/group.ts, giao diện ở apps/web/src/routes/.

Bước 5: Kiểm tra & nhìn lại (80–90) ​

Gõ:

text
Dùng skill verify-app kiểm tra: tạo nhóm "Đi Đà Lạt" gồm An, Bình, Chi; An trả 100.000 tiền ăn tối cho cả 3. Báo lại phần "Ai trả ai".

Kết quả đúng: "Bình trả An 33.333đ" và "Chi trả An 33.333đ". An chịu 33.334đ vì đồng lẻ dồn cho người đầu danh sách.

Tự mở http://localhost:3001 và bấm thử. Rồi đọc lại:

bash
git log --oneline
git diff <commit-scaffold>..HEAD --stat

Ba câu hỏi để nhìn lại:

  1. Chỗ nào bạn phải can thiệp? Lần sau đưa nó vào spec, AGENTS.md hay một hook?
  2. Agent có tự phát hiện lỗi của mình không? Nhờ test, hook hay You Should Know?
  3. Nếu bỏ bước brainstorm, chuyện gì sẽ sai?

Bài về nhà: để agent tự chạy ​

Mục tiêu: chạm nấc 4, agent tự làm một tính năng trong vòng lặp, bạn chỉ xem kết quả.

  1. Kiểm tra jq --version chạy được (hook của Ralph cần jq; thiếu thì vòng lặp dừng ngay sau vòng đầu mà không báo gì). Chưa có thì nhờ agent cài.
  2. Chép practice/lab/backlog.md vào dự án thành docs/backlog.md, commit.
  3. Trong Claude Code, gõ (một dòng):
text
/ralph-loop "Đọc docs/backlog.md, làm mục 1. Làm theo TDD. Chỉ xong khi mọi tiêu chí chấp nhận của mục 1 đạt, check-types và test pass, đã kiểm tra trên trình duyệt bằng skill verify-app, và đã commit. Khi đó in đúng: <promise>DONE</promise>" --max-iterations 15 --completion-promise "DONE"
  1. Đi pha cà phê. Quay lại thì xem:
    • git log --oneline: các commit agent đã làm.
    • Tự chạy bun run check-types && bun test. Đừng chỉ tin chữ DONE: Stop hook của starter không gác các vòng sau vòng đầu (xem Rào chắn).
    • Ghi chú You Should Know trong phiên.
    • Chạy app và tự thử mục 1.
  2. Muốn dừng sớm: /cancel-ralph.
  3. Ổn thì làm tiếp mục 2, 3 theo cách tương tự.

Luôn có giới hạn

--max-iterations là chốt an toàn chính: không có nó, vòng lặp có thể chạy mãi và tốn usage. --completion-promise chỉ khớp chuỗi nằm trong thẻ <promise>...</promise> và phải đúng từng ký tự, nên prompt phải dặn in cả thẻ, và chuỗi nên ngắn, không dấu. Xem Lên mức tự động và Rào chắn & chi phí.

Nguồn ​