开始使用应用原型设计代理

Firebase Studio 包含一个基于 Web 的界面，可让您使用多模态提示（包括自然语言、图片和绘图工具）快速开发原型，以及生成 AI 前向 Web 应用。该代理支持 Next.js 应用，并计划在未来支持其他平台和框架。

应用原型设计代理是一种简化的无代码开发 flow，它使用生成式 AI 来开发、测试、迭代和发布全栈代理 Web 应用。您可以使用可选图片以自然语言描述应用创意，代理会生成应用蓝图、代码和 Web 预览。为了帮助您开发和发布全栈应用，Firebase Studio 可以自动为您配置以下服务：

• 如果您的应用使用 AI：Firebase Studio 将 Gemini Developer API 添加到您的应用，利用 Genkit flow 的强大功能来与 Gemini 配合使用。您可以使用自己的 Gemini API 密钥，也可以让 Firebase Studio 为您预配 Firebase 项目和 Gemini API 密钥。

• 如果您想将应用发布到 Web 上：Firebase Studio 会创建一个项目，并提供一种使用 Firebase App Hosting 快速发布应用的方式。

重要提示 ：当 App Prototyping agent 设置 Gemini API 密钥和其他 Firebase 服务时，它会创建一个新的 Firebase 项目以与工作区相关联。目前，这是从 App Prototyping agent 视图发布时唯一可关联的项目。请注意，您可以通过将代码提交到 GitHub 并创建App Hosting后端，将应用发布到其他 Firebase 项目。您还可以使用代码视图来集成 Firebase 服务。

您可以使用自然语言、图片和绘图工具优化应用，直接修改代码、回滚更改、发布应用并监控其性能，所有这些操作都可以在 Firebase Studio 中完成。

注意 ：应用原型设计代理可帮助您使用 Next.js 构建 Web 应用。我们即将支持其他平台和框架！

开始使用

如需开始使用 App Prototyping agent，请按照以下步骤操作：

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

2. 在使用 AI 开发应用原型字段中，用自然语言描述您的应用想法。

   例如，您可以输入如下提示，以创建食谱生成应用：

   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.
   

   提示 ：为了获得最佳结果，请在提示中尽可能具体。 包括您想要的功能、用户工作流和数据要求。请注意，最有效的 AI 开发流程是迭代流程，您可以使用 Gemini in Firebase 继续协作优化和添加功能。详细了解如何编写有效的提示。

3. 酌情上传一张图片作为提示的附加信息。例如，您可以上传包含您希望应用使用的配色方案的图片，并告知 Firebase Studio 使用该配色方案。图片大小必须小于 3MiB。

4. 点击使用 AI 开发原型。

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

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

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

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

6. 点击为此应用开发原型。

   重要提示：Gemini in Firebase 可能会生成看似合理但实际上不正确的输出。它可能会提供不准确的信息，此类信息并不代表 Google 的观点。在使用 Gemini 的所有输出之前，请先对其进行验证，请勿在生产环境中使用未经测试的生成代码。请勿在聊天中输入个人身份信息 (PII) 或用户数据。

7. App Prototyping代理开始编写应用代码。

   • 如果您的应用使用 AI，系统会提示您添加或生成 Gemini API 密钥。如果您点击“自动生成”，App Prototyping agent 会为您预配 Firebase 项目和 Gemini API 密钥。
   重要提示：如果您选择自动生成，App Prototyping agent 会代表您创建一个 Firebase 项目（其前缀与您的 Firebase Studio 工作区名称一致），并在该项目中创建一个新的 Gemini API 密钥。它还会将密钥存储在 Firebase Studio 工作区的 .env 文件中。如需随时访问新项目，请点击页面顶部的项目名称。如需日后访问 Gemini API 密钥以执行复制或删除操作，请使用 Google Cloud 控制台。

测试、优化、调试和迭代

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

• 查看应用并与应用互动：代码生成完毕后，系统会显示应用的预览。您可以直接与预览互动以进行测试。如需了解详情，请参阅预览应用。

• 在出现错误时修正错误：在大多数情况下，App Prototyping agent 会提示您修正出现的所有错误。点击修正错误以允许它尝试修正。

  如果您收到的错误没有自动提示您进行修正，请将错误和任何相关背景信息（例如“您能否修正我的 Firebase 初始化代码中的此错误？”）复制到聊天窗口，然后发送到 Gemini。

  提示 ：Gemini 会解释其推理过程，但您也可以要求它在执行计划之前先解释计划。

