Hướng dẫn này sẽ cho bạn biết cách sử dụng App Prototyping agentđể nhanh chóng phát triển và phát hành một ứng dụng full-stack (toàn ngăn xếp) với sự trợ giúp của Gemini. 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ặt hàng thực phẩm trong một bức ảnh hoặc camera trong trình duyệt do người dùng đã đăng nhập cung cấp, đồng thời tạo một công thức có chứa các thành phần đã xác định. Sau đó, người dùng có thể chọn lưu trữ công thức trong một cơ sở dữ liệu có thể tìm kiếm.
Sau đó, bạn sẽ tinh chỉnh và cải thiện ứng dụng, trước khi phát hành ứng dụng lên Firebase App Hosting.
Các công nghệ khác mà bạn sẽ sử dụng khi làm theo hướng dẫn này bao gồm:
- một Firebase Studio không gian làm việc
- một dự án Firebase
- Firebase App Hosting
- Cloud Firestore
- Firebase Authentication
- Firebase App Check
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 Prototype an app with AI (Tạo mẫu ứng dụng bằng AI), hãy nhập câu lệnh sau. Câu lệnh này sẽ tạo một ứng dụng công thức dựa trên hình ảnh, sử dụng camera của trình duyệt và AI tạo sinh.
Ví dụ: bạn có thể nhập câu lệnh như sau để tạo ứng dụng tạo công thức:
Use secure coding practices to create an error-free web app that lets users upload a photo or take a picture with their browser camera. The app identifies the food in the picture and generates a recipe and accompanying image that includes that food. If no food product is identified, generate a random dessert recipe.Bạn 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 có chứa bảng phối màu mà bạn muốn ứng dụng sử dụng 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 nhỏ hơn 3 MiB.
Nhấp vào Prototype with AI (Tạo mẫu bằng AI).
App Prototyping agent sẽ tạo một 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ế. Nếu cần, hãy thực hiện một vài 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 lựa 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 Describe... (Mô tả...) ở ngăn trò chuyện, hãy thêm các câu hỏi và bối cảnh làm rõ. Bạn cũng có thể tải thêm hình ảnh.
Nhấp vào Prototype this app (Tạo mẫu ứng dụng này).
App Prototyping agent bắt đầu mã hoá ứng dụng của bạn.
- Vì ứng dụng của bạn sử dụng AI, nên bạn được nhắc thêm hoặc tạo khoá Gemini API key. Nếu bạn nhấp vào Tự động tạo, App Prototyping agent sẽ cung cấp một dự án Firebase và khoá Gemini API cho bạn.
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 xét 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 của ứ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.
Thêm Cloud Firestore và Firebase Authentication: Trong giai đoạn lặp lại, bạn có thể yêu cầu App Prototyping agent thêm tính năng xác thực người dùng và cơ sở dữ liệu bằng Cloud Firestore và Firebase Authentication. Ví dụ: hãy cho phép người dùng lưu và tải công thức xuống bằng một câu lệnh như sau:
Add user authentication to the app. Authenticated users can: - Download the recipe and its generated image as a PDF (Print). - Save the recipe as public or private and make accessible to a search feature. For now, just save the text, not the image, to the database. Important: Only authenticated users can download the PDF.Khắc phục mọi lỗi xảy ra: Trong hầu hết các trường hợp, App Prototyping agent sẽ nhắc bạn khắc phục mọi lỗi phát sinh. Nhấp vào Fix Error (Khắc phục lỗi) để cho phép công cụ này thử khắc phục.
Nếu bạn gặp lỗi mà không được nhắc tự động khắc phục, hãy sao chép lỗi và mọi bối cảnh có liên quan (ví dụ: "Bạn có thể khắc phục lỗi này trong mã khởi chạy Firebase của tôi không?") vào cửa sổ trò chuyện rồi gửi cho Gemini.
Kiểm thử và lặp lại bằng ngôn ngữ tự nhiên: Kiểm thử kỹ lưỡng ứng dụng của bạn 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.
Trong khi ở chế độ xem Prototyper, bạn cũng có thể sử dụng các tính năng sau:
Nhấp vào
Chú thích để vẽ trực tiếp trên cửa sổ Xem trước. Sử dụng các công cụ hình dạng, hình ảnh và văn bản hiện có
, cùng với câu lệnh dạng văn bản không bắt buộc, để
mô tả bằng hình ảnh những nội dung bạn muốn App Prototyping agent thay đổi.Nhấp vào
Chọn để chọn một phần tử cụ thể và nhập hướng dẫn cho
App Prototyping agent. Nhờ đó, bạn có thể nhanh chóng nhắm đến một biểu tượng, nút, đoạn văn bản hoặc phần tử khác cụ thể. Khi nhấp vào một hình ảnh, bạn cũng
có thể tìm kiếm và chọn một hình ảnh có sẵn trên
Unsplash.
Bạn có thể nhấp vào
Chia sẻ đường liên kết xem trước để chia sẻ ứng dụng của mình công khai và tạm thời bằng Firebase Studio bản xem trước công khai.
Tạo dự án Firebase: App Prototyping agent sẽ cung cấp một dự án Firebase thay cho bạn khi bạn:
- Tự động tạo khoá Gemini API
- Yêu cầu kết nối ứng dụng của bạn với một dự án Firebase
- Yêu cầu trợ giúp kết nối ứng dụng của bạn với các dịch vụ của Firebase, chẳng hạn như Cloud Firestore hoặc Firebase Authentication
- Nhấp vào nút Xuất bản rồi thiết lập Firebase App Hosting
Để thay đổi dự án Firebase được kết nối với không gian làm việc của bạn, hãy nhắc App Prototyping agent bằng mã dự án mà bạn muốn sử dụng. Ví dụ: "Chuyển sang dự án Firebase có mã
<your-project-id>".Kiểm thử ứng dụng và xác minh các quy tắc của cơ sở dữ liệu Cloud Firestore: 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 xác định thành phần, tạo và lưu công thức của ứng dụng.
Đăng nhập với tư cách người dùng khác nhau và tạo công thức: đảm bảo rằng người dùng đã xác thực có thể xem công thức riêng tư và công thức của họ, đồng thời tất cả người dùng đều xem được công thức công khai.
Khi bạn yêu cầu App Prototyping agent thêm Cloud Firestore, công cụ này sẽ viết và triển khai các quy tắc của cơ sở dữ liệu Cloud Firestore cho bạn. Xem lại các quy tắc trong bảng điều khiển của Firebase Firebase.
Gỡ lỗi và lặp lại trực tiếp trong mã: Nhấp vào
Chuyển sang Mã để mở Code xem. Tại đây, bạn có thể xem tất cả các tệp của ứng dụng và sửa đổi trực tiếp mã của mình. Bạn có thể chuyển lại chế độ Prototyper bất cứ lúc nào.
Trong khi ở chế độ xem Code, bạn cũng có thể sử dụng các tính năng hữu ích sau:
Firebase Studio's các tính năng gỡ lỗi và báo cáo tích hợp để kiểm tra, gỡ lỗi và kiểm tra ứng dụng của bạn.
Tính năng hỗ trợ AI bằng Gemini ngay trong mã của bạn hoặc sử dụng tính năng trò chuyện tương tác Gemini (cả hai đều có sẵn theo mặc định). 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 khắc phục ứng dụng của bạn nhanh hơn. Để truy cập vào cuộc trò chuyện, hãy nhấp vào biểu tượng tia lửaGemini ở cuối không gian làm việc.
Truy cập vào Firebase Local Emulator Suite để xem dữ liệu cơ sở dữ liệu và xác thực. Cách mở trình mô phỏng trong không gian làm việc:
Nhấp vào biểu tượng
Chuyển sang Mã rồi mở tiện ích Firebase Studio (
Ctrl+',Ctrl+'hoặcCmd+',Cmd+'trên MacOS).Di chuyển đến Backend ports (Cổng phụ trợ) rồi mở rộng.
Trong cột Actions tương ứng với Port 4000, hãy nhấp vào Open in new window.
Kiểm thử và đo lường hiệu suất của tính năng AI tạo sinh: Bạn có thể sử dụng Genkit Developer UI để chạy các luồng AI Genkit, kiểm thử, gỡ lỗi, tương tác với nhiều mô hình, tinh chỉnh câu lệnh và nhiều việc khác.
Cách tải các luồng Genkit trong Genkit Developer UI và bắt đầu kiểm thử:
Trong thiết bị đầu cuối ở không gian làm việc Firebase Studio, hãy chạy lệnh sau để lấy khoá Gemini API và khởi động máy chủ Genkit:
npm run genkit:watchNhấp vào đường liên kết Genkit Developer UI. Genkit Developer UI mở ra trong một cửa sổ mới với các luồng, câu lệnh, trình nhúng và một số mô hình có sẵn.
Tìm hiểu thêm về Genkit Developer UI tại Công cụ dành cho nhà phát triển Genkit.
(Không bắt buộc) Bước 3: Phát hành ứng dụng bằng App Hosting
Sau khi kiểm thử ứng dụng và hài lòng với ứng dụng đó trong không gian làm việc, 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 (nếu bạn chưa tạo dự án nào bằng cách tự động tạo khoá Gemini API hoặc các dịch vụ phụ trợ khác) và hướng dẫn bạn liên kết tài khoản Cloud Billing.
Cách phát hành ứng dụng:
Nhấp vào Publish (Phát hành) để thiết lập dự án Firebase và phát hành ứng dụng. Ngăn Publish your app (Phát hành ứng dụng) sẽ xuất hiện.
Ở bước Firebase project (Dự án Firebase), App Prototyping agent sẽ hiển thị dự án Firebase được liên kết với không gian làm việc. Nếu chưa có dự án Firebase, App Prototyping agent sẽ tạo một dự án mới cho bạn. Nhấp vào Next (Tiếp theo) để tiếp tục.
Ở bước Link Cloud Billing account (Liên kết tài khoản), hãy chọn một trong những lựa chọn 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 Create a Cloud Billing account (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 tự phục vụ mới Cloud Billing. Sau khi 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 Link Cloud Billing.
Nhấp vào Next (Tiếp theo). Firebase Studio sẽ 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 Gemini API khoá hoặc khi bạn nhấp vào Publish.
Nhấp vào Set up services (Thiết lập dịch vụ). App Prototyping agent bắt đầu cung cấp các dịch vụ của Firebase.
Nhấp vào Publish now (Phát hành ngay). Firebase Studio sẽ thiết lập các dịch vụ của Firebase rồi khởi chạy quá trình triển khai App Hosting Quá trình này có thể mất vài phút để hoàn tất. Để tìm hiểu thêm về những gì đang diễn ra ở hậu trường, hãy xem Quy trình xây dựngApp Hosting.
Khi bước phát hành hoàn tất, App overview (Tổng quan về ứng dụng) sẽ xuất hiện cùng với URL và thông tin chi tiết về ứng dụng do tính năng quan sát App Hosting cung cấp. Để sử dụng miền tuỳ chỉnh (như example.com hoặc app.example.com) thay vì miền do Firebase tạo, bạn có thể thêm miền tuỳ chỉnh trong bảng điều khiển của Firebase.
Để biết thêm thông tin về App Hosting, hãy xem Tìm hiểu về App Hosting và cách hoạt động.
(Nên thực hiện) Bước 4: Kiểm thử ứng dụng đã phát hành
Khi quá trình phát hành hoàn tất và ứng dụng của bạn được triển khai lên Firebase, Cloud Firestore và Firebase Authentication đã sẵn sàng để kiểm thử trong quá trình sản xuất.
Tạo chỉ mục cho cơ sở dữ liệu Cloud Firestore
Khi bạn triển khai ứng dụng lên Cloud Firestore, chỉ mục sẽ không được tạo tự động. Điều này có nghĩa là sau khi phát hành, bạn có thể cần tạo chỉ mục cho các truy vấn.
Bạn có thể thấy thông tin này xuất hiện trong thông báo lỗi hoặc trong Bảng điều khiển dành cho nhà phát triển của trình duyệt.
Cách tạo chỉ mục sau khi phát hành:
Từ ứng dụng đã phát hành: Trong ngăn App overview (Tổng quan về ứng dụng) (nhấp vào Publish (Phát hành) nếu bạn không thấy ngăn này), hãy tìm rồi nhấp vào đường liên kết Visit your app (Truy cập vào ứng dụng của bạn).
Từ bản xem trước Firebase Studio:Mở Bảng điều khiển dành cho nhà phát triển của trình duyệt rồi tìm thông báo lỗi 200 mà Cloud Firestore tạo.
Kiểm thử tất cả các luồng trong ứng dụng của bạn. Có thể xuất hiện lỗi có nội dung như "Error loading recipes" (Lỗi tải công thức). Truy vấn yêu cầu có chỉ mục. Bạn có thể tạo chỉ mục tại đây:" kèm theo đường liên kết đến bảng điều khiển của Firebase.
Hãy nhấp vào đường liên kết để chuyển đến bảng điều khiển của Firebase và một chỉ mục được đề xuất sẽ xuất hiện.
Nhấp vào Save (Lưu) để chấp nhận chỉ mục được đề xuất.
Quay lại ứng dụng rồi tải lại trang.
Tiếp tục kiểm thử tất cả các luồng trong ứng dụng để thêm chỉ mục khi cần.
Tìm hiểu thêm tại bài viết Quản lý chỉ mục trong Cloud Firestore.
Xem dữ liệu Cloud Firestore và Firebase Authentication trong bảng điều khiển của Firebase
Bạn có thể xem dữ liệu trực tiếp từ ứng dụng của mình trong bảng điều khiển Firebase sau khi phát hành.
Để xem cơ sở dữ liệu Cloud Firestore trực tiếp, hãy mở bảng điều khiển Firebase rồi chọn Build > Firestore Database trong trình đơn điều hướng.
Tại đây, bạn có thể kiểm tra dữ liệu đã lưu trữ, xem và kiểm thử các quy tắc bảo mật cũng như tạo chỉ mục. Tìm hiểu thêm tại bài viết Cloud Firestore.
Để xem dữ liệu Firebase Authentication trực tiếp, hãy mở Firebase bảng điều khiển rồi chọn Build > Authentication trong trình đơn điều hướng.
Tại đây, bạn có thể kiểm tra cấu hình xác thực và người dùng ứng dụng. Tìm hiểu thêm tại bài viết Firebase Authentication.
Kiểm thử các quy tắc của Cloud Firestore trong quá trình sản xuất
Sau khi phát hành ứng dụng, bạn nên kiểm thử lại các quy tắc bảo mật Cloud Firestore trong môi trường sản xuất. Điều này giúp đảm bảo rằng người dùng được uỷ quyền có thể truy cập vào dữ liệu của bạn và dữ liệu đó được bảo vệ khỏi hành vi truy cập trái phép.
Bạn có thể kiểm thử các quy tắc bằng tất cả các phương thức sau:
Kiểm thử ứng dụng: Tương tác với ứng dụng đã triển khai, thực hiện các thao tác kích hoạt nhiều mẫu truy cập dữ liệu (đọc, ghi, xoá) cho nhiều vai trò hoặc trạng thái của người dùng. Việc kiểm thử trong thế giới thực này giúp xác nhận rằng các quy tắc của bạn được thực thi chính xác trong thực tế.
Rules Playground (Sân chơi quy tắc): Để kiểm tra có mục tiêu, hãy sử dụng Rules Playground (Sân chơi quy tắc) trong bảng điều khiển Firebase. Công cụ này cho phép bạn mô phỏng các yêu cầu (đọc, ghi, xoá) đối với cơ sở dữ liệu Cloud Firestore bằng các quy tắc sản xuất. Bạn có thể chỉ định trạng thái xác thực người dùng, đường dẫn đến dữ liệu và loại thao tác để xem các quy tắc của bạn có cho phép hoặc từ chối quyền truy cập như dự kiến hay không.
Kiểm thử đơn vị: Để kiểm thử toàn diện hơn, bạn có thể viết mã kiểm thử đơn vị cho các quy tắc bảo mật của mình. Phần phụ trợ xem trước Firebase Studio do Firebase Local Emulator Suite cung cấp cho phép bạn chạy các chương trình kiểm thử này cục bộ, mô phỏng hành vi của các quy tắc sản xuất. Đây là một cách mạnh mẽ để xác minh logic quy tắc phức tạp và xác nhận phạm vi cho nhiều trường hợp. Sau khi triển khai, bạn nên kiểm tra kỹ để đảm bảo rằng các chương trình kiểm thử đơn vị của bạn bằng trình mô phỏng hoạt động như dự kiến và bao gồm tất cả các trường hợp.