Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

Xây dựng ứng dụng AI bằng hệ sinh thái của Google

1. Trước khi bắt đầu

Quá trình phát triển phần mềm đã có nhiều thay đổi. Những nhà phát triển thành công nhất không chỉ viết mã mà còn điều phối các công cụ và tác nhân AI để xây dựng ứng dụng hiệu quả và nhanh chóng hơn. Hệ sinh thái công cụ của Google cung cấp một bộ công cụ toàn diện cho toàn bộ vòng đời: tạo giao diện người dùng, tạo nguyên mẫu và triển khai ứng dụng, phát triển tính năng AI và tích hợp phụ trợ có thể mở rộng, bảo mật. Trong lớp học lập trình này, bạn sẽ dùng Google Stitch để thiết kế giao diện người dùng, Google AI Studio để tạo mã và triển khai ứng dụng, đồng thời dùng Firebase để phát triển các tính năng AI và lưu trữ thông tin trong một phần phụ trợ có khả năng mở rộng và bảo mật.

Ứng dụng mà bạn sẽ tạo trong lớp học lập trình này có tên là Decide For Me (Hãy quyết định giúp tôi) – một trợ lý đưa ra quyết định cho những người hay do dự khi phải đối mặt với các lựa chọn trong cuộc sống (chẳng hạn như chuyển căn hộ, thay đổi nghề nghiệp hoặc chọn một sở thích). Người dùng nhập một tình huống khó xử và những ưu tiên của họ trong cuộc sống, sau đó ứng dụng sẽ sử dụng AI để giúp người dùng quyết định dựa trên những yếu tố giúp giảm thiểu sự thất vọng về lâu dài. Ứng dụng cũng cung cấp cho người dùng một bước đầu tiên cụ thể. Phiên bản cuối cùng của ứng dụng sẽ có dạng như sau:

Ảnh chụp màn hình ứng dụng Decide For Me cho thấy giao diện trò chuyện và bảng điều khiển mức độ ưu tiên

Kiến thức bạn sẽ học được

Thiết kế giao diện người dùng bằng Google Stitch.
Tạo mã Vibe cho một ứng dụng web bằng Google AI Studio.
Sử dụng Firebase để phát triển các tính năng AI và lưu trữ thông tin trên đám mây.
Triển khai một ứng dụng web vào giai đoạn phát hành công khai bằng Google AI Studio (dựa trên Cloud Run).

2. Thiết kế giao diện người dùng bằng Stitch

Tải hình ảnh mô phỏng (DecideForMeScreen.jpeg) xuống. Lưu hình ảnh đó vào một thư mục trên thiết bị mà bạn có thể tìm thấy.
Chuyển đến Stitch, tìm trường nhập dữ liệu rồi chọn mục Web. (Trong lớp học lập trình này, bạn sẽ tập trung vào trải nghiệm trên web, nhưng bạn cũng có thể dùng Stitch để tạo màn hình di động.)
Tải hình ảnh mô phỏng lên:
1. Nhấp vào biểu tượng + (nút thêm).
2. Chọn Tải tệp lên.
3. Đính kèm hình ảnh bạn đã tải xuống trong bước thiết lập (DecideForMeScreen.jpeg). Bản mô phỏng vẽ tay này cho phép bạn kiểm thử các chức năng đa phương thức của Stitch.

Sao chép câu lệnh sau rồi dán vào trường nhập dữ liệu:

# General Guidance
Create a modern, clean, and highly polished UI for a web application called
"Decide For Me" - a hyper-rational decision assistant.

CRITICAL: Replicate the exact layout, structure, and element placement shown in
the hand-drawn mockup file DecideForMeScreen.jpeg. Do not add any extra menus,
sidebars, buttons, or top/bottom navigation bars that are not explicitly drawn
in the file. Stick strictly to the skeleton provided in the mockup.

# Layout & Structure
- Two-Column Split Screen:
  - Left Side (Main Chat Area): Takes up roughly 70-75% of the screen width. It
    should feel like a premium, focused workspace.
  - Right Side (Configuration Panel): A sidebar taking up 25-30% of the screen
    width with a distinct, subtle background color to separate it from the
    chat.

