Khoá học vibe coding với Gemini và Antigravity: từ ý tưởng tới app thu tiền

Khoá thứ bảy trong loạt khoá học AI miễn phí của MONA, và là khoá dành cho phe Google trong cuộc đua công cụ lập trình AI: vibe coding với Gemini 3.1 và Antigravity, môi trường lập trình AI miễn phí mà Google tung ra để đấu trực diện với Claude Code. Vibe coding, nói kiểu dễ hiểu, là cách làm phần mềm bằng lời: anh chị tả thứ mình muốn, AI viết code, anh chị nhìn kết quả và tiếp tục “nắn” bằng lời cho tới khi ưng. Khoá này dựng theo giáo trình 6 tiếng rưỡi mà đội tụi em đã học, lọc và Việt hoá lại: từ cài đặt Antigravity, dựng website đầu tiên trong 15 phút, tới build hẳn ba ứng dụng có đăng nhập, có cơ sở dữ liệu, có thanh toán, và chốt bằng chuyện ít ai dạy: định giá và bán thứ mình vừa làm ra. Anh chị đã học khoá Claude Code của loạt này rồi thì coi đây là mảnh ghép đối xứng bên nhà Google, còn chưa học khoá nào thì vào thẳng đây cũng không sao: khoá tự đứng được một mình.

Phần 1: Vibe coding là gì, và vì sao bộ đôi Gemini 3.1 với Antigravity đáng học

Trong ba khoá Claude Code trước, anh chị đã thấy triết lý “AI làm, người điều binh”. Vibe coding là tên gọi phổ biến của chính cách làm đó, nhìn từ phía người không chuyên: thay vì học cú pháp, anh chị học cách ra đề, soi kết quả, và phản hồi. Ba kỹ năng đó, cộng một bộ công cụ tử tế, đủ để một người làm kinh doanh dựng được công cụ nội bộ, trang giới thiệu, thậm chí một phần mềm dịch vụ nho nhỏ có thu tiền.

Bộ đồ nghề của khoá này gồm ba món, và lý do chọn từng món rất thực dụng:

• Antigravity (tải tại antigravity.google): môi trường lập trình AI của Google, hiện miễn phí, đăng nhập bằng tài khoản Google là chạy. Bên trong có sẵn Gemini 3.1 Pro và cả các model nhà khác để gọi.
• Gemini 3.1 Pro: bộ não chính. Điểm mạnh nổi bật mà cả cộng đồng lẫn trải nghiệm của tụi em đều xác nhận: làm giao diện đẹp bậc nhất trong các model hiện nay. Việc thiết kế, dàn trang, hiệu ứng: giao Gemini.
• Claude Code (đã có nguyên khoá riêng): gọi vào khi cần kiến trúc backend chắc tay và soát bảo mật. Khoá này sẽ dạy anh chị cách bắt hai model làm việc chung một dự án, mỗi đứa đúng sở trường, thay vì cãi nhau xem đứa nào giỏi hơn.

Một lời thật lòng trước khi vào bài, đúng tinh thần mọi khoá của tụi em: vibe coding không biến anh chị thành công ty phần mềm sau một đêm. Nó cực mạnh cho ba việc: dựng bản thử nghiệm để kiểm chứng ý tưởng, làm công cụ nội bộ cho chính công ty mình, và hiểu nghề đủ sâu để làm việc với đội kỹ thuật cho khôn. Còn hệ thống gánh doanh thu thật, giữ dữ liệu nghìn khách hàng thật, thì cần thêm những thứ khoá này cũng sẽ chỉ ra chứ không giấu: bảo mật, kiểm thử, người chịu trách nhiệm. Phần cuối khoá tụi em vạch ranh giới đó rõ ràng.

Phần 2: Cài đặt và làm chủ Antigravity: ba khung cửa sổ và bảng điều khiển agent

Cài đặt đúng nghĩa 10 phút: vào antigravity.google, tải bản cho máy mình (Mac thì xem chip Apple Silicon hay Intel trong “About This Mac”, Windows thì chạy trình cài rồi bấm đồng ý vài lần), mở lên, đăng nhập Google. Xong. Không thẻ tín dụng, không cấu hình gì thêm.

Màn hình chính chia ba khung, anh chị nắm ba khung này là hết bỡ ngỡ:

• Trái: Explorer, cây thư mục dự án, như Finder. Chuột phải để tạo, đổi tên, xoá file; có cả “timeline” xem lịch sử một file đã bị sửa những gì.
• Giữa: trình soạn thảo, nơi mở file xem code. File Markdown có nút xem bản đẹp. Antigravity còn có loại file riêng tên walkthrough: AI tự viết tường trình nó vừa làm gì, kèm nút duyệt và góp ý từng mục.
• Phải: bảng agent, trái tim của cả công cụ, mở bằng nút góc trên phải. Đây là nơi anh chị ra đề và AI làm việc.

Bảng agent có mấy món đáng tiền mà người mới hay bỏ sót:

• Hai chế độ hội thoại: Planning (model lập kế hoạch, trình cho anh chị duyệt rồi mới đụng file) và Fast (làm luôn). Nguyên tắc thuộc lòng: tính năng mới, việc lớn thì mở màn bằng Planning; việc vặt một phát ăn ngay thì Fast. Đây chính là “plan mode” mà anh chị đã gặp trong khoá Claude Code, tư duy y hệt.
• Rules và Workflows: Rules là luật hành xử cố định (đặt chế độ “Always on” cho chắc, các chế độ kích hoạt khác thực tế ít ai dùng), còn Workflows là chuỗi bước đóng gói để gọi lại nhiều lần, tương đương “skills” bên nhà Claude. Đặc biệt: nếu trong thư mục dự án có file tên GEMINI.md, model luôn tự đọc nó làm luật gốc, giống hệt vai CLAUDE.md mà anh chị đã quen ở khoá trước.
• Gõ “@” để nạp ngữ cảnh: đính file, thư mục, cuộc hội thoại cũ vào đề bài thay vì dán nguyên văn làm bẩn bộ nhớ.
• Đổi model giữa chừng: menu chọn model cho phép nhảy giữa Gemini 3.1 Pro High, bản Low, Flash và cả các model Claude ngay trong một cuộc hội thoại. Kinh nghiệm đáng giá: model Claude chạy trong Antigravity lại kém hơn chạy trong chính Claude Code, nên cứ phân thân: đồ Gemini xài trong Antigravity, đồ Claude xài trong Claude Code.
• Đọc đề bằng giọng nói: người gõ trung bình 50-80 từ một phút, nói được 150-200 từ. Tả giao diện, kể lỗi bằng miệng nhanh gấp đôi gõ, và model nghe hiểu tốt.
• Tab Thought: xem “dòng suy nghĩ” của model, hữu ích khi nghi nó lười hoặc hiểu lệch đề.

Còn vài góc khuất đáng biết để không mất công mò. Tab Changes liệt kê mọi file model vừa đụng vào, liếc một vòng trước khi gật đầu là thói quen của người cẩn thận. Tab Terminal cho thấy các lệnh nó đang chạy ngầm (dựng khung, cài thư viện): thấy terminal đứng im quá lâu thường là nó đang chờ mình trả lời một câu hỏi bị trôi mất phía trên. Tab Browser thì cho model tự mở trình duyệt bên trong Antigravity để xem trang nó vừa dựng: tiện để nó tự kiểm, dù độ mượt chưa bằng anh chị tự mở tab thật. Và một chi tiết nhỏ mà người dùng lâu mới để ý: lịch sử hội thoại cũ mở lại được bất kỳ lúc nào, kèm câu hỏi “mở trong cửa sổ hiện tại hay workspace mới”: chọn workspace mới thì nó bê theo cả bối cảnh file cũ, rất hợp khi muốn rẽ nhánh thử một hướng khác mà không phá bản đang chạy.

Về MCP servers (mục thứ ba trong phần tuỳ chỉnh): hiểu ngắn gọn là “workflow người khác đóng gói sẵn cho mình xài”, ví dụ kết nối chuẩn hoá tới GitHub, Stripe, PostgreSQL. Nghe hoành tráng, nhưng lời khuyên thực dụng của cả giáo trình lẫn trải nghiệm tụi em: người mới chưa cần đụng tới. Bộ ba Rules, Workflows và “@” nạp ngữ cảnh đã phủ được chín phần mười nhu cầu; MCP để dành khi anh chị đã chạy trơn và cần nối vào hệ thống ngoài.

Phần 3: Website đầu tiên trong 15 phút, từ đề bài tới đường link thật

Bài thực hành khai trương của khoá: dựng website giới thiệu cá nhân hoặc công ty, đưa lên mạng thật. Quy trình bốn bước:

1. Tạo thư mục mới, đặt file GEMINI.md. Trong file này dán “đề bài khung”: yêu cầu model đóng vai kỹ sư front-end hạng nặng, dựng trang đích chất lượng dựng phim, và quan trọng nhất: cấm các khuôn AI đại trà (kiểu hero chuẩn + ba cột tính năng + nút kêu gọi, cái khuôn mà nhìn phát biết ngay web AI làm). Đề khung còn liệt kê các “kiểu kiến trúc” cho model chọn: lưới bento, chia đôi màn, cuộn ngang, kể chuyện tuyến tính.
2. Gõ một câu: “dựng cho tôi website”. Model sẽ hỏi lại tên thương hiệu, thông điệp lõi, kiểu thẩm mỹ, ba trụ nội dung, mục tiêu chuyển đổi. Trả lời xong, nó tự lên kế hoạch, tự chạy lệnh dựng khung, tự cài thư viện, tự viết từng trang: anh chị ngồi xem tab kế hoạch và danh sách việc nó tự tick.
3. Nắn bằng lời: gom một tràng góp ý (đổi thanh menu, phóng to tiêu đề, thêm phần giới thiệu, sửa số bị tràn khỏi khung) đọc bằng giọng nói một thể, kèm ảnh chụp màn hình trang khác làm mẫu tham khảo. Đây đúng kỹ thuật “tràng góp ý” của khoá làm app, dùng lại nguyên si.
4. Đưa lên mạng bằng Netlify: dịch vụ đặt web miễn phí cho vài trang đầu. Cách thô sơ nhất: vào netlify.com, chọn “Deploy manually”, kéo thả nguyên thư mục dự án vào trình duyệt. Vài chục giây sau có đường link thật gửi được cho khách. Cách xịn hơn (nối GitHub để tự cập nhật mỗi lần sửa) học ở phần sau.

Hai điều nhỏ đáng nói thêm về bài này. Thứ nhất, cùng một đề khung, chạy vài lần ở vài thư mục khác nhau sẽ ra vài phong cách khác hẳn nhau: giáo trình khuyến khích làm đúng vậy rồi chọn bản ưng nhất, vì mười phút chạy thêm rẻ hơn nhiều so với cố nắn một bản mình không ưng từ gốc. Thứ hai, khi nắn giao diện, ảnh chụp màn hình đáng giá hơn nghìn chữ mô tả: thấy thanh menu nào đẹp ở web người ta, chụp dán vào kèm chữ “làm giống vầy” là model bắt được thần thái ngay; và nên chụp ảnh gọn thôi, vì mỗi điểm ảnh đều tốn token, ảnh to đùng chỉ làm phiên làm việc mau cạn bộ nhớ.

Website tĩnh kiểu này chưa có đăng nhập, chưa có dữ liệu, nên chưa phải lo bảo mật nặng. Nhưng ngay bài kế tiếp, khoá cố tình dừng lại một nhịp trước khi cho anh chị build app thật, vì lý do mà phần 4 nói thẳng.

