🛠️ Web Development Documentation: e-Learning Platform (Frontend)

เอกสารฉบับนี้สรุปรายละเอียดทางเทคนิค โครงสร้างโค้ด และการทำงานของระบบ Frontend-Learner เพื่อความสะดวกในการพัฒนาต่อและส่งมอบงาน

🚀 1. Tech Stack & Tools

เครื่องมือและเทคโนโลยีหลักที่ใช้ในการพัฒนาระบบ:

Core Framework: Nuxt 3 (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):

Quiz System 🔴 (สำคัญมาก): หน้า classroom/quiz.vue ยังเป็น Mockup ทั้งหมด ขาด API:
- GET /api/quizzes/:id (ดึงโจทย์)
- POST /api/quizzes/:id/submit (ส่งคำตอบ)
Certificates: ยังไม่มีหน้าดาวน์โหลดใบประกาศ
Reviews & Ratings: การแสดงดาวและคอมเมนต์ยังเป็น Static Data
File Upload: ระบบแก้ไขโปรไฟล์ยังไม่รองรับการอัปโหลดรูปภาพจริง

9.3 KiB Raw Blame History