สำหรับนักพัฒนา

ข้อมูลเทคนิคของ BD2LGS

Full-stack Learning Guidance System ที่ผสมผสาน Algorithm Recommendation, Real-time Tracking และ Vercel Serverless เข้าด้วยกัน

System Architecture

3 Layers — Client → Vercel → Supabase

SSR บน Vercel Serverless Functions, ข้อมูลถูกป้องกันด้วย Row-Level Security ทุก request ผ่าน JWT Middleware เพื่อให้มั่นใจว่าไม่มีข้อมูลหลุดข้ามบทบาท

CLIENT
React UI
Zustand
React Query
Event Buffer
EDGE
Vercel
Next.js SSR + API Routes
SUPABASE
PostgreSQL 17 + RLS
Auth (JWT)
pg_cron

SSR on Vercel

Next.js App Router ทำงานบน Vercel Serverless Functions

Row-Level Security

ทุกตารางมี RLS — นักเรียนเห็นแค่ข้อมูลของตัวเอง

Batch Processing

ประมวลผล Interest Score ทุกคืน ไม่กระทบ UX ระหว่างวัน

Technology Stack

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

Next.js
React
TypeScript
Tailwind CSS
Drizzle ORM
PostgreSQL
Supabase
Vercel
GitHub
Zod
UI

Frontend

  • Next.js 16 — App Router + SSR
  • React 19 — Server Components
  • TypeScript 5 — End-to-end Type Safety
  • Tailwind CSS 4 — Utility-first
  • shadcn/ui — Accessible Components

State

State & Data

  • Zustand — Lightweight Client State
  • TanStack React Query — Server State + Cache
  • React Hook Form — Form Management
  • Zod — Runtime Schema Validation

Backend

Backend & DB

  • Supabase (PostgreSQL) — Cloud DB + RLS
  • Supabase Auth — JWT Authentication
  • pgcrypto — Bcrypt Encryption
  • pg_cron — Scheduled Batch Processing

Infra

Deployment

  • Vercel — Production Deployment
  • GitHub — Version Control
  • Drizzle ORM — Schema & Migrations
  • Drizzle Kit — Migration CLI

*ในอนาคตอาจมีการเปลี่ยนแปลงได้ตามความเหมาะสมและประสิทธิภาพที่ดีที่สุดในแต่ละช่วงเวลา

Features Overview

9+ ฟีเจอร์หลัก ออกแบบมาเพื่อทุกบทบาท

แต่ละฟีเจอร์ออกแบบมาเพื่อนักเรียน หัวหน้าห้อง ครู และผู้ดูแลระบบ

Feed

Personalized Feed

ฟีดกิจกรรมที่จัดเรียงด้วย Algorithm Recommendation — รองรับ Cold-Start, Collaborative Filtering และ Serendipity Detection

Contests

การแข่งขัน

ค้นหา + บันทึก + ติดตามเดดไลน์ พร้อม Urgency Badge สีแดงเมื่อเหลือ ≤3 วัน — Optimistic Updates

Homework

การบ้าน

รองรับ Recurring (รายวัน/สัปดาห์), ระดับความสำคัญ 1-5, เวลาโดยประมาณ และ Completion Tracking

Timer

Study Timer

จับเวลาเรียน + คำนวณ Focus Ratio (เวลาจริง / เวลาที่วางแผน) เชื่อมโยงกับวิชาและการบ้าน

Groups

กลุ่มศึกษา

สร้างกลุ่ม + รหัสเชิญ 8 ตัวอักษร, แบ่ง Subtask ให้สมาชิก ติดตามสถานะ Real-time ผ่าน Supabase Realtime

GPAX

GPAX Calculator

บันทึกเกรดรายวิชา คำนวณ GPAX ถ่วงน้ำหนักตามหน่วยกิต

Notifications

การแจ้งเตือน

Badge แสดงจำนวนที่ยังไม่อ่าน (สูงสุด 99+), ดึงข้อมูลอัตโนมัติทุก 60 วินาที

Teacher

Teacher Portal

ดูรายชื่อนักเรียน + Completion Rate, สร้าง/จัดการการบ้านและการแข่งขัน, ดูสถานะรายคน

Admin

Admin Dashboard

Funnel Analysis, Cohort Retention, NDCG Trend, Position Bias Curve, A/B Testing ด้วย Thompson Sampling, Health Monitoring

Recommendation Algorithm

7 ขั้นตอน — จาก Raw Events สู่ Feed

ระบบใช้ Composite Interest Score ที่ผสมผสานสัญญาณพฤติกรรม, Diversity Reranking และอื่นๆ เพื่อให้ฟีดมีทั้งความเกี่ยวข้องและความหลากหลาย

STEP 1

Signal Extraction

ดึงสัญญาณพฤติกรรม 5 ชนิดจาก Raw Events: ความถี่ในการดู, การบันทึก, การคลิก, การมีส่วนร่วม, และเวลาที่ใช้ — แต่ละสัญญาณมี Time Decay ตามอายุข้อมูล

Events เก่ากว่า 90 วัน จะถูกลบ — Time Decay: exp(-0.05 × days)

STEP 2

Composite Interest Score

รวมสัญญาณทั้ง 5 เข้าด้วยกันด้วยค่าน้ำหนักที่ปรับได้ ผ่าน Tanh Normalization เพื่อบีบค่าให้อยู่ในช่วงที่เหมาะสม

ค่าน้ำหนักแต่ละตัวปรับได้ผ่าน Admin Dashboard

STEP 3

Bayesian Smoothing

ปรับคะแนนในหมวดหมู่ที่มีข้อมูลน้อย เพื่อป้องกัน Overfitting — ใช้ค่าเฉลี่ยแบบ Global เป็นจุดอ้างอิง

STEP 4

Context Multiplier

ปรับคะแนนตามปฏิทินการศึกษา — ลดเนื้อหาในสัปดาห์สอบ เพิ่มการสำรวจในวันหยุด

ดึงข้อมูลจาก School Calendar ในฐานข้อมูล

STEP 5

Cold-Start Handling

สำหรับผู้ใช้ใหม่ที่มีข้อมูลน้อย ระบบใช้ Collaborative Filtering + Jaccard Similarity เปรียบเทียบกับผู้ใช้ที่มีความสนใจคล้ายกัน

ใช้ข้อมูล "สิ่งที่สนใจ" ขตอนลงทะเบียนเป็นจุดเริ่มต้น แล้วค่อยๆ ผสมผสานข้อมูลจริงเข้ามา

STEP 6

Psychological Score

ปรับคะแนนตามปัจจัยจิตวิทยา 6 ด้าน: แรงจูงใจ ภาระทางปัญญา ความวิตกกังวล แรงกดดันทางสังคม การแสวงหาสิ่งใหม่ และพฤติกรรมตามช่วงเวลา

PCS สูง (มีแรงจูงใจ ไม่เหนื่อย) → เพิ่มเนื้อหาท้าทาย / PCS ต่ำ → แนะนำเนื้อหาที่ปลอดภัยกว่า

STEP 7

MMR Reranking

จัดเรียงใหม่ด้วย Maximal Marginal Relevance เพื่อสร้างความหลากหลายในฟีด — ไม่ให้เนื้อหาพื้นที่เดียวกันเรียงติดกัน

เลือก Top 20 รายการหลัง Reranking → บันทึกลง Feed Cache (TTL ตั้งค่าได้)

*อยู่ในระหว่างการพัฒนา บางส่วนอาจยังไม่สมบูรณ์หรือมีการเปลี่ยนแปลงในอนาคต

Algorithm Playground

ทดลองคำนวณ — Recommendation Score

ปรับค่าสัญญาณพฤติกรรมด้านล่าง

Algorithm Playground

ทดลองปรับค่าสัญญาณ แล้วดูผลลัพธ์แบบเรียลไทม์

Behavioral Signals

ความถี่ในการดู (View)12

จำนวนครั้งที่เข้าดูเนื้อหาในหมวดนี้

การบันทึก (Save)5

บันทึก +1, ยกเลิก -0.5

คลิกลิงก์ (Click)3

คลิกเปิดลิงก์ภายนอก

มีส่วนร่วม (Active)2

สมัคร, ทำกิจกรรมกลุ่ม, จับเวลา

เวลาที่ใช้ (นาที)30

เวลาที่ใช้ดูเนื้อหาในหมวดนี้ (dwell time)

Context

Event Count

50

Processing Pipeline

1
2
3
4
5
6

Recommendation Score

0.636Score

ปานกลาง-สูง — มีโอกาสปรากฏในฟีด

Intermediate Values

Normalized Signals

0.83 · 0.76 · 0.36 · 0.58 · 0.46

ค่าสัญญาณหลัง Normalization

Raw Score

0.6696

คะแนนก่อนปรับ

Bayesian

0.6360

หลัง Smoothing

Final

0.6360

หลัง Context Multiplier

Database Schema

PostgreSQL — ภาพรวมฐานข้อมูล

โครงสร้างที่ออกแบบมาเพื่อความปลอดภัยและประสิทธิภาพ

ผู้ใช้และการยืนยันตัวตน

Profiles, Auth Sessions, Role Management — รองรับ 4 Roles (Student, Room Leader, Teacher, Admin)

กิจกรรมและการแข่งขัน

Activities, Contests, Deadlines — พร้อม Urgency Scoring และ Optimistic Updates

การบ้านและการเรียน

Homework, Subjects, Study Timers — Recurring Tasks รายวัน/สัปดาห์ + Completion Tracking

กลุ่มศึกษา

Groups, Members, Invitations, Subtasks — รหัสเชิญ 8 ตัวอักษร + Realtime Board

ระบบแนะนำ

Interest Scores, Feed Cache, Event Logs — Batch Processing ทุกคืนด้วย pg_cron

การแจ้งเตือนและ Analytics

Notifications, Event Tracking, A/B Tests — รองรับ Real-time Badge Count + Thompson Sampling

Row-Level Security

ทุกตารางที่มีข้อมูลส่วนบุคคลถูกป้องกันด้วย RLS Policy — นักเรียนเห็นแค่ข้อมูลตัวเอง, ครูเห็นข้อมูลนักเรียนในชั้นที่สอน, Admin เห็นทั้งหมดแต่ไม่สามารถแก้ไขข้อมูลข้ามบทบาทได้

API Overview

43+ API Endpoints

ทุก Endpoint ผ่าน JWT Middleware
(student → room_leader → teacher → admin)

Authentication

5
  • เข้าสู่ระบบ
  • ลงทะเบียน
  • ออกจากระบบ
  • ตรวจสอบ Recovery Code
  • ตั้งรหัสผ่านใหม่

Main Features

22
  • Feed (For-You + All) + Mirror Card
  • Event Tracking (Batch)
  • Contests CRUD + Save/Unsave
  • Homework + Completion Toggle
  • Study Groups + Join + Tasks
  • Study Timer Sessions (Start/End)
  • GPAX Management (Get/Upsert)
  • Notifications (List + Mark Read)

Admin Analytics

9
  • Health Monitoring
  • Overview Metrics
  • Behavior Analytics
  • Interest Score Distribution
  • Feed Quality (NDCG) Metrics
  • Weight Management (Get/Update)
  • A/B Test Results + Reset

Teacher Portal

7
  • ดูรายชื่อนักเรียน + Completion Stats
  • จัดการการบ้าน (CRUD)
  • สถานะ Completion รายคน
  • ลบการแข่งขัน

Event Tracking System

ใช้ Client-side Event Buffer — รวบรวม Events ไว้ในหน่วยความจำ แล้ว Flush เป็น Batch ตาม Timer / Threshold / Page Unload / Tab Hidden — ส่ง Rate Limited เพื่อลดภาระ Network

*อยู่ในระหว่างการพัฒนา API บางส่วนอาจยังไม่สมบูรณ์หรือมีการเปลี่ยนแปลงในอนาคต

Coming Soon

แล้วพบกันเร็วๆนี้

BD2LGS สร้างขึ้นโดยนักเรียน บดินทรเดชา ๒ด้วย passion เพื่อแก้ปัญหาจริงในโรงเรียน