ระบบควบคุม IoT แบบเต็มรูปแบบด้วย Pico W (CircuitPython), Express.js Backend, React Frontend และ MQTT สำหรับควบคุมจากระยะไกล
โปรเจ็กต์นี้ประกอบด้วย 3 ส่วนหลัก:
- Pico W (IoT Device): ควบคุมรีเลย์และเปิด REST API + MQTT พร้อม NTP time sync
- Express Backend: Gateway API, MQTT client, scheduler service และ mock mode สำหรับทดสอบ
- React Frontend: Professional dashboard UI พร้อม real-time updates, animated counter clock, และ scheduling interface
┌─────────────────────────────────────────────────────────────────┐
│ Local Network (192.168.x.x) │
│ │
│ ┌──────────────┐ HTTP API ┌──────────────┐ │
│ │ │◄────────────────────►│ │ │
│ │ Pico W │ │ Backend │ │
│ │ (code.py) │ │ (Express.js) │ │
│ │ │◄─────────────────────┤ │ │
│ │ GPIO14 │ MQTT (Optional) │ Port 3001 │ │
│ │ Relay │ │ │ │
│ └──────────────┘ └───────┬──────┘ │
│ ▲ │ │
│ │ │ REST API │
│ │ ▼ │
│ │ ┌──────────────┐ │
│ │ │ Frontend │ │
│ │ │ (React + │ │
│ └──────────Real-time───────────┤ Vite) │ │
│ Status Update │ Port 3000 │ │
│ └──────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
│
│ MQTT WebSocket (Optional)
▼
┌─────────────────┐
│ Public MQTT │
│ Broker │
│ broker.hivemq.com│
└─────────────────┘
┌────────────────────────┐ ┌────────────────────────┐
│ Home Network │ │ Cloud/VPS/Internet │
│ (192.168.1.x) │ │ │
│ │ │ │
│ ┌──────────────┐ │ │ ┌──────────────┐ │
│ │ Pico W │ │ MQTT Pub/Sub │ │ Backend │ │
│ │ (code.py) │◄─────┼────────────────────┼─►│ (Express.js) │ │
│ │ │ │ │ │ │ │
│ │ GPIO14 │ │ │ │ MongoDB │ │
│ │ Relay │ │ │ │ Atlas │ │
│ └──────────────┘ │ │ └───────┬──────┘ │
│ ▲ │ │ │ │
│ │ │ │ │ HTTPS API │
│ │ │ │ ▼ │
│ │ │ │ ┌──────────────┐ │
│ │ │ │ │ Frontend │ │
│ │ │ MQTT WebSocket │ │ (React + │ │
│ └──────────────┼────────────────────┼──┤ Vite) │ │
│ Real-time │ │ │ │ │
│ Status │ │ └──────────────┘ │
│ │ │ │
└────────────────────────┘ └────────────────────────┘
│ │
│ ┌─────────────────┐ │
└───────────► Public MQTT ◄───────┘
│ Broker │
│ broker.hivemq.com│
│ Port: 1883 (TCP)│
│ Port: 8884 (WSS)│
└─────────────────┘
1. Control Command:
User → Frontend (React) → Backend (Express) → MQTT Broker
↓
Pico W → Relay ON/OFF
2. Status Update (Real-time):
Relay → Pico W → MQTT Broker → Frontend (WebSocket) → UI Update
↓
Backend (Subscribe) → Database (Schedule Sync)
3. Scheduled Task:
Scheduler (Backend) → Check Time → Execute → MQTT Broker → Pico W → Relay
┌─────────────────────────────────────────────────────────────────────┐
│ Pico W Simulator (Python) │
│ • Python 3.x │
│ • Flask (HTTP Server) │
│ • paho-mqtt (MQTT Client - TCP port 1883) │
│ • ntplib (NTP Client - time.navy.mi.th) │
│ • threading (Concurrent HTTP + MQTT) │
└─────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────┐
│ Pico W (IoT Device) │
│ • CircuitPython 9.x │
│ • adafruit_httpserver (REST API) │
│ • adafruit_minimqtt (MQTT Client - TCP port 1883) │
│ • NTP Client (time.navy.mi.th) │
│ • GPIO Control (digitalio) │
└─────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────┐
│ Backend (Express.js) │
│ • Node.js + Express 4 │
│ • MQTT.js (TCP Client - port 1883) │
│ • Mongoose (MongoDB Atlas) │
│ • Luxon (Timezone handling) │
│ • Axios (HTTP Client) │
│ • node-cron (Scheduler - every 10s) │
└─────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────┐
│ Frontend (React) │
│ • React 18 + Vite 6 │
│ • MQTT.js (WebSocket Client - port 8884) │
│ • GSAP 3.13 (Animations) │
│ • Axios (REST API) │
│ • Custom Components (MagicBento, AnimatedSelect, Dropdowns) │
└─────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────┐
│ Infrastructure │
│ • MQTT Broker: HiveMQ Public (broker.hivemq.com) │
│ • Database: MongoDB Atlas (Cloud) │
│ • Time Service: worldtimeapi.org / Thai Navy NTP │
└─────────────────────────────────────────────────────────────────────┘
Home-IoT-System/
├── code.py # CircuitPython สำหรับ Pico W (HTTP + MQTT + NTP sync)
├── pico_simulator.py # Python simulator สำหรับทดสอบ Pico W โดยไม่ต้องมีฮาร์ดแวร์จริง
├── requirements_simulator.txt # Dependencies สำหรับ Pico W simulator
├── settings.toml # WiFi + MQTT config สำหรับ Pico W
├── test_ntp.py # ทดสอบ NTP time sync
├── MQTT_SETUP.md # คู่มือการตั้งค่า MQTT
├── backend/ # Express.js backend
│ ├── server.js # Express server + MQTT + Scheduler
│ ├── models/ # Mongoose models (Schedule)
│ │ └── Schedule.js # โมเดลกำหนดการสำหรับ MongoDB
│ ├── services/ # Time service (multi-provider NTP) + scheduler loop
│ │ ├── fileStorage.js # ที่เก็บข้อมูล JSON สำรองสำหรับการพัฒนา
│ │ ├── mongoStorage.js # บูรณาการ MongoDB สำหรับการใช้งานจริง
│ │ ├── scheduler.js # ลูปการทำงานอัตโนมัติของตัวกำหนดเวลา
│ │ └── timeService.js # การซิงค์เวลา NTP/HTTP หลายผู้ให้บริการ (Thai Navy เป็นหลัก)
│ ├── data/ # ที่เก็บไฟล์ JSON (fallback)
│ │ └── schedules.json # ที่เก็บกำหนดการในเครื่อง
│ ├── package.json
│ ├── .env.example # ตัวอย่างการตั้งค่า environment variables
│ └── README.md
├── frontend/ # React frontend
│ ├── index.html # จุดเริ่มต้น HTML
│ ├── src/
│ │ ├── App.jsx # Professional dashboard + scheduler UI
│ │ ├── App.css # Modern dark theme styling
│ │ ├── main.jsx # จุดเริ่มต้น
│ │ ├── index.css # สไตล์ส่วนกลาง
│ │ └── components/
│ │ ├── Counter.jsx # นาฬิกานับแบบหมุนเคลื่อนไหว (GSAP)
│ │ ├── MagicBento.jsx # ระบบการ์ดแบบโต้ตอบพร้อมเอฟเฟกต์
│ │ ├── MagicBento.css # สไตล์สำหรับเอฟเฟกต์อนุภาคและขอบเรืองแสง
│ │ ├── AnimatedSelect.jsx # ดรอปดาวน์เลือกแบบกำหนดเองพร้อมแอนิเมชันหมุน X
│ │ ├── AnimatedSelect.css # สไตล์ดรอปดาวน์เลือก
│ │ ├── DateDropdown.jsx # เครื่องมือเลือกวันที่แบบกำหนดเองพร้อมปฏิทิน
│ │ ├── DateDropdown.css # สไตล์เครื่องมือเลือกวันที่
│ │ ├── TimeDropdown.jsx # เครื่องมือเลือกเวลาแบบกำหนดเอง (รูปแบบ 24 ชั่วโมง)
│ │ └── TimeDropdown.css # สไตล์เครื่องมือเลือกเวลา
│ ├── config/
│ │ ├── config.js # การตั้งค่าที่รวมศูนย์ (ช่วงเวลา, โซนเวลา, API)
│ │ └── mqttConfig.js # การตั้งค่า MQTT WebSocket
│ ├── package.json
│ ├── vite.config.js
│ ├── .env.example # ตัวอย่างการตั้งค่า environment variables (Cross-LAN)
│ └── README.md
└── lib/ # Adafruit libraries สำหรับ Pico W
└── adafruit_httpserver/ # HTTP server library
├── __init__.mpy
├── authentication.mpy
├── exceptions.mpy
├── headers.mpy
├── methods.mpy
├── mime_type.mpy
├── mime_types.mpy
├── README.md
├── request.mpy
├── response.mpy
├── route.mpy
├── server.mpy
└── status.mpy
cd backend
npm install
copy .env.example .envแก้ไข .env:
MOCK_MODE=true
MQTT_ENABLED=true
MQTT_BROKER=mqtt://broker.hivemq.com
รัน backend:
npm startℹ️ Scheduling Dashboard จำเป็นต้องตั้งค่า
MONGODB_URI(เช่น MongoDB Atlas) และเปิดให้ backend เข้าถึง พร้อมกำหนดTIMEZONE/TIME_API_URLหากต้องการใช้ผู้ให้บริการเวลาภายนอกอื่น ๆ
คุณจะเห็น:
🌐 MQTT ENABLED - Connecting to broker
📡 MQTT Connected to broker
pip install -r requirements_simulator.txtตั้งค่า environment variables (เหมือน settings.toml):
# Windows
set MQTT_ENABLED=true
set MQTT_BROKER=broker.hivemq.com
set MQTT_PORT=1883
# Linux/Mac
export MQTT_ENABLED=true
export MQTT_BROKER=broker.hivemq.com
export MQTT_PORT=1883รัน simulator:
python pico_simulator.pyคุณจะเห็น:
🚀 Starting Pico W Simulator...
🕒 Attempting to sync time with NTP server: time.navy.mi.th
✅ Time synced successfully!
📡 MQTT Connected to broker: broker.hivemq.com
📨 Subscribed to: home-iot/relay/control
🌐 Starting HTTP server on http://localhost:5000
✅ Pico W Simulator is running!
📡 HTTP API: http://localhost:5000/api/relay
🌐 Web Interface: http://localhost:5000
cd frontend
npm install
npm run devเปิดบราวเซอร์ที่ http://localhost:3000
คุณจะเห็น badge:
- ✨ Real-time ON (สีเขียว) - MQTT WebSocket เชื่อมต่อแล้ว
- 🌐 Backend MQTT (สีเขียว) - Backend เชื่อมต่อ MQTT broker
ทดสอบผ่าน Web Interface:
- เปิด
http://localhost:5000ในบราวเซอร์ - กดปุ่ม ON/OFF เพื่อควบคุม relay จำลอง
ทดสอบผ่าน API:
# ดูสถานะ
curl http://localhost:5000/api/relay
# เปิด relay
curl -X POST http://localhost:5000/api/relay -H "Content-Type: application/json" -d '{"state": "on"}'
# ปิด relay
curl -X POST http://localhost:5000/api/relay -H "Content-Type: application/json" -d '{"state": "off"}'ทดสอบ Real-time Sync: เปิดหลายแท็บ Frontend แล้วลองควบคุม relay - ทุกแท็บจะอัพเดทพร้อมกันทันที! ⚡
-
ติดตั้ง CircuitPython บน Pico W
-
(Optional) ติดตั้ง
adafruit_minimqttlibrary ในlib/หากต้องการใช้ MQTT -
คัดลอก
code.pyไปยัง Pico W -
คัดลอกโฟลเดอร์
lib/ทั้งหมดไปยัง Pico W -
สร้างไฟล์
settings.tomlบน Pico W:แบบ HTTP-only (ไม่ใช้ MQTT):
CIRCUITPY_WIFI_SSID = "ชื่อ WiFi" CIRCUITPY_WIFI_PASSWORD = "รหัสผ่าน" # MQTT_ENABLED = "false" (หรือไม่ต้องใส่)
แบบ HTTP + MQTT (รองรับ remote access):
CIRCUITPY_WIFI_SSID = "ชื่อ WiFi" CIRCUITPY_WIFI_PASSWORD = "รหัสผ่าน" # MQTT Settings (ต้องตรงกับ backend/.env) MQTT_ENABLED = "true" MQTT_BROKER = "broker.hivemq.com" MQTT_PORT = "1883" MQTT_USERNAME = "" MQTT_PASSWORD = ""
-
เชื่อมต่อรีเลย์กับ GPIO14 (GP14)
-
จดไว้ว่า IP address ของ Pico W คือเท่าไร
หมายเหตุ: code.py จะ auto-detect ว่ามี MQTT library หรือไม่
- ถ้ามี +
MQTT_ENABLED="true"→ ทำงานแบบ HTTP + MQTT - ถ้าไม่มี library หรือ connection ล้มเหลว → auto-fallback เป็น HTTP-only
cd backend
npm install
copy .env.example .envแก้ไข .env:
PORT=3001
PICO_IP=192.168.1.XXX # IP ของ Pico W
MOCK_MODE=false
MQTT_ENABLED=true
MQTT_BROKER=mqtt://broker.hivemq.com
MONGODB_URI=mongodb+srv://<user>:<pass>@cluster.mongodb.net/home-iot
TIMEZONE=Asia/Bangkok
TIME_API_URL=https://worldtimeapi.org/api
รัน backend:
npm startcd frontend
npm install
npm run devเปิดบราวเซอร์ที่ http://localhost:3000
GET /health - Health check (รวมสถานะ MQTT)
GET /api/relay/status - ดูสถานะรีเลย์
POST /api/relay/control - ควบคุมรีเลย์ {"state": "on"|"off"}
POST /api/relay/toggle - สลับสถานะรีเลย์
GET /api/time/now - เวลาปัจจุบันจาก third-party time server
GET /api/schedules - ดึงรายการกำหนดการทั้งหมด
POST /api/schedules - สร้างกำหนดการใหม่ { action, executeAt, timezone }
PATCH /api/schedules/:id/cancel - ยกเลิกกำหนดการที่รอดำเนินการ
DELETE /api/schedules/:id - ลบกำหนดการออกจากระบบ
GET /api/relay - ดูสถานะรีเลย์ (JSON)
POST /api/relay - ควบคุมรีเลย์ (JSON)
GET / - หน้าเว็บควบคุมแบบเดิม
- Frontend dashboard ส่งคำขอสร้างกำหนดการไปยัง
/api/schedules - Backend บันทึกข้อมูลลง MongoDB Atlas ผ่าน Mongoose (
Schedulemodel) - Scheduler service ดึงเวลาปัจจุบันจาก
worldtimeapi.org(หรือ service อื่นตามTIME_API_URL) - เมื่อถึงเวลาที่กำหนด ระบบจะส่งคำสั่งควบคุมรีเลย์อัตโนมัติ พร้อม publish สถานะผ่าน MQTT ให้ทุก client รับรู้
home-iot/relay/control - Publish: ส่งคำสั่ง {"state": "on"|"off"}
home-iot/relay/status - Subscribe: รับสถานะรีเลย์
home-iot/system/status - Subscribe: รับสถานะ backend
home-iot/device/status - Subscribe: รับสถานะ Pico W
settings.toml(Pico W) - TCP port 1883backend/.env(Backend) - TCP port 1883frontend/src/mqttConfig.js(Frontend) - WebSocket port 8884
MQTT Brokers:
สำหรับทดสอบ (Public - ไม่ต้อง authentication):
- Pico W:
broker.hivemq.com:1883(MQTT TCP) - Backend:
mqtt://broker.hivemq.com:1883 - Frontend:
wss://broker.hivemq.com:8884/mqtt(WebSocket SSL)
สำหรับ Production:
- ติดตั้ง Mosquitto บนเครื่องตัวเอง
- ตั้งค่า authentication และ SSL
- ดูรายละเอียดใน MQTT_SETUP.md
- ✅ Modern Professional Dashboard - Dark theme พร้อม gradient effects
- ✅ Magic Bento Grid System - เอฟเฟกต์การ์ดแบบโต้ตอบพร้อมอนุภาค, สปอตไลท์, ขอบเรืองแสง, แม่เหล็ก และคลิก ripples
- ✅ Animated Rolling Counter Clock - แสดงเวลาแบบ real-time ด้วย GSAP
- ✅ Animated Light Bulb Indicator - หลอดไฟ 3D ขนาดใหญ่ที่เรืองแสงเมื่อรีเลย์เปิด (ขยาย 40%)
- ✅ Custom Toggle Switch - ปุ่มสไลด์แบบ iOS-style สำหรับควบคุมรีเลย์
- ✅ Real-time MQTT Sync - อัปเดตสถานะทันทีผ่าน WebSocket
- ✅ Smart Scheduling UI - สร้างและจัดการกำหนดการเปิด-ปิดอัตโนมัติพร้อม form ที่สวยงาม
- ✅ Status Indicators - แสดงสถานะการเชื่อมต่อ MQTT, Backend, Pico W แบบ real-time
- ✅ Multi-device Sync - ควบคุมจากหลายอุปกรณ์พร้อมกัน
- ✅ Thai Localization - ภาษาไทยทั้งระบบ พร้อม IBM Plex Sans Thai font
- ✅ Smooth Transitions - Animation และ transition ทุกองค์ประกอบด้วย GSAP hardware acceleration
- ✅ Optimistic UI Updates - อัปเดต UI ทันทีพร้อม rollback เมื่อเกิด error
- ✅ Centralized Config - จัดการ intervals และ settings ที่
config.js - ✅ Mobile Optimized - ปิด animations อัตโนมัติบนหน้าจอเล็กกว่า 768px
- ✅ Responsive Design - รองรับทุกขนาดหน้าจอ
- ✅ Multi-provider Time Service - ดึงเวลาจาก Thai Navy NTP (primary) + HTTP fallbacks
- ✅ No Cache Time API - เวลาแม่นยำ real-time ไม่มี cache
- ✅ Smart Scheduler - ตรวจสอบและรันกำหนดการอัตโนมัติ
- ✅ Dual Storage Support - MongoDB (production) + JSON file (development)
- ✅ MQTT-first Relay Control - ส่งคำสั่งผ่าน MQTT ก่อน fallback เป็น HTTP
- ✅ Connection Status Tracking - ตรวจสอบและรายงานสถานะ Pico W
- ✅ Provider Failure Tracking - จำผู้ให้บริการที่ล้มเหลวและ skip ชั่วคราว
- ✅ Health Check API - แสดงสถานะระบบทั้งหมด
- ✅ CORS & Auto-reconnect - รองรับ cross-origin และเชื่อมต่อ MQTT อัตโนมัติ
- ✅ Mock Mode - ทดสอบโดยไม่ต้องมี Pico W จริง
- ✅ NTP Time Sync - ดึงเวลาจาก Thai Navy NTP server พร้อม UTC+7 offset
- ✅ RTC Integration - ใช้ Real-time Clock chip บน Pico W
- ✅ WiFi Connectivity - เชื่อมต่อ WiFi อัตโนมัติ
- ✅ HTTP Server - REST API สำหรับควบคุมรีเลย์
- ✅ MQTT Client - รับ-ส่งคำสั่งผ่าน MQTT (optional)
- ✅ Auto-detect & Fallback - ตรวจสอบ MQTT library และ gracefully fallback เป็น HTTP-only
- ✅ Relay Control - ควบคุมรีเลย์ผ่าน GPIO14
- ✅ Error Recovery - Auto-restart เมื่อเกิด error ร้ายแรง
- Backend:
http://localhost:3001 - Frontend:
http://localhost:3000 - MQTT: WebSocket to public broker
Build frontend แล้วให้ Express serve:
cd frontend
npm run buildปรับ backend ให้ serve static files จาก frontend/dist/
- Deploy frontend บน Vercel/Netlify
- รัน backend บนเครื่องที่เข้าถึง Pico W ได้
- ตั้งค่า MQTT broker (Mosquitto/HiveMQ Cloud)
- Frontend เชื่อมต่อ MQTT ผ่าน WebSocket
ระบบรองรับ Cross-LAN แล้ว! คุณสามารถควบคุม Pico W ที่บ้านจาก Backend+Frontend ที่อยู่บน Cloud/VPS ได้
1. Pico W (บ้าน):
# settings.toml
MQTT_ENABLED = "true"
MQTT_BROKER = "broker.hivemq.com"
MQTT_PORT = "1883"2. Backend (Cloud/VPS):
# .env
MQTT_ENABLED=true
MQTT_BROKER=mqtt://broker.hivemq.com
MQTT_PORT=1883
MONGODB_URI=mongodb+srv://your-atlas-cluster3. Frontend (Cloud/VPS):
# .env
VITE_API_BASE=https://your-backend-domain.com/apiPico W (บ้าน) ←→ MQTT Broker (Internet) ←→ Backend (Cloud)
↑
Frontend (Cloud)
- ปัจจุบันใช้ Public MQTT Broker (broker.hivemq.com) ที่ไม่มี authentication
- สำหรับ Production แนะนำใช้:
- HiveMQ Cloud (มี free tier) + username/password
- หรือติดตั้ง Mosquitto บน VPS ของคุณเอง พร้อม SSL/TLS
- MQTT_SETUP.md - คู่มือการตั้งค่า MQTT broker และทดสอบ
- React 18 + Vite 6 - การพัฒนาที่รวดเร็วด้วย HMR และการ build ที่ปรับให้เหมาะสม
- GSAP 3.13 - ไลบรารีแอนิเมชันระดับมืออาชีพสำหรับเอฟเฟกต์ Counter และ Magic Bento พร้อม hardware acceleration
- MQTT.js - การเชื่อมต่อ WebSocket สำหรับการอัปเดตแบบ real-time
- Axios - HTTP client สำหรับคำขอ API
- CSS3 - ธีมมืดแบบกำหนดเองพร้อม gradients, shadows, animations และเอฟเฟกต์แบบโต้ตอบ
- IBM Plex Sans Thai - ฟอนต์ไทยระดับมืออาชีพสำหรับ UI ทั้งหมด
- Magic Bento Components - ระบบการ์ดแบบโต้ตอบที่นำกลับมาใช้ใหม่ได้ พร้อมอนุภาค, สปอตไลท์, ขอบเรืองแสง, แม่เหล็ก และคลิก ripples
- Express.js 4 + Node.js - RESTful API server
- Axios - HTTP client สำหรับ time APIs และการสื่อสารกับ Pico W
- MQTT.js - TCP broker client สำหรับ pub/sub messaging
- Mongoose - บูรณาการ MongoDB Atlas สำหรับกำหนดการ
- Luxon - การแปลงโซนเวลาและการจัดการวันที่
- node-cron - ลูปตัวกำหนดเวลา (ทุก 10 วินาที)
- dgram (Node.js UDP) - โปรโตคอล NTP สำหรับ Thai Navy time server
- CircuitPython 9.x - Python สมัยใหม่สำหรับไมโครคอนโทรลเลอร์
- adafruit_httpserver - HTTP server น้ำหนักเบา
- adafruit_ntp - Network Time Protocol client
- socketpool + wifi - การเชื่อมต่อเครือข่าย
- rtc - บูรณาการ Real-time Clock chip
- adafruit_minimqtt (optional) - MQTT client พร้อม auto-fallback
- digitalio - การควบคุม GPIO สำหรับรีเลย์ (GP14)
- MongoDB Atlas - ฐานข้อมูลคลาวด์สำหรับการจัดเก็บกำหนดการ
- HiveMQ (Public) / Mosquitto (Self-hosted) - MQTT brokers
- Hardware: โมดูลรีเลย์ (GPIO14)
- Protocol: HTTP REST API + MQTT (TCP/WebSocket)
- Time Source: worldtimeapi.org (ปรับแต่งได้ผ่าน
TIME_API_URL)
ดูรายละเอียดเพิ่มเติมใน:
code.py- CircuitPython สำหรับ Pico W (HTTP + MQTT + NTP sync)pico_simulator.py- Python simulator สำหรับทดสอบ Pico W โดยไม่ต้องมีฮาร์ดแวร์จริงrequirements_simulator.txt- Dependencies สำหรับ Pico W simulatorsettings.toml- WiFi + MQTT config สำหรับ Pico W- Backend README - Express server + การตั้งค่า MQTT
backend/models/Schedule.js- โครงสร้างกำหนดการบน MongoDBbackend/services/timeService.js- การซิงค์เวลา NTP/HTTP หลายผู้ให้บริการ (Thai Navy เป็นหลัก)backend/services/scheduler.js- ลูปการทำงานอัตโนมัติของตัวกำหนดเวลาbackend/services/fileStorage.js- ที่เก็บข้อมูล JSON สำรองสำหรับการพัฒนาbackend/services/mongoStorage.js- บูรณาการ MongoDB สำหรับการใช้งานจริง- Frontend README - React app + WebSocket MQTT
frontend/src/config.js- การตั้งค่าที่รวมศูนย์ (ช่วงเวลา, โซนเวลา, API base)frontend/src/components/Counter.jsx- นาฬิกานับแบบหมุนเคลื่อนไหวด้วย GSAPfrontend/src/components/MagicBento.jsx- ระบบการ์ด Magic Bento พร้อมเอฟเฟกต์แบบโต้ตอบfrontend/src/components/MagicBento.css- สไตล์สำหรับเอฟเฟกต์อนุภาคและขอบเรืองแสงfrontend/src/App.jsx- ตรรกะแดชบอร์ดหลัก (ควบคุมรีเลย์, การกำหนดเวลา, อัปเดตแบบ real-time)frontend/src/App.css- สไตล์ธีมมืดสมัยใหม่ (แอนิเมชันหลอดไฟใหญ่ขึ้น 40%, ปุ่มสลับ, ขอบสถานะ, สไตล์ฟอร์ม)- MQTT Setup Guide - คู่มือการตั้งค่า MQTT broker และทดสอบ
test_ntp.py- Python script สำหรับทดสอบ NTP time sync
- ตรวจสอบ IP address ใน
.env - Ping Pico W:
ping <PICO_IP> - ตรวจสอบว่า Pico W รัน code ใหม่ที่มี API endpoints
- ตรวจสอบว่า backend รันที่ port 3001
- ตรวจสอบ proxy config ใน
vite.config.js - ดู console log ใน browser
Pico W:
- ตรวจสอบว่าติดตั้ง
adafruit_minimqttlibrary แล้ว - ตรวจสอบ
MQTT_ENABLED="true"ในsettings.toml - ดู serial console - ต้องเห็น "✓ MQTT enabled"
- ถ้าเห็น "⚠ MQTT setup failed" → จะ auto-fallback เป็น HTTP-only
Backend:
- ตรวจสอบ
MQTT_ENABLED=trueใน backend.env - ตรวจสอบ URL:
mqtt://broker.hivemq.com(มีmqtt://prefix) - ดู console log - ต้องเห็น "📡 MQTT Connected"
Frontend:
- ตรวจสอบ URL:
wss://broker.hivemq.com:8884/mqtt(WebSocket SSL) - ดู browser console - ต้องเห็น "✅ Frontend MQTT Connected"
- Badge ต้องแสดง "✨ Real-time ON" สีเขียว
ทั่วไป:
- Ping broker:
ping broker.hivemq.com - ลองใช้ MQTT Explorer เพื่อทดสอบ broker
- ตรวจสอบว่า broker, port, topics ตรงกันทั้ง 3 ที่
- ดู browser console - ต้องเห็น "✅ Frontend MQTT Connected"
- ตรวจสอบว่า broker รองรับ WebSocket (port 8884)
- Badge ต้องแสดง "✨ Real-time ON" สีเขียว
- ตรวจสอบ
MOCK_MODE=trueในbackend/.env - Restart backend
- ตรวจสอบว่า backend มีค่า
MONGODB_URIและเชื่อมต่อ Atlas สำเร็จ (health.database.connectedต้องเป็น true) - เปิด IP allowlist ของ MongoDB Atlas ให้ครอบคลุมเครื่อง backend
- ตรวจสอบ log ว่ามีข้อความ
Scheduler started - ตรวจสอบว่า
TIME_API_URLเข้าถึงได้ (backend จะ fallback เป็น system clock หากล้มเหลว)
- ตรวจสอบว่าติดตั้ง GSAP:
cd frontend && npm list gsap - ลอง reinstall:
npm install gsap@latest - ตรวจสอบ browser console หา errors จาก Counter component
- GSAP จะใช้ hardware acceleration โดยอัตโนมัติ
- ตรวจสอบว่าติดตั้ง GSAP:
npm list gsap(ต้องเป็น 3.13.0 ขึ้นไป) - Effects จะถูกปิดอัตโนมัติบนหน้าจอเล็กกว่า 768px (mobile)
- ตรวจสอบ browser console หา errors จาก MagicBento components
- ลด
particleCountprop หากเห็นว่าช้า (default: 8-12 particles) - ปรับ
magnetismStrength(default: 0.05 สำหรับ card เล็ก, 0.015 สำหรับ card ใหญ่) - ปรับ
clickEffectScale(default: 1 สำหรับ card เล็ก, 0.4 สำหรับ card ใหญ่)
- การ fallback หลายผู้ให้บริการ: TimeService จะลองตามลำดับ:
- Thai Navy NTP (
navy.ntppool.in.th:123UDP) - HTTP Time Header (
https://www.google.com) - WorldTimeAPI (
https://worldtimeapi.org/api/timezone/Asia/Bangkok) - System Clock (last resort)
- Thai Navy NTP (
- ตรวจสอบ network connectivity:
ping navy.ntppool.in.th - ดู backend logs - จะบอกว่าใช้ provider ไหนสำเร็จ
- หากทุก provider ล้มเหลว จะใช้ system clock พร้อมแจ้งเตือน
- ปรับ sync interval ได้ที่
frontend/src/config.js(TIME_SYNC_INTERVAL)
- ตรวจสอบว่า import จาก
./configหรือ../config/config.jsถูกต้อง - Restart Vite dev server:
Ctrl+Cแล้วnpm run dev - ตรวจสอบ
APP_CONFIGvalues ใน browser console:console.log(APP_CONFIG) - การตั้งค่าที่มีอยู่:
TIME_SYNC_INTERVAL- ความถี่ sync เวลากับ backend (default: 30000ms / 30s)SCHEDULE_FETCH_INTERVAL- ความถี่ดึงรายการกำหนดการ (default: 30000ms)CLOCK_UPDATE_INTERVAL- ความถี่อัปเดตนาฬิกาหน้าจอ (default: 1000ms / 1s)
- ✅ เพิ่ม MQTT สำหรับ remote access
- ✅ Real-time sync ผ่าน WebSocket
- เพิ่ม authentication (JWT/OAuth)
- ติดตั้ง Mosquitto broker แบบ self-hosted
- รองรับรีเลย์หลายช่อง
- เพิ่มการตั้งเวลา (scheduling)
- บันทึกประวัติการใช้งาน (database)
- Dashboard แสดงกราฟสถิติ
- Mobile app (React Native)
- PWA support
- Home Assistant integration
- Voice control (Alexa/Google)
MIT
Home IoT System Project