CSLogbook - ระบบบริหารจัดการและติดตามความก้าวหน้าทางวิชาการ

เว็บแอปพลิเคชัน Full-stack สำหรับจัดการ Academic Workflow ติดตามการฝึกงาน โครงงานพิเศษ และปริญญานิพนธ์ของนักศึกษาวิทยาการคอมพิวเตอร์ มจพ.

1. Overview#

CSLogbook (https://cslogbook.me) คือระบบเว็บแอปพลิเคชัน Full-stack ศูนย์กลางการบริหารจัดการและติดตามกระบวนการทางวิชาการ (Academic Workflow Tracking) ของภาควิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีพระจอมเกล้าพระนครเหนือ (KMUTNB) ครอบคลุม 3 สายงานหลัก: การฝึกงาน (Internship), โครงงานพิเศษ (Special Project), และปริญญานิพนธ์ (Thesis)

2. Stories & Visual Tour#

Dashboard & Activity Overview#

CSLogbook Dashboard Dashboard แสดงภาพรวมความคืบหน้าทางวิชาการ การแจ้งเตือนสถานะคำร้อง และขั้นตอนที่ต้องดำเนินการถัดไปแบบเรียลไทม์

Daily Logbook System#

CSLogbook Daily Log ระบบบันทึก Logbook การปฏิบัติงานรายวัน พร้อมฟังก์ชันแนบรายงานผลและระบบตรวจรับรองจากอาจารย์ที่ปรึกษา

Clock-in & Work Hours Tracking#

ระบบบันทึกเวลาเข้า-ออกงาน คำนวณชั่วโมงฝึกงานสะสมอัตโนมัติ และระบบบันทึกการลาตามเกณฑ์หลักสูตร

Thesis & Defense Milestone Tracking#

CSLogbook Thesis Progress ตารางติดตามความคืบหน้า ตรวจสอบเงื่อนไขการปลดล็อก (Unlock Conditions) และประวัติการสอบปริญญานิพนธ์

Mentor & Enterprise Evaluation#

CSLogbook Mentor Management ระบบจัดการข้อมูลพี่เลี้ยงและสถานประกอบการ พร้อมส่งลิงก์ประเมินผลผ่าน Secure Cryptographic Public Token

Company & Workplace Directory#

CSLogbook Company Directory ระบบค้นหา ตรวจสอบ และขึ้นทะเบียนสถานประกอบการที่ผ่านการรับรองสำหรับนักศึกษา

3. Architecture & Workflows#

💡 Interactive Visual Viewers (Archify):

🖥️ เปิดดู Interactive Full-stack Architecture (Full Screen) — ซูม, โฟกัส Component และสลับ Light/Dark Mode

🔄 เปิดดู Interactive Academic Workflow Trace Viewer — Trace Motion แสดง State Machine และ Approval Pipeline แบบแอนิเมชัน

System Architecture (Infographic)#

1
flowchart TB
2
    subgraph Client["Client Tier (Next.js 16 App Router)"]
3
        UI_AUTH["Auth Layer\nKMUTNB SSO + Scoped JWT"]
4
        UI_STU["Student Portal\n(คพ.02 / คพ.03 / คพ.05 / Logbook)"]
5
        UI_ADV["Advisor Portal\n(Review & Granular Approvals)"]
6
        UI_ADM["Admin Portal\n(Manage / Override / Excel Engine)"]
7
        UI_SUP["External Supervisor\n(Token-based Evaluation)"]
8
    end
9

10
    subgraph Proxy["Reverse Proxy & Gateway"]
11
        NGINX["Nginx (Port 80/443 SSL)\n- / -> Next.js :3000\n- /api/ -> Express :5000\n- /uploads/ -> Static PDFs"]
12
    end
13

14
    subgraph API["Backend Tier (Express REST API)"]
15
        MID["Middleware (Auth, RBAC, RateLimit)"]
16
        SRV["Service Layer (Workflow Engine, DocBuilder)"]
17
        NOTIF["Real-time & Telemetry (Socket.io + Winston)"]
18
    end
19

20
    subgraph Storage["Data Tier (MySQL 8.0 & Storage)"]
21
        DB[(MySQL 8.0 Database\n48 Models / 103+ Migrations)]
22
        UPLOADS["File Storage\n(Signed PDFs & Documents)"]
23
    end
24

25
    Client --> NGINX
26
    NGINX --> UI_AUTH
27
    NGINX --> MID
28
    MID --> SRV
29
    SRV --> DB
30
    SRV --> UPLOADS
31
    SRV --> NOTIF

State Machine Approval Pipeline#

1
sequenceDiagram
2
    autonumber
3
    actor S as นักศึกษา (Student)
4
    actor A as อาจารย์ที่ปรึกษา (Advisor)
5
    actor ADM as เจ้าหน้าที่ (Admin)
6
    participant SYS as CSLogbook API & DB
7

8
    Note over S, SYS: 1. ยื่นคำร้อง / ตรวจสอบสิทธิ์ (State Transition Guard)
9
    S->>SYS: ส่งคำร้อง (คพ.05 / คพ.02 / ยื่นขอสอบ)
10
    SYS-->>SYS: ตรวจสอบ Unlock Conditions (เกณฑ์หน่วยกิต / บันทึกพบที่ปรึกษา >= 4 ครั้ง)
11
    SYS->>SYS: อัปเดตสถานะเป็น "Pending"
12

13
    alt Special Project & Thesis Flow
14
        SYS->>A: แจ้งเตือนอาจารย์ที่ปรึกษา
15
        A->>SYS: ตรวจสอบและอนุมัติ (Advisor Approved)
16
        SYS->>ADM: ส่งต่อคำร้องให้เจ้าหน้าที่
17
    else Internship Flow
18
        SYS->>ADM: ส่งคำร้องตรงถึงเจ้าหน้าที่ภาควิชา
19
    end
20

21
    Note over ADM, SYS: 2. อนุมัติขั้นสุดท้าย & ออกเอกสารทางการอัตโนมัติ
22
    ADM->>SYS: ตรวจสอบและอนุมัติขั้นสุดท้าย (Officer Approved)
23
    SYS->>SYS: สร้างเอกสาร PDF อัตโนมัติ (หนังสือขอความอนุเคราะห์ / หนังสือส่งตัว)
24
    SYS-->>S: ปลดล็อกดาวน์โหลดเอกสาร และเปิดใช้งานสเต็ปถัดไป

4. Key Engineering Highlights#

Multi-Role RBAC & Public Token: ระบบ 4 บทบาท (Student, Advisor, Admin, Supervisor) พร้อม Public Cryptographic Token ให้พี่เลี้ยงภายนอกประเมินงานโดยไม่ต้องสร้าง Account
State Machine & Dynamic Engine: ควบคุมสถานะคำร้องด้วย workflowStates.ts และ canTransition() ป้องกัน Race Condition และบังคับตรวจ Unlock Conditions
Staff Backoffice & Matrix: แดชบอร์ดจัดการข้อมูลนักศึกษา, ระบบ Rubric Scoring Matrix สำหรับคิดคะแนนสอบ และ Dynamic Excel/PDF Generator
DevOps & Infrastructure: รันระบบผ่าน Docker Compose หลัง Nginx Reverse Proxy พร้อม Winston Logging และ GitHub Actions CI/CD Deploy ตรงสู่ VPS

5. My Role & What I Built#

ในฐานะ Full-stack Developer ผมรับผิดชอบการพัฒนาแบบ End-to-End:

Frontend: ออกแบบ UI ด้วย Next.js 16 (App Router), React 19, TypeScript และสร้าง Step Workflow Components
Backend & API: พัฒนา RESTful API บน Node.js/Express, ระบบ RBAC, State Machine และ Engine ออกรายงาน Excel (ExcelExportBuilder)
Database: ออกแบบ Schema บน MySQL 8.0 (48 Models) และ Migration Scripts 103+ ตัวด้วย Sequelize
DevOps: จัดการ Docker Compose, Nginx SSL, Winston Logging และ CI/CD Pipeline ผ่าน GitHub Actions

6. Result & Current State#

UAT Passed: ผ่านการทดสอบระดับ User Acceptance Testing (UAT) ครอบคลุม 34 Test Cases
Production Live: Deploy ใช้งานจริงบน VPS ภายใต้โดเมน https://cslogbook.me อย่างเสถียร

7. Demo & Code#

Live System: https://cslogbook.me
GitHub Repository: Manchinn/CSLogbook