概览

在本实验中，您要将一个 LangChain AI 智能体与 Flutter 应用进行集成。Flutter 将作为客户端应用框架，Gemini Enterprise Agent Platform 上的 Agent Search 将作为向量数据库，Gemini Enterprise Agent Platform 上的 Agent Runtime 则用于构建和部署 LangChain 智能体。该智能体将使用 Gemini 这一强大的大语言模型 (LLM) 系列，根据文本和图片提示生成 AI 回答。

本实验已使用 code-server 预配置了 VSCode 来作为 IDE，以及运行 Flutter 应用所需的 Flutter 和 Dart 扩展程序。本实验还会使用 fwr，该工具可将 Flutter 应用作为 Web 应用部署，以便通过浏览器访问。

本实验面向参与构建应用但可能不熟悉云应用开发的开发者，不限经验水平。如果您具备一些使用 Python 的经验，并熟悉 Flutter 框架，将会很有帮助。您无需了解 Flutter 就能完成本实验中的任务，不过您需要查看 Flutter 应用的一些代码并测试该应用的功能。

目标

在本实验中，您将执行以下任务：

• 在 Google Cloud 控制台中使用 AI Applications 创建搜索数据存储区和搜索应用。

• 使用 Gemini Enterprise Agent Platform Workbench 部署 LangChain 智能体。

• 使用与 Agent Search 和 LangChain 智能体集成的 Python 应用。

• 将该应用部署到 Cloud Run，并将其作为 Flutter 应用的后端。

• 创建一个 Flutter 应用，用作前端聊天应用。

  下面是本实验使用的不同组件的概览：

  

设置

对于每个实验，您都会免费获得一个新的 Google Cloud 项目及一组资源，它们都有固定的使用时限。

1. 使用无痕式窗口登录 Google Skills。

2. 留意实验的访问时限（例如 1:15:00）并确保能在相应时间段内完成实验。
   系统不提供暂停功能。如有需要，您可以重新开始实验，不过必须从头开始。

3. 准备就绪时，点击开始实验。

4. 请记好您的实验凭据（用户名和密码）。您需要使用这组凭据来登录 Google Cloud 控制台。

5. 点击打开 Google 控制台。

6. 点击使用其他账号，然后将此实验的凭据复制并粘贴到相应提示框中。
   如果您使用其他凭据，将会收到错误消息或产生费用。

7. 接受条款并跳过恢复资源页面。

任务 1. 创建搜索数据存储区和搜索应用

在此任务中，您将在 Google Cloud 控制台中使用 AI Applications 创建搜索数据存储区和搜索应用，以实现 Flutter 应用的搜索功能。

创建搜索数据存储区

1. 在 Cloud 控制台中，点击查看所有产品。在所有产品页面上，滚动到人工智能部分，然后点击 AI Applications。

2. 点击继续并激活 API。

3. 在左侧窗格中，点击数据存储区，然后在数据存储区页面上点击创建数据存储区。

   在此页面上，您可以配置要用于提供搜索结果的数据源。本实验预配置了一个 Cloud Storage 存储桶，其中的 .csv 文件包含 Google 官方商店的商品数据。

4. 若要选择 Cloud Storage 作为数据源，请点击 Cloud Storage 下的选择。

5. 对于要导入的数据种类，请在结构化数据导入下选择 CSV（用于常见问题解答数据）。

6. 滚动到选择您要导入的文件夹或文件部分，然后点击文件。

7. 点击浏览以便提供 CSV 文件的 Cloud Storage 网址。

8. 点击 ，查看 Cloud Storage 存储桶 的内容。

9. 选择 goog_merch.csv 文件，然后点击选择。

   系统会自动填充相应文件夹的 gs:// URI。

   

10. 点击继续。

11. 输入数据存储区名称 goog-merch-ds，然后点击继续。

12. 保留默认选定的定价模式，然后点击创建。

    系统会创建数据存储区，并启动从 CSV 文件注入数据的流程。

13. 在数据存储区页面上，点击您新建的数据存储区的名称。

14. 点击刷新。

    文档标签页会显示已导入文档的列表。

15. 如需查看与某个文档关联的数据，请点击查看文档。

如需验证是否已完成以下目标，请点击检查我的进度： 创建 Agent Search 数据存储区。

创建搜索应用

若要使用搜索数据存储区，需要在 AI Applications 中将其与一个搜索应用相关联。

1. 在 Cloud 控制台中，点击 AI Applications，然后点击应用。

2. 点击创建新应用。

