A
Đăng nhập

Nội dung này đã khóa

Vui lòng đăng nhập hoặc đăng ký mua sách để đọc tiếp những kiến thức chuyên sâu này.

Mua bản đầy đủ

Chương 4: Quy trình VibeCoding - 4 Bước hóa Rồng

Chapter 4 Workflow

"Code sai sửa được. Tư duy sai thì đập đi xây lại."

Đừng lao vào viết code ngay. Hãy tuân thủ quy trình 4 bước mà tôi áp dụng cho mọi dự án EMS Solution, bao gồm cả VibeMaterial.

4.1 Chiến Lược Tiếp Cận: Demo-first vs Build-first

Demo-first vs Build-first Strategy

Tùy vào mục đích, bạn có thể chọn 1 trong 2 hướng đi:

4.1.1 Chiến lược A: Demo-first (Frontend trước)

Khi nào dùng?

  • Cần demo nhanh cho khách/sếp xem UI/UX
  • Validate ý tưởng trước khi invest thời gian vào Backend
  • MVP cần hoàn thành trong 1-2 ngày

Cách làm:

  1. Tạo UI với mockup data (dữ liệu giả cứng trong code)
  2. Demo cho khách tương tác, thu feedback
  3. Sau khi duyệt UI -> Mới làm Backend thật

Ví dụ prompt:

"Tạo ProductCard component với mockup data: { name: 'Xi măng Hà Tiên', price: 50000, image: '/placeholder.jpg' }. Chưa cần API thật."

4.1.2 Chiến lược B: Build-first (Backend trước)

Khi nào dùng?

  • Dự án dài hạn, cần nền tảng vững chắc
  • Logic nghiệp vụ phức tạp (Transaction, Inventory)
  • Cần data thật để test

Cách làm:

  1. Thiết kế Database schema chuẩn
  2. Xây Backend/API với data thật
  3. Cuối cùng mới "khoác áo" Frontend

Trong cuốn sách này, tôi dạy theo hướng Build-first để bạn hiểu nền tảng. Nhưng trong thực tế, nếu cần demo gấp, hãy dùng Demo-first với mockup data trước!

4.2 Quy trình chuẩn 4 bước (The Vibe Process)

4.2.1 Bước 1: PLAN (Lên kế hoạch & Bản vẽ)

  • Là gì?: Viết file PLAN.md.
  • Tại sao?: Bạn không thể xây nhà nếu không có bản vẽ. AI cũng thế. Nếu bạn không nói rõ Input/Output, nó sẽ code bừa.
  • VibeMaterial Case: Trước khi làm tính năng "Tìm kiếm sản phẩm", tôi phải viết rõ:

    "User gõ từ khóa -> Gọi API -> API tìm trong DB (ilike) -> Trả về JSON gồm Tên, Ảnh, Giá -> Frontend hiển thị dạng Grid."

4.2.2 Bước 2: CONTEXT (Nạp bối cảnh)

  • Là gì?: Cung cấp file CONTEXT.md cho AI.
  • Tại sao?: AI rất hay quên. Mỗi lần chat mới, bạn phải nhắc nó: "Tao đang dùng Next.js, Supabase, Tailwind. Bảng Products có cột A, B, C".
  • Mẹo: Gom hết Tech Stack và Database Schema vào 1 file. Copy-paste vào đầu mỗi đoạn chat.

4.2.3 Bước 3: CODE (Thực thi)

  • Là gì?: Dùng AntiGravity (trong VS Code) để sinh code và Google AI Studio để tinh chỉnh logic phức tạp.
  • Nguyên tắc: Promt chuẩn R-C-T-C (Role - Context - Task - Constraints).

4.2.4 Bước 4: DEBUG (Kiểm thử & Sửa lỗi)

  • Là gì?: Chạy thử, xem log, nhờ AntiGravity sửa lỗi.
  • Tư duy: Lỗi là chuyện bình thường. Quan trọng là cách đọc lỗi. Đừng chỉ quăng lỗi cho AI, hãy đọc xem nó báo dòng nào, file nào.

4.3 Thực hành: Áp dụng vào tính năng "Tìm kiếm sản phẩm"

4.3.1 Bước 1: PLAN (Tôi viết vào PLAN.md)

## Feature: Product Search
1. UI: Input search bar at Top Header.
2. Logic:
   - User types -> Debounce 300ms (chờ 0.3s mới tìm để đỡ tốn API).
   - Fetch API `/api/products?q=...`
3. Backend:
   - Query Supabase: `select * from products where name ilike %q%`.

4.3.2 Bước 2: CONTEXT (Tôi đưa cho AI)

"Project VibeMaterial. Stack: Next.js App Router, Supabase. Table products columns: id, name, price, image_url."

4.3.3 Bước 3: CODE (Dùng AntiGravity)

Bạn mở AntiGravity trong VS Code và gõ:

Role: Senior Frontend Dev. Context: (Như trên). Task: Create SearchBar component. Constraints:

  • Use useDebounce hook.
  • Use lucide-react for Search Icon.
  • Style with Tailwind.

AntiGravity sẽ tự động tạo file, viết code và cài đặt thư viện cho bạn.

4.3.4 Bước 4: DEBUG

  • Lỗi: Gõ tiếng Việt "Xi măng" không ra kết quả.
  • Hỏi Google AI Studio: "Tại sao Supabase ilike không tìm được tiếng Việt có dấu?"
  • Câu trả lời: Nó sẽ gợi ý bạn dùng Full Text Search hoặc textSearch.
  • Fix: Nhờ AntiGravity sửa lại câu truy vấn.

4.4 Đúc kết & Giới thiệu chương tiếp theo

Quy trình 4 bước PLAN - CONTEXT - CODE - DEBUG là kim chỉ nam giúp bạn không bao giờ lạc lối:

  • Nếu code lỗi -> Xem lại Context
  • Nếu Context đúng mà vẫn lỗi -> Xem lại Plan
  • Đừng bao giờ code mò

Bạn đã nắm vững "Võ công" (Quy trình). Giờ là lúc chọn "Sân đấu" (Hạ tầng). Ở Chương 5: Chiến lược Hạ tầng (Database & Deploy), chúng ta sẽ trả lời câu hỏi triệu đô: Dùng Database gì để vừa rẻ vừa xịn? Deploy ở đâu để không tốn tiền server?

Bài trước Bài tiếp theo