Fullstack Vibe Coding với AI cho người mới bắt đầu

Bạn có ý tưởng làm một website bán hàng, nhưng nghe tới React, NestJS, cơ sở dữ liệu là thấy ngợp. Vibe coding đảo thứ tự quen thuộc: thay vì học hết cú pháp rồi mới làm, bạn mô tả điều mình muốn, để AI viết code, rồi bạn chạy thử và chỉnh dần.

Bài này là bản đồ cho người mới: cần nghĩ như thế nào, quy trình làm việc ra sao và dựng một dự án thương mại điện tử fullstack (React cho giao diện, NestJS cho phần máy chủ) từ trang trắng như thế nào. Đây cũng là nội dung xuyên suốt của series fullstack vibe coding trên kênh.

TL;DR: Nếu bạn thích xem thao tác thực tế hơn là đọc, hãy xem video giới thiệu series bên dưới và làm song song với bài viết này nha.

Không xem được video? Mở xem video trên YouTube

Vibe coding là gì (và không phải là gì)?

Vibe coding là cách làm phần mềm bằng cách trò chuyện với AI: bạn nói bằng ngôn ngữ tự nhiên, AI sinh code, bạn chạy thử rồi phản hồi để AI sửa tiếp. Công cụ có thể là một trợ lý AI trong trình soạn code hoặc một agent chạy trong terminal như Claude Code.

Nó không có nghĩa là bạn không cần hiểu gì. Người làm tốt vẫn phải biết mình đang xây cái gì, kiểm tra kết quả và quyết định hướng đi. Điều thay đổi là bạn tốn ít công hơn cho việc gõ từng dòng code.

Tư duy: bạn là người quyết định, AI là người viết code

Hãy coi AI như một lập trình viên làm rất nhanh nhưng không biết ý bạn nếu bạn không nói rõ. Từ đó có ba nguyên tắc:

• Bạn chịu trách nhiệm về "cái gì" và "tại sao": tính năng nào cần, ưu tiên cái nào, đủ tốt chưa.
• AI lo "như thế nào": viết code, cấu hình, sửa lỗi cụ thể.
• Làm nhỏ, chạy được, rồi mới làm tiếp: mỗi vòng chỉ một tính năng nhỏ, chạy được ngay, đừng nhờ AI dựng cả hệ thống trong một lần.

Bước 1: Chốt bài toán nhỏ nhất có thể dùng được

Với web thương mại điện tử, đừng bắt đầu từ "làm giống các sàn lớn". Hãy chọn bản nhỏ nhất vẫn dùng được, ví dụ:

• Khách xem danh sách và chi tiết sản phẩm.
• Khách thêm sản phẩm vào giỏ hàng và đặt hàng.
• Khách đăng ký, đăng nhập và xem đơn của mình.
• Quản trị viên thêm, sửa sản phẩm và xem đơn hàng.

Những thứ như mã giảm giá, đánh giá sản phẩm hay tích hợp thanh toán trực tuyến nên để vòng sau. Càng ít tính năng ban đầu, bạn càng dễ kiểm soát AI.

Bước 2: Chọn stack và hiểu vai trò từng phần

Một dự án fullstack gồm ba phần chính, bạn chỉ cần hiểu vai trò của chúng:

• React (frontend): giao diện người dùng thấy trên trình duyệt, như trang sản phẩm, giỏ hàng.
• NestJS (backend): máy chủ xử lý nghiệp vụ như đăng nhập, tạo đơn, và cung cấp API cho frontend.
• Cơ sở dữ liệu: nơi lưu sản phẩm, người dùng, đơn hàng; thường chọn một cơ sở dữ liệu quan hệ như PostgreSQL.

Frontend gọi API của backend, backend đọc ghi cơ sở dữ liệu. Khi hiểu luồng này, bạn sẽ biết lỗi nằm ở đâu và nhờ AI sửa đúng chỗ.

Bước 3: Viết một bản mô tả ngắn cho AI

Trước khi nhờ AI viết dòng code nào, hãy cho nó biết bối cảnh. Tạo một file mô tả ngắn ở thư mục gốc dự án (nhiều agent đọc file như CLAUDE.md đầu mỗi phiên), nội dung gọn, dưới vài chục dòng:

# Dự án: web bán hàng (React + NestJS)

