Phát triển, phát hành và giám sát ứng dụng web toàn stack bằng tác nhân Tạo nguyên mẫu ứng dụng

Hướng dẫn này cho bạn biết cách sử dụng App Prototyping agent để phát triển và phát hành nhanh chóng một ứng dụng toàn stack nhờ sự trợ giúp của Gemini trong Firebase. Bạn sẽ sử dụng câu lệnh bằng ngôn ngữ tự nhiên để tạo một ứng dụng Next.js giúp xác định các món ăn từ một bức ảnh hoặc máy ảnh trong trình duyệt, đồng thời cung cấp công thức nấu ăn chứa các thành phần đã xác định. Sau đó, bạn sẽ tinh chỉnh và cải thiện ứng dụng, cuối cùng là phát hành lên Firebase App Hosting.

Bạn sẽ sử dụng các công nghệ khác trong quá trình đọc hướng dẫn này, bao gồm:

Bước 1: Tạo ứng dụng

Đă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 nhập nội dung mô tả ứng dụng bạn muốn tạo. Đối với giải pháp này, khi tạo ứng dụng công thức nấu ăn dựa trên hình ảnh, bạn có thể sử dụng câu lệnh như sau để tạo nguyên mẫu ứng dụng sử dụng máy ảnh, AI tạo sinh:
```
Build a web app that can identify food products from an uploaded picture or
in-browser camera. The app should provide a recipe that contains the
identified ingredients.
```
Mẹo: Bạn cũng có thể tải hình ảnh lên để đi kèm với câu lệnh. Ví dụ: bạn có thể tải một hình ảnh chứa bảng phối màu mà bạn muốn ứng dụng sử dụng lên và yêu cầu Firebase Studio sử dụng bảng phối màu đó. Hình ảnh phải có kích thước dưới 3 MiB.
Nhấp vào Tạo nguyên mẫu bằng AI.

Gemini tạo bản thiết kế ứng dụng dựa trên câu lệnh của bạn, trả về tên ứng dụng được đề xuất, các tính năng bắt buộc và nguyên tắc về kiểu.
Xem lại bản thiết kế và thực hiện một số thay đổi. Ví dụ: bạn có thể thay đổi tên ứng dụng hoặc bảng phối màu được đề xuất bằng một trong các tuỳ chọn sau:
- 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.
Nhấp vào Tạo bản mô hình ứng dụng này. Gemini sẽ bắt đầu lập trình ứng dụng. Vì nội dung mô tả ứng dụng đã mô tả các tính năng yêu cầu AI tạo sinh, nên Gemini sẽ nhắc bạn nhập khoá Gemini API.
Thêm khoá Gemini API của riêng bạn hoặc nhấp vào Tự động tạo để tạo khoá Gemini API.

Lưu ý quan trọng: Nếu bạn chọn Tự động tạo, App Prototyping agent sẽ thay mặt bạn tạo một dự án Firebase có tiền tố khớp với tên của không gian làm việc Firebase Studio và tạo một khoá Gemini API mới trong dự án. Tệp này cũng lưu trữ khoá trong không gian làm việc Firebase Studio của bạn trong tệp .env. Để truy cập vào dự án mới bất cứ lúc nào, hãy nhấp vào tên dự án ở đầu trang. Để truy cập vào khoá Gemini API nhằm sao chép hoặc xoá sau này, hãy sử dụng bảng điều khiển Google Cloud.

Bước 2: Kiểm thử, tinh chỉnh, gỡ lỗi và lặp lại

Sau khi tạo ứng dụng ban đầu, bạn có thể kiểm thử, tinh chỉnh, gỡ lỗi và lặp lại.

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ử.
Lặp lại ứng dụng: Tiếp tục sử dụng giao diện trò chuyện để yêu cầu Gemini thêm các tính năng và tinh chỉnh ứng dụng. Hoặc nhấp vào Chuyển sang mã để mở chế độ xem Code, trong đó bạn có thể chỉnh sửa mã ngay trong không gian làm việc Firebase Studio.
Kiểm thử ứng dụng: Trong ngăn xem trước ứng dụng, hãy tải một hình ảnh cho thấy nhiều loại thực phẩm lên để kiểm thử khả năng của ứng dụng trong việc xác định nguyên liệu và cung cấp công thức nấu ăn. Bạn có thể sử dụng thành phần hiển thị Code để chia sẻ ứng dụng của mình công khai và tạm thời bằng cách sử dụng bản xem trước công khai Firebase Studio.
Gỡ lỗi ứng dụng: Mở Code bằng cách 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 của mình. Bạn có thể chuyển về App Prototyping agent bất cứ lúc nào.

