127 lines
4.0 KiB
Markdown
127 lines
4.0 KiB
Markdown
# 🎬 DramaLing - AI 英語詞彙學習平台
|
||
|
||
**專案狀態**: 🔄 後端重寫中 (.NET Core)
|
||
**開發週期**: 6 週 (2025-09-16 ~ 2025-10-27)
|
||
**技術棧**: Next.js + .NET Core + PostgreSQL + Gemini AI
|
||
**目標**: 100 個活躍用戶，40% 留存率
|
||
|
||
## 🏗️ 架構概覽
|
||
|
||
```
|
||
Frontend (Next.js 15) Backend (.NET Core 8)
|
||
http://localhost:3001 ←→ http://localhost:5000
|
||
↓ ↓
|
||
React Pages ASP.NET Core Web API
|
||
Tailwind CSS Entity Framework Core
|
||
↓ ↓
|
||
PostgreSQL (Supabase)
|
||
Google Gemini AI
|
||
```
|
||
|
||
## 🚀 快速開始
|
||
|
||
### 前端啟動 (已完成)
|
||
```bash
|
||
./start-frontend.sh
|
||
# 前端運行在: http://localhost:3001
|
||
```
|
||
|
||
### 後端啟動 (.NET Core)
|
||
```bash
|
||
# 1. 啟動 .NET API
|
||
./start-dotnet-api.sh
|
||
|
||
# 2. API 端點
|
||
# http://localhost:5000/api/flashcards
|
||
# http://localhost:5000/swagger (API 文檔)
|
||
# http://localhost:5000/health (健康檢查)
|
||
```
|
||
|
||
## 📁 專案結構 (前後端分離)
|
||
|
||
```
|
||
dramaling-vocab-learning/
|
||
├── frontend/ # Next.js 前端專案 (完成)
|
||
│ ├── app/ # 前端頁面
|
||
│ │ ├── dashboard/ # 儀表板頁面
|
||
│ │ ├── flashcards/ # 詞卡管理
|
||
│ │ ├── learn/ # 學習頁面
|
||
│ │ ├── generate/ # AI 生成
|
||
│ │ └── login/register/ # 認證頁面
|
||
│ │
|
||
│ ├── public/ # 靜態資源
|
||
│ ├── package.json # 前端依賴
|
||
│ ├── tailwind.config.ts # 樣式配置
|
||
│ ├── next.config.mjs # Next.js 配置
|
||
│ └── tsconfig.json # TypeScript 配置
|
||
│
|
||
├── backend/ # .NET Core 後端專案 (開發中)
|
||
│ └── DramaLing.Api/ # API 專案
|
||
│ ├── Controllers/ # API 控制器
|
||
│ ├── Services/ # 業務邏輯
|
||
│ ├── Models/ # 數據模型
|
||
│ ├── Data/ # Entity Framework
|
||
│ └── Program.cs # 啟動配置
|
||
│
|
||
├── docs/ # 專案文檔
|
||
│ ├── 01_requirement/ # 需求文檔
|
||
│ ├── 02_design/ # 設計文檔
|
||
│ └── 03_development/ # 開發文檔
|
||
│
|
||
├── README.md # 專案說明
|
||
├── start-frontend.sh # 前端啟動腳本
|
||
└── start-dotnet-api.sh # 後端啟動腳本
|
||
```
|
||
|
||
## 🎯 核心功能
|
||
|
||
### ✅ 已完成 (前端)
|
||
- 🎨 **完整 UI/UX** - 所有頁面設計完成
|
||
- 📱 **響應式設計** - 支援手機/平板/桌面
|
||
- 🎯 **學習模式** - 翻卡、選擇題、填空、聽力、口說
|
||
- 🤖 **AI 生成界面** - 智能詞卡生成流程
|
||
- 📊 **統計儀表板** - 學習進度追蹤
|
||
|
||
### 🔧 開發中 (後端)
|
||
- 🏗️ **ASP.NET Core API** - 高性能 RESTful API
|
||
- 🧠 **SM-2 學習算法** - 間隔重複記憶系統
|
||
- 🤖 **AI 服務整合** - Google Gemini API
|
||
- 📊 **統計分析** - 多維度學習數據
|
||
- 🔒 **JWT 認證** - 安全的用戶系統
|
||
|
||
## 📈 開發進度
|
||
|
||
```
|
||
Phase 1: 前端 Prototype ✅ 100% 完成
|
||
Phase 2: 後端重寫 (.NET) 🔧 80% 完成
|
||
Phase 3: 前後端整合 ⏳ 待開始
|
||
Phase 4: 測試與部署 ⏳ 待開始
|
||
```
|
||
|
||
## 🎨 前端預覽
|
||
|
||
瀏覽器打開：http://localhost:3001
|
||
|
||
### 主要頁面：
|
||
- `/` - 產品首頁
|
||
- `/dashboard` - 學習儀表板
|
||
- `/flashcards` - 詞卡管理
|
||
- `/learn` - 智能學習模式
|
||
- `/generate` - AI 詞卡生成
|
||
|
||
## 🔧 開發者指南
|
||
|
||
### 文檔位置
|
||
- **後端開發計劃**: `docs/03_development/api/backend-development-plan.md`
|
||
- **專案結構**: `docs/03_development/setup/folder-structure.md`
|
||
- **.NET 重寫計劃**: `docs/03_development/dotnet-rewrite-plan.md`
|
||
|
||
### 技術亮點
|
||
- 🚀 **性能**: .NET Core 比 Node.js 快 30-50%
|
||
- 🛡️ **型別安全**: C# 強型別系統
|
||
- 🏢 **企業級**: 成熟的架構和工具鏈
|
||
- 🔧 **維護性**: 清晰的專案結構
|
||
|
||
---
|
||
|
||
> **注意**: 目前正在從 Next.js API Routes 重寫為 .NET Core Web API，以獲得更好的性能和維護性。 |