# Right Panel: Configuration Screen
- Header: Title it "My Priorities" with a clean, minimalist typography.
- Content Card: A styled card containing a text box or paragraph area
  showcasing the user's priorities.
- Interactions: Include a clear "Edit Priorities" button. When clicked, this
  area should visually toggle into an editable textarea or input field.

# Left Panel: Chat & Dilemma Decision Screen
- Chat History: A clean vertical flow of message bubbles.
  - The first message bubble must be aligned to the left (system message) and
    say: "Tell me your dilemma". Use a friendly, neutral background color for
    this bubble.
- Bottom Input Area: Instead of a traditional single-line chat bar, create a
  unified, beautiful "Decision Submission" layout positioned at the bottom:
  - Dual Input Fields: Place two horizontal or cleanly stacked input fields.
    - Input 1 label: "Option A"
    - Input 2 label: "Option B"
  - Action Button: A prominent, styled "Go" action button to trigger the
    reasoning loop.

# Theme & Aesthetic
- Vibe: Hyper-rational, clean, trustworthy, and modern. Use a sophisticated
  color palette (e.g., deep slates, clean whites/grays, and a sharp accent
  color like a subtle indigo or teal for active states and buttons).
- Spacing & Typography: Use generous whitespace, soft rounded corners
  (border-radius) for cards and buttons, and a highly legible sans-serif font.

Nhấp vào mũi tên tạo ở góc dưới cùng bên phải của trường nhập dữ liệu. Stitch tạo màn hình và toàn bộ hệ thống thiết kế, bao gồm bảng màu, các lựa chọn về phông chữ, biểu tượng và cảm nhận chung về các phần tử trên giao diện người dùng:

Giao diện Stitch cho thấy thiết kế giao diện người dùng và hệ thống thiết kế Decide For Me được tạo

3. Tạo ứng dụng bằng Google AI Studio

Xuất màn hình bạn đã tạo trong Stitch sang Google AI Studio:
1. Nhấp vào bản thiết kế được tạo trong Stitch.
2. Nhấp vào Xuất ở góc trên cùng bên phải màn hình.
3. Xác nhận rằng bạn đã chọn Google AI Studio.
4. Di chuyển xuống trường Nội dung mô tả.

Sao chép câu lệnh sau rồi dán vào trường Mô tả:

# General Guidance
Build the "Decide For Me" app: A hyper-rational decision assistant for
chronically indecisive people facing life choices (moving apartments, changing
careers, picking a hobby). The user enters a dilemma and their top priorities
in life. The app will help with the decision. Follow the instructions below to
build it:

# UI Instructions
Using the design artifacts exported from Stitch (the PNG image and HTML file),
build a fully functional web application that accurately mirrors the design and
layout.

# App Architecture & Initialization Instructions
- Initialize the Firebase JS SDK for client-side services.
- Set up Firebase Authentication using the Google provider. If a user is not
  logged in, show a clean, minimalist sign-in state. If the user is logged in,
  take them directly to the dilemma decision screen.
- Initialize Firebase App Check in debug mode
  (`self.FIREBASE_APPCHECK_DEBUG_TOKEN = true`) without a ReCaptchaV3Provider
  (we will add that later).

# State & Database Management Instructions
- User Priorities:
  - Once authenticated, pull the user's saved priorities from Firebase
    Firestore at the path: `users/{userId}`. Each document should contain one
    string field: 'priorities'.
  - Bind this data to the Right Panel ("My Priorities").
  - When the user clicks the "Edit" button, toggle the view to a textarea, with
    a 'save' button. When saved, write the updated string back to
    `users/{userId}`.
  - Make sure to implement and deploy strong Security Rules for Firestore.

# UI Stream Update & Display Instructions
- Once the user submits option A and option B in the dilemma decision screen,
  display both options as a single message on the user side of the chat. Then,
  display a sleek loading state in the main chat panel. Leave the app in this
  "loading" state and do nothing else, we will process both options and build
  the server-side thinking later.

