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.
    如果您想以图片的形式提交配色方案或布局，请在问题或蓝图流程中点击 附件图标 附件选项上传图片。图片必须小于 3 MiB。
  5. 点击保存。
  6. 当蓝图完成整合您的更新后，点击对此应用进行原型设计。应用的蓝图
  7. 由于此应用包含 AI 元素，因此客服人员会提示您提供 Gemini 密钥。添加您自己的 Gemini API 密钥，或点击自动生成以生成 Gemini API 密钥。如果您点击自动生成，Firebase Studio 会为您创建一个 Firebase 项目并生成 Gemini API 密钥。
  8. 应用原型制作代理会使用应用蓝图创建应用的第一个版本。完成后，应用的预览会与 Gemini 聊天界面一起显示。花点时间测试您的应用。即使应用看起来与您预想的完全不同，下一部分将介绍如何添加新功能和优化设计。应用初始原型的动画 GIF

3. （可选）获取代码

如果您遇到问题或想更仔细地跟随示例应用，请使用本 Codelab 中多个检查点提供的示例文件。

  1. 下载该文件夹中的文件。
  2. 在 Firebase Studio 中，点击 代码视图图标 Switch to Code（切换到代码）以打开“Code”（代码）视图。
  3. 将下载的文件拖动到 Firebase Studio 的“Explorer”窗格中。允许文件替换任何现有文件。
  4. 点击切换到原型工具，使用应用的示例版本继续此 Codelab。

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

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

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

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

可选：如需从此时起使用应用的示例版本，请下载并将这些文件拖动到 Firebase Studio 的“代码”视图中的“Explorer”窗格中。

  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. 点击 代码视图图标Switch to Code 以打开“Code”视图，您可以在其中查看应用的所有文件并直接修改代码。如果 Gemini 无法解决某个 bug，有时手动修改文件会更容易。准备就绪后，切换到“原型设计器”模式，以继续使用应用原型设计代理。

动画 GIF：AI 故事生成器用法语创作故事，其中包含带下划线的字词

目标 2：为闪卡添加翻译

可选：如需从此时起使用应用的示例版本，请下载并将这些文件拖动到 Firebase Studio 的“代码”视图中的“Explorer”窗格中。

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

 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 的“代码”视图中的“Explorer”窗格中。

尝试使用以下提示：

 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 的“代码”视图中的“Explorer”窗格中。

现在，您的应用已具备您所需的所有功能，接下来可以着手调整样式了。

更改应用的配色方案

您可以具体说明要使用的颜色，也可以让应用原型设计代理主导。在聊天界面中，您还可以点击 附件图标 Attachment（附件）选项，上传您要使用的颜色或样式的图片。如果您想使用提示，请尝试：

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

更新应用中使用的文本

例如，您可能希望它只显示“聊天”，而不是“AI 聊天机器人教师”：

 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.

提示和调试提示

  • 获取有关提示的帮助：如果您无法向应用原型设计客服人员说明您想要什么，不妨尝试向 Google 专用 Gemini 寻求帮助来优化提示。详细了解如何有效提示。
  • 在其他设备上测试：在“原型”模式下，点击 链接图标 分享预览链接，即可在其他设备上测试应用。
  • 使用内置工具：在“代码”视图中，使用 Firebase Studio 的内置调试和报告功能来检查、调试和审核应用。
  • 从简单开始：一次只处理一项功能。不妨先在原型中实现一组基本功能，然后在这些功能按预期运行后再进行扩展。
  • 描述 bug：如果某项功能不起作用，请向应用原型制作代理描述当前行为，然后描述您期望的行为。
  • 根据需要回滚：如果应用原型制作代理误解了提示或引入了难以解决的问题，请点击恢复按钮以回滚到较低版本的应用，然后使用其他提示重试。

6. （可选）发布应用

可选：如需从此时起使用应用的示例版本，请下载并将这些文件拖动到 Firebase Studio 的“代码”视图中的“Explorer”窗格中。

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

  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 分钟才能完成。如需详细了解幕后发生的情况，请参阅应用托管 build 流程。
  6. 发布完成后，系统会显示应用概览，其中包含网址和由应用托管可观察性功能提供支持的应用数据分析。如需使用自定义网域（例如 example.com 或 app.example.com）而非 Firebase 生成的网域，您可以在 Firebase 文本中添加自定义网域。

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

7. （可选）监控您的应用

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

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

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

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

8. 总结

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

了解详情：