เกณฑ์การตรวจงาน: ระบบ E-Leave (ลางานออนไลน์)

สรุปคะแนนรวม

50 คะแนน (100%)

📊 สรุปคะแนน

หัวข้อ	คะแนนเต็ม	เปอร์เซ็นต์
1. การออกแบบผังงาน (Flow Diagram)	5	10%
2. การออกแบบฐานข้อมูล (Database Design)	5	10%
3. การออกแบบหน้าจอ (UI Design)	5	10%
4. การออกแบบ RESTful API	5	10%
5. พัฒนาระบบ Back-end	10	20%
6. พัฒนาระบบ Front-end	10	20%
7. DevOps Integration	10	20%
รวม	50	100%

🔄 1. การออกแบบผังงาน (Flow Diagram) - 5 คะแนน

เกณฑ์การให้คะแนน

รายการ	คำอธิบาย	คะแนน
Login Flow	แสดงกระบวนการ Login สำหรับพนักงาน และหัวหน้า พร้อม JWT Token validation	1
Admin Flow	จัดการผู้ใช้, การตั้งค่าวันลา, ดูรายงานสถิติการลา	1
Employee Flow	การขอลา, เลือกประเภทลา, แนบเอกสาร, ติดตามสถานะ	1
Manager Flow	ดูรายการรออนุมัติ, อนุมัติ/ปฏิเสธ, ดูประวัติการลาของทีม	1
System Overview	Request → Approval → Quota Update	1

รายละเอียดที่ต้องมีในผังงาน:

Decision Points: จุดตัดสินใจสำหรับการตรวจสอบสิทธิ์และการอนุมัติ
Error Handling Flows: แสดงการจัดการข้อผิดพลาด (validation errors, system errors)
File Upload Process: แสดงขั้นตอนการอัปโหลดและตรวจสอบไฟล์
Notification Flow: การแจ้งเตือนเมื่อมีการอนุมัติ/ปฏิเสธคำขอลา
Quota Update Process: การอัปเดทวันลาคงเหลือหลังอนุมัติ
Role-based Access: แสดงการเข้าถึงตามสิทธิ์ผู้ใช้

            💡 หมายเหตุ: ผังงานควรแสดงการเชื่อมโยง Request → Validation → Approval → Quota Update อย่างชัดเจน พร้อมระบุ decision points และ error handling ในแต่ละขั้นตอน
        

🗄️ 2. การออกแบบฐานข้อมูล (Database Design) - 5 คะแนน

เกณฑ์การให้คะแนน

รายการ	คำอธิบาย	คะแนน
ตารางฐานข้อมูล	มีอย่างน้อย 3 ตาราง (ครบ 5 ตาราง: users, leave_requests, leave_approvals, leave_quotas, leave_types)	1
ความสัมพันธ์	Foreign Keys เชื่อมโยงตารางอย่างเหมาะสม	1
Data Types	เลือกใช้ประเภทข้อมูลเหมาะสม (VARCHAR, INT, DATE, DECIMAL, ENUM)	1
ER-Diagram	แสดงความสัมพันธ์ 1:1, 1:M, M:M ได้อย่างถูกต้องและสมบูรณ์	1
Naming Convention	ตั้งชื่อตารางและฟิลด์เป็นมาตรฐาน (snake_case, meaningful names)	1

ตัวอย่างโครงสร้างตาราง

ตาราง	ฟิลด์หลัก
`users`	id, employee_id, username, password, name, email, role, manager_id, department_id
`leave_requests`	id, user_id, leave_type_id, start_date, end_date, days_requested, reason, attachment_path, status
`leave_approvals`	id, leave_request_id, approver_id, approved_date, status, comment
`leave_quotas`	id, user_id, leave_type_id, total_days, used_days, remaining_days, year
`leave_types`	id, type_name, max_days_per_year, requires_attachment

🎨 3. การออกแบบหน้าจอ (UI Design) - 5 คะแนน

เทคโนโลยี: Vue 3 + Nuxt + Tailwind CSS

เกณฑ์การให้คะแนน

รายละเอียดการออกแบบหน้าจอ:

Responsive Design: ใช้ Tailwind CSS utility classes สำหรับ responsive layout
Component-based Architecture: ออกแบบด้วย Vue 3 Composition API
Navigation Menu: แสดงเมนูตามสิทธิ์ผู้ใช้ (Employee/Manager/Admin)
File Upload Component: รองรับการแนบเอกสาร (PDF, Images) ขนาดไม่เกิน 5MB
Form Validation: ตรวจสอบข้อมูลแบบ real-time ด้วย VeeValidate หรือ Yup
Loading States: แสดง skeleton loading และ spinners
Toast Notifications: แจ้งเตือนผลการดำเนินการ (success, error, warning)

            🎨 Design Pattern: ใช้ Atomic Design Pattern - แยกเป็น Atoms, Molecules, Organisms, Templates, และ Pages เพื่อความยืดหยุ่นและการนำกลับมาใช้ซ้ำได้ง่าย
        

Responsive design ใช้ Tailwind CSS

Component-based architecture ด้วย Vue 3

Navigation menu ตามสิทธิ์ผู้ใช้

File upload component สำหรับแนบเอกสาร

🔗 4. การออกแบบ RESTful API - 5 คะแนน

เกณฑ์การให้คะแนน

รายการ	คำอธิบาย	คะแนน
Admin Dashboard	จัดการผู้ใช้, รายงาน, ตั้งค่าระบบ	1
Employee Forms	ฟอร์มขอลา, ประวัติการลา, สถานะคำขอ	1
Manager Interface	รายการรออนุมัติ, ประวัติทีม, อนุมัติ/ปฏิเสธ	1
Main Dashboard	สถิติการลา, การแจ้งเตือน, สรุปข้อมูล	1
Login Screen

รายการ	คำอธิบาย	คะแนน
RESTful Design	ใช้ GET, POST, PUT, DELETE อย่างเหมาะสม	1
Endpoint Naming	ชื่อ Endpoint สื่อความหมาย (`/api/leave-requests/{id}/attachments`)	1
Response Body	สอดคล้องกับ HTTP Status Code (200, 201, 400, 401, 403, 404)	1
Error Handling	รองรับกรณีเกิด Error พร้อม middleware	1
API Security	JWT Token authentication, role-based authorization	1

API Endpoints ตัวอย่าง

Method	Endpoint	Description	Auth Required	Role
GET	`/api/leave-requests`	ดูรายการคำขอลา	Yes	All
POST	`/api/leave-requests`	สร้างคำขอลาใหม่	Yes	Employee
PUT	`/api/leave-requests/{id}`	แก้ไขคำขอลา	Yes	EmployeeAdmin
DELETE	`/api/leave-requests/{id}`	ลบคำขอลา	Yes	EmployeeAdmin
POST	`/api/leave-requests/{id}/approve`	อนุมัติคำขอลา	Yes	ManagerAdmin

⚙️ 5. พัฒนาระบบ Back-end - 10 คะแนน

เทคโนโลยี: Node.js

เกณฑ์การให้คะแนน

รายการ	คำอธิบาย	คะแนน
API GET with Parameters	`GET /api/leave-requests?status=pending&user_id=123&page=1&limit=10`	1
API POST with Body	สร้างคำขอลาพร้อม validation	1
File Upload API	`POST /api/attachments` สำหรับใบรับรองแพทย์	1
JWT Login API	`/api/auth/login` สร้าง JWT Token พร้อม role information	1
Exception Handling	try-catch, validation middleware, error response	1
Response Format	JSON มี status, message, data อย่างเป็นระบบ	1
API Documentation	Swagger/OpenAPI documentation	1
Parameter Documentation	ระบุ query, path, body parameters ชัดเจน	1
Code Structure	แยกไฟล์ routes, controllers, models, middleware	1
API Security	JWT verification middleware, role checking	1

Response Format ตัวอย่าง

{
  "status": "success",
  "message": "Leave request created successfully",
  "data": {
    "request_id": 12345,
    "leave_type": "Annual Leave",
    "status": "pending"
  }
}
        

API Endpoints ที่ต้องมี

Auth (Authentication):

POST /api/auth/login - เข้าสู่ระบบและสร้าง JWT Token
POST /api/auth/logout - ออกจากระบบและลบ Token
GET /api/auth/profile - ดูข้อมูลโปรไฟล์ผู้ใช้

Leave Requests (คำขอลา):

