263 lines
6.9 KiB
Markdown
263 lines
6.9 KiB
Markdown
# 🚀 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) |