- Frontend: React + TypeScript, thư mục apps/web.
- Backend: NestJS + TypeScript, thư mục apps/api, cung cấp REST API.
- Cơ sở dữ liệu: PostgreSQL.
- Làm từng tính năng nhỏ, mỗi lần xong phải chạy được.
- Trước khi viết code lớn, hãy đưa kế hoạch ngắn để tôi duyệt.
- Không tự thêm thư viện lạ hay đổi cấu trúc thư mục khi chưa hỏi.
- Giải thích thay đổi bằng tiếng Việt, ngắn gọn.

File càng ngắn và rõ thì AI càng bám theo tốt. Hãy cập nhật khi quyết định mới được chốt.

Bước 4: Dựng khung dự án từ số 0

Giờ nhờ AI dựng bộ khung. Hãy yêu cầu kế hoạch trước, rồi mới cho chạy:

Tôi muốn làm web bán hàng với React ở apps/web và NestJS ở apps/api.
Hãy đề xuất kế hoạch dựng khung dự án từ thư mục trống:
cấu trúc thư mục, các lệnh cần chạy và cách chạy thử cả hai phần.
Chưa viết code, chờ tôi duyệt kế hoạch.

Đọc kế hoạch, hỏi lại chỗ chưa hiểu, rồi mới đồng ý. Sau khi dựng xong, hãy tự chạy cả frontend và backend để chắc chắn chúng khởi động được.

Bước 5: Làm từng tính năng theo vòng lặp

Mỗi tính năng đi theo một vòng giống nhau: kế hoạch, code, chạy thử, xem lại. Ví dụ với danh sách sản phẩm:

Làm tính năng danh sách sản phẩm.
Backend: model Product (tên, giá, mô tả, ảnh), API lấy danh sách và chi tiết.
Frontend: trang danh sách sản phẩm gọi API này, hiển thị dạng lưới.
Hãy đưa kế hoạch các file sẽ tạo hoặc sửa trước, rồi chờ tôi đồng ý.
Sau khi code xong, hướng dẫn tôi cách chạy thử.

Sau khi AI làm xong, bạn mở trình duyệt xem thật, bấm thử, rồi mới sang tính năng kế tiếp: giỏ hàng, đặt hàng, đăng nhập, trang quản trị.

Bước 6: Chạy thử, kiểm tra và lưu từng bước

Có ba thói quen giúp bạn không bị "vỡ" dự án:

• Chạy và xem kết quả thật sau mỗi thay đổi, đừng chỉ tin lời AI nói "đã xong".
• Nhờ AI chạy kiểm tra như build, kiểm tra kiểu dữ liệu, test nếu có, và đọc kết quả cho bạn.
• Lưu phiên bản bằng Git sau mỗi tính năng chạy tốt, để quay lại được khi AI làm hỏng.

Cả ba đều rẻ hơn rất nhiều so với việc phải gỡ rối một dự án đã chồng chất thay đổi.

Bước 7: Khi AI làm sai, hãy sửa bằng thông tin

Lỗi là chuyện bình thường. Cách nhờ AI sửa hiệu quả nhất là đưa đủ ngữ cảnh:

Khi tôi bấm "Thêm vào giỏ" thì trang báo lỗi.
Thông báo lỗi trong trình duyệt: <dán lỗi>
Thông báo lỗi ở terminal của backend: <dán lỗi>
Hãy tìm nguyên nhân, giải thích ngắn gọn rồi sửa. Chỉ sửa phần liên quan.

Nếu AI sửa mãi không được, hãy dừng lại, mô tả lại vấn đề từ đầu hoặc thu nhỏ phạm vi, thay vì liên tục bảo "sửa tiếp".

Những lỗi người mới hay gặp

• Nhờ AI dựng cả website trong một câu: kết quả khó kiểm soát và rất khó sửa, hãy chia thành tính năng nhỏ.
• Không nói rõ công nghệ và cấu trúc: AI tự chọn thư viện lạ khiến dự án lộn xộn, nên có file mô tả dự án.
• Bấm đồng ý mọi thay đổi mà không đọc: hãy xem AI định sửa file nào, nhất là khi nó xóa hay đổi cấu trúc.
• Không dùng Git: một thay đổi sai có thể làm mất phần đã chạy tốt.
• Chép mật khẩu, khóa API vào code hoặc đưa lên chỗ công khai: hãy để chúng ở biến môi trường và nhờ AI nhắc bạn không commit các file bí mật.
• Bỏ qua phần bảo mật khi làm đăng nhập, đơn hàng, thanh toán: đây là phần cần bạn kiểm tra kỹ hơn cả.

Vibe coding không phải để bạn khỏi suy nghĩ, mà để bạn dành sức nghĩ cho những quyết định quan trọng và để AI lo phần gõ phím.