使用 Gemini CLI Conductor 規劃及建構應用程式

1. 簡介

在本程式碼研究室中，您將瞭解如何使用 Gemini CLI Conductor 擴充功能規劃及建構軟體應用程式。您將從頭開始建構「綠地」應用程式。接著，您會將其視為「棕地」專案，反覆運算以新增驗證和儲存空間。

學習內容

安裝 Gemini CLI 和 Conductor 擴充功能
使用 Conductor 的規劃和實作功能，從頭建構「Picker Wheel」網頁應用程式
使用 Firebase 新增驗證和儲存空間，為應用程式加入個人化功能

課程內容

如何使用 Conductor 擴充功能規劃、實作及審查「綠地」應用程式
如何使用 Conductor 擴充功能，在「棕地」應用程式中新增功能

軟硬體需求

網路瀏覽器，例如 Chrome
已啟用計費功能的 Google Cloud 雲端專案
已安裝 Node.js (建議使用 18 以上版本)
本機程式碼編輯器，例如 Visual Studio Code

2. 事前準備

建立 Google Cloud 專案

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

啟動 Cloud Shell

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

點選 Google Cloud 控制台頂端的「啟用 Cloud Shell」。
連至 Cloud Shell 後，請驗證您的驗證：
```
gcloud auth list
```
確認專案已設定完成：
```
gcloud config get project
```

如果專案未如預期設定，請設定專案：

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 新增至專案

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

firebase login

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

firebase projects:addfirebase

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

退出 Cloud Shell

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

3. 在本機安裝 Gemini CLI 和 Conductor

在這個步驟中，您將使用本機程式碼編輯器和終端機，安裝 Gemini CLI 和 Conductor 擴充功能，準備本機開發環境。

安裝 Gemini CLI

使用 npm 全域安裝最新版 Gemini CLI：
```
npm install -g @google/gemini-cli
```
如果看到權限錯誤，您可能需要使用 nvm 這類版本管理工具，或使用 sudo 以根身分執行這項指令。
重新啟動終端機，將 gemini 新增至 PATH。
確認安裝的最新版本：
```
gemini --version
```
建立並變更為新的專案目錄：我們會在後續章節中，於 picker-wheel 目錄中建立專案。現在建立該目錄，然後切換至這個目錄：
```
mkdir picker-wheel
cd picker-wheel
```
驗證：
- 啟動 Gemini CLI。
```
gemini
```
- 系統詢問「你信任這個資料夾中的檔案嗎？」時，請選取「信任資料夾 (選擇器轉盤)」
- 系統詢問「您要如何驗證這個專案？」時，請選取「Vertex AI」。按照驗證指南取得 Google Cloud API 金鑰，並設定 GOOGLE_API_KEY 環境變數。請花點時間瞭解不同的用量層級，以及對應的 API 速率限制。
退出 Gemini CLI：在 CLI 終端機中輸入 /quit，結束目前的 Gemini CLI 工作階段，然後繼續操作。

安裝 Conductor 擴充功能

Conductor 是 Google 建構的開放原始碼 Gemini CLI 擴充功能，可啟用以脈絡為依據的開發功能，例如規劃和實作追蹤。

安裝擴充功能：

gemini extensions install https://github.com/gemini-cli-extensions/conductor

驗證安裝：
- 啟動 Gemini CLI。
```
gemini
```
- 輸入 /conductor，即可查看指令清單，例如 setup、newTrack、implement 等。
退出 Gemini CLI：在 CLI 終端機中輸入 /quit，結束目前的 Gemini CLI 工作階段，然後繼續操作。

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

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

設定產品背景資訊

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

建立新曲目

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

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

導入追蹤功能

開始導入：
```
/conductor:implement
```
Conductor 現在會根據計畫編寫專案程式碼。
提示：為避免卡在互動式殼層或長時間執行的程序 (例如開發伺服器或測試監看程式)，我們需要確保 Conductor 確切知道如何處理這些特定指令。Vite (npm run dev) 和 Vitest (npm run test) 等工具預設通常會以「監看模式」執行，這會無限期保持程序開啟。更新 workflow.md 時，可以指示 Conductor 停用監看模式，或在執行指令時使用 is_background: true。
驗證應用程式：在導入階段，Conductor 會提示您手動測試應用程式。例如，系統會要求您開啟本機網路伺服器、在瀏覽器中預覽應用程式，並驗證變更。實作完成後，您應該會看到可正常運作的選擇器轉盤。
疑難排解：如果生成的程式碼行為異常，請檢查 conductor/tracks/.../plan.md 是否有任何略過的步驟或錯誤。
檢查導入作業：最後一個步驟是請 Conductor 檢查導入作業。並應審查原始碼、同步處理專案文件，以及封存軌道。
```
/conductor:review
```

5. 棕地疊代：新增個人化設定

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

建立個人化軌

在下列「棕地」範例中，我們將使用 Firebase 進行驗證和儲存。安裝 Gemini CLI Firebase 擴充功能，供 Conductor 使用。
```
gemini extensions install https://github.com/gemini-cli-extensions/firebase
```
啟動 Gemini CLI：從專案目錄啟動新的 Gemini CLI 工作階段。
```
gemini
```

開始新的曲目：開始新的曲目。

/conductor:newTrack "I want users to be able to log in to their accounts and
save their picker wheel configurations."

按照互動式提示操作：您看到的互動式提示與這些範例不完全相同。著重於簡化設計，熟悉 Conductor 工作流程。
- 追蹤目標：
  - 驗證供應商 → Firebase Auth
  - 已儲存的設定 → 輪子選項
  - 資料儲存 → Firestore
  - Firestore 登入 UI → 模式重疊
Conductor 會在 conductor/tracks/{track-id} 內為新軌生成內容檔案。
查看產生的計畫：請花點時間閱讀 conductor/tracks/{track-id}/ 內的 index.md、spec.md 和 plan.md。
提示：建議您先與 Gemini 對話，盡可能瞭解及討論計畫，再開始實作。
導入：如果一切順利，即可開始導入。
```
/conductor:implement
```
驗證：重新載入應用程式。您應該會看到更新後的應用程式。
如果 AI 在測試驗證實作時遇到問題，請記得在 Firebase 控制台中，依序點選「Authentication」>「Sign-in method」，啟用「Google Sign-In」。

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

6. 清理

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

刪除 Firebase 專案 (和 Google Cloud 專案)

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

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

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

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

7. 恭喜

恭喜！您已成功使用 Gemini CLI Conductor 擴充功能從頭建構網頁應用程式，然後透過驗證和資料庫整合等複雜功能進行疊代。

後續步驟

探索 Gemini CLI 計畫模式，輕鬆制定計畫
進一步瞭解 Gemini CLI 擴充功能