From 3649e21ac960c648458f7358eab8c6876b71ab8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=84=AD=E6=B2=9B=E8=BB=92?= Date: Wed, 17 Sep 2025 01:47:32 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=96=B0=E5=A2=9E=E4=B8=8B=E4=B8=80?= =?UTF-8?q?=E9=9A=8E=E6=AE=B5=E9=96=8B=E7=99=BC=E8=A8=88=E5=8A=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 詳細的 4 階段開發路線圖 - 詞卡管理系統優先實作 - AI 生成功能整合計劃 - 學習模式設計規劃 - 數據可視化實作計劃 - 包含時程安排和成功指標 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../next-phase-development-plan.md | 263 ++++++++++++++++++ 1 file changed, 263 insertions(+) create mode 100644 docs/03_development/next-phase-development-plan.md diff --git a/docs/03_development/next-phase-development-plan.md b/docs/03_development/next-phase-development-plan.md new file mode 100644 index 0000000..a22ac08 --- /dev/null +++ b/docs/03_development/next-phase-development-plan.md @@ -0,0 +1,263 @@ +# 🚀 DramaLing 下一階段開發計劃 + +## 📊 當前專案狀態 + +### ✅ **已完成功能** +- **🔐 用戶認證系統**：註冊、登入、JWT token 驗證 +- **🏗️ 後端架構**：.NET Core API、SQLite 資料庫、錯誤日誌系統 +- **🎨 前端框架**：Next.js 15、認證上下文、保護路由 +- **📝 開發工具**：完整的錯誤監控和日誌系統 + +### 🎯 **技術債務** +- 前端頁面使用 mock 資料，需要與後端 API 整合 +- 資料庫只有用戶表格，缺少詞卡相關資料 +- AI 生成功能尚未與 Gemini API 連接 + +--- + +## 🎯 下一階段開發重點 + +### **第一階段：核心詞卡功能 (1-2 週)** + +#### **1.1 詞卡管理系統** +**目標**：建立完整的詞卡 CRUD 功能 + +**後端任務**： +- [x] `CardSetsController` - 詞卡集合管理 +- [x] `FlashcardsController` - 單張詞卡操作 +- [ ] 測試所有 API 端點 +- [ ] 建立預設詞卡資料 + +**前端任務**： +- [ ] 整合 `/flashcards` 頁面與後端 API +- [ ] 實作詞卡列表展示 +- [ ] 實作詞卡新增/編輯/刪除功能 +- [ ] 實作詞卡集合管理 + +**API 端點**： +``` +GET /api/cardsets - 取得詞卡集合列表 +POST /api/cardsets - 建立新詞卡集合 +GET /api/flashcards - 取得詞卡列表 +POST /api/flashcards - 建立新詞卡 +PUT /api/flashcards/{id} - 更新詞卡 +DELETE /api/flashcards/{id} - 刪除詞卡 +``` + +#### **1.2 資料庫初始化** +**目標**：建立測試用的詞卡資料 + +**任務**： +- [ ] 建立種子資料（Seed Data） +- [ ] 建立預設詞卡集合（如：商務英語、日常對話） +- [ ] 建立範例詞卡（50-100 張） +- [ ] 測試資料庫關聯完整性 + +--- + +### **第二階段：AI 生成功能 (1 週)** + +#### **2.1 Google Gemini 整合** +**目標**：實作從影劇對話生成詞卡 + +**後端任務**： +- [ ] 測試 `GeminiService` 與 Google AI 連接 +- [ ] 實作 `AIController` 的生成端點 +- [ ] 配置 Gemini API 金鑰 +- [ ] 優化 AI 提示詞（Prompt Engineering） + +**前端任務**： +- [ ] 整合 `/generate` 頁面與 AI API +- [ ] 實作影劇對話輸入介面 +- [ ] 實作生成詞卡結果展示 +- [ ] 實作生成詞卡儲存功能 + +**API 端點**： +``` +POST /api/ai/generate-flashcards - 從對話生成詞卡 +POST /api/ai/analyze-difficulty - 分析詞彙難度 +``` + +--- + +### **第三階段：學習功能 (1-2 週)** + +#### **3.1 學習模式實作** +**目標**：實作多種學習模式 + +**功能清單**： +- [ ] **翻卡模式**：顯示英文→中文翻譯 +- [ ] **選擇題模式**：四選一題目 +- [ ] **拼寫模式**：聽音拼字 +- [ ] **間隔重複算法**：使用 SM2 演算法 + +**前端任務**： +- [ ] 整合 `/learn` 頁面與學習 API +- [ ] 實作學習模式選擇器 +- [ ] 實作學習進度追蹤 +- [ ] 實作學習結果回饋 + +**後端任務**： +- [ ] 測試 `StudyController` 學習端點 +- [ ] 實作 `SM2Algorithm` 間隔重複 +- [ ] 建立學習工作階段（StudySession） +- [ ] 實作學習統計記錄 + +--- + +### **第四階段：數據可視化 (1 週)** + +#### **4.1 學習統計與儀表板** +**目標**：提供詳細的學習分析 + +**功能清單**： +- [ ] 學習進度圖表 +- [ ] 每日學習統計 +- [ ] 詞彙掌握度分析 +- [ ] 學習時間追蹤 + +**前端任務**： +- [ ] 整合 `/dashboard` 頁面與統計 API +- [ ] 實作圖表組件（Chart.js 或 Recharts） +- [ ] 實作學習報告頁面 +- [ ] 實作成就徽章系統 + +**後端任務**： +- [ ] 測試 `StatsController` 統計端點 +- [ ] 實作學習數據聚合 +- [ ] 實作成就計算邏輯 + +--- + +## 🛠️ 開發工具與流程 + +### **開發環境** +```bash +# 啟動前端（localhost:3000） +cd frontend && npm run dev + +# 啟動後端（localhost:5000） +cd backend/DramaLing.Api && dotnet run --urls=http://localhost:5000 + +# 查看 API 文檔 +http://localhost:5000/swagger +``` + +### **錯誤監控** +```bash +# 查看後端日誌 +BashOutput(bash_id: "bfb3f6") + +# 查看認證錯誤 +BashOutput(bash_id: "bfb3f6", filter: "Auth|Login|Register") + +# 查看 API 錯誤 +BashOutput(bash_id: "bfb3f6", filter: "Error|Exception") +``` + +### **API 測試** +```bash +# 健康檢查 +curl "http://localhost:5000/health" + +# 測試認證 +curl -X POST "http://localhost:5000/api/auth/login" \ + -H "Content-Type: application/json" \ + -d '{"email": "test@example.com", "password": "testpass123"}' +``` + +--- + +## 📋 第一階段詳細任務分解 + +### **Week 1：詞卡管理系統** + +#### **Day 1-2：後端 API 測試與資料建立** +- [ ] 測試所有 CardSets API 端點 +- [ ] 測試所有 Flashcards API 端點 +- [ ] 建立種子資料（Seed Data） +- [ ] 驗證資料庫關聯 + +#### **Day 3-4：前端詞卡列表整合** +- [ ] 建立詞卡 API 服務檔案 +- [ ] 整合詞卡列表顯示 +- [ ] 實作詞卡搜尋與篩選 +- [ ] 實作詞卡集合切換 + +#### **Day 5-7：詞卡編輯功能** +- [ ] 實作詞卡新增表單 +- [ ] 實作詞卡編輯功能 +- [ ] 實作詞卡刪除確認 +- [ ] 實作批量操作 + +--- + +## 🎯 成功指標 + +### **第一階段完成標準** +- [ ] 用戶可以瀏覽所有詞卡集合 +- [ ] 用戶可以新增/編輯/刪除詞卡 +- [ ] 詞卡資料正確儲存到資料庫 +- [ ] 前端頁面完全不使用 mock 資料 + +### **整體專案完成標準** +- [ ] 用戶可以從零開始生成學習詞卡 +- [ ] 用戶可以進行完整的學習循環 +- [ ] 用戶可以查看學習進度和統計 +- [ ] 系統穩定運行，錯誤處理完善 + +--- + +## 📅 時程規劃 + +| 階段 | 時間 | 主要功能 | 里程碑 | +|------|------|----------|---------| +| 第一階段 | Week 1-2 | 詞卡管理 | 完整 CRUD 功能 | +| 第二階段 | Week 3 | AI 生成 | Gemini 整合完成 | +| 第三階段 | Week 4-5 | 學習功能 | 三種學習模式 | +| 第四階段 | Week 6 | 數據分析 | 統計儀表板 | + +--- + +## 🔧 技術考量 + +### **效能優化** +- 實作詞卡分頁載入 +- 快取常用的詞卡集合 +- 優化 AI 生成回應時間 + +### **用戶體驗** +- 響應式設計適配行動裝置 +- 載入狀態和錯誤提示 +- 鍵盤快捷鍵支援 + +### **資料安全** +- 用戶詞卡資料隔離 +- API 端點權限控制 +- 敏感資料加密儲存 + +--- + +## 🚀 立即行動計劃 + +**今天就可以開始**： +1. 測試現有的 CardSets API +2. 建立第一個詞卡集合 +3. 在前端顯示真實的後端資料 +4. 實作基本的詞卡 CRUD + +**預期成果**： +在這個階段結束後，DramaLing 將從一個原型變成一個可用的詞卡學習應用，用戶可以管理自己的詞卡並開始基本的學習活動。 + +--- + +**建立日期**：2025-09-16 +**預計完成**：2025-10-27 +**開發者**：DramaLing Team + +--- + +## 📖 相關文檔 +- [錯誤日誌監控指南](./error-logging-guide.md) +- [API 開發文檔](./api/README.md) +- [環境設置指南](./setup/README.md) \ No newline at end of file