Master Plan: สร้าง IoT Platform ครบวงจรใน 21 บท

เคยมั้ยที่อยากสร้าง IoT system เองตั้งแต่ต้นจนจบ แต่ไม่รู้จะเริ่มจากตรงไหน? เรามาแก้ปัญหานั้นด้วยกันเลยดีกว่า workshop นี้เราจะสร้าง IoT Platform จริงๆ ครบทุก layer ตั้งแต่ sensor ส่งข้อมูลขึ้นมาถึง mobile app และ admin panel เลย (ใช่ ครบจริงๆ ไม่ใช่แค่ hello world นะ ^^)

Repo: github.com/kangana1024/iot-workshop

---

สิ่งที่น้องๆ จะได้จาก Workshop นี้

ก่อนจะลุยกัน ขอ spoil ก่อนว่าพอจบ workshop นี้น้องๆ จะทำอะไรได้บ้าง:

• ออกแบบ IoT architecture ได้อย่างมั่นใจ รู้ว่า service ไหนคุยกับใคร ผ่านอะไร
• เขียน Go + Fiber backend รับ sensor data ผ่าน REST และ MQTT
• เก็บข้อมูล time-series ใน InfluxDB และ monitor ด้วย TICK Stack
• สร้าง mobile app ด้วย LynxJS ดู real-time dashboard บนมือถือได้เลย
• สร้าง admin panel ด้วย Vite + React + TypeScript จัดการ devices ทั้งหมด
• Deploy ทุกอย่างด้วย Docker Compose คำสั่งเดียวขึ้นหมด

---

Tech Stack ที่เราจะใช้

ลองนึกภาพ IoT system เหมือน “ระบบไปรษณีย์อัจฉริยะ” นะ:

• อุปกรณ์ IoT = คนส่งจดหมาย (sensor ส่งข้อมูล)
• MQTT Broker = ที่ทำการไปรษณีย์ (รับและกระจายข้อความ)
• Go + Fiber Backend = ผู้จัดการไปรษณีย์ (ประมวลผล, เก็บ, ส่งต่อ)
• MongoDB + InfluxDB = คลังเก็บจดหมาย (ต่างประเภทเก็บต่างที่)
• LynxJS Mobile = แอปติดตามพัสดุ (ดู status real-time)
• Vite + React Admin = dashboard ของ supervisor (ควบคุมทั้งระบบ)

Layer	Technology	หน้าที่
Backend API	Go + Fiber	REST API, WebSocket, MQTT Handler
Database	MongoDB	Device registry, user data, configs
Time-Series	InfluxDB (TICK Stack)	Sensor data storage & analytics
Monitoring	Telegraf + Kapacitor + Chronograf	Data collection, alerting, visualization
Mobile App	LynxJS	Real-time IoT dashboard & device control
Admin Panel	Vite + React + TypeScript	Device management, user admin, monitoring
Message Broker	MQTT (Mosquitto)	Device-to-cloud communication
Container	Docker + Docker Compose	Development & deployment

---

ภาพรวม Architecture ของทั้งระบบ

มาดูกันก่อนว่าข้อมูลจาก sensor มันเดินทางยังไง ตั้งแต่วัดอุณหภูมิจนถึงโชว์บนหน้าจอมือถือ:

ข้อมูลไหลแบบนี้แหละ - sensor ยิง MQTT ขึ้นมา แล้ว backend รับไปจัดการ เก็บ MongoDB สำหรับข้อมูล device และเก็บ InfluxDB สำหรับ time-series จากนั้น push ไป frontend แบบ real-time ผ่าน WebSocket เลย สวยงามมาก (งง) ฮ่าๆ แต่ไม่ต้องกังวล เราจะค่อยๆ build ทีละ layer กัน

---

โครงสร้าง Monorepo