GET /api/leave-requests - ดูรายการคำขอลา (with filters: status, user_id, date_range)
POST /api/leave-requests - สร้างคำขอลาใหม่
GET /api/leave-requests/{id} - ดูรายละเอียดคำขอลา
PUT /api/leave-requests/{id} - แก้ไขคำขอลา
DELETE /api/leave-requests/{id} - ลบคำขอลา

Approvals (การอนุมัติ):

GET /api/approvals/pending - ดูรายการรออนุมัติ
POST /api/leave-requests/{id}/approve - อนุมัติคำขอลา
POST /api/leave-requests/{id}/reject - ปฏิเสธคำขอลา

File Upload (อัปโหลดไฟล์):

POST /api/attachments - อัปโหลดใบรับรองแพทย์/เอกสารแนบ
GET /api/attachments/{filename} - ดาวน์โหลดไฟล์แนบ

Quotas (วันลาคงเหลือ):

GET /api/quotas/my-quota - ดูวันลาคงเหลือของตนเอง
GET /api/quotas/user/{userId} - ดูวันลาคงเหลือของผู้ใช้ระบุ (Manager/Admin)

💻 6. พัฒนาระบบ Front-end - 10 คะแนน

เทคโนโลยี: Vue 3 + Nuxt + Tailwind CSS

เกณฑ์การให้คะแนน

รายการ	คำอธิบาย	คะแนน
Responsive Layout	ใช้ Tailwind CSS responsive design	1
JWT Authentication	Authentication middleware, token storage, auto-refresh	1
Role-based Login	แยก Employee/Manager/Admin routes และ permissions	1
CRUD Operations	สร้าง, ดู, แก้ไข, ลบ คำขอลา	1
File Upload	Component สำหรับใบรับรองแพทย์	1
Data Editing	Edit form สำหรับคำขอลาที่ยังไม่ถูกอนุมัติ	1
Delete Confirmation	Confirmation modal ก่อนลบคำขอลา	1
Permission-based Display	แสดงข้อมูลตามสิทธิ์ผู้ใช้ (Employee/Manager/Admin)	1
Search/Filter	กรองตามสถานะ, วันที่, ประเภทลา	1
Pagination & Validation	แบ่งหน้า + Form validation + Error handling	1

Vue Components ที่ต้องมี

LeaveRequestForm.vue

ฟอร์มขอลา - รับข้อมูลการขอลา, เลือกประเภทลา, ระบุวันที่, แนบเอกสาร

LeaveRequestList.vue

รายการคำขอลา - แสดงรายการคำขอลาพร้อมสถานะ, สามารถกรองและค้นหา

ApprovalPanel.vue

Panel อนุมัติคำขอลา - สำหรับหัวหน้าและ Admin พิจารณาอนุมัติ/ปฏิเสธ

FileUpload.vue

Component อัปโหลดไฟล์ - รองรับใบรับรองแพทย์และเอกสารประกอบ

LoginForm.vue

ฟอร์มเข้าสู่ระบบ - Login พร้อม JWT authentication

Dashboard.vue

หน้า Dashboard หลัก - แสดงสถิติการลา, วันลาคงเหลือ, การแจ้งเตือน

Pagination.vue

Component แบ่งหน้า - สำหรับแสดงข้อมูลรายการยาว

Features สำคัญของระบบ Front-end:

Responsive Design: ใช้ Tailwind CSS ให้รองรับทุกขนาดหน้าจอ (Mobile, Tablet, Desktop)
JWT Authentication: Token storage, auto-refresh, route guards
Role-based Access: แยกสิทธิ์การเข้าถึงตาม Employee/Manager/Admin
Real-time Validation: Form validation แบบ real-time ก่อนส่งข้อมูล
Error Handling: Toast notifications, loading states, error messages
Search & Filter: กรองตามสถานะ, วันที่, ประเภทลา

🐳 7. DevOps Integration - 10 คะแนน

เทคโนโลยี: Docker + GitLab CI/CD

เกณฑ์การให้คะแนน

รายการ	คำอธิบาย	คะแนน
Backend Dockerfile	Node.js Alpine image, multi-stage build	2
Frontend Dockerfile	Nuxt.js build และ Nginx serve	2
docker-compose	เชื่อมโยง Backend + Frontend + Database + File Storage	2
Pipeline Config	`.gitlab-ci.yml` ครอบคลุม build, test, deploy stages	2
Auto Build/Test	Trigger เมื่อ push ไป GitLab, สร้าง container อัตโนมัติ	2

