chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

No files were provided to summarize changes from.

Browse source
This commit is contained in:
supalerk-ar66 2026-01-22 11:22:26 +07:00
parent 7b22699b13
commit 2fc0fb7a76
1 changed files with 48 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

92
Frontend-Learner/คู่มืออธิบาย/web-dev-details.md
View file

@ -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)
---