Sentinel System Series Part 3: ศูนย์บัญชาการหน้าบ้าน (The Command Center)

ยินดีต้อนรับสู่ตอนสุดท้ายของซีรีส์ Sentinel System (ระบบเฝ้าระวัง) ครับ! หลังจากที่เราได้เห็นการวางแผนใน ตอนที่ 1 และขุมพลังหลังบ้านใน ตอนที่ 2 แล้ว วันนี้ผมจะพาไปดู “หน้าตา” และ “ความรู้สึก” (UI/UX) ของระบบที่ผมสร้างขึ้นในฐานะ Lead Developer ครับ

1. Map-Centric Design: แผนที่คือหัวใจ

สำหรับระบบจัดการเหตุการณ์ ข้อมูลในรูปแบบตารางอย่างเดียวไม่เพียงพอ ผมจึงออกแบบให้ “แผนที่” (Google Maps) เป็นหัวใจหลักของ Dashboard

ภาพตัวอย่าง: ระบบแผนที่อัจฉริยะที่รองรับการแสดงผลเหตุการณ์แบบเรียลไทม์

• Bounds-based Cache Logic: เพื่อลดจำนวน API Calls และเพิ่มความเร็วในการไหลลื่นของแผนที่ ผมออกแบบระบบ Cache Bounds ให้ขยายพื้นที่โหลดข้อมูลออกไป 20% จากหน้าจอปัจจุบัน หากผู้ใช้เลื่อนแผนที่เพียงเล็กน้อย ระบบจะไม่ดึงข้อมูลใหม่แต่จะใช้ข้อมูลเดิมที่มีอยู่

flowchart LR
    Scroll[Admin Scroll Map] --> Check{Within 20% Cache?}
    Check -->|Yes| Cache[Use Cached Data]
    Check -->|No| Fetch[API: Get By Bounds]
    Fetch --> Update[Update Cache & UI]

• Real-time Incident Pinning: เมื่อมีการรายงานเหตุใหม่ หมุด (Markers) จะปรากฏบนแผนที่ทันที พร้อมไอคอนที่เปลี่ยนตามประเภทและสถานะเหตุการณ์

2. ชั้นข้อมูลพื้นที่ (Spatial Mapping & Editor)

ความโดดเด่นของโปรเจกต์นี้คือการจัดการพื้นที่ความรับผิดชอบผ่าน Spatial Mapping:

ภาพตัวอย่าง: เครื่องมือวาดพื้นที่ความรับผิดชอบ (Polygon Editor)

• Interactive Spatial Editor: ผมผสานเครื่องมือ terra-draw เข้ากับ Google Maps เพื่อให้ Admin สามารถวาดรูปหลายเหลี่ยม (Polygons) กำวจขอบเขตความรับผิดชอบได้โดยตรง
• Automatic Centroid Resolution: เมื่อวาดพื้นที่เสร็จ ระบบจะคำนวณจุดศูนย์กลางอัตโนมัติเพื่อระบุที่อยู่ของพื้นที่นั้นๆ และบันทึกเป็น GeoJSON ลงฐานหลังบ้าน

graph LR
    Draw[Draw Polygon on Map] --> Finish[Double Click to Finish]
    Finish --> Centroid[Calculate Centroid Point]
    Centroid --> Form[Fill Area Details]
    Form --> Save[Save to Backend as GeoJSON]

3. ประสิทธิภาพและความทันสมัย (Modern Tech Stack)

ในการสร้าง Web App ขนาดกลางถึงใหญ่ ผมเลือกใช้ TanStack Stack เพราะต้องการประสิทธิภาพและความเสถียรสูงสุด:

• TanStack Router: จัดการ Routing ได้อย่างแม่นยำ พร้อม Typesafety ตั้งแต่ URL parameter ไปจนถึง Component
• TanStack Query (React Query): ทำหน้าที่จัดการ Server State, Caching ข้อมูลเหตุการณ์ และการทำ Re-fetch เมื่อมีข้อมูลใหม่
• TanStack Table: ใช้จัดการตารางข้อมูลผู้ใช้งานและเหตุการณ์ที่รองรับการ Sort, Filter และ Pagination ในปริมาณมหาศาลได้อย่างลื่นไหล

graph LR
    UI[Frontend Components] --> Query[TanStack Query]
    Query <--> Server[(Backend API)]
    UI --> Router[TanStack Router]
    UI --> Table[TanStack Table]
    style Query fill:#ff8c00,color:#fff

3. Spatial Area Editor: เครื่องมือจัดการพื้นที่

ฟีเจอร์ที่ผมภูมิใจนำเสนอคือ Spatial Area Editor ซึ่งเป็นเครื่องมือที่ช่วยให้ Admin สามารถ “วาด” ขอบเขตพื้นที่ความรับผิดชอบ (Polygons) ลงบนแผนที่ได้โดยตรง

• ใช้เทคโนโลยีตัดพื้นที่เชิงพิกัดร่วมกับ PostGIS ใน Backend
• ช่วยให้การมอบหมายงาน (Assignment) ทำได้โดยอัตโนมัติเมื่อพิกัดของเหตุการณ์ตกอยู่ในพื้นที่ที่กำหนดไว้

4. ระบบแจ้งเตือนเรียลไทม์ (FCM Integration)

เพื่อให้ทันต่อเหตุการณ์ ผมได้เชื่อมต่อระบบ Firebase Cloud Messaging (FCM) เข้ากับเว็บแอปพลิเคชัน:

• Notification Bell: แสดงการแจ้งเตือนเหตุใหม่ในพื้นที่ที่เกี่ยวข้อง
• Push Notifications: ส่งตรงถึงเบราว์เซอร์ของเจ้าหน้าที่ประสานงาน แม้จะไม่ได้เปิดแท็บ Dashboard ทิ้งไว้

sequenceDiagram
    participant Cloud as Firebase (FCM)
    participant SW as Service Worker
    participant Web as Dashboard UI
    participant Map as Google Maps API

    Cloud->>SW: Push Notification Received
    SW->>Web: PostMessage (Incident Data)
    Web->>Web: Invalidate TanStack Query
    Web->>Map: Add New Marker (Bounce Animation)
    Web->>Web: Show Toast Notification

5. สรุปภาพรวมโครงการ

การสร้าง Sentinel System (ระบบเฝ้าระวัง) ตั้งแต่การวิเคราะห์ (Analysis), การวางโครงสร้าง (Backend), จนถึงการทำอินเทอร์เฟซ (Frontend) ทั้งหมดนี้เป็นการผสานเทคโนโลยีสมัยใหม่ (Modern Stack) เพื่อตอบโจทย์การใช้งานจริงในภาครัฐและประชาชน

ในฐานะนักพัฒนา เป้าหมายสูงสุดของผมคือการเห็นซอฟต์แวร์ที่สร้างขึ้นได้ช่วยลดความสูญเสียและเพิ่มประสิทธิภาพในการทำงานของผู้คนครับ

---

ขอบคุณที่ติดตามอ่านซีรีส์ Sentinel System (ระบบเฝ้าระวัง) จบครบทั้ง 3 ตอนครับ! หากมีข้อสงสัยหรืออยากพูดคุยเรื่อง Stack ที่ใช้ สามารถติดต่อผมได้เสมอครับ

กลับไปดูหน้าบทความทั้งหมด