การเก็บสถิติการใช้งาน

เว็บไซต์นี้เก็บสถิติหน้าที่เข้าชมและลิงก์ที่คลิกเพื่อนำไปปรับปรุงพอร์ตโฟลิโอ คุณปฏิเสธได้โดยยังใช้งานเว็บไซต์ได้ตามปกติ

ใช้ Central Analytics · เปลี่ยนตัวเลือกได้ทุกเมื่อที่ “ตั้งค่าสถิติการใช้งาน”

รายละเอียดการเก็บข้อมูล

Central Analytics ใช้รหัสผู้เข้าชมใน localStorage และรหัสเซสชันใน sessionStorage โดยเซสชันหมดอายุเมื่อไม่มีการใช้งาน 30 นาที ตัวเลือกและรหัสผู้เข้าชมไม่มีวันหมดอายุอัตโนมัติ ไม่ส่งข้อความจากแบบฟอร์ม พารามิเตอร์ URL หรือ fragment ไปยังระบบสถิติ การปฏิเสธจะหยุดการเก็บข้อมูลครั้งถัดไป แต่ไม่ลบข้อมูลที่ส่งไปแล้ว

EN
กลับไปหน้าผลงาน

Clean Water Monitoring (IoT + Real-time Dashboard)

โปรเจกต์ปริญญานิพนธ์ที่เชื่อมเซ็นเซอร์คุณภาพน้ำกับ Dashboard แบบ Real-time ส่งข้อมูลผ่าน MQTT ไปยัง Firebase ใช้ React และ Express API สำหรับแผนที่จุดบริการ และการแจ้งปัญหา โดยแยกการเข้าสู่ระบบผ่าน LINE LIFF และการยืนยันตัวตนของ Admin

บทบาท
Fullstack Developer / IoT Developer
เทคโนโลยี
React, Node.js, Express, Firebase Realtime Database, MQTT

ค่าจากเซ็นเซอร์กลายเป็นข้อมูลที่คนใช้งานได้อย่างไร?

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

ดูเบื้องหลังระบบนี้

  1. เซ็นเซอร์

    เซ็นเซอร์วัดค่า pH, TDS, ความขุ่น และอุณหภูมิ

  2. MQTT

    MQTT ส่งค่าจากเซ็นเซอร์ไปยังบริการข้อมูล

  3. Firebase

    Firebase Realtime Database จัดเก็บและซิงก์ค่าที่ได้รับ

  4. Dashboard

    หน้า React แสดงค่าคุณภาพน้ำร่วมกับตำแหน่งจุดบริการ

ภาพบันทึกเดิมจาก Terminal ของ Playwright แสดงรายการตรวจหน้า Admin Dashboard การแจ้งปัญหา การจัดการสถานที่ และผู้ใช้ที่ทำงานเสร็จแล้ว
ภาพบันทึกเดิมบางส่วนของ Execution Log แสดงชื่อรายการตรวจหน้า Admin
ดูงานทดสอบที่สร้างขึ้นสำหรับระบบนี้

ดูการทดสอบ API, UI และ E2E ของระบบนี้

ภาพ 1 / 4เปิดภาพขนาดใหญ่

หน้าจอมือถือแสดงแผนที่จุดบริการ ค่าคุณภาพน้ำ และรายการสถานที่

หน้าที่รับผิดชอบ

  • ออกแบบและพัฒนา REST API ด้วย Express.js ครบ 6 โมดูล
  • พัฒนา Frontend ด้วย React และ Chakra UI
  • เชื่อมต่อ Firebase Realtime Database สำหรับจัดเก็บและ sync ข้อมูลเซ็นเซอร์
  • ตั้งค่า MQTT Broker เพื่อรับข้อมูลจากอุปกรณ์ IoT
  • เชื่อมต่อ LINE LIFF SDK และจัดการ JWT Token สำหรับ Admin
  • สร้างระบบ CRUD สำหรับจัดการจุดบริการ ผู้ใช้ และอุปกรณ์ IoT
  • พัฒนาระบบอัปโหลดรูปภาพผ่าน Cloudinary
  • Deploy Frontend บน Vercel และ Backend บน Render

การตัดสินใจด้านการออกแบบและพัฒนา

  • พัฒนา Full-stack แยก React SPA กับ Express API คนละ Service
  • รับข้อมูลจากเซ็นเซอร์ IoT ผ่าน MQTT Protocol แบบ Real-time
  • ใช้ LINE LIFF SDK ให้ผู้ใช้เข้าระบบผ่าน LINE Account ได้เลย
  • แยก Admin Dashboard ออกจาก User Portal ชัดเจน

ความสามารถหลัก

  • Real-time Dashboard — แสดงกราฟค่า pH, TDS, ความขุ่น, อุณหภูมิ อัปเดตทันทีจากเซ็นเซอร์ ด้วย Chart.js
  • แผนที่จุดให้บริการน้ำ — แสดงตำแหน่งจุดบริการน้ำดื่มบนแผนที่ด้วย Leaflet.js
  • ระบบยืนยันตัวตน 2 รูปแบบ — ผู้ใช้ทั่วไปเข้าผ่าน LINE LIFF, Admin เข้าด้วย JWT
  • แจ้งปัญหาได้พร้อมแนบรูปภาพ — อัปโหลดรูปเก็บไว้ที่ Cloudinary
  • จัดการเอกสารผลตรวจน้ำ — อัปโหลดและดาวน์โหลดรายงาน Lab
  • จัดการสิทธิ์ผู้ใช้ตามบทบาท — Admin, Lab Staff, User เห็นข้อมูลต่างกัน
  • Activity Logs — บันทึกประวัติการใช้งานเพื่อตรวจสอบย้อนกลับ
  • Device Management — ลงทะเบียนและตรวจสอบสถานะอุปกรณ์เซ็นเซอร์
  • REST API 6 โมดูล — auth, locations, issues, users, devices, logs

โน้ตที่เกี่ยวข้อง