Firebase Studio 使用入门

1. 概览

在此 Codelab 中，您将练习使用 Firebase Studio 中的应用原型设计代理来创建一款旨在帮助您学习新语言的应用。然后，您将对应用进行优化和改进，并可选择将其发布到 Firebase App Hosting。

语言学习应用的 GIF 动画

学习内容

  • Firebase Studio 中的提示最佳实践
  • 迭代开发应用以添加功能和修复 bug
  • 将应用发布到 Firebase App Hosting 并与他人分享
  • 通过 App Hosting 应用概览面板跟踪关键指标

您需要满足的条件

  • 您所选的浏览器（例如 Google Chrome）
  • 一个用于创建和管理 Firebase 项目的 Google 账号

2. 使用应用原型设计代理生成应用

应用原型设计代理使用 Gemini in Firebase 构建应用。即使使用相同的提示，您的结果也可能与此 Codelab 中展示的结果不完全相同。如果您遇到困难，我们提供了一组文件，您可以将其添加到工作区，以便在本 Codelab 的多个检查点继续完成实验。

  1. 登录您的 Google 账号，然后打开 Firebase Studio。
  2. 在使用 AI 开发应用原型字段中，输入您要构建的应用的说明。在此 Codelab 中，您将构建一个应用，该应用可通过故事、卡片和 AI 辅导功能帮助您学习新语言。输入提示，例如：
    An app to help someone learn a new language. The app should include
AI-generated stories in the target language, where users can click vocab
words or the entire story to see it in English. A different section
includes flashcards, where the user is shown a word in the chosen language
and can click it to flip the card and see the word in English. The final
section includes an AI chatbot that allows the user to have simple
conversations in the chosen language or ask questions in English about
what a word means or how to form a sentence in the chosen language. All
content should be beginner-friendly, focusing on basic greetings, common
questions/answers, and vocabulary relevant to the lessons or stories.
To start, the app should teach the user French, although we might add
additional languages in the future.
  3. 点击使用 AI 开发原型。
  4. 查看建议的应用蓝图。点击自定义图标自定义即可修改蓝图：
    1. 将应用名称更改为 Speak Easy。
    2. 将配色方案更改为以下内容：
    Primary color: Asparagus green (#98BF64) for a calm and friendly feel.
Secondary color: Light parchment (#F5EBCD) to complement the primary color.
Accent: Marigold (#FFB833) for interactive elements and call-to-action buttons.
    如果您希望以图片形式提交配色方案或布局，请点击附件图标 附件选项，以便在提示或蓝图流程中上传图片。图片大小必须小于 3MiB。
  5. 点击保存。
  6. 当蓝图完成更新后，点击为此应用开发原型。应用的蓝图
  7. 由于此应用包含 AI 元素，因此代理会提示您提供 Gemini 密钥。添加您自己的 Gemini API 密钥，或点击自动生成以生成 Gemini API 密钥。如果您点击自动生成，Firebase Studio 会为您创建一个 Firebase 项目并生成一个 Gemini API 密钥。
  8. 应用原型设计代理会使用应用蓝图创建应用的第一个版本。完成后，应用预览会显示在 Gemini 对话界面旁边。花点时间测试您的应用。即使它看起来与您设想的不完全一样，下一部分也会介绍如何添加新功能并优化设计。应用的初始原型 GIF 动画

3. （可选）获取代码

如果您遇到困难，或者想更密切地跟进示例应用，请使用本 Codelab 中多个检查点提供的示例文件。

  1. 下载文件夹中的文件。
  2. 在 Firebase Studio 中，点击 代码视图图标 切换到代码以打开代码视图。
  3. 将下载的文件拖到 Firebase Studio 的“资源管理器”窗格中。允许文件替换任何现有文件。
  4. 点击切换到 Prototyper 以继续学习 Codelab，并使用应用的示例版本。

4. 测试、迭代和调试应用的功能

在预览应用时，您可能会发现 bug 或意外的功能。在应用示例版本中，我们将添加以下更改和修复：

  • 在 AI 故事生成器中，用户应能够点击词汇来获取英文定义。
  • 卡片应以法语显示，点击后切换为英语。
  • 用户应能够前往设置页面，然后切换为学习日语而不是法语。

目标 1：向 AI 故事生成器添加词汇

可选：如需从这一步开始使用示例版应用，请下载并将这些文件拖动到代码视图中 Firebase Studio 的“资源管理器”窗格中。

  1. 在聊天界面中，描述您要添加的功能：
    In the AI Story Generator, users should be able to click vocab words or
phrases to get the definition in English. Words or phrases should be
underlined to indicate they can be clicked.
  2. 在预览窗口中测试应用。您稍后会更新应用的外观和风格，因此现在请尽量只关注功能。
  3. 如果应用未按预期运行，请继续提示应用原型设计代理进行调整。例如：
    IMPORTANT: Be sure to underline and provide a definition for most words
and phrases, and ESPECIALLY all nouns and verbs. If a word or phrase in the
story appears multiple times, only underline and define the first instance.
  4. 点击 代码视图图标切换到代码以打开代码视图，您可以在其中查看应用的所有文件并直接修改代码。如果 Gemini 无法解决某个 bug，有时手动修改文件会更简单。准备就绪后，切换到 Prototyper 模式，继续使用应用原型设计代理。

AI 故事生成器使用带下划线的字词创作法语故事的 GIF 动画

目标 2：为卡片添加翻译

可选：如需从这一步开始使用示例版应用，请下载并将这些文件拖动到代码视图中 Firebase Studio 的“资源管理器”窗格中。

按照上述相同流程，使用聊天界面描述功能，在预览窗口中测试该功能，然后使用其他提示或代码视图向记忆卡添加翻译。尝试使用以下提示：

 The flash cards should appear in the target language to start, then switch to
 English when clicked.

有时，应用原型设计代理无法识别是否存在 bug。描述您看到的内容以及需要修正的内容可能更有效，例如：

 The flip button for the flash cards isn't working. Can you debug it? All flash
 cards are only showing in English.

抽认卡在法语和英语之间切换的动画 GIF

目标 3：添加新语言

可选：如需从这一步开始使用示例版应用，请下载并将这些文件拖动到代码视图中 Firebase Studio 的“资源管理器”窗格中。

尝试使用以下提示：

 Add a settings section to the app, where users can swap to a new language
 to learn. Add Japanese to the list of languages the user can pick from. If
 the user selects Japanese, the AI-generated stories, flash cards, and chatbot
 tutor should all use Japanese instead of French.

将应用切换为日语的 GIF 动画

5. 迭代应用的设计

可选：如需从这一步开始使用示例版应用，请下载并将这些文件拖动到代码视图中 Firebase Studio 的“资源管理器”窗格中。

现在，您的应用已具备所需的所有功能，接下来可以开始处理样式了。

更改应用的配色方案

您可以明确指定要使用的颜色，也可以让 App Prototyping 代理主导颜色选择。在聊天界面中，您还可以点击附件图标 附件选项，上传包含您要使用的颜色或样式的图片。如果您想使用提示，可以尝试：

 Add color to the design of the app. Use modern, clean colors that adhere
 to accessibility standards and have a calming feel.

更新了应用中使用的文本

例如，您可能希望它只说“聊天”，而不是“AI Chatbot Tutor”：

 Change the text "AI Chatbot Tutor" to "Chat".

调整应用界面，使其更直观

例如，您可能希望允许用户按键盘上的 Return 来提交文字，而不是必须按某个按钮：

 In the story generator section, allow the user to press the return key on
 the keyboard to submit the text.

添加了选项，供用户在浅色模式和深色模式之间进行选择

许多用户可能更喜欢选择应用的浅色或深色主题。请考虑在何处放置此开关才合乎逻辑：

 Add an icon in the upper right corner to dynamically switch the color theme of
 the app between dark mode and light mode.

提示和调试技巧

  • 获取提示方面的帮助：如果您难以向 App Prototyping 代理说明自己的需求，不妨让 Google 版 Gemini 帮助您优化提示。详细了解如何有效地提供提示。
  • 在其他设备上测试：在原型模式下，点击 链接图标 分享预览链接，以便在其他设备上测试应用。
  • 使用内置工具：在代码视图中，使用 Firebase Studio 的内置调试和报告功能检查、调试和审核您的应用。
  • 从简单入手：一次只处理一项功能。不妨考虑先在原型中添加一组基本功能，然后在这些功能正常运行后进行扩展。
  • 描述 bug：如果某些功能无法正常运行，请向应用原型设计智能体描述当前行为，然后描述您期望的行为。
  • 在需要时回滚：如果应用原型设计代理误解了提示或引入了难以解决的问题，请点击恢复按钮回滚到应用的早期版本，然后使用其他提示重试。

6. （可选）发布应用

可选：如需从这一步开始使用示例版应用，请下载并将这些文件拖动到代码视图中 Firebase Studio 的“资源管理器”窗格中。

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

  1. 点击发布以创建新的 Firebase 项目并开始设置 App Hosting。系统会显示发布您的应用窗格。
  2. 在 Firebase 项目步骤中，记录下为您创建的 Firebase 项目名称，然后点击下一步。
  3. 在关联 Cloud Billing 账号步骤中，选择以下任一选项：
    1. 选择要与 Firebase 项目相关联的 Cloud Billing 账号。
    2. 如果您没有 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 分钟才能完成。如需详细了解幕后发生的情况，请参阅应用托管构建流程。
  6. 发布完成后，应用概览会显示一个网址和由 App Hosting 可观测性功能赋能的应用数据分析。如需使用自定义域名（如 example.com 或 app.example.com）替代 Firebase 自动生成的域名，可在 Firebase 文本中添加自定义域名。

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

7. （可选）监控应用

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

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

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

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

8. 总结

恭喜！您已使用 Firebase Studio 成功创建应用。您还可以向应用添加更多内容，例如扩展字典、更多语言、音频、动画或难度选择。您可以继续使用该应用，也可以创建新内容。

了解详情：