Tạo app bằng AI không cần biết code: thực hành với Emergent

Nếu chưa từng viết code, bạn có thể bắt đầu bằng một app danh sách công việc. Nó đủ nhỏ để thử bằng AI, nhưng vẫn có những thứ phải chạy thật: thêm việc, sửa tên, đánh dấu hoàn thành, rồi tải lại trang xem dữ liệu còn không. Nhìn giao diện đẹp thôi thì chưa biết được.

Ngày 16/9/2026, chúng tôi dùng Emergent dựng một app như vậy bằng yêu cầu viết sẵn, sau đó trực tiếp kiểm tra bản preview. App vượt qua cả bảy nhóm kiểm tra cơ bản. Số dư credit miễn phí giảm từ 10 xuống 7,62, tức dùng 2,38 credit trong lần thử giới hạn này. Chúng tôi không mua thêm credit hay kết nối dịch vụ bên ngoài.

Bài này đi theo đúng lần làm đó, kể cả đoạn AI dừng lại hỏi về thiết kế. Bạn không cần tự viết code để làm theo. Nhưng bạn vẫn phải kiểm tra app, và cần phân biệt bản demo lưu dữ liệu trong trình duyệt với một sản phẩm sẵn sàng cho khách hàng dùng.

Giao diện desktop do Emergent tạo ra. Một việc mẫu chưa hoàn thành, một việc đã xong. Toàn bộ nội dung công việc trong ảnh đều là dữ liệu giả để thử app.

1. Chọn một app nhỏ, có đầu ra rõ ràng

Bạn cần tài khoản Emergent, trình duyệt và số dư credit đủ để thử tạo app. Hãy kiểm tra số dư của chính mình trước khi bắt đầu. Con số 10 credit ở đây là số dư tài khoản trong lần thử, không phải lời hứa rằng tài khoản mới nào cũng được cấp như vậy.

Chúng tôi chọn danh sách việc cá nhân thay vì cửa hàng hay bảng quản lý cả đội. App chỉ cần một ô nhập, danh sách và vài thao tác. Nhờ vậy, bài thực hành không phải xử lý thanh toán, đăng nhập, API bên ngoài hay dữ liệu phía máy chủ.

Trước khi gửi yêu cầu, hãy viết ra thế nào là “chạy được”:

• Tên công việc không được để trống.
• Có thể thêm, sửa, xóa và đánh dấu hoàn thành.
• Các bộ lọc All, Active, Completed hiển thị đúng công việc.
• Tải lại cùng bản preview trong cùng trình duyệt vẫn giữ được danh sách.

Prompt còn yêu cầu chuyển một việc đã hoàn thành về trạng thái chưa xong. Chúng tôi chưa kiểm tra riêng chiều chuyển ngược này, nên không tính nó vào kết quả đã xác minh bên dưới.

2. Dán đúng prompt đã dùng

Mở trình dựng app của Emergent, bắt đầu dự án mới và nhập yêu cầu. Trong lần thử này, chế độ chọn model được để ở Auto. Đây là toàn bộ prompt gốc bằng tiếng Anh, giữ nguyên để bạn có thể làm lại cùng bài thực hành:

Build a small responsive task tracker for preview only. Use a clean accessible UI with labeled controls. Support adding a non-empty task title, editing the title, deleting tasks, toggling complete/incomplete, and filters All/Active/Completed. Persist tasks in browser localStorage across refreshes. Include only 2 synthetic sample tasks. No authentication, payments, external APIs, integrations, backend or database needed. Keep it simple and low-cost. Do not deploy publicly or connect GitHub or any external service. Please build the working preview directly using sensible defaults.

Nói ngắn gọn, yêu cầu này là: dựng app quản lý việc đơn giản, co giãn theo màn hình, có nhãn cho các nút và ô nhập, lưu trong trình duyệt, chỉ dùng hai việc mẫu và không triển khai thành dịch vụ công khai.

Điểm đáng giữ khi bạn sửa prompt cho ý tưởng riêng là sự cụ thể. “Làm app quản lý công việc” có thể khiến AI tự thêm đăng nhập, dự án nhóm hoặc nhắc lịch. Danh sách tính năng ở trên vừa giới hạn việc cần làm, vừa trở thành checklist để kiểm tra sau đó.

