Tự động hóa và lập trình
Quy trình Vibe Coding an toàn: từ ý tưởng tới web app có đăng nhập chạy trên Internet
Bảy bước theo sáu học phần của khóa Vibe Coding, mỗi bước có câu kiểm tra; năm chỗ AI hay bỏ sót về bảo mật; giới hạn gói miễn phí Supabase và Vercel đọc tại trang giá; khi nào nên dừng và gọi người có chuyên môn.
Vì sao Vibe Coding cần một quy trình
Vibe Coding là cách làm phần mềm bằng mô tả: bạn nói muốn gì, AI viết mã, bạn chạy thử, nói tiếp. Andrej Karpathy đặt tên cho nó trong một bài đăng tháng 2/2025, và tới cuối năm đó Collins chọn "vibe coding" làm từ của năm 2025. Bài Vibe Coding là gì giải thích khái niệm; bài này là quy trình.
Cần quy trình vì cách làm này có một điểm yếu cố hữu: AI viết cho chạy được, không viết cho an toàn. Một web app có đăng nhập và dữ liệu người dùng mà chỉ "chạy được" thì rủi ro nằm ở chỗ bạn không nhìn thấy. Bảy bước dưới đây bám theo sáu học phần của khóa Vibe Coding cho người mới (mã AI-03), mỗi bước có một câu kiểm tra; chưa trả lời được thì chưa sang bước sau.
Bước 1. Mô tả yêu cầu đủ rõ
Viết ra bốn thứ trước khi mở bất kỳ công cụ nào: ai dùng ứng dụng, họ làm được việc gì, dữ liệu gì được lưu, và có những màn hình nào. "Làm cho tôi một web bán hàng" là chưa đủ. "Khách xem danh sách sản phẩm, tìm theo tên, thêm vào giỏ, đăng nhập để đặt hàng; quản trị viên đăng nhập để thêm sản phẩm và xem đơn; hai màn hình cho khách, hai cho quản trị" là đủ để AI bắt đầu.
Câu kiểm tra: đọc mô tả cho một người không biết dự án, họ có kể lại được ứng dụng làm gì không?
Bước 2. Giao diện trước, tính năng sau
Học phần giao diện dựng toàn bộ màn hình bằng AI từ mô tả tiếng Việt, chưa có dữ liệu thật, chưa có đăng nhập. Lý do: chỉnh bố cục lúc này rẻ, chỉnh sau khi đã nối dữ liệu thì mỗi lần đổi giao diện lại kéo theo sửa mã xử lý. Khóa dùng Google AI Studio trên trình duyệt ở giai đoạn này, không phải cài gì.
Câu kiểm tra: mở trên điện thoại, mọi nút bấm được và không có chữ tràn khỏi màn hình.
Bước 3. Lưu mốc trên GitHub trước khi AI sửa lớn
Học phần quản lý mã nguồn đưa dự án lên GitHub và dạy một thói quen: trước mỗi lần giao việc lớn cho AI, lưu một mốc. AI làm hỏng thì quay về mốc, không phải làm lại từ đầu. Đây cũng là nơi học cách chia việc, giao cho AI, nghiệm thu, mà khóa gọi là quy trình Skill.
Câu kiểm tra: bạn cố tình làm hỏng một file rồi quay về mốc trước được không?
Bước 4. Đăng nhập và phân quyền
Web app có người dùng thì phải trả lời hai câu: ai được vào, và vào rồi được làm gì. Khóa dùng Supabase Auth cho phần đăng nhập, đăng ký, quên mật khẩu, và phân hai vai: người dùng thường và quản trị. Dashboard quản trị với bảng dữ liệu, bộ lọc, thống kê dựng ở học phần này.
Chỗ AI hay bỏ sót: kiểm tra vai chỉ ở giao diện, ẩn nút đi là xong. Người biết địa chỉ trang quản trị vẫn vào được. Kiểm tra quyền phải nằm ở phía dữ liệu, xem bước 5.
Câu kiểm tra: đăng nhập bằng tài khoản thường, gõ thẳng địa chỉ trang quản trị, có bị chặn không?
Bước 5. Dữ liệu, backend và API
Học phần dữ liệu nối ứng dụng vào Supabase, cơ sở dữ liệu có giao diện quản lý bảng, và giải thích backend, API ở mức đủ để biết mã nào chạy ở máy khách, mã nào chạy ở máy chủ.
Hai việc bắt buộc ở bước này, đều là chỗ AI thường làm sai vì "làm thế là chạy được ngay":
- Hai loại khóa. Supabase cấp một khóa công khai để dùng ở giao diện và một khóa quản trị bỏ qua mọi kiểm tra quyền. Khóa quản trị chỉ được nằm ở máy chủ, không bao giờ nằm trong mã giao diện hay trên GitHub.
- Kiểm soát quyền theo dòng dữ liệu. Supabase có Row Level Security: quy tắc trên từng bảng, ví dụ người dùng chỉ đọc được đơn hàng có cột người đặt bằng chính mình. Bật quy tắc này thì dù giao diện có lỗi, dữ liệu người khác vẫn không lộ.
Câu kiểm tra: tạo hai tài khoản, đặt hàng bằng tài khoản A, đăng nhập tài khoản B, có thấy đơn của A không? Thấy là chưa xong.
Bước 6. Kiểm tra trước khi công khai
Bảng kiểm dưới đây rút từ hai học phần dữ liệu và deploy của khóa, gom lại năm chỗ AI hay bỏ sót:
- Không có khóa bí mật nào trong mã giao diện hoặc trên GitHub; khóa để trong biến môi trường của nơi triển khai.
- Mọi thao tác ghi, sửa, xóa dữ liệu đều kiểm tra quyền ở phía máy chủ hoặc bằng Row Level Security, không chỉ ẩn nút.
- Ô nhập liệu có giới hạn: độ dài, loại file khi tải lên, kích thước file.
- Thông báo lỗi cho người dùng không lộ chi tiết kỹ thuật như tên bảng hay truy vấn.
- Có bản sao dữ liệu trước khi cho người thật dùng.
Cách làm trong lớp: học viên đổi dự án cho nhau và cố tình phá, vì người dựng ứng dụng thường thử đúng cách còn người khác thử sai cách.
Bước 7. Đưa lên Internet
Khóa triển khai lên Vercel: đẩy mã lên GitHub, nối Vercel với kho mã, mỗi lần đẩy mã mới là Vercel tự dựng và cập nhật. Sau đó kiểm thử với vài người dùng thật, sửa lỗi, và bàn giao bản MVP.
Về chi phí, đọc tại trang giá hai dịch vụ ngày 20/09/2026:
| Dịch vụ | Gói miễn phí | Giới hạn đáng nhớ | Khi nào phải trả phí |
|---|---|---|---|
| Supabase | Free | 500 MB cơ sở dữ liệu, 1 GB lưu file, 50.000 người dùng hoạt động mỗi tháng, 2 dự án; dự án bị tạm dừng sau 1 tuần không dùng | Dùng thật cho khách hàng: gói Pro từ 25 USD/tháng, có sao lưu |
| Vercel | Hobby | 100 GB truyền dữ liệu mỗi tháng, 100 lần triển khai mỗi ngày, tên miền riêng và HTTPS có sẵn; chỉ cho dùng cá nhân, không thương mại | Bán hàng thật: gói Pro 20 USD mỗi người dùng mỗi tháng |
Điểm nhiều người bỏ qua: gói Hobby của Vercel không cho dùng thương mại. Học và thử ý tưởng thì miễn phí, bán hàng thật thì chuyển gói.
Câu kiểm tra: gửi link cho một người chưa từng thấy dự án, họ đăng ký, đăng nhập và làm được việc chính mà không cần bạn hướng dẫn.
Khi nào dừng Vibe Coding và gọi người có chuyên môn
Quy trình trên đủ cho công cụ nội bộ, trang đích, bản mẫu thử ý tưởng, cửa hàng nhỏ. Khóa cũng chỉ rõ ba dấu hiệu sản phẩm đã vượt tầm:
- Lưu dữ liệu nhạy cảm: thông tin thanh toán, giấy tờ tùy thân, hồ sơ sức khỏe.
- Nhiều người dùng đồng thời và lỗi gây thiệt hại tiền thật.
- Tích hợp với hệ thống cũ của công ty mà bạn không có tài liệu.
Lúc đó, cách hợp lý là giữ bản Vibe Coding làm bản mẫu để nói chuyện với người làm phần mềm, thay vì cố đưa bản mẫu ra dùng thật.
Câu hỏi thường gặp
Cần biết lập trình trước không? Không, nhưng cần đọc hiểu được mã ở mức biết AI đang sửa file nào và tại sao. Khóa dạy đúng mức đó, không hơn.
Dùng Google AI Studio hay Cursor? Khóa bắt đầu bằng Google AI Studio vì không phải cài gì. Người muốn công cụ chuyên nghiệp hơn học tiếp khóa Cursor AI và Claude Code; bài Cursor và Claude Code khác nhau thế nào so sánh hai công cụ đó.
Web app làm xong có đưa vào chatbot bán hàng được không? Được theo hướng ngược lại: chatbot đọc dữ liệu sản phẩm từ chính cơ sở dữ liệu Supabase của web app. Bài chatbot Zalo và Messenger bằng n8n mô tả cách nối.
Học tiếp
Khóa Vibe Coding cho người mới đi đúng bảy bước này trong 8 đến 10 buổi, kết thúc bằng web app MVP có đăng nhập chạy trên Internet. Người muốn hiểu vì sao AI hay bỏ sót phần bảo mật đọc thêm bài AI bịa thông tin: cùng một cơ chế, AI trả lời cho có thay vì nói không biết.
Sản phẩm học viên làm sau khóa học
Ảnh chụp màn hình từ dự án cuối khóa của học viên.
-
Website bán bật lửa cao cấp
Website thương mại điện tử có menu, banner và nút gọi hành động, do học viên dựng.
Vibe Coding