3. 在创建应用页面，针对要构建的应用类型，在搜索和 Google 助理标签页的自定义搜索（常规）下方，点击创建。

4. 在搜索应用配置页面，使用以下设置来配置网站搜索应用，并将其余设置保留为默认值：

   属性	值（输入或选择）
   企业版功能	停用
   您的应用名称	gms-search-app
   贵公司或组织的外部名称	gms-company
   您的应用的位置	global（全球）

5. 点击继续。

6. 页面会显示现有数据存储区的列表。选择您在上一个子任务中创建的 goog_merch_ds 数据存储区，然后点击继续。

7. 保留默认选定的定价方案，然后点击创建。

   现在，您已创建搜索应用，并已将数据存储区与该应用相关联。

8. 如需测试该搜索应用，请点击 AI Applications 导航菜单中的预览。

9. 在搜索字段中，输入 dino，然后按 Enter 键。

   系统会显示相关搜索结果列表，这些结果来自导入到数据存储区的文档。

   

   注意：如果您看到一条错误消息指出搜索预览尚未就绪，请等待几分钟，然后重试。如果您不想等待，可继续执行下一个实验任务。

如需验证是否已完成以下目标，请点击检查我的进度： 创建 Agent Search 应用。

任务 2. 构建并部署后端

Flutter 应用的后端将在 Google Cloud 上作为一项 Cloud Run 服务运行。该后端服务将与您在上一个任务中创建的搜索应用集成，以便根据官方商店数据生成搜索回答。

在后续任务中，您还需将后端应用与 LangChain 智能体集成，以便针对来自 Flutter 应用的搜索查询，调用 Gemini 获取生成式 AI 内容。

在此任务中，您将构建后端 Python 应用并将其部署到 Cloud Run。

配置并查看后端应用

1. 本实验已预配置了一个基于 VSCode 的 IDE。如需访问该 IDE，请复制本实验凭证面板中的 IDE 服务网址，然后将其粘贴到一个新的无痕式浏览器窗口或标签页。

   

   注意：该 IDE 服务网址是专为本实验预配置的 Cloud Run 服务端点。该 Cloud Run 服务会作为代理，将请求转发到 code-server 虚拟机。该 IDE 使用 Code Server 构建，并包含 Flutter、Dart 和 Vim 扩展程序。

   

2. 在 IDE 中打开一个终端：在 IDE 导航菜单 () 中，依次点击终端 > 新建终端。

   注意：请在 IDE 终端窗口中运行以下步骤中的命令。

3. 本实验已预配置后端应用的初始版本和相关文件。请从 Cloud Storage 中的归档文件复制后端应用文件夹的初始版本及其内容：

   gcloud storage cp gs://cloud-training/OCBL453/photo-discovery/ag-web.zip ~ && unzip ~/ag-web -d ~ && rm ~/ag-web.zip 注意：如果系统提示，请点击允许以粘贴剪贴板中的文字和图片，然后按 Enter 键。

4. 若要列出该文件夹的内容，请在 IDE 终端窗口中运行以下命令：

   ls ~/ag-web/app

   ag-web/app 文件夹包含构建后端应用并将其部署到 Cloud Run 所需的应用源代码和其他文件。

5. 为应用设置 PROJECT_ID 和 LOCATION 配置。

   sed -i 's/GCP_PROJECT_ID/{{{project_0.project_id|set at lab start}}}/' ~/ag-web/app/app.py sed -i 's/GCP_REGION/{{{project_0.default_region|set at lab start}}}/' ~/ag-web/app/app.py

6. 将该后端应用配置为使用您之前创建的搜索数据存储区。

   sed -i 's/SEARCH_DATASTORE_ID/{YOUR_SEARCH_DATASTORE_ID}/' ~/ag-web/app/app.py

   在该命令中，将字符串 {YOUR_SEARCH_DATASTORE_ID} 替换为搜索数据存储区 ID 的值。请务必移除 sed 命令中的大括号。

   注意：为获取搜索数据存储区 ID 的值，请在 Cloud 控制台中前往 AI Applications > 数据存储区，然后点击您之前创建的搜索数据存储区的名称。复制数据存储区 ID 的值，该值与搜索引擎 ID 相同。

   

7. 若要在 IDE 中查看代码，请在 IDE 导航菜单中点击 ，然后点击打开文件夹。

8. 从列表中选择 IDE-DEV/ag-web/ 文件夹，然后点击确定。

9. 若要信任代码的作者，请点击 Yes, I trust the authors（是，我信任这些作者）。