• 使用自然语言进行测试和迭代：全面测试您的应用，并结合 App Prototyping agent 持续优化代码和蓝图，直到达到预期效果。

  在 Prototyper mode, you can also use the following features: 中时

  • 点击 注释 可直接在“预览”窗口中绘图。使用可用的形状、图片和文本工具，以及可选的文本提示，直观地描述您希望 App Prototyping agent 更改的内容。

  • 点击 选择以选择特定元素，然后输入 App Prototyping agent 的说明。这样一来，您就可以快速定位特定图标、按钮、一段文本或其他元素。 点击图片时，您还可以选择从 Unsplash 搜索并选定图库图片。

  您可以选择点击 共享预览链接，通过Firebase Studio 公开预览公开和临时共享您的应用。

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

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

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

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

  • 访问 Firebase Local Emulator Suite 以查看数据库和身份验证数据。如需在工作区中打开模拟器，请执行以下操作：

    1. 点击 切换到代码，然后打开 Firebase Studio 扩展程序（在 macOS 上为 Ctrl+',Ctrl+' 或 Cmd+',Cmd+'）。

    2. 滚动到后端端口并展开。

    3. 在与端口 4000 对应的操作列中，点击在新窗口中打开。

• 测试和衡量生成式 AI 功能的性能：您可以使用 Genkit 开发者界面运行 Genkit AI 流程、测试、调试、与不同模型互动、优化提示等。

  如需在 Genkit 开发者界面中加载 Genkit flow 并开始测试，请执行以下操作：

  1. 在 Firebase Studio 工作区中的终端中，运行以下命令以获取 Gemini API 密钥并启动 Genkit 服务器：

      npm run genkit:watch
     

  2. 点击 Genkit 开发者界面链接。Genkit 开发者界面会在新窗口中打开，其中包含您的 flow、提示、嵌入器以及各种可用模型。

  如需详细了解 Genkit 开发者界面，请参阅 Genkit 开发者工具。

使用 Firebase App Hosting 发布您的应用

在工作区中测试并确认应用符合预期后，您可以使用 Firebase App Hosting 将其发布到网络。

重要提示：您需要有一个 Cloud Billing 账号才能使用 Firebase App Hosting。将结算账号关联到 Firebase 项目后，项目将自动升级为随用随付 Blaze 定价方案，且您的 Gemini API 和其他 Firebase 和 Google Cloud 服务用量会升级为付费层级。超出免费配额的付费服务使用将产生费用。如需了解详情，请参阅了解 App Hosting 费用、Firebase 价格和 Gemini Developer API 价格。

当您设置 App Hosting 时，Firebase Studio 会为您创建一个 Firebase 项目（如果尚未通过自动生成 Gemini API 密钥来创建），并引导您完成关联 Cloud Billing 账号的操作。

如需发布应用，请执行以下操作：

1. 点击发布以设置 Firebase 项目并发布您的应用。系统会显示发布您的应用窗格。

   重要提示：如果您未自动生成 Gemini API 密钥，则在您点击发布时，Firebase Studio 会为您预配 Firebase 项目。您可以点击页面顶部的项目名称以访问 Firebase 项目。

2. 在 Firebase 项目步骤中，App Prototyping agent 会显示与工作区关联的 Firebase。如果在 Gemini API 密钥生成期间未创建项目，系统会为您创建一个新项目。点击 Next 以继续操作。

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

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

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

4. 点击下一步。Firebase Studio 会将结算账号绑定到与您工作区关联的项目，该项目是在您自动生成 Gemini API 密钥或点击发布时创建的。

   重要提示：您需要有一个 Cloud Billing 账号才能使用 Firebase App Hosting。将结算账号关联到 Firebase 项目后，项目将自动升级为随用随付 Blaze 定价方案，且您的 Gemini API 和其他 Firebase 和 Google Cloud 服务用量会升级为付费层级。超出免费配额的付费服务使用将产生费用。如需了解详情，请参阅了解 App Hosting 费用、Firebase 价格和 Gemini Developer API 价格。

5. 点击设置服务。App Prototyping代理开始预配 Firebase 服务。

6. 点击立即发布。Firebase Studio 会设置 Firebase 服务。此步骤可能需要几分钟才能完成。如需详细了解幕后发生的情况，请参阅 App Hosting 构建流程。

   提示 ：如果您不想立即发布，可以点击稍后发布。

7. 发布步骤完成后，应用概览会显示一个网址和由 App Hosting 可观测性功能赋能的应用数据分析。如需使用自定义域名（如 example.com 或 app.example.com）替代 Firebase 自动生成的域名，可在 Firebase 控制台中添加自定义域名。

提示 ：如果您在发布期间收到任何错误，请参阅我在发布后收到“未能发布应用”错误，了解如何查找和修正发布错误。

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

使用 Firebase App Check 和 reCAPTCHA Enterprise 保护您的应用

如果您已将 Firebase 或 Google Cloud 服务集成到您的应用中，Firebase App Check 可以防止未经授权的客户端访问您的 Firebase 资源，从而有助于保护应用后端免遭滥用。它可与 Google 服务（包括 Firebase 和 Google Cloud 服务）和您自己的自定义后端搭配使用，以确保资源安全。

我们建议您为公开发布的所有应用添加 App Check，以保护您的后端资源免遭滥用。

本部分将引导您使用 reCAPTCHA Enterprise 在 Firebase Studio 中为由 App Prototyping agent 创建的 Web 应用设置 App Check，但您可以在实现 Firebase 服务并可以实现自定义提供方的任何应用中设置 App Check。如需了解详情，请前往 Firebase App Check。

ReCAPTCHA Enterprise 提供最多 10,000 次免费评估。

第 1 步：为您的应用设置 reCAPTCHA Enterprise

1. 打开 Google Cloud 控制台的 reCAPTCHA Enterprise 部分。

2. 从 Google Cloud 控制台项目选择器中选择您的 Firebase 项目的名称。

3. 如果系统提示您启用 reCAPTCHA Enterprise API，请执行此操作。

4. 点击开始使用，然后为您的 reCAPTCHA 网站密钥添加显示名称。

5. 接受默认的网站 应用类型密钥。

6. 点击添加网域，然后添加网域。您需要添加 App Hosting 网域（例如 studio--PROJECT_ID.REGION.hosted.app）以及您与应用搭配使用或计划与应用搭配使用的任何自定义网域。

7. 点击下一步。

8. 将您是否会使用验证保留为未选中状态。

9. 点击创建密钥。

10. 复制并保存您的密钥 ID，然后继续执行配置App Check。

第 2 步：配置 App Check

1. 打开 Firebase 控制台，然后在导航菜单中依次点击 Build > App Check。

2. 点击开始使用，然后点击应用旁边的注册。

3. 点击展开 ReCAPTCHA，然后粘贴您为 reCAPTCHA Enterprise 生成的密钥 ID。

4. 点击保存。

第 3 步：在代码中添加 App Check

1. 返回 Firebase Studio，在 Code 视图中，将您生成的网站密钥添加到 .env 文件：

   NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY
   

2. 如果您尚未将 Firebase 配置保存到 .env，请获取该配置：

   • 在 Firebase 控制台中，打开项目设置，然后在与您的应用对应的部分中找到该设置。

   • 在 Code 视图中的终端中：

     1. 登录 Firebase：firebase auth login
     2. 选择您的项目：firebase use FIREBASE_PROJECT_ID
     3. 获取 Firebase 配置：firebase apps:sdkconfig

3. 将配置添加到 .env 文件中，使其如下所示：

   NEXT_PUBLIC_FIREBASE_API_KEY=FIREBASE_API_KEY
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=FIREBASE_AUTH_DOMAIN
   NEXT_PUBLIC_FIREBASE_PROJECT_ID=FIREBASE_PROJECT_ID
   NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=FIREBASE_STORAGE_BUCKET
   NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=FIREBASE_MESSAGING_SENDER_ID
   NEXT_PUBLIC_FIREBASE_APP_ID=FIREBASE_APP_ID
   NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY
   

4. 将 App Check 添加到您的应用代码中。您可以让 Gemini 将 App Check 与 reCAPTCHA Enterprise 添加到您的应用中（请务必指定“reCAPTCHA Enterprise”，并务必仔细检查！），也可以按照初始化 App Check 中的步骤操作。

5. 将您的网站重新发布到 App Hosting。尝试测试您的 Firebase 功能以生成一些数据。

6. 在 Firebase 控制台中依次打开 Build > App Check，验证 App Check 是否正在接收请求。

7. 点击以检查 Firebase 服务。验证请求已到达后，点击强制执行以强制执行 App Check。

8. 针对 Firebase Authentication 重复验证和强制执行。

为 App Check 注册应用后，如果您希望在 App Check 通常不会归类为有效提供方的环境（例如开发期间的本地环境）或持续集成 (CI) 环境中运行您的应用，可以创建应用的调试 build，该 build 使用 App Check 调试提供方，而不是真正的证明提供方。 如需了解详情，请参阅将 App Check 与 Web 应用中的调试提供程序搭配使用。

监控您的应用

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

• 点击发布以发布应用的新版本。
• 通过访问您的应用分享应用链接或直接打开您的应用。
• 查看过去 7 天的应用性能摘要，包括请求总数和最新发布状态。点击查看详细信息，以便在 Firebase 控制台中访问更多信息。
• 查看图表，了解您的应用在过去 24 小时内收到的请求数量，并按 HTTP 状态代码分类显示。

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

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

回滚部署

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

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

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

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

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

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

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

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

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

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

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

使用 Genkit Monitoring 监控已部署的功能

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

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

重要提示：Genkit Monitoring 依赖于写入 Google Cloud Logging、Metrics 和 Trace 这些付费服务的遥测数据。如需查看价格详情并了解免费层级的相关限制，请查看 Google Cloud Observability 价格页面。

第 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 将其打开。

   提示 ：请注意该文件的 prompt 部分：您可以手动修改此部分以优化 Gemini 的回答。

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

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

   提示：如需详细了解 Genkit 中的高级遥测选项，请参阅高级配置。

第 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。

提示：如需了解 App Prototyping agent 的整个应用生命周期（从构思到发布的整个过程），请参阅使用 Firebase Studio 开发、发布和监控全栈 Web 应用。

后续步骤

• 使用 Firebase Studio 开发、发布和监控全栈 Web 应用。
• 使用模板或解决方案开发适用于任意框架的应用。