Phần 4: Bảo mật 80/20: năm lỗ thủng gây ra tám phần mười tai nạn của dân vibe coding

Chuyện có thật được nhắc trong giáo trình: một dự án AI đình đám từng để lộ khoảng 25.000 khoá API của người dùng, hoá đơn bị kẻ xấu cào lên, dữ liệu phơi ra ngoài. Dân vibe coding dễ dính đòn hơn dân code tay không phải vì AI viết code tệ, mà vì người ra đề không biết mình cần đòi hỏi gì. Năm lỗ thủng sau gây ra phần lớn tai nạn, anh chị nắm đủ năm là đã đứng trên 80% người chơi:

1. Lộ khoá API và biến môi trường. Khoá API dán thẳng vào code giao diện thì ai mở trang web lên bấm tìm kiếm là thấy. Luật: mọi khoá nằm trong file .env, file đó cấm đưa lên GitHub, cấm nằm trong phần code trình duyệt tải về.
2. Quên bật khoá từng hàng dữ liệu (RLS) trên Supabase. Supabase (cơ sở dữ liệu của cả loạt khoá này) mặc định không bật RLS; không bật thì ai có địa chỉ dự án cũng đọc, sửa, xoá được dữ liệu của mọi người dùng. Thống kê được dẫn trong giáo trình: 83% vụ lộ dữ liệu Supabase là do cấu hình RLS sai, không phải do hacker cao siêu. Bật nó chỉ là một nút gạt, và câu lệnh anh chị cần nhớ khi ra đề: “bật RLS cho mọi bảng”.
3. Chỉ kiểm tra ở phía trình duyệt. Luật kiểm tra (email hợp lệ chưa, mật khẩu đủ dài chưa, người này có quyền chưa) mà chỉ nằm ở giao diện thì kẻ xấu sửa vài dòng là lách qua. Mọi kiểm tra quan trọng phải làm ở phía máy chủ, nơi người ngoài không đụng được.
4. Thư viện ma và thư viện cũ. AI thỉnh thoảng bịa tên thư viện không tồn tại; kẻ xấu biết vậy nên đăng sẵn gói giả mang đúng tên bịa, cài vào là dính mã độc. AI cũng hay cài bản cũ còn lỗ hổng. Luật: dặn model “luôn cài bản mới nhất”, và soát danh sách thư viện trước khi đưa cho người khác dùng.
5. Thiếu người gác cửa (middleware). Trang cần đăng nhập mà gõ thẳng địa chỉ vẫn vào được là hỏng. Nguyên tắc chuẩn: mặc định từ chối, mọi ngả đường đều qua trạm xác thực trừ những trang công khai được khai báo rõ.

Và một nghi thức bắt buộc học từ khoá Claude Code, ở đây lặp lại vì nó sống còn: soát bảo mật bằng một phiên sạch, và nên là một model khác hẳn. Xây app bằng Gemini thì mở Claude Code cho nó soát, và ngược lại. Model soát phải được dặn “chỉ kiểm, chưa được sửa”, chạy hết danh mục, báo đạt hay hỏng từng mục, rồi mới cho lệnh sửa. Lý do dùng “người lạ”: model đã xây ra code sẽ nhìn code bằng con mắt bao dung của cha mẹ nhìn con, còn model lạ nhìn bằng mắt thanh tra. Trong giáo trình, chính vòng soát chéo kiểu này bắt được một lỗi chí mạng: đường API tốn tiền có thể bị gọi thẳng không cần đăng nhập, nghĩa là kẻ xấu có thể đốt tiền khoá API của chủ app từ xa. Một vòng soát 20 phút đổi lấy việc không phải nhận hoá đơn trên trời: món hời nhất khoá.

Phần 5: Vòng lặp thiết kế chuẩn tám bước, và bộ khung đồ nghề đi kèm

Đây là phần đáng dán lên tường nhất khoá: thứ tự dựng một app full-stack. Người mới hay chết vì làm đúng việc nhưng sai thứ tự (điển hình: làm đăng nhập đầu tiên). Vòng lặp chuẩn tám bước, dùng lại cho mọi sản phẩm về sau:

1. Kiếm cảm hứng thiết kế: lượn Dribbble hoặc Godly (hai kho thiết kế đẹp của giới làm nghề), chụp màn hình mẫu ưng. Đừng bắt model tự nghĩ ra cái đẹp từ chân không: cho nó ảnh mẫu, chất lượng nhảy một trời.
2. (Tuỳ chọn) một điểm nhấn động: ảnh hoặc video nền sinh bằng AI cho phần đầu trang, để app mình không giống hàng chợ.
3. Chức năng chính trước: dashboard, trang thao tác lõi.
4. Chạy thử hoàn toàn trên máy, dữ liệu giả bằng file JSON, chưa đụng cơ sở dữ liệu.
5. Nối cơ sở dữ liệu thật (Supabase), chạy lại toàn bộ.
6. Đăng nhập làm GẦN CUỐI: lý do kỹ thuật hẳn hoi: làm đăng nhập sớm thì trạm gác chỉ canh mấy trang có mặt lúc đó, các trang sinh sau lọt lưới; làm cuối thì model nhìn được toàn bộ app và giăng lưới đủ.
7. Đưa lên mạng rồi kiểm lại từ đầu tới cuối: máy mình và máy chủ thật luôn khác nhau, kiểu gì cũng lòi vài lỗi chỉ có trên môi trường thật.
8. Trang đích làm chót, vì nó ít logic nhất, gộp luôn vào đợt đưa lên mạng.

Bộ khung đồ nghề đi kèm vòng lặp, cũng là “bộ đồ nghề quen mặt” của cả giới:

• Next.js làm khung web: lý do sâu xa đáng nhớ: các model AI được luyện trên hàng núi dự án dùng khung phổ biến, nên bảo nó viết Next.js là nó viết bằng “tiếng mẹ đẻ”, chất lượng cao hơn hẳn khung lạ.
• Supabase làm cơ sở dữ liệu và đăng nhập: hình dung như một bảng tính khổng lồ có cổng khoá. Mẹo nhanh: gõ thẳng database.new trên trình duyệt là ra trang tạo dự án Supabase mới.
• Netlify (hoặc Vercel) để đưa lên mạng, nối được với GitHub để mỗi lần sửa code là trang tự cập nhật.
• Kiến thức nền đủ xài gói trong bốn câu: máy khách (trình duyệt) chỉ lo hiển thị; máy chủ lo logic và kiểm tra; cơ sở dữ liệu lo lưu, mỗi bảng như một sheet có cột khoá chính không được trùng; SQL (PostgreSQL là phổ biến nhất) cho dữ liệu có khuôn, NoSQL cho dữ liệu tự do, và người mới cứ SQL mà đi.

Tới đây anh chị đã có trong tay đúng bộ xương mà các xưởng phần mềm thật đang dùng. Nhân tiện nói luôn một câu về tiền, vì tụi em gặp cảnh này hằng tuần: nhiều doanh nghiệp đến MONA sau khi đã trả vài chục tới cả trăm triệu cho một “phần mềm đặt làm” mà bên nhận việc thực chất cũng vibe coding y những bước này, nhưng bỏ bước 4 lỗ thủng bảo mật và bỏ luôn khâu soát chéo. Học khoá này xong, ít nhất anh chị biết đòi hỏi đúng thứ cần đòi hỏi khi đi thuê: hỏi nhà thầu “RLS bật chưa, kiểm tra phía máy chủ ở đâu, ai soát bảo mật độc lập” là đủ lọc được nửa thị trường. Còn muốn tụi em soát giúp một phần mềm đang được chào hay đang chạy dở, gọi 1900 636 648: MONA khám và nói thẳng đáng tiền hay không, trước khi anh chị xuống thêm đồng nào.

Phần 6: Thực chiến 1: dashboard khách hàng có đăng nhập, dữ liệu thật, chạy trên mạng thật

Dự án đầu tay đúng nghĩa của khoá: cổng thông tin cho khách hàng của một công ty dịch vụ nội dung: khách đăng nhập, xem tiến độ đơn hàng, đặt đơn mới, chỉnh cài đặt. Mô hình này áp thẳng được cho công ty dịch vụ Việt bất kỳ: agency, xưởng in, đơn vị bảo trì, trung tâm đào tạo.

Diễn biến và các bài học đắt nhất:

• Lập kế hoạch bằng một model, thi công bằng model khác. Mở màn bằng chế độ Plan trong Claude Code (Opus) cho phần kiến trúc: đề bài kiểu “anh là kiến trúc sư 15 năm kinh nghiệm, dựng kế hoạch cho dashboard gồm các trang này, thứ tự build theo vòng lặp tám bước”. Xong copy nguyên bản kế hoạch dán sang Gemini 3.1 Pro High trong Antigravity kèm ảnh mẫu Dribbble để nó thi công, vì Gemini ráp giao diện đẹp hơn. Đây là lần đầu anh chị thấy hai model nối ca nhau đúng sở trường.
• Tách phase chức năng và phase làm đẹp. Luật vàng: đừng trộn “sửa nút hỏng” với “đổi màu đổi font” trong cùng một mạch hội thoại dài, model dễ loạn. Chức năng chạy ổn rồi mở cuộc hội thoại mới, sạch ngữ cảnh, chỉ để làm đẹp.
• Gom lỗi thành tràng, đọc bằng miệng. Một lượt góp ý mẫu trong giáo trình gồm chục lỗi một thể: chữ menu nhạt quá, thiếu biểu đồ, bấm đơn hàng báo “không tìm thấy”, nút “đánh dấu đã đọc” bị liệt, kèm nguyên văn thông báo lỗi của Next.js dán vào. Model xử cả tràng một lượt. Đúng nghề “nắn app” của khoá làm app điện thoại, không đổi một ly.
• Soi logic nghiệp vụ, đừng chỉ soi giao diện. Model tự tiện thêm nút “Bắt đầu làm việc” cho khách bấm, trong khi dashboard này khách chỉ được XEM. Máy không hiểu việc kinh doanh của anh chị, anh chị phải là người bắt những lỗi kiểu này: không ai bắt thay được.
• Trước khi cạn bộ nhớ, bắt model viết bàn giao. Hội thoại dài thì bộ nhớ ngữ cảnh cạn. Trước mỗi chặng lớn, lệnh cho model ghi toàn bộ tiến độ và dặn dò vào file GEMINI.md để phiên sau (hoặc model khác) đọc là tiếp việc được ngay. Anh chị nhận ra rồi đó: đây chính là “sổ tay bàn giao” CLAUDE.md của khoá trước, phiên bản nhà Google.
• Lên mạng thật mới lòi lỗi thật. Đăng ký tài khoản trên bản chạy thật thì email xác nhận trỏ về… localhost, vì cấu hình Site URL bên Supabase vẫn để địa chỉ máy nhà. Sửa một ô cấu hình là xong, nhưng bài học thì lớn: chưa kiểm đủ vòng trên môi trường thật thì chưa được gọi là xong.

Khâu nối Supabase đáng tả kỹ hơn một chút vì anh chị sẽ lặp lại nó ở mọi dự án sau. Trình tự chuẩn: gõ database.new tạo dự án mới (bản miễn phí cho hai dự án), đặt mật khẩu cơ sở dữ liệu loại máy sinh cho mạnh, rồi nhặt bốn thứ dán vào file .env: địa chỉ dự án, mã dự án, khoá công khai, khoá bí mật. Model sẽ tự sinh kịch bản SQL tạo bảng: anh chị chỉ việc dán vào SQL Editor của Supabase và bấm chạy, không cần hiểu từng dòng, chỉ cần biết nó đang “kẻ bảng” cho app. Mẹo tăng tốc lúc thử nghiệm: vào phần Authentication tắt tạm “confirm email” để đăng ký không phải chờ thư xác nhận, nhưng nhớ bật lại trước khi cho người thật dùng. Và kiểm tra trạm gác bằng tay: gõ thẳng từng địa chỉ trang (/dashboard, /orders, /settings) lúc chưa đăng nhập, tất cả phải đá về trang login, sót trang nào là trạm gác thủng trang đó.