10. 在探索器窗格中，展开 app 文件夹，然后点击 app.py 以在编辑器中打开该文件。

    后端应用代码会执行以下操作：

    • 为 discoveryengine.googleapis.com API 初始化 SearchServiceClient。
    • search_gms() 函数会使用该 API 的 datastores 端点发起搜索请求。您之前创建的数据存储区 ID 将包含在网址中。
    • 该函数会使用用户提供的搜索查询对数据存储区的内容执行搜索，并将结果转换为 JSON 格式的回答。
    • 该应用会使用 flask 将请求路由到各个函数。/ 端点是用于验证应用是否成功加载的默认页面，而 /ask_gms 端点则会调用使用 Agent Search 的 search_gms() 函数。

构建应用并将其部署到 Cloud Run

现在，您可以使用一个部署脚本来构建后端应用并将其部署到 Cloud Run。

1. 在 IDE 中打开一个终端窗口，并切换至后端应用文件夹：

   cd ~/ag-web/app

2. 从 gcloud CLI 向 Google Cloud 进行身份验证：

   gcloud auth login

3. 若要继续，请输入 Y

4. 按住 Ctrl 键（对于 Windows 和 Linux）或 Command 键（对于 MacOS），并点击终端中的链接启动登录流程。

5. 如果系统要求您确认是否打开外部网站，请点击打开。

6. 点击在本实验中使用的学员邮箱。

7. 看到要求您继续操作的提示时，点击继续。

8. 若要允许 Google Cloud SDK 访问您的 Google 账号并同意相关条款，请点击允许。

   您的验证码会显示在浏览器标签页中。

9. 点击复制。

10. 回到 IDE 终端窗口，将验证码粘贴到输入授权代码的位置，然后按 Enter 键。

    您现已登录 Google Cloud。

11. 将 deploy.sh 脚本设为可执行脚本，然后运行该脚本以在指定的 Cloud Run 区域中部署应用：

    chmod a+x deploy.sh; ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}

    成功构建应用并将其部署到 Cloud Run 后，脚本输出末尾会显示该应用的端点网址。该网址由脚本中执行的 gcloud run deploy 命令生成。

    注意：此命令耗时较长，请等待其执行完毕后再进行下一个任务。

测试后端应用

您可以通过访问应用的 Cloud Run 端点来测试应用功能。

1. 复制上一步中生成的应用端点网址，并在新的浏览器标签页中前往该网址。

2. 应用加载后，首页会显示：Welcome to the ag-web backend app（欢迎使用 ag-web 后端应用）。

3. 在浏览器的网址栏中，将以下路径附加至网址末尾：

   /ask_gms?query=dino

4. 验证应用是否会使用从您之前创建的搜索数据存储区中获取的结果进行响应。

如需验证是否已完成以下目标，请点击检查我的进度： 创建后端应用。

任务 3. 创建 LangChain 智能体

AI 智能体是一种应用，它利用大语言模型 (LLM) 的强大能力进行推理，并通过与外部工具的编排协作来实现其目标。Gemini Enterprise Agent Platform 是 Google 提供的一套产品和工具，可让您通过接入受信任的数据源，轻松打造 AI 智能体。

Gemini Enterprise Agent Platform 上的 Agent Runtime 可帮助您在 Agent Platform 上构建和部署推理智能体。LangChain 是一款用于构建聊天机器人和 RAG 系统的常用 OSS 工具。

通过 Agent Platform，开发者可以使用函数调用将 LLM (Gemini) 模型的输出映射到 Python 函数。您可以使用 Agent Platform SDK，通过专用于 LangChain 框架的模板开发和部署智能体。

在此任务中，您将使用 Agent Platform Workbench 和 Jupyter 笔记本来构建和部署采用 Python 函数的 LangChain 智能体。在本实验的下一个任务中，我们将在生成式 AI 后端应用中使用此智能体。

创建 Agent Platform Workbench 实例

Agent Platform Workbench 是基于 Jupyter 笔记本的开发环境，涵盖了完整的数据科学和机器学习工作流。您可以在工作台实例的 Jupyter 笔记本中与 Agent Platform 和其他 Google Cloud 服务进行交互。例如，借助 BigQuery 和 Cloud Storage 的集成，您可以从 Jupyter 笔记本访问并浏览数据。

Agent Platform Workbench 笔记本提供了灵活、可扩缩的解决方案，支持在 Google Cloud 上开发和部署机器学习模型。

1. 若要创建 Workbench 实例，请在 Cloud 控制台中点击导航菜单 ()，然后依次选择 Agent Platform > Notebooks。