Nhấp vào Tạo bằng Google AI Studio. Thao tác này sẽ mở Google AI Studio trong một thẻ mới và chuyển các tệp thiết kế cũng như câu lệnh của bạn:
1. Xác nhận rằng câu lệnh đã được chuyển hoàn toàn.
2. Nếu bạn chỉ thấy một phần của câu lệnh, hãy dán lại toàn bộ câu lệnh.
Nhấp vào Build (Bản dựng). Google AI Studio bắt đầu tạo ứng dụng Decide For Me theo câu lệnh và thiết kế giao diện người dùng của bạn:
1. Trong quá trình tạo, công cụ này sẽ đề xuất các thiết kế giao diện người dùng thay thế (bỏ qua các thiết kế này trong lớp học lập trình này, nhưng bạn có thể chọn các thiết kế khác trong tương lai).
2. Khi được nhắc bật Firebase, hãy nhấp vào Bật.
Kiểm tra và xác minh ứng dụng đã tạo:
1. Kiểm thử ứng dụng trong thẻ Xem trước.
2. Chuyển sang thẻ Code (Mã) để xem xét tất cả các tệp và mã được tạo.
3. Google AI Studio cũng đã tạo một dự án Firebase, bật Xác thực Firebase và Firestore, đồng thời định cấu hình Firebase trong toàn bộ mã nguồn của bạn. Bạn sẽ truy cập và làm việc với dự án Firebase này trong bước tiếp theo của lớp học lập trình này.

4. Đăng ký mã gỡ lỗi Kiểm tra ứng dụng

Khi Google AI Studio tạo ứng dụng, ứng dụng này sẽ tạo một dự án Firebase và kết nối ứng dụng của bạn với dự án đó. Bạn cần truy cập vào dự án Firebase này và đăng ký môi trường phát triển của mình bằng một dịch vụ bảo mật quan trọng có tên là Kiểm tra ứng dụng Firebase.

Truy cập vào dự án Firebase

Tìm mã dự án của dự án Firebase do Google AI Studio tạo:
1. Chuyển sang thẻ Mã trong Google AI Studio.
2. Mở tệp firebase-applet-config.json.
3. Sao chép giá trị của trường projectId.
Chuyển đến bảng điều khiển của Firebase rồi tìm dự án bằng mã này.
Lưu ý: Nếu đây là lần đầu tiên bạn tạo dự án Firebase, thì sẽ chỉ có một dự án duy nhất, đó là dự án do Google AI Studio tạo.

Đăng ký mã thông báo gỡ lỗi

Ứng dụng của bạn có thể dùng tính năng Kiểm tra ứng dụng Firebase để bảo vệ các dịch vụ phụ trợ và mô hình AI khỏi hành vi sai trái bằng cách đảm bảo rằng lưu lượng truy cập đến chỉ bắt nguồn từ các ứng dụng hợp pháp.

Vì ứng dụng của bạn đang chạy trong môi trường bản xem trước của Google AI Studio, nên ứng dụng này sẽ sử dụng nhà cung cấp dịch vụ gỡ lỗi Kiểm tra ứng dụng (self.FIREBASE_APPCHECK_DEBUG_TOKEN = true). Khi ứng dụng web tải, Firebase sẽ tự động xuất một mã thông báo gỡ lỗi vào bảng điều khiển dành cho nhà phát triển của trình duyệt.

Tìm mã thông báo gỡ lỗi:
1. Trong Google AI Studio, hãy mở công cụ dành cho nhà phát triển của trình duyệt trong khi xem bản xem trước ứng dụng:
  - Chrome, Edge hoặc Firefox: Nhấn F12 (hoặc nhấp chuột phải vào vị trí bất kỳ trong bản xem trước rồi chọn Kiểm tra), sau đó chọn thẻ Bảng điều khiển.
  - macOS: Nhấn tổ hợp phím Cmd+Option+I, rồi chọn thẻ Console (Bảng điều khiển).
