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

{ # disableFinding("simple") #}

在網站上新增「在 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 工作區。其中包含專案檔案、應用程式預覽畫面，以及說明後續步驟的 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 中開啟」SDK
• 瞭解如何自訂Firebase Studio工作區