2. 在 Notebooks 导航菜单中，点击 Workbench。

3. 确保在实例标签页中选中了实例，然后点击新建。

   

4. 在“新建实例”页面的名称部分，输入 my-instance

5. 其余设置均保留默认值，然后点击创建。

   您的新实例会在“实例”部分启动。等待实例创建完毕，然后继续执行下一步。

   注意：在实例可供使用后，实例旁边会出现绿色的对勾标记。

6. 在实例准备就绪后，点击打开 Jupyterlab。

   

7. 点击 Python 3 笔记本启动 Python 3 Jupyter 笔记本。

   

复制笔记本文件

本实验预配置了用于构建和部署 LangChain 智能体的笔记本。

1. 若要将该笔记本复制到您的 JupyterLab 实例，请将以下代码复制到新笔记本的第一个单元中：

   !gcloud storage cp gs://cloud-training/OCBL453/photo-discovery/ag-web/ag_setup_re.ipynb .

   

2. 选择该单元，然后点击单元菜单中的运行来运行该单元：

   

   此命令会将笔记本从 Cloud Storage 复制到您的 JupyterLab 实例。命令完成后，该笔记本文件会列在顶级根文件夹下。

   

3. 双击文件夹列表中的笔记本文件打开该笔记本。系统即会打开一个单独的标签页，显示该笔记本的内容。

构建并部署 Reasoning Engine 智能体

1. 按顺序从头开始运行笔记本中的所有代码单元。若要运行某个单元，请点击该单元中的任意位置将其选中，然后点击单元菜单或顶部笔记本菜单中的运行。

   注意：在运行某个单元中的命令时，请等待命令完成后再继续下一个单元。命令执行完毕后，单元编号字段中的星号 (*) 会替换为该单元的编号。 注意：在运行一个单元之前，请查看单元下方的说明，了解是否有任何针对该单元的特定指示或步骤。这些说明带有 CELL INSTR 前缀。

   a. [CELL INSTR] 重启当前运行时

   如果系统提示，请在内核重启对话框中点击确定。

   b. [CELL INSTR] 设置 Google Cloud 项目信息并初始化 Agent Platform：

   在运行此单元以初始化 Agent Platform 之前，请更新实验项目 ID、位置和暂存存储桶的配置值：

   PROJECT_ID = "{{{project_0.project_id|set at lab start}}}" LOCATION = "{{{project_0.default_region|set at lab start}}}" STAGING_BUCKET = "gs://{{{project_0.startup_script.lab_bucket_name}}}"

   包含示例配置设置的已更新单元：

   

   c. [CELL INSTR] 定义智能体：

   在运行此单元之前，请将 GEMINI_MODEL_ID 的值替换为此笔记本使用的最新模型 ID：。

   注意：您还可以通过点击笔记本菜单栏中的运行来运行单元。

2. 运行 Deploy the Agent to the Agent Runtime（将智能体部署到 Agent Runtime）单元后，请等待命令执行完毕，完成 LangChain 智能体的部署。然后，复制该智能体 ID：

   

   您将在下一个任务中使用此 ID 来配置和重新部署后端应用。

   注意：此单元最多可能需要 10 分钟才能完成。请等待系统显示最终输出（即指示已部署智能体），然后再继续执行下一步。

3. 若要测试 LangChain 智能体是否成功运行，请运行接下来的两个单元并观察输出。

   LangChain 智能体根据查询输入成功调用了 Wikipedia 或 Agent Search 数据存储区。

如需验证是否已完成以下目标，请点击检查我的进度： 部署 LangChain 智能体。

任务 4. 增强后端应用

现在，我们来增强后端应用，以调用您在上一个任务中部署的 LangChain 智能体。

后端应用的初始版本只能直接从 Agent Search 提取结果。更新后的应用还将调用智能体。此智能体结合 Gemini 的输出与自身工具，根据输入提示从 Agent Search 或 Wikipedia 获取信息并生成回答。

在此任务中，您将更新后端应用代码，添加一个额外的入口点，用于通过查询请求调用 LangChain 智能体并返回智能体的响应。

更新后端应用

