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

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

此功能适用于：

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

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

使用“在 Firebase Studio 中打开”SDK

“在 Firebase Studio 中打开”按钮由“在 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 工作区。其中包含您的项目文件、应用预览以及包含后续步骤的自述文件。

设计“在 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”按钮示例

后续步骤