创建用于将代码导入 Firebase Studio 的按钮

在您的网站上添加“在 Firebase Studio 中打开”按钮，以便用户将代码从您的网站直接导入到 Firebase Studio 工作区，从而在基于代理的云端开发环境中继续工作。

此功能适用于：

  • 代码游乐场，用户可以在其中从基本编辑器过渡到完整的开发环境。

  • 应用原型设计工具，其中网站会生成代码和可视化原型，然后用户可以在 Firebase Studio 中对其进行迭代。

使用“在 Firebase Studio 中打开”SDK

“在 Firebase Studio 中打开”按钮由 Open in Firebase Studio SDK 提供支持，该 SDK 是一个 JavaScript 库，可生成适当的链接来创建和填充新工作区。它提供了多种代码导入方式。

导入方法

您可以使用以下方法配置按钮以导入代码：

  • 从 Git 代码库或模板：链接到 Git 代码库或 Firebase Studio 模板。这非常适合完整项目或预定义模板。如需详细了解这些使用情形，请参阅在 Firebase Studio 中创建指向预定义工作区的快捷方式。

  • 从一组项目文件：直接从 Web 应用动态创建一组文件和代码段的工作区。对于代码游乐场和应用原型设计者来说，这是最强大的选项，因为它可以导出用户当前的工作，即使这些工作未保存到其他位置也是如此。

向您的网站添加“在 Firebase Studio 中打开”按钮

“在 Firebase Studio 中打开”SDK：提供您所需的一切，包括用于生成按钮图片、创建深层链接和发送文件内容以创建 Firebase Studio 工作区的辅助函数。

如需将“在 Firebase Studio 中打开”按钮添加到您的网站，请执行以下操作：

  1. 在项目目录中安装软件包：

    npm install @firebase-studio/open-sdk

  2. 在代码中添加以下内容以导入库：

    import * as FirebaseStudio from '@firebase-studio/open-sdk';

如需详细了解相关说明、代码示例和完整的 API 参考，请参阅官方 SDK 文档。

了解工作区环境

当用户通过您的网站创建工作区时，Firebase Studio 会为其设置开发环境。自动化程度取决于项目类型。

优化后的环境

对于 React、Angular 和简单的 HTML 项目，如果调用方在 settings 对象中正确设置了 baselineEnvironment 属性，Firebase Studio 将提供经过优化的预配置环境。这意味着，当用户在 Firebase Studio 中打开链接时，Firebase Studio 会创建工作区并自动执行以下操作：

  • 安装所有必需的依赖项。
  • 配置并启动正确的开发服务器。
  • 使用正确的工具和扩展程序设置环境。

这会打开一个环境，用户可以在其中实时预览您的应用并直接与代码互动。

通用环境

对于所有其他项目类型，Firebase Studio 使用的是通用导入器。它会将文件上传到工作区，但用户必须手动执行初始设置。他们可能需要：

  • 安装语言运行时和依赖项。
  • 配置 dev.nix 文件。

对于这些项目，Firebase Studio 会创建一个非自定义的环境，让用户完全掌控设置流程。

用户体验

对于这两种类型的工作区，在用户点击“在 Firebase Studio 中打开”按钮后，系统会提示他们为工作区命名并查看要导入的文件列表。

在 Firebase Studio 中打开“导入工作区”对话框

当用户点击导入时，系统会打开一个新的 Firebase Studio 工作区。其中包含您的项目文件、应用预览和包含后续步骤的 README 文件。

设计“在 Firebase Studio 中打开”按钮

您可以使用“在 Firebase Studio 中打开”SDK 设计按钮，也可以使用以下工具为 Firebase Studio 按钮生成 HTML 文件：

如果您使用 SDK，可以为按钮添加可选的配置属性：

  • label：设置按钮上显示的文本标签。
    • 允许使用的值有：open、try、export 或 continue。
  • color：定义按钮的配色方案。
    • 允许使用的值有：dark、light、blue 或 bright。
  • size：指定按钮的高度（以像素为单位）。
    • 允许的值：20 或 32。
  • imageFormat：确定生成的图片的格式。
    • 允许的值：svg 或 png。

例如：

img.src = FirebaseStudio.getButtonImageUrl({
  label: 'export',
  color: 'dark',
  size: 32,
  imageFormat: 'svg'
});

“导出到 Firebase Studio”按钮示例

后续步骤