如何使用 Firebase Studio 构建和部署 AI Web 应用程序

我最近尝试使用了 Firebase Studio，这是一次我想与大家分享的有趣体验。它是一个由 Google 提供的免费、基于浏览器的工具，可以帮助你通过 AI 协助构建全栈 Web 应用程序。想了解更多吗？那就请阅读本文直到最后。

什么是 Firebase Studio？

Firebase Studio 于**Google Cloud Next 2025**大会（2025 年 4 月初）上正式发布，是 Firebase 的主要新更新之一。

简而言之，Firebase Studio 是 Google 提供的一个云端开发环境，位于 studio.firebase.google.com。它结合了：

• 一个基于 VS Code（Code OSS）的完整 IDE
• Gemini（Google 的 LLM）提供的 AI 协助
• 与 Firebase 服务（Firestore、Auth、Hosting、Functions 等）的深度集成
• 一个可以根据提示生成全栈应用程序的可视化应用程序原型代理

它旨在帮助您完全在浏览器中从构思到部署应用程序，无需任何设置、安装或本地环境。

老实说，这并非 Google 的新事物；它是 Project IDX 的更名和更新版本。

我认为目前其核心功能是原型设计。

使用 Firebase Studio 进行原型设计

**原型代理**——我认为这是 Firebase Studio 最强大的功能之一。它允许你通过简单的自然语言描述来开始构建应用程序。我将在本文后面展示一个真实示例。

此功能之所以如此强大，是因为它：

• **加速 MVP 创建**——非常适合快速测试想法
• **减少样板代码**——让您专注于独特功能
• **使用真实代码**——因此您可以立即编辑、扩展和部署
• **一键部署到生产环境**——一旦您对应用程序满意，Firebase Studio 就能轻松地部署它。它利用了**Firebase 应用托管**作为底层技术，因此只需一个**“发布”**按钮，您的 Web 应用程序就会在全球范围内构建并部署到 Google 的 CDN 上。

目前，它支持 Next.js 项目，但 Google 计划很快扩展到其他框架。

它与 Firebase 控制台有什么不同？

Firebase Studio 专为**实际开发**而设计。您可以在 Firebase Studio 中编写代码、测试代码、预览应用程序并部署——所有操作都在其中完成。

Firebase 控制台管理项目设置、数据库规则、分析和生产配置。Firebase Studio 在此基础上，让您比以往更快地编写代码、制作原型和迭代。

所以，这是两个完全不同的工具。

Firebase Studio 的用例

1. **快速原型设计：**数小时内而非数天内构建应用程序的工作版本。非常适合推销想法或测试概念。
2. **客户演示：**向客户展示应用程序的功能版本，而无需维护本地环境。
3. **学习与教育**：非常适合学生、教育工作者和训练营。无需安装。无需配置难题。只需编写代码。
4. **独立开发者和编程马拉松**：在周末项目或活动中，通过浏览器快速构建整个应用程序。
5. **跨团队协作：**允许前端和后端开发人员在同一环境中工作。即将推出：实时代码协作。
6. **AI 功能探索：**利用内置的 Gemini 集成和 Genkit 设置，轻松试验 AI 驱动的功能。

Firebase Studio 入门

这很简单。请按照以下步骤操作：

• 导航至 studio.firebase.google.com
• 使用您的 Google 帐户登录。
• 在仪表盘上，找到**“使用 AI 制作应用原型”**字段。在输入框中，用自然语言描述您的应用程序。例如：*一个简单的食谱制作器，可以根据我冰箱里的食材生成食谱。界面简洁，绿色配色方案。*

• 您可以选择上传一张图片来指导应用程序的设计，例如配色方案或布局灵感，然后点击“使用 AI 制作原型”按钮。
• Firebase Studio 将生成一个蓝图大纲。如果您不满意，可以使用聊天面板调整蓝图，然后点击“编辑”修改蓝图。

Firebase Studio 将生成一个蓝图大纲

• 应用程序生成后，将显示预览。

• 要请求修改或添加功能，请使用聊天界面、元素选择器或“注释”按钮。

• 一旦您对结果满意，就可以通过点击“发布”按钮将应用程序发布到 Firebase App Hosting。然后，Firebase Studio 将引导您完成整个过程。如果您遇到困难，可以观看 我的视频教程，其中有更详细的解释。

Firebase Studio 定价

Firebase Studio 本身目前处于**预览版**阶段，并为开发者提供了免费套餐：

免费套餐（预览版访问）

• 每位用户可免费拥有**3 个工作区**。
• Google 开发者计划成员可拥有**10 个工作区**。
• Google 开发者计划高级会员可拥有**30 个工作区**。

但是，在某些情况下可能会产生费用。

• **Firebase App Hosting**：部署您的应用程序需要一个已关联的账单账户，并将您的项目转换为 Blaze（即用即付）计划。
• **Gemini API 使用**：超出免费套餐使用 Gemini 进行 AI 协助可能会导致收费，特别是对于需要有效 Gemini Code Assist 订阅的 Google Workspace 用户。不过，请务必设置 预算警报。
• **其他 Firebase 服务**：Firestore、Cloud Functions 和 Cloud Storage 等服务都有免费使用配额，但超出这些限制将产生费用。

视频教程

**在 YouTube 上观看：** **Firebase Studio**

结论

此工具仍处于预览阶段，因此您可能会遇到一些错误或限制。虽然 Gemini 很有帮助，但它偶尔会误解提示——所以请准备好修改您的输入或微调结果。如果 Google 继续改进它，这可能会成为 Firebase 开发人员的默认 IDE。

您已经尝试过了吗？我很乐意在下面的评论中听到您的想法。

感谢阅读 — 干杯！😉