# 模組 4：進階 AI 協作 — 成為 AI 的導演

## 💎 AI 時代的核心洞察

> **AI 是強大的助手，但你是導演**

### 📊 AI 協作的演進

```
AI 工具演進                    你的角色演進
────────────────────────      ────────────────────────
2023: ChatGPT 問答            → 你問問題
2024: Copilot 補全            → 你寫一半，AI 補完
2025: Cursor 對話開發         → 你給需求，AI 實作
2026+: AI Agent 自主開發      → 你當產品經理

共同點：你始終掌控方向
```

### 🎯 本模組教你的核心能力

**從「使用 AI」到「指導 AI」**

- 🎬 **需求拆解**：將大需求分解成 AI 可執行的小任務
- 🎯 **Prompt 設計**：如何給 AI 清楚的指令
- ✅ **品質把關**：如何審查 AI 的輸出
- 🔄 **迭代優化**：如何與 AI 持續對話改進

**實際案例：**
```
場景：開發新聞轉教案功能

❌ 低效協作：
「AI，幫我做新聞轉教案功能」
→ AI 生成一堆程式碼
→ 你不知道對不對
→ 來回修改 10 次

✅ 高效協作：
第1步：「根據這份規格，生成測試案例」
第2步：「實作讓測試通過的程式碼」
第3步：「優化程式碼的可讀性」
→ 每步都有明確目標
→ 3 次對話完成
```

### 💡 協作效率對比

```
傳統 AI 使用                  進階 AI 協作
────────────────────────      ────────────────────────
模糊需求 → AI 猜測            清晰規格 → AI 精準執行
來回修改 10+ 次               迭代優化 2-3 次
不確定品質                    測試自動驗證
花費 8 小時                   花費 2 小時

結果：勉強能用                結果：高品質交付
```

---

## 🎯 核心目標
將 SDD 流程內化，並精通與 AI 的協作技巧，達到無縫、高效的「AI 賦能開發」境界。

## 📖 理論基礎

### AI 在軟體開發中的角色

```
傳統開發流程                     AI 賦能開發流程
----------------                 ----------------
想法 → 程式碼 → 除錯             想法 → 規格 → AI 審查規格
  ↓                                ↓
 測試（可能）                     AI 生成測試 → AI 生成程式碼
  ↓                                ↓
 完成                             人工審查 → 重構 → 完成
```

**AI 可以幫助：**
- 📝 審查和優化規格
- 🧪 生成測試案例
- 💻 實作功能程式碼
- 🔍 程式碼審查和優化
- 📚 解釋和教學
- 🐛 除錯和修復

**但你仍需要：**
- 🎯 定義需求和目標
- 🧠 理解業務邏輯
- ✅ 驗證 AI 的輸出
- 🎨 做出設計決策
- 🔧 整合和調試

---

## 🤖 技巧 1：設計強大的 System Prompt

### 基礎 Prompt vs 進階 Prompt

❌ **基礎（效果不佳）：**
```
你是一位 JavaScript 開發者，幫我寫程式碼。
```

✅ **進階（效果更好）：**
```
你是一位資深軟體架構師，擁有以下專長：

【專業背景】
- 10+ 年 JavaScript/Node.js 開發經驗
- 專精於規格驅動開發 (SDD) 和測試驅動開發 (TDD)
- 熟悉 Clean Code 原則和 SOLID 設計原則
- 注重程式碼可讀性、可測試性、可維護性

【工作方式】
1. 收到規格後，先提出澄清問題
2. 優先生成完整的 Jest 測試案例
3. 實作通過測試的簡潔程式碼
4. 提供重構建議和最佳實踐
5. 解釋設計決策的理由

【回應格式】
- 程式碼使用 Markdown code blocks
- 包含清楚的中文註解
- 測試使用 AAA 模式（Arrange-Act-Assert）
- 遵循 JavaScript Standard Style

【注意事項】
- 不要過度設計
- 優先考慮簡單實作
- 確保程式碼易於理解和維護
```

---

## 🎬 技巧 2：分階段協作流程

### 階段一：規格審查

```markdown
你是資深產品經理和 QA 專家。

請審查以下規格，檢查：

【完整性】
- 是否有模糊不清的地方？
- 是否遺漏重要場景？
- 是否涵蓋錯誤處理？

【可行性】
- 技術實作是否可行？
- 是否有效能問題？
- 是否考慮了安全性？

【業務價值】
- 是否真正解決使用者痛點？
- 優先級是否合理？

---
【規格內容】
[貼上你的規格]
---

請以清單方式列出發現的問題和改善建議。
```

