Trình xem App

Trình xem App là gì?

Khi các Agent AI hoàn thành một tác vụ, Trình xem App sẽ xuất hiện ở đầu trang. Công cụ này cho phép bạn xem trước app đang hoạt động của mình và thực hiện các chỉnh sửa trực quan trực tiếp — không cần viết mã.

Trước khi bắt đầu

• Quá trình xử lý của Agent có thể mất một chút thời gian — vui lòng kiên nhẫn chờ.
• Kiểm tra bảng Terminal ở bên phải để xem tiến trình chi tiết. Bảng Terminal hiển thị nhật ký theo thời gian thực về những gì Agent AI đang thực hiện, bao gồm tạo tệp, sinh mã và mọi lỗi gặp phải trong quá trình build.
• Nhấp vào biểu tượng Làm mới bất cứ lúc nào để tải lại bản xem trước.

Cách sử dụng Trình xem App

Bước 1: Chờ bản xem trước tải xong

Sau khi các Agent hoàn tất, Trình xem App sẽ tải bản xem trước của bạn trong cửa sổ xem trước chính.

⏱️ Thường mất vài giây đến một phút.

Nếu mất hơn 2 phút: Nhấp vào biểu tượng Làm mới trong thanh công cụ Trình xem App. Nếu vẫn bị kẹt, hãy kiểm tra bảng Terminal để xem lỗi (xem Bước 3 bên dưới).

Bước 2: Xem trước app của bạn

Sau khi tải xong, bạn có thể xem app đang hoạt động của mình trong cửa sổ xem trước.

• Desktop / Tablet / Mobile — Sử dụng thanh công cụ thiết bị ở đầu cửa sổ xem trước để chuyển đổi giữa các chế độ xem và kiểm tra khả năng hiển thị thích ứng. Thanh công cụ hiển thị ba biểu tượng đại diện cho thiết bị desktop, tablet và mobile. Nhấp vào từng biểu tượng để xem app của bạn trông như thế nào trên các kích thước màn hình khác nhau mà không cần rời khỏi trang.
• Mở trong tab mới— Nhấp vào biểu tượng mũi tên ở góc trên bên phải của cửa sổ xem trước để mở bản xem trước trong một tab trình duyệt riêng. Điều này đặc biệt hữu ích nếu bản xem trước nhúng bị treo hoặc không phản hồi.

Bước 3: Kiểm tra lỗi (nếu có gì đó không đúng)

Nếu app của bạn không tải hoặc hiển thị bị lỗi, hãy kiểm tra bảng Console để xem các thông báo lỗi.

Bảng Console nằm ở phía bên phải màn hình, bên dưới tab Terminal. Bảng này hiển thị nhật ký hệ thống và các thông báo lỗi được tạo ra trong quá trình build.

Nếu bạn thấy các thông báo lỗi màu đỏ, chúng thường bao gồm:

• Mô tả về vấn đề đã xảy ra
• Tệp và số dòng nơi lỗi xảy ra
• Stack trace để giúp xác định nguyên nhân gốc rễ

Để sửa lỗi: (Để biết thêm chi tiết, vui lòng tham khảo: Báo cáo sự cố)

• Nhấp vào "Resolve" — AI sẽ tự động phân tích và sửa tất cả các lỗi đã được xác định.
• Bản xem trước sẽ được tải lại sau khi các bản sửa lỗi được áp dụng. Bạn có thể theo dõi tiến trình theo thời gian thực qua bảng Terminal.

Không có nút "Resolve"?

Nhấp vào "..." (thêm tùy chọn) bên cạnh tin nhắn mới nhất của Agent, sau đó chọn "Feedback" để báo cáo sự cố cho đội ngũ hỗ trợ của chúng tôi. Vui lòng kèm theo Chat Link của bạn và ảnh chụp màn hình lỗi.

Bước 4: Chỉnh sửa app của bạn

Phương pháp 1: Nhấp để chỉnh sửa (khuyến nghị cho các thay đổi trực quan)

Nhấp trực tiếp vào bất kỳ phần tử nào trong cửa sổ xem trước. Một trình chỉnh sửa trực quan sẽ xuất hiện ở bên trái màn hình, cho phép bạn điều chỉnh:

• Màu sắc — Thay đổi màu chữ, màu nền hoặc màu viền bằng bộ chọn màu
• Khoảng cách — Điều chỉnh padding, margin và khoảng cách giữa các phần tử
• Kiểu chữ — Chỉnh sửa kích thước, độ đậm và họ font chữ
• Bố cục — Thay đổi căn chỉnh, cài đặt flexbox hoặc thuộc tính grid
• Nội dung văn bản — Chỉnh sửa văn bản trực tiếp trong trình chỉnh sửa

Sau khi bạn thực hiện thay đổi, bản xem trước sẽ cập nhật ngay lập tức để bạn có thể thấy kết quả theo thời gian thực.

Trình chỉnh sửa trực quan cũng bao gồm tab Library nơi bạn có thể duyệt và thêm các tài nguyên dựng sẵn như biểu tượng, hình ảnh và thành phần UI vào dự án của mình.

Phương pháp 2: Mô tả trong chat

Hãy cho Agent AI biết bạn muốn thay đổi điều gì bằng ngôn ngữ tự nhiên. Ví dụ:

• "Làm cho màu nền tối hơn"
• "Giảm padding xung quanh phần header"
• "Đổi màu nút thành xanh dương"

AI sẽ hiểu yêu cầu của bạn và áp dụng các thay đổi vào app của bạn.

Tham khảo nhanh

• Làm mới bản xem trước – Nhấp vào biểu tượng Làm mới trong thanh công cụ Trình xem App để tải lại cửa sổ xem trước.
• Chuyển đổi chế độ xem thiết bị – Sử dụng các biểu tượng Desktop, Tablet hoặc Mobile trong thanh công cụ xem trước để kiểm tra app của bạn hiển thị như thế nào trên các kích thước màn hình khác nhau.
• Mở trong tab mới – Nhấp vào biểu tượng mũi tên ở góc trên bên phải của cửa sổ xem trước để mở bản xem trước trong một tab trình duyệt riêng.
• Xem nhật ký lỗi – Kiểm tra bảng Console ở bên phải màn hình để xem các thông báo lỗi và nhật ký hệ thống.
• Tự động sửa lỗi – Nhấp vào nút "Resolve" trong thông báo Báo cáo sự cố để AI sửa tất cả các lỗi đã được xác định.
• Chỉnh sửa các phần tử trực quan – Nhấp vào bất kỳ phần tử nào trong cửa sổ xem trước để mở trình chỉnh sửa trực quan ở bên trái.
• Báo cáo sự cố – Nhấp vào "..." → "Feedback" trên bất kỳ tin nhắn Agent nào để báo cáo sự cố cho đội ngũ hỗ trợ.

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

Tại sao Trình xem App của tôi hiển thị màn hình đang tải?

Hiển thị đang tải có nghĩa là website đang tải. Trình xem App đang hoạt động bình thường. Hãy chờ một chút để bản xem trước tải đúng cách. Nếu mất hơn 2 phút, hãy thử nhấp vào biểu tượng Làm mới hoặc kiểm tra bảng Console để tìm lỗi.

Tại sao Trình xem App của tôi hiển thị các thông báo lỗi màu đỏ?

Các Agent có thể gặp sự cố trong quá trình build, điều này đôi khi có thể gây ra lỗi trang web. Nhấp vào "Resolve", và các Agent sẽ sửa lỗi cho bạn. Sau khi được sửa, Trình xem App sẽ xem trước bình thường, vì vậy bạn không cần lo lắng khi thấy các thông báo lỗi màu đỏ xuất hiện.

Tại sao tôi không thể xóa huy hiệu Atoms khỏi trang đã xuất bản của mình?

Việc xóa huy hiệu yêu cầu Pro trở lên. Bạn có thể Nâng cấp bất cứ lúc nào từ Settings → Plans & Billing. Sau khi nâng cấp, huy hiệu sẽ được tự động xóa khỏi các trang đã xuất bản của bạn.

Để nâng cấp, hãy nhấp vào ảnh đại diện của bạn ở góc trên bên phải, chọn Settings, sau đó điều hướng đến Plans & Billing. Chọn gói Pro hoặc Max và hoàn tất quy trình nâng cấp. Sau khi nâng cấp, huy hiệu Atoms sẽ აღარ xuất hiện trên các trang đã xuất bản của bạn.