#Hướng Dẫn Chi Tiết (Walkthrough)

#Tổng Quan

Walkthrough là artifact mà Agent tạo ra sau khi hoàn thành việc triển khai một tác vụ. Đây là tài liệu tóm tắt toàn bộ những gì đã thay đổi và hướng dẫn cách kiểm tra kết quả.

#Mục Đích

Walkthrough phục vụ hai vai trò chính:

  1. Báo cáo: Tóm tắt công việc đã hoàn thành cho người dùng
  2. Hướng dẫn kiểm tra: Chỉ dẫn người dùng cách verify kết quả

#Nội Dung

Một Walkthrough điển hình bao gồm:

#1. Tóm Tắt Thay Đổi

  • Các file đã tạo mới
  • Các file đã sửa đổi
  • Các file đã xóa
  • Dependencies mới

#2. Mô Tả Chi Tiết

  • Giải thích tại sao mỗi thay đổi được thực hiện
  • Mối liên hệ giữa các file thay đổi
  • Các quyết định kỹ thuật cần lưu ý

#3. Hướng Dẫn Kiểm Tra

  • Các bước để verify kết quả
  • Lệnh cần chạy (build, test, start server)
  • URL cần truy cập để kiểm tra UI

#4. Bằng Chứng Trực Quan

  • Screenshots của UI trước/sau
  • Browser recordings của flow hoàn chỉnh
  • Console output cho thấy tests pass

#Ví Dụ

MARKDOWN
## Walkthrough: Login Page Implementation

### Thay Đổi
- ✅ Tạo `src/app/login/page.tsx` — Trang đăng nhập
- ✅ Tạo `src/hooks/useAuth.ts` — Auth hook
- ✅ Sửa `src/middleware.ts` — Thêm auth check

### Kiểm Tra
1. Chạy `npm run dev`
2. Truy cập http://localhost:3000/login
3. Nhập credentials và đăng nhập
4. Xác minh redirect về dashboard

### Screenshots
[Screenshot trang login]
[Screenshot sau khi đăng nhập thành công]

#Tương Tác

#Review Walkthrough

  1. Đọc tóm tắt thay đổi
  2. Kiểm tra hướng dẫn verify
  3. Xem screenshots/recordings
  4. Nếu phát hiện vấn đề → Cung cấp feedback

#Feedback

  • Comment trực tiếp trên walkthrough
  • Yêu cầu Agent sửa lỗi nếu phát hiện
  • Xác nhận hoàn thành nếu mọi thứ OK

Lưu ý: Walkthrough thường kèm theo screenshots và browser recordings để cung cấp bằng chứng trực quan. Luôn kiểm tra những artifacts bổ sung này.