Riêng khâu làm đẹp lượt hai của dashboard này có mấy chiêu đáng học lỏm. Chọn một mẫu Dribbble kiểu thanh bên tối, nội dung nền sáng, rồi ra đề “nhại font, màu, kiểu viền, kiểu thẻ của ảnh này”: model bắt thần thái tốt bất ngờ. Đổi toàn bộ tiêu đề từ kiểu Viết Hoa Từng Chữ sang kiểu viết thường đầu câu: một thay đổi chữ nghĩa thuần tuý mà giao diện trưởng thành hẳn lên. Đổi đổ bóng thành viền mảnh cho khớp mẫu. Và mạnh tay xoá các nút không có trang phía sau: model rất thích vẽ sẵn menu “calendar, reports, portfolio” cho sang, nhưng nút bấm vào không đi đâu là vết nứt niềm tin đầu tiên của người dùng. Câu triết lý của giáo trình mà tụi em tâm đắc: sự đơn giản rồi sẽ là con hào: sắp tới ai cũng vibe coding được, app nào cũng thừa tính năng, thì app gọn gàng dễ hiểu lại thành của hiếm.

Một chiêu trang trí đáng tiền nữa của giáo trình: hero động sinh bằng AI. Quy trình bốn bước: tìm một khối 3D đẹp trên Dribbble làm mẫu; vào AI Studio nhờ model tạo ảnh sinh một khối tương tự nền trắng tinh, tông màu theo thương hiệu, độ phân giải 2K; đưa ảnh đó vào Veo (model biến ảnh thành video của Google) với đề bài “xoay chậm 6 giây, khung hình cuối trùng khung hình đầu để lặp mượt”; tải video về bỏ vào thư mục public của dự án làm nền phần đầu trang. Lưu ý thật thà: nền video sinh ra không phải lúc nào cũng trắng tinh như đặt hàng, có khi phải xử lý thêm hoặc thay bằng asset có sẵn từ cộng đồng Spline: nhưng tổng công một buổi cà phê cho một hero động không đụng hàng, so với thuê ngoài là rẻ như cho.

Phần 7: Thực chiến 2: SaaS tìm khách hàng tiềm năng, nghề “bọc API” kiếm cơm

Dự án thứ hai ăn thẳng vào ví: app quét danh sách khách hàng tiềm năng (lead) theo ngành, chức danh, khu vực, quy mô công ty; bổ sung email; rồi viết sẵn câu mở đầu cá nhân hoá cho từng người bằng AI. Đây là mô hình bọc API: app của mình thực chất là lớp giao diện thân thiện bọc quanh vài dịch vụ có sẵn: Apify lo phần quét dữ liệu (kho này có sẵn hàng nghìn “actor” quét đủ thứ), AnyMailFinder lo tìm email, API của Anthropic hay OpenAI lo viết câu chào. Nghe “chỉ là bọc” tưởng tầm thường, nhưng nhìn quanh thị trường SaaS hiện nay: rất nhiều sản phẩm thu tiền thật đều là lớp trải nghiệm tốt bọc quanh API người khác. Phần mềm hết là con hào; trải nghiệm và phân phối mới là con hào.

Bài học kỹ thuật đắt nhất của dự án này:

• Cho model đọc tài liệu API thật. Apify có nút “copy for LLM” chép nguyên trang tài liệu cho AI đọc; dán kèm khuôn dữ liệu đầu vào của actor. Model đọc tài liệu thật thì nối API trúng; bắt nó đoán thì nó bịa.
• Bắt nó thử bằng curl trước khi ráp vào app: gọi API trần trụi cho chạy được đã, rồi mới lồng vào giao diện. Tách bạch “API sống chưa” khỏi “app nối đúng chưa”, lỗi ở khúc nào lộ ngay khúc đó.
• Khoá API cấp riêng cho dự án và đặt hạn dùng ngắn. Khoá Apify trong giáo trình được đặt hết hạn sau một ngày: lỡ quên xoá cũng không thành cửa hậu vĩnh viễn. Thói quen nhỏ, đẳng cấp lớn.
• Hết hạn mức model giữa chừng là chuyện thường. Gemini cày một tiếng thì đụng trần lượt dùng; giáo trình chuyển sang Opus trong Claude Code làm tiếp. Kỹ thuật chuyển ca đúng cách: bắt model đang làm “viết một bản đề bài tổng hợp mọi thứ đã bàn tới giờ” rồi dán cho model mới. Cấm nhảy model tay không, không có biên bản bàn giao là model mới phá nát mạch cũ.
• Batch cho nhanh: khâu viết câu chào cá nhân hoá ban đầu chạy tuần tự từng lead một, chậm rì; một câu lệnh “gom thành lô, làm gì thì làm cho nhanh lên” là model tự chuyển sang chạy song song. Anh chị không cần biết code, chỉ cần biết đòi.

Dự án này còn dạy một kỹ năng phụ mà dân kinh doanh rất khoái: làm logo bằng AI trong 5 phút. Vào AI Studio (aistudio.google.com), gọi model tạo ảnh của Google, đề bài kiểu: “logo vuông tối giản, nhìn phát hiểu ngay, sang, cho một phần mềm quét khách hàng tiềm năng”, tỷ lệ 1:1, độ phân giải 2K; chưa ưng thì dí tiếp “phong cách icon phẳng, nhại theo mẫu dưới đây” kèm ảnh tham khảo, rồi “bỏ chữ, giữ hình”. Ba lượt là có logo dùng tạm được cho bản thử nghiệm: sau này sản phẩm sống thật hẵng thuê thiết kế làm bộ nhận diện tử tế.

