From 2fc0fb7a760e0f6d94acc6af37346099a2870a7c Mon Sep 17 00:00:00 2001 From: supalerk-ar66 Date: Thu, 22 Jan 2026 11:22:26 +0700 Subject: [PATCH] No files were provided to summarize changes from. --- Frontend-Learner/คู่มืออธิบาย/web-dev-details.md | 92 ++++++++++---------- 1 file changed, 48 insertions(+), 44 deletions(-) diff --git a/Frontend-Learner/คู่มืออธิบาย/web-dev-details.md b/Frontend-Learner/คู่มืออธิบาย/web-dev-details.md index bb72cd7e..3cee0780 100644 --- a/Frontend-Learner/คู่มืออธิบาย/web-dev-details.md +++ b/Frontend-Learner/คู่มืออธิบาย/web-dev-details.md @@ -35,53 +35,57 @@ | :------------ | :---------------------------- | :----------------- | :----------------------------------------------------- | | **Landing** | `index.vue` | `/` | หน้าแรกบุคคลทั่วไป (Hero Section, Features) | | **Auth** | `auth/login.vue` | `/auth/login` | หน้าเข้าสู่ระบบ | -| | `auth/register.vue` | `/auth/register` | หน้าสมัครสมาชิก | +| | `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) | +| **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) | -| | `browse/opencovery.vue` | `/browse/open..` | หน้ารายละเอียดคอร์ส (Public View) | +| **Course** | `course/[id].vue` | `/course/:id` | **รายละเอียดคอร์ส** (Enroll, Syllabus, Dynamic) | | **Classroom** | `classroom/learning.vue` | `/classroom/lea..` | **ห้องเรียนออนไลน์** (Video Player, Progress Tracking) | -| | `classroom/quiz.vue` | `/classroom/quiz` | ระบบสอบวัดผล | +| | `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` + - `AppHeader.vue`, `AppSidebar.vue`: ส่วนหัวและเมนูหลัก + - `LanguageSwitcher.vue`: ปุ่มเปลี่ยนภาษา + - `UserMenu.vue`, `MobileNav.vue`: เมนูผู้ใช้และ Mobile Menu - **Display & Content:** - - `CourseCard.vue`: **Smart Card** รองรับสถานะ (ทั่วไป / ลงทะเบียนแล้ว / เรียนจบ) + - `CourseCard.vue`: **Smart Card** updated link to `/course/:id` - `UserAvatar.vue`: รูปโปรไฟล์พร้อม Fallback -- **Feedback & Loading:** - - `LoadingSpinner.vue`, `LoadingSkeleton.vue` +- **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` | จัดการ Login, Register, Logout และเก็บ State ผู้ใช้ | -| `useCourse.ts` | **Course Management:** ค้นหา, ลงทะเบียน, ดึงเนื้อหาบทเรียน, บันทึก Progress | -| `useCategory.ts` | **Category Management:** ดึงหมวดหมู่สำหรับ Filter | -| `useFormValidation.ts` | Helper สำหรับตรวจสอบความถูกต้องของฟอร์ม | +| 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 +- **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` - - ใช้ `$t('key')` ใน Template ทั้งหมด -- **Theming:** รองรับ Dark Mode สมบูรณ์แบบด้วย Tailwind `dark:` classes และ CSS Variables + - Helper Function: `getLocalizedText` สำหรับเลือกภาษาจาก API Response (`{ th, en }`) +- **Theming:** รองรับ Dark Mode สมบูรณ์แบบ (Tailwind `dark:` classes + CSS Variables) --- @@ -89,42 +93,42 @@ ### ✅ Phase 1: Authentication & UI Refactor -- ย้ายระบบ Auth ทั้งหมดเข้า Module `pages/auth/` -- ปรับปรุง UI หน้า Dashboard และ Landing Page -- ติดตั้งระบบ **i18n** รองรับ 2 ภาษาเต็มรูปแบบ +- ย้ายระบบ Auth เข้า Module `pages/auth/` +- **Correction:** อัปเดต Endpoint สมัครสมาชิกเป็น `/api/auth/register-learner` ให้ตรงกับ Backend +- ปรับปรุง UI หน้า Register (Dark Theme Consistency) +- ลบ Comments และ Code ที่ไม่ได้ใช้งานออก (Code Cleanup) -### ✅ Phase 2: Course Discovery (Browse) +### ✅ Phase 2: Course Discovery & Detail -- เชื่อมต่อ API `/api/courses` สำหรับหน้าค้นหา -- เพิ่มระบบ Filter หมวดหมู่ (ย่อ/ขยายได้) และ Search Real-time -- ปรับปรุงการ์ดแสดงผลคอร์สให้รองรับข้อมูลจริงจาก Backend +- **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 & Refinement (Current) +### ✅ Phase 3: Full Learning Experience (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) แจ้งเตือนภาษาไทยถูกต้อง +- **dashboard/index.vue:** + - แก้ไขลิงก์ "View Details" ใน Recommended Courses ให้ไปที่ `/course/:id` ถูกต้อง +- **Cleanup:** + - ลบ `console.log` ที่ไม่จำเป็น + - ทำความสะอาด Comment ในไฟล์หลัก (`useAuth`, `useCourse`, `register.vue`) --- ## 🔍 5. Status & Missing Integrations (ส่วนที่ต้องพัฒนาต่อ) -จากการตรวจสอบล่าสุด รายการดังต่อไปนี้ยังไม่ถูกเชื่อมต่อกับ Backend (Mockup/Partial): +จากการตรวจสอบล่าสุด รายการดังต่อไปนี้ยังเป็นส่วนที่รอการพัฒนา (Pending): -1. **Quiz System 🔴 (สำคัญมาก):** หน้า `classroom/quiz.vue` ยังเป็น Mockup ทั้งหมด ขาด API: +1. **Quiz System 🔴 (สำคัญมาก):** หน้า `classroom/quiz.vue` ปัจจุบันเคลียร์ Mock Data แล้ว รอ API: - `GET /api/quizzes/:id` (ดึงโจทย์) - `POST /api/quizzes/:id/submit` (ส่งคำตอบ) -2. **Certificates:** ยังไม่มีหน้าดาวน์โหลดใบประกาศ -3. **Reviews & Ratings:** การแสดงดาวและคอมเมนต์ยังเป็น Static Data -4. **File Upload:** ระบบแก้ไขโปรไฟล์ยังไม่รองรับการอัปโหลดรูปภาพจริง +2. **Dashboard Statistics:** `dashboard/index.vue` หน้า Overview ยังอาจต้องเชื่อมต่อ API stats เพิ่มเติม (เช่น Last Access Course) +3. **Certificates:** ยังไม่มีหน้าดาวน์โหลดใบประกาศ +4. **Reviews & Ratings:** การแสดงดาวและคอมเมนต์ยังเป็น Static Data หรือ Placeholder +5. **Profile Image Upload:** ระบบแก้ไขโปรไฟล์ยังไม่รองรับการอัปโหลดรูปภาพจริง (ปัจจุบันแก้ได้แค่ Text Data) --- -