Phát triển, xuất bản và giám sát một ứng dụng web toàn diện bằng tác nhân Tạo nguyên mẫu ứng dụng

Hướng dẫn này trình bày 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 toàn diện với sự trợ giúp của Gemini. Bạn 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 có thể xác định các món ăn 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 nấu ăn có chứa các nguyên liệu đã xác định. Sau đó, người dùng có thể chọn lưu trữ công thức nấu ăn 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 lên Firebase App Hosting.

Các công nghệ khác mà bạn sẽ sử dụng khi thực hiện theo 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 của bạn rồi mở Firebase Studio.

  2. Trong trường Prototype an app with AI (Tạo nguyên mẫu ứng dụng bằng AI), hãy nhập câu lệnh sau để tạo một ứng dụng công thức nấu ăn 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 một ứng dụng tạo công thức nấu ăn:

    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. Nếu muốn, bạn có thể tải một hình ảnh lên để thêm vào 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 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.

  4. Nhấp vào Tạo nguyên 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.

  5. Xem lại khung sườn. 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 và 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 làm rõ và bối cảnh. 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. App Prototyping agent 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 một Gemini API khoá. 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 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 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 để thử nghiệm. 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 Cloud Firestore và Firebase Authentication. Ví dụ: cho phép người dùng lưu và tải công thức nấu ăn 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 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 lỗi.

    Nếu bạn nhận được lỗi mà không được nhắc khắc phục tự động, hãy sao chép lỗi và mọi bối cảnh 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 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 ở chế độ xem Prototyper, bạn cũng có thể sử dụng các tính năng sau:

    • 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 câu lệnh văn bản (không bắt buộc) để mô tả trực quan những gì bạn muốn App Prototyping agent thay đổi.

    • Nhấp vào biểu tượng 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ử khác cụ thể. Khi nhấp vào một hình ảnh, bạn cũng có thể tìm và chọn một ảnh lưu trữ từ Unsplash.

    Nếu muốn, bạn có thể nhấp vào Biểu tượng đường liên kết Share preview link (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 cách sử dụ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 mặt bạn khi bạn:

    • Tự động tạo khoá Gemini API
    • Yêu cầu kết nối ứng dụng 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ơ 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 nguyên liệu cũng như tạo và lưu công thức nấu ăn của ứng dụng.

    Đăng nhập bằng nhiều 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 thấy 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ơ 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 trực tiếp trong mã: Nhấp vào Biểu tượng chuyển đổi mã Chuyển sang mã để mở chế độ xem Code, nơi bạn có thể xem tất cả tệp của ứng dụng và sửa đổi mã trực tiếp. Bạn có thể chuyển về chế độ Prototyper bất cứ lúc nào.

    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 để kiểm tra, gỡ lỗi và kiểm tra ứng dụng của bạn.

    • Trợ giúp AI bằng Gemini trong mã của bạn hoặc bằng tính năng trò chuyện tương tác của Gemini (cả hai đều được cung cấp 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 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 xác thực và cơ sở dữ liệu. 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 Biểu tượng chuyển đổi mã 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 Cổng phụ trợ rồi mở rộng cổng đó.

      3. Trong cột Actions (Thao tác) tương ứng với Port 4000 (Cổng 4000), hãy nhấp vào Open in new window (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 Genkit Developer UI để chạy các quy trình 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 quy trình Genkit trong Genkit Developer UI và bắt đầu thử nghiệm:

    1. Trong dòng lệnh của 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:watch

    2. Nhấp vào đường liên kết Genkit Developer UI. Genkit Developer UI sẽ mở ra trong một cửa sổ mới, trong đó có 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ụ 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 ứ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 chưa có dự án nào được tạo tự động bằng cách 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 Publish (Xuất bản) để thiết lập dự án Firebase và xuất bản ứng dụng. Ngăn Publish your app (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 dự án Firebase chưa tồn tại, thì 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 mục sau:

    • Chọn tài khoản Cloud Billing mà bạn muốn liên kết với dự án Firebase của mình.

    • 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ở ra bảng điều khiển Google Cloud, nơi bạn có thể tạo 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.

  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 liên kết với không gian làm việc của bạn, được tạo khi bạn được tạo tự động 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ụ. App Prototyping agent bắt đầu cung cấp các dịch vụ 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 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ì đang diễn ra trong nền, hãy xem bài viết Quy trình xây dựng App Hosting.

  7. Khi bước phát hành 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 ghi nhận của App Hosting. Để sử dụng một 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 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 tính năng này.

(Nên thực hiện) Bước 4: Kiểm thử ứng dụng đã phát hành

Khi quá trình xuất bản hoàn tất và ứng dụng của bạn được triển khai cho Firebase, Cloud Firestore và Firebase Authentication đã sẵn sàng để thử nghiệm trong môi trường thực tế.

Tạo chỉ mục cho cơ sở dữ liệu Cloud Firestore

Khi bạn triển khai ứng dụng cho Cloud Firestore, các 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 của mình.

Bạn có thể thấy lỗi này 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 xuất bản:

  1. Từ một ứng dụng đã xuất bản: Trong ngăn Tổng quan về ứng dụng (nhấp vào Xuất bản nếu không thấy), hãy tìm và nhấp vào đường liên kết Truy cập vào ứng dụng của bạn.

    Trong 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 ra.

  2. Kiểm thử tất cả các luồng trong ứng dụng. Có thể xuất hiện lỗi cho biết nội dung như "Lỗi khi tải công thức nấu ăn". Truy vấn cần có chỉ mục. Bạn có thể tạo tài khoản tại đây:" kèm theo đường liên kết đến bảng điều khiển Firebase.

  3. Nhấp vào đường liên kết để chuyển đến bảng điều khiển Firebase và một chỉ mục đề xuất sẽ xuất hiện.

  4. Nhấp vào Lưu để chấp nhận chỉ mục được đề xuất.

  5. Quay lại ứng dụng của bạn rồi tải lại trang.

  6. Tiếp tục thử nghiệm tất cả các luồng trong ứng dụng để thêm chỉ mục khi cần thiết.

Tìm hiểu thêm trong 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 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 được 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 đang hoạt động, hãy mở bảng điều khiển Firebase rồi chọn Build (Xây 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 của Cloud Firestore trong môi trường thực tế

Sau khi phát hành ứng dụng, bạn nên kiểm tra lại Cloud Firestore quy tắc bảo mật trong môi trường thực 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 tra 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 vai trò hoặc trạng thái khác nhau của người dùng. Việc kiểm thử trong 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 chính xác trong thực tế.

  • Rules Playground: Để kiểm tra theo 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 phát hành công khai. 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 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 được hỗ trợ bởi Firebase Local Emulator Suite 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 phát hành công khai. Đâ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ị sử dụng trình mô phỏng hoạt động như mong đợi và bao gồm tất cả các trường hợp.