Cách xây dựng ứng dụng bằng vibe coding: từ ý tưởng đến ứng dụng đã xuất bản

Để xây dựng một ứng dụng bằng vibe coding, hãy viết một mô tả một trang cho phiên bản đầu tiên, đưa nó cho một công cụ xây dựng ứng dụng AI làm prompt đầu tiên, rồi phát triển ứng dụng qua các bước nhỏ đã được kiểm thử: dữ liệu, đăng nhập, quy trình chính, hoàn thiện, rà soát bảo mật, và cuối cùng là xuất bản. Hướng dẫn này theo một dự án ví dụ, một ứng dụng đặt lịch lớp học cho một phòng tập yoga nhỏ, qua từng giai đoạn, cùng các prompt được dùng ở mỗi bước.

Nếu bạn chưa từng xây dựng gì theo cách này, hướng dẫn vibe coding cho người mới bắt đầu của chúng tôi bắt đầu nhỏ hơn. Để có cái nhìn tổng quan rộng hơn, không chỉ gắn với vibe coding, xem cách xây dựng ứng dụng bằng AI.

Dự án

Hãy hình dung một chủ phòng tập yoga tên Sara, người tổ chức tám lớp mỗi tuần. Việc đặt chỗ đến qua WhatsApp; cô ấy giữ một danh sách giấy cho mỗi lớp và thường xuyên nhận quá số người. Cô ấy muốn:

• Học viên xem thời khóa biểu trong tuần và đặt chỗ.
• Mỗi lớp có sức chứa.
• Một danh sách cho mỗi lớp để cô ấy kiểm tra ở cửa.
• Học viên có thể hủy trước hai giờ.

Đó là toàn bộ phiên bản đầu tiên. Không thanh toán, không gói thành viên, không cửa hàng ứng dụng. Những thứ đó sẽ đến sau, hoặc không bao giờ.

Bước 1: Viết một bản đặc tả một trang

Trước khi mở bất kỳ công cụ nào, hãy ghi lại phiên bản đầu tiên bằng lời lẽ đơn giản. Mười phút ở đây giúp tiết kiệm hàng giờ qua lại. Một cấu trúc hữu ích:

• Ai sử dụng: học viên (đặt và hủy chỗ), Sara (quản lý lớp, xem danh sách).
• Màn hình: thời khóa biểu, chi tiết lớp, lớp của tôi, quản trị các lớp, danh sách lớp dành cho quản trị.
• Dữ liệu: lớp (tên, giáo viên, giờ bắt đầu, thời lượng, sức chứa), đặt chỗ (học viên, lớp, trạng thái), học viên (tên, email, số điện thoại).
• Quy tắc: không đặt lớp đã đầy; mỗi học viên chỉ đặt một chỗ cho mỗi lớp; hủy trước hai giờ; chỉ Sara mới thấy các trang quản trị.
• Không có trong v1: thanh toán, gói lớp, danh sách chờ, nhắc nhở.

Danh sách “không có trong v1” là quan trọng nhất. Nó giữ cho việc xây dựng có thể hoàn thành. Hướng dẫn của chúng tôi về viết tài liệu yêu cầu sản phẩm bằng AI đi sâu hơn nếu bạn muốn một bản đặc tả đầy đủ hơn.

Bước 2: Chọn một công cụ xử lý toàn bộ vòng lặp

Với một ứng dụng có cơ sở dữ liệu, đăng nhập và URL công khai, hãy dùng một công cụ xây dựng ứng dụng AI chạy được mã, gắn cơ sở dữ liệu và xuất bản, thay vì một trợ lý chat chỉ đưa cho bạn các tệp. So sánh các công cụ vibe coding của chúng tôi liệt kê các lựa chọn. Ở đây chúng ta sẽ dùng Mythex vì nó bao quát mọi bước ở một nơi: chat, bản xem trước trực tiếp, cơ sở dữ liệu thật và lưu trữ tệp, và xuất bản chỉ với một cú nhấp.

Bước 3: Prompt đầu tiên

Biến bản đặc tả thành một đoạn văn. Đừng dán toàn bộ tài liệu cùng lúc với mọi chi tiết; hãy đưa phần cốt lõi và thêm phần còn lại từng bước.

