📢 转载信息
原文链接：https://www.kdnuggets.com/building-full-stack-apps-with-firebase-studio
原文作者：Shittu Olumide
Image by Author
全栈应用构建
如果你曾花费时间构建现代 Web 和移动应用程序，你就会知道事实：真正的开发工作往往在初步想法出现后才真正开始。在你能编写任何业务逻辑代码之前，你就要与配置作斗争。你需要一个能正常工作的 IDE、一个具有正确 Node 版本的本地环境、一个正在运行的数据库、设置好的安全规则，或许还有一个无服务器函数。这种初始设置是一座陡峭、重复的山丘，会消耗动力和精力。
然后是开发阶段，其特点是持续的上下文切换。你需要在前端代码、用于 Firebase CLI 命令的终端、Firebase Console 浏览器以及可能的独立 API 测试工具之间来回切换。这是全栈开发人员生活中不可避免但又令人沮丧的一部分。
如果可以消除所有的挣扎呢？如果你的整个全栈环境，从代码编辑器到模拟器再到部署管道，都能即时可用且深度集成呢？
什么是 Firebase Studio？
这就引出了我们今天要讨论的 Firebase Studio，它是谷歌于 2024 年发布的集成式云端开发环境。 Firebase Studio 不仅仅是一个基础的在线代码编辑器；它是一个专用的工作空间，用于构建、原型设计和部署利用 Firebase 平台功能和 Gemini AI 智能的全栈应用程序。 它构建在开源 Code OSS 平台之上，将整个开发生命周期转移到云端，消除了本地设置的摩擦。
Image by Author
Firebase Studio 存在简单而强大的原因可以用三个词来概括：速度、简单性和 AI 辅助。
- 速度： 你可以在几分钟而不是几小时内将一个简单的想法转化为一个实时、可用的原型，完全没有本地环境配置的依赖。
- 简单性： 它提供了与每个关键 Firebase 服务（如身份验证、Firestore、托管和云函数）的原生集成。所有功能都直接从编码环境中可访问。
- AI 辅助： 它集成了 Firebase 中的 Gemini，充当一个代理伙伴，可以根据自然语言提示生成样板代码、修改模式或添加整个功能。
本文面向希望收回时间并专注于功能而非配置的开发人员。具体来说，我们的目标用户是：
- Firebase 开发人员： 那些已经熟悉 Firebase 生态系统的开发者会发现 Studio 是对其现有工作流程的变革性升级。
- 全栈工程师： 任何使用 React、Next.js 或 Angular 等框架构建现代 Web 应用的人都会欣赏其无缝集成和云端可移植性。
- 快速原型设计者和初创公司： 需要快速验证想法并转向可测试的 MVP，而无需在复杂工具上浪费资源的团队。
设置你的工作空间
Firebase Studio 的主要优势在于开始工作所需的最小化设置。你可以在几分钟内从一个空白的浏览器标签页进入一个正常运行的开发环境。
// 步骤 I：访问和可用性
在开始编写代码之前，你需要知道在哪里可以找到 Studio 及其费用。访问 Firebase Studio 非常直接，只需要一个标准的谷歌账户和一个现代网络浏览器。
Image by Author
Firebase Studio 目前普遍可用，尽管新功能和更新经常发布。对于新用户，谷歌在初始采用阶段通常会提供慷慨的 免费套餐，通常包括有限数量的免费工作区。对于持续的专业使用，只需将你的项目连接到标准的 Blaze（按需付费） 计划，这允许扩展性，并涵盖集成服务（如 Firebase App Hosting）的用法费用，或超出 Gemini API 免费配额的使用费用。
// 步骤 II：创建工作区
登录后，该平台提供了三个截然不同、高效的路径来启动你的项目，每条路径都适用于不同的起点。这种灵活性至关重要，无论你是从头开始还是引入现有代码库。
→ 使用 AI 进行原型设计
如果你只是从一个想法开始，这是最快、最强大的功能。你无需手动创建文件和配置框架，就可以使用由 Gemini 驱动的 应用原型代理。你只需使用自然语言描述你想构建的应用程序，就像与产品经理交谈一样。然后，Gemini 将自主生成初始结构、UI 组件，甚至建议数据库模式。
例如，你可以提示：
为一家云提供商构建一个登陆页面。该页面应包含一个引人注目的标题和副标题，突出对企业客户的价值主张。包含带有定价的顶级产品部分、带有标志的客户推荐以及明确的“请求咨询”号召性用语。设计应简洁、现代且适合移动设备响应。
Image by Author
该代理随后将生成一个可供你立即完善的工作原型。
Image by Author
这是原型看起来的样子。
Image by Author
你的应用原型的第一个迭代已经准备好了！你可以在预览窗口中试用它，如果你想进行任何更改，只需点击下方，或者更好的是，点击顶部的 </> 按钮切换到代码编辑器进行修改。
→ 从模板或空白工作区开始
如果你已经知道要使用的技术栈，跳过 AI 提示并从专业构建的模板开始是另一种开始方式。Firebase Studio 维护着一个广泛的模板库，支持现代 Web 框架，包括 Next.js、React、Flutter 和 Angular。选择一个模板可以为你提供一个预配置的代码库，其中包含所有必需的依赖项和样板结构，为你节省了繁琐的初始设置和包配置时间。
Image by Author
→ 导入现有项目
对于希望过渡的经验丰富的开发人员，你可以轻松导入现有代码库。Firebase Studio 直接与 GitHub、GitLab 和 Bitbucket 等流行源代码控制平台集成。通过连接你的存储库，Studio 会自动拉取你的代码并尝试设置必要的环境和依赖项，使你无需将存储库克隆到本地即可在云端调试或开发新功能。如果你的代码未托管在受支持的平台上，你也可以导入压缩的存档。
Image by Author
选择路径或 GitHub 存储库后，Studio 会加载你的工作区，为你呈现一个强大且组织良好的开发驾驶舱。整个环境都建立在强大的 Code OSS 编辑器之上，为数百万使用 VS Code 的开发人员提供了熟悉的感觉。
Image by Author
主界面逻辑上分为几个关键面板：
- 代码编辑器和文件浏览器： 用于编辑代码的中心区域，左侧是用于导航的文件树。
- 集成终端： 完全访问命令行，允许你在浏览器中运行构建脚本、使用
Firebase CLI和安装依赖项。 - AI/Gemini 聊天面板： 专用的侧边栏，你可以在其中直接与 Gemini 代理交互，以获得帮助、代码生成和迭代更改。
构建全栈应用程序
全栈应用程序需要用户界面与后端基础设施之间的无缝连接。Firebase Studio 的构建目的就是通过利用与 Firebase 服务的原生连接并提供简化的服务器端开发环境，使这种集成变得简单。
// 集成核心 Firebase 服务
Firebase Studio 的核心价值在于其对 Firebase 生态系统的内置了解，它使你能够通过简单的命令或 AI 提示来连接基本服务，而不是手动配置 SDK 和环境变量。
- 身份验证： Gemini 可以自动生成必要的代码，用于使用电子邮件/密码、Google 或其他提供商进行用户注册、登录和会话管理。它理解
受保护的路由的概念，并可以编写代码来根据用户的身份验证状态限制对应用程序某些部分的访问。 - 数据库： 无论你从模板开始还是从 AI 生成的原型开始，集成数据库通常只需一个提示。例如，询问 AI“将此表单数据保存到名为‘messages’的集合中”将导致 AI：
- 编写处理表单提交的客户端代码。
- 在 Firebase 项目中创建必要的数据库实例（如果尚不存在）。
- 更新
Firebase 安全规则，以确保只有经过身份验证的用户才能向该集合写入数据。
// 使用 Cloud Functions 开发服务器端逻辑
虽然许多操作可以在客户端处理，但复杂的业务逻辑、敏感操作和长时间运行的任务需要安全、服务器端的执行。为此，Firebase Studio 为 Firebase 云函数（或现代框架中的后端代码，如 Next.js）提供了原生集成。
- 无服务器框架： 云函数提供了一种函数即服务 (FaaS) 解决方案。你用
Node.js或TypeScript编写一个函数，Firebase 管理服务器环境。这些函数可以由以下方式触发：- HTTP 请求： 创建一个 RESTful API 端点。
- 事件： 对其他 Firebase 服务的更改做出反应（例如，在身份验证中新用户注册时触发电子邮件，或在 Cloud Storage 中上传新文件后处理图像）。
- Studio 集成： 你可以直接从 Studio 内的集成终端，使用
Firebase CLI编写、测试和部署这些函数。Gemini 甚至可以通过提供函数结构和处理firebase-adminSDK 设置来协助编写样板代码。
// 测试和预览
开发速度在很大程度上取决于快速的反馈循环。Firebase Studio 集成了工具，以确保你可以实时测试全栈应用程序。
- 实时 Web 预览： 每个工作区都包含一个实时预览面板，该面板在你保存文件时自动更新（通常带有
热重载或热模块替换以获得即时视觉反馈）。此面板是一个完全正常运行的 Web 服务器，运行你的代码。 - Firebase 本地模拟器套件： 对于强大的全栈测试，Studio 支持
Firebase 本地模拟器套件。这允许你在浏览器中运行核心服务的本地、内存中版本，如身份验证、Firestore、云函数和托管，而无需产生云成本或影响生产数据。你可以直接从终端或通过 AI 提示启动和与这些模拟器交互。 - 可共享的预览： 云工作区的独特优势在于能够共享正在运行的应用程序及其预览的实时、公共 URL。这对于快速收集团队成员、设计师或产品经理的反馈非常有价值，而无需他们设置本地开发环境。
部署和发布你的应用
Firebase Studio 大大简化了通往生产环境的路径，与 Firebase App Hosting（专为现代全栈 Web 应用程序设计）直接集成。
// 一键部署到 Firebase App Hosting
Firebase App Hosting 是一个针对 Next.js 和 Angular 等现代全栈 Web 框架优化的托管、无服务器平台。
- 集成平台： 部署是一个简化的过程，通常只需一个操作即可完成，可以通过 AI 提示或在 Firebase Studio 面板中的单击实现。
- 自动配置： 点击“发布”会自动处理繁重的工作：
- 配置一个 Firebase 项目（如果你还没有的话）。
- 链接到
Cloud 结算账户（App Hosting 所需）。 - 设置一个
Firebase App Hosting 后端，它管理基础设施。
- 持续部署： App Hosting 的设计旨在与 GitHub 集成。通过将你的存储库连接起来，App Hosting 可以自动触发新的部署（发布），每当向指定的实时分支推送更改时，从而创建一个顺畅、现代的 CI/CD（持续集成/持续交付）管道。
- Google Cloud 基础设施： 你的应用使用
Cloud Build构建，在Cloud Run（一个完全托管的计算平台）上提供，并通过Cloud CDN（内容分发网络）在全球范围内交付，以实现快速的性能和可靠性。
// 发布后：监控和回滚
部署后，Firebase App Hosting 提供维护和快速响应的工具。
- App Hosting 可观测性： 你可以直接在
Firebase Console中监控构建和部署情况，访问日志和关键指标，以确保应用程序的健康运行。 - 回滚能力： 如果出现关键错误，App Hosting 允许一键回滚到应用程序的先前稳定版本，最大限度地减少停机时间。
- 代码协助集成： 除了分析，Firebase 中的 Gemini 继续提供 上下文感知的聊天和代码生成，帮助你编写、重构和调试代码，以集成新的监控、分析或消息传递功能。
结论
Firebase Studio 不仅仅是一个新工具；它是在生成式 AI 处于核心地位的情况下对整个应用程序开发生命周期进行重塑。通过将强大的云 IDE 功能与强大的 Firebase 平台和 Gemini 的智能相结合，它极大地加速了从概念到生产的历程。
Firebase Studio 的主要价值主张是能够在几分钟而不是几个月内从想法转变为一个完全正常运行、已部署的应用程序。它通过在开发过程的所有阶段提供单一、无缝、集成的体验来实现这种加速。
我们鼓励你今天就探索 Firebase Studio，亲身体验应用开发的未来。开始使用 Firebase Studio：https://firebase.google.com/docs/studio/get-started
Shittu Olumide 是一位软件工程师和技术撰稿人，热衷于利用尖端技术来构建引人入胜的叙事，对细节有敏锐的洞察力，并擅长简化复杂概念。你也可以在 Twitter 上找到 Shittu。
🚀 想要体验更好更全面的AI调用？
欢迎使用青云聚合API，约为官网价格的十分之一，支持300+全球最新模型，以及全球各种生图生视频模型，无需翻墙高速稳定，文档丰富，小白也可以简单操作。
评论区