elearning/Frontend-Learner/คู่มืออธิบาย/summary.md

สรุปโครงสร้างและหน้าที่ของไฟล์ (File Architecture Summary)

เอกสารนี้สรุปภาพรวมของแต่ละโฟลเดอร์และไฟล์หลักในระบบ Frontend-Learner ว่าแต่ละไฟล์ทำหน้าที่อะไร และมีการเชื่อมโยง (Dependencies) กันอย่างไร

---

1. 📂 หน้าจอหลัก (Pages Directory: pages/)

ควบคุมการทำงานและการนำทาง (Routing) ของผู้ใช้งานแต่ละหน้า โดยจะเรียกใช้ components/ และ composables/ มาทำงานร่วมกัน

• pages/index.vue (หน้า Landing Page):
  • หน้าที่: หน้าแรกสุดของระบบสำหรับผู้เยี่ยมชม นำเสนอคอร์สเด่น รายละเอียดสถิติ และรีวิวล่าสุด โดยดึงข้อมูลจริงจาก API (Dynamic Data) ขับเคลื่อน UI ทันสมัย
  • การเชื่อมโยง: ใช้ Layout landing, เชื่อมต่อ useCourse, useCategory และ components พื้นฐานเช่น CourseCard, LandingHeader, LandingFooter, StarIcon, และ NuxtTime
• pages/auth/ (กลุ่มหน้าเข้าสู่ระบบและสมัครสมาชิก):
  • login.vue: หน้าเข้าสู่ระบบ (เชื่อม useAuth -> login())
  • register.vue: หน้าลงทะเบียนผู้ใช้ใหม่ (เชื่อม useAuth -> register())
  • forgot-password.vue: หน้าลืมรหัสผ่าน
  • การเชื่อมโยง: กลุ่มนี้ใช้ Layout auth และ useFormValidation เพื่อตรวจสอบฟอร์ม
• pages/dashboard/ (กลุ่มหน้าแผงควบคุมหลักของผู้ใช้):
  • index.vue: หน้า Dashboard หลัก แสดงคอร์สที่กำลังเรียนและคอร์สแนะนำ
  • my-courses.vue: หน้าแสดงคอร์สทั้งหมดที่ผู้เรียนลงทะเบียนแล้ว
  • profile.vue: หน้าจัดการข้อมูลส่วนตัวของผู้ใช้งาน
  • announcements.vue: หน้าแสดงประกาศระบบและประกาศจากคอร์ส
  • การเชื่อมโยง: ใช้ Layout default, เชื่อม useAuth, useCourse, และ components โซน layout/ กับ course/
• pages/classroom/ (กลุ่มหน้าห้องเรียนเมื่อเข้าสู่คอร์ส):
  • learning.vue: หน้าจอหลักของการเรียน (มี Video Player เนื้อหาบทเรียน และคอมเมนต์) ควบคุมสถานะความคืบหน้า (Progress)
  • quiz.vue: หน้า Landing ก่อนเริ่มทำแบบทดสอบ แสดงรายละเอียดและสถิติ
  • การเชื่อมโยง: เชี่อมต่อ useCourse, useQuizRunner และเรียกใช้คอมโพเนนต์กลุ่ม classroom/
• pages/quiz/[id].vue (หน้าจอขณะทำข้อสอบ):
  • หน้าที่: นำเสนอตัวคำถามแบบ Interactive และตัวเลือกการตอบ (ข้อความ, ตัวเลือกเดี่ยว, หลายตัวเลือก)
  • การเชื่อมโยง: เชื่อมกับตัวจัดการสถานะ useQuizRunner หนักที่สุด
• pages/course/[id].vue (หน้ารายละเอียดคอร์สก่อนซื้อ/ลงทะเบียน):
  • การเชื่อมโยง: เชื่อมต้อ useCourse เพื่อดึงรายละเอียดแบบ SSR (Server-Side Rendering)

---

2. 🧩 ตัวจัดการข้อมูล (Composables Directory: composables/)

เปรียบเสมือน "สมอง" ของระบบ แยกการจัดการข้อมูล (State) และการเรียก API (Fetch) ออกจากหน้าจอ (UI)

• useAuth.ts:
  • หน้าที่: จัดการ Login, Register, Request Reset Password, อัปโหลดรูปโปรไฟล์ (Avatar), ระบบ Token (มีกลไก Refresh Token อัตโนมัติเมื่อพบ 401), และดึง/อัปเดตข้อมูลผู้ใช้
  • ถูกเรียกใช้โดย: แทบทุกหน้าจอและ middleware/auth.ts
• useCourse.ts:
  • หน้าที่: ศูนย์รวม API คอร์สเรียน (ดึงรายการคอร์ส, รายละเอียด, รายชื่อบทเรียน, การลงทะเบียน, ส่งความคืบหน้า, โหลดหน้าวิดีโอ)
  • ถูกเรียกใช้โดย: pages/dashboard/, pages/classroom/, pages/course/ และคอมโพเนนต์ที่แสดงรายการคอร์ส
• useQuizRunner.ts:
  • หน้าที่: จัดการสถานะข้อสอบขณะรัน (Current Question), เก็บคำตอบ, ข้ามคำถาม, บันทึกส่งคะแนนเมื่อจบเกม
  • ถูกเรียกใช้โดย: pages/quiz/[id].vue และ pages/classroom/quiz.vue
• useCategory.ts: ดึงหมวดหมู่หลักสูตร นำไปใช้ทำ Filter ใน index.vue และ my-courses.vue
• useThemeMode.ts: จัดการโหมดสว่าง-มืด (Dark/Light mode) บันทึกและซิงค์กับ LocalStorage
• useFormValidation.ts: ดักจับ Error และ Validate กฎ (Rules) ต่างๆ ในฟอร์มรหัสผ่าน, สมัครสมาชิก
• useNavItems.ts: จัดการรายการเมนูด้านซ้าย (Sidebar Links) เปลี่ยนเมนูตาม Role อัตโนมัติ

---

3. 📦 คอมโพเนนต์หน้าจอ (Components Directory: components/)

ส่วนประกอบของ UI ที่สามารถนำไปใช้ซ้ำได้ (Reusable) เพื่อลดความซ้ำซ้อนในโค้ดฝั่งหน้าจอ

• layout/:
  • AppHeader.vue & AppSidebar.vue: ประกอบร่างเป็นเมนูและส่วนหัวของ Layout default
  • LandingHeader.vue & LandingFooter.vue: เมนูส่วนหน้าของเว็บ Guest
• classroom/:
  • VideoPlayer.vue: ตัวเล่นวิดีโออัจฉริยะ (จัดการ Youtube API และ Native Video) ส่งเวลาดูคืนหน้า learning.vue เสมอ
  • CurriculumSidebar.vue: แถบขวาในห้องเรียนเพื่อกดเปลี่ยนบทเรียน แสดงสถานะล็อก/ผ่าน/กำลังเรียน
  • AnnouncementModal.vue: เด้ง Pop-up แจ้งข่าวสารในคอร์สเรียน
• course/:
  • CourseCard.vue: การ์ดสี่เหลี่ยมแสดงหน้าปกคอร์ส (ถูกใช้ใน index.vue และ my-courses.vue)
• profile/:
  • แบบฟอร์มแก้ไขแยกย่อยของหน้า profile.vue เช่น ฟอร์มเปลี่ยนรหัส (PasswordChangeForm)
• common/:
  • คอมโพเนนต์จิปาถะทั่วไปที่ใช้ทุกที่ เช่น สวิตช์เปลี่ยนภาษา (LanguageSwitcher) สปินเนอร์โหลดของระบบ (GlobalLoader.vue)

---

4. 🖼 โครงสร้างเลย์เอาต์ (Layouts Directory: layouts/)

เป็นตัวคลุม (Wrapper) พื้นโครงสร้างเว็บของหน้าจอนั้นๆ ไม่ให้กระตุกเมื่อเปลี่ยนเนื้อหา

• default.vue: เลย์เอาต์หลัก มี Header และ Sidebar ใช้สำหรับ Dashboard
• auth.vue: เลย์เอาต์เรียบง่ายตรงกลางจอ มีพื้นหลังเบลอๆ สำหรับหน้า Login/Register
• landing.vue: เลย์เอาต์สำหรับหน้า index.vue เต็มจอแบบ Modern นำเสนอผลิตภัณฑ์
• dashboard.vue: เลย์เอาต์สำหรับมุมมอง Dashboard บางชนิด (ขึ้นอยู่กับโปรเจกต์)

---

5. 🛡 ตัวกรองหน้าและยามรักษาความปลอดภัย (Middleware: middleware/)

• auth.ts: ตรวจสอบผู้ใช้ก่อนเข้าหน้าใดๆ เสมอ (Route Guard)
  • ถ้ายังไม่ Login จะถูกดีดไปหน้า /auth/login
  • ถ้าจะเข้าหน้า Login แต่มี Token ล็อกอินแล้ว จะผลักกลับไปหน้า /dashboard
  • มันจะพึ่งพา Token ที่จัดการผ่าน useAuth

---

ภาพรวมการหมุนเวียนข้อมูล (Data Flow Example)

1. ล็อกอินและจัดการ Session: หน้า login.vue กดยืนยัน -> เรียก useAuth.login() -> ได้ Token และรายละเอียดผู้ใช้ยัดลง Cookie -> หากดึงโปรไฟล์แล้ว API หมดอายุ (401) ระบบจะเรียก refreshAccessToken() อัตโนมัติเพื่อใช้ต่อ
2. เข้าห้องเรียน: หน้า index.vue กดคอร์ส -> ส่งเข้า middleware/auth.ts เช็คผ่านเข้าหน้าเรียน -> pages/course/[id].vue เรียก useCourse.fetchCourseById(id) -> ส่งข้อมูลให้ UI
3. เปิดคลิปเรียน: learning.vue ส่ง URL ให้ <VideoPlayer /> เล่น
4. บันทึกเวลาเรียน: VideoPlayer เฝ้าดูเวลา (TimeUpdate) -> รายงานตัวเลขกลับมายังบัญชีผู้ใช้ใน learning.vue -> เรียก useCourse.saveVideoProgress() ส่ง API กลับ Database พร้อมเช็คสถานะเนื้อหาว่าสำเร็จหรือไม่