2. Trong nhật ký bảng điều khiển, hãy tìm thông báo gỡ lỗi Kiểm tra ứng dụng:
```
AppCheck debug token: "123a4567-b89c-12d3-e456-789012345678".
You will need to safelist it in the Firebase console for it to work.
```
3. Sao chép chuỗi mã thông báo (không có dấu ngoặc kép).
Đăng ký mã thông báo gỡ lỗi:
1. Trong bảng điều khiển của Firebase, hãy chuyển đến Bảo mật > Kiểm tra ứng dụng > thẻ Ứng dụng.
2. Tìm ứng dụng web của bạn trong danh sách, nhấp vào trình đơn có biểu tượng ba dấu chấm (⋮) rồi chọn Quản lý mã thông báo gỡ lỗi.
3. Nhấp vào Thêm mã gỡ lỗi, dán mã thông báo bạn đã sao chép, nhập tên (chẳng hạn như Google AI Studio Preview) rồi nhấp vào Lưu.

5. Kiểm thử ứng dụng

Giờ đây, khi dự án của bạn đã được kết nối và mã gỡ lỗi đã được đăng ký với Kiểm tra ứng dụng, hãy kiểm thử các tính năng cơ bản: Xác thực và Firestore.

Kiểm thử quy trình xác thực người dùng và lưu các mức độ ưu tiên:
1. Trong bản xem trước ứng dụng Decide For Me trong Google AI Studio, hãy kiểm thử màn hình xác thực bằng cách đăng nhập bằng Tài khoản Google.
2. Lưu các ưu tiên trong cuộc sống bằng bảng điều khiển bên phải (Các ưu tiên của tôi).
Xác minh hoạt động xác thực trong bảng điều khiển của Firebase:
1. Truy cập vào bảng điều khiển của Firebase rồi mở Xác thực.
2. Xác nhận rằng Tài khoản Google mà bạn đã dùng để xác thực trong ứng dụng Decide For Me có trong danh sách:
Xác minh lưu trữ dữ liệu Firestore:
1. Mở Firestore trong bảng điều khiển của Firebase.
2. Xác nhận rằng các việc cần ưu tiên của bạn được lưu trữ trong một tài liệu theo đường dẫn users/{userId}:

6. Xây dựng quy trình Decider dựa trên AI bằng Firebase

Ứng dụng của bạn sẽ sử dụng AI để hỗ trợ các thao tác Quyết định cho tôi. Bạn có thể dùng Firebase để tạo quy trình Decider dựa trên AI này.

Thiết lập Firebase AI Logic

Bật Gemini Developer API trong Firebase AI Logic:
1. Mở Firebase AI Logic trong bảng điều khiển của Firebase, rồi nhấp vào Bắt đầu.
2. Chọn Gemini Developer API rồi làm theo hướng dẫn trong bảng điều khiển để bật API này.
Lưu ý: Tại thời điểm này, tính năng Kiểm tra ứng dụng sẽ tự động được thực thi cho Firebase AI Logic. Đây là lý do khiến việc thiết lập và đăng ký nhà cung cấp dịch vụ gỡ lỗi Kiểm tra ứng dụng trước đó trong lớp học lập trình này là rất quan trọng. Việc này đảm bảo các yêu cầu từ môi trường phát triển của bạn trong Google AI Studio được xác minh và không bị Firebase AI Logic từ chối.
Định cấu hình chế độ cài đặt Firebase AI Logic:
1. Chuyển đến thẻ Cài đặt.
2. Chuyển chế độ Thực thi chế độ chỉ mẫu thành Đã thực thi.
3. Chuyển chế độ cài đặt Bắt buộc chế độ người dùng đã xác thực thành Bắt buộc.

Tạo mẫu câu lệnh cho máy chủ

Trong lớp học lập trình này, bạn sẽ sử dụng mẫu câu lệnh trên máy chủ cho các hoạt động tương tác với Gemini API thông qua Firebase AI Logic.

Trước khi tiếp tục sử dụng mẫu, hãy xem xét những thông tin sau để hiểu lý do việc lưu trữ cấu hình mô hình, hướng dẫn hệ thống và lời nhắc phía máy chủ là rất quan trọng:

Bảo vệ tài sản trí tuệ: Kéo các câu lệnh ra khỏi thiết bị của khách hàng và giữ chúng an toàn ở phần phụ trợ.
Ngăn chặn các cuộc tấn công tiêm câu lệnh (prompt injection): Ứng dụng chỉ có thể điền các biến cụ thể bằng quy trình xác thực giản đồ phụ trợ.
Cập nhật mà không cần phát hành ứng dụng: Bạn có thể cập nhật lời nhắc, hướng dẫn hệ thống và cấu hình mô hình trong bảng điều khiển mà không cần phát hành phiên bản ứng dụng mới.

Sau đây là cách tạo và kiểm thử mẫu câu lệnh trên máy chủ:

Tạo mẫu câu lệnh cho máy chủ:

Chuyển đến thẻ Mẫu câu lệnh.
Nhấp vào Tạo mẫu.
Chọn Mẫu trống.

Tạo mẫu đầu tiên bằng cách sử dụng thông tin sau:

Tên mẫu: Decider Flow
Mã mẫu: decider-flow

Cấu hình (frontmatter)

model: "gemini-3.5-flash-lite"
input:
  schema:
    priorities: "string, user's core priorities"
    optionA: "string, option A under consideration"
    optionB: "string, option B under consideration"
output:
  format: json
  schema:
    verdict: string
    justification: string
    firstStep: string

Câu lệnh và (không bắt buộc) hướng dẫn cho hệ thống

{role "system"}
You are the Decider Agent, a multi-stage reasoning engine that
combines the roles of an honest and polite behavioral economist, a
long-term strategic forecaster, and an executive decision coach.
Your job is to take a user's dilemma and their core priorities, run
them through a rigorous, adversarial 3-phase thinking process, and
output a highly analytical, reasoning-backed final verdict. You must be
direct, sharp, and realistic. Do not give generic platitudes or claim
that "both options are great." You must force a clear choice.

{role "user"}
# Context & Inputs
You are analyzing a critical life decision for the user. Base your
entire multi-phase reasoning flow strictly on these three specific
inputs:
- User's Core Priorities: {{priorities}}
- Option A under consideration: {{optionA}}
- Option B under consideration: {{optionB}}

Execute your reasoning flow through the following three phases:

# Phase 1: Cynical Breakdown (Input-Driven Analysis)
Analyze {{optionA}} and {{optionB}} strictly through the lens of the
user's explicit {{priorities}}. Do not evaluate them in a vacuum.
- Identify the hidden flaws, compromises, and psychological costs
  embedded in both choices.
- Pinpoint exactly how {{optionA}} could directly conflict with or
  undermine their {{priorities}}.
- Pinpoint exactly how {{optionB}} could directly conflict with or
  undermine their {{priorities}}.
- Uncover any cognitive biases (like status quo bias or loss aversion)
  the user might be falling for in either option.

# Phase 2: Long-Term Regret Projection
Project the user 5 years into the future. Apply the Regret Minimization
Framework to both paths:
- The {{optionA}} Timeline: Quantify the absolute worst-case, deep,
  structural 5-year regret of choosing this path. Focus heavily on
  failures of courage vs. failures of action based on their
  {{priorities}}.
- The {{optionB}} Timeline: Quantify the matching 5-year regret for
  this path.
- Contrast these two timelines. Which option carries the kind of regret
  that fundamentally breaks the user's {{priorities}}?

# Phase 3: Final Recommendation & Action Step
Synthesize the cynical critiques and long-term regret scores.
Weigh them against the user's {{priorities}} to determine which
choice minimizes long-term disappointment.
- Verdict: You must declare either {{optionA}} or {{optionB}} as the
  definitive winner. No compromise, no "it depends," and no hybrid
  options.
- Justification: Provide a sharp, reasoning-backed explanation showing why
  the losing option was eliminated based on the Phase 1 and Phase 2
  analysis.
- First Step: Give one microscopic, low-friction task the user can
  execute within the next 15 minutes to commit to or move toward the
  chosen verdict.

