# 🚀 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)