jettcheng1018
/
dramaling-vocab-learning
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
dramaling-vocab-learning/docs/03_development/next-phase-development-plan.md

6.9 KiB
Raw Blame History

🚀 DramaLing 下一階段開發計劃

📊 當前專案狀態

✅ 已完成功能

  • 🔐 用戶認證系統：註冊、登入、JWT token 驗證
  • 🏗️ 後端架構：.NET Core API、SQLite 資料庫、錯誤日誌系統
  • 🎨 前端框架：Next.js 15、認證上下文、保護路由
  • 📝 開發工具：完整的錯誤監控和日誌系統

🎯 技術債務

  • 前端頁面使用 mock 資料，需要與後端 API 整合
  • 資料庫只有用戶表格，缺少詞卡相關資料
  • AI 生成功能尚未與 Gemini API 連接

🎯 下一階段開發重點

第一階段：核心詞卡功能 (1-2 週)

1.1 詞卡管理系統

目標：建立完整的詞卡 CRUD 功能

後端任務：

  • CardSetsController - 詞卡集合管理
  • 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 統計端點
  • 實作學習數據聚合
  • 實作成就計算邏輯

🛠️ 開發工具與流程

開發環境

# 啟動前端（localhost:3000）
cd frontend && npm run dev

# 啟動後端（localhost:5000）
cd backend/DramaLing.Api && dotnet run --urls=http://localhost:5000

# 查看 API 文檔
http://localhost:5000/swagger

錯誤監控

# 查看後端日誌
BashOutput(bash_id: "bfb3f6")

# 查看認證錯誤
BashOutput(bash_id: "bfb3f6", filter: "Auth|Login|Register")

# 查看 API 錯誤
BashOutput(bash_id: "bfb3f6", filter: "Error|Exception")

API 測試

# 健康檢查
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

📖 相關文檔