Xây dựng một ứng dụng đặt lịch lớp học cho phòng tập yoga của tôi. Học viên đăng ký bằng tên, email và số điện thoại, xem thời khóa biểu trong tuần này, và đặt chỗ trong một lớp. Mỗi lớp có tên, giáo viên, giờ bắt đầu, thời lượng và sức chứa; một lớp đã đầy hiển thị “Đã đầy” và không thể đặt. Học viên xem các lần đặt chỗ của mình và có thể hủy trước hai giờ so với giờ học. Tôi là quản trị viên: tôi có thể thêm và sửa lớp và xem danh sách người đã đặt cho từng lớp. Thiết kế nhẹ nhàng, đơn giản, hoạt động tốt trên điện thoại.

Nếu bạn không chắc công cụ đã hiểu đúng, hãy yêu cầu một kế hoạch trước. Trong Mythex, chế độ Plan trình bày các màn hình và dữ liệu trước khi viết mã, và bạn phê duyệt nó.

Bước 4: Làm cho vòng lặp cốt lõi hoạt động

Vòng lặp cốt lõi là điều duy nhất mà ứng dụng tồn tại để làm: một học viên đặt lớp, và Sara nhìn thấy. Chỉ kiểm thử phần đó:

1. Đăng ký làm học viên, đặt một lớp.
2. Mở giao diện quản trị. Lần đặt chỗ có ở đó không?
3. Đặt lại đúng lớp đó. Hệ thống phải từ chối.
4. Đặt sức chứa của một lớp là 2, đặt chỗ từ hai tài khoản học viên, rồi thử người thứ ba.

Thông thường hai vấn đề sẽ xuất hiện ở bước này. Thời khóa biểu hiển thị giờ theo múi giờ của máy chủ, không phải múi giờ của phòng tập. Và kiểm tra “Đã đầy” chỉ xảy ra trên trang, nên một cú nhấp đúp nhanh sẽ tạo ra hai lần đặt chỗ.

Hiển thị tất cả giờ lớp theo múi giờ của phòng tập, [Asia/Dubai], bất kể thiết bị của khách truy cập được đặt múi giờ nào.

Kiểm tra sức chứa và các lần đặt chỗ trùng lặp trên máy chủ khi tạo một lần đặt chỗ, không chỉ trong trang. Nếu hai yêu cầu cùng đến cho chỗ cuối cùng, chỉ một yêu cầu được thành công.

Hãy sửa vòng lặp cốt lõi trước khi thêm bất cứ thứ gì khác. Mọi thứ khác đều phụ thuộc vào nó.

Bước 5: Thêm các quy tắc còn lại, mỗi lần một quy tắc

Bây giờ hãy đi qua các quy tắc trong bản đặc tả, từng cái một:

Học viên có thể hủy một lần đặt chỗ trước khi lớp bắt đầu hai giờ. Sau thời điểm đó, ẩn nút hủy và từ chối việc hủy trên máy chủ với một thông báo rõ ràng.

Chỉ tài khoản của tôi mới có thể mở các trang quản trị. Đảm bảo điều này được kiểm tra trên máy chủ cho mọi hành động quản trị, không chỉ bằng cách ẩn menu.

Sau mỗi quy tắc, hãy kiểm thử và chỉ chuyển sang bước tiếp theo khi nó hoạt động. Nếu một thay đổi làm hỏng điều gì đó, hãy quay lại điểm kiểm tra tốt gần nhất và thử một yêu cầu rõ ràng hơn, thay vì chồng thêm các sửa lỗi lên trên.

Bước 6: Hoàn thiện những điều người dùng thật sẽ nhận ra

Người dùng thật chú ý đến những chi tiết nhỏ. Một danh sách ngắn cho ứng dụng của Sara:

• Trạng thái trống: “Chưa có lớp nào trong tuần này” thay vì một trang trắng.
• Xác nhận: “Bạn đã đặt chỗ cho Vinyasa, thứ Ba lúc 18:00” sau khi đặt.
• Bố cục điện thoại: nút lớn, thời khóa biểu đọc được trên màn hình 375px.
• Số chỗ còn lại: “Còn 3 chỗ” trên mỗi thẻ lớp, để học viên đặt sớm hơn.

Trên mỗi thẻ lớp, hiển thị số chỗ còn lại, ví dụ “còn 3 trên 12”. Sau khi đặt, hiển thị xác nhận với tên lớp, ngày và giờ, cùng một nút đến trang lớp của tôi.

