| 4.1 การออกแบบผังงาน (Flow Diagram) ตามความต้องการของผู้ใช้ - 5 คะแนน |
| 4.1.1 |
ผังงานระบบการเข้าสู่ระบบ (Login Flow) |
1 |
|
|
|
แสดงผังงานการเข้าสู่ระบบที่มีการตรวจสอบสิทธิ์ผู้ใช้ (Authentication) และการจัดการ Session |
|
|
|
| 4.1.2 |
ผังงานกระบวนการของผู้ดูแลระบบ (Admin) |
1 |
|
|
|
แสดงการจัดการผู้ใช้, การตั้งค่าวันลา, ดูรายงานสถิติการลา |
|
|
|
| 4.1.3 |
ผังงานกระบวนการของพนักงาน (Employee) |
1 |
|
|
|
การขอลา, เลือกประเภทลา, แนบเอกสาร, ติดตามสถานะ |
|
|
|
| 4.1.4 |
ผังงานกระบวนการของหัวหน้า (Manager) |
1 |
|
|
|
ดูรายการรออนุมัติ, อนุมัติ/ปฏิเสธ, ดูประวัติการลาของทีม |
|
|
|
| 4.1.5 |
ผังงานภาพรวมของระบบ (System Overview) |
1 |
|
|
|
แสดงการเชื่อมโยง Request → Approval → Quota Update พร้อม decision points และ error handling |
|
|
|
| 4.2 การออกแบบฐานข้อมูล (Database Design) พร้อม ER-Diagram - 5 คะแนน |
| 4.2.1 |
มีการสร้างฐานข้อมูลอย่างน้อย 3 ตาราง |
1 |
|
|
|
มีอย่างน้อย 3 ตาราง (ครบ 5 ตาราง: users, leave_requests, leave_approvals, leave_quotas, leave_types) |
|
|
|
| 4.2.2 |
ตารางฐานข้อมูลมีความสัมพันธ์กันอย่างเหมาะสม |
1 |
|
|
|
Foreign Keys เชื่อมโยงตารางอย่างเหมาะสม |
|
|
|
| 4.2.3 |
เลือกใช้ประเภทข้อมูล (Data Type) เหมาะสม |
1 |
|
|
|
VARCHAR, INT, DATE, DECIMAL, ENUM |
|
|
|
| 4.2.4 |
แสดง ER-Diagram สมบูรณ์ |
1 |
|
|
|
แสดงความสัมพันธ์ 1:1, 1:M, M:M ได้อย่างถูกต้องและสมบูรณ์ |
|
|
|
| 4.2.5 |
ตั้งชื่อตารางและฟิลด์เป็นมาตรฐาน |
1 |
|
|
|
snake_case, meaningful names |
|
|
|
| 4.3 การออกแบบหน้าจอ (UI Design) - Vue 3 + Nuxt + Tailwind CSS - 5 คะแนน |
| 4.3.1 |
Admin Dashboard |
1 |
|
|
|
ออกแบบหน้าจอบริหารระบบ (Admin Dashboard) ที่ครอบคลุมการจัดการผู้ใช้ การกำหนดค่า Config ระบบ และการออกรายงานสถิติการใช้งาน |
|
|
|
| 4.3.2 |
Employee Forms |
1 |
|
|
|
ออกแบบฟอร์มสำหรับพนักงาน (Employee Forms) ที่ครอบคลุมฟอร์มขอลา การแสดงประวัติการลา และการติดตามสถานะคำขอลา |
|
|
|
| 4.3.3 |
Manager Interface |
1 |
|
|
|
ออกแบบหน้าจอสำหรับผู้บังคับบัญชา (Manager Interface) ที่ครอบคลุมการแสดงรายการคำขอลาที่รอการอนุมัติ การพิจารณาอนุมัติ/ปฏิเสธ และการดูประวัติการลาของทีม |
|
|
|
| 4.3.4 |
Main Dashboard |
1 |
|
|
|
สถิติการลา, การแจ้งเตือน, สรุปข้อมูล |
|
|
|
| 4.3.5 |
Login Screen |
1 |
|
|
|
ฟอร์ม Login พร้อม validation |
|
|
|
| 4.4 การออกแบบ RESTful API - 5 คะแนน |
| 4.4.1 |
RESTful Design |
1 |
|
|
|
ออกแบบ API ตามหลักการ RESTful Architecture โดยใช้ HTTP Methods (GET, POST, PUT, DELETE) อย่างถูกต้องตามมาตรฐานสากล |
|
|
|
| 4.4.2 |
Endpoint Naming |
1 |
|
|
|
/api/leave-requests/{id}/attachments |
|
|
|
| 4.4.3 |
HTTP Status Codes |
1 |
|
|
|
ใช้ HTTP Status Code อย่างถูกต้อง เช่น 200 (Success), 201 (Created), 400 (Bad Request), 401 (Unauthorized), 403 (Forbidden), 404 (Not Found) ตามสถานการณ์ของการดำเนินการ |
|
|
|
| 4.4.4 |
Error Handling |
1 |
|
|
|
middleware สำหรับจัดการ error |
|
|
|
| 4.4.5 |
API Security |
1 |
|
|
|
นำระบบความปลอดภัย API Security โดยใช้ JWT (JSON Web Token) สำหรับ Authentication และ Role-Based Authorization เพื่อควบคุมการเข้าถึงข้อมูล |
|
|
|
| 4.5 พัฒนาระบบ Back-end (Node.js) - 10 คะแนน |
| 4.5.1 |
API GET with Parameters |
1 |
|
|
|
GET /api/leave-requests?status=pending&user_id=123 |
|
|
|
| 4.5.2 |
API POST with Body |
1 |
|
|
|
พัฒนา API POST ที่รับข้อมูลผ่าน Request Body และมีการตรวจสอบความถูกต้องของข้อมูล (Data Validation) ก่อนบันทึกลงฐานข้อมูล |
|
|
|
| 4.5.3 |
File Upload API |
1 |
|
|
|
POST /api/attachments สำหรับใบรับรองแพทย์ |
|
|
|
| 4.5.4 |
JWT Login API |
1 |
|
|
|
/api/auth/login สร้าง JWT Token พร้อม role |
|
|
|
| 4.5.5 |
Exception Handling |
1 |
|
|
|
นำระบบจัดการข้อผิดพลาด (Exception Handling) โดยใช้โครงสร้าง try-catch ร่วมกับ Validation Middleware และการส่งคืน Error Response ที่เหมาะสม |
|
|
|
| 4.5.6 |
Response Format |
1 |
|
|
|
กำหนดรูปแบบ Response ในรูปแบบ JSON ที่มีโครงสร้างมาตรฐาน ประกอบด้วย status (สถานะ), message (ข้อความ), data (ข้อมูล) เพื่อความสม่ำเสมอ |
|
|
|
| 4.5.7 |
API Documentation |
1 |
|
|
|
จัดทำเอกสารคู่มือ API Documentation โดยใช้มาตรฐาน Swagger/OpenAPI Specification เพื่ออำนวยความสะดวกในการใช้งาน API |
|
|
|
| 4.5.8 |
Parameter Documentation |
1 |
|
|
|
มีการระบุ Parameter ทุกประเภทอย่างชัดเจน ได้แก่ Query Parameters (URL parameters), Path Parameters (route parameters), Request Body Parameters พร้อมคำอธิบายและตัวอย่าง |
|
|
|
| 4.5.9 |
Code Structure |
1 |
|
|
|
จัดโครงสร้างโค้ดตามหลักการ MVC Pattern โดยแยกไฟล์อย่างชัดเจน เช่น Routes (เส้นทาง API), Controllers (ตรรกะทางธุรกิจ), Models (จัดการข้อมูล), Middleware (การประมวลผลกลาง) |
|
|
|
| 4.5.10 |
API Security |
1 |
|
|
|
JWT verification middleware, role checking |
|
|
|
| 4.6 พัฒนาระบบ Front-end (Vue 3 + Nuxt + Tailwind CSS) - 10 คะแนน |
| 4.6.1 |
Responsive Layout |
1 |
|
|
|
ออกแบบหน้าจอแบบ Responsive Layout โดยใช้ Tailwind CSS Framework ที่สามารถปรับตัวให้เหมาะกับทุกขนาดหน้าจอ (Desktop, Tablet, Mobile) |
|
|
|
| 4.6.2 |
JWT Authentication |
1 |
|
|
|
นำระบบการยืนยันตัวตน JWT Authentication ครอบคลุม Authentication Middleware, Token Storage (บันทึก Token), และการต่ออายุ Token อัตโนมัติ (Auto-refresh) |
|
|
|
| 4.6.3 |
Role-based Login |
1 |
|
|
|
จัดการระบบ Route Protection และ Permission Management ตามบทบาทผู้ใช้ (Employee/Manager/Admin) รวมถึงการควบคุมสิทธิ์การเข้าถึงข้อมูล |
|
|
|
| 4.6.4 |
CRUD Operations |
1 |
|
|
|
พัฒนาฟังก์ชัน CRUD Operations อย่างสมบูรณ์ ครอบคลุม Create (สร้างคำขอลา), Read (อ่านข้อมูล), Update (แก้ไขข้อมูล), Delete (ลบข้อมูล) ของคำขอลา |
|
|
|
| 4.6.5 |
File Upload Component |
1 |
|
|
|
Component สำหรับใบรับรองแพทย์ |
|
|
|
| 4.6.6 |
Data Editing |
1 |
|
|
|
Edit form สำหรับคำขอลาที่ยังไม่ถูกอนุมัติ |
|
|
|
| 4.6.7 |
Delete Confirmation |
1 |
|
|
|
Confirmation modal ก่อนลบคำขอลา |
|
|
|
| 4.6.8 |
Permission-based Display |
1 |
|
|
|
แสดงข้อมูลตามสิทธิ์ผู้ใช้ (Employee/Manager/Admin) |
|
|
|
| 4.6.9 |
Search/Filter |
1 |
|
|
|
กรองตามสถานะ, วันที่, ประเภทลา |
|
|
|
| 4.6.10 |
Pagination & Validation |
1 |
|
|
|
แบ่งหน้า + Form validation + Error handling |
|
|
|
| 4.7 DevOps Integration (Docker + GitLab CI/CD) - 10 คะแนน |
| 4.7.1 |
Backend Dockerfile |
2 |
|
|
|
สร้าง Dockerfile สำหรับ Backend โดยใช้ Node.js Alpine Image และเทคนิค Multi-stage Build เพื่อลดขนาดและเพิ่มความปลอดภัย |
|
|
|
| 4.7.2 |
Frontend Dockerfile |
2 |
|
|
|
Nuxt.js build และ Nginx serve |
|
|
|
| 4.7.3 |
docker-compose |
2 |
|
|
|
จัดการไฟล์ docker-compose.yml ที่เชื่อมโยงระบบงานทั้งหมด ได้แก่ Backend Application, Frontend Application, Database Server, และ File Storage System เพื่อให้ทำงานร่วมกันเป็นระบบเดียว |
|
|
|
| 4.7.4 |
Pipeline Configuration |
2 |
|
|
|
จัดการไฟล์ .gitlab-ci.yml สำหรับ CI/CD Pipeline ที่ครอบคลุมขั้นตอน Build (Compile & Package), Test (Unit Test & Integration Test), Deploy (Deployment to Environment) อย่างสมบูรณ์ |
|
|
|
| 4.7.5 |
Auto Build/Test |
2 |
|
|
|
ตั้งค่า Automated Build & Test Pipeline ที่จะทำงานโดยอัตโนมัติเมื่อมีการ Push Code ไปยัง GitLab Repository พร้อมการสร้าง Docker Container อัตโนมัติ |
|
|
|
| - |
Core Components |
- |
|
|
|
LeaveRequestForm.vue - ฟอร์มขอลา |
|
|
|
|
LeaveRequestList.vue - รายการคำขอลา |
|
|
|
|
ApprovalPanel.vue - อนุมัติคำขอลา |
|
|
|
|
FileUpload.vue - อัปโหลดไฟล์ |
|
|
|
|
LoginForm.vue - ฟอร์มเข้าสู่ระบบ |
|
|
|
|
Dashboard.vue - หน้าหลัก |
|
|
|
|
Pagination.vue - แบ่งหน้า |
|
|
|
| รวม |
ระบบ E-Leave (ลางานออนไลน์) - Web Application |
50 |
|
คะแนนเต็ม |