130 lines
9.3 KiB
Markdown
130 lines
9.3 KiB
Markdown
# 🛠️ Web Development Documentation: e-Learning Platform (Frontend)
|
|
|
|
เอกสารฉบับนี้สรุปรายละเอียดทางเทคนิค โครงสร้างโค้ด และการทำงานของระบบ **Frontend-Learner** เพื่อความสะดวกในการพัฒนาต่อและส่งมอบงาน
|
|
|
|
---
|
|
|
|
## 🚀 1. Tech Stack & Tools
|
|
|
|
เครื่องมือและเทคโนโลยีหลักที่ใช้ในการพัฒนาระบบ:
|
|
|
|
- **Core Framework:** [Nuxt 3](https://nuxt.com) (Vue 3 Composition API)
|
|
- **Language:** TypeScript `^5.0`
|
|
- **Styling Engine:**
|
|
- **Tailwind CSS:** สำหรับ Utility classes ส่วนใหญ่
|
|
- **Vanilla CSS / CSS Variables:** สำหรับ Design Tokens และ Theming (Dark/Light mode)
|
|
- **State Management:**
|
|
- `ref`, `reactive` (Local Component State)
|
|
- `Composables` (Global State Logic)
|
|
- **Internationalization:** `@nuxtjs/i18n` (รองรับภาษา TH / EN)
|
|
- **UI Architecture:**
|
|
- **Atomic Design-ish:** แยก Components เป็นส่วนย่อยที่นำกลับมาใช้ใหม่ได้
|
|
- **Slots & Props:** ออกแบบให้ยืดหยุ่นสูง
|
|
|
|
---
|
|
|
|
## 📂 2. Project Structure (โครงสร้างไฟล์)
|
|
|
|
โครงสร้างโฟลเดอร์ถูกจัดระเบียบตามหน้าที่การทำงาน (Feature-based grouping):
|
|
|
|
### 2.1 `pages/` (Application Routes)
|
|
|
|
กำหนดเส้นทาง URL ของเว็บไซต์:
|
|
|
|
| Module | ไฟล์ (File) | Path URL | หน้าที่ (Description) |
|
|
| :------------ | :---------------------------- | :----------------- | :----------------------------------------------------- |
|
|
| **Landing** | `index.vue` | `/` | หน้าแรกบุคคลทั่วไป (Hero Section, Features) |
|
|
| **Auth** | `auth/login.vue` | `/auth/login` | หน้าเข้าสู่ระบบ |
|
|
| | `auth/register.vue` | `/auth/register` | หน้าสมัครสมาชิก |
|
|
| | `auth/forgot-password.vue` | `/auth/forgot..` | หน้าลืมรหัสผ่าน |
|
|
| | `auth/reset-password.vue` | `/auth/reset..` | หน้าตั้งรหัสใหม่ |
|
|
| **Dashboard** | `dashboard/index.vue` | `/dashboard` | หน้าหลักผู้เรียน (Overall Progress) |
|
|
| | `dashboard/my-courses.vue` | `/dashboard/my..` | **คอร์สของฉัน** (ดึงข้อมูลจริงจาก API) |
|
|
| | `dashboard/profile.vue` | `/dashboard/pro..` | หน้าแก้ไขข้อมูลส่วนตัว |
|
|
| | `dashboard/announcements.vue` | `/dashboard/ann..` | หน้าประกาศข่าวสาร |
|
|
| **Catalog** | `browse/index.vue` | `/browse` | หน้ารวมคอร์สแบบ Public |
|
|
| | `browse/discovery.vue` | `/browse/disc..` | **หน้าค้นหาคอร์ส** (Filter, Search, API Integration) |
|
|
| | `browse/opencovery.vue` | `/browse/open..` | หน้ารายละเอียดคอร์ส (Public View) |
|
|
| **Classroom** | `classroom/learning.vue` | `/classroom/lea..` | **ห้องเรียนออนไลน์** (Video Player, Progress Tracking) |
|
|
| | `classroom/quiz.vue` | `/classroom/quiz` | ระบบสอบวัดผล |
|
|
|
|
### 2.2 `components/` (Reusable UI)
|
|
|
|
ชิ้นส่วน UI ที่ใช้ซ้ำได้บ่อย:
|
|
|
|
- **Layout & Navigation:**
|
|
- `AppHeader.vue`, `AppSidebar.vue` (ส่วนหัวและเมนูหลัก)
|
|
- `LanguageSwitcher.vue` (ปุ่มเปลี่ยนภาษา)
|
|
- `UserMenu.vue`, `MobileNav.vue`
|
|
- **Display & Content:**
|
|
- `CourseCard.vue`: **Smart Card** รองรับสถานะ (ทั่วไป / ลงทะเบียนแล้ว / เรียนจบ)
|
|
- `UserAvatar.vue`: รูปโปรไฟล์พร้อม Fallback
|
|
- **Feedback & Loading:**
|
|
- `LoadingSpinner.vue`, `LoadingSkeleton.vue`
|
|
|
|
### 2.3 `composables/` (Core Logic & API)
|
|
|
|
ศูนย์รวม Logic ของระบบ (Business Logic Layer):
|
|
|
|
| Composable | หน้าที่หลัก (Responsibilities) |
|
|
| :--------------------- | :-------------------------------------------------------------------------- |
|
|
| `useAuth.ts` | จัดการ Login, Register, Logout และเก็บ State ผู้ใช้ |
|
|
| `useCourse.ts` | **Course Management:** ค้นหา, ลงทะเบียน, ดึงเนื้อหาบทเรียน, บันทึก Progress |
|
|
| `useCategory.ts` | **Category Management:** ดึงหมวดหมู่สำหรับ Filter |
|
|
| `useFormValidation.ts` | Helper สำหรับตรวจสอบความถูกต้องของฟอร์ม |
|
|
|
|
---
|
|
|
|
## 🔐 3. Security & Core Systems
|
|
|
|
- **Middleware (`middleware/auth.ts`):** ดักจับ Route ป้องกันไม่ให้ผู้ที่ยังไม่ล็อกอินเข้าถึงหน้า Dashboard/Classroom
|
|
- **Localization (`i18n/`):**
|
|
- แยกไฟล์ภาษาชัดเจน: `locales/th.json`, `locales/en.json`
|
|
- ใช้ `$t('key')` ใน Template ทั้งหมด
|
|
- **Theming:** รองรับ Dark Mode สมบูรณ์แบบด้วย Tailwind `dark:` classes และ CSS Variables
|
|
|
|
---
|
|
|
|
## 🆕 4. Recent Updates (บันทึกการอัปเดตล่าสุด)
|
|
|
|
### ✅ Phase 1: Authentication & UI Refactor
|
|
|
|
- ย้ายระบบ Auth ทั้งหมดเข้า Module `pages/auth/`
|
|
- ปรับปรุง UI หน้า Dashboard และ Landing Page
|
|
- ติดตั้งระบบ **i18n** รองรับ 2 ภาษาเต็มรูปแบบ
|
|
|
|
### ✅ Phase 2: Course Discovery (Browse)
|
|
|
|
- เชื่อมต่อ API `/api/courses` สำหรับหน้าค้นหา
|
|
- เพิ่มระบบ Filter หมวดหมู่ (ย่อ/ขยายได้) และ Search Real-time
|
|
- ปรับปรุงการ์ดแสดงผลคอร์สให้รองรับข้อมูลจริงจาก Backend
|
|
|
|
### ✅ Phase 3: Full Learning Experience & Refinement (Current)
|
|
|
|
- **Classroom Integration (`learning.vue`):**
|
|
- เปลี่ยนจาก Mock Data เป็น **Real API Data**
|
|
- **Video Player:** เล่นวิดีโอจาก URL จริง
|
|
- **Feature:**
|
|
- 🔒 **Locking:** ล็อกบทเรียนที่ยังเรียนไม่ได้
|
|
- 💾 **Progress:** บันทึกเวลาเรียนอัตโนมัติทุก 10 วินาที
|
|
- ✅ **Auto-Complete:** จบบทเรียนอัตโนมัติเมื่อดูวิดีโอจบ
|
|
- **API Expansion:** เพิ่ม Endpoints ครบวงจรใน `useCourse.ts` (`fetchLesson`, `saveProgress`, `enroll`)
|
|
- **System Stability & Features:**
|
|
- 🔄 **Category Filtering:** ใช้งานได้จริง เลือก Filter ได้หลายหมวดหมู่พร้อมกัน
|
|
- 🛠️ **Error Handling:** จัดการ Case ลงทะเบียนซ้ำ (409 Conflict) แจ้งเตือนภาษาไทยถูกต้อง
|
|
|
|
---
|
|
|
|
## 🔍 5. Status & Missing Integrations (ส่วนที่ต้องพัฒนาต่อ)
|
|
|
|
จากการตรวจสอบล่าสุด รายการดังต่อไปนี้ยังไม่ถูกเชื่อมต่อกับ Backend (Mockup/Partial):
|
|
|
|
1. **Quiz System 🔴 (สำคัญมาก):** หน้า `classroom/quiz.vue` ยังเป็น Mockup ทั้งหมด ขาด API:
|
|
- `GET /api/quizzes/:id` (ดึงโจทย์)
|
|
- `POST /api/quizzes/:id/submit` (ส่งคำตอบ)
|
|
2. **Certificates:** ยังไม่มีหน้าดาวน์โหลดใบประกาศ
|
|
3. **Reviews & Ratings:** การแสดงดาวและคอมเมนต์ยังเป็น Static Data
|
|
4. **File Upload:** ระบบแก้ไขโปรไฟล์ยังไม่รองรับการอัปโหลดรูปภาพจริง
|
|
|
|
---
|
|
|