เกณฑ์การตรวจงาน: ระบบ Helpdesk Ticketing (แจ้งซ่อม/แจ้งปัญหา)

คะแนนเต็ม: 50 คะแนน
เทคโนโลยีที่ใช้: Node.js + Vue 3 + Nuxt + Tailwind CSS + MySQL/MariaDB/PostgreSQL + Docker + GitLab CI/CD

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

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 สำหรับ User, Admin และ Technician พร้อม JWT Token validation 1
Admin Flow การจัดการผู้ใช้, มอบหมายงาน, จัดการ Technician, ดูรายงานสถิติ Ticket 1
User Flow เปิด Ticket แจ้งปัญหา, แนบ Screenshot, ติดตามสถานะ, ปิด Ticket 1
Technician Flow ดู Ticket ที่ได้รับมอบหมาย, อัพเดทสถานะงาน, แก้ไขปัญหา, รายงานผล 1
System Overview Ticket Creation → Assignment → Progress → Resolution 1

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

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

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

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

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

ตาราง ฟิลด์หลัก
users id, username, password, name, email, role, department_id, phone, is_active
tickets id, user_id, category_id, priority_id, title, description, status, created_at, updated_at, resolved_at, sla_deadline
assignments id, ticket_id, technician_id, assigned_by, assigned_at, accepted_at, estimated_resolution
attachments id, ticket_id, filename, filepath, filesize, uploaded_by, uploaded_at
ticket_status_history id, ticket_id, old_status, new_status, changed_by, changed_at, comment
categories id, category_name, description, sla_hours, default_technician_group
priorities id, priority_name, sla_multiplier, escalation_hours

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

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

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

รายการ คำอธิบาย คะแนน
Admin Layout Template สำหรับจัดการ Ticket, มอบหมายงาน, รายงานสถิติ, จัดการผู้ใช้ 1
User Layout Template สำหรับสร้าง Ticket, แนบ Screenshot, ติดตามสถานะ, ประวัติ Ticket 1
Technician Layout Template สำหรับ Ticket ที่ได้รับมอบหมาย, อัพเดทงาน, รายงานผล 1
Dashboard Layout Template สำหรับสถิติ Ticket, SLA performance, แจ้งเตือน, กราฟรายงาน 1
Login Layout Template สำหรับฟอร์ม Login พร้อม role selection และ validation 1

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

Vue Components ที่ต้องมี

TicketForm.vue
ฟอร์มสร้าง/แก้ไข Ticket
TicketList.vue
แสดงรายการ Ticket พร้อม filter
AssignmentPanel.vue
Panel สำหรับมอบหมายงาน
StatusTimeline.vue
Timeline แสดงประวัติสถานะ
FileUpload.vue
Component อัพโหลดไฟล์
LoginForm.vue
ฟอร์ม Login พร้อม validation
Dashboard.vue
Dashboard สถิติและกราฟ
Pagination.vue
Component แบ่งหน้า
FilterPanel.vue
Panel กรองข้อมูล
NotificationCenter.vue
ศูนย์แจ้งเตือน

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

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

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

API Endpoints ตัวอย่าง

Method Endpoint Description Auth Required Role
GET /api/tickets ดูรายการ Ticket (with filters) Yes All
POST /api/tickets สร้าง Ticket ใหม่ Yes User
PUT /api/tickets/{id} แก้ไข Ticket Yes UserAdmin
DELETE /api/tickets/{id} ลบ Ticket Yes Admin
POST /api/tickets/{id}/assign มอบหมายงาน Yes Admin
PUT /api/tickets/{id}/status อัพเดทสถานะ Yes TechnicianAdmin

API Endpoints ทั้งหมดที่ต้องมี

Auth APIs: POST /api/auth/login POST /api/auth/logout GET /api/auth/profile Ticket APIs: GET /api/tickets (with filters) POST /api/tickets GET /api/tickets/{id} PUT /api/tickets/{id} DELETE /api/tickets/{id} GET /api/tickets/my-tickets GET /api/tickets/assigned-to-me Assignment APIs: POST /api/tickets/{id}/assign GET /api/assignments/available-technicians PUT /api/assignments/{id}/accept PUT /api/assignments/{id}/reject Status Management APIs: PUT /api/tickets/{id}/status GET /api/tickets/{id}/history POST /api/tickets/{id}/comments File Management APIs: POST /api/attachments GET /api/attachments/{filename} DELETE /api/attachments/{id} Report APIs: GET /api/reports/sla-performance GET /api/reports/technician-workload GET /api/reports/ticket-statistics

Response Format ตัวอย่าง

Success Response: { "status": "success", "message": "Ticket created successfully", "data": { "ticket_id": 12345, "sla_deadline": "2025-12-10T14:00:00Z", "assigned_technician": "John Doe", "category": "Hardware", "priority": "High" } } Error Response: { "status": "error", "message": "Validation failed", "errors": { "title": "Title is required", "category": "Invalid category" } }

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

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

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

รายการ คำอธิบาย คะแนน
API GET with Parameters GET /api/tickets?status=open&priority=high&category=hardware&page=1&limit=10 1
API POST with Body สร้าง Ticket พร้อม validation และ SLA calculation 1
File Upload API POST /api/attachments สำหรับ Screenshot และไฟล์แนบ พร้อม validation 1
JWT Authentication /api/auth/login สร้าง JWT Token พร้อม role information (User/Admin/Technician) 1
Exception Handling try-catch blocks, validation middleware, error response standardization 1
Response Format Response JSON เหมาะสม พร้อม status, message, data structure 1
API Documentation คำอธิบาย API ด้วย Swagger/OpenAPI หรือเอกสารที่ชัดเจน 1
Clear Parameters Parameter ชัดเจน (query, path, body) พร้อม validation rules 1
Code Structure โครงสร้างดี แยกไฟล์ routes, controllers, models, middleware, services 1
Security JWT verification middleware, role checking, file validation, SQL injection prevention 1

โครงสร้างโปรเจค Backend

backend/ ├── src/ │ ├── routes/ │ │ ├── auth.routes.js │ │ ├── ticket.routes.js │ │ ├── assignment.routes.js │ │ ├── attachment.routes.js │ │ └── report.routes.js │ ├── controllers/ │ │ ├── authController.js │ │ ├── ticketController.js │ │ ├── assignmentController.js │ │ └── reportController.js │ ├── models/ │ │ ├── User.js │ │ ├── Ticket.js │ │ ├── Assignment.js │ │ └── Attachment.js │ ├── middleware/ │ │ ├── auth.middleware.js │ │ ├── validation.middleware.js │ │ └── errorHandler.middleware.js │ ├── services/ │ │ ├── ticketService.js │ │ ├── slaService.js │ │ └── notificationService.js │ └── utils/ │ ├── jwtHelper.js │ └── fileUpload.js ├── package.json └── server.js

ฟีเจอร์สำคัญที่ต้องมี

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

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

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

รายการ คำอธิบาย คะแนน
Responsive Layout Layout ปรับตามขนาดหน้าจอด้วย Tailwind CSS responsive utilities 1
JWT Login System ระบบ Login ด้วย JWT พร้อม Authentication middleware และ token storage 1
Role-based Access แยกระบบ Login ตามระดับ: User/Admin/Technician routes และ permissions 1
CRUD Operations CRUD สมบูรณ์: Create, Read, Update, Delete Ticket 1
File Attachment แนบไฟล์ Screenshot และเอกสาร พร้อม preview และ validation 1
Data Editing แก้ไข Ticket details, assignment, status update 1
Delete Confirmation แจ้งเตือนการลบ: Confirmation modal ก่อนลบ Ticket 1
Permission-based Display แสดงข้อมูลตามสิทธิ์: User (เฉพาะของตนเอง), Technician (ที่ได้รับมอบหมาย), Admin (ทั้งหมด) 1
Search & Filter ระบบค้นหา/Filter: กรองตาม status, priority, category, technician, date range 1
Pagination & Validation แบ่งหน้า + Form validation + Error handling + Toast notifications 1

โครงสร้างโปรเจค Frontend

frontend/ ├── pages/ │ ├── index.vue (Dashboard) │ ├── login.vue │ ├── tickets/ │ │ ├── index.vue (List) │ │ ├── create.vue │ │ ├── [id].vue (Detail) │ │ └── edit/[id].vue │ ├── admin/ │ │ ├── users.vue │ │ ├── assignments.vue │ │ └── reports.vue │ └── technician/ │ ├── assigned.vue │ └── workload.vue ├── components/ │ ├── TicketForm.vue │ ├── TicketList.vue │ ├── AssignmentPanel.vue │ ├── StatusTimeline.vue │ ├── FileUpload.vue │ ├── FilterPanel.vue │ ├── Pagination.vue │ └── NotificationCenter.vue ├── composables/ │ ├── useAuth.js │ ├── useTickets.js │ └── useNotifications.js └── middleware/ ├── auth.js └── role.js

ฟีเจอร์เพิ่มเติมที่ควรมี

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

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

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

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

Backend Dockerfile

FROM node:18-alpine AS builder WORKDIR /app COPY package*.json ./ RUN npm ci --only=production FROM node:18-alpine WORKDIR /app COPY --from=builder /app/node_modules ./node_modules COPY . . EXPOSE 3000 CMD ["npm", "start"]

Frontend Dockerfile

FROM node:18-alpine AS builder WORKDIR /app COPY package*.json ./ RUN npm ci COPY . . RUN npm run build FROM nginx:alpine COPY --from=builder /app/.output/public /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]

docker-compose.yml

version: '3.8' services: backend: build: ./backend environment: - DB_HOST=database - JWT_SECRET=your_secret_key - UPLOAD_PATH=/app/uploads - REDIS_HOST=redis volumes: - ./uploads:/app/uploads ports: - "3000:3000" depends_on: - database - redis restart: unless-stopped frontend: build: ./frontend ports: - "80:80" depends_on: - backend restart: unless-stopped database: image: mysql:8.0 environment: - MYSQL_DATABASE=helpdesk - MYSQL_ROOT_PASSWORD=password - MYSQL_USER=helpdesk_user - MYSQL_PASSWORD=password volumes: - db_data:/var/lib/mysql ports: - "3306:3306" restart: unless-stopped redis: image: redis:alpine command: redis-server --appendonly yes volumes: - redis_data:/data ports: - "6379:6379" restart: unless-stopped volumes: db_data: redis_data:

.gitlab-ci.yml

stages: - build - test - deploy variables: DOCKER_DRIVER: overlay2 DOCKER_TLS_CERTDIR: "" build_backend: stage: build script: - cd backend - docker build -t helpdesk-backend:$CI_COMMIT_SHA . - docker tag helpdesk-backend:$CI_COMMIT_SHA helpdesk-backend:latest only: - main - develop build_frontend: stage: build script: - cd frontend - docker build -t helpdesk-frontend:$CI_COMMIT_SHA . - docker tag helpdesk-frontend:$CI_COMMIT_SHA helpdesk-frontend:latest only: - main - develop test_backend: stage: test script: - cd backend - npm install - npm run test only: - main - develop test_frontend: stage: test script: - cd frontend - npm install - npm run test only: - main - develop deploy_production: stage: deploy script: - docker-compose down - docker-compose up -d - docker-compose ps only: - main environment: name: production

Pipeline Stages

Stage Description Tools
Build สร้าง Docker images สำหรับ Backend และ Frontend Docker, GitLab Registry
Test รัน unit tests, integration tests, API tests Jest, Mocha, Supertest
Deploy Deploy ไป test/production environment Docker Compose, SSH

ข้อกำหนดเพิ่มเติม:

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

หัวข้อ คะแนนเต็ม รายละเอียดสำหรับ Helpdesk Ticketing เกณฑ์การให้คะแนน
การออกแบบผังงาน 5 ผังงาน Login Flow, ผู้ดูแลระบบ, User, Technician, ภาพรวม Helpdesk System Flow Diagram ระบบแจ้งซ่อม/แจ้งปัญหา
การออกแบบฐานข้อมูล 5 ตาราง users tickets assignments attachments ticket_status_history categories priorities + ความสัมพันธ์ ER-Diagram Database Design สำหรับระบบ Helpdesk
การออกแบบหน้าจอ 5 Template Admin Dashboard, User Ticket Form, Technician Workbench, Main Dashboard, Login Screen Vue 3 + Nuxt + Tailwind CSS
การออกแบบ RESTful API 5 API RESTful สำหรับ tickets assignments attachments status + JWT Token authentication Helpdesk API Design
พัฒนาระบบ Back-end 10 API GET/POST สำหรับ Ticket, API อัปโหลด Screenshot, API Login JWT + Exception Handling + SLA Node.js Helpdesk Backend
พัฒนาระบบ Front-end 10 Layout Responsive Tailwind, Login JWT Authentication, CRUD Ticket สมบูรณ์, แนบไฟล์ + SLA Tracking Vue 3 + Nuxt Helpdesk Frontend
DevOps Integration 10 Dockerfile Backend Node.js Alpine, Frontend Nuxt.js, docker-compose + Redis + Pipeline GitLab CI/CD Docker + GitLab CI/CD

หมายเหตุสำหรับผู้ตรวจ:

เอกสารนี้สร้างขึ้นสำหรับการประเมินระบบ Helpdesk Ticketing (แจ้งซ่อม/แจ้งปัญหา) ตามมาตรฐานการพัฒนาซอฟต์แวร์สมัยใหม่