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

วันที่บันทึกปฏิบัติงาน * 18/02/2026

องค์ความรู้ที่ได้รับ *

• การใช้งาน Nuxt 3 Routing (useRoute, useRouter) ในการจัดการ Query Parameters
• การเชื่อมโยง State กับ URL เพื่อสร้าง Deep Linking ให้แชร์ลิงก์หมวดหมู่ได้
• การใช้งาน Vue 3 Composition API (Script Setup) แทน Options API เพื่อความเป็นระเบียบและลดความซับซ้อน
• การตกแต่ง UI ด้วย Tailwind CSS ขั้นสูง (Gradients, Glow Effects, Backdrop Filters) เพื่อให้ได้ธีม Premium/Clean
• การจัดการ Event Listener ใน Vue Component (onMounted, onUnmounted) เพื่อป้องกัน Memory Leak

รายละเอียด *

• พัฒนาระบบ Filter หมวดหมู่คอร์สเรียน เชื่อมโยงหน้าแรก (Home) กับหน้าค้นหา (Browse)
• ปรับแก้โครงสร้าง Code ในหน้า index.vue ให้ใช้ Script Setup ทั้งหมดเพื่อลดความซับซ้อนและแก้ปัญหาการเรียกใช้ตัวแปร
• ปรับดีไซน์ส่วน Call to Action (CTA) ในหน้า browse/index.vue และ browse/recommended.vue ให้ดูสว่างและทันสมัยขึ้นโดยใช้แสงและเงา (Blue Glow)

ปัญหาและอุปสรรค *

• พบปัญหาการทำงานร่วมกันระหว่าง Options API และ Script Setup ในไฟล์ index.vue ทำให้ฟังก์ชันบางตัวเรียกใช้ไม่ได้
• ระบบ Filter เดิมไม่ทำงานเมื่อกดย้อนกลับ (Back Button) เนื่องจากไม่ได้ Watch การเปลี่ยนแปลงของ URL Query
• การดึงข้อมูลคอร์สเริ่มต้นได้ไม่ครบเนื่องจาก API มีการกำหนด Limit ไว้

รายละเอียด *

• แก้ไขโดยการยุบรวม Code ทั้งหมดให้เป็นรูปแบบ Script Setup มาตรฐานเดียว
• เพิ่ม watch(() => route.query.category) ในหน้า Browse เพื่อให้อัปเดตข้อมูลทุกครั้งที่ URL เปลี่ยน
• เพิ่มพารามิเตอร์ limit: 1000 ในการเรียก API เพื่อดึงข้อมูลคอร์สทั้งหมดมาแสดง

หลักฐานการปฏิบัติงาน (เฉพาะไฟล์ JPG, JPEG, PNG, PDF.)

• แก้ไขไฟล์ pages/index.vue (เพิ่ม goBrowse, ย้าย Logic)
• แก้ไขไฟล์ pages/browse/index.vue (เพิ่ม Query Watcher, ปรับ UI)
• แก้ไขไฟล์ pages/browse/recommended.vue (ปรับ UI ส่วน CTA)
• แก้ไขไฟล์ components/layout/LandingHeader.vue (แก้ Memory Leak)

---

วันที่บันทึกปฏิบัติงาน * 19/02/2026

องค์ความรู้ที่ได้รับ *

• การออกแบบ Dashboard Layout แบบ Modern Grid (SkillLane Style/Reference Style)
• การใช้ q-carousel (Quasar) ทำ Image Slider แบนเนอร์ประชาสัมพันธ์
• การจัดการแสดงผลข้อมูล Course Card แยกตามสถานะ (Enrolled/Recommended/Free)
• การปรับแต่ง Menu Navigation (useNavItems) เพื่อลดความซ้ำซ้อนใน Sidebar

รายละเอียด *

• ออกแบบและพัฒนาหน้า Dashboard ใหม่ (pages/dashboard/index.vue)
  1. เพิ่ม Banner Slide ขนาดใหญ่ด้านบน
  2. แสดงรายการ "คอร์สที่คุณกำลังเรียน" (In Progress Courses) พร้อม Progress Bar
  3. แสดงรายการ "คอร์สแนะนำ" (Recommended Courses)
  4. เพิ่มหมวด "คอร์สฟรี" (Free Courses)
• ปรับแต่ง Sidebar Navigation (composables/useNavItems.ts) ลบเมนูที่ไม่จำเป็นออก (Online Courses, Recommended, Announcements) ให้เหลือเฉพาะเมนูหลัก

ปัญหาและอุปสรรค *

• การแสดงผล Carousel มีปุ่ม Arrows เกะกะสายตาบนแบนเนอร์
• ต้องการแยกข้อมูลคอร์สฟรีออกจากคอร์สทั่วไป แต่ API ยังไม่มี Filter โดยตรง

รายละเอียด *

• แก้ไข Property ของ q-carousel โดยลบ arrows ออก เพื่อให้เหลือเฉพาะ Navigation Dots ด้านล่าง
• เขียน Logic กรองข้อมูลฝั่ง Client (Client-side filtering) สำหรับคอร์สฟรี โดยตรวจสอบจาก price === 0 หรือ is_free: true

หลักฐานการปฏิบัติงาน (เฉพาะไฟล์ JPG, JPEG, PNG, PDF.)

• แก้ไขไฟล์ pages/dashboard/index.vue (New Dashboard UI)
• แก้ไขไฟล์ composables/useNavItems.ts (Clean Sidebar)