| ที่ | รายละเอียด | คะแนน | หมายเหตุ | |
|---|---|---|---|---|
| เต็ม | ที่ได้ | |||
| ส่วนที่ 4 การพัฒนาเว็บแอปพลิเคชัน (Web Application) (50 คะแนน) : ระบบ Meeting Room Booking (จองห้องประชุม) | ||||
| 4.1 การออกแบบผังงาน (Flow Diagram) ระบบจองห้องประชุม - 5 คะแนน | ||||
| 4.1.1 | ผังงานการเข้าสู่ระบบ – สำหรับผู้ดูแลและพนักงาน พร้อมตรวจสอบสิทธิ์ด้วย JWT Token | 1 | ||
| แสดงกระบวนการเข้าสู่ระบบของผู้ดูแลและพนักงาน พร้อมการตรวจสอบสิทธิ์ด้วย JWT Token validation และ decision points สำหรับการตรวจสอบสิทธิ์ | ||||
| 4.1.2 | ผังงานผู้ดูแลระบบ – จัดการห้องประชุม, จัดการอุปกรณ์, ดูรายงาน, จัดการผู้ใช้ | 1 | ||
| แสดงกระบวนการของผู้ดูแลระบบในการจัดการห้องประชุม, จัดการอุปกรณ์, ดูรายงาน, และจัดการผู้ใช้ พร้อมขั้นตอนการตรวจสอบและอนุมัติ | ||||
| 4.1.3 | ผังงานพนักงาน – ดูปฏิทินห้องว่าง, จองห้องประชุม, เลือกอุปกรณ์, ยกเลิกการจอง | 1 | ||
| แสดงกระบวนการของพนักงานในการดูปฏิทินห้องว่าง, จองห้องประชุม, เลือกอุปกรณ์, ยกเลิกการจอง พร้อม time conflict validation | ||||
| 4.1.4 | ผังงานผู้จัดการ – จองห้องประชุมขั้นสูง, อนุมัติการจอง, ดูการจองของทีม, จองระยะยาว | 1 | ||
| แสดงกระบวนการของผู้จัดการในการจองห้องประชุมขั้นสูง, อนุมัติการจอง, ดูการจองของทีม, จองระยะยาว พร้อม equipment availability checking | ||||
| 4.1.5 | ภาพรวมระบบ – ตรวจสอบห้องว่าง → จองห้อง → ตรวจสอบเวลาซ้ำซ้อน → ยืนยันการจอง | 1 | ||
| แสดงภาพรวมการทำงานของระบบทั้งหมด: ตรวจสอบห้องว่าง → จองห้อง → ตรวจสอบเวลาซ้ำซ้อน → ยืนยันการจอง พร้อม booking confirmation และ notification flow | ||||
| 4.2 การออกแบบฐานข้อมูล (Database Design) พร้อม ER-Diagram - 5 คะแนน | ||||
| 4.2.1 | การสร้างฐานข้อมูลอย่างน้อย 3 ตาราง | 1 | ||
| ออกแบบโครงสร้างฐานข้อมูลอย่างน้อย 7 ตาราง: users, rooms, bookings, equipment, booking_equipment, room_equipment, departments พร้อมกำหนดฟิลด์ที่เหมาะสม | ||||
| 4.2.2 | ความสัมพันธ์ของตาราง | 1 | ||
| ตารางฐานข้อมูลมีความสัมพันธ์กันอย่างเหมาะสม โดยใช้ Foreign Keys เชื่อมโยงตารางเพื่อรักษาความสมบูรณ์ของข้อมูล (Referential Integrity) | ||||
| 4.2.3 | ประเภทข้อมูล (Data Types) | 1 | ||
| เลือกใช้ประเภทข้อมูล (Data Type) ที่เหมาะสม: VARCHAR, INT, DATETIME, DECIMAL, BOOLEAN, ENUM ตามลักษณะของข้อมูลในแต่ละฟิลด์ | ||||
| 4.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) อย่างชัดเจน | ||||
| 4.2.5 | มาตรฐานการตั้งชื่อ | 1 | ||
| ตั้งชื่อตารางและฟิลด์เป็นมาตรฐาน: ใช้ snake_case, meaningful names ที่สื่อความหมายและเข้าใจง่าย เพื่อความสะดวกในการบำรุงรักษา | ||||
| 4.3 การออกแบบหน้าจอด้วยโปรแกรมสำเร็จรูป - 5 คะแนน | ||||
| 4.3.1 | มี Template Layout สำหรับหน้าจอผู้ดูแลระบบ | 1 | ||
| ออกแบบหน้าจอผู้ดูแลระบบที่ครอบคลุม: จัดการห้องประชุม, จัดการอุปกรณ์, ดูรายงาน, จัดการผู้ใช้ พร้อม responsive design | ||||
| 4.3.2 | มี Template Layout สำหรับหน้าจอผู้ใช้งานระดับ 1 | 1 | ||
| ออกแบบหน้าจอพนักงาน: ดูปฏิทินห้องว่าง, จองห้องประชุม, เลือกอุปกรณ์, ยกเลิกการจอง พร้อม calendar component และ time picker | ||||
| 4.3.3 | มี Template Layout สำหรับหน้าจอผู้ใช้งานระดับ 2 | 1 | ||
| ออกแบบหน้าจอผู้จัดการ: จองห้องประชุมขั้นสูง, อนุมัติการจอง, ดูการจองของทีม, จองระยะยาว พร้อม room availability indicator | ||||
| 4.3.4 | มี Template Layout สำหรับหน้าจอหลักของระบบ (Dashboard/Overview) | 1 | ||
| ออกแบบ Dashboard หลัก: ปฏิทินรวม, สถิติการใช้งาน, ห้องว่างตอนนี้, ภาพรวมการจอง พร้อม equipment selection component | ||||
| 4.3.5 | มี Template Layout สำหรับหน้าจอเข้าสู่ระบบ (Login Screen) | 1 | ||
| ออกแบบหน้าจอ Login: ฟอร์ม Login พร้อม validation, JWT Token authentication ด้วย component-based architecture | ||||
| 4.4 การออกแบบและพัฒนา RESTful API - 5 คะแนน | ||||
| 4.4.1 | ออกแบบ API โดยใช้ HTTP Methods (GET, POST, PUT, DELETE) อย่างถูกต้อง | 1 | ||
| ออกแบบ API ตามหลัก RESTful Architecture โดยใช้ HTTP Methods ครอบคลุม: GET /api/rooms, POST /api/bookings, PUT /api/bookings/{id}, DELETE /api/bookings/{id} | ||||
| 4.4.2 | ตั้งชื่อ Endpoint สื่อความหมาย | 1 | ||
| ใช้ชื่อ Endpoint ที่สื่อความหมายชัดเจน เช่น /api/rooms/{id}/availability, /api/equipment/available, /api/rooms/{id}/calendar | ||||
| 4.4.3 | กำหนด HTTP Status Codes ให้เหมาะสม เช่น 200, 201, 400, 401, 403, 404 | 1 | ||
| ใช้ HTTP Status Code อย่างถูกต้องตามสถานการณ์: 200 (Success), 201 (Created), 400 (Bad Request), 401 (Unauthorized), 403 (Forbidden), 404 (Not found), 409 (Conflict) | ||||
| 4.4.4 | มี Error Handling ด้วย middleware | 1 | ||
| มี Error handling middleware, time conflict validation และระบบจัดการข้อผิดพลาดที่อาจเกิดขึ้นอย่างเหมาะสม | ||||
| 4.4.5 | มีระบบ API Security เช่น JWT Authentication, Role-Based Authorization | 1 | ||
| มีการรักษาความปลอดภัย API: JWT Token authentication, role-based authorization (ผู้ดูแลระบบ/พนักงาน/ผู้จัดการ), input validation | ||||
| 4.5 การพัฒนา Backend ด้วย Node.js - 10 คะแนน | ||||
| 4.5.1 | สร้าง API GET ที่รับค่า query parameters | 1 | ||
| พัฒนา API GET ที่สามารถรับค่า query parameters เช่น: GET /api/rooms?capacity=20&equipment=projector&date=2025-12-10 | ||||
| 4.5.2 | สร้าง API POST ที่รับข้อมูล Body พร้อม validation | 1 | ||
| พัฒนา API POST ที่รับข้อมูลจาก request body พร้อม validation, time conflict checking และ data integrity validation | ||||
| 4.5.3 | มี API สำหรับอัปโหลดไฟล์ (File Upload) | 1 | ||
| พัฒนา API สำหรับอัปโหลดไฟล์: POST /api/attachments พร้อม file validation, size limit และ file type checking | ||||
| 4.5.4 | มี JWT Login API สำหรับสร้าง JWT Token พร้อม role | 1 | ||
| พัฒนา API Login: POST /api/auth/login สร้าง JWT Token พร้อม role information และ user permissions | ||||
| 4.5.5 | มี Exception Handling ด้วย try-catch และ validation middleware | 1 | ||
| มีการจัดการ Exception และ Error อย่างเหมาะสม: try-catch blocks, validation middleware, error logging และ error response ที่มีโครงสร้างชัดเจน | ||||
| 4.5.6 | Response Format เป็น JSON มาตรฐาน (status, message, data) | 1 | ||
| Response มีโครงสร้างมาตรฐาน JSON: {"status": "success", "message": "Operation completed", "data": {...}} หรือ {"status": "error", "message": "Error description", "errors": [...]} | ||||
| 4.5.7 | มีเอกสาร API ด้วย Swagger หรือ OpenAPI Specification | 1 | ||
| มี API Documentation ที่ครบถ้วนด้วย Swagger/OpenAPI อธิบาย endpoints, request/response formats, authentication methods | ||||
| 4.5.8 | มีการระบุ query, path, body parameters ในเอกสาร | 1 | ||
| มีการระบุและอธิบาย parameters อย่างชัดเจน: query parameters, path parameters, body parameters พร้อม data types, required/optional และ validation rules | ||||
| 4.5.9 | โครงสร้างโค้ดแยก routes, controllers, models, middleware (MVC) | 1 | ||
| แยกโครงสร้างโค้ดอย่างเป็นระบบตามหลัก MVC pattern: routes (เส้นทาง API), controllers (logic), models (database schema), middleware (authentication, validation) | ||||
| 4.5.10 | มีระบบ API Security เช่น JWT verification middleware, role checking | 1 | ||
| มีมาตรการรักษาความปลอดภัยครบถ้วน: JWT verification middleware, role-based authorization, input sanitization, SQL injection prevention, XSS protection | ||||
| 4.6 การพัฒนา Frontend ด้วย Vue 3 + Nuxt - 10 คะแนน | ||||
| 4.6.1 | มี Responsive Layout รองรับทุกขนาดหน้าจอ | 1 | ||
| ใช้ Tailwind CSS หรือ CSS Framework สร้าง responsive design ให้แสดงผลได้ดีทุกขนาดหน้าจอ (mobile, tablet, desktop) | ||||
| 4.6.2 | มีระบบ Login ด้วย JWT Authentication | 1 | ||
| พัฒนาระบบ Authentication ด้วย JWT: authentication middleware, token storage (localStorage/sessionStorage), role-based routing สำหรับรักษา session | ||||
| 4.6.3 | มีการจัดการสิทธิ์ผู้ใช้งานตามระดับ (Role-Based Access) | 1 | ||
| แยกระบบ routes และ permissions ตามระดับผู้ใช้งาน พร้อม route guards สำหรับป้องกันการเข้าถึงที่ไม่ได้รับอนุญาต | ||||
| 4.6.4 | มีระบบ CRUD ครบถ้วน (Create, Read, Update, Delete) | 1 | ||
| พัฒนาฟังก์ชัน CRUD ครบถ้วน: สร้างข้อมูล (Create), ดูข้อมูล (Read), แก้ไขข้อมูล (Update), ลบข้อมูล (Delete) พร้อม UI ที่ใช้งานได้จริง | ||||
| 4.6.5 | มีระบบอัปโหลดไฟล์ (File Upload) | 1 | ||
| พัฒนาฟังก์ชัน File upload พร้อม file preview, progress indicator, file validation (size, type) และ error handling | ||||
| 4.6.6 | มีฟอร์มแก้ไขข้อมูล (Edit Form) พร้อม validation | 1 | ||
| พัฒนาฟอร์มแก้ไขข้อมูลที่มี pre-filled data, real-time validation, conflict checking และแสดง error messages ที่ชัดเจน | ||||
| 4.6.7 | มี Confirmation Dialog สำหรับการลบข้อมูล | 1 | ||
| พัฒนา Confirmation modal/dialog ก่อนดำเนินการลบหรือยกเลิกข้อมูลสำคัญ เพื่อป้องกันการดำเนินการโดยไม่ตั้งใจ | ||||
| 4.6.8 | มีการควบคุมการแสดงผลตามสิทธิ์ผู้ใช้ (Permission-Based Display) | 1 | ||
| แสดงข้อมูลและฟังก์ชันตามสิทธิ์ผู้ใช้: ซ่อน/แสดง UI elements ตาม role, conditional rendering, permission-based menu และ action buttons | ||||
| 4.6.9 | มีระบบค้นหา (Search) และกรองข้อมูล (Filter) พร้อม Pagination | 1 | ||
| พัฒนาระบบค้นหาและกรองข้อมูลที่มีหลายเงื่อนไข พร้อมระบบแบ่งหน้า (pagination) และแสดงจำนวนรายการทั้งหมด | ||||
| 4.6.10 | มี Form Validation และ Error Handling ครบถ้วน | 1 | ||
| พัฒนา client-side validation, แสดง error messages ที่ชัดเจน, loading states, success/error notifications และจัดการ API errors อย่างเหมาะสม | ||||
| 4.7 DevOps Integration (Docker + GitLab CI/CD) - 10 คะแนน | ||||
| 4.7.1 | Dockerfile สำหรับ Backend | 2 | ||
| สร้าง Dockerfile สำหรับ Backend: Node.js Alpine image, multi-stage build, optimization สำหรับ production | ||||
| 4.7.2 | Dockerfile สำหรับ Frontend | 2 | ||
| สร้าง Dockerfile สำหรับ Frontend: Nuxt.js build และ Nginx serve สำหรับ production deployment | ||||
| 4.7.3 | docker-compose | 2 | ||
| สร้าง docker-compose.yml เชื่อมโยง: Backend + Frontend + Database (MySQL/PostgreSQL) + File Storage + Scheduler (สำหรับส่งแจ้งเตือน) | ||||
| 4.7.4 | Pipeline config | 2 | ||
| สร้าง .gitlab-ci.yml ครอบคลุม stages: build (สร้าง Docker images), test (รัน unit tests, API tests), deploy (deploy ไป environment) | ||||
| 4.7.5 | Auto Build/Test | 2 | ||
| Pipeline trigger อัตโนมัติเมื่อ push ไป GitLab repository, สร้าง container และรัน tests อัตโนมัติ | ||||
| Vue Components ที่ต้องมี | ||||
|
Components ที่จำเป็นสำหรับระบบ Meeting Room Booking: • RoomBookingForm.vue - ฟอร์มจองห้องประชุม • CalendarView.vue - แสดงปฏิทินการจอง (week/month view) • RoomCard.vue - Card แสดงข้อมูลห้องประชุม • EquipmentSelector.vue - Component เลือกอุปกรณ์ • BookingList.vue - แสดงรายการการจอง • TimeSlotPicker.vue - เลือกช่วงเวลา • ConflictValidator.vue - ตรวจสอบ time conflict • Dashboard.vue - หน้า Dashboard หลัก • LoginForm.vue - ฟอร์ม Login • Pagination.vue - Component แบ่งหน้า |
||||
| Features เพิ่มเติมที่แนะนำ | ||||
|
• Real-time availability updates - อัพเดทห้องว่างแบบ real-time • Calendar integration - เชื่อมต่อกับ Google Calendar, Outlook • Email notifications - แจ้งเตือนทาง email • Recurring meeting support - รองรับการจองซ้ำ • Room utilization analytics - วิเคราะห์การใช้งานห้อง |
||||
| API Endpoints ที่ต้องมี | ||||
|
Authentication: POST /api/auth/login - เข้าสู่ระบบ POST /api/auth/logout - ออกจากระบบ GET /api/auth/profile - ดูข้อมูลโปรไฟล์ Rooms Management: GET /api/rooms - ดูรายการห้องประชุม GET /api/rooms/{id} - ดูข้อมูลห้องรายการเดียว GET /api/rooms/{id}/availability - ตรวจสอบห้องว่าง GET /api/rooms/{id}/calendar - ดูปฏิทินห้อง POST /api/rooms - สร้างห้องใหม่ (Admin only) PUT /api/rooms/{id} - แก้ไขข้อมูลห้อง (Admin only) Bookings Management: GET /api/bookings - ดูรายการการจอง POST /api/bookings - สร้างการจองใหม่ GET /api/bookings/{id} - ดูการจองรายการเดียว PUT /api/bookings/{id} - แก้ไขการจอง DELETE /api/bookings/{id} - ยกเลิกการจอง GET /api/bookings/my-bookings - ดูการจองของตนเอง POST /api/bookings/check-conflict - ตรวจสอบ time conflict Equipment Management: GET /api/equipment - ดูรายการอุปกรณ์ GET /api/equipment/available - ดูอุปกรณ์ที่ว่าง POST /api/bookings/{id}/equipment - เพิ่มอุปกรณ์ในการจอง DELETE /api/bookings/{booking_id}/equipment/{equipment_id} - ลบอุปกรณ์ Calendar: GET /api/calendar/week - ดูปฏิทินรายสัปดาห์ GET /api/calendar/month - ดูปฏิทินรายเดือน GET /api/calendar/day/{date} - ดูปฏิทินรายวัน Reports: GET /api/reports/usage-statistics - รายงานสถิติการใช้งาน GET /api/reports/popular-rooms - รายงานห้องยอดนิยม GET /api/reports/department-usage - รายงานการใช้งานตามแผนก |
||||
| โครงสร้างฐานข้อมูลที่แนะนำ | ||||
|
ตารางฐานข้อมูลหลัก: users: id, employee_id, username, password, name, email, department_id, role, phone, is_active rooms: id, room_name, location, capacity, description, hourly_rate, is_active, has_projector, has_whiteboard bookings: id, user_id, room_id, title, description, start_datetime, end_datetime, status, purpose, attendees_count, created_at equipment: id, equipment_name, description, is_available, maintenance_schedule, purchase_date, warranty_date booking_equipment: id, booking_id, equipment_id, quantity_requested, quantity_allocated room_equipment: id, room_id, equipment_id, quantity, condition_status departments: id, department_name, budget_code, manager_id, booking_limit_per_month |
||||
| รวมคะแนนทั้งหมด | 50 | |||