iot-workshop/
├── backend/                    # Go + Fiber API Server
│   ├── cmd/
│   │   └── server/
│   │       └── main.go
│   ├── internal/
│   │   ├── config/             # App configuration
│   │   ├── handler/            # HTTP handlers
│   │   ├── middleware/         # Auth, CORS, logging
│   │   ├── model/              # Data models
│   │   ├── repository/         # Database layer
│   │   ├── service/            # Business logic
│   │   ├── mqtt/               # MQTT client & handlers
│   │   └── websocket/          # WebSocket hub
│   ├── pkg/
│   │   └── utils/              # Shared utilities
│   ├── go.mod
│   ├── go.sum
│   └── Dockerfile
├── frontend-mobile/            # LynxJS Mobile App
│   ├── src/
│   │   ├── screens/            # App screens
│   │   ├── components/         # Reusable components
│   │   ├── services/           # API & MQTT services
│   │   ├── stores/             # State management
│   │   └── utils/              # Helpers
│   ├── package.json
│   └── Dockerfile
├── frontend-admin/             # Vite + React Admin Panel
│   ├── src/
│   │   ├── pages/              # Admin pages
│   │   ├── components/         # UI components
│   │   ├── hooks/              # Custom hooks
│   │   ├── services/           # API services
│   │   ├── stores/             # Zustand stores
│   │   └── types/              # TypeScript types
│   ├── package.json
│   ├── vite.config.ts
│   └── Dockerfile
├── deployments/
│   ├── docker-compose.yml      # Full stack compose
│   ├── docker-compose.dev.yml  # Dev overrides
│   ├── mosquitto/
│   │   └── mosquitto.conf
│   ├── telegraf/
│   │   └── telegraf.conf
│   └── kapacitor/
│       └── kapacitor.conf
├── docs/                       # Workshop documentation
│   ├── architecture.md
│   ├── api-spec.md
│   └── setup-guide.md
├── scripts/
│   ├── setup.sh                # One-click dev setup
│   └── seed-data.sh            # Sample data seeder
├── .gitignore
├── README.md
└── Makefile

เรื่องโครงสร้าง เราเลือก Monorepo เพราะ workshop นี้ต้องการให้น้องๆ เห็นภาพรวมทั้งหมดในที่เดียว เปิด editor ครั้งเดียวเห็นทุก service เลย ง่ายกว่าต้อง clone หลาย repo แน่นอน

---

Roadmap 21 Content ใน 5 Phase

( •_•)
( •_•)>⌐■-■
(⌐■-■)  ← เตรียมตัวลุยกันได้เลย!

Phase 1: Planning (3 Content) - วางรากฐานให้แน่น

ก่อนจะเขียน code สักบรรทัด เราต้องออกแบบก่อน เหมือนสร้างบ้านต้องมีแปลนก่อนสร้าง ไม่งั้น สร้างไปก็รื้อทิ้งทีหลัง

#	Branch	Content	Description
1	workshop/plan-01-architecture	System Architecture	ออกแบบ architecture, data flow, component diagram
2	workshop/plan-02-database-design	Database & Data Model	ออกแบบ MongoDB schema, InfluxDB measurements, data flow
3	workshop/plan-03-project-setup	Project Setup & DevOps	ตั้งค่า monorepo, Docker Compose, CI/CD pipeline

Phase 2: Backend Development (6 Content) - หัวใจของทั้งระบบ

Backend ก็เหมือนครัวของร้านอาหาร ลูกค้า (frontend) ไม่เห็น แต่ถ้าครัวพัง ทุกอย่างพัง เราจะสร้างครัวที่แน่นมากๆ

#	Branch	Content	Description
4	workshop/dev-01-fiber-bootstrap	Go Fiber Bootstrap	สร้าง project structure, config, middleware
5	workshop/dev-02-mongodb-models	MongoDB Models & Repository	สร้าง models, repository pattern, connection
6	workshop/dev-03-device-api	Device Management API	CRUD API สำหรับจัดการ devices
7	workshop/dev-04-sensor-ingestion	Sensor Data Ingestion	รับข้อมูล sensor ผ่าน REST & MQTT
8	workshop/dev-05-mqtt-broker	MQTT Integration	เชื่อมต่อ Mosquitto, pub/sub patterns
9	workshop/dev-06-websocket	WebSocket Real-time	Push real-time data ไปยัง frontend

Phase 3: TICK Stack & Monitoring (3 Content) - ตาที่มองเห็นทุกอย่าง

TICK Stack คือ “กล้องวงจรปิด” ของระบบเรา ดูได้ว่าข้อมูลไหลไปไหน มีปัญหาที่ไหน แจ้งเตือนได้ทันที

#	Branch	Content	Description
10	workshop/dev-07-tick-setup	TICK Stack Setup	ติดตั้งและ config Telegraf, InfluxDB, Chronograf, Kapacitor
11	workshop/dev-08-telegraf-pipeline	Telegraf Data Pipeline	MQTT consumer, data transformation, InfluxDB writer
12	workshop/dev-09-alerting	Kapacitor Alerting	สร้าง alert rules, threshold monitoring, notifications

