使用应用原型制作代理开发、发布和监控全栈 Web 应用

本指南介绍了如何使用 App Prototyping agent 在 Firebase 中借助 Gemini 快速开发和发布全栈应用。您将使用自然语言提示生成一个 Next.js 应用，该应用可从照片或浏览器内摄像头识别食物，并提供包含识别出成分的食谱。然后，您将优化和改进该应用，最终发布到 Firebase App Hosting。

Firebase Studio

在本指南中，您还将使用以下其他技术：

第 1 步：生成应用

  1. 登录您的 Google 账号，然后打开 Firebase Studio。

  2. 在使用 AI 对应用进行原型设计字段中，输入要构建的应用的说明。对于此解决方案（即创建基于图片的食谱应用），您可以使用类似以下的提示来构建使用相机和生成式 AI 的应用原型：

    Build a web app that can identify food products from an uploaded picture or
in-browser camera. The app should provide a recipe that contains the
identified ingredients.

  3. 点击使用 AI 制作原型。

    Gemini 会根据您的提示生成应用蓝图，并返回建议的应用名称、所需功能和样式指南。

  4. 查看蓝图并进行一些更改。例如，您可以使用以下任一选项更改建议的应用名称或配色方案：

    • 点击 Customize（自定义），然后直接修改蓝图。进行更改，然后点击保存。

    • 在聊天窗格中的描述...字段中，添加澄清性问题和背景信息。您还可以上传其他图片。

  5. 点击对此应用进行原型设计。Gemini 会开始编写应用代码。由于应用说明中描述了需要生成式 AI 的功能，因此 Gemini 会提示您输入 Gemini API 密钥。

  6. 添加您自己的 Gemini API 密钥，或点击自动生成以生成 Gemini API 密钥。

第 2 步：测试、优化、调试和迭代

生成初始应用后，您可以进行测试、优化、调试和迭代。

  1. 查看和与应用互动：代码生成完成后，系统会显示应用的预览。您可以直接与预览进行互动以对其进行测试。

  2. 迭代应用：继续使用聊天界面让 Gemini 添加功能并优化应用。或者，点击 代码切换图标 切换到代码以打开 Code 视图，在其中您可以直接在 Firebase Studio 工作区中修改代码。

  3. 测试应用：在应用预览窗格中，上传一张显示不同食物的图片，以测试应用识别食材并提供食谱的功能。（可选）您可以使用 Code 视图，通过 Firebase Studio 公开预览暂时公开分享您的应用。

  4. 调试应用：点击 代码切换图标 打开 Code。切换到代码以打开 Code 视图，您可以在其中使用 Firebase Studio 的内置调试和报告功能来检查、调试和审核应用。您可以随时切换回 App Prototyping agent。

  5. 迭代：如果应用未按预期运行，请优化问题提示，使用聊天窗格让 Gemini 优化应用，或直接修改代码 Code。

（可选）第 3 步：使用 App Hosting 发布应用

测试应用并获得满意结果后，您可以使用 Firebase App Hosting 将其发布到 Web 上。

设置 App Hosting 时，Firebase Studio 会为您创建一个 Firebase 项目，并引导您完成关联 Cloud Billing 账号的步骤。

如需将应用发布到 Firebase App Hosting，请执行以下操作：

  1. 点击发布以创建新的 Firebase 项目并开始 App Hosting 设置。系统随即会显示发布应用窗格。

  2. 在 Firebase 项目步骤中，记下为您创建的 Firebase 项目的名称，然后点击下一步。

  3. 在关联 Cloud Billing 账号步骤中，选择以下选项之一：

    • 选择您要关联到 Firebase 项目的 Cloud Billing 账号。

    • 如果您没有 Cloud Billing 账号或想创建一个新账号，请点击创建 Cloud Billing 账号。这会打开 Google Cloud 控制台，您可以在其中创建新的自助 Cloud Billing 账号。创建账号后，返回 Firebase Studio，然后从关联 Cloud Billing列表中选择该账号。

  4. 点击下一步。Firebase Studio 会将结算账号与与您的工作区关联的项目相关联，该项目是在您自动生成 Gemini API 密钥或点击发布时创建的。然后，App Hosting 会在 Google Cloud 中为您的应用设置全托管式环境。

  5. 点击创建您的首个发布。Firebase Studio 启动 App Hosting 发布。此过程最多可能需要 10 分钟才能完成。如需详细了解幕后发生的情况，请参阅 App Hosting 构建过程。

  6. 发布完成后，系统会显示应用概览，其中包含网址和由 App Hosting 可观测性功能提供支持的应用数据分析。如需使用自定义网域（如 example.com 或 app.example.com）而非 Firebase 生成的网域，您可以在 Firebase 控制台中添加自定义网域。

如需详细了解 App Hosting，请参阅了解 App Hosting 及其工作原理。

（可选）第 4 步：监控您的应用

App Hosting 应用概览面板会提供有关应用的关键指标和信息，让您能够使用 App Hosting 的内置可观测性工具监控 Web 应用的性能。网站发布后，您可以点击发布来查看概览。在此面板中，您可以：

  • 点击创建发布计划以发布应用的新版本。
  • 分享指向应用的链接，或直接在访问您的应用中打开您的应用。
  • 查看应用在过去 7 天内的表现摘要，包括请求总数和最新发布版本的状态。点击查看详情，即可在 Firebase 控制台中查看更多信息。
  • 查看应用在过去 24 小时内收到的请求数量的图表，按 HTTP 状态代码细分。

