Firebase Studio bao gồm một giao diện dựa trên web cho phép bạn nhanh chóng tạo nguyên mẫu và tạo ứng dụng web dựa trên AI bằng các lời nhắc đa phương thức, bao gồm cả ngôn ngữ tự nhiên, hình ảnh và công cụ vẽ. Tác nhân này hỗ trợ các ứng dụng Next.js, cùng với các nền tảng và khung khác được lên kế hoạch trong tương lai.
Trình tạo bản mô hình ứng dụng là một quy trình phát triển không cần lập trình được tinh giản, sử dụng AI tạo sinh để phát triển, kiểm thử, lặp lại và phát hành một ứng dụng web toàn diện, có tính năng tác nhân. Bạn mô tả ý tưởng ứng dụng bằng ngôn ngữ tự nhiên kèm theo một hình ảnh không bắt buộc, sau đó tác nhân sẽ tạo bản thiết kế ứng dụng, mã và bản xem trước trên web. Để hỗ trợ việc phát triển và phát hành ứng dụng toàn diện, Firebase Studio có thể tự động cấp các dịch vụ sau cho bạn:
- Nếu ứng dụng của bạn sử dụng AI: Firebase Studio sẽ thêm API Nhà phát triển Gemini vào ứng dụng của bạn, sử dụng sức mạnh của luồng Genkit để hoạt động với Gemini. Bạn có thể sử dụng khoá Gemini API của riêng mình hoặc cho phép Firebase Studio cấp một dự án Firebase và khoá API Gemini cho bạn.
- Nếu bạn muốn phát hành ứng dụng lên web: Firebase Studio sẽ tạo một dự án và cung cấp một cách nhanh chóng để phát hành ứng dụng bằng Firebase App Hosting.
Bạn có thể tinh chỉnh ứng dụng bằng ngôn ngữ tự nhiên, hình ảnh và các công cụ vẽ, chỉnh sửa mã trực tiếp, khôi phục các thay đổi, phát hành ứng dụng và theo dõi hiệu suất của ứng dụng – tất cả đều từ Firebase Studio.
Bắt đầu
Để bắt đầu với App Prototyping agent, hãy làm theo các bước sau:
Đăng nhập vào Tài khoản Google rồi mở Firebase Studio.
Trong trường Tạo nguyên mẫu ứng dụng bằng AI, hãy mô tả ý tưởng ứng dụng của bạn bằng ngôn ngữ tự nhiên.
Nếu muốn, bạn có thể thêm hình ảnh đi kèm với câu lệnh. Đây có thể là sơ đồ về luồng người dùng lý tưởng của ứng dụng hoặc bảng phối màu mà bạn muốn Firebase Studio tuân thủ. Hình ảnh có thể có kích thước tối đa là 3 MiB.
Nhấp vào Tạo nguyên mẫu bằng AI.
Trình tạo bản mô hình ứng dụng trả về một bản thiết kế ứng dụng, trong đó cung cấp tên ứng dụng được đề xuất, các tính năng cốt lõi và nguyên tắc về kiểu.
Xem lại bản thiết kế. Bạn có thể nhắc Gemini về các điểm cải tiến và thay đổi cũng như chỉnh sửa trực tiếp bản thiết kế:
Nhấp vào Tuỳ chỉnh rồi chỉnh sửa trực tiếp bản thiết kế. Chỉnh sửa rồi nhấp vào Lưu.
Trong trường Mô tả... trong ngăn trò chuyện, hãy thêm câu hỏi và ngữ cảnh làm rõ. Bạn cũng có thể tải thêm hình ảnh lên.
Khi bạn phê duyệt bản thiết kế, hãy nhấp vào Tạo bản minh hoạ cho ứng dụng này.
Gemini tạo mã từ bản thiết kế và trả về bản xem trước trên web để bạn xem xét.
Nếu ứng dụng của bạn sử dụng AI, bạn sẽ được nhắc thêm hoặc tạo khoá Gemini API. Nếu bạn nhấp vào Tự động tạo, Firebase Studio sẽ cung cấp dự án Firebase và khoá Gemini API cho bạn.
Sau khi tạo ứng dụng ban đầu, bạn có thể:
Kiểm thử và lặp lại: Kiểm thử kỹ lưỡng ứng dụng và làm việc với App Prototyping agent để lặp lại mã và bản thiết kế cho đến khi bạn hài lòng. Bạn cũng có thể nhấp vào biểu tượng
</>để chuyển sang chế độ xem mã và chỉnh sửa mã trong không gian làm việc Firebase Studio.Xem lại và tương tác với ứng dụng: Sau khi quá trình tạo mã hoàn tất, bản xem trước ứng dụng sẽ xuất hiện. Bạn có thể tương tác trực tiếp với bản xem trước để kiểm thử. Tìm hiểu thêm tại bài viết Xem trước ứng dụng.
Gỡ lỗi ứng dụng: Nhấp vào
Chuyển sang mã để mở chế độ xem Code. Tại đây, bạn có thể sử dụng các tính năng gỡ lỗi và báo cáo tích hợp sẵn của Firebase Studio để kiểm tra, gỡ lỗi và kiểm tra ứng dụng. Chuyển về Prototyper
mode at any time.Xuất bản ứng dụng bằng Firebase App Hosting: Nhấp vào Xuất bản để xuất bản ứng dụng lên App Hosting.
Theo dõi và tối ưu hoá ứng dụng cũng như các tính năng AI: Theo dõi hiệu suất và mức sử dụng của ứng dụng web bằng tính năng quan sát trong App Hosting và các luồng AI tạo sinh bằng tính năng đo từ xa Firebase trong Genkit. Tìm hiểu thêm tại bài viết Giám sát ứng dụng web.
Các bước tiếp theo
- Phát triển, phát hành và theo dõi ứng dụng web toàn stack bằng Firebase Studio.
- Phát triển ứng dụng bằng bất kỳ khung nào có mẫu hoặc giải pháp.