Phase 4: Mobile Frontend - LynxJS (5 Content) - ของที่ผู้ใช้จะจับต้อง

นี่คือส่วนที่น้องๆ จะโชว์คนอื่นได้ “เฮ้ ดูนี่สิ app IoT ที่ฉันสร้างเอง!” บน mobile จริงๆ เลย

#	Branch	Content	Description
13	workshop/dev-10-lynxjs-setup	LynxJS App Setup	สร้าง mobile app, navigation, base components
14	workshop/dev-11-lynxjs-dashboard	Real-time Dashboard	แสดงข้อมูล sensor แบบ real-time ด้วย charts
15	workshop/dev-12-lynxjs-control	Device Control UI	สร้าง UI สำหรับควบคุม devices
16	workshop/dev-13-lynxjs-charts	Data Visualization	กราฟ, charts, historical data view
17	workshop/dev-14-lynxjs-alerts	Notifications & Alerts	Push notifications, alert history

Phase 5: Admin Panel - Vite+React (4 Content) - command center

Admin panel คือ “ห้องควบคุม” ที่ผู้ดูแลระบบใช้ manage ทุกอย่าง ตั้งแต่ device ยันสิทธิ์การเข้าถึง

#	Branch	Content	Description
18	workshop/dev-15-vite-setup	Vite Admin Setup	สร้าง admin panel ด้วย Vite + React + TypeScript
19	workshop/dev-16-admin-crud	Admin CRUD	จัดการ devices, users, configurations
20	workshop/dev-17-admin-monitoring	Monitoring Dashboard	Admin monitoring ด้วย Chronograf integration
21	workshop/dev-18-admin-auth	Authentication & RBAC	JWT auth, role-based access control

---

Prompts สำหรับแต่ละ Content

ส่วนนี้คือ “สูตรอาหาร” ที่เราจะใช้สร้าง content แต่ละตอน เก็บไว้ reference ได้เลย

Phase 1: Planning Prompts

Prompt #1 - System Architecture:

สร้าง content สำหรับ IoT Workshop เกี่ยวกับ System Architecture Design
- ออกแบบ high-level architecture diagram (ASCII/Mermaid)
- อธิบาย data flow: Device -> MQTT -> Backend -> Database -> Frontend
- Component diagram แสดงความสัมพันธ์ของแต่ละ service
- อธิบาย communication patterns: REST, WebSocket, MQTT
- ระบุ ports และ protocols ที่ใช้
- Tech stack justification: ทำไมถึงเลือก Go+Fiber, MongoDB, TICK Stack, LynxJS, Vite
- Branch: workshop/plan-01-architecture

Prompt #2 - Database Design:

สร้าง content สำหรับ IoT Workshop เกี่ยวกับ Database & Data Model Design
- MongoDB Collections: devices, users, configs, device_groups, alert_rules
- Document schema design พร้อม field types และ indexes
- InfluxDB Measurements: sensor_data, device_status, system_metrics
- Tag keys, field keys, retention policies
- Data flow diagram: raw data -> processing -> storage -> query
- Migration strategy และ seed data plan
- Branch: workshop/plan-02-database-design

Prompt #3 - Project Setup:

สร้าง content สำหรับ IoT Workshop เกี่ยวกับ Project Setup & DevOps
- Monorepo structure สำหรับ backend + frontend-mobile + frontend-admin
- Docker Compose สำหรับ development environment
- Services: Go API, MongoDB, Mosquitto, InfluxDB, Telegraf, Chronograf, Kapacitor
- Makefile commands สำหรับ common tasks
- Environment variables และ configuration management
- Git branching strategy สำหรับ workshop
- Branch: workshop/plan-03-project-setup

Phase 2: Backend Prompts

Prompt #4 - Go Fiber Bootstrap:

สร้าง code สำหรับ Go Fiber API server bootstrap
- Project structure ตาม clean architecture
- Fiber app setup พร้อม middleware: CORS, Logger, Recover, RequestID
- Config management ด้วย Viper (ไฟล์ .env + environment variables)
- Health check endpoint
- Graceful shutdown
- Hot reload ด้วย Air
- Branch: workshop/dev-01-fiber-bootstrap

Prompt #5 - MongoDB Models:

สร้าง code สำหรับ MongoDB connection และ data models
- MongoDB connection ด้วย official Go driver
- Models: Device, User, DeviceGroup, AlertRule, Config
- Repository pattern implementation
- BSON tags และ validation
- Index creation
- Connection pooling configuration
- Branch: workshop/dev-02-mongodb-models

Prompt #6 - Device API:

สร้าง code สำหรับ Device Management REST API
- CRUD endpoints: POST/GET/PUT/DELETE /api/v1/devices
- List with pagination, filtering, sorting
- Device registration flow
- Device status tracking (online/offline/error)
- Bulk operations (register multiple devices)
- API documentation (Swagger/OpenAPI)
- Branch: workshop/dev-03-device-api

Prompt #7 - Sensor Ingestion:

สร้าง code สำหรับ Sensor Data Ingestion
- POST /api/v1/sensors/data - REST ingestion endpoint
- Batch ingestion support
- Data validation (temperature range, humidity range, etc.)
- Write to InfluxDB via InfluxDB Go client
- Data transformation pipeline
- Rate limiting per device
- Branch: workshop/dev-04-sensor-ingestion

Prompt #8 - MQTT Integration:

สร้าง code สำหรับ MQTT Broker Integration
- MQTT client setup ด้วย Eclipse Paho Go
- Topic structure: devices/{device_id}/telemetry, devices/{device_id}/command
- Subscribe to sensor data topics
- Publish commands to devices
- QoS levels configuration
- Auto-reconnection logic
- Message handler pipeline
- Branch: workshop/dev-05-mqtt-broker

Prompt #9 - WebSocket Real-time:

สร้าง code สำหรับ WebSocket real-time data streaming
- Fiber WebSocket upgrade handler
- Hub pattern: manage connections, rooms, broadcasts
- Room-based subscriptions (per device, per group)
- Fan-out sensor data to subscribed clients
- Connection lifecycle management
- Heartbeat/ping-pong
- Branch: workshop/dev-06-websocket

Phase 3: TICK Stack Prompts

Prompt #10 - TICK Stack Setup:

สร้าง content และ config สำหรับ TICK Stack Setup
- Docker Compose services สำหรับ InfluxDB, Telegraf, Chronograf, Kapacitor
- InfluxDB: database creation, retention policies, continuous queries
- Telegraf: basic configuration, input/output plugins
- Chronograf: dashboard setup, data explorer
- Kapacitor: connection to InfluxDB, basic configuration
- Network configuration ให้ทุก service คุยกันได้
- Branch: workshop/dev-07-tick-setup

Prompt #11 - Telegraf Pipeline:

สร้าง content และ config สำหรับ Telegraf Data Pipeline
- MQTT Consumer input plugin configuration
- Data format: JSON parsing จาก MQTT messages
- Processor plugins: rename, converter, regex
- InfluxDB output configuration
- Multiple measurement routing
- Performance tuning: buffer, batch, flush interval
- Branch: workshop/dev-08-telegraf-pipeline

Prompt #12 - Alerting:

สร้าง content และ config สำหรับ Kapacitor Alerting
- TICKscript สำหรับ threshold alerts
- Temperature > 40°C alert
- Device offline detection (no data for 5 minutes)
- Humidity anomaly detection
- Alert handlers: Webhook to Go API, Slack, Email
- Alert history storage
- Dead man's switch สำหรับ critical devices
- Branch: workshop/dev-09-alerting

Phase 4: Mobile Frontend Prompts

Prompt #13 - LynxJS Setup:

สร้าง code สำหรับ LynxJS Mobile App Setup
- LynxJS project initialization
- Navigation setup (tab-based: Dashboard, Devices, Alerts, Settings)
- Base components: Card, Button, Badge, Input
- Theme configuration (dark/light mode)
- API service layer (axios/fetch wrapper)
- Environment configuration
- Branch: workshop/dev-10-lynxjs-setup

Prompt #14 - Real-time Dashboard:

สร้าง code สำหรับ LynxJS Real-time Dashboard
- Dashboard screen layout
- Real-time sensor data cards (temperature, humidity, pressure)
- WebSocket connection manager
- Auto-reconnection logic
- Loading states และ error handling
- Pull-to-refresh
- Last updated timestamp
- Branch: workshop/dev-11-lynxjs-dashboard

Prompt #15 - Device Control:

สร้าง code สำหรับ LynxJS Device Control Interface
- Device list screen พร้อม search & filter
- Device detail screen
- Toggle controls (on/off switches, relays)
- Slider controls (brightness, speed)
- Command history
- Device status indicator (online/offline)
- Confirm dialog สำหรับ critical actions
- Branch: workshop/dev-12-lynxjs-control

Prompt #16 - Data Visualization:

สร้าง code สำหรับ LynxJS Data Visualization
- Line charts สำหรับ temperature/humidity over time
- Gauge charts สำหรับ current values
- Time range selector (1h, 6h, 24h, 7d, 30d)
- Multi-sensor overlay comparison
- Export data as CSV
- Chart animations
- Responsive chart sizing
- Branch: workshop/dev-13-lynxjs-charts

Prompt #17 - Notifications:

สร้าง code สำหรับ LynxJS Push Notifications & Alerts
- Push notification setup
- Alert list screen
- Alert detail with sensor context
- Mark as read/unread
- Alert severity badges (info, warning, critical)
- Notification preferences per device
- Sound/vibration settings
- Branch: workshop/dev-14-lynxjs-alerts

Phase 5: Admin Panel Prompts

Prompt #18 - Vite Admin Setup:

สร้าง code สำหรับ Vite + React Admin Panel
- Vite + React + TypeScript project setup
- Tailwind CSS configuration
- Layout: Sidebar navigation, Header, Main content
- Routing ด้วย React Router v6
- Zustand state management setup
- API service layer ด้วย Axios + interceptors
- Branch: workshop/dev-15-vite-setup

Prompt #19 - Admin CRUD:

สร้าง code สำหรับ Admin CRUD Operations
- Device Management page: list, create, edit, delete
- User Management page: list, create, edit, roles
- DataTable component พร้อม sorting, filtering, pagination
- Form validation ด้วย React Hook Form + Zod
- Toast notifications
- Confirmation dialogs
- Bulk actions (delete, export)
- Branch: workshop/dev-16-admin-crud

Prompt #20 - Admin Monitoring:

สร้าง code สำหรับ Admin Monitoring Dashboard
- System overview cards: total devices, active, alerts, data rate
- Chronograf iframe integration สำหรับ detailed graphs
- Real-time device status grid
- Alert management: acknowledge, resolve, escalate
- System health indicators
- Data export (CSV, JSON)
- Branch: workshop/dev-17-admin-monitoring

Prompt #21 - Authentication:

สร้าง code สำหรับ Authentication & RBAC
- JWT-based authentication (Go backend)
- Login/Register pages
- Protected routes ด้วย React Router
- Role-based access: admin, operator, viewer
- Token refresh mechanism
- Session management
- Audit log
- Branch: workshop/dev-18-admin-auth

---

Checklist ติดตามความคืบหน้า

Phase 1: Planning

• Content #1: System Architecture Design
• Content #2: Database & Data Model Design
• Content #3: Project Setup & DevOps

Phase 2: Backend (Go + Fiber)

• Content #4: Go Fiber Bootstrap
• Content #5: MongoDB Models & Repository
• Content #6: Device Management API
• Content #7: Sensor Data Ingestion
• Content #8: MQTT Broker Integration
• Content #9: WebSocket Real-time

Phase 3: TICK Stack

• Content #10: TICK Stack Setup
• Content #11: Telegraf Data Pipeline
• Content #12: Kapacitor Alerting

Phase 4: Mobile (LynxJS)

• Content #13: LynxJS App Setup
• Content #14: Real-time Dashboard
• Content #15: Device Control UI
• Content #16: Data Visualization
• Content #17: Notifications & Alerts

Phase 5: Admin (Vite + React)

• Content #18: Vite Admin Setup
• Content #19: Admin CRUD Operations
• Content #20: Monitoring Dashboard
• Content #21: Authentication & RBAC

Repository Setup

• Create GitHub repo: kangana1024/iot-workshop
• Initialize monorepo structure
• Setup Docker Compose
• Create branch strategy
• Setup CI/CD (GitHub Actions)
• Write README.md

---

สรุปภาพรวม

Workshop นี้ครอบคลุม 21 content ใน 5 phase ใช้เวลาตามจริงน้องๆ จะมี IoT Platform ที่ทำงานได้จริง มี mobile app ดู sensor data real-time และมี admin panel จัดการทุกอย่างได้เต็มรูปแบบ

สิ่งสำคัญที่สุดที่เราอยากให้น้องๆ เข้าใจจาก workshop นี้ไม่ใช่แค่ code แต่คือ วิธีคิดการออกแบบระบบ ว่า service ต่างๆ ควรแบ่งหน้าที่ยังไง ข้อมูลควรไหลผ่านตรงไหน และเลือก technology ตามโจทย์ ไม่ใช่ตาม trend

---

Next: Content #1: System Architecture Design