Tag: workshop
25 รายการ
Blog
IoT Workshop #4: วาง Foundation ด้วย Go + Fiber
เริ่มต้น backend ของ IoT Platform แบบ runnable จริง — Go 1.24 + Fiber v2 อ่าน config จาก env ด้วย Viper, zap structured logger, middleware ครบชุด, health check และ graceful shutdown พร้อม distroless Docker image
IoT Workshop #5: MongoDB Models & Repository Pattern
ออกแบบ domain model สำหรับ IoT Platform ด้วย Go + MongoDB driver v2 — BSON tags, connection pooling, indexes แบบ idempotent, validator ที่ใช้ json tag, และ Repository Pattern ที่กัน NoSQL injection ด้วย typed filter
IoT Workshop #6: Device Management API ด้วย Go Fiber
ประกอบ repository เป็น REST API จัดการ IoT device — service layer ที่ออก ingestion token, handler บางๆ ที่ map error เป็น HTTP status, envelope httpx (data/error/pagination), bulk create และ unit test แบบ table-driven ที่ mock repository
รับ Sensor Data เข้า InfluxDB แบบไม่กลัวตาย
พาสร้าง Sensor Ingestion ด้วย Go + Fiber ตั้งแต่ REST รับ single/batch, validate ด้วย validator/v10, เช็ค device จาก registry, เขียนลง InfluxDB 2.x แบบ blocking ที่ error เด้งกลับ HTTP จริง พร้อม rate limit แบบ token-bucket ต่อ device
MQTT: ให้ Device คุยกับ Server แบบเบาๆ
เชื่อม backend กับ Mosquitto ด้วย Eclipse Paho Go client v1.5.1 — subscribe topic devices/+/telemetry, publish command ไป devices/{id}/command, auto-reconnect + re-subscribe, แล้วป้อน telemetry เข้า ingestion path เดียวกับ REST API
WebSocket Real-time: ดูข้อมูล IoT แบบสดๆ
สร้าง real-time layer ด้วย gofiber/contrib/websocket — Hub แบบ single-goroutine ที่เป็นเจ้าของ state ทั้งหมด, room system (device:/group:), fan-out telemetry จาก ingestion path, heartbeat ping/pong และ back-pressure ที่ตัด client ช้าทิ้ง
ติดตั้ง InfluxDB 2.7 + Telegraf เป็นคลังข้อมูล IoT
รู้จัก Time-series database ก่อนลงมือ แล้วลุยติดตั้ง InfluxDB 2.7 + Telegraf ด้วย Docker Compose พร้อม Org/Bucket/Token, retention และ bucket downsampled แบบใช้งานได้จริง
Telegraf json_v2 + Flux Query: สายพานข้อมูล IoT
พี่โชว์พาลุย Telegraf pipeline ตัวจริง ตั้งแต่ mqtt_consumer + json_v2 parser, processor (rename/converter/enum) จนถึง output influxdb_v2 แล้วต่อด้วยการสร้าง Flux query แบบ bounded ใน Go เพื่ออ่านข้อมูลออกทาง REST API
Go Alerting Engine: ให้ระบบ IoT แจ้งเตือนเองเลย
สร้าง alerting engine เป็น Go ตั้งแต่ rule แบบ threshold / offline / anomaly (z-score), การประเมินบน ingestion path, cooldown, alert history บน Mongo (TTL) จนถึง webhook แบบ Slack-compatible พร้อม SSRF guard และ REST CRUD ที่ /api/v1/alert-rules
ตั้งค่า LynxJS Mobile App สำหรับ IoT
พี่โชว์พาสร้าง mobile client ด้วย ReactLynx + Rspeedy ตั้งแต่ create-rspeedy, bottom tab bar, typed REST client ที่ mirror โครงสร้าง Go, theme provider จนถึงการ inject base URL ตอน build — ไม่ฝัง host/secret ในโค้ดเลย
สร้าง Real-time Dashboard ด้วย LynxJS
ปลุก dashboard ให้มีชีวิตด้วย WebSocket hub จริงของ backend — RealtimeClient ที่ subscribe ห้องตาม device, auto-reconnect แบบ exponential backoff, merge live reading เข้า list และ pull-to-refresh บน scroll-view ของ Lynx
LynxJS ควบคุม IoT Devices จากมือถือ
สร้างหน้าจัดการ device ใน LynxJS — list ที่ค้นหา/กรองสถานะแบบ server-side, หน้า detail, ส่ง command จริงผ่าน POST /devices/:id/commands พร้อม command preset ตามชนิด device และ dialog ยืนยันกัน fat-finger
LynxJS Data Visualization: กราฟ Sensor สวยๆ
วาด line chart จาก time-series ของ InfluxDB บนมือถือ — ดึง readings ผ่าน GET /devices/:id/readings, เลือกช่วงเวลา/metric/downsample window, สร้าง SVG เองแบบ safe-by-construction แล้ว render ด้วย <svg content=...> ของ Lynx
LynxJS Alerts: หน้า Alert Rules บนมือถือ
หน้า Alerts ใน LynxJS ที่อ่าน alert RULES จาก GET /alert-rules — badge ตาม severity, อธิบาย condition ให้คนอ่านง่าย, read/unread แบบ client-side และ notification preferences ในแอป พร้อมเล่าตรงๆ ว่าทำไม backend ไม่มี endpoint ประวัติ alert
ตั้ง Vite Admin Panel ให้ IoT Platform กัน!
พี่โชว์พาวาง foundation ของ Admin Console ด้วย Vite 8 + React 19 + TypeScript จริง พร้อม Tailwind v4, React Router v7, Zustand, TanStack Query และ fetch client ที่มี seam สำหรับ token/refresh ครบจบในโพสต์เดียว
IoT Admin CRUD: ตารางข้อมูลแบบครบเครื่อง
สร้าง Device & Alert Rule management ด้วย DataTable แบบ generic (sort/filter/select/paginate), React Hook Form + Zod ที่ mirror backend validation, toast + confirm dialog เป็น Zustand store และ TanStack Query mutations พร้อม cache invalidation
สร้าง Admin Monitoring Dashboard แบบ Real-time
พี่โชว์พาสร้าง Monitoring Dashboard ครบชุด ตั้งแต่ Overview cards, Device Status Grid ที่ติดไฟด้วย WebSocket จริง, กราฟ readings จาก InfluxDB ด้วย Recharts, Alert Rules overview และ time-range control สไตล์ IoT Admin
ทำระบบ Auth + RBAC ให้ IoT Platform
ทำ Authentication แบบ production จริงด้วย Go (Fiber) + React: JWT access+refresh, argon2id, RBAC admin/operator/viewer, rate-limited /auth, refresh rotation + reuse detection + tokenVersion และ silent refresh ฝั่ง client
Master Plan: สร้าง IoT Platform ครบวงจร 18 step + E2E
แผนโรดแมปสร้าง IoT Platform ตั้งแต่ศูนย์ — Go + Fiber, MongoDB 8, Mosquitto, InfluxDB 2.7 + Flux, Telegraf, LynxJS Mobile และ Vite+React Admin (JWT/RBAC) รวม 18 step + E2E ใน monorepo เดียว
IoT Workshop #1: ออกแบบ Architecture ก่อนลงมือจริง
พี่โชว์พา Design System Architecture แบบ event-driven สำหรับ IoT Platform จริง ตั้งแต่ Data Flow (ingest/command/query), Communication Patterns (REST/MQTT/WebSocket) ไปจนถึงเหตุผลที่เลือก Tech Stack แต่ละตัว
IoT Workshop #2: ออกแบบ Database ให้ไม่งง
ทำไมต้องใช้ 2 databases? พี่โชว์พาออกแบบ MongoDB Collections (devices/users/groups/alert_rules/alert_history) + InfluxDB 2.7 buckets/measurements ให้ตรงกับ code จริง พร้อม TTL index และ Flux query
IoT Workshop #3: ตั้ง Project & DevOps ให้พร้อมรบ
ก่อน code จริงต้องตั้ง Monorepo, Docker Compose (MongoDB/Mosquitto/InfluxDB 2.7/Telegraf), Makefile และ env ให้ดีก่อน — workshop นี้เราเตรียม dev environment ตามของจริงให้ครบจบ
Lynx.js Workshop ตอนที่ 1: เริ่มต้นเขียน Mobile App ด้วย ReactLynx
พี่โชว์พาทำความรู้จัก Lynx.js (ReactLynx) — framework สำหรับสร้าง mobile app ข้าม platform ด้วย React + TypeScript จาก setup โปรเจกต์จริง, รันบนมือถือด้วย QR code, จนเข้าใจโครงสร้าง element แบบ view/text
Lynx.js Workshop ตอนที่ 2: ดึงข้อมูล IoT แบบ Real-time
พี่โชว์พาต่อ mobile app เข้ากับ backend จริง — typed REST client ที่มี timeout/abort, WebSocket hub แบบ auto-reconnect, แล้วประกอบเป็น Dashboard ที่ sensor card อัปเดตค่าสด ๆ ผ่าน hook useDashboard
Lynx.js Workshop ตอนที่ 3: Advanced Integration และ Best Practices
ตอนจบของซีรีส์ — สั่งงาน device ผ่าน command + dialog ยืนยัน, วาด chart จาก time-series ด้วย SVG ที่กัน injection, จัดการ alert rules + read state ฝั่ง client, theme dark/light ผ่าน Context พร้อม best practices จากโค้ดจริง