Vibe Coding — Cơ Bản

Mục tiêu

Hiểu 3 tầng cơ bản của mọi ứng dụng web. Từ đây biết cách ra lệnh cho AI chính xác hơn: “Sửa ở Frontend” thay vì “Sửa cái gì đó”.

Sau bài này, bạn sẽ:

• ✅ Phân biệt được Frontend, Backend, Database trong bất kỳ app nào
• ✅ Hiểu API hoạt động như thế nào giữa các tầng
• ✅ Biết cách mô tả cấu trúc dữ liệu (JSON) để AI hiểu chính xác yêu cầu

Nội dung chính

1.1 — Ẩn dụ “Nhà hàng”: Mọi app đều giống nhau

Mọi app bạn dùng hàng ngày (Facebook, Shopee, Grab) đều có 3 phần:

┌─────────────────────────────────────────────────────────────────┐
│                        NHÀ HÀNG = ỨNG DỤNG                     │
│                                                                 │
│  🍽️  PHÒNG ĂN (Frontend / Client)                              │
│  │   Thực khách nhìn thấy gì? Menu, bàn ghế, đĩa thức ăn     │
│  │   → Giao diện người dùng nhìn thấy và tương tác            │
│  │                                                              │
│  │         ↕ Bồi bàn mang order vào bếp (API)                  │
│  │                                                              │
│  🍳  NHÀ BẾP (Backend / Server)                                │
│  │   Đầu bếp nhận order, chế biến, trả món ra                 │
│  │   → Xử lý logic: tính toán, kiểm tra, quyết định           │
│  │                                                              │
│  │         ↕ Đầu bếp lấy nguyên liệu từ kho (Query)           │
│  │                                                              │
│  🏪  KHO NGUYÊN LIỆU (Database)                                │
│  │   Tất cả nguyên liệu được lưu trữ, sắp xếp có hệ thống   │
│  │   → Toàn bộ dữ liệu: user, sản phẩm, đơn hàng...          │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

API (Bồi bàn) là gì? API là “người trung gian” vận chuyển yêu cầu từ Frontend sang Backend, và mang kết quả trở lại. Khi bạn bấm nút “Đặt hàng” trên Shopee, đó là Frontend gửi yêu cầu qua API đến Backend.

Mẹo: Khi nói chuyện với AI, hãy luôn nói rõ bạn muốn sửa ở tầng nào. Ví dụ: “Sửa giao diện nút bấm ở Frontend” sẽ cho kết quả chính xác hơn nhiều so với “Sửa cái nút bấm”.

1.2 — Phân tích app thật: Ứng dụng gọi trà sữa

Hành động của bạn	Frontend	API	Backend	Database
Mở app, thấy menu	Hiển thị danh sách trà sữa	Gọi: “lấy danh sách menu”	Nhận yêu cầu, truy vấn DB	Trả về danh sách sản phẩm
Bấm “Thêm vào giỏ”	Hiện icon giỏ hàng +1	Gửi: “thêm sản phẩm X vào giỏ user Y”	Kiểm tra tồn kho, lưu giỏ hàng	Cập nhật bảng giỏ hàng
Bấm “Thanh toán”	Hiện trang thanh toán	Gửi: “tạo đơn hàng, trừ tiền”	Kiểm tra số dư, tạo đơn hàng	Lưu đơn hàng, cập nhật số dư

Phân tích chi tiết hơn: App Grab

Hãy xem một ví dụ phức tạp hơn — khi bạn đặt xe Grab:

Bước	Frontend (App trên điện thoại)	Backend (Server Grab)	Database
1. Mở app	Hiển thị bản đồ, vị trí bạn	Nhận tọa độ GPS	Lưu vị trí user
2. Nhập điểm đến	Hiện ô tìm kiếm, gợi ý địa chỉ	Tính khoảng cách, giá tiền	Tra bảng giá theo khu vực
3. Bấm “Đặt xe”	Hiện “Đang tìm tài xế…”	Tìm tài xế gần nhất, gửi thông báo	Lưu đơn đặt xe, trạng thái “đang tìm”
4. Tài xế nhận	Hiện thông tin tài xế, biển số	Kết nối 2 người, tracking realtime	Cập nhật trạng thái “đã nhận”

Mẹo: Mỗi khi dùng app, hãy tự hỏi: “Phần này nằm ở Frontend hay Backend?”. Thói quen này sẽ giúp bạn ra lệnh cho AI chuẩn hơn rất nhiều.

1.3 — Prompt mẫu: Mô tả kiến trúc fullstack app

Khi bạn muốn AI tạo một app hoàn chỉnh, hãy mô tả rõ từng tầng:

Tạo cho tôi một app quản lý quán cà phê với kiến trúc fullstack.

FRONTEND (giao diện người dùng):
- Trang menu: hiển thị danh sách đồ uống dạng grid, mỗi món có
  ảnh, tên, giá, nút "Thêm vào giỏ"
- Trang giỏ hàng: danh sách món đã chọn, tổng tiền, nút "Đặt hàng"
- Trang quản lý (chủ quán): thêm/sửa/xóa món, xem đơn hàng mới
- Responsive: hiển thị tốt trên điện thoại lẫn máy tính