localStorage là chỗ trình duyệt lưu dữ liệu cho website đó. Nó đủ dùng cho bài tập này, nhưng không tạo bản sao lưu trên đám mây và không đồng bộ danh sách giữa điện thoại với laptop. Xóa dữ liệu website trong trình duyệt có thể làm mất các công việc đã lưu.

3. Trả lời câu hỏi rồi mở preview

Dù prompt đã yêu cầu tự chọn mặc định hợp lý, Emergent vẫn hỏi: “Any design theme preference for the task tracker?” Các lựa chọn gồm giao diện sáng tối giản với màu nhấn ấm, giao diện tối, phong cách nhiều màu, hoặc để AI tự chọn rồi làm luôn.

Chúng tôi trả lời đúng câu này:

Just pick sensible defaults and build it now

Đây là lần làm rõ yêu cầu duy nhất. Chúng tôi không gửi thêm prompt để sửa tính năng. Giao diện builder ghi prompt ban đầu lúc 09:52 và “Agent Finished” lúc 09:58. Đó là mốc giờ hiển thị trong giao diện, không phải phép đo tốc độ tạo app: khoảng thời gian này có cả phần chờ và trả lời câu hỏi thiết kế.

Khi app tạo xong, mở Preview để dùng thử. Dự án của chúng tôi có tên todo-clean-ui. Bản preview task tracker hoạt động trong lần kiểm tra; đừng coi đường dẫn preview tạm là dịch vụ hosting lâu dài. Nếu mở thử, bạn chỉ nên nhập công việc giả.

Có một gián đoạn cần kể rõ: khi quay lại qua tab home/chat mới mở của builder, chúng tôi gặp màn hình trắng tạm thời. Tab builder gốc vẫn dùng được. Đây là quan sát riêng trong phiên làm việc đó, không phải lỗi đã tái hiện của app task tracker. Nếu gặp tình huống tương tự, hãy kiểm tra tab đang mở trước khi yêu cầu dựng lại app và tiêu thêm credit.

4. Tự kiểm tra, đừng chỉ tin “đã xong”

Chúng tôi thao tác trực tiếp trên preview, độc lập với thông báo hoàn tất của AI. Bạn có thể làm lại bằng một công việc dùng để thử rồi xóa đi:

Kiểm tra	Cách làm	Kết quả trong lần thử
Không cho nhập trống	Bấm thêm khi chưa điền tên.	App báo “Task title cannot be empty.”
Thêm việc	Thêm QA synthetic task Alpha.	Công việc xuất hiện; All tăng từ 2 lên 3.
Sửa tên	Đổi Alpha thành QA synthetic task Beta rồi lưu.	Danh sách hiển thị tên mới.
Hoàn thành	Đánh dấu Beta đã xong.	Beta chuyển trạng thái; bộ đếm còn 1 việc đang làm và 2 việc hoàn thành.
Lọc danh sách	Chuyển giữa Active, Completed và All.	Beta có trong Completed và All, không có trong Active.
Giữ dữ liệu sau tải lại	Tải lại toàn bộ preview trong cùng trình duyệt.	Tên Beta đã sửa và trạng thái hoàn thành vẫn còn.
Xóa việc	Xóa Beta.	Danh sách trở về hai công việc mẫu.

Kết quả: đạt 7/7 nhóm kiểm tra cơ bản. Con số này không có nghĩa app đã được kiểm thử mọi mặt. Chúng tôi chưa thử trên nhiều trình duyệt, chưa thử tải nặng, chưa đánh giá bảo mật hay kiểm tra đầy đủ bằng bàn phím và trình đọc màn hình. Lịch sử lỗi trong console cũng chưa được thu thập để rà soát.

Công việc thử đã đổi tên và được gạch ngang sau khi hoàn thành, trước bước xóa. Bộ lọc hiển thị All 3, Active 1, Completed 2.