Phần 8: Thực chiến 3: app AI thu tiền thật với Stripe, và bài học “thanh toán là một núi việc riêng”

Dự án thứ ba đi nốt mảnh cuối của một SaaS đúng nghĩa: thu tiền. App demo: công cụ tạo ảnh thumbnail YouTube bằng AI (đưa ảnh mẫu + ảnh mặt mình, AI ghép ra ba phương án), bán theo gói credit: nạp tiền lấy điểm, mỗi lần tạo ảnh trừ điểm, hết điểm mời nạp tiếp.

Kiến thức thanh toán gói gọn để anh chị nói chuyện được với bất kỳ đội kỹ thuật nào:

• Không bao giờ tự cầm số thẻ. Chuẩn ngành là Stripe-hosted checkout: app đẩy khách sang trang thanh toán do Stripe vận hành, Stripe lo bảo mật thẻ, chống gian lận, hoá đơn. Phí quanh mức 2,9% cộng 30 cent mỗi giao dịch. Ở Việt Nam anh chị sẽ gặp các cổng nội như VNPay, PayOS, Momo: mô hình y hệt, chỉ đổi tên cổng.
• Ba mảnh code bắt buộc của mọi luồng thanh toán: tạo phiên thanh toán và đẩy khách đi; webhook nhận tín hiệu “đã trả tiền thành công” từ cổng về; và hàm kiểm quyền trước mỗi lần khách xài tính năng tốn tiền. Ba mô hình giá phổ biến: mua đứt một lần, thuê bao tháng, và gói credit như app này.
• Sandbox trước, tiền thật sau. Mọi thử nghiệm chạy trong chế độ thử của Stripe. Khoá bí mật bản thật mà lộ là hoá đơn không đáy.

Và chuỗi lỗi có thật của dự án này, kể ra để anh chị đỡ hoảng khi tự dính: thanh toán xong bị đá vòng vòng về trang trả tiền (lỗi ghi nhận trạng thái); bấm gói Pro nhưng checkout nhảy ra gói rẻ nhất (lỗi truyền tham số gói); app lag hẳn sau khi thêm thanh toán (lỗi mỗi lần mở trang lại tải toàn bộ dữ liệu thay vì dùng bộ đệm); và bản chạy thật báo lỗi ở giây 22 mỗi lần tạo ảnh, thứ chạy máy nhà thì ngon: hoá ra máy chủ miễn phí của Netlify ngắt hàm sau chừng 15-20 giây, còn máy nhà thì không giới hạn. Xâu chuỗi các pha xử lý: cứ đưa cho model tối đa bối cảnh (ảnh chụp, thông báo lỗi nguyên văn, cả tiền đã về ví Stripe chưa), nói thẳng khi nghi thông báo lỗi đánh lạc hướng, và mỗi lượt chỉ yêu cầu một thay đổi lớn: kinh nghiệm xương máu với mọi model AI hiện nay. Câu chốt của cả dự án đáng khắc lên bàn: thời gian làm SaaS không nằm ở khâu xây, nằm ở khâu ra đề và kiểm chứng: xây thì AI lo rồi.

Ngoài chuyện tiền nong, dự án này còn để lại một xấp mẹo trau chuốt sản phẩm đáng chép về:

• Thông báo tử tế thay cho hộp thoại thô: mọi chỗ đang dùng hộp alert của trình duyệt đổi thành thông báo mềm trong giao diện, kèm các nút “mở tab mới, tải ảnh về, tạo lại”: chi tiết nhỏ mà cảm giác sản phẩm lên hẳn một hạng.
• Gửi thêm yêu cầu trong lúc model đang chạy: Antigravity cho xếp hàng tin nhắn: model đang làm dở việc cũ vẫn nhận việc mới và tự dệt vào mạch. Anh chị không phải ngồi chờ từng lượt như xếp hàng mua phở.
• Hết điểm phải có lối ra: người dùng cạn credit mà chỉ nhận thông báo lỗi là hỏng bài; luật đúng: tự đưa họ về trang nạp, kèm lý do rõ ràng. Mọi ngõ cụt trong app đều phải có bảng chỉ đường về chỗ trả tiền: nghe thực dụng, nhưng đó là khác biệt giữa app thử nghiệm và app kinh doanh.
• Đồng bộ ngôn ngữ thiết kế: model rất hay tự tiện bo tròn góc, đổ bóng, phối màu theo nết cũ của nó. Muốn sản phẩm có cá tính riêng thì phải dặn đích danh: vuông hay tròn, có bóng hay phẳng, bảng màu mã hex cụ thể, và dặn một lần trong GEMINI.md để mọi phiên sau tự tuân.

Phần 9: Nghệ thuật điều binh nhiều agent: chạy song song, giữ hướng, và cái giá bằng tiền

Phần này dành cho anh chị đã chạy ngon một agent và bắt đầu tham: liệu chạy nhiều đứa cùng lúc được không? Được, Antigravity sinh ra cho đúng việc đó, nhưng có luật.

