本指南介绍了如何使用 App Prototyping agent 借助 Gemini in Firebase 快速开发和发布全栈应用。您将使用自然语言提示生成一个 Next.js 应用，该应用可从已登录用户提供的图片或浏览器摄像头中识别食物，并生成包含已识别食材的食谱。然后，用户可以选择将食谱存储在可搜索的数据库中。
接下来，您将对应用进行优化和改进，最终将其发布到 Firebase App Hosting。
在本指南后续步骤中，您还将使用以下技术：
- Firebase Studio 工作区
- Firebase 项目
- Firebase App Hosting
- Cloud Firestore
- Firebase Authentication
- Firebase App Check
第 1 步：生成您的应用
登录您的 Google 账号，然后打开 Firebase Studio。
在使用 AI 开发应用原型字段中，输入以下提示，以创建一个使用浏览器摄像头和生成式 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.酌情上传一张图片作为提示的附加信息。例如，您可以上传包含您希望应用使用的配色方案的图片，并告知 Firebase Studio 使用该配色方案。图片大小必须小于 3MiB。
点击使用 AI 开发原型。
应用原型设计智能体会根据您的提示生成应用蓝图，并返回建议的应用名称、所需功能和风格指南。
查看蓝图。如有必要，请进行一些更改。例如，您可以使用以下任一选项更改建议的应用名称或配色方案：
点击 自定义，然后直接修改蓝图。完成更改后点击保存。
在对话窗格中的描述… 字段中，添加澄清问题和背景信息。您还可以上传其他图片。
点击为此应用开发原型。
App Prototyping代理开始编写应用代码。
- 由于您的应用使用 AI，因此系统会提示您添加或生成 Gemini API 密钥。如果您点击“自动生成”，App Prototyping agent 会为您预配 Firebase 项目和 Gemini API 密钥。
第 2 步：测试、优化、调试和迭代
生成初始应用后，您可以进行测试、优化、调试和迭代。
查看应用并与应用互动：代码生成完毕后，系统会显示应用的预览。您可以直接与预览互动以进行测试。如需了解详情，请参阅预览应用。
添加 Cloud Firestore 和 Firebase Authentication：在迭代阶段，您可以要求 App Prototyping agent 使用 Cloud Firestore 和 Firebase Authentication 添加用户身份验证和数据库。例如，通过以下提示让用户能够保存和下载食谱：
Add user authentication to the app. Authenticated users can: - Download the recipe and its generated image as a PDF (Print). - Save the recipe as public or private and make accessible to a search feature. For now, just save the text, not the image, to the database. Important: Only authenticated users can download the PDF.在出现错误时修复错误：在大多数情况下，App Prototyping agent会提示您修复任何出现的错误。点击修复错误以允许它尝试进行修复。
如果您收到错误，而系统没有自动提示您进行修复，请将错误和相关上下文（例如“您是否可以修复我的 Firebase 初始化代码中的这个错误？”）复制到聊天窗口，然后将其发送给 Gemini。
使用自然语言进行测试和迭代：全面测试您的应用，并结合 App Prototyping agent 持续优化代码和蓝图，直到达到预期效果。
在 Prototyper view, you can also use the following features: 中时
点击
注释 可直接在“预览”窗口中绘图。使用可用的形状、图片和文本工具，以及可选的文本提示，直观地描述您希望 App Prototyping agent 更改的内容。点击
选择以选择特定元素，然后输入 App Prototyping agent 的说明。这样一来，您就可以快速定位特定图标、按钮、一段文本或其他元素。 点击图片时，您还可以选择从 Unsplash 搜索并选定图库图片。
（可选）您可以点击
共享预览链接，使用 Firebase Studio 公开预览功能来公开和暂时地共享您的应用。创建 Firebase 项目：当您执行以下操作时，App Prototyping 代理会代表您预配 Firebase 项目：
- 自动生成 Gemini API 密钥
- 请求将应用连接到 Firebase 项目
- 寻求有关将应用连接到 Firebase 服务（例如 Cloud Firestore 或 Firebase Authentication）的帮助
- 点击发布按钮并设置 Firebase App Hosting
如需更改与工作区关联的 Firebase 项目，请向 App Prototyping agent 提供您要改用的项目 ID。例如，“切换到 ID 为
<your-project-id>的 Firebase 项目”。测试应用并验证 Cloud Firestore 数据库规则：在应用预览窗格中，上传一张包含多种食物的图片，以测试应用的食材识别和食谱生成与保存功能。
以不同用户身份登录并生成食谱：确保已通过身份验证的用户可以查看自己的私密食谱和普通食谱，并且所有用户都可以查看公开食谱。
当您要求 App Prototyping agent 添加 Cloud Firestore 时，它会为您编写并部署 Cloud Firestore 数据库规则。在 Firebase 控制台中查看规则。
直接在代码中调试和迭代：点击
切换到代码以打开 Code 视图，您可以在其中查看应用的所有文件并直接修改代码。您可以切换回 Prototyper mode at any time.。在 Code 视图中，您还可以使用以下实用功能：
使用 Firebase Studio 的内置调试和报告功能检查、调试和审核您的应用。
借助 Gemini 实现的 AI 辅助功能，这些功能可以内嵌在代码中，也可以通过 Gemini 互动式对话来实现（默认情况下两种方式均可使用）。互动式对话可协助您诊断问题、提供解决方案并运行工具，以便更快地修复您的应用。如需访问对话，请点击工作区底部的 spark Gemini。
访问 Firebase Local Emulator Suite 以查看数据库和身份验证数据。如需在工作区中打开该模拟器，请执行以下操作：
点击
切换到代码，然后打开 Firebase Studio 扩展程序（在 macOS 上为 Ctrl+',Ctrl+'或Cmd+',Cmd+'）。滚动到后端端口并展开它。
在与端口 4000 对应的操作列中，点击在新窗口中打开。
测试和衡量生成式 AI 功能的性能：您可以使用 Genkit 开发者界面运行 Genkit AI 流程、测试、调试、与不同模型互动、优化提示等。
如需在 Genkit 开发者界面中加载 Genkit 流程并开始测试，请执行以下操作：
从 Firebase Studio 工作区中的终端，运行以下命令，以获取 Gemini API 密钥并启动 Genkit 服务器：
npm run genkit:watch点击 Genkit 开发者界面链接。Genkit 开发者界面会在新窗口中打开，其中包含您的流程、提示、嵌入器以及各种可用模型。
如需详细了解 Genkit 开发者界面，请参阅 Genkit 开发者工具。
（可选）第 3 步：使用 App Hosting 发布您的应用
在工作区中测试应用并对其感到满意后，您可以使用 Firebase App Hosting 将其发布到网络。
当您设置 App Hosting 时，Firebase Studio 会为您创建 Firebase 项目（如果尚未通过自动生成 Gemini API 密钥或通过其他后端服务来创建该项目的话），并引导您完成关联 Cloud Billing 账号的操作。
如需发布应用，请执行以下操作：
点击发布，以设置 Firebase 项目并发布您的应用。此时会出现发布您的应用窗格。
在 Firebase 项目步骤中，App Prototyping agent会显示与工作区关联的 Firebase 项目。如果 Firebase 项目尚不存在，App Prototyping agent 会为您创建一个新项目。点击 Next 以继续操作。
在关联 Cloud Billing 账号步骤中，选择以下任一选项：
选择您要与 Firebase 项目相关联的 Cloud Billing 账号。
如果您没有 Cloud Billing 账号或想要创建新账号，请点击创建 Cloud Billing 账号。此操作会打开 Google Cloud 控制台，您可以在其中创建新的自助式 Cloud Billing 账号。创建账号后，返回到 Firebase Studio，然后从关联 Cloud Billing 列表中选择该账号。
点击下一步。Firebase Studio 会将结算账号绑定到与您工作区关联的项目，该项目是在您自动生成 Gemini API 密钥或点击发布时创建的。
点击设置服务。App Prototyping代理开始预配 Firebase 服务。
点击立即发布。Firebase Studio 会设置 Firebase 服务，然后启动 App Hosting 发布。此步骤可能需要几分钟才能完成。如需详细了解幕后发生的情况，请参阅 App Hosting 构建流程。
发布步骤完成后，应用概览会出现，其中包含一个网址和由 App Hosting 可观测性功能赋能的应用数据分析。如需使用自定义域名（如 example.com 或 app.example.com）替代 Firebase 自动生成的域名，可在 Firebase 控制台中添加自定义域名。
如需详细了解 App Hosting，请参阅了解 App Hosting 及其工作原理。
（推荐）第 4 步：测试已发布的应用
发布完成并且您的应用部署到 Firebase 后，Cloud Firestore 和 Firebase Authentication 已准备好在生产环境中进行测试。
在 Firebase 控制台中查看 Cloud Firestore 和 Firebase Authentication 数据
发布后，您可以在 Firebase 控制台中查看应用的实时数据。
如需查看实时 Cloud Firestore 数据库，请打开 Firebase 控制台，然后从导航菜单中选择构建 > Firestore 数据库。
您可以在此处检查存储的数据、查看和测试安全规则，以及创建索引。如需了解详情，请前往 Cloud Firestore。
如需查看实时 Firebase Authentication 数据，请打开 Firebase 控制台，然后从导航菜单中选择构建 > 身份验证。
在此处，您可以检查身份验证配置和应用用户。如需了解详情，请前往 Firebase Authentication。
在生产环境中测试 Cloud Firestore 规则
发布应用后，您应再次针对生产环境测试 Cloud Firestore 安全规则。这有助于确保授权用户可以访问您的数据，并防止未经授权的访问。
您可以使用以下所有方法测试规则：
应用测试：与已部署的应用互动，执行可针对不同用户角色或状态触发各种数据访问模式（读取、写入、删除）的操作。这种实际测试有助于确认您的规则在实践中是否得到正确执行。
规则测试平台：如需进行有针对性的检查，请使用 Firebase 控制台中的规则测试平台。借助此工具，您可以根据生产规则模拟针对 Cloud Firestore 数据库的请求（读取、写入、删除）。您可以指定用户身份验证状态、数据路径和操作类型，以查看您的规则是否按预期允许或拒绝访问。
单元测试：如需进行更全面的测试，您可以为安全规则编写单元测试。借助由 Firebase Local Emulator Suite 提供支持的 Firebase Studio 预览版后端，您可以在本地运行这些测试，模拟生产规则的行为。这是一种可靠的方法，可用于验证复杂的规则逻辑并确认各种场景的覆盖范围。部署后，您应仔细检查使用模拟器的单元测试是否按预期运行，并涵盖所有场景。