Mẹo: Trong chế độ xem Code, bạn có thể sử dụng Gemini trong cả chế độ trò chuyện tương tác và cùng dòng. Tính năng trò chuyện tương tác có thể chẩn đoán vấn đề, đưa ra giải pháp và chạy các công cụ để giúp bạn khắc phục ứng dụng nhanh hơn. Để kích hoạt tính năng trò chuyện tương tác, hãy nhấp vào biểu tượng tia lửa trong trình đơn không gian làm việc ở dưới cùng. Để kích hoạt tính năng hỗ trợ cùng dòng, hãy nhấp vào biểu tượng tia lửa ở đầu trình đơn không gian làm việc. Tìm hiểu thêm tại bài viết Trợ lý AI trong Firebase Studio.
Lặp lại: Nếu ứng dụng không hoạt động như mong đợi, hãy tinh chỉnh lời nhắc, sử dụng ngăn trò chuyện để yêu cầu Gemini tinh chỉnh ứng dụng hoặc chỉnh sửa mã trực tiếp Code.

(Không bắt buộc) Bước 3: Phát hành ứng dụng bằng App Hosting

Sau khi thử nghiệm và hài lòng với ứng dụng, bạn có thể phát hành ứng dụng đó lên web bằng Firebase App Hosting.

Khi bạn thiết lập App Hosting, Firebase Studio sẽ tạo một dự án Firebase cho bạn và hướng dẫn bạn cách liên kết tài khoản Cloud Billing.

Cách phát hành ứng dụng lên Firebase App Hosting:

Nhấp vào Xuất bản để tạo một dự án Firebase mới và bắt đầu thiết lập App Hosting. Ngăn Xuất bản ứng dụng sẽ xuất hiện.

Lưu ý quan trọng: Nếu bạn không tự động tạo khoá Gemini API, thì Firebase Studio sẽ thay mặt bạn cung cấp một dự án Firebase khi bạn nhấp vào Xuất bản. Bạn có thể truy cập vào dự án Firebase bằng cách nhấp vào tên dự án ở đầu trang.
Trong bước Dự án Firebase, hãy ghi lại tên của dự án Firebase đã được tạo cho bạn, sau đó nhấp vào Tiếp theo.
Trong bước Liên kết tài khoản Cloud Billing, hãy chọn một trong những cách sau:
- Chọn tài khoản Cloud Billing mà bạn muốn liên kết với dự án Firebase.
- Nếu bạn không có tài khoản Cloud Billing hoặc muốn tạo một tài khoản mới, hãy nhấp vào Tạo tài khoản Cloud Billing. Thao tác này sẽ mở bảng điều khiển Google Cloud, nơi bạn có thể tạo một tài khoản Cloud Billing tự phục vụ mới. Sau khi bạn tạo tài khoản, hãy quay lại Firebase Studio rồi chọn tài khoản đó trong danh sách Liên kết Cloud Billing.
Nhấp vào Tiếp theo. Firebase Studio liên kết tài khoản thanh toán với dự án được liên kết với không gian làm việc của bạn, được tạo khi bạn tự động tạo khoá Gemini API hoặc khi bạn nhấp vào Xuất bản. Sau đó, App Hosting sẽ thiết lập một môi trường được quản lý đầy đủ cho ứng dụng của bạn trong Google Cloud.

Lưu ý quan trọng: Việc liên kết tài khoản thanh toán sẽ nâng cấp dự án của bạn từ gói giá Spark không tính phí lên gói giá Blaze trả tiền theo mức dùng. Tìm hiểu thêm tại trang Firebase Studio định giá.
Nhấp vào Tạo bản phát hành đầu tiên. Firebase Studio khởi chạy quá trình triển khai App Hosting. Quá trình này có thể mất đến 10 phút. Để tìm hiểu thêm về những gì đang diễn ra ở hậu trường, hãy xem bài viết Quy trình xây dựng App Hosting.

Mẹo: Nếu không muốn tạo bản phát hành ngay, bạn có thể nhấp vào Tạo bản phát hành sau.
Khi quá trình triển khai hoàn tất, trang Tổng quan về ứng dụng sẽ xuất hiện cùng với một URL và thông tin chi tiết về ứng dụng dựa trên khả năng quan sát App Hosting. Để sử dụng một miền tuỳ chỉnh (chẳng hạn như example.com hoặc app.example.com) thay vì miền do Firebase tạo, bạn có thể thêm một miền tuỳ chỉnh trong bảng điều khiển Firebase.

