เกณฑ์การตรวจงาน: ระบบ Meeting Room Booking (จองห้องประชุม)

คะแนนเต็ม: 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 สำหรับผู้ใช้ทั่วไปและ Admin พร้อม JWT Token validation 1
Admin Flow จัดการห้องประชุม, จัดการอุปกรณ์, ดูรายงานการใช้งาน, จัดการผู้ใช้ 1
Employee Flow ดูปฏิทินห้องว่าง, จองห้องประชุม, เลือกอุปกรณ์, ยกเลิกการจอง 1
Manager Flow จองห้องขั้นสูง, อนุมัติการจอง, ดูการจองของทีม, จองล่วงหน้าระยะยาว 1
System Overview Room Check → Booking → Conflict Validation → Confirmation 1

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

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

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

รายการ คำอธิบาย คะแนน
ตารางฐานข้อมูล มีอย่างน้อย 3 ตาราง (ครบ 7 ตาราง: users, rooms, bookings, equipment, booking_equipment, room_equipment, departments) 1
ความสัมพันธ์ Foreign Keys เชื่อมโยงตารางอย่างเหมาะสม 1
Data Types เลือกใช้ประเภทข้อมูลเหมาะสม (VARCHAR, INT, DATETIME, DECIMAL, BOOLEAN, 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, 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

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

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

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

รายการ คำอธิบาย คะแนน
Admin Layout Template สำหรับจัดการห้อง, จัดการอุปกรณ์, รายงานการใช้งาน, ตั้งค่าระบบ 1
Employee Layout Template สำหรับปฏิทินการจอง, ฟอร์มจองห้อง, ประวัติการจอง 1
Manager Layout Template สำหรับอนุมัติการจอง, ดูการจองของทีม, จองขั้นสูง 1
Dashboard Layout Template สำหรับปฏิทินรวม, สถิติการใช้งาน, ห้องว่างตอนนี้ 1
Login Layout Template สำหรับฟอร์ม Login พร้อม validation 1

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

Vue Components ที่ต้องมี

RoomBookingForm.vue
ฟอร์มจองห้องประชุม
CalendarView.vue
ปฏิทินแสดงการจอง
RoomCard.vue
Card แสดงข้อมูลห้องประชุม
EquipmentSelector.vue
เลือกอุปกรณ์
BookingList.vue
รายการการจอง
TimeSlotPicker.vue
เลือกช่วงเวลา
ConflictValidator.vue
ตรวจสอบความชนของเวลา
Dashboard.vue
หน้าหลัก Dashboard
LoginForm.vue
ฟอร์ม Login
Pagination.vue
Component แบ่งหน้า

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

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

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

API Endpoints ตัวอย่าง

Method Endpoint Description Auth Required Role
GET /api/rooms ดูรายการห้องประชุม Yes All
GET /api/rooms/{id}/availability ตรวจสอบห้องว่าง Yes All
POST /api/bookings จองห้องประชุม Yes Employee
PUT /api/bookings/{id} แก้ไขการจอง Yes EmployeeAdmin
DELETE /api/bookings/{id} ยกเลิกการจอง Yes EmployeeAdmin
POST /api/bookings/{id}/approve อนุมัติการจอง Yes ManagerAdmin

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

Auth APIs: POST /api/auth/login POST /api/auth/logout GET /api/auth/profile Room APIs: 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) Booking APIs: 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 Equipment APIs: GET /api/equipment GET /api/equipment/available POST /api/bookings/{id}/equipment DELETE /api/bookings/{booking_id}/equipment/{equipment_id} Calendar APIs: GET /api/calendar/week GET /api/calendar/month GET /api/calendar/day/{date} Report APIs: GET /api/reports/usage-statistics GET /api/reports/popular-rooms GET /api/reports/department-usage

Response Format ตัวอย่าง

Success Response: { "status": "success", "message": "Room booked successfully", "data": { "booking_id": 12345, "room": "Conference Room A", "datetime": "2025-12-10 09:00-11:00", "equipment": ["Projector", "Whiteboard"] } } Conflict Error Response: { "status": "error", "message": "Time slot conflict", "errors": { "time": "Room already booked at 09:00-11:00", "conflicting_booking_id": 12340 } }

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

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

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

รายการ คำอธิบาย คะแนน
API GET with Parameters GET /api/rooms?capacity=20&equipment=projector&date=2025-12-10&start_time=09:00 1
API POST with Body สร้างการจองพร้อม time conflict validation 1
File Upload API POST /api/attachments สำหรับไฟล์แนบการประชุม 1
JWT Authentication /api/auth/login สร้าง JWT Token พร้อม role information 1
Exception Handling try-catch blocks, validation middleware, conflict detection 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, booking authorization, time validation 1

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

backend/ ├── src/ │ ├── routes/ │ │ ├── auth.routes.js │ │ ├── room.routes.js │ │ ├── booking.routes.js │ │ ├── equipment.routes.js │ │ ├── calendar.routes.js │ │ └── report.routes.js │ ├── controllers/ │ │ ├── authController.js │ │ ├── roomController.js │ │ ├── bookingController.js │ │ ├── equipmentController.js │ │ └── reportController.js │ ├── models/ │ │ ├── User.js │ │ ├── Room.js │ │ ├── Booking.js │ │ ├── Equipment.js │ │ └── Department.js │ ├── middleware/ │ │ ├── auth.middleware.js │ │ ├── validation.middleware.js │ │ ├── conflictCheck.middleware.js │ │ └── errorHandler.middleware.js │ ├── services/ │ │ ├── bookingService.js │ │ ├── conflictService.js │ │ ├── notificationService.js │ │ └── calendarService.js │ └── utils/ │ ├── jwtHelper.js │ ├── dateHelper.js │ └── emailHelper.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 ตามระดับ: Employee/Manager/Admin routes และ permissions 1
CRUD Operations CRUD สมบูรณ์: Create, Read, Update, Delete การจอง 1
File Attachment แนบไฟล์เอกสารการประชุม, agenda พร้อม validation 1
Data Editing แก้ไขการจอง พร้อม time conflict validation 1
Delete Confirmation แจ้งเตือนการยกเลิก: Confirmation modal ก่อนยกเลิกการจอง 1
Permission-based Display แสดงข้อมูลตามสิทธิ์: Employee (ของตนเอง), Manager (ของทีม), Admin (ทั้งหมด) 1
Search & Filter ระบบค้นหา/Filter: กรองตามวันที่, ห้อง, อุปกรณ์, สถานะ 1
Pagination & Validation แบ่งหน้า + Form validation + Error handling + Time conflict alert 1

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

frontend/ ├── pages/ │ ├── index.vue (Dashboard) │ ├── login.vue │ ├── rooms/ │ │ ├── index.vue (List) │ │ └── [id].vue (Detail) │ ├── bookings/ │ │ ├── index.vue (List) │ │ ├── create.vue │ │ ├── [id].vue (Detail) │ │ └── edit/[id].vue │ ├── calendar/ │ │ ├── week.vue │ │ └── month.vue │ ├── admin/ │ │ ├── rooms.vue │ │ ├── equipment.vue │ │ └── reports.vue │ └── manager/ │ ├── approvals.vue │ └── team-bookings.vue ├── components/ │ ├── RoomBookingForm.vue │ ├── CalendarView.vue │ ├── RoomCard.vue │ ├── EquipmentSelector.vue │ ├── BookingList.vue │ ├── TimeSlotPicker.vue │ ├── ConflictValidator.vue │ └── Dashboard.vue ├── composables/ │ ├── useAuth.js │ ├── useBookings.js │ ├── useCalendar.js │ └── useConflictCheck.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 + Scheduler 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 - EMAIL_CONFIG=smtp://... volumes: - ./uploads:/app/uploads ports: - "3000:3000" depends_on: - database restart: unless-stopped frontend: build: ./frontend ports: - "80:80" depends_on: - backend restart: unless-stopped database: image: mysql:8.0 environment: - MYSQL_DATABASE=room_booking - MYSQL_ROOT_PASSWORD=password - MYSQL_USER=booking_user - MYSQL_PASSWORD=password volumes: - db_data:/var/lib/mysql ports: - "3306:3306" restart: unless-stopped scheduler: build: ./scheduler environment: - DB_HOST=database - EMAIL_CONFIG=smtp://... depends_on: - database restart: unless-stopped # สำหรับส่งแจ้งเตือนและทำความสะอาดข้อมูล volumes: db_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 room-booking-backend:$CI_COMMIT_SHA . - docker tag room-booking-backend:$CI_COMMIT_SHA room-booking-backend:latest only: - main - develop build_frontend: stage: build script: - cd frontend - docker build -t room-booking-frontend:$CI_COMMIT_SHA . - docker tag room-booking-frontend:$CI_COMMIT_SHA room-booking-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, conflict validation tests Jest, Mocha, Supertest
Deploy Deploy ไป test/production environment Docker Compose, SSH

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

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

หัวข้อ คะแนนเต็ม รายละเอียดสำหรับ Meeting Room Booking เกณฑ์การให้คะแนน
การออกแบบผังงาน 5 ผังงาน Login Flow, ผู้ดูแลระบบ, Employee, Manager, ภาพรวม Room Booking System Flow Diagram ระบบจองห้องประชุม
การออกแบบฐานข้อมูล 5 ตาราง users rooms bookings equipment booking_equipment room_equipment departments + ความสัมพันธ์ ER-Diagram Database Design สำหรับระบบจองห้องประชุม
การออกแบบหน้าจอ 5 Template Admin Room Management, Employee Booking Form, Manager Approval, Calendar Dashboard, Login Screen Vue 3 + Nuxt + Tailwind CSS
การออกแบบ RESTful API 5 API RESTful สำหรับ rooms bookings equipment calendar + JWT Token authentication Room Booking API Design
พัฒนาระบบ Back-end 10 API GET/POST สำหรับการจอง, API availability checking, Time Conflict Validation, Exception Handling + JWT Node.js Room Booking Backend
พัฒนาระบบ Front-end 10 Layout Responsive Tailwind, Login JWT Authentication, CRUD การจองสมบูรณ์, Calendar View, Time Conflict Alert Vue 3 + Nuxt Room Booking Frontend
DevOps Integration 10 Dockerfile Backend Node.js Alpine, Frontend Nuxt.js, docker-compose + Scheduler + Pipeline GitLab CI/CD Docker + GitLab CI/CD

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

เอกสารนี้สร้างขึ้นสำหรับการประเมินระบบ Meeting Room Booking (จองห้องประชุม) ตามมาตรฐานการพัฒนาซอฟต์แวร์สมัยใหม่