BACKEND (xử lý logic):
- API lấy danh sách menu từ database
- API thêm đơn hàng mới (kiểm tra tồn kho trước)
- API cập nhật trạng thái đơn hàng (chờ → đang làm → xong)
- Phân quyền: chủ quán có quyền quản lý, khách chỉ được đặt hàng

DATABASE (lưu trữ):
- Bảng products: id, name, price, image, category, available
- Bảng orders: id, user_id, total, status, created_at
- Bảng order_items: id, order_id, product_id, quantity

Tech stack: React + Supabase (database + auth)

Mẹo: Prompt càng chi tiết về từng tầng, AI sẽ tạo code càng chính xác. Đừng ngại viết dài — dài mà rõ ràng tốt hơn ngắn mà mơ hồ.

1.4 — Khái niệm CS lồng ghép: Biến, Mảng, Object

Bây giờ bạn đã thấy dữ liệu chạy qua lại giữa 3 tầng. Dữ liệu đó được lưu trữ như thế nào?

BIẾN (Variable) = Chiếc cốc đựng 1 thứ
─────────────────────────────────────────
  tenSanPham = "Trà sữa trân châu"
  gia = 35000
  daBan = true

MẢNG (Array) = Cái khay đựng nhiều cốc
─────────────────────────────────────────
  danhSachMenu = ["Trà sữa", "Cà phê", "Sinh tố", "Nước ép"]
                    [0]         [1]        [2]         [3]

OBJECT (JSON) = Menu chi tiết 1 món
─────────────────────────────────────────
  sanPham = {
    "ten": "Trà sữa trân châu",
    "gia": 35000,
    "size": ["S", "M", "L"],
    "topping": ["trân châu", "thạch", "pudding"]
  }

Tại sao cần biết điều này? Vì khi bạn nói với AI: “Tạo JSON chứa danh sách sản phẩm, mỗi sản phẩm gồm tên, giá, hình ảnh” — AI sẽ hiểu chính xác cấu trúc dữ liệu bạn muốn. Nếu không biết, bạn chỉ nói được “lưu thông tin sản phẩm” — quá mơ hồ.

Lỗi thường gặp

Vấn đề: “Localhost không chạy” — mở trình duyệt thấy trắng trơn hoặc lỗi → Kiểm tra Terminal trong Cursor xem có dòng lỗi đỏ không. Thường là chưa chạy npm install trước khi npm run dev. Hãy tắt server (Ctrl + C), chạy lại npm install, rồi npm run dev.

Vấn đề: “Không phân biệt được Frontend và Backend” → Quy tắc đơn giản: nếu người dùng nhìn thấy được → Frontend. Nếu xử lý logic phía sau (tính toán, kiểm tra, lưu dữ liệu) → Backend. Nếu lưu trữ dữ liệu lâu dài → Database.

Vấn đề: “AI tạo app nhưng không có database, dữ liệu mất khi tải lại trang” → Đó là vì AI dùng localStorage hoặc state tạm. Hãy nói rõ trong prompt: “Lưu dữ liệu vào database (Supabase), không dùng localStorage”.

Vấn đề: “Prompt mô tả app nhưng AI hiểu sai cấu trúc” → Hãy mô tả theo 3 tầng như mẫu ở phần 1.3. Khi bạn tách rõ Frontend / Backend / Database, AI gần như không thể hiểu sai.

Bài tập thực hành

Nhiệm vụ: Chọn 1 app bạn dùng hàng ngày (Grab, Shopee, Zalo…). Vẽ sơ đồ 3 tầng (Frontend → API → Backend → Database) cho 3 hành động chính trong app đó.

Bước 1 (10 phút): Vẽ sơ đồ 3 tầng cho app bạn chọn. Có thể vẽ tay trên giấy hoặc dùng Figma/Canva.

• Gợi ý nếu bị stuck: Hãy mở app đó lên, thực hiện 1 hành động (ví dụ: thêm sản phẩm vào giỏ), rồi tự hỏi: “Dữ liệu đi từ đâu đến đâu?”

Bước 2 (10 phút): Viết 1 prompt cho AI mô tả cấu trúc JSON cho app bạn muốn xây:

Tạo cấu trúc JSON mẫu cho app [tên app], bao gồm:
- Danh sách [đối tượng chính], mỗi [đối tượng] gồm: [liệt kê trường]
- Thông tin người dùng gồm: [liệt kê trường]
- Mối quan hệ giữa các bảng dữ liệu

Tiêu chí hoàn thành:

• Sơ đồ có đủ 3 tầng (Frontend, Backend, Database) cho ít nhất 3 hành động
• Prompt JSON có ít nhất 2 đối tượng dữ liệu với đầy đủ trường thông tin

Thời gian: 20 phút Deliverable: Sơ đồ 3 tầng (vẽ tay hoặc trên Figma/Canva) + prompt JSON

Tổng kết bài 1

Bạn đã học được	Chi tiết
3 tầng kiến trúc	Frontend (giao diện), Backend (xử lý), Database (lưu trữ)
API là gì	Người trung gian vận chuyển dữ liệu giữa Frontend và Backend
Biến, Mảng, Object	Cách dữ liệu được lưu trữ trong code
Prompt theo kiến trúc	Mô tả rõ từng tầng để AI hiểu chính xác yêu cầu