Bước 7: Kiểm thử như một người lạ

Trước khi có người khác sử dụng, hãy dành nửa giờ thử phá vỡ nó:

Bạn cũng có thể nhờ AI chạy qua các trường hợp biên:

Liệt kê mười điều một học viên thật có thể làm mà có thể làm hỏng việc đặt hoặc hủy chỗ, kiểm thử từng điều và sửa những gì thất bại. Cho tôi biết bạn đã thay đổi những gì.

Bước 8: Rà soát bảo mật

Ứng dụng này lưu tên, email và số điện thoại, nên một rà soát bảo mật ngắn là đáng làm. Các câu hỏi chính:

• Một học viên có thể xem lịch đặt chỗ hoặc thông tin liên lạc của học viên khác không?
• Có khóa hoặc mật khẩu nào trong mã chạy trên trình duyệt không?
• Biểu mẫu đăng ký có được bảo vệ khỏi bot không?
• Có bản sao lưu dữ liệu không?

Trang của chúng tôi về vibe coding có an toàn không giải thích từng kiểm tra và đưa ra các prompt cho chúng, còn danh sách kiểm tra bảo mật cho ứng dụng do AI xây dựng là phiên bản đầy đủ.

Bước 9: Xuất bản

Khi vòng lặp cốt lõi, các quy tắc và các kiểm tra đều đạt, hãy xuất bản. Trên Mythex, việc này chỉ cần một cú nhấp, và ứng dụng nhận một URL công khai với cơ sở dữ liệu và lưu trữ đã sẵn sàng. Với Pro, bạn có thể kết nối tên miền riêng, chẳng hạn book.sarasyoga.com; xem cách kết nối tên miền riêng.

Trước khi gửi liên kết đi, hãy kiểm tra phiên bản đã xuất bản thêm một lần. Đặt một lớp từ điện thoại của bạn. Môi trường sản xuất và bản xem trước phải hoạt động giống nhau, nhưng hãy xác nhận lại.

Bước 10: Người dùng đầu tiên và phiên bản tiếp theo

Hãy gửi liên kết cho năm học viên thường xuyên trước, không phải tất cả cùng lúc. Yêu cầu họ đặt lớp tiếp theo qua liên kết và cho bạn biết điều gì gây khó hiểu. Sau đó sửa ba điều hàng đầu mà họ nhắc đến.

Sau vài tuần sử dụng thực tế, danh sách v2 cho một ứng dụng như thế này thường tự hình thành: danh sách chờ cho các lớp đã đầy, email nhắc nhở vào tối hôm trước, và các gói lớp thanh toán trực tuyến. Mỗi việc đều được xử lý theo cùng một cách: đặc tả trong vài dòng, đưa prompt, kiểm thử, xuất bản. Để thêm thanh toán, xem cách thêm thanh toán vào ứng dụng. Để lan tỏa thông tin, xem cách ra mắt ứng dụng và có được người dùng đầu tiên.

Biến nó thành ứng dụng điện thoại

Nhiều phòng tập muốn có một biểu tượng trên điện thoại của học viên. Với Mythex Pro, ứng dụng đã xuất bản có thể trở thành ứng dụng Android (một tệp bạn có thể tải lên Google Play) và ứng dụng iPhone được gửi đến TestFlight bằng khóa App Store Connect của riêng bạn, không cần Mac. Ứng dụng điện thoại mở ứng dụng web đã xuất bản, nên mỗi khi bạn xuất bản một bản cập nhật, ứng dụng điện thoại cũng có nó.

Điều cần rút ra

Việc xây dựng bản thân nó là phần ngắn. Điều làm cho ứng dụng dùng được là danh sách “không có trong v1” của bản đặc tả, kiểm thử vòng lặp cốt lõi trước mọi thứ khác, các quy tắc phía máy chủ cho sức chứa và quyền truy cập, và năm người dùng thật trước khi có năm mươi người. Đó là vibe coding trông như thế nào khi ứng dụng phải hoạt động cho người khác.

Sẵn sàng thử với ứng dụng của riêng bạn? Viết bản đặc tả một trang, rồi dán đoạn đầu tiên vào công cụ xây dựng ứng dụng AI. Nếu bạn muốn xem thêm các loại ứng dụng và những prompt đằng sau chúng, hãy đọc ví dụ về vibe coding của chúng tôi.

Câu hỏi thường gặp