1. 在 IDE 终端窗口中运行以下命令，将新的入口点代码附加至 app.py 文件中：

   cat << EOF >> ~/ag-web/app/app.py # # Agent Engine # import vertexai from vertexai import agent_engines from google.cloud import resourcemanager_v3 def get_project_number(project_id): client = resourcemanager_v3.ProjectsClient() # Construct the resource name for the project name = f"projects/{project_id}" # Get project metadata project = client.get_project(name=name) # The 'name' field in the response is in the format 'projects/123456789' project_number = project.name.split('/')[-1] return project_number PROJECT_NUM = get_project_number(PROJECT_ID) LANGCHAIN_AGENT = "LANGCHAIN_AGENT_ID" remote_agent = vertexai.agent_engines.get(f"projects/{PROJECT_NUM}/locations/{LOCATION}/reasoningEngines/{LANGCHAIN_AGENT}") # Endpoint for the Flask app to call the Agent @app.route("/ask_gemini", methods=["GET"]) def ask_gemini(): query = request.args.get("query") log.info("[ask_gemini] query: " + query) retries = 0 resp = None while retries < MAX_RETRIES: try: retries += 1 resp = remote_agent.query(input=query) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Empty response.") break except Exception as e: log.error("[ask_gemini] error: " + str(e)) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Too many retries.") return "No response received from Reasoning Engine." else: return resp["output"] EOF

2. 将后端应用配置为使用您之前创建的 LangChain 智能体。

   将下方命令中的字符串 {YOUR_LANGCHAIN_AGENT_ID} 替换为您在上一个任务中从笔记本单元复制的智能体 ID 值，并在 IDE 终端窗口中运行该命令。

   请务必移除 sed 命令中的大括号。

   sed -i 's/LANGCHAIN_AGENT_ID/{YOUR_LANGCHAIN_AGENT_ID}/' ~/ag-web/app/app.py

3. 如需在 IDE 中查看代码，请在 IDE 导航菜单中点击 ，然后选择 IDE-DEV/ag-web/app/app.py 文件。

   在增强版的后端应用中：

   • 系统会使用您在上一个任务中创建的智能体的 LANGCHAIN_AGENT_ID，从 Agent Runtime 中检索 remote_agent 的句柄。
   • 系统会定义新的 /ask_gemini 端点，用于定义 ask_gemini() 函数。
   • 该函数会将用户通过请求提供的 query 参数传递给 LangChain 智能体 (remote_agent)，并返回该智能体的响应。

构建后端应用并将其重新部署到 Cloud Run

1. 切换到后端应用文件夹：

   cd ~/ag-web/app

2. 运行以下脚本，在指定的 Cloud Run 区域中重新部署应用：

   ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}

测试后端应用

您可以通过访问应用的 Cloud Run 端点来测试应用功能。

1. 复制上一步中生成的应用端点网址，并在新的浏览器标签页中前往该网址。

2. 应用加载后，首页会显示 Welcome to the ag-web backend app（欢迎使用 ag-web 后端应用）。

3. 在浏览器的网址栏中，将以下路径附加至网址末尾：

   /ask_gemini?query=where can I buy the chrome dino pin

   该应用将返回智能体从您之前创建的 Agent Search 数据存储区中提取的结果。

   Chrome Dino Enamel Pin is a product sold at Google Merch Shop. The price is 7.00 USD. You can buy the product at their web site: https://shop.merch.google/product/chrome-dino-enamel-pin-ggoegcbb203299/.

4. 在浏览器的网址栏中，将路径替换为：

   /ask_gemini?query=what is fallingwater. Write the answer in plaintext.

   该应用将返回智能体从您在笔记本中配置的 Wikipedia API 中提取的结果。

   Fallingwater was designed by architect Frank Lloyd Wright in 1935. It is located in southwest Pennsylvania, about 70 miles southeast of Pittsburgh. The house is famous because it was built partly over a waterfall. 注意：您收到的实际回答可能与上面显示的回答有所不同。

任务 5. 创建 Flutter 前端应用

Flutter 是一个开源的多平台应用开发框架。借助该框架，您只需编写一套代码即可同时支持在 Android、iOS、Web、macOS、Windows 和 Linux 上运行。Flutter 应用使用 Dart 编程语言开发。

在本实验中，您将使用 Web 作为目标平台，以便将 Flutter 应用部署为 Web 应用并通过浏览器访问。

在此任务中，您将使用 Flutter 创建一个简单的聊天应用，更新代码，并将其作为 Web 应用进行构建和运行。

创建 Flutter 应用

1. 在 IDE 终端中，前往您的主目录并运行以下命令：

   cd ~; flutter create chat_app

   flutter create 命令会为新的 Flutter 项目创建其运行所需的所有文件、文件夹和配置。

