Tag: lynxjs
9 รายการ
Blog
ตั้งค่า 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
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 เดียว
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 จากโค้ดจริง