เกณฑ์การตรวจงาน: ระบบ Recruitment System (รับสมัครงาน)

คะแนนเต็ม: 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 สำหรับ HR และ Applicant พร้อม JWT Token validation 1
HR Admin Flow จัดการตำแหน่งงาน, ดูใบสมัคร, คัดเลือกผู้สมัคร, ส่งอีเมลแจ้งผล 1
Applicant Flow ดูตำแหน่งงาน, กรอกใบสมัคร, อัปโหลด Resume, ติดตามสถานะ 1
HR Manager Flow อนุมัติการรับสมัคร, ดูรายงานสถิติ, จัดการกระบวนการสัมภาษณ์ 1
System Overview Job Posting → Application → Screening → Interview → Selection 1

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

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

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

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

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

ตาราง ฟิลด์หลัก
users id, username, password, email, name, role, department_id, phone, is_active, created_at
job_postings id, title, description, requirements, department_id, posted_by, salary_min, salary_max, employment_type, deadline, status, created_at
applications id, job_posting_id, applicant_id, status, applied_date, cover_letter, expected_salary, available_start_date
documents id, application_id, document_type, filename, filepath, filesize, uploaded_at, verified_by, verification_date
interviews id, application_id, interviewer_id, interview_date, interview_type, location, notes, score, status
application_status_history id, application_id, old_status, new_status, changed_by, changed_date, notes
departments id, department_name, manager_id, budget_allocation, hiring_limit
skills id, skill_name, category, proficiency_level
applicant_skills id, applicant_id, skill_id, proficiency_level, years_experience

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

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

รายการ คำอธิบาย คะแนน
HR Admin Layout Template สำหรับจัดการตำแหน่งงาน, ดูใบสมัคร, คัดเลือกผู้สมัคร 1
Applicant Layout Template สำหรับดูตำแหน่งงาน, กรอกใบสมัคร, อัปโหลด Resume, ติดตามสถานะ 1
HR Manager Layout Template สำหรับอนุมัติการรับสมัคร, ดูรายงาน, จัดการทีม HR 1
Dashboard Layout Template สำหรับสถิติการสมัครงาน, ตำแหน่งที่เปิดรับ, pipeline ผู้สมัคร 1
Login Layout Template สำหรับฟอร์ม Login พร้อม role selection 1

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

Vue Components ที่ต้องมี

JobPostingForm.vue
ฟอร์มสร้างตำแหน่งงาน
JobListing.vue
รายการตำแหน่งงาน
ApplicationForm.vue
ฟอร์มสมัครงาน
ApplicationList.vue
รายการใบสมัคร
DocumentUpload.vue
อัปโหลด Resume และเอกสาร
InterviewScheduler.vue
จัดตารางสัมภาษณ์
StatusTimeline.vue
Timeline สถานะใบสมัคร
Dashboard.vue
หน้าหลัก Dashboard
LoginForm.vue
ฟอร์ม Login
Pagination.vue
Component แบ่งหน้า
FilterPanel.vue
Panel กรองข้อมูล

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

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

รายการ คำอธิบาย คะแนน
Authentication APIs POST /api/auth/login, /api/auth/register, /api/auth/logout พร้อม JWT Token 1
Job Posting APIs CRUD operations สำหรับตำแหน่งงาน (GET, POST, PUT, DELETE /api/job-postings) 1
Application APIs จัดการใบสมัคร, อัปโหลดเอกสาร, ติดตามสถานะ (GET, POST, PUT /api/applications) 1
Interview APIs จัดการตารางสัมภาษณ์ (GET, POST, PUT /api/interviews) 1
Report APIs GET /api/reports/statistics, /api/reports/pipeline, /api/reports/dashboard 1

ตัวอย่าง API Endpoints

# Authentication POST /api/auth/login # เข้าสู่ระบบ POST /api/auth/register # ลงทะเบียน POST /api/auth/logout # ออกจากระบบ GET /api/auth/profile # ดูข้อมูลส่วนตัว # Job Postings GET /api/job-postings # ดูรายการตำแหน่งงานทั้งหมด GET /api/job-postings/:id # ดูรายละเอียดตำแหน่งงาน POST /api/job-postings # สร้างตำแหน่งงานใหม่ (HR only) PUT /api/job-postings/:id # แก้ไขตำแหน่งงาน (HR only) DELETE /api/job-postings/:id # ลบตำแหน่งงาน (HR Manager only) GET /api/job-postings/:id/applications # ดูใบสมัครของตำแหน่งงาน # Applications GET /api/applications # ดูรายการใบสมัครทั้งหมด (HR only) GET /api/applications/:id # ดูรายละเอียดใบสมัคร POST /api/applications # สมัครงาน (Applicant only) PUT /api/applications/:id # แก้ไขใบสมัคร PUT /api/applications/:id/status # เปลี่ยนสถานะใบสมัคร (HR only) GET /api/applications/my # ดูใบสมัครของตัวเอง (Applicant) # Documents POST /api/applications/:id/documents # อัปโหลดเอกสาร GET /api/applications/:id/documents # ดูรายการเอกสาร DELETE /api/applications/:id/documents/:docId # ลบเอกสาร GET /api/documents/:id/download # ดาวน์โหลดเอกสาร # Interviews GET /api/interviews # ดูรายการสัมภาษณ์ POST /api/interviews # สร้างตารางสัมภาษณ์ (HR only) PUT /api/interviews/:id # แก้ไขตารางสัมภาษณ์ PUT /api/interviews/:id/score # ให้คะแนนผู้สมัคร GET /api/interviews/my # ดูตารางสัมภาษณ์ของตัวเอง # Departments GET /api/departments # ดูรายการแผนก GET /api/departments/:id # ดูรายละเอียดแผนก # Skills GET /api/skills # ดูรายการทักษะ POST /api/applicants/:id/skills # เพิ่มทักษะผู้สมัคร # Reports & Analytics GET /api/reports/dashboard # ดู Dashboard สถิติ GET /api/reports/statistics # ดูสถิติการสมัครงาน GET /api/reports/pipeline # ดู Pipeline ผู้สมัคร GET /api/reports/applicant-source # วิเคราะห์แหล่งที่มาผู้สมัคร

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

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

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

รายการ คำอธิบาย คะแนน
Authentication System JWT authentication, password hashing (bcrypt), session management, role-based access 2
Job Posting Management CRUD operations, validation, status management (Draft, Published, Closed), deadline tracking 2
Application Processing รับใบสมัคร, validation, status workflow (New → Screening → Interview → Offer → Hired/Rejected) 2
Document Management File upload (multer), validation (PDF/DOC/DOCX), storage management, download endpoint 2
Email Notification ส่งอีเมลแจ้งเตือน (Nodemailer), template engine, queue system 1
Error Handling Global error handler, validation errors, custom error messages, logging 1

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

ตัวอย่าง Code Structure

server/ ├── config/ │ ├── database.js # Database configuration │ ├── email.js # Email service config │ └── storage.js # File storage config ├── controllers/ │ ├── authController.js # Authentication logic │ ├── jobPostingController.js # Job posting CRUD │ ├── applicationController.js # Application processing │ ├── interviewController.js # Interview management │ └── reportController.js # Reports & analytics ├── middleware/ │ ├── auth.js # JWT verification │ ├── roleCheck.js # Role-based access control │ ├── upload.js # Multer configuration │ ├── validation.js # Input validation │ └── errorHandler.js # Global error handler ├── models/ │ ├── User.js │ ├── JobPosting.js │ ├── Application.js │ ├── Document.js │ ├── Interview.js │ ├── Department.js │ └── Skill.js ├── routes/ │ ├── auth.js │ ├── jobPostings.js │ ├── applications.js │ ├── interviews.js │ └── reports.js ├── services/ │ ├── emailService.js # Email sending logic │ ├── pdfService.js # PDF generation │ └── storageService.js # File storage management ├── utils/ │ ├── logger.js # Winston logger │ ├── validators.js # Custom validators │ └── helpers.js # Helper functions └── server.js # Entry point

ตัวอย่าง Application Status Workflow

// Application status transitions const STATUS_WORKFLOW = { 'New': ['Screening', 'Rejected'], 'Screening': ['Shortlisted', 'Rejected'], 'Shortlisted': ['Interview Scheduled', 'Rejected'], 'Interview Scheduled': ['Interviewed', 'Cancelled'], 'Interviewed': ['Offer Extended', 'Rejected'], 'Offer Extended': ['Offer Accepted', 'Offer Declined'], 'Offer Accepted': ['Hired'], 'Hired': [], 'Rejected': [], 'Cancelled': [] }; // Email notifications for each status change const EMAIL_TEMPLATES = { 'Screening': 'application_received.html', 'Shortlisted': 'shortlisted.html', 'Interview Scheduled': 'interview_invitation.html', 'Offer Extended': 'job_offer.html', 'Offer Accepted': 'welcome_onboarding.html', 'Rejected': 'application_rejected.html' };

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

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

รายการ คำอธิบาย คะแนน
Authentication UI Login/Register forms พร้อม validation, role selection, remember me 1
Job Listing รายการตำแหน่งงาน พร้อม search, filter, pagination, responsive grid 2
Application Form Multi-step wizard form, file upload (Resume), validation, progress indicator 2
HR Dashboard Statistics cards, charts (Chart.js/ApexCharts), application pipeline, quick actions 2
Interview Management Calendar view, scheduling form, interview list, score input 2
Responsive Design Mobile-friendly (Tailwind CSS), dark mode support, loading states, toast notifications 1

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

Vue Pages Structure

client/pages/ ├── index.vue # Landing page / Job listing ├── login.vue # Login page ├── register.vue # Register page ├── jobs/ │ ├── index.vue # Job listing │ ├── [id].vue # Job details │ └── apply.vue # Application form ├── dashboard/ │ ├── index.vue # Main dashboard │ ├── applications.vue # Manage applications (HR) │ ├── my-applications.vue # My applications (Applicant) │ └── interviews.vue # Interview management ├── hr/ │ ├── job-postings/ │ │ ├── index.vue # Manage job postings │ │ ├── create.vue # Create new posting │ │ └── [id]/edit.vue # Edit posting │ ├── applicants/ │ │ ├── index.vue # All applicants │ │ └── [id].vue # Applicant profile │ └── reports.vue # Analytics & reports └── profile/ ├── index.vue # User profile └── settings.vue # Account settings

Key Vue Components

JobCard.vue
Card แสดงตำแหน่งงาน
JobFilter.vue
Panel กรองตำแหน่งงาน
ApplicationWizard.vue
Multi-step application form
FileUploader.vue
Drag-and-drop file upload
StatusBadge.vue
Badge แสดงสถานะใบสมัคร
ApplicationTimeline.vue
Timeline history ใบสมัคร
InterviewCalendar.vue
Calendar จัดตารางสัมภาษณ์
StatisticsCard.vue
Card แสดงสถิติ
DataTable.vue
Table component with sorting
SearchBar.vue
Search input component
Modal.vue
Reusable modal dialog
Loader.vue
Loading spinner

Pinia Store Example

// stores/applications.js import { defineStore } from 'pinia' export const useApplicationStore = defineStore('applications', { state: () => ({ applications: [], currentApplication: null, loading: false, filters: { status: null, jobId: null, dateRange: null } }), getters: { filteredApplications(state) { // Filter logic }, totalApplications(state) { return state.applications.length } }, actions: { async fetchApplications() { this.loading = true try { const response = await $fetch('/api/applications') this.applications = response.data } catch (error) { // Error handling } finally { this.loading = false } }, async submitApplication(data) { // Submit application logic }, async updateStatus(id, status) { // Update status logic } } })

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

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

รายการ คำอธิบาย คะแนน
Docker Configuration Dockerfile สำหรับ Backend และ Frontend, docker-compose.yml, multi-stage build 3
GitLab CI/CD .gitlab-ci.yml พร้อม stages (build, test, deploy), environment variables 3
Database Migration Migration scripts, seeders, backup/restore strategy 2
Environment Config .env files, configuration management, secrets handling 1
Monitoring & Logging Health check endpoint, logging configuration, error tracking 1

docker-compose.yml

version: '3.8' services: database: image: mysql:8.0 container_name: recruitment_db environment: MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD} MYSQL_DATABASE: ${DB_NAME} MYSQL_USER: ${DB_USER} MYSQL_PASSWORD: ${DB_PASSWORD} ports: - "3306:3306" volumes: - db_data:/var/lib/mysql - ./server/migrations:/docker-entrypoint-initdb.d networks: - recruitment_network healthcheck: test: ["CMD", "mysqladmin", "ping", "-h", "localhost"] interval: 10s timeout: 5s retries: 5 backend: build: context: ./server dockerfile: Dockerfile container_name: recruitment_backend environment: NODE_ENV: production DB_HOST: database DB_PORT: 3306 DB_NAME: ${DB_NAME} DB_USER: ${DB_USER} DB_PASSWORD: ${DB_PASSWORD} JWT_SECRET: ${JWT_SECRET} SMTP_HOST: ${SMTP_HOST} SMTP_PORT: ${SMTP_PORT} SMTP_USER: ${SMTP_USER} SMTP_PASSWORD: ${SMTP_PASSWORD} ports: - "3000:3000" depends_on: database: condition: service_healthy volumes: - ./uploads:/app/uploads - ./logs:/app/logs networks: - recruitment_network restart: unless-stopped frontend: build: context: ./client dockerfile: Dockerfile args: NUXT_PUBLIC_API_BASE: ${API_BASE_URL} container_name: recruitment_frontend ports: - "80:3000" depends_on: - backend networks: - recruitment_network restart: unless-stopped redis: image: redis:7-alpine container_name: recruitment_redis ports: - "6379:6379" volumes: - redis_data:/data networks: - recruitment_network restart: unless-stopped volumes: db_data: redis_data: networks: recruitment_network: driver: bridge

.gitlab-ci.yml

stages: - build - test - deploy variables: DOCKER_DRIVER: overlay2 DOCKER_TLS_CERTDIR: "" # Build Backend build:backend: stage: build image: docker:latest services: - docker:dind script: - cd server - docker build -t $CI_REGISTRY_IMAGE/backend:$CI_COMMIT_SHA . - docker build -t $CI_REGISTRY_IMAGE/backend:latest . - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY - docker push $CI_REGISTRY_IMAGE/backend:$CI_COMMIT_SHA - docker push $CI_REGISTRY_IMAGE/backend:latest only: - main - develop # Build Frontend build:frontend: stage: build image: docker:latest services: - docker:dind script: - cd client - docker build -t $CI_REGISTRY_IMAGE/frontend:$CI_COMMIT_SHA . - docker build -t $CI_REGISTRY_IMAGE/frontend:latest . - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY - docker push $CI_REGISTRY_IMAGE/frontend:$CI_COMMIT_SHA - docker push $CI_REGISTRY_IMAGE/frontend:latest only: - main - develop # Test Backend test:backend: stage: test image: node:18 services: - mysql:8.0 variables: MYSQL_DATABASE: test_db MYSQL_ROOT_PASSWORD: test_password DB_HOST: mysql before_script: - cd server - npm install script: - npm run test - npm run test:coverage coverage: '/Statements\s+:\s+(\d+\.\d+)%/' artifacts: reports: coverage_report: coverage_format: cobertura path: server/coverage/cobertura-coverage.xml only: - main - develop # Test Frontend test:frontend: stage: test image: node:18 before_script: - cd client - npm install script: - npm run test:unit - npm run lint only: - main - develop # Deploy to Production deploy:production: stage: deploy image: alpine:latest before_script: - apk add --no-cache openssh-client - eval $(ssh-agent -s) - echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add - - mkdir -p ~/.ssh - chmod 700 ~/.ssh - ssh-keyscan $DEPLOY_SERVER >> ~/.ssh/known_hosts script: - ssh $DEPLOY_USER@$DEPLOY_SERVER "cd /opt/recruitment-system && docker-compose pull && docker-compose up -d --build" - ssh $DEPLOY_USER@$DEPLOY_SERVER "cd /opt/recruitment-system && docker system prune -f" only: - main when: manual environment: name: production url: https://recruitment.example.com # Deploy to Staging deploy:staging: stage: deploy image: alpine:latest before_script: - apk add --no-cache openssh-client - eval $(ssh-agent -s) - echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add - - mkdir -p ~/.ssh - chmod 700 ~/.ssh - ssh-keyscan $STAGING_SERVER >> ~/.ssh/known_hosts script: - ssh $DEPLOY_USER@$STAGING_SERVER "cd /opt/recruitment-system && docker-compose pull && docker-compose up -d --build" only: - develop environment: name: staging url: https://staging.recruitment.example.com

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

Backend Dockerfile

# Multi-stage build FROM node:18-alpine AS builder WORKDIR /app COPY package*.json ./ RUN npm ci --only=production COPY . . # Production stage FROM node:18-alpine WORKDIR /app RUN apk add --no-cache dumb-init COPY --from=builder /app/node_modules ./node_modules COPY --from=builder /app . RUN mkdir -p uploads logs && \ chown -R node:node /app USER node EXPOSE 3000 HEALTHCHECK --interval=30s --timeout=3s --start-period=40s \ CMD node healthcheck.js CMD ["dumb-init", "node", "server.js"]

Frontend Dockerfile

# Build stage FROM node:18-alpine AS builder WORKDIR /app COPY package*.json ./ RUN npm ci COPY . . ARG NUXT_PUBLIC_API_BASE ENV NUXT_PUBLIC_API_BASE=$NUXT_PUBLIC_API_BASE RUN npm run build # Production stage FROM node:18-alpine WORKDIR /app RUN apk add --no-cache dumb-init COPY --from=builder /app/.output ./.output COPY --from=builder /app/package*.json ./ USER node EXPOSE 3000 ENV NODE_ENV=production ENV HOST=0.0.0.0 ENV PORT=3000 CMD ["dumb-init", "node", ".output/server/index.mjs"]

สรุปข้อมูลสำหรับ Spreadsheet

คะแนนแต่ละหัวข้อ (ใส่ใน Spreadsheet)

หัวข้อ | คะแนนเต็ม | เปอร์เซ็นต์ ------------------------------------------ 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%

รายละเอียดตารางฐานข้อมูล (9 ตาราง)

1. users - ข้อมูลผู้ใช้งาน (HR, HR Manager, Applicant) 2. job_postings - ตำแหน่งงานที่เปิดรับสมัคร 3. applications - ใบสมัครงาน 4. documents - เอกสารประกอบการสมัคร (Resume, Transcript, etc.) 5. interviews - ตารางสัมภาษณ์ 6. application_status_history - ประวัติการเปลี่ยนสถานะใบสมัคร 7. departments - แผนกต่างๆ ในองค์กร 8. skills - ทักษะต่างๆ 9. applicant_skills - ทักษะของผู้สมัคร

API Endpoints สำคัญ

Authentication: POST /api/auth/login, /api/auth/register, /api/auth/logout Job Postings: GET/POST/PUT/DELETE /api/job-postings Applications: GET/POST/PUT /api/applications Documents: POST /api/applications/:id/documents Interviews: GET/POST/PUT /api/interviews Reports: GET /api/reports/dashboard, /api/reports/statistics

Vue Components หลัก (11 Components)

1. JobPostingForm.vue - ฟอร์มสร้างตำแหน่งงาน 2. JobListing.vue - รายการตำแหน่งงาน 3. ApplicationForm.vue - ฟอร์มสมัครงาน 4. ApplicationList.vue - รายการใบสมัคร 5. DocumentUpload.vue - อัปโหลด Resume และเอกสาร 6. InterviewScheduler.vue - จัดตารางสัมภาษณ์ 7. StatusTimeline.vue - Timeline สถานะใบสมัคร 8. Dashboard.vue - หน้าหลัก Dashboard 9. LoginForm.vue - ฟอร์ม Login 10. Pagination.vue - Component แบ่งหน้า 11. FilterPanel.vue - Panel กรองข้อมูล

เทคโนโลยีที่ใช้

Backend: Node.js + Express.js Frontend: Vue 3 (Composition API) + Nuxt 3 + Tailwind CSS Database: MySQL 8.0 / MariaDB / PostgreSQL ORM: Sequelize / TypeORM Authentication: JWT + bcrypt File Upload: Multer Email: Nodemailer Validation: express-validator, VeeValidate, Yup State Management: Pinia DevOps: Docker + Docker Compose + GitLab CI/CD

เอกสารนี้สามารถนำไปใช้ประกอบการตรวจงานได้ทันที

จัดทำโดย: ระบบ Recruitment System Evaluation