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

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

。

在本指南中，您将使用其他技术，包括：

第 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. 查看蓝图并进行一些更改。例如，您可以使用以下任一选项更改建议的应用名称或配色方案：

    • 点击 自定义，然后直接修改蓝图。完成更改后点击保存。

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

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

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

    。

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

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

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

  2. 使用自然语言迭代应用：继续使用聊天界面向 Gemini 添加功能并优化应用。

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

  4. 直接在代码中调试和迭代：点击 代码切换图标 切换到代码以打开 Code 视图，您可以在其中查看应用的所有文件并直接修改代码。您可以切换回 Prototyper mode at any time.。

    在 Code 视图中，您还可以使用以下实用功能：

    • 使用 Firebase Studio 的内置调试和报告功能检查、调试和审核您的应用。

    • 使用 Gemini in Firebase 的 AI 辅助功能，内嵌在代码中，也可以使用互动式对话（默认情况下两种方式均可使用）。通过互动式对话，您可以诊断问题、提供解决方案并运行工具，以便更快地修复应用。如需访问对话，请点击工作区底部的 星光图标Gemini。

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

对应用进行测试并感到满意后，您可以使用 Firebase App Hosting 将其发布到网络。

当您设置 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. 在后端信息部分，点击管理。系统会加载网域页面。

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

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

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

您可以通过向 AI flow 代码启用遥测来监控 Genkit 功能步骤、输入和输出。借助 Genkit 的遥测功能，您可以监控 AI flow 的性能和用量。这些数据可帮助您确定需要改进的方面、排查问题、优化提示和流程以提高性能和成本效益，以及跟踪 flow 的使用情况。

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

第 1 步：在 Firebase Studio 中向 Genkit flow 代码添加遥测数据

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

  1. 如果您尚未进入 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. 在探索器中，展开 src > ai > flows。包含 Genkit flow 的一个或多个 TypeScript 文件会显示在 flows 文件夹中。

  6. 点击其中一个 flow 将其打开。

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

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

enableFirebaseTelemetry();

第 2 步：设置权限

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

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

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

    • 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 会记录所有 flow 的请求数、成功率和延迟时间，并且针对每个特定 flow，Genkit 会收集稳定性指标、显示详细图表并记录捕获的跟踪记录。

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

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

    Genkit 会编译以下稳定性指标：

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

    • token 使用情况：

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

    • 图片使用情况：

      • 输入图片数：在提示中向模型发送的图片数。
      • 输出图片数：模型在回答中生成的图片数。

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

    • 请求量随时间的变化。
    • 随时间变化的成功率。
    • 输入 token 数和输出 token 数随时间的变化。
    • 延迟时间（第 95 百分位和第 50 百分位）随时间的变化。

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

后续步骤