🛠️ 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`	หน้าสมัครสมาชิก (อัปเดต Endpoint ถูกต้อง)
	`auth/forgot-password.vue`	`/auth/forgot..`	หน้าลืมรหัสผ่าน
	`auth/reset-password.vue`	`/auth/reset..`	หน้าตั้งรหัสใหม่
Dashboard	`dashboard/index.vue`	`/dashboard`	หน้าหลักผู้เรียน (Overall Progress, Recommend)
	`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)
Course	`course/[id].vue`	`/course/:id`	รายละเอียดคอร์ส (Enroll, Syllabus, Dynamic)
Classroom	`classroom/learning.vue`	`/classroom/lea..`	ห้องเรียนออนไลน์ (Video Player, Progress Tracking)
	`classroom/quiz.vue`	`/classroom/quiz`	ระบบสอบวัดผล (Placeholder for API integration)

2.2 `components/` (Reusable UI)

ชิ้นส่วน UI ที่ใช้ซ้ำได้บ่อย:

Layout & Navigation:
- AppHeader.vue, AppSidebar.vue: ส่วนหัวและเมนูหลัก
- LanguageSwitcher.vue: ปุ่มเปลี่ยนภาษา
- UserMenu.vue, MobileNav.vue: เมนูผู้ใช้และ Mobile Menu
Display & Content:
- CourseCard.vue: Smart Card updated link to /course/:id
- UserAvatar.vue: รูปโปรไฟล์พร้อม Fallback
Common:
- FormInput.vue: Input Field พร้อม Validation styles
- LoadingSpinner.vue, LoadingSkeleton.vue: Loading states

2.3 `composables/` (Core Logic & API)

ศูนย์รวม Logic ของระบบ (Business Logic Layer):

Composable	หน้าที่หลัก (Responsibilities)
`useAuth.ts`	Auth Management: Login (Student Only), Register (`/register-learner`), Reset PW
`useCourse.ts`	Course Management: Fetch Courses, Course Detail, Encode, Progress
`useCategory.ts`	Category Management: ดึงหมวดหมู่สำหรับ Filter
`useFormValidation.ts`	Helper สำหรับตรวจสอบความถูกต้องของฟอร์ม (RegEx validations)

🔐 3. Security & Core Systems

Middleware (middleware/auth.ts): ดักจับ Route ป้องกันไม่ให้ผู้ที่ยังไม่ล็อกอินเข้าถึง Dashboard/Classroom
API Integration:
- Base URL from runtimeConfig.public.apiBase
- Authentication headers (Bearer Token) handled in composables
Localization (i18n/):
- แยกไฟล์ภาษาชัดเจน: locales/th.json, locales/en.json
- Helper Function: getLocalizedText สำหรับเลือกภาษาจาก API Response ({ th, en })
Theming: รองรับ Dark Mode สมบูรณ์แบบ (Tailwind dark: classes + CSS Variables)

🆕 4. Recent Updates (บันทึกการอัปเดตล่าสุด)

✅ Phase 1: Authentication & UI Refactor

ย้ายระบบ Auth เข้า Module pages/auth/
Correction: อัปเดต Endpoint สมัครสมาชิกเป็น /api/auth/register-learner ให้ตรงกับ Backend
ปรับปรุง UI หน้า Register (Dark Theme Consistency)
ลบ Comments และ Code ที่ไม่ได้ใช้งานออก (Code Cleanup)

✅ Phase 2: Course Discovery & Detail

Course Detail Page (pages/course/[id].vue):
- ปรับ Layout ให้เหมือนหน้า Discovery
- แสดง Course Syllabus (Chapters & Lessons) แบบ Dynamic
- เพิ่มปุ่ม "Enroll Now" ที่ทำงานจริง เชื่อมต่อ useCourse().enrollCourse
- แก้ไข TypeScript Error ในการคำนวณลำดับบทเรียน
Discovery Page (pages/browse/discovery.vue):
- อัปเดตการ์ดคอร์สให้ลิงก์ไปยังหน้ารายละเอียดคอร์ส (/course/:id) แทน Modal หรือหน้า Static
- ลบ Mock Data ออก เพื่อรองรับข้อมูลจริงจาก API

✅ Phase 3: Full Learning Experience (Current)

dashboard/index.vue:
- แก้ไขลิงก์ "View Details" ใน Recommended Courses ให้ไปที่ /course/:id ถูกต้อง
Cleanup:
- ลบ console.log ที่ไม่จำเป็น
- ทำความสะอาด Comment ในไฟล์หลัก (useAuth, useCourse, register.vue)

🔍 5. Status & Missing Integrations (ส่วนที่ต้องพัฒนาต่อ)

จากการตรวจสอบล่าสุด รายการดังต่อไปนี้ยังเป็นส่วนที่รอการพัฒนา (Pending):

Quiz System 🔴 (สำคัญมาก): หน้า classroom/quiz.vue ปัจจุบันเคลียร์ Mock Data แล้ว รอ API:
- GET /api/quizzes/:id (ดึงโจทย์)
- POST /api/quizzes/:id/submit (ส่งคำตอบ)
Dashboard Statistics: dashboard/index.vue หน้า Overview ยังอาจต้องเชื่อมต่อ API stats เพิ่มเติม (เช่น Last Access Course)
Certificates: ยังไม่มีหน้าดาวน์โหลดใบประกาศ
Reviews & Ratings: การแสดงดาวและคอมเมนต์ยังเป็น Static Data หรือ Placeholder
Profile Image Upload: ระบบแก้ไขโปรไฟล์ยังไม่รองรับการอัปโหลดรูปภาพจริง (ปัจจุบันแก้ได้แค่ Text Data)

9.6 KiB Raw Blame History