• Agent Manager và Inbox: góc trên phải Antigravity có trung tâm quản lý mọi workspace và hội thoại; Inbox gom thông báo của tất cả agent về một chỗ, cảm giác đúng như bảo vệ ngồi xem một dàn camera. Giáo trình demo mở bốn hội thoại song song cùng dựng trang đích theo bốn phong cách, mười lăm phút ra cả chục bản để chọn. Vui, nhưng lời khuyên thật lòng: hai tới ba agent cùng lúc là trần hiệu quả với người thường: não người không chia được hơn thế, giám sát lỏng là agent trôi sai hướng hàng loạt.
• Nguyên tắc quỹ đạo: con thuyền vượt đại dương lệch hướng một độ ở km đầu tiên thì tới bờ bên kia lệch hàng trăm km. Agent y hệt: vài phút đầu của mỗi lượt build lớn là lúc phải ngồi kèm sát nhất, chỉnh hướng ngay khi thấy nó bắt đầu xây lệch, đừng để nó cày một tiếng rồi mới phát hiện phải đập đi.
• File bàn giao là mạch sống: dự án lớn cuối khoá chạy song song Gemini (lo giao diện) và Claude (lo backend), giữ cho hai đứa không giẫm nhau bằng một file updates.md: mọi thay đổi đều ghi vào đó, model nào vào ca cũng đọc trước. Có file này còn chơi được trò hay hơn: cho hai model phản biện nhau xem tính năng nào giữ, tính năng nào bỏ: bản “hội đồng kỹ thuật” giá rẻ mà chất lượng quyết định tăng hẳn.
• Nói thẳng chuyện tiền: phiên build nước rút của dự án cuối trong giáo trình đốt ước chừng 70 đô tiền model cho vài giờ chạy song song hết ga: đó là cái giá của “đổi tiền lấy tốc độ” khi có deadline, không phải nhịp tiêu chuẩn. Người học bình thường đi từng agent một, xài gói tháng cố định, tốn một phần nhỏ số đó. Bài học cho chủ doanh nghiệp: chi phí AI co giãn theo cách dùng, hãy coi nó như chi phí điện của xưởng: bật đúng máy lúc cần, không bật cả xưởng để sáng cho vui.

Phần 10: Kinh tế học vibe coding: định giá, bán, và ranh giới cuối cùng

Phần ăn tiền nhất với người làm kinh doanh, và là phần đa số khoá dạy code bỏ qua: làm ra rồi bán thế nào.

Định giá theo giá trị, không theo chi phí. Đừng cộng chi phí rồi nhân đôi, càng đừng nhìn giá đối thủ rồi hạ 10%: đó là đường đua xuống đáy. Công thức của giáo trình, tụi em thấy trùng khớp với cách MONA báo giá phần mềm hơn chục năm nay: tính tổng giá trị sản phẩm tạo ra cho khách mỗi tháng, rồi định giá bằng 10-20% con số đó. Giá trị gồm hai dòng: tiền tiết kiệm trực tiếp (thay công cụ đắt hơn, bớt giờ công) và tiền làm thêm được nhờ thời gian được giải phóng. Ví dụ trong giáo trình: app thumbnail giúp một kênh tiết kiệm 1.000 đô tiền thuê thiết kế mỗi tháng cộng 40 giờ công đáng giá 1.000 đô nữa: tổng giá trị 2.000 đô, định giá 200 đô một tháng: khách vẫn lãi gấp mười, mình vẫn sống khoẻ. Chia ba bậc giá: bậc cao đủ tính năng, bậc giữa nửa giá bớt tính năng, bậc vào cửa rẻ nhất: cho khách tự chọn chỗ đứng.

Mẹo vào cửa cho khách mới: cho nếm miễn phí đúng một lần. Chiến thuật được dạy cho sản phẩm cuối khoá và tụi em xác nhận là đòn tâm lý có thật: cho người lạ dùng tính năng lõi một lần, không cần đăng ký, chạm đúng khoảnh khắc “ồ” rồi mới mời trả phí. Người đã nhận một thứ có giá trị sẽ có xu hướng muốn “đáp lễ”: nguyên lý có đi có lại kinh điển của bán hàng, ở đây được cài thẳng vào sản phẩm. Gói miễn phí sau đó giới hạn credit đủ thấp để người dùng thật sự cần sẽ phải nâng cấp, không đủ rộng để ở lì.

Ba kênh bán, đi theo thứ tự. Một: chủ động gõ cửa (email lạnh, nhắn tin thẳng người có nhu cầu): ra tiền nhanh nhất nhưng cần mặt dày, và là kênh nên đi đầu tiên. Hai: xây nội dung hút khách về: chậm, có khi cả năm chưa thấy gì, rồi mới bùng: chuyển dần sang kênh này khi kênh một đã nuôi được mình. Ba: đại lý ăn hoa hồng (chia 20-30% cho người có sẵn tệp khách): chạy song song mọi giai đoạn. Mốc chuyển pha gợi ý trong giáo trình: doanh thu đều đặn cỡ chục nghìn đô một tháng từ kênh chủ động rồi hãy đổ công xây thương hiệu. Và một tỷ lệ đáng dán lên tường: xây sản phẩm chiếm 5% thời gian, bán chiếm 95%: phiên bản đầu tiên không bao giờ là phiên bản kiếm tiền, phiên bản thứ hai mươi mới là: nên ra sớm, mời hai chục người dùng miễn phí, nghe chê, sửa, lặp.

Áp cả khung này vào bối cảnh Việt Nam, tụi em thêm ba ghi chú từ thực tế đi bán phần mềm hơn chục năm. Một: khách doanh nghiệp Việt ít mua thuê bao, thích mua theo giá trị thấy được: gói credit và gói theo dự án thường dễ chốt hơn thuê bao tháng ở giai đoạn đầu, nên mô hình credit học trong phần 8 lại hợp thị trường mình hơn cả. Hai: kênh “gõ cửa chủ động” ở Việt Nam chạy mạnh nhất qua Zalo và các hội nhóm ngành nghề, không phải email lạnh kiểu Tây: cùng nguyên lý, đổi vũ khí. Ba: đừng định giá thấp để dễ bán: giá thấp kéo về đúng tệp khách trả ít đòi nhiều, và tự đóng cửa đường nâng cấp sau này: định giá 10-20% giá trị rồi chứng minh giá trị, khó hơn lúc đầu nhưng sống lâu hơn hẳn.