Thêm một {} bổ sung xung quanh {role "system"} và {role "user"} để viết hướng dẫn và câu lệnh cho hệ thống theo đúng cú pháp:

Dữ liệu đầu vào kiểm thử

{
  "priorities": "Be financially stable, have a good work-life balance where I can travel twice a year",
  "optionA": "Buy a house for 615000 British pounds with a mortgage of 2800 per month for the next 35 years",
  "optionB": "Keep renting for 2400 per month for the foreseeable"
}

Nhấp vào Lưu mẫu.
Kiểm thử mẫu:
1. Nhấp vào Chạy kiểm thử lời nhắc.
2. Tìm Phản hồi kiểm thử và kiểm tra để đảm bảo phản hồi này có tất cả các trường mà bạn đã chỉ định trong câu lệnh (verdict, justification và firstStep).
3. Nếu mọi thứ đều khớp với phản hồi dự kiến, hãy khoá mẫu bằng biểu tượng khoá ở góc trên cùng bên phải của mẫu để đảm bảo tính ổn định của phiên bản và ngăn chặn các sửa đổi vô tình.

Ứng dụng của bạn đã có thể sử dụng mẫu này!

7. Sử dụng mẫu câu lệnh Decider trong ứng dụng

Để ứng dụng web của bạn sử dụng mẫu này, hãy làm như sau:

Quay lại ứng dụng của bạn trong Google AI Studio.

Yêu cầu tác nhân Google AI Studio triển khai thao tác Decide For Me (Quyết định giúp tôi):

Sao chép câu lệnh sau:

Now let's implement the "Decide For Me" button action. When clicked, it
should call the Firebase AI Logic SDK using a Template Generative Model.
The prompt is stored in a prompt template with the id "decider-flow". When
calling the API, pass the following variables as the input payload object:
- priorities
- optionA
- optionB

The API will return a JSON object. Handle the response asynchronously and
extract:
- verdict
- justification
- firstStep

Once the data is received, update the UI state to append a new message to
the chat array. Ensure it renders as a system chat bubble positioned on
the left side of the chat screen, mapping these three fields clearly into
the bubble's layout.

Please provide the necessary front-end component state updates and the
Firebase SDK call.

Dán câu lệnh vào phần nhập của cuộc trò chuyện trong Google AI Studio rồi nhấp vào Gửi.

Xác minh cấu hình và kiểm thử trợ lý đưa ra quyết định:
1. Đợi cho đến khi Google AI Studio hoàn tất việc thêm Firebase AI Logic vào ứng dụng của bạn.
2. Chuyển sang thẻ Code (Mã) và đảm bảo có khoá API trong tệp firebase-applet-config.json. Nếu khoá API Firebase không có trong tệp cấu hình, hãy yêu cầu Google AI Studio nhập khoá đó.
3. Chuyển sang thẻ Xem trước
4. Gửi các lựa chọn A và B, đồng thời xác minh rằng AI trả về kết quả quyết định, lý do và bước đầu tiên.

Để tham khảo, mã do Google AI Studio tạo sẽ có dạng như sau:

const aiInstance = getAI(app);
const templateModel = getTemplateGenerativeModel(aiInstance);

const result = await templateModel.generateContent('decider-flow', {
  priorities: priorities,
  optionA: optA,
  optionB: optB
});

const rawText = result.response.text();

// Parse response text to extract fields
const cleaned = rawText.replace(/```json|```/g, '').trim();
const parsedData: { verdict?: string; justification?: string; firstStep?: string } = JSON.parse(cleaned);

const verdict = parsedData.verdict;
const justification = parsedData.justification;
const firstStep = parsedData.firstStep;

Gỡ lỗi và giám sát các yêu cầu

Nếu ứng dụng của bạn gặp lỗi, không tạo được phản hồi hoặc bạn muốn kiểm tra lưu lượng truy cập API một cách chi tiết, hãy sử dụng các công cụ giám sát và phân tích tích hợp của Firebase AI Logic:

Trong bảng điều khiển Firebase, hãy chuyển đến thẻ Giám sát AI (AI monitoring) trong phần Dịch vụ AI > Logic AI > .
Kiểm tra các chỉ số định lượng trên trang tổng quan:
- Số lượng và trạng thái yêu cầu: Xác minh xem các yêu cầu đến có tiếp cận được phần phụ trợ và trả về 200 OK hay không, hoặc có gặp lỗi ở phía máy khách hay máy chủ hay không.
- Độ trễ: Kiểm tra biểu đồ độ trễ để xem thời gian phản hồi hai đầu.
- Số lượng mã thông báo: Theo dõi mức sử dụng mã thông báo đầu vào và đầu ra cho mỗi yêu cầu.
Kiểm tra từng dấu vết yêu cầu để gỡ lỗi chuyên sâu:Nhấp vào một dấu vết yêu cầu cụ thể trong bảng dấu vết để kiểm tra tải trọng của dấu vết đó.
- Đầu vào: Xác nhận rằng các biến (priorities, optionA và optionB) đã được truyền chính xác từ ứng dụng khách.
- Đầu ra: Xem văn bản thô do mô hình tạo ra để xác minh xem nó có trả về JSON hợp lệ phù hợp với lược đồ hay không.
- Thông tin chi tiết về lỗi: Nếu yêu cầu không thành công, hãy kiểm tra nhật ký lỗi theo dõi để biết các lý do như mã thông báo Kiểm tra ứng dụng không hợp lệ, yêu cầu xác thực bị từ chối, hạn mức hoặc lỗi xác thực lời nhắc.
Khắc phục và giải quyết sự cố với Google AI Studio:
- Nếu bạn phát hiện lỗi trong quá trình ghi lại (ví dụ: lỗi phân tích cú pháp phản hồi JSON hoặc thiếu tham số), hãy sao chép thông báo lỗi hoặc dữ liệu lỗi.
- Quay lại Google AI Studio và yêu cầu trợ lý khắc phục vấn đề tương ứng trong mã ứng dụng.

8. Không bắt buộc: Triển khai ứng dụng

Giờ đây, khi ứng dụng của bạn hoạt động ở chế độ xem trước, hãy triển khai ứng dụng đó cho người dùng thực tế.

Để bảo vệ các điểm cuối Firebase trong quá trình phát hành công khai, hãy định cấu hình một trình cung cấp chứng thực phát hành công khai để sử dụng với tính năng Kiểm tra ứng dụng Firebase (trong lớp học lập trình này, bạn sẽ sử dụng reCAPTCHA v3).

Trước tiên, bạn cần triển khai ứng dụng để lấy URL đang hoạt động chính xác của ứng dụng. Nhờ đó, bạn có thể đăng ký miền cụ thể với reCAPTCHA thay vì cho phép tất cả các ứng dụng ai.studio.

Triển khai ứng dụng của bạn và cấu hình reCAPTCHA:

Triển khai ứng dụng web bằng Google AI Studio:
1. Trong Google AI Studio, hãy nhấp vào Xuất bản ở thanh điều hướng trên cùng.
2. Nhấp vào Bắt đầu, xem xét hoặc tuỳ chỉnh tên và nội dung mô tả ứng dụng, rồi nhấp vào Xuất bản ứng dụng.
3. Chờ Google AI Studio tạo và triển khai ứng dụng của bạn (thường là 1 đến 2 phút).
4. Sao chép URL tuỳ chỉnh của sự kiện phát trực tiếp đã tạo (ví dụ: https://decide-for-me-123.ai.studio) và ghi lại miền của URL đó (ví dụ: decide-for-me-123.ai.studio).
Tạo khoá reCAPTCHA v3 trong Google reCAPTCHA:
1. Chuyển đến Bảng điều khiển dành cho quản trị viên của Google reCAPTCHA.
2. Nhập một Nhãn (ví dụ: Decide For Me - Production).
3. Chọn reCAPTCHA loại > reCAPTCHA v3 (Dựa trên điểm số).
4. Trong phần Miền, hãy thêm chính xác miền đã triển khai của ứng dụng (ví dụ: decide-for-me-123.ai.studio, bỏ qua https:// và mọi đường dẫn) hoặc một miền tuỳ chỉnh nếu bạn dự định sử dụng miền tuỳ chỉnh.
5. Chấp nhận điều khoản dịch vụ rồi nhấp vào Gửi.
6. Giữ thẻ này ở trạng thái mở: bạn sẽ cần cả Khoá trang web (khoá công khai của máy khách) và Khoá bí mật (khoá riêng tư của máy chủ).
Đăng ký khoá bí mật trong bảng điều khiển của Firebase:
1. Chuyển đến Kiểm tra ứng dụng trong bảng điều khiển của Firebase.
2. Chuyển đến thẻ Ứng dụng.
3. Tìm ứng dụng web của bạn trong danh sách, nhấp vào ứng dụng đó (hoặc nhấp vào trình đơn có biểu tượng ba dấu chấm ⋮), rồi chọn reCAPTCHA v3.
4. Dán Khoá bí mật reCAPTCHA vào trường rồi nhấp vào Lưu.
Định cấu hình ứng dụng khách để sử dụng ReCaptchaV3Provider:
1. Trong Google AI Studio, hãy chuyển sang bảng điều khiển trò chuyện và yêu cầu trợ lý cập nhật cấu hình Kiểm tra ứng dụng cho bản phát hành công khai:
```
Please update our Firebase App Check initialization to use
ReCaptchaV3Provider with the reCAPTCHA site key "YOUR_RECAPTCHA_SITE_KEY",
while retaining support for debug tokens in non-production environments.
```
2. Nếu bạn xem xét mã ngay trong thẻ Code (Mã), hãy đảm bảo quá trình khởi chạy Kiểm tra ứng dụng của bạn khớp với cấu trúc sau:
```
import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";

const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider("YOUR_RECAPTCHA_SITE_KEY"),
  isTokenAutoRefreshEnabled: true
});
```
3. Sau khi cập nhật mã, hãy xuất bản lại ứng dụng của bạn trong Google AI Studio để đẩy cấu hình App Check đã cập nhật lên trang web đang hoạt động.
Xác minh lưu lượng truy cập thực tế và theo dõi App Check:
1. Mở URL ứng dụng đang hoạt động trong một cửa sổ trình duyệt ẩn danh, đăng nhập bằng Google và thử gửi một tình huống khó xử.
2. Quay lại phần Kiểm tra ứng dụng trong bảng điều khiển của Firebase, rồi kiểm tra thẻ API và Giám sát để xác minh rằng các yêu cầu đã được đăng ký thành công cho Firestore và Firebase AI Logic.

9. Kết luận

Xin chúc mừng! Bạn đã tạo một ứng dụng hữu ích có các tính năng AI từ đầu bằng cách sử dụng các công cụ trong Builder Stack của Google. Đây mới chỉ là khởi đầu. Bạn có thể làm được nhiều việc hơn nữa bằng các công cụ của Google. Giờ đây, bạn đã có một dự án Firebase + Google Cloud; hãy khám phá tất cả các dịch vụ mà bạn có thể sử dụng!

Hãy truy cập vào đường liên kết này để nhận huy hiệu Đã hoàn thành hành trình của nhà phát triển!

Để tiếp tục hành trình của mình, hãy truy cập vào goo.gle/builders để tham gia phòng thí nghiệm tiếp theo.

Nếu đang sử dụng Antigravity 2.0, nền tảng chuyên dụng của Google để điều phối song song nhiều tác nhân tự trị, bạn có thể nhanh chóng xuất dự án của mình từ Google AI Studio và nhập dự án đó vào Antigravity để tiếp tục làm việc trên dự án đó cục bộ. Antigravity có Agent Skills for Firebase (Kỹ năng của tác nhân cho Firebase) mà bạn có thể cài đặt chỉ bằng một cú nhấp chuột. Những kỹ năng này cũng hỗ trợ việc phát triển ứng dụng di động, giúp bạn sao chép ứng dụng này trong cả môi trường Android và iOS nếu muốn.