如果您关闭了“应用概览”面板，可以随时点击发布重新打开该面板。

如需详细了解如何管理和监控 App Hosting 发布，请参阅管理发布和版本。

（可选）第 5 步：回滚部署

如果您已将应用的多个版本部署到 App Hosting，则可以将其回滚到某个较低版本。您也可以将其移除。

  • 如需回滚已发布的网站，请执行以下操作：

    1. 在 Firebase 控制台中打开 App Hosting。

    2. 找到应用的后端，点击查看，然后点击发布版本。

    3. 在要回滚到的部署旁边，点击更多图标 ，然后选择回滚到此 build 并确认。

    如需了解详情，请参阅管理发布和版本。

  • 如需从网络上移除您的 App Hosting 网域，请执行以下操作：

    1. 在 Firebase 控制台中，打开 App Hosting，然后点击 Firebase Studio 应用部分中的查看。

    2. 在后端信息部分中，点击管理。系统会加载 Domains（网域）页面。

    3. 点击域名旁边的更多图标 ，然后选择停用域名并确认。

    此操作会从网络中移除您的域名。如需完全移除 App Hosting 后端，请按照删除后端中的说明操作。

（可选）第 6 步：对已部署的功能使用 Genkit 监控

您可以通过为 AI 流程代码启用遥测功能来监控 Genkit 特征步骤、输入和输出。借助 Genkit 的遥测功能，您可以监控 AI 流的性能和使用情况。这些数据有助于您确定有待改进的方面、排查问题、优化提示和流程以提高性能和成本效益，以及跟踪流程在一段时间内的使用情况。

如需在 Genkit 中设置监控，您需要向 Genkit AI 流程添加遥测，然后在 Firebase 控制台中查看结果。

第 1 步：在 Firebase Studio 中向 Genkit 流程代码添加遥测

如需在代码中设置监控，请执行以下操作：

  1. 如果您尚未处于 Code 视图，请点击 代码切换图标 Switch to Code（切换到代码）将其打开。

  2. 检查 package.json 以验证已安装的 Genkit 版本。

  3. 打开终端（Ctrl-Shift-C，在 macOS 中为 Cmd-Shift-C）。

  4. 点击终端，然后使用与 package.json 文件匹配的版本安装 Firebase 插件。例如，如果 package.json 中的 Genkit 软件包版本为 1.0.4，您应运行以下命令来安装该插件：

    npm i --save @genkit-ai/firebase@1.0.4

  5. 在 Explorer 中，展开 src > ai > flows。flows 文件夹中会显示一个或多个包含 Genkit 流的 TypeScript 文件。

  6. 点击其中一个流程即可将其打开。

  7. 在文件的“导入”部分底部，添加以下代码以导入并启用 FirebaseTelemetry：

    import { enableFirebaseTelemetry } from '@genkit-ai/firebase';

enableFirebaseTelemetry();

第 2 步：设置权限

Firebase Studio 在设置您的 Firebase 项目时为您启用了所需的 API，但您还需要向 App Hosting 服务账号提供权限。

如需设置权限，请执行以下操作：

  1. 打开 Google Cloud IAM 控制台，选择您的项目，然后向应用托管服务账号授予以下角色：

    • Monitoring Metric Writer (roles/monitoring.metricWriter)
    • Cloud Trace Agent (roles/cloudtrace.agent)
    • Logs Writer (roles/logging.logWriter)

  2. 重新发布应用到 App Hosting。

  3. 发布完成后，加载您的应用并开始使用。五分钟后，您的应用应该会开始记录遥测数据。

第 3 步：在 Firebase 控制台中监控生成式 AI 功能

配置遥测后，Genkit 会记录所有流的请求数、成功次数和延迟时间，并针对每个具体流收集稳定性指标、显示详细图表以及记录捕获的轨迹。Genkit

如需监控使用 Genkit 实现的 AI 功能，请执行以下操作：

  1. 五分钟后，在 Firebase 控制台中打开 Genkit，然后查看 Genkit 的提示和回答。

    Genkit 会汇总以下稳定性指标：

    • 请求总数：您的数据流收到的请求总数。
    • 成功率：成功处理的请求所占的百分比。
    • 第 95 百分位的延迟时间：流的第 95 百分位的延迟时间，即处理 95% 的请求所需的时间。

    • 令牌用法：

      • 输入令牌：在提示中发送给模型的令牌数量。
      • 输出令牌：模型在回答中生成的令牌数量。

    • 图片用法：

      • 输入图片：在问题中发送给模型的图片数量。
      • 输出图片：模型在响应中生成的图片数量。

    如果您展开稳定性指标，则可以看到详细图表：

    • 一段时间内的请求量。
    • 一段时间内的成功率。
    • 一段时间内的输入和输出令牌。
    • 一段时间内的延迟时间（第 95 百分位和第 50 百分位）。

如需详细了解 Genkit，请访问 Genkit。

后续步骤