Khép loạt ba khoá về vibe coding, tụi em vẽ lại ranh giới lần cuối, bằng đúng trải nghiệm hơn 10 năm và 14.000+ dự án của MONA: vibe coding với Gemini và Antigravity đưa anh chị từ ý tưởng tới bản chạy được, thu tiền được nhanh chưa từng có: công cụ nội bộ, bản thử nghiệm thị trường, SaaS nhỏ gọn: chơi tất, và khoá này đã đưa đủ đồ nghề. Nhưng khi sản phẩm bắt đầu gánh doanh thu thật của nhiều khách, giữ dữ liệu nhạy cảm, chạy nghiệp vụ mà sập một giờ là mất tiền thật, cuộc chơi đổi luật: cần kiến trúc chịu tải, kiểm thử tự động, phân quyền, nhật ký, người trực và người chịu trách nhiệm pháp lý. Đó là lúc bản vibe coding của anh chị cần được công nghiệp hoá: và đó chính xác là nghề của MONA. Anh chị đang có một bản app tự dựng chạy ngon muốn nâng cấp thành hệ thống thật, hoặc một ý tưởng đã kiểm chứng muốn xây cho tới nơi: gọi 1900 636 648 hoặc gửi về info@themona.global, đội tụi em xem thẳng bản anh chị đang có, nói rõ giữ được gì, phải xây lại gì, giá bao nhiêu: báo giá minh bạch, ký giá nào làm đúng giá đó.

Phần 11: Sổ tay xử lý sự cố: bảy ca bệnh gặp nhiều nhất và thuốc theo toa

Gom hết kinh nghiệm ba dự án thành bảy ca kinh điển, in ra dán cạnh màn hình:

1. Model trả lời sơ sài, làm biếng. Mở tab Thought xem nó nghĩ gì; thường do đề bài mơ hồ hoặc hội thoại quá dài. Thuốc: chốt bản bàn giao vào GEMINI.md, mở phiên mới sạch sẽ.
2. Lỗi hiện chữ đỏ khó hiểu. Đừng diễn giải lại bằng lời mình: chép nguyên văn thông báo lỗi, kèm ảnh chụp màn hình, dán cho model. Diễn giải lại là khử mất manh mối.
3. Sửa hoài một lỗi không hết, model chạy vòng tròn. Dấu hiệu nó thiếu bối cảnh hoặc thông báo lỗi đang đánh lạc hướng. Thuốc: nói thẳng “lỗi này có thể không phản ánh nguyên nhân thật”, đổ thêm mọi dữ kiện mình có, hoặc đổi hẳn sang model khác nhìn bằng mắt mới.
4. Chạy máy nhà ngon, lên mạng thì hỏng. Nghi ngay ba thứ: cấu hình địa chỉ (kiểu Site URL còn trỏ localhost), biến môi trường chưa khai trên máy chủ, và giới hạn thời gian chạy hàm của gói miễn phí (15-20 giây là trần quen thuộc).
5. Giao diện mỗi trang một phách. Model tự tiện đổi nết qua từng phiên. Thuốc: chốt ngôn ngữ thiết kế (màu, góc, font, bóng) thành luật trong GEMINI.md ngay từ đầu, mọi phiên tự tuân.
6. App lag dần theo thời gian dùng. Thủ phạm quen mặt: mỗi lần mở trang lại tải toàn bộ dữ liệu từ đầu. Thuốc: ra đề “dữ liệu tải một lần rồi dùng bộ đệm, chỉ tải lại khi có thay đổi thật”.
7. Hết hạn mức model giữa trận. Chuyện thường ngày. Thuốc: biên bản bàn giao (bắt model đang làm tóm toàn bộ tiến độ) rồi chuyển ca sang model khác; hạn mức Gemini tự hồi sau vài giờ, quay lại làm tiếp.

Hỏi nhanh đáp gọn

Vibe coding là gì? Là cách làm phần mềm bằng lời: người tả, AI viết code, người soi kết quả và phản hồi tới khi đạt. Kỹ năng lõi gồm ra đề rõ, kiểm chứng kỹ, và biết vài nguyên tắc an toàn: khoá này dạy đủ ba.

Antigravity có miễn phí không? Có, tải tại antigravity.google, đăng nhập bằng tài khoản Google, dùng được Gemini 3.1 Pro với hạn mức miễn phí. Dùng nặng thì hạn mức tự hồi sau vài giờ, hoặc nâng gói Google AI trả phí.

Gemini với Claude Code, học đứa nào? Cả hai, mỗi đứa một sở trường: Gemini mạnh thiết kế giao diện, Claude mạnh kiến trúc và bảo mật. Loạt khoá của tụi em có đủ: ba khoá Claude Code và khoá này. Nhịp phối hai đứa nằm ở phần 6 và phần 9.

Không biết gì về code có học được không? Được, khoá viết cho người ra đề chứ không phải người gõ code. Cần nhất là chịu khó kiểm chứng và tuân thủ phần bảo mật 80/20 ở phần 4, còn code đã có AI viết.

App vibe coding có bán được thật không? Được, khoá có hẳn phần định giá và ba kênh bán. Nhưng tỉnh táo: xây chỉ chiếm 5% cuộc chơi, phiên bản đầu chưa phải phiên bản kiếm tiền, và sản phẩm gánh doanh thu lớn thì phải công nghiệp hoá phần kỹ thuật (phần 10 nói rõ ranh giới).

Dữ liệu và bảo mật có đáng lo không? Đáng, và lo được: 80% tai nạn đến từ năm lỗ thủng quen mặt (lộ khoá API, quên bật RLS, chỉ kiểm tra phía trình duyệt, thư viện ma, thiếu trạm gác). Làm đủ danh mục phần 4 cộng một vòng soát chéo bằng model khác là đứng trên đa số.

Khoá tiếp theo của loạt: quy trình agentic: xây hệ AI tự động cho công việc, nơi các kỹ năng điều binh của khoá này được nâng thành dây chuyền. Hẹn anh chị ở đó.