使用 Conductor 外掛程式規劃及建構應用程式

1. 簡介

在本程式碼研究室中，您將瞭解如何使用 Conductor 外掛程式規劃及建構軟體應用程式。Conductor 是 Google 建構的開放原始碼外掛程式，可啟用規格導向的開發功能，例如規劃和實作追蹤。您將從頭開始建構「綠地」應用程式。接著，您會將其視為「棕地」專案，反覆運算以新增驗證和儲存空間。

學習內容

  • 在 Antigravity CLI 或 Claude Code 中安裝 Conductor 外掛程式
  • 使用 Conductor 的規劃和實作功能，從頭建構「Picker Wheel」網頁應用程式
  • 使用 Firebase 新增驗證和儲存空間，為應用程式加入個人化功能

課程內容

  • 如何使用 Conductor 外掛程式規劃、導入及審查「綠地」應用程式
  • 如何使用 Conductor 外掛程式，在「棕地」應用程式中新增功能

軟硬體需求

2. 事前準備

建立 Google Cloud 專案

  1. 在 Google Cloud 控制台的專案選取器頁面中，選取或建立 Google Cloud 專案。
  2. 確認 Cloud 專案已啟用計費功能。瞭解如何檢查專案是否已啟用計費功能。

啟動 Cloud Shell

Cloud Shell 是在 Google Cloud 中運作的指令列環境，已預先載入必要工具。

  1. 按一下 Google Cloud 控制台頂端的「啟用 Cloud Shell」。
  2. 連至 Cloud Shell 後，請驗證您的驗證：
    gcloud auth list
  3. 確認專案已設定完成：
    gcloud config get project
  4. 如果專案未如預期設定，請設定專案：
    export PROJECT_ID=<YOUR_PROJECT_ID>
gcloud config set project $PROJECT_ID

啟用 API

在 Google Cloud 雲端專案中啟用 Firebase Management API。

gcloud services enable firebase.googleapis.com

將 Firebase 新增至專案

Firebase CLI 已預先安裝在 Cloud Shell 中。在 Cloud Shell 中，使用可存取 Google Cloud 專案的 Google 帳戶登入。如果您在本機工作，請按照操作說明安裝 Firebase CLI。

firebase login

執行下列指令，將 Firebase 新增至 Google Cloud 專案：

firebase projects:addfirebase

如果是第一次執行 firebase CLI，請回答系統提出的問題。

退出 Cloud Shell

您可以關閉 Cloud Shell 視窗。在下一節中，我們將設定本機環境。

3. 安裝及驗證 CLI 編碼代理程式

在這個步驟中，您將使用 Google Cloud 憑證，在本地程式碼編輯器中安裝並驗證 Antigravity CLI 或 Claude Code，準備本機開發環境。

安裝及驗證 Antigravity CLI

  1. 安裝最新版 Antigravity CLI。
    # MacOS and Linux
curl -fsSL https://antigravity.google/cli/install.sh | bash

# Windows Powershell
irm https://antigravity.google/cli/install.ps1 | iex

# Windows CMD
curl -fsSL https://antigravity.google/cli/install.cmd -o install.cmd && install.cmd && del install.cmd
  2. 重新啟動終端機，將 agy 新增至 PATH。
  3. 確認安裝的是最新版本。
    agy --version
  4. 使用 Google Cloud 憑證驗證。
    • 啟動 Antigravity CLI。
      agy
    • 系統要求「選取登入方法」時，請選取「使用 Google Cloud 專案」。在網路瀏覽器中開啟安全授權網址。使用核准的憑證登入，並完成驗證。瀏覽器會顯示專屬的英數字元授權碼。複製這段程式碼，返回終端機，然後貼到提示字元中。
  5. 結束 Antigravity CLI。在 CLI 終端機中輸入 /exit，結束目前的 Antigravity CLI 工作階段，然後繼續操作。

安裝及驗證 Claude Code

或者，您也可以搭配 Claude Code 使用 Conductor 外掛程式。我們將在此使用 Google Cloud 憑證安裝及驗證 Claude Code。

  1. 安裝最新版 Claude Code。
  2. 使用 Google Cloud 憑證驗證。
    • 啟動 Claude Code。
      claude
    • 輸入 /login 選取登入方式。選擇「第三方平台 · Amazon Bedrock、Microsoft Foundry 或 Vertex AI」和「Google Vertex AI」選項。如要設定 Google Vertex AI，請選擇「應用程式預設憑證 (google auth)」，然後按照提示完成設定。
  3. 重新啟動 Claude Code。

4. 安裝 Conductor 外掛程式

Conductor 是 Google 建構的開放原始碼外掛程式，可啟用規格導向的開發功能，例如規劃和實作追蹤。

在 Antigravity CLI 中安裝

  1. 安裝外掛程式：
    • Antigravity CLI 
      agy plugins install https://github.com/gemini-cli-extensions/conductor
  2. 驗證安裝項目：
    • 啟動 Antigravity CLI。
      agy
    • 輸入 /conductor，即可查看指令清單，例如 /conductor:conductor-setup、/conductor:conductor-new-track、conductor:conductor-implement 等。
  3. 結束 CLI。在終端機中輸入 /exit，結束 CLI Live 工作階段，然後繼續操作。

在 Claude Code 中安裝

  1. 在 Claude Code 工作階段中，直接註冊市集存放區並安裝 Conductor 外掛程式。
    /plugin marketplace add gemini-cli-extensions/conductor
/plugin install conductor
/reload-plugin
  2. 驗證安裝狀態。
    • 輸入 /conductor，即可查看指令清單，例如 /conductor-setup、conductor-new-track、conductor-implement 等。
  3. 結束 CLI。在 Claude Code 終端機中輸入 /exit，結束即時 CLI 工作階段，然後繼續操作。

5. 綠地開發：挑選器輪盤

現在環境已設定完畢，接下來要從頭建構新的應用程式。您將建立「Picker Wheel」這個輕量型網頁應用程式，轉動輪盤隨機選取選項。

設定產品背景資訊

  1. 建立並變更為新的專案目錄。現在我們在 picker-wheel 目錄中處理專案。建立這個目錄並切換至該目錄。
    mkdir picker-wheel
cd picker-wheel
  2. 啟動 Antigravity CLI。使用 Antigravity CLI 或 Claude Code，從專案目錄啟動新的 CLI 工作階段。
    # Antigravity CLI
agy

# Claude Code
claude
    • 系統詢問「你信任這個資料夾中的檔案嗎？」時，請選取「信任資料夾 (選擇器轉盤)」
  3. 初始化 Conductor。執行設定指令，搭建專案架構並設定 Conductor 環境。
    # Antigravity CLI
/conductor:conductor-setup

# Claude Code
/conductor-setup
  4. 按照互動式提示操作。您看到的互動式提示不會與這些範例完全相同。請著重於簡化設計，以便熟悉 Conductor 工作流程。
    • 產品目標：網頁應用程式，可顯示可設定的旋轉輪盤，從清單中隨機選取項目。
      • 目標對象 → 一般大眾
      • 互動 → 輕觸/按一下即可旋轉
      • 自訂 → 基本
      • 平台 → 以電腦為優先
    • 產品相關規範：自動生成。
    • 技術堆疊：
      • 語言 → TypeScript/JavaScript - 適合全端網頁
      • 前端 → Vue.js - 直覺式網頁介面
      • 後端 → Express.js - 快速 Node 後端
      • 資料庫 → 無 - 不需要資料庫
    • 工作流程：標準。
    • 產品需求條件：
      • 使用者故事 → 可自訂選項、顯示明確的贏家
      • 主要功能 → 可編輯的選項清單、隨機顏色
      • 限制 → 僅限用戶端、高效能
      • 非功能性 → 高測試涵蓋率、TypeScript 和 Vue.js、回應式設計
    Conductor 會在 conductor/ 目錄中產生內容檔案。

建立新曲目

Conductor 中的「Track」代表一項功能或一個工作單元。

  1. 使用 /conductor-new-rack 開始新曲目。Conductor 可能會根據產品情境建議初始曲目。你也可以自行提議，或請指揮建議曲目。
  2. 查看生成的企劃書。Conductor 會在 conductor/tracks/{track-id}/ 中生成 index.md、spec.md 和 plan.md。請花點時間詳閱這些條款。如果一切正常，Conductor 會提示您儲存並提交初始設定檔案。

導入追蹤功能

  1. 開始導入。
    # Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement
    Conductor 現在會根據計畫編寫專案程式碼。
  2. 驗證應用程式。在導入階段，Conductor 會提示您手動測試應用程式。例如，系統會要求您開啟本機網路伺服器、在瀏覽器中預覽應用程式，並驗證變更。實作完成後，您應該會看到可正常運作的選擇器轉盤。Picker Wheel 應用程式
  3. 檢查導入作業：最後一個步驟是請 Conductor 檢查導入作業。並應審查原始碼、同步處理專案文件，以及封存軌道。
    # Antigravity CLI
/conductor:conductor-review

# Claude Code
/conductor-review

6. Brownfield 疊代：新增個人化設定

現在您要轉向「棕地」開發作業。您將改善上一節的選擇器輪盤網頁應用程式，讓登入的使用者可以儲存及還原選擇器輪盤設定。

建立個人化軌

  1. 在下列「棕地」範例中，我們將使用 Firebase 進行驗證和儲存。安裝 Firebase 技能，讓 Conductor 可以使用。
  2. 啟動 CLI 代理程式。啟動新的 CLI 工作階段。
    # Antigravity CLI
/new

# Claude Code
/new
  3. 開始新的曲目。開始新的曲目。
    # Antigravity CLI
/conductor:conductor-new-track "I want users to be able to log in to their
accounts and save their picker wheel configurations."

# Claude Code
/conductor-new-track "I want users to be able to log in to their accounts
and save their picker wheel configurations."
  4. 按照互動式提示操作。您看到的互動式提示與這些範例不完全相同。請著重於簡化設計，以便熟悉 Conductor 工作流程。
    • 追蹤目標：
      • 驗證提供者 → Firebase 驗證
      • 已儲存的設定 → 輪子選項
      • 資料儲存 → Firestore
      • Firestore 登入 UI → 模式重疊
    Conductor 會在 conductor/tracks/{track-id} 內為新音軌產生內容檔案。
  5. 查看生成的計畫。花點時間閱讀 conductor/tracks/{track-id}/ 內的 index.md、spec.md 和 plan.md 和 index.md。
  6. 導入：如果一切順利，即可開始導入。
    # Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement
  7. 驗證。重新載入應用程式。您應該會看到更新後的應用程式。 登入的選擇輪

以下是參考實作的黃金程式碼。您必須在 .firebaserc 中提供 Firebase 專案，並在 firebase.ts 中提供 Firebase 設定，才能正確啟動應用程式。

7. 清理

如要避免系統持續向您的 Google Cloud 帳戶收取費用，請刪除本程式碼研究室建立的資源。

刪除 Firebase 專案和 Google Cloud 專案

最簡單的清理方式就是刪除整個專案。

  1. 在 Google Cloud 控制台中，選取您建立的專案。
  2. 點選「刪除」。

或者，如要保留專案但刪除資源，請按照下列步驟操作：

  1. 刪除 Firestore 資料庫：前往 Firebase 控制台 >「Firestore」，然後刪除資料庫。
  2. 刪除驗證：前往 Firebase 控制台 >「驗證」「登入方式」，停用「Google」。

8. 恭喜

恭喜！您已在所選的程式設計代理程式 (Antigravity CLI 或 Claude Code) 中，成功使用 Conductor 外掛程式從頭建構網頁應用程式，然後透過驗證和資料庫整合等複雜功能進行疊代。

後續步驟