Để biết thêm thông tin về App Hosting, hãy xem bài viết Tìm hiểu về App Hosting và cách hoạt động của App Hosting.

(Không bắt buộc) Bước 4: Theo dõi ứng dụng

Bảng điều khiển Tổng quan về ứng dụng của App Hosting cung cấp các chỉ số và thông tin chính về ứng dụng, cho phép bạn theo dõi hiệu suất của ứng dụng web bằng các công cụ quan sát tích hợp sẵn của App Hosting. Sau khi trang web ra mắt, bạn có thể truy cập vào trang tổng quan bằng cách nhấp vào Xuất bản. Trên bảng điều khiển này, bạn có thể:

Nhấp vào Tạo bản phát hành để phát hành phiên bản mới của ứng dụng.
Chia sẻ đường liên kết đến ứng dụng của bạn hoặc mở ứng dụng ngay trong phần Truy cập vào ứng dụng của bạn.
Xem thông tin tóm tắt về hiệu suất của ứng dụng trong 7 ngày qua, bao gồm tổng số yêu cầu và trạng thái của bản phát hành mới nhất. Nhấp vào Xem chi tiết để xem thêm thông tin trong bảng điều khiển Firebase.
Xem biểu đồ về số lượng yêu cầu mà ứng dụng của bạn nhận được trong 24 giờ qua, được phân tích theo mã trạng thái HTTP.

Nếu đóng bảng tổng quan về ứng dụng, bạn có thể mở lại bảng này bất cứ lúc nào bằng cách nhấp vào Xuất bản.

Tìm hiểu thêm về cách quản lý và theo dõi việc triển khai App Hosting tại phần Quản lý việc triển khai và phát hành.

(Không bắt buộc) Bước 5: Quay lại bản triển khai

Nếu đã triển khai các phiên bản ứng dụng liên tiếp cho App Hosting, bạn có thể rollback ứng dụng về một trong các phiên bản trước đó. Bạn cũng có thể xoá thẻ này.

Cách khôi phục trang web đã xuất bản:
1. Mở App Hosting trong bảng điều khiển Firebase.
2. Tìm phần phụ trợ của ứng dụng, nhấp vào Xem, rồi nhấp vào Phát hành.
3. Bên cạnh bản triển khai mà bạn muốn quay lại, hãy nhấp vào biểu tượng Thêm , sau đó chọn Quay về bản dựng này rồi xác nhận.
Tìm hiểu thêm tại bài viết Quản lý việc triển khai và phát hành.
Cách xoá miền App Hosting khỏi web:
1. Trên bảng điều khiển Firebase, mở App Hosting rồi nhấp vào Xem trong phần ứng dụng Firebase Studio.
2. Trong phần Thông tin phụ trợ, hãy nhấp vào Quản lý. Trang Miền sẽ tải.
3. Bên cạnh miền của bạn, hãy nhấp vào biểu tượng Thêm , sau đó chọn Tắt miền rồi xác nhận.
Thao tác này sẽ xoá miền của bạn khỏi web. Để xoá hoàn toàn phần phụ trợ App Hosting, hãy làm theo hướng dẫn trong phần Xoá phần phụ trợ.

(Không bắt buộc) Bước 6: Sử dụng tính năng Theo dõi Genkit cho các tính năng đã triển khai

Bạn có thể theo dõi các bước, dữ liệu đầu vào và đầu ra của tính năng Genkit bằng cách bật tính năng đo từ xa cho mã luồng AI. Tính năng đo từ xa của Genkit cho phép bạn theo dõi hiệu suất và mức sử dụng của các luồng AI. Dữ liệu này có thể giúp bạn xác định những khía cạnh cần cải thiện, khắc phục sự cố, tối ưu hoá lời nhắc và quy trình để nâng cao hiệu suất và tính hiệu quả về chi phí, đồng thời theo dõi mức sử dụng quy trình theo thời gian.

Để thiết lập tính năng giám sát trong Genkit, bạn thêm dữ liệu đo từ xa vào luồng AI Genkit rồi xem kết quả trong bảng điều khiển Firebase.

Bước 1: Thêm dữ liệu đo từ xa vào mã luồng Genkit trong Firebase Studio

Cách thiết lập tính năng giám sát trong mã:

Nếu bạn chưa ở chế độ xem Code, hãy nhấp vào Chuyển sang mã để mở chế độ xem đó.
Kiểm tra package.json để xác minh phiên bản Genkit đã cài đặt.
Mở cửa sổ dòng lệnh (Ctrl-Shift-C hoặc Cmd-Shift-C trong MacOS).
Nhấp vào bên trong cửa sổ dòng lệnh và cài đặt trình bổ trợ Firebase, sử dụng phiên bản khớp với tệp package.json của bạn. Ví dụ: nếu các gói Genkit trong package.json của bạn đang ở phiên bản 1.0.4, bạn nên chạy lệnh sau để cài đặt trình bổ trợ:
```
npm i --save @genkit-ai/firebase@1.0.4
```
Trong Explorer (Trình khám phá), hãy mở rộng src > ai > flows. Một hoặc nhiều tệp TypeScript chứa luồng Genkit sẽ xuất hiện trong thư mục flows.
Nhấp vào một trong các quy trình để mở quy trình đó.

Mẹo: Lưu ý phần prompt của tệp: Bạn có thể chỉnh sửa phần này theo cách thủ công để tinh chỉnh các phản hồi của Gemini.
Ở cuối phần nhập của tệp, hãy thêm nội dung sau để nhập và bật FirebaseTelemetry:
```
import { enableFirebaseTelemetry } from '@genkit-ai/firebase';

enableFirebaseTelemetry();
```
Mẹo: Để tìm hiểu thêm về các tuỳ chọn đo từ xa nâng cao trong Genkit, hãy xem phần Cấu hình nâng cao.

Bước 2: Thiết lập quyền

Firebase Studio đã bật các API bắt buộc cho bạn khi thiết lập dự án Firebase, nhưng bạn cũng cần cấp quyền cho tài khoản dịch vụ App Hosting.

Cách thiết lập quyền:

Mở bảng điều khiển IAM Google Cloud, chọn dự án của bạn, sau đó cấp các vai trò sau cho tài khoản dịch vụ lưu trữ ứng dụng:
- Trình ghi chỉ số giám sát (roles/monitoring.metricWriter)
- Trình theo dõi trên đám mây (roles/cloudtrace.agent)
- Trình ghi nhật ký (roles/logging.logWriter)
Xuất bản lại ứng dụng lên App Hosting.
Khi quá trình phát hành hoàn tất, hãy tải ứng dụng và bắt đầu sử dụng. Sau 5 phút, ứng dụng của bạn sẽ bắt đầu ghi lại dữ liệu đo từ xa.

Bước 3: Theo dõi các tính năng AI tạo sinh trên bảng điều khiển Firebase

Khi bạn định cấu hình tính năng đo từ xa, Genkit sẽ ghi lại số lượng yêu cầu, số lượng yêu cầu thành công và độ trễ cho tất cả luồng của bạn. Đối với mỗi luồng cụ thể, Genkit sẽ thu thập các chỉ số về độ ổn định, hiển thị biểu đồ chi tiết và ghi lại dấu vết đã thu thập.

Cách theo dõi các tính năng AI được triển khai bằng Genkit:

Sau 5 phút, hãy mở Genkit trong bảng điều khiển Firebase và xem lại các câu lệnh và câu trả lời của Genkit.

Genkit biên dịch các Chỉ số về độ ổn định sau:
- Tổng số yêu cầu: Tổng số yêu cầu mà luồng của bạn nhận được.
- Tỷ lệ thành công: Tỷ lệ phần trăm số yêu cầu được xử lý thành công.
- Độ trễ phân vị thứ 95: Độ trễ phân vị thứ 95 của luồng, là thời gian cần thiết để xử lý 95% số yêu cầu.
- Số lượt sử dụng mã thông báo:
  - Mã thông báo đầu vào: Số lượng mã thông báo được gửi đến mô hình trong lời nhắc.
  - Mã thông báo đầu ra: Số lượng mã thông báo do mô hình tạo ra trong phản hồi.
- Cách sử dụng hình ảnh:
  - Hình ảnh đầu vào: Số lượng hình ảnh được gửi đến mô hình trong lời nhắc.
  - Hình ảnh đầu ra: Số lượng hình ảnh do mô hình tạo ra trong phản hồi.
Nếu bạn mở rộng các chỉ số về tính ổn định, bạn sẽ thấy các biểu đồ chi tiết:
- Số lượng yêu cầu theo thời gian.
- Tỷ lệ thành công theo thời gian.
- Mã thông báo đầu vào và đầu ra theo thời gian.
- Độ trễ (phân vị thứ 95 và 50) theo thời gian.

Tìm hiểu thêm về Genkit tại Genkit.

Các bước tiếp theo

Tìm hiểu cách phát triển ứng dụng trong một không gian làm việc Firebase Studio.
Tìm hiểu thêm về trợ lý AI trong Firebase Studio.