Nếu bản app của bạn không đạt một bước, hãy mô tả thao tác bị lỗi và kết quả mong muốn trong prompt tiếp theo. Chẳng hạn, “tên đã sửa bị mất sau khi tải lại trang” hữu ích hơn “hãy làm app tốt hơn”. Đây là gợi ý xử lý khi bạn tự làm, không phải bước sửa lỗi chúng tôi đã phải thực hiện. Mỗi lần yêu cầu sửa có thể tiêu thêm credit.

5. Mở thử ở màn hình hẹp

Trong lần kiểm tra ở chiều rộng 390 pixel, chiều rộng tài liệu cũng là 390 pixel: không có tràn ngang ở trạng thái đã kiểm tra. Chúng tôi mở chế độ sửa việc trên màn hình nhỏ; ô sửa có nhãn liên kết “Edit task title”.

Đây là kiểm tra nhỏ về bố cục, chưa đủ để kết luận app đáp ứng đầy đủ yêu cầu tiếp cận. Trước khi dùng app của mình thường xuyên, bạn nên thử di chuyển bằng bàn phím, xem vị trí đang được chọn có rõ không, nhập tên công việc dài và thử trên thiết bị thực tế. Đó là các bước nên làm tiếp, không phải kết quả chúng tôi đã có.

2,38 credit đã dùng cho phần nào?

Số dư quan sát được là 10,00 trước khi dựng app và 7,62 sau đó. Chênh lệch này thuộc lần tạo preview nhỏ với một prompt ban đầu, một câu trả lời về thiết kế, không có vòng sửa tính năng hay tích hợp dịch vụ.

Đừng hiểu thành “tạo một app luôn tốn 2,38 credit”. Yêu cầu lớn hơn, kết quả AI tạo ra khác hoặc nhiều lần chỉnh sửa đều có thể làm mức sử dụng thay đổi. Chúng tôi không quy đổi credit thành tiền và không dùng lần thử này để đưa ra giá gói dịch vụ. Bạn nên xem điều khoản hiện tại và số dư ngay trong Emergent trước khi làm tiếp.

Điểm tôi thích là bản preview đầu tiên đã xử lý được các thao tác chính, kể cả giữ tên đã sửa sau khi tải lại. Điểm chưa thuận là AI vẫn hỏi về thiết kế dù đã được dặn tự chọn mặc định. Việc tab builder mới mở bị trắng cũng gây gián đoạn, dù tab gốc giúp chúng tôi tiếp tục được.

Bản demo này chưa làm được gì?

App trong bài không có đăng nhập, backend, cơ sở dữ liệu hay đồng bộ đám mây. Đó là những phần chủ động bỏ khỏi yêu cầu, không phải tính năng làm hỏng. Phạm vi này phù hợp để học cách biến một nhu cầu nhỏ thành giao diện chạy được trong trình duyệt.

Nó chưa chứng minh rằng bạn đã có sản phẩm sẵn sàng cho khách hàng. Nếu muốn quản lý việc chung hoặc lưu dữ liệu thật của người khác, bạn còn phải xác định ai được xem và sửa dữ liệu nào, dữ liệu được lưu và sao lưu ở đâu, rồi tổ chức kiểm thử và bảo trì. Việc tải lại trang mà dữ liệu vẫn còn không trả lời được những câu hỏi đó. Có URL preview cũng chưa đồng nghĩa đã triển khai production hay có cam kết thời gian hoạt động.

Nếu bạn còn đang chọn công cụ, bài so sánh Emergent, Bolt và Cursor bàn rộng hơn về cách làm việc của từng bên. Riêng thử nghiệm task tracker này không phải kết quả thực hành với Bolt hoặc Cursor.

Với lần đầu tạo app bằng AI, tôi sẽ giữ đúng phạm vi này: hai việc mẫu, lưu trong trình duyệt và bảy bước kiểm tra ở trên. Chỉ nên thêm tính năng khi bạn đã hiểu bản hiện tại làm được gì và dữ liệu nằm ở đâu.

Chúng tôi có thể nhận hoa hồng nếu bạn mua qua liên kết dưới đây, không làm tăng chi phí của bạn.

Thử tạo app nhỏ với Emergent

Hãy kiểm tra credit còn lại trước khi bắt đầu. Bạn không cần kết nối GitHub, mua tên miền hay thêm thanh toán để làm lại bài thực hành preview này.