第 11 課：常見工作流程

學習目標

完成本課程後，您將能夠：

執行完整的功能開發工作流程
應用系統化的 bug 修復
進行程式碼審查工作流程
執行安全重構
學習新程式庫工作流程
練習測試驅驅開發

先決條件

完成第 1-10 課 - 所有先前的教程內容
真實專案 - 將工作流程應用到您自己的程式碼
Git 經驗 - 基本的版本控制知識

預估時間： 35 分鐘

工作流程 1：功能開發

開發新功能是一個常見的任務。

逐步過程

1. 了解需求

You: 我需要新增使用者個人資料功能。
幫我規劃這個功能。

2. 探索現有程式碼

You: 這個程式庫的其他 CRUD 操作是如何實作的？

Claude: [使用 Explore agent]
找到範例：
- src/products.py - Product CRUD
- src/models/user.py - User model
- 遵循此模式以保持一致性

3. 設計實作

You: 基於現有模式，設計個人資料功能。

Claude: [為您的需求建立架構]
架構:
- 端點: GET/PUT /api/user/profile
- Controller: ProfileController
- Service: ProfileService
- Validation: ProfileSchema

4a. 實作後端:

You: 建立個人資料端點

Claude: [建立 src/api/profile.py]
✓ 建立了 profile API 端點

4b. 新增驗證:

You: 為個人資料新增驗證

Claude: [建立驗證 schema]
✓ 已新增輸入驗證

4c. 實作前端:

You: 建立個人資料頁面元件

Claude: [建立 components/Profile.jsx]
✓ 已建立個人資料 UI

5. 測試和重構:

You: 執行測試並修復任何問題

Claude: [執行測試]
✓ 所有測試通過

工作流程 2：Bug 修復

Bug 是不可避免的。Claude 協助您系統化地修復它們。

Bug 修復過程

1. 了解 bug

You: 我收到此錯誤：
"TypeError: Cannot read property 'map' of undefined"
在 dashboard 元件載入時發生。

Claude: [調查問題]
根因分析：
useEffect 在資料載入前執行
stats 陣列在初始渲染時為 undefined

修正：新增載入狀態或預設值

2. 重現 bug

You: 幫我重現這個 bug

Claude: [提供重現步驟]
1. 導覽到 /dashboard
2. 檢查瀏覽器主控台
3. 觀察載入時的錯誤

3. 找根本原因

You: 這個錯誤的根本原因是什麼？

Claude: [找出根本原因]
根本原因：
useEffect 的相依性陣列缺失
應該將使用者資料作為相依性

4. 實作修正

You: 修正這個 bug

Claude: [應用修正]
已修正：新增適當的相依性和載入狀態

5. 新增回歸測試

You: 新增測試以防止回歸

Claude: [新增測試]
✓ 測試已加入以防止此 bug 回歸

工作流程 3：程式碼審查

程式碼審查對品質至關重要。

程式碼審查過程

1. 請求審查

You: 審查 PR #45

Claude: [取得 PR 差異]
進行程式碼審查

2. 分析變更

Claude: [分析程式碼]
PR #45 的程式碼審查：

優點：
✓ 程式碼結構良好
✓ 完善的測試
✓ 良好的錯誤處理

關注：
⚠ API 金鑰應在環境變數中
⚠ SQL 注入風險
⚠ 缺少速率限制

建議：
1. 將 STRIPE_SECRET_KEY 移至 .env
2. 對查詢使用參數化
3. 新增速率限制

3. 討論問題

You: 點 2 提出的問題，您能修正它們嗎？

Claude: [修正問題]
我已修正了這些問題：
[顯示修正前後]

4. 驗證修正

You: 他們更新了 PR，重新審查

Claude: [重新分析]
✓ 所有安全問題已解決
✓ 程式碼看起來很好可以合併

工作流程 4：重構

重構意味著在不變更行為的情況下改善程式碼結構。

重構工作流程

1. 識別重構需求

You: UserService class 500 行且難以維護。幫我重構它。

Claude: [分析該類別]
發現 8 個不同的職責：
- 資料驗證
- 使用者管理
- 查詢處理
- 認證處理

建議分解為：
- UserCreationService
- UserValidationService
- UserQueryService
- UserAuthenticationService

2. 計劃重構

You: 建立重構計畫

Claude: [建立重構計畫]
PLAN: 重構 UserService

階段 1: 提取關注點
- 識別不同的職責
- 建立分離的服務

階段 2: 移動方法
- 將方法遷移到新服務
- 更新匯入
- 更新測試

階段 3: 更新測試
- 修改測試以適應新結構
- 確保涵蓋維持

3. 執行重構

You: 執行階段 1

Claude: [提取服務]
✓ 已建立服務

You: 繼續階段 2

Claude: [移動方法並更新匯入]
✓ 階段 2 完成

You: 執行測試

Claude: ✓ 測試通過

✅ 檢查您的理解

什麼是重構？
- 增加新功能
- 在不改變行為的情況下改善程式碼結構
- 修復 bug
- 更新文件
何時應該使用計畫模式？
- 用於簡單編輯
- 用於複雜、多檔案變更
- 用於讀取檔案
- 用於執行測試
什麼技能建立 git 提交？
- /save
- /commit
- /git
- /store
True or False: 程式碼審查應該是批評性的。
- True
- False - 建設性且以改進為目標
什麼是學習新程式庫的「Try It Yourself」練習？
- 閱讀文件
- 執行命令
- 查看範例
- 以上皆非

答案： 1-b, 2-b, 3-b, 4-False, 5-d

總結

在本課程中，您學到了：

功能開發 - 計畫、實作、測試、文件
Bug 修復 - 理解、重現、修正、測試
程式碼審查 - 分析、提供回饴、驗證
重構 - 改善結構、保持行為
學習新程式庫 - 探索、追蹤、提問

下一步

在**第 12 課：提示、技巧和最佳實踐**中，您將學到：

溝通提示以獲得更好的結果
避免常見錯誤
效能優化
團隊協作提示
疑難排除

進階閱讀

繼續至第 12 課：提示、技巧和最佳實踐 →

學習目標​

先決條件​

工作流程 1：功能開發​

逐步過程​

工作流程 2：Bug 修復​

Bug 修復過程​

工作流程 3：程式碼審查​

程式碼審查過程​

工作流程 4：重構​

重構工作流程​

✅ 檢查您的理解​

總結​

下一步​

進階閱讀​