2. 如需在 IDE 中查看默认聊天应用代码，请前往 IDE-DEV/chat_app 文件夹。

   您可能需要点击“刷新”以更新 IDE 中文件夹导航窗格的内容。

3. 如果系统提示您信任该文件夹中文件的作者，请点击 Yes, I trust the authors（是，我信任这些作者）。

查看 Flutter 应用代码

以下是对 chat_app 文件夹内容的简要概述：

文件夹/文件	说明
chat_app	项目根文件夹，内含构成 Flutter 应用的子文件夹和文件。
android/ios/linux/macos/web/windows	内含专用于特定平台的文件，即在各受支持平台上运行 Flutter 应用所需的文件。
lib	内含核心应用 Dart 文件，包括功能和界面。
test	内含用于测试应用 widget 的 Dart 测试。
pubspec.yaml	内含应用依赖项、Flutter 版本和其他配置设置。
analysis_options.yaml	内含针对应用的静态分析配置。

我们来查看一下 Flutter 应用的入口点文件 main.dart。

• 在探索器菜单中，点击 IDE-DEV/chat_app/lib/main.dart 文件将其打开。

  这是 Flutter 应用的入口点。在执行初始化任务后，此文件中的代码会使用 Material 组件构建应用的界面，并设置应用的名称、主题和其他配置。

  注意：Material 应用以 MaterialApp widget 开始，该 widget 会在应用的根部构建许多实用的 widget，其中包括用于管理应用内各页面路由的 Navigator。

  Flutter 使用 widget 的概念，即用于构建应用的声明式类。在 Flutter 中，您可以通过组合 widget 来构建更复杂的 widget，从而形成 widget 树并创建布局。如需详细了解如何在 Flutter 中构建界面，请查看此文档。

  此文件包含用于构建应用的 widget 的类，具体包括：

  • MyApp 类：聊天应用的根 widget。
  • MyHomePage 类：通过 _MyHomePageState 类创建应用主页面。
  • _MyHomePageState 类：负责构建应用的界面并更新界面状态。

  在接下来的子任务中，我们将随着聊天应用的构建，逐步替换这些类中默认生成的代码。

更新 Flutter 应用代码

1. 首先，更新应用名称。在 MyApp 类的第 14 行，更改 title 属性的值：

   title: 'Gemini Chat App',

   

2. 在 _MyHomePageState 类的第 58 行，删除 int _counter = 0; 行和 _incrementCounter() 函数，并添加以下属性：

   final TextEditingController _controller = TextEditingController(); final List<Map<String, String>> _messages = []; String _cloudRunHost = '';

   这些属性用于接收用户输入的文本提示、存储用户输入和后端应用响应以供显示，并保存后端应用 Cloud Run 服务的主机名。

3. 在该类中添加 initState() 方法：

   @override void initState() { super.initState(); _loadConfig(); }

   此方法会在 State 对象创建时执行初始化。在聊天应用中，我们通过调用 _loadConfig() 方法来加载文件的内容，该方法将在后续步骤中实现。

4. 在该类中添加 _loadConfig() 方法：

   Future<void> _loadConfig() async { final configString = await rootBundle.loadString('assets/config.json'); final config = json.decode(configString); setState(() { _cloudRunHost = config['cloudRunHost']; }); }

   此方法会检索聊天应用配置文件的内容，该配置文件以 JSON 对象的形式存储 Cloud Run 后端应用主机名的值。我们将在本实验的后续部分创建此文件。该方法会将值存储在之前创建的内部 _cloudRunHost 属性中，并构建 widget 界面。

5. 在该类中添加 _sendMessage() 方法：

   Future<void> _sendMessage() async { if (_controller.text.isEmpty) { return; } final message = _controller.text; _controller.clear(); setState(() { _messages.add({'sender': 'user', 'text': message}); }); if (_cloudRunHost.isEmpty || _cloudRunHost == 'YOUR_CLOUD_RUN_ENDPOINT_URL') { setState(() { _messages.add({ 'sender': 'bot', 'text': 'Please configure the Cloud Run endpoint in assets/config.json' }); }); return; } try { var endpoint_query = Uri.https(_cloudRunHost, '/ask_gemini', {'query': message}); final response = await http.get(endpoint_query); if (response.statusCode == 200) { var responseText = utf8.decode(response.bodyBytes); responseText = responseText.replaceAll(RegExp(r'\*'), ''); setState(() { _messages.add({'sender': 'bot', 'text': responseText}); }); } else { setState(() { _messages.add({ 'sender': 'bot', 'text': 'Error: ${response.statusCode}' }); }); } } catch (e) { setState(() { _messages.add({'sender': 'bot', 'text': 'Error: $e'}); }); } }

   此方法会检索用户输入的提示文本，并将其添加到对话面板中显示的消息列表中。它会向 Cloud Run 后端服务端点网址发送带有输入提示的 HTTP GET 请求，并显示该服务返回的响应。

   上面的代码会构建一个指向 Cloud Run 后端主机端点的网址，提示文本作为查询参数包含在其中。HTTP GET 请求随后会发送到相应端点。在收到状态代码为 200 的响应后，系统会对其进行解码并添加到消息列表中，以便在聊天界面中显示。如果响应未成功或发生异常，系统会将状态代码或异常信息添加到消息列表并加以显示。

