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 để nhanh chóng phát triển và xuất bản một ứng dụng full-stack với sự trợ giúp của Gemini trong Firebase. Bạn sẽ sử dụng một câu lệnh bằng ngôn ngữ tự nhiên để tạo một ứng dụng Next.js. Ứng dụng này sẽ xác định các mặt hàng thực phẩm trong ả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 xuất bản lên Firebase App Hosting.

Các công nghệ khác mà bạn sẽ sử dụng khi xem hướng dẫn này bao gồm:

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

  1. Đăng nhập vào Tài khoản Google rồi mở Firebase Studio.

  2. 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 một 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.

  3. Bạn có thể tải một 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 của mình 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.

  4. Nhấp vào Tạo nguyên mẫu bằng AI.

    Tác nhân tạo mẫu ứng dụng tạo ra 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.

  5. Xem lại bản thiết kế. Nếu cần, hãy thực hiện một số thay đổi. Ví dụ: bạn có thể thay đổi tên ứng dụng hoặc chế độ màu được đề xuất bằng một trong các lựa chọn sau:

    • Nhấp vào Tuỳ chỉnh và chỉnh sửa bản thiết kế trực tiếp. 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ác 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.

  6. Nhấp vào Tạo nguyên mẫu cho ứng dụng này.

  7. Tác nhân Tạo mẫu ứng dụng bắt đầu lập trình ứng dụng của bạn.

    • Vì ứng dụng của bạn sử dụng AI, nên 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, App Prototyping agent sẽ cung cấp một dự án Firebase và một 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 ứng dụng của bạn 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 phần 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 cách sử dụng Cloud Firestore và Firebase Authentication. Ví dụ: cho phép người dùng lưu và tải công thức xuống bằng một lời nhắc 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 khi chúng 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 Khắc phục lỗi để cho phép hệ thống 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 ngữ cảnh liên quan (ví dụ: "Bạn có thể khắc phục lỗi này trong mã khởi tạo 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 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.

    Khi ở Prototyper view, you can also use the following features:

    • Nhấp vào biểu tượng Biểu tượng chú thích 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 có sẵn, cùng với một 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 gì bạn muốn App Prototyping agent thay đổi.

    • Nhấp vào Chọn biểu tượng 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ử 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 từ kho lưu trữ của Unsplash.

    Bạn cũng có thể nhấp vào Biểu tượng liên kết Chia sẻ đường liên kết xem trước để chia sẻ công khai và tạm thời ứng dụng của bạn bằng Firebase Studio bản xem trước công khai.

  • Tạo dự án Firebase: Tác nhân tạo mẫu ứng dụng sẽ thay mặt bạn cung cấp một dự án Firebase 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ã nhận dạng <your-project-id>".

  • Kiểm thử ứng dụng và xác minh các quy tắc cơ sở dữ liệu Cloud Firestore: Trong ngăn xem trước ứng dụng, hãy tải lên một hình ảnh cho thấy nhiều loại thực phẩm để 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 là 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, App Prototyping agent sẽ ghi và triển khai các quy tắc 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 Firebase.

  • Gỡ lỗi và lặp lại ngay trong mã: Nhấp vào Biểu tượng chuyển đổi mã Chuyển sang mã để mở khung hiển thị Code. Tại đây, bạn có thể xem tất cả các tệp của ứng dụng và sửa đổi mã trực tiếp. Bạn có thể chuyển về Prototyper mode at any time.

    Khi ở chế độ xem Code, bạn cũng có thể sử dụng các tính năng hữu ích sau:

    • Firebase StudioCá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.

    • Sự hỗ trợ của AI bằng cách sử dụng Gemini ngay trong mã của bạn hoặc sử dụng Geminitrò chuyện tương tác (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 bạn khắc phục ứng dụng nhanh hơn. Để truy cập vào tính năng trò chuyện, hãy nhấp vào biểu tượng sparkGemini ở cuối không gian làm việc.

    • Truy cập vào Firebase Local Emulator Suite để xem cơ sở dữ liệu và dữ liệu xác thực. Cách mở trình mô phỏng trong không gian làm việc:

      1. Nhấp vào Biểu tượng chuyển đổi mã Switch to Code (Chuyển sang mã) rồi mở tiện ích Firebase Studio (Ctrl+',Ctrl+' hoặc Cmd+',Cmd+' trên MacOS).

      2. Di chuyển đến Backend ports (Cổng phụ trợ) rồi mở rộng.

      3. Trong cột Hành động tương ứng với Cổng 4000, hãy nhấp vào Mở trong cửa sổ mới.

  • 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 giao diện người dùng dành cho nhà phát triển Genkit để 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à làm nhiều việc khác.

    Cách tải các luồng Genkit trong Giao diện người dùng dành cho nhà phát triển Genkit và bắt đầu kiểm thử:

    1. Từ thiết bị đầu cuối trong không gian làm việc Firebase Studio, hãy chạy lệnh sau để tìm nguồn khoá Gemini API và khởi động máy chủ Genkit:

       npm run genkit:watch

    2. Nhấp vào đường liên kết đến Giao diện người dùng dành cho nhà phát triển Genkit. Giao diện người dùng cho nhà phát triển Genkit sẽ mở ra trong một cửa sổ mới, bao gồm các luồng, câu lệnh, trình nhúng và nhiều mô hình khác nhau mà bạn có thể chọn.

    Tìm hiểu thêm về Giao diện người dùng dành cho nhà phát triển Genkit tại Công cụ dành cho nhà phát triển Genkit.

(Không bắt buộc) Bước 3: Xuất bản ứng dụng bằng App Hosting

Sau khi thử nghiệm và hài lòng với ứng dụng trong không gian làm việc, bạn có thể xuất bản ứ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 dự án đó chưa được tạ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 xuất bản ứng dụng:

  1. Nhấp vào Xuất bản để thiết lập dự án Firebase và xuất bản ứng dụng. Ngăn Xuất bản ứng dụng sẽ xuất hiện.

  2. Trong bước 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 Tiếp theo để tiếp tục.

  3. 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 chưa 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 tài khoản tự thiết lập Cloud Billing mới. 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 Liên kết Cloud Billing.

  4. 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.

  5. Nhấp vào Thiết lập dịch vụ. Tác nhân tạo mẫu ứng dụng bắt đầu cung cấp các dịch vụ của Firebase.

  6. Nhấp vào Xuất bản ngay. Firebase Studio thiết lập các dịch vụ Firebase rồi triển khai bản phát hành App Hosting. Quá trình này có thể mất đến vài phút. Để tìm hiểu thêm về những gì diễn ra ở chế độ nền, hãy xem bài viết Quy trình tạo App Hosting.

  7. Khi bước xuất bản hoàn tất, 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 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 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.

(Nên thực hiện) Bước 4: Kiểm thử ứng dụng đã xuất bản

Khi quá trình xuất bản 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ẽ sẵn sàng để kiểm thử trong môi trường phát hành công khai.

Xem dữ liệu Cloud Firestore và Firebase Authentication trong bảng điều khiển 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 xuất bản.

  • Để xem cơ sở dữ liệu Cloud Firestore đang hoạt động, hãy mở bảng điều khiển Firebase rồi chọn Build (Xây dựng) > Firestore Database (Cơ sở dữ liệu Firestore) 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 Cloud Firestore.

  • Để xem dữ liệu Firebase Authentication trực tiếp, hãy mở bảng điều khiển Firebase rồi chọn Build (Bản dựng) > Authentication (Xác thực) 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 Firebase Authentication.

Kiểm thử các quy tắc Cloud Firestore trong môi trường thực tế

Sau khi xuất bản ứng dụng, bạn nên kiểm thử lại Cloud Firestorequy tắc bảo mật trong môi trường phát hành công khai. Đ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 các trạng thái hoặc vai trò người dùng khác nhau. Thử nghiệm trong điều kiện thực tế này giúp xác nhận rằng các quy tắc của bạn được thực thi đúng cách trên thực tế.

  • Rules Playground: Để kiểm tra có mục tiêu, hãy sử dụng Rules Playground 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ách sử dụ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 hay 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 các kiểm thử đơn vị cho quy tắc bảo mật. 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 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 hiệu quả để xác minh logic quy tắc phức tạp và xác nhận phạm vi áp dụng cho nhiều trường hợp. Sau khi triển khai, bạn nên kiểm tra kỹ để đảm bảo các kiểm thử đơn vị 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.