Đọc về vibe code thì dễ, làm xong một dự án trọn vẹn mới khó. Phần lớn người mới dừng ở "chạy được trên máy tôi", trong khi một dự án chỉ thật sự xong khi người khác mở được bằng một đường link và dùng được mà không cần bạn giải thích.
Bài này đi qua một dự án đầu tiên từ đầu đến cuối: trang chia tiền ăn nhóm, một file HTML, dùng trên điện thoại. Đây là bài thực hành cho chặng 4 trong lộ trình học vibe code từ đầu. Các mẫu yêu cầu dùng đúng cách viết trong bài cách viết prompt khi vibe code; công cụ nào cũng làm được, kể cả chatbot miễn phí.
Vì sao chọn trang chia tiền ăn nhóm
Có thật: đi ăn nhóm, một người trả trước, ai cũng từng phải ngồi bấm máy tính chia.
Một màn hình, một file: không cần đăng nhập, không cần cơ sở dữ liệu, không lưu thông tin của ai.
Kiểm tra được bằng tay: kết quả đúng hay sai, bạn tự tính lại được trong một phút.
Có một chỗ khó vừa đủ: làm tròn tiền. Đây là chỗ bạn sẽ học cách nhờ AI hỏi lại.
Nếu bạn có ý tưởng riêng cùng tiêu chí trên, như trang tính tiền điện phòng trọ hay trang đếm ngược ngày cưới, cứ thay vào; các bước giống hệt.
Bước 1: Viết bản mô tả
Tên: Chia tiền ăn nhóm Dùng cho: nhóm 3–10 người đi ăn, một người trả trước. Màn hình: một trang, dùng chủ yếu trên điện thoại. Nhập vào: tổng hóa đơn; tên từng người; tiền món gọi riêng của từng người (nếu có). Trả ra: mỗi người trả bao nhiêu; nút chép kết quả để dán vào Zalo. Không cần: đăng nhập, lưu lịch sử, nhiều ngôn ngữ. Công nghệ: một file index.html, không dùng thư viện ngoài.
Gửi bản mô tả kèm câu "Trước khi viết code, hãy hỏi tôi những điểm còn chưa rõ". Câu hỏi đáng giá nhất AI thường đưa ra ở dự án này: chia ra số lẻ thì làm tròn thế nào, phần dư ai giữ? Trả lời: làm tròn lên đến 1.000 đồng, phần dư hiện riêng để người trả trước biết.
Bước 2: Bản đầu tiên, cố tình thật đơn giản
Tạo một thư mục tên chia-tien trên máy. Yêu cầu đầu tiên chỉ cần phần lõi:
Bối cảnh: dự án mới, chưa có file nào. Việc cần làm: tạo index.html có ô tổng tiền, ô số người, nút "Chia"; bấm nút thì hiện số tiền mỗi người. Ràng buộc: chưa cần giao diện đẹp, chưa cần làm tròn. Kiểm tra: 300.000 đ, 3 người thì hiện 100.000 đ.
Lưu code AI trả về vào chia-tien/index.html, mở bằng trình duyệt. Thử con số trong phần kiểm tra, rồi thử thêm một con số "xấu", ví dụ 250.000 đ cho 3 người. Bản đầu sẽ hiện 83333.33333333333 đ, như hình bên trái dưới đây. Đó không phải thất bại: bạn vừa tự tìm ra lỗi đầu tiên bằng một phép thử, đúng việc bạn cần học.
Trước khi sang bước sau, lưu phiên bản này: dùng Git nếu bạn đã biết, hoặc đơn giản là sao chép file thành index-ban-1.html.
Bước 3: Thêm từng tính năng, mỗi lần một yêu cầu
Bốn yêu cầu nhỏ, gửi lần lượt, sau mỗi yêu cầu chạy thử và lưu phiên bản:
Danh sách người: thay ô "số người" bằng danh sách tên, có nút "Thêm người" và nút xóa ở mỗi dòng. Kiểm tra: thêm 3 người, xóa 1, kết quả tính cho 2 người.
Món gọi riêng: mỗi dòng có thêm ô tiền món riêng; phần chung chia đều, món riêng cộng vào người đã gọi. Kiểm tra: tổng 250.000 đ, một người gọi riêng 45.000 đ.
Làm tròn: làm tròn lên đến 1.000 đ, hiện thêm một dòng "Dư do làm tròn".
Nút chép kết quả: chép danh sách "Tên: số tiền" để dán vào Zalo.
Với ví dụ trong hình: phần chung (250.000 − 45.000) ÷ 3 = 68.333,33 đ, làm tròn lên thành 69.000 đ. An và Chi mỗi người 69.000 đ, Bình 69.000 + 45.000 = 114.000 đ. Tổng thu 252.000 đ, dư 2.000 đ. Bạn nên tự tính lại như vậy, đừng tin con số trên màn hình chỉ vì trông có vẻ hợp lý.
Sau bốn yêu cầu này mới yêu cầu giao diện, cũng theo kiểu cụ thể: "nút và ô nhập cao hơn để dễ chạm, kết quả nằm trong một khung, dòng phần dư tô màu nổi". Làm giao diện sau cùng để mọi lần sửa giao diện không đụng vào phần tính toán đã đúng.
Bước 4: Thử như một người dùng thật
Trước khi đưa lên mạng, dành mười lăm phút đóng vai người dùng:
| Thử | Mong đợi |
|---|---|
| Bấm "Chia tiền" khi chưa có ai trong danh sách | Báo cần thêm ít nhất một người, không hiện kết quả sai |
| Để trống tên một người | Vẫn tính được, hiện tên mặc định |
| Món riêng lớn hơn tổng hóa đơn | Báo lỗi, không ra số âm |
| Nhập tổng tiền có dấu chấm như 250.000 | Xem trang xử lý thế nào, nếu sai thì thêm một yêu cầu sửa |
| Mở trên điện thoại | Không phải cuộn ngang, chữ đủ to, bàn phím số hiện ra khi nhập tiền |
Để xem trên điện thoại ngay trên máy tính, mở công cụ cho nhà phát triển của Chrome (phím F12) rồi bật chế độ thiết bị di động; hoặc dùng công cụ kiểm tra giao diện theo kích thước màn hình. Mỗi lỗi tìm được là một yêu cầu mới theo mẫu báo lỗi năm phần.
Bước 5: Đưa lên mạng bằng GitHub Pages
Trang một file như thế này đưa lên mạng miễn phí được bằng nhiều dịch vụ. Dưới đây là cách dùng GitHub Pages, vì nó cũng là bước đầu làm quen với Git:
Tạo tài khoản GitHub, tạo một kho (repository) mới ở chế độ công khai, đặt tên ví dụ
chia-tien.Trong kho, chọn tải file lên và đưa
index.htmlvào, rồi lưu thay đổi (commit).Vào phần Settings của kho, mục Pages, chọn nguồn là nhánh chính (main), thư mục gốc, rồi lưu.
Chờ một lúc, GitHub hiện đường link dạng
tên-tài-khoản.github.io/chia-tien.
Kho công khai nghĩa là ai cũng xem được code. Với trang chia tiền thì không sao; nhưng đây chính là lý do không bao giờ được để khóa API hay mật khẩu trong code. Giao diện các dịch vụ có thể đổi theo thời gian; nếu không thấy đúng tên mục, hỏi AI "hướng dẫn bật GitHub Pages cho một file index.html" và nhắc nó kiểm tra theo giao diện hiện tại.
Bước 6: Gửi cho một người dùng thử
Gửi đường link cho một người bạn trong nhóm hay đi ăn cùng, đừng giải thích gì, chỉ nói "lần sau đi ăn thử dùng cái này chia tiền". Nếu muốn gửi kèm khi gặp trực tiếp, tạo mã QR cho đường link. Quan sát hoặc hỏi lại:
Họ có hiểu ô "món riêng" dùng để làm gì không?
Có bước nào họ phải hỏi lại bạn không?
Họ có muốn thêm gì không? Ghi lại, nhưng đừng làm ngay; quyết định sau.
Khi người đó dùng được mà không cần hỏi bạn, dự án đầu tiên đã xong. Đó là mốc để sang chặng 5 của lộ trình.
Những lỗi người mới hay gặp ở dự án đầu tiên
Thêm tính năng trước khi phần lõi tính đúng. Giao diện đẹp mà tính sai thì vẫn là sai.
Không tự tính lại kết quả, tin con số AI tạo ra vì trông hợp lý.
Chỉ thử bằng con số đẹp (300.000 đ chia 3), bỏ qua con số lẻ, ô trống, dữ liệu vô lý.
Không lưu phiên bản, đến khi yêu cầu thứ năm làm hỏng thì không quay lại bản thứ tư được.
Mở rộng phạm vi giữa chừng: thêm đăng nhập, lưu lịch sử, chia theo phần trăm, khiến dự án đầu tiên không bao giờ xong.
Dừng ở máy mình, không đưa lên mạng, nên không bao giờ gặp những lỗi chỉ lộ ra khi người khác dùng.
Sau dự án đầu tiên
Làm thêm một hai dự án cùng cỡ với ý tưởng khác, mỗi lần tự viết bản mô tả và tự nghĩ các phép thử. Song song, bắt đầu đọc code AI viết: nhờ AI giải thích từng đoạn trong file index.html của bạn, đó là cách nhẹ nhàng nhất để vào chặng 5 của lộ trình học vibe code.
Khi dự án tiếp theo có lưu dữ liệu của người khác, có form liên hệ hay nối với dịch vụ trả phí, phần kiểm tra trước khi công khai trở nên quan trọng hơn rất nhiều so với một trang chia tiền. Và nếu ý tưởng là website cho công việc kinh doanh của bạn, bài AI có thể tạo website trong 1 ngày? giúp bạn biết phần nào tự làm được và phần nào nên có người làm nghề.
Muốn dự án đầu tiên là một website thật? Khóa học vibe code cho người mới của Tấn Phát Digital học online qua Zoom hoặc Google Meet trong 3 ngày, học phí 10 triệu đồng. Thay cho trang chia tiền, bạn làm website giới thiệu nhiều trang của chính mình, chạy trên tên miền riêng, có form liên hệ, đã đưa lên Google, và biết cách tự sửa, tự thêm tính năng bằng AI sau khóa. Liên hệ Tấn Phát Digital để hỏi lịch khai giảng.