6. 将 _MyHomePageState 类中现有的 build 方法替换为以下代码，以构建聊天应用界面：

   @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Gemini Chat App'), ), body: Column( children: [ Expanded( child: ListView.builder( padding: const EdgeInsets.all(8.0), itemCount: _messages.length, itemBuilder: (context, index) { final message = _messages[index]; final isUserMessage = message['sender'] == 'user'; return Align( alignment: isUserMessage ? Alignment.centerRight : Alignment.centerLeft, child: Container( margin: const EdgeInsets.symmetric(vertical: 4.0), padding: const EdgeInsets.all(12.0), decoration: BoxDecoration( color: isUserMessage ? Colors.blue[100] : Colors.grey[200], borderRadius: BorderRadius.circular(8.0), ), child: Text(message['text']!), ), ); }, ), ), Padding( padding: const EdgeInsets.all(8.0), child: Row( children: [ Expanded( child: TextField( controller: _controller, decoration: const InputDecoration( hintText: 'Enter a message', ), onSubmitted: (text) => _sendMessage(), ), ), IconButton( icon: const Icon(Icons.send), onPressed: _sendMessage, ), ], ), ), ], ), ); }

   build 方法描述了聊天应用的界面。它会根据配置和当前状态创建一个 widget 树，然后由 Flutter 框架将其渲染到屏幕上。在此聊天应用界面中，代码以列的形式显示聊天消息，同时提供一个文本字段和发送按钮供用户输入提示。用户输入的消息（提示）呈现在蓝色框中，而应用（聊天机器人）返回的回答或错误消息呈现在灰色框中。

   当用户在聊天应用中点击 Send（发送）或在文本字段中输入提示后按 Enter 键时，系统将调用 _sendMessage() 回调方法。

添加导入语句

所添加的代码依赖于 Dart 和 Flutter SDK 中的特定库或软件包。

1. 在 main.dart 文件开头、现有 import 语句的下方添加以下 import 语句，导入这些软件包：

   import 'package:http/http.dart' as http; import 'dart:convert'; import 'package:flutter/services.dart' show rootBundle;
   • http.dart 软件包内含一组高级函数和类，可让您轻松调用 HTTP 资源。
   • dart:convert 库包含用于处理常见数据转换（例如 JSON 序列化和 UTF-8 编码/解码）的函数。
   • rootBundle 属性是一个全局静态对象，用于访问随 Flutter 应用一起打包的主要资产包。

2. 在 IDE 导航菜单中依次点击文件 > 保存，保存对应用所做的更改。

更新依赖项

pubspec.yaml 文件指定了 Flutter 应用的项目元数据、软件包依赖项和资产。

1. 在 IDE 的“探索器”窗格中选中 pubspec.yaml 文件并进行修改。该文件位于 chat_app 文件夹中。

2. 在 dependencies 部分 cupertino_icons 字体库的下方，添加 http 软件包依赖项：

   http: ^1.6.0 请确保空格缩进正确。

   

3. 滚动到 pubspec.yaml 文件中的 flutter 部分，并取消注释第 63 行。在 assets 下添加 assets 文件夹，并保持正确的空格缩进：

   assets: - assets/

   

   这会配置资产文件夹，我们将在此文件夹中存储应用的 config.json 文件。

4. 在 IDE 导航菜单中依次点击文件 > 保存，保存对 pubspec.yaml 文件所做的更改。

将 Flutter 应用与 Cloud Run 后端集成

Flutter 应用将与您之前在此实验中部署的 Reasoning Engine 智能体集成。为实现集成，您需要将 Flutter 应用关联到您构建并部署到 Cloud Run 的后端应用的端点。

您可能已经注意到，_sendMessage() 方法中的代码会检查 _cloudRunHost 属性是否为空，或者是否未在名为 assets/config.json 的文件中配置。在这项子任务中，我们会将该文件添加到 Flutter 应用中。

1. 首先，提取后端应用的 Cloud Run 端点主机名，并将该值存储在环境变量中。

   在 IDE 终端窗口中运行以下命令：

   BACKEND_APP_HOST=$(gcloud run services describe ag-web --region {{{project_0.default_region|set at lab start}}} --format 'value(status.url)' | cut -d'/' -f3); echo $BACKEND_APP_HOST

2. 在 Flutter 聊天应用主目录中创建 /assets 目录：

   mkdir ~/chat_app/assets

3. 在 /assets 目录中创建 config.json 文件：

   cat <<EOF > ~/chat_app/assets/config.json { "cloudRunHost": "$BACKEND_APP_HOST" } EOF

4. 若要验证所作更改，请刷新 IDE 的探索器菜单中的内容，然后点击 IDE-DEV/chat_app/assets/config.json 文件将其打开。验证 cloudRunHost 配置条目值是否已更新为 Cloud Run 后端应用主机名的值。

   注意：此值应与您在先前步骤中设置的 `BACKEND_APP_HOST` 环境变量的值一致。

部署 Flutter 应用

现在，Flutter 应用配置已完成，您可以构建和部署该应用了。在本实验中，为了以 Web 应用的形式运行该应用，我们将使用 Fwr，这是一款针对 Flutter Web 的开发服务器。

1. 确保您位于 Flutter 应用文件夹中。在 IDE 终端窗口中运行以下命令：

   cd ~/chat_app

2. 运行以下命令提取应用项目依赖项：

   flutter pub get

3. 运行以下命令构建项目并启动 Web 服务器：

   fwr

   等待服务器启动并部署 Flutter 应用。启动后，该命令的输出应类似于以下内容：

   

任务 6. 测试 Flutter 应用

我们来测试一下 Flutter 应用的功能。

测试应用

1. 从实验凭证面板中复制实时服务器网址，然后在无痕式浏览器窗口的新标签页中打开该网址，以访问该 Flutter 应用。

   等待几秒钟，直到聊天应用加载完毕。

2. 在底部的消息输入框中输入以下内容：

   What is fallingwater? Write the answer in plaintext.

   几秒钟后，后端智能体返回的回答就会显示在应用中。

3. 在消息输入框中输入以下内容，以测试应用和智能体：

   Where can I buy the Chrome dino pin?

   几秒钟后，后端智能体返回的回答就会显示在应用中。

   聊天应用会调用后端应用的 /ask_gemini Cloud Run 端点，后者随后调用 LangChain 智能体。该智能体通过 Gemini 从 Agent Search 数据存储区获取结果并返回响应。

4. 如需查看将 Flutter 应用切换为移动端布局的效果，请将浏览器窗口调整到接近移动设备的大小：

   

   这表明 Flutter 应用可根据屏幕或窗口大小做出相应调整。Flutter 提供各种 widget 和软件包，能让您的应用根据设备配置灵活调整，实现响应式和自适应效果。

如需验证是否已完成以下目标，请点击检查我的进度： 开发并测试 Flutter 聊天应用。

结束实验

完成实验后，请点击结束实验。Google Skills 会移除您使用过的资源并为您清理账号。

系统会提示您为实验体验评分。请选择相应的评分星级，输入评论，然后点击提交。

星级的含义如下：

• 1 颗星 = 非常不满意
• 2 颗星 = 不满意
• 3 颗星 = 一般
• 4 颗星 = 满意
• 5 颗星 = 非常满意

如果您不想提供反馈，可以关闭该对话框。

如果要留言反馈、提出建议或做出更正，请使用支持标签页。

恭喜！

在本实验中，您完成了以下操作：

• 在 Google Cloud 控制台中使用 AI Applications 创建搜索数据存储区和搜索应用。
• 使用 Agent Platform Workbench 部署 LangChain 智能体。
• 构建与 Agent Search 和 LangChain 智能体集成的 Python 应用。
• 将该应用部署到 Cloud Run，并将其作为 Flutter 应用的后端。
• 开发一款 Flutter 聊天应用并将其与后端服务集成，以与 Gemini 进行交互。

后续步骤/了解详情

• Gemini for Google Cloud 概览
• Agent Platform Workbench
• Gemini Enterprise Agent Platform Studio
• Flutter
• Dart

版权所有 2026 Google LLC 保留所有权利。Google 和 Google 徽标是 Google LLC 的商标。其他所有公司名称和产品名称可能是其各自相关公司的商标。