Backend Dockerfile ตัวอย่าง

FROM node:18-alpine AS builder
        docker-compose.yml ตัวอย่าง
version: '3.8'
services:
  backend:
    build: ./backend
    environment:
      - DB_HOST=database
      - DB_PORT=3306
      - DB_NAME=eleave
      - DB_USER=root
      - DB_PASSWORD=password
      - JWT_SECRET=your_secret_key_here
      - JWT_EXPIRES_IN=24h
      - UPLOAD_PATH=/app/uploads
    volumes:
      - ./uploads:/app/uploads
    ports:
      - "3000:3000"
    depends_on:
      - database
    restart: unless-stopped
  
  frontend:
    build: ./frontend
    environment:
      - API_URL=http://backend:3000
    ports:
      - "80:80"
    depends_on:
      - backend
    restart: unless-stopped
  
  database:
    image: mysql:8.0
    environment:
      - MYSQL_DATABASE=eleave
      - MYSQL_ROOT_PASSWORD=password
      - MYSQL_CHARACTER_SET_SERVER=utf8mb4
      - MYSQL_COLLATION_SERVER=utf8mb4_unicode_ci
    volumes:
      - db_data:/var/lib/mysql
      - ./init-db:/docker-entrypoint-initdb.d
    ports:
      - "3306:3306"
    restart: unless-stopped

volumes:
  db_data:
        

            DevOps Best Practices:
            Multi-stage Build: ใช้ multi-stage Dockerfile เพื่อลดขนาด image
Environment Variables: แยก configuration ออกจาก code
Volume Mounting: เก็บข้อมูลถาวรและไฟล์อัปโหลด
Health Checks: ตรวจสอบสถานะ container อัตโนมัติ
Restart Policy: Auto-restart เมื่อเกิดปัญหา
Network Isolation: แยก network ระหว่าง services

        
d
  
  database:
    image: mysql:8.0
    environment:
      - MYSQL_DATABASE=eleave
      - MYSQL_ROOT_PASSWORD=password
    volumes:
      - db_data:/var/lib/mysql

volumes:
  db_data:
        

Pipeline Stages

Stage	Description	Tools
Build	สร้าง Docker images	Docker, GitLab Registry
Test	รัน unit tests, integration tests	Jest, Mocha, Postman
Deploy	Deploy ไป test/production environment	Docker Compose, Kubernetes

📋 ตารางสรุปข้อมูลดิบสำหรับ Spreadsheet

หัวข้อ	คะแนนเต็ม	รายละเอียดสำหรับ E-Leave	เกณฑ์การให้คะแนน
การออกแบบผังงาน	5	ผังงาน Login Flow, ผู้ดูแลระบบ, พนักงาน, หัวหน้า, ภาพรวม E-Leave System	Flow Diagram ระบบลางานออนไลน์
การออกแบบฐานข้อมูล	5	ตาราง users leave_requests leave_approvals leave_quotas leave_types + ความสัมพันธ์ ER-Diagram	Database Design สำหรับระบบ E-Leave
การออกแบบหน้าจอ	5	Template Admin Dashboard, Employee Leave Form, Manager Approval, Main Dashboard, Login Screen	Vue 3 + Nuxt + Tailwind CSS
การออกแบบ RESTful API	5	API RESTful สำหรับ leave-requests approvals attachments + JWT Token authentication	E-Leave API Design
พัฒนาระบบ Back-end	10	API GET/POST สำหรับคำขอลา, API อัปโหลดใบรับรองแพทย์, API Login JWT + Exception Handling	Node.js E-Leave Backend
พัฒนาระบบ Front-end	10	Layout Responsive Tailwind, Login JWT Authentication, CRUD คำขอลาสมบูรณ์, แนบไฟล์ + Error Handling	Vue 3 + Nuxt E-Leave Frontend
DevOps Integration	10	Dockerfile Backend Node.js Alpine, Frontend Nuxt.js, docker-compose + Pipeline GitLab CI/CD	Docker + GitLab CI/CD

เอกสารนี้สร้างขึ้นสำหรับการประเมินระบบ E-Leave (ลางานออนไลน์) ตามมาตรฐานการพัฒนาซอฟต์แวร์สมัยใหม่