| ที่ | รายละเอียด | คะแนน | หมายเหตุ | |
|---|---|---|---|---|
| เต็ม | ที่ได้ | |||
| ส่วนที่ 4 การพัฒนาเว็บแอปพลิเคชัน (Web Application) (50 คะแนน) : ระบบ Helpdesk Ticketing (แจ้งซ่อม/แจ้งปัญหา) | ||||
| 1. การออกแบบผังงาน (Flow Diagram) ตามความต้องการของผู้ใช้ - 5 คะแนน | ||||
| 1.1 | ผังงานระบบการเข้าสู่ระบบ (Login Flow) | 1 | ||
| แสดงกระบวนการ Login สำหรับ User, Admin และ Technician พร้อม JWT Token validation รวมถึง decision points สำหรับการตรวจสอบสิทธิ์ | ||||
| 1.2 | ผังงานกระบวนการของผู้ดูแลระบบ (Admin) | 1 | ||
| การจัดการผู้ใช้, มอบหมายงาน, จัดการ Technician, ดูรายงานสถิติ Ticket พร้อม decision points สำหรับการมอบหมายงาน | ||||
| 1.3 | ผังงานกระบวนการของผู้ใช้งานระดับ 1 (User) | 1 | ||
| เปิด Ticket แจ้งปัญหา, แนบ Screenshot, ติดตามสถานะ, ปิด Ticket พร้อม file attachment process flow | ||||
| 1.4 | ผังงานกระบวนการของผู้ใช้งานระดับ 2 (Technician) | 1 | ||
| ดู Ticket ที่ได้รับมอบหมาย, อัพเดทสถานะงาน, แก้ไขปัญหา, รายงานผล พร้อม status update notification flow | ||||
| 1.5 | ผังงานภาพรวมของระบบทั้งหมด (System Flow Overview) | 1 | ||
| แสดงการเชื่อมโยง Ticket Creation → Assignment → Progress → Resolution พร้อม SLA tracking และ escalation process เมื่องานล่าช้า | ||||
| 2. การออกแบบฐานข้อมูล (Database Design) พร้อม ER-Diagram - 5 คะแนน | ||||
| 2.1 | การสร้างฐานข้อมูลอย่างน้อย 3 ตาราง | 1 | ||
| ออกแบบโครงสร้างฐานข้อมูลอย่างน้อย 7 ตาราง: users, tickets, assignments, attachments, ticket_status_history, categories, priorities พร้อมกำหนดฟิลด์ที่เหมาะสม | ||||
| 2.2 | ความสัมพันธ์ของตาราง | 1 | ||
| ตารางฐานข้อมูลมีความสัมพันธ์กันอย่างเหมาะสม โดยใช้ Foreign Keys เชื่อมโยงตารางเพื่อรักษาความสมบูรณ์ของข้อมูล (Referential Integrity) | ||||
| 2.3 | ประเภทข้อมูล (Data Types) | 1 | ||
| เลือกใช้ประเภทข้อมูล (Data Type) ที่เหมาะสม: VARCHAR, INT, DATETIME, TEXT, ENUM ตามลักษณะของข้อมูลในแต่ละฟิลด์ | ||||
| 2.4 | ER-Diagram สมบูรณ์ | 1 | ||
| สร้าง Entity Relationship Diagram (ERD) ที่แสดงความสัมพันธ์ระหว่าง Entity ทุกประเภท: 1:1 (One-to-One), 1:M (One-to-Many), M:M (Many-to-Many) อย่างชัดเจน | ||||
| 2.5 | มาตรฐานการตั้งชื่อ | 1 | ||
| ตั้งชื่อตารางและฟิลด์เป็นมาตรฐาน: ใช้ snake_case, meaningful names ที่สื่อความหมายและเข้าใจง่าย เพื่อความสะดวกในการบำรุงรักษา | ||||
| 3. การออกแบบหน้าจอด้วยโปรแกรมสำเร็จรูป (Vue 3 + Nuxt + Tailwind CSS) - 5 คะแนน | ||||
| 3.1 | Template Layout สำหรับหน้าจอผู้ดูแลระบบ (Admin) | 1 | ||
| ออกแบบหน้าจอบริหารระบบที่ครอบคลุม: จัดการ Ticket, มอบหมายงาน, รายงานสถิติ, จัดการผู้ใช้ พร้อม responsive design ด้วย Tailwind CSS | ||||
| 3.2 | Template Layout สำหรับหน้าจอผู้ใช้งาน (User) | 1 | ||
| ออกแบบหน้าจอผู้ใช้งาน: สร้าง Ticket, แนบ Screenshot, ติดตามสถานะ, ประวัติ Ticket พร้อม file upload component | ||||
| 3.3 | Template Layout สำหรับหน้าจอช่างเทคนิค (Technician) | 1 | ||
| ออกแบบหน้าจอช่างเทคนิค: Ticket ที่ได้รับมอบหมาย, อัพเดทงาน, รายงานผล พร้อม status timeline component | ||||
| 3.4 | Template Layout สำหรับหน้าจอหลัก (Dashboard) | 1 | ||
| ออกแบบ Dashboard: สถิติ Ticket, SLA performance, แจ้งเตือน, กราฟรายงาน พร้อม real-time notification system | ||||
| 3.5 | Template Layout สำหรับหน้าจอเข้าสู่ระบบ (Login) | 1 | ||
| ออกแบบหน้าจอ Login: ฟอร์ม Login พร้อม role selection (User/Admin/Technician) และ validation ด้วย component-based architecture | ||||
| 4. การออกแบบ RESTful API Service สำหรับใช้งานในระบบ - 5 คะแนน | ||||
| 4.1 | ออกแบบ API ตามหลัก RESTful | 1 | ||
| ออกแบบ API ตามหลัก RESTful Architecture ครอบคลุม: GET /api/tickets, POST /api/tickets, PUT /api/tickets/{id}, DELETE /api/tickets/{id}, POST /api/tickets/{id}/assign, PUT /api/tickets/{id}/status | ||||
| 4.2 | ตั้งชื่อ Endpoint สื่อความหมาย | 1 | ||
| ใช้ชื่อ Endpoint ที่สื่อความหมายชัดเจน เช่น /api/tickets/{id}/attachments, /api/technicians/workload, /api/tickets/{id}/history | ||||
| 4.3 | Response Body สอดคล้องกับ HTTP Status Code | 1 | ||
| ใช้ HTTP Status Code อย่างถูกต้อง: 200 (Success), 201 (Created), 400 (Bad Request), 401 (Unauthorized), 403 (Forbidden), 404 (Not Found), 409 (Conflict - Ticket already assigned) | ||||
| 4.4 | รองรับกรณีเกิด Error | 1 | ||
| มี Error handling middleware สำหรับจัดการข้อผิดพลาดที่อาจเกิดขึ้น พร้อมส่ง response ที่เหมาะสม | ||||
| 4.5 | ความปลอดภัยของ API | 1 | ||
| มีการรักษาความปลอดภัย: JWT Token authentication, role-based authorization (User/Admin/Technician) | ||||
| 5. พัฒนาระบบ Back-end การพัฒนา API (Node.js) - 10 คะแนน | ||||
| 5.1 | API GET พร้อมรับค่า | 1 | ||
| พัฒนา API GET พร้อม query parameters: GET /api/tickets?status=open&priority=high&category=hardware&page=1&limit=10 | ||||
| 5.2 | API POST รับข้อมูลจาก Body | 1 | ||
| พัฒนา API POST สำหรับสร้าง Ticket พร้อม validation และ SLA calculation อัตโนมัติ | ||||
| 5.3 | API สำหรับอัปโหลดไฟล์ | 1 | ||
| พัฒนา API อัปโหลดไฟล์: POST /api/attachments สำหรับ Screenshot และไฟล์แนบ พร้อม file validation | ||||
| 5.4 | API Login JWT | 1 | ||
| พัฒนา API Login: /api/auth/login สร้าง JWT Token พร้อม role information (User/Admin/Technician) | ||||
| 5.5 | Exception Handling | 1 | ||
| มีการจัดการ Exception: try-catch blocks, validation middleware, error response ที่เหมาะสม | ||||
| 5.6 | Response เหมาะสม | 1 | ||
| Response มีโครงสร้างมาตรฐาน JSON: {"status": "success", "message": "Ticket created successfully", "data": {"ticket_id": 12345, "sla_deadline": "2025-12-10T14:00:00Z"}} | ||||
| 5.7 | คำอธิบาย API | 1 | ||
| มี API Documentation ที่ชัดเจน (Swagger/OpenAPI) อธิบาย endpoints, parameters, responses | ||||
| 5.8 | Parameter ชัดเจน | 1 | ||
| มีการกำหนด query, path, body parameters ที่ชัดเจน พร้อมคำอธิบายและ validation rules | ||||
| 5.9 | โครงสร้างดี | 1 | ||
| แยกโครงสร้างโค้ดอย่างเป็นระบบ: routes, controllers, models, middleware, services ตามหลัก MVC pattern | ||||
| 5.10 | ความปลอดภัย | 1 | ||
| มีมาตรการรักษาความปลอดภัย: JWT verification middleware, role checking, file validation, input sanitization | ||||
| 6. พัฒนาระบบ Front-end (Vue 3 + Nuxt + Tailwind CSS) - 10 คะแนน | ||||
| 6.1 | Layout Responsive | 1 | ||
| ใช้ Tailwind CSS responsive design ให้แสดงผลได้ดีทุกขนาดหน้าจอ (mobile, tablet, desktop) | ||||
| 6.2 | ระบบ Login JWT | 1 | ||
| มี Authentication middleware, token storage, auto-refresh token สำหรับรักษา session | ||||
| 6.3 | แยกระบบ Login ตามระดับ | 1 | ||
| แยก routes และ permissions สำหรับ User/Admin/Technician พร้อม route guards | ||||
| 6.4 | CRUD สมบูรณ์ | 1 | ||
| พัฒนาระบบ CRUD ครบถ้วน: สร้าง Ticket (Create), ดูรายการ Ticket (Read), แก้ไข Ticket (Update), ลบ Ticket (Delete) | ||||
| 6.5 | แนบไฟล์ | 1 | ||
| มี File upload component สำหรับ Screenshot และไฟล์แนบ พร้อม preview และ validation | ||||
| 6.6 | แก้ไขข้อมูล | 1 | ||
| มี Edit form สำหรับ Ticket details, assignment, status update พร้อม validation | ||||
| 6.7 | แจ้งเตือนการลบ | 1 | ||
| มี Confirmation modal ก่อนลบ Ticket เพื่อป้องกันการลบโดยไม่ตั้งใจ | ||||
| 6.8 | แสดงข้อมูลตามสิทธิ์ | 1 | ||
| กำหนดสิทธิ์การเข้าถึงข้อมูล: User (เห็น Ticket ของตนเอง), Technician (เห็น Ticket ที่ได้รับมอบหมาย), Admin (เห็นทั้งหมด) | ||||
| 6.9 | ระบบค้นหา/Filter และแบ่งหน้า | 1 | ||
| มีระบบกรองข้อมูล: status, priority, category, technician, date range พร้อม pagination และ sorting | ||||
| 6.10 | Validation และ Error Handling | 1 | ||
| มี Form validation ก่อนส่งไป Backend, แสดง error messages, loading states, toast notifications, SLA warnings | ||||
| 7. DevOps Integration (Docker + GitLab CI/CD) - 10 คะแนน | ||||
| 7.1 | Dockerfile สำหรับ Backend | 2 | ||
| สร้าง Dockerfile สำหรับ Backend: Node.js Alpine image, multi-stage build, optimization สำหรับ production | ||||
| 7.2 | Dockerfile สำหรับ Frontend | 2 | ||
| สร้าง Dockerfile สำหรับ Frontend: Nuxt.js build และ Nginx serve สำหรับ production deployment | ||||
| 7.3 | docker-compose | 2 | ||
| สร้าง docker-compose.yml เชื่อมโยง: Backend + Frontend + Database (MySQL/PostgreSQL) + File Storage + Redis (for caching) | ||||
| 7.4 | Pipeline config | 2 | ||
| สร้าง .gitlab-ci.yml ครอบคลุม stages: build (สร้าง Docker images), test (รัน unit tests, API tests), deploy (deploy ไป environment) | ||||
| 7.5 | Auto Build/Test | 2 | ||
| Pipeline trigger อัตโนมัติเมื่อ push ไป GitLab repository, สร้าง container และรัน tests อัตโนมัติ | ||||
| Vue Components ที่ต้องมี | ||||
|
Components ที่จำเป็นสำหรับระบบ Helpdesk Ticketing: • TicketForm.vue - ฟอร์มสร้าง/แก้ไข Ticket • TicketList.vue - แสดงรายการ Ticket พร้อมการกรอง • AssignmentPanel.vue - Panel สำหรับมอบหมายงาน • StatusTimeline.vue - Timeline แสดงประวัติสถานะ • FileUpload.vue - Component อัปโหลดไฟล์ • LoginForm.vue - ฟอร์ม Login • Dashboard.vue - หน้า Dashboard หลัก • Pagination.vue - Component แบ่งหน้า • FilterPanel.vue - Panel กรองข้อมูล • NotificationCenter.vue - ศูนย์การแจ้งเตือน |
||||
| API Endpoints ที่ต้องมี | ||||
|
Authentication: POST /api/auth/login - เข้าสู่ระบบ POST /api/auth/logout - ออกจากระบบ GET /api/auth/profile - ดูข้อมูลโปรไฟล์ Tickets Management: GET /api/tickets - ดูรายการ Ticket (with filters) POST /api/tickets - สร้าง Ticket ใหม่ GET /api/tickets/{id} - ดู Ticket รายการเดียว PUT /api/tickets/{id} - แก้ไข Ticket DELETE /api/tickets/{id} - ลบ Ticket GET /api/tickets/my-tickets - ดู Ticket ของตนเอง GET /api/tickets/assigned-to-me - ดู Ticket ที่ได้รับมอบหมาย Assignments: POST /api/tickets/{id}/assign - มอบหมายงาน GET /api/assignments/available-technicians - ดูช่างที่ว่าง PUT /api/assignments/{id}/accept - รับงาน PUT /api/assignments/{id}/reject - ปฏิเสธงาน Status Management: PUT /api/tickets/{id}/status - อัพเดทสถานะ GET /api/tickets/{id}/history - ดูประวัติการเปลี่ยนสถานะ POST /api/tickets/{id}/comments - เพิ่มคอมเมนต์ File Management: POST /api/attachments - อัปโหลดไฟล์ GET /api/attachments/{filename} - ดาวน์โหลดไฟล์ DELETE /api/attachments/{id} - ลบไฟล์ Reports: GET /api/reports/sla-performance - รายงาน SLA GET /api/reports/technician-workload - รายงานภาระงานช่าง GET /api/reports/ticket-statistics - รายงานสถิติ Ticket |
||||
| โครงสร้างฐานข้อมูลที่แนะนำ | ||||
|
ตารางฐานข้อมูลหลัก: 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 |
||||
| รวมคะแนนทั้งหมด | 50 | |||