**範例輸出：**
> 📋 **規格審查報告**
> 
> **🔴 嚴重問題（必須處理）：**
> 1. 未定義「重複記錄」的判斷標準（同專案同日？）
> 2. 缺少時數上限驗證（防止輸入錯誤）
> 
> **🟡 建議補充：**
> 3. 考慮時區問題（跨國團隊）
> 4. 新增批次匯入功能（提升效率）
> 
> **✅ 做得好的地方：**
> - 錯誤訊息清楚明確
> - 考慮了資料驗證

---

### 階段二：生成測試

```markdown
你是專精於 TDD 的資深開發者。

請根據以下規格，使用 Jest 撰寫測試程式碼。

【規格內容】
[貼上規格]

【要求】
- 使用 Jest 測試框架
- 每個 Gherkin 場景對應一個 describe 區塊
- 使用 Arrange-Act-Assert 模式
- 清晰的中文測試描述
- 包含所有必要的 expect 斷言
- 涵蓋邊界情況和錯誤處理

請生成完整的測試檔案，並說明測試策略。
```

---

### 階段三：實作程式碼

**方法 A：從測試開始（推薦）**
```markdown
以下是我的測試檔案，目前全部失敗。

請實作讓所有測試通過的程式碼。

【測試檔案】
[貼上測試程式碼]

【要求】
- 最簡實作（避免過度設計）
- 包含適當的中文註解
- 遵循 Clean Code 原則
- 解釋關鍵設計決策

請提供完整的實作檔案。
```

**方法 B：增量實作**
```markdown
我的測試出現以下錯誤：

[貼上錯誤訊息]

請告訴我：
1. 錯誤原因是什麼？
2. 如何修正？
3. 修正後的程式碼

只提供必要的修改，不要重寫整個檔案。
```

---

### 階段四：程式碼審查

```markdown
請以資深工程師的角度審查以下程式碼。

【程式碼】
[貼上你的程式碼]

【審查重點】
1. **SOLID 原則**：是否違反單一職責、開放封閉等原則？
2. **安全性**：是否有注入攻擊、資料洩露等風險？
3. **效能**：是否有效能瓶頸？
4. **可讀性**：命名、註解、結構是否清晰？
5. **可測試性**：是否容易撰寫測試？
6. **錯誤處理**：是否妥善處理各種錯誤情況？

請提供具體的改善建議和修改後的程式碼範例。
```

---

### 階段五：重構優化

```markdown
以下程式碼可以正常運作，但我想優化它。

【目前程式碼】
[貼上程式碼]

【優化目標】
- 提升可讀性
- 減少重複代碼
- 改善錯誤處理
- 提升效能（如果有機會）

請提供：
1. 重構後的程式碼
2. 重構理由說明
3. 需要注意的地方

確保所有測試仍然通過。
```

---

## 💻 技巧 3：IDE 整合協作

### GitHub Copilot 實戰技巧

#### 1. 註解驅動開發

```javascript
// ✅ 好的註解（Copilot 會生成高品質程式碼）
/**
 * 驗證信用卡號碼是否有效（使用 Luhn 演算法）
 * @param {string} cardNumber - 信用卡號碼（16位數字）
 * @returns {boolean} 是否有效
 * @example
 * validateCreditCard('4532015112830366') // true
 * validateCreditCard('1234567890123456') // false
 */
function validateCreditCard(cardNumber) {
  // Copilot 會根據詳細註解生成正確的實作
}
```

#### 2. 使用 Copilot Chat 查詢專案

```
// 在 VS Code 中使用 Copilot Chat

@workspace 找出所有處理支付的檔案
→ 回答：找到 src/payment/processor.js, src/payment/validator.js

@workspace 這個專案使用什麼測試框架？
→ 回答：使用 Jest，配置在 package.json

/explain 這個函數在做什麼？
→ AI 會解釋選中的程式碼

/fix 修正這個 bug
→ AI 會建議修復方案

/tests 為這個函數生成測試
→ AI 會生成測試程式碼
```

#### 3. Copilot 重構技巧

```javascript
// 選擇需要重構的程式碼
// 右鍵 → Copilot → Refactor

// 或在 Copilot Chat 中：
/refactor 將這個函數拆分成更小的函數
/refactor 使用更好的命名
/refactor 改用 async/await 而非 Promise.then
```

---

## 🎯 技巧 4：持續對話優化

### 不好的提問方式

❌ **過於模糊：**
```
幫我寫一個購物車功能
```
→ AI 不知道技術棧、需求細節，回答會很泛用

❌ **一次要求太多：**
```
幫我寫一個電商網站，包含前端、後端、資料庫、支付整合
```
→ 範圍太大，難以給出實用建議

❌ **沒有背景資訊：**
```
這段程式碼有 bug，請修正
[只貼程式碼，沒有說明問題]
```
→ AI 不知道預期行為是什麼

---

### 好的提問方式

✅ **提供完整背景：**
```
我正在開發一個小型工作室的時間追蹤系統。

【技術棧】
- Node.js 後端
- Jest 測試框架
- 資料存在記憶體（暫不用資料庫）

【已完成功能】
- 建立時間記錄
- 查看今日記錄

【需要實作】
「編輯時間記錄」功能

【需求】
1. 只能編輯自己的記錄
2. 只能編輯今天或昨天的記錄
3. 修改時數時需重新驗證（>0, <=24）
4. 保留修改歷史記錄

請先生成測試，我會告訴你測試結果再請你實作。
```

✅ **分階段推進：**
```
【第一輪】
請根據以下規格生成測試：
[貼上規格]

【第二輪】（在收到測試後）
測試生成得很好！但我想補充一個場景：
「嘗試編輯其他人的記錄時應該拒絕」
請補充這個測試案例。

【第三輪】（測試執行後）
測試執行結果如下：
[貼上錯誤訊息]
請實作 editTimeEntry 函數。

【第四輪】（實作完成後）
所有測試都通過了！請審查程式碼並提供優化建議。
```

✅ **明確指出問題：**
```
這段程式碼有問題：

【預期行為】
輸入 -1 時數應該顯示錯誤訊息「時數必須大於 0」

【實際行為】
輸入 -1 時系統沒有顯示錯誤，直接儲存了

【程式碼】
[貼上相關程式碼]

【測試】
[貼上失敗的測試]

請找出問題並修正。
```

---

## 📋 實戰範例：完整開發流程

### 場景：線上教師「批改作業」功能

#### Step 1：規格審查

**你的 Prompt：**
```markdown
你是資深教育科技產品經理。

我想為線上教師系統增加「批改作業」功能。

【初步構想】
- 教師可以查看學生提交的作業
- 教師可以給分數和評語
- 學生收到通知

請幫我：
1. 補充遺漏的場景
2. 提出潛在問題
3. 建議優化方向
```

**AI 回應範例：**
> 📋 **功能分析**
> 
> **🟡 需要補充的場景：**
> 1. 如果學生遲交，要如何處理？
> 2. 評分標準是什麼？百分制？等級制？
> 3. 教師可以修改已批改的作業嗎？
> 4. 是否需要批改期限？
> 5. 是否支援檔案下載（作業附件）？
> 
> **💡 建議功能：**
> - 評分範本（節省教師時間）
> - 批次批改（一次處理多份）
> - 統計分析（平均分、最高分等）

#### Step 2：完善規格

根據 AI 建議，你撰寫完整規格：

```markdown
# specs/grade-assignment.spec.md

## 使用者故事

### US-001: 查看待批改作業
身為線上教師，我想要查看所有待批改的作業，以便於安排批改時間。

### US-002: 批改作業並給分
身為線上教師，我想要為作業評分和留評語，以便於給學生反饋。

## 驗收條件

### ✅ 場景一：成功批改作業

```gherkin
Given 我是已登入的教師 "Mary"
  And 有一個學生 "Alice" 提交了作業
  And 作業 ID 是 "hw_001"
When 我開啟作業 "hw_001"
  And 我給予分數 "85" 分
  And 我輸入評語 "整體不錯，但第三題需要改進"
  And 我點擊「儲存並通知學生」
Then 系統應該顯示 "批改完成！"
  And 作業狀態應該更新為「已批改」
  And Alice 應該收到批改通知
  And 通知包含分數和評語
```
```

#### Step 3：生成測試

**你的 Prompt：**
```markdown
請根據規格生成完整的 Jest 測試。

[貼上 specs/grade-assignment.spec.md]

技術要求：
- 使用 Jest
- AAA 模式
- 測試描述使用中文
```

#### Step 4：執行測試並實作

```bash
# 執行測試
npm test tests/grade-assignment.test.js

# 測試失敗（紅燈）
FAIL  tests/grade-assignment.test.js
```

**你的 Prompt：**
```markdown
測試失敗了，錯誤訊息如下：

Cannot find module '../src/assignment'

請實作 assignment 模組，包含：
- gradeAssignment(assignmentId, teacherId, score, comment)
- getAssignment(assignmentId)
- getPendingAssignments(teacherId)

要求：
- 讓所有測試通過
- 適當的錯誤處理
- 清晰的註解
```

#### Step 5：審查與優化

```markdown
所有測試都通過了！

請審查程式碼並提供優化建議：

[貼上實作程式碼]

審查重點：
- 是否有安全問題（例如教師批改他人的作業）
- 是否有效能問題
- 程式碼可讀性
```

---

## 🚀 進階技巧：建立個人 Prompt 範本庫

### 範本 1：規格審查

```markdown
【Prompt 標題】規格審查 - 線上教育系統
【適用場景】教育類功能開發

你是資深教育科技產品經理和 QA 專家。

請審查以下規格：

【審查重點】
1. 教育場景的合理性
2. 教師和學生雙方體驗
3. 安全性和隱私保護
4. 是否考慮無障礙設計

【規格內容】
{paste_spec_here}

請提供改善建議。
```

### 範本 2：測試生成

```markdown
【Prompt 標題】生成 Jest 測試 - TDD 標準流程
【適用場景】所有功能開發

你是 TDD 專家。

請根據規格生成 Jest 測試：

【規格】
{paste_spec_here}

【要求】
- Jest 測試框架
- AAA 模式
- 中文描述
- 涵蓋所有場景
- 包含邊界情況

請生成完整測試檔案。
```

### 範本 3：程式碼審查

```markdown
【Prompt 標題】程式碼審查 - Clean Code 標準
【適用場景】程式碼品質檢查

請以資深工程師角度審查程式碼。

【審查標準】
- SOLID 原則
- 安全性
- 效能
- 可讀性
- 可測試性

【程式碼】
{paste_code_here}

請提供具體改善建議和範例。
```

---

## 🔍 模組 4 總結

### AI 協作核心原則

1. **AI 是助手，不是替代**
   - 你負責思考和決策
   - AI 負責執行和建議

2. **分階段漸進式協作**
   - 規格 → 測試 → 實作 → 審查
   - 不要一次要求太多

3. **始終驗證和理解**
   - 不要盲目複製貼上
   - 理解每一行程式碼

4. **建立個人知識庫**
   - 收集有效的 Prompts
   - 記錄最佳實踐

### ✅ 檢核清單

完成模組 4 後，你應該能夠：
- [ ] 撰寫有效的 System Prompt
- [ ] 分階段與 AI 協作開發
- [ ] 使用 IDE AI 工具（如 GitHub Copilot）
- [ ] 審查和優化 AI 生成的程式碼
- [ ] 建立個人 Prompt 範本庫
- [ ] 獨立完成完整功能開發

---

### ✍️ 實戰練習

**練習 1：完整功能開發**  
選擇以下場景，使用 AI 完成完整開發：

**線上教師系統：**
- 「課堂簽到」功能
- 「學生成績分析」功能
- 「課程問答區」功能

**小型工作室系統：**
- 「專案報價生成」功能
- 「客戶溝通記錄」功能
- 「月度收入統計」功能

**個人應用：**
- 「每日習慣追蹤」功能
- 「筆記匯出」功能
- 「搜尋歷史記錄」功能

**要求：**
- [ ] 記錄每階段的 Prompts
- [ ] 記錄 AI 的回應品質
- [ ] 記錄需要人工調整的地方
- [ ] 達到 80% 以上測試覆蓋率

**練習 2：Prompt 範本庫**  
建立你的個人 Prompt 範本庫：
- [ ] 至少 5 個常用範本
- [ ] 每個範本標註使用場景
- [ ] 包含實際案例

**練習 3：Code Review 訓練**  
找一段程式碼（自己或他人的）：
- [ ] 用 AI 進行審查
- [ ] 比較 AI 建議和你的想法
- [ ] 實作優化並驗證改善效果

---

## 🎓 課程總結

恭喜你完成全部 4 個模組！

### 你已掌握

- ✅ **模組 0**：規格驅動思維
  - User Story 和 Gherkin 撰寫
  - AI 規格審查

- ✅ **模組 1**：開發者工具包
  - VS Code、Git、npm、Jest

- ✅ **模組 2**：SDD 核心循環
  - Red-Green-Refactor
  - 測試驅動開發

- ✅ **模組 3**：軟體架構入門
  - 模組化設計
  - 關注點分離

- ✅ **模組 4**：進階 AI 協作
  - 有效使用 AI 工具
  - 分階段協作流程

### 下一步行動

1. **應用到實際專案**
   - 選一個真實需求
   - 完整走過 SDD 流程

2. **建立作品集**
   - 3-5 個完整專案
   - 展示在 GitHub

3. **持續學習**
   - 關注新技術和工具
   - 參與社群交流

4. **分享與教學**
   - 寫技術文章
   - 幫助其他學習者

---

**🎯 記住：**

> 「規格是北極星，測試是指南針，AI 是助手，而你是船長。」

祝你在開發之路上越走越遠！🚀