← กลับไปหน้าผลงาน
geo-risk-map (Disaster-warning Platform)
May 2025 – Presentทีม 2 คน — frontend หลัก + API (ระบบเฝ้าระวังภัยพิบัติ)210+ commits
โปรเจกต์นี้คืออะไร
Frontend หลัก + API ของระบบเฝ้าระวัง/แจ้งเตือนภัยพิบัติระดับตำบล (ดินถล่ม/น้ำท่วม) — consume ผล rain analysis จาก radar pipeline + รายงานภาคสนาม + แจ้งเหตุจากประชาชน
ดูของจริงจุดเด่นทางเทคนิค
- Auth 3 ระดับ (admin / เจ้าหน้าที่ / ประชาชน) + visitor analytics แยกจังหวัด/ปี
- Safety-cane (ไม้เท้านิรภัย) tracking ผ่าน QR/Barcode scan + admin map
- Landslide reports ภาคสนาม + multi-image upload (Cloudinary) + verify workflow
- Incident reports จากประชาชน + response chain (pending → acknowledged → responding → arrived → resolved)
- Rainfall loop (ฝน 1 ชม. ย้อนหลัง 4 เฟรม) consume ZSET จาก radar pipeline + Mongo fallback
- แผนที่ Leaflet/react-leaflet: rain-intensity grid overlay + KML flood-inundation polygon 7+ ระดับน้ำ (Y1C_07.0m…10.0m) + landslide point layer (dedup-by-cell กัน grid ซ้อนดำเบิ้ล)
- Custom UTM Zone 47N ↔ lat/lng transform (WGS84, k0=0.9996) เขียนเองเพื่อ align radar grid กับพิกัดไทย
- GeoJSON/KML parsing (@mapbox/togeojson) ป้อน district-boundary + flood layer; deploy จริงผ่าน GitHub Actions CI/CD (pm2) + 9 Jest test (grid filter / coordinate math / rain-loop dedup)
- แจ้งเตือนฝนอัตโนมัติเข้า Telegram ทุก 15 นาที (POST /api/rain-alerts/telegram) — อ่าน rain-analysis จาก MongoDB, join id_utm → ชื่อตำบล(อำเภอ), แจ้งเฉพาะพื้นที่ระดับส้ม/แดง/ม่วง; Redis ทำ delivery lease + dedup กันส่งซ้ำ; snapshot safety gate (canonical 15-min round + freshness + cardinality probe) กันแจ้งเตือนจากข้อมูลไม่ครบ
เทคโนโลยีที่ใช้
Next.js 15NextAuth + JWT (jose + bcryptjs)Prisma + MongoDB (15+ models)Leaflet + react-leaflet + Google MapsGeoJSON / KML (@mapbox/togeojson)UTM Zone 47N↔WGS84 transform (custom)GitHub Actions CI/CD + JestBullMQ + ioredisCloudinaryhtml5-qrcode + jsbarcode
อยากรู้เบื้องหลังหรือคุยเรื่องเทคนิคของโปรเจกต์นี้?
ทักมาถามได้เลย หรือตามอ่านบทเรียนที่ผมสรุปไว้ในบล็อก