建立按鈕，將程式碼匯入 Firebase Studio

在網站上新增「在 Firebase Studio 中開啟」按鈕，讓使用者能直接將程式碼從網站匯入 Firebase Studio 工作區，在雲端代理程式開發環境中繼續工作。

這項功能適用於：

  • 程式碼遊樂場：使用者可從基本編輯器移至完整的開發環境。

  • 應用程式原型設計工具：網站會產生程式碼和視覺化原型，使用者接著在 Firebase Studio 中反覆修改。

使用「在 Firebase Studio 開啟」SDK

「在 Firebase Studio 中開啟」按鈕是由 Open in Firebase Studio SDK 提供支援，這個 JavaScript 程式庫會產生適當的連結，以建立及填入新的工作區。並提供多種程式碼匯入方式。

匯入方法

您可以透過下列方法設定按鈕來匯入程式碼：

  • 從 Git 存放區或範本：連結至 Git 存放區或範本。Firebase Studio這非常適合完整專案或預先定義的範本。如要進一步瞭解這些用途，請參閱「在 Firebase Studio 中建立預先定義工作區的捷徑」。

  • 從一組專案檔案：直接從網頁應用程式，從一組檔案和程式碼片段動態建立工作區。這是程式碼遊樂場和應用程式原型設計人員最實用的選項，因為即使使用者目前的工作未儲存到其他位置，系統也會匯出。

在網站中新增「在 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』中開啟」按鈕

您可以使用 Open in 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」按鈕範例

後續步驟