開始使用專案 IDX

請繼續閱讀，瞭解開始使用 Project IDX 所需的基本概念。

事前準備

開始之前，您可能需要為瀏覽器啟用第三方 Cookie。Project IDX 在大部分瀏覽器中都需要第三方 Cookie 來驗證工作區。

Chrome
  1. 開啟「設定」。
  2. 開啟「隱私權和安全性」分頁。
  3. 確認已啟用「允許所有 Cookie」。
  4. 開啟 idx.google.com。
  5. 按一下網址列中的顯示設定圖示 visibility_off，開啟「追蹤防護」面板。如要暫時允許第三方 Cookie，請開啟「第三方 Cookie」設定。這會在 IDX 上啟用 Cookie 90 天。
Safari
  1. 依序開啟 Safari >「設定...」。
  2. 關閉下列設定：
    • 「進階」>「封鎖所有 Cookie」
    • 隱私權 > 防止跨網站追蹤
  3. 開啟 idx.google.com。
Firefox

您不需要為 Firefox 啟用第三方 Cookie。前往 idx.google.com。
歌劇
  1. 開啟 idx.google.com。
  2. 開啟選單，然後按一下「Settings」(設定)。
  3. 前往「隱私權和安全性」部分，展開「第三方 Cookie」選項。
  4. 選取「在無痕模式中封鎖第三方 Cookie」或「允許第三方 Cookie」。
  5. 開啟 idx.google.com。
弧形
  1. 前往 arc://settings。
  2. 前往「隱私權和安全性」部分，展開「第三方 Cookie」選項。
  3. 選取「在無痕模式中封鎖第三方 Cookie」或「允許第三方 Cookie」。
  4. 開啟 idx.google.com。
勇敢傳說

您不需要為 Brave 啟用第三方 Cookie。前往 idx.google.com。

建立工作區

IDX 中的工作區是開發環境，其中包含開發應用程式所需的一切。其中包含您的程式碼、程式碼編輯器 (包含與專案相關的外掛程式)，以及支援應用程式開發作業的工具鍊。這類似於在本機電腦版開發環境中建立新專案，只是您已預先設定整部電腦和作業系統，而且專門用於建構應用程式。

專案 IDX 工作區已經過最佳化，一次僅包含一個程式碼集，因此您可以區隔不同應用程式的環境和系統層級依附元件。

如要建構新的應用程式，請使用 IDX 中的代管工作區範本來快速開始。或者，您也可以將現有應用程式程式碼集匯入 IDX。

如要建立新工作區，請按照下列步驟操作：

  • 接受條款的 IDX 新手上路流程螢幕截圖
  • 啟用 AI 功能的 IDX 新手上路流程螢幕截圖
  • IDX 新手上路流程的螢幕截圖，顯示關於 AI 和隱私權的附註
  • IDX 資訊主頁的螢幕截圖，顯示精選範本與 GitHub 匯入項目

  1. 開啟「Project IDX」

  2. 首次開啟 IDX 時，系統會提示您閱讀並接受 Google 產品、生成式 AI 和 Android SDK 的服務條款。您也可以選擇接收產品更新、公告或使用者研究的相關通訊，協助我們改善產品。請選取適用的選項。按一下提供的連結即可閱讀服務條款，然後選取接受條款的選項，並按一下「繼續」。接下來，您可以在第一次使用 IDX 時決定「Enable AI Features」(啟用 AI 功能)，也可以按一下「Not Right Now」(不立即) 來停用這些功能 (之後隨時可以開啟這項功能)。若您在此畫面上啟用這些功能，請參閱 AI 與隱私權相關文章，然後按一下「Continue」保留設定，或按一下「Go Back」，關閉 AI 功能。

  3. 選取您要建立的工作區類型：

    • 範本：建立已預先載入您需要的基本檔案和套件的工作區。選取其中一個精選範本，或按一下「See all templates」(查看所有範本)，取得可用架構、API 和語言的完整清單。您也可以在範本庫中找到「Blank workspace」範本。
    • GitHub 存放區：選取「Import a repo」(匯入存放區)，將 GitHub 存放區複製到工作區。

範本

IDX 範本庫頁面顯示可用的網頁範本

  1. 依應用程式類型瀏覽範本，或使用右上角的搜尋框，依關鍵字篩選完整的範本庫。您可以在 Misc 類別中使用「Blank workspace」範本。

  2. 輸入工作區名稱，並設定其他選項。

  3. 點選「建立」。IDX 會根據您的選擇建立新的工作區。

我們會持續新增範本，歡迎您隨時回來查看 或告訴我們您想看到的內容。

GitHub 匯入

  1. 輸入「存放區網址」。

  2. 點選「建立」。IDX 會根據您的選擇建立新的工作區。

  3. 在工作區載入後向 GitHub 進行驗證。

  4. 匯入專案後，在 IDX 終端機中執行 npm install (或 flutter pub get)。根據預設，IDX 不會在匯入專案時安裝 npm 依附元件。

設定工作區

IDX 使用 Nix 定義每個工作區的環境設定。Nix 是純粹的套件管理工具，並會為每個依附元件指派專屬 ID，最終意味您的環境可以順暢包含相同依附元件的多個版本。這個 API 也可以重現且宣告式。在 IDX 中，這表示您可以在不同工作區之間共用 Nix 設定檔，載入相同的環境設定。進一步瞭解 Nix + IDX。

建立或編輯 .idx/dev.nix 檔案

環境設定是在程式碼存放區的 .idx/dev.nix 檔案中定義。這個檔案可讓您指定已安裝的套件、環境變數及 Code OSS 擴充功能。

請參考以下的 .idx/dev.nix 範例檔案，瞭解在 IDX 中啟用應用程式預覽的基本工作區環境設定：

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_18
  ];

  # Sets environment variables in the workspace
  env = {
    SOME_ENV_VAR = "hello";
  };

  # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
  idx.extensions = [
    "angular.ng-template"
  ];

  # Enable previews and customize configuration
  idx.previews = {
    enable = true;
    previews = {
      web = {
        command = [
          "npm"
          "run"
          "start"
          "--"
          "--port"
          "$PORT"
          "--host"
          "0.0.0.0"
          "--disable-host-check"
        ];
        manager = "web";
      };
    };
  };
}

套用新設定

每當您新增或更新 dev.nix 設定檔時，IDX 的右下角就會顯示重新建構環境的提示。重新建構環境所需的時間取決於設定所需的套件數量。

針對環境建構失敗進行偵錯

由於設定檔是機器可讀取的程式碼，因此可能會有錯誤。如果發生這種情況，環境可能就無法建構，也無法啟動。IDX 會顯示啟動「復原」環境的選項。這個工作區不包含您定義的任何設定，只會執行基本的程式碼 OSS。這樣您就能修正 dev.nix 設定檔中的錯誤，然後重新建構環境。

IDX 最終會顯示環境建構錯誤。目前，您必須自行排解問題。

後續步驟