Tag: workshop
49 รายการ
Blog
OpenCut Workshop #3: ไทม์ไลน์พื้นฐาน ตัด แยก ลาก และ snap แบบจับมือทำ
ตอนที่ 3 ของซีรีส์ OpenCut สอนแบบจับมือทำทีละคลิก ปักหมุด bookmark ตามจังหวะ ยืดขอบคลิปให้ snap ตัดด้วย S, Q, W ลากคลิปข้ามแทร็ก ลบแบบ ripple และ undo จนได้คลิป 9:16 ยาว 6 วินาทีที่พี่โชว์กับน้องกายสลับกันทุก 1 วินาทีตรงจังหวะเพลง
OpenCut Workshop #2: ทัวร์หน้าจอ และโปรเจกต์แรกแนวตั้ง 9:16
ตอนที่ 2 ของซีรีส์ OpenCut พาเดินดูหน้าจอทีละส่วน ตั้งโปรเจกต์ 1080×1920 สำหรับ Shorts/Reels วางพื้นหลังกับภาพพี่โชว์และน้องกาย ปิดแล้วเปิดโปรเจกต์ใหม่ และ export ไฟล์ทดสอบ ทดสอบจริงทั้งตัวที่รันในเครื่องและ opencut.app
OpenCut Workshop #1: ติดตั้งโปรแกรมตัดต่อฟรี ใช้บนเว็บทันที หรือรันในเครื่องด้วย Bun
เริ่มซีรีส์สอน OpenCut ตั้งแต่ติดตั้งจนได้คลิปพี่โชว์คุยกับน้องกาย บทแรกเลือกเวอร์ชันที่ใช้ได้จริงวันนี้ ลองใช้บน opencut.app แล้วติดตั้งในเครื่องจาก repo ทีละคำสั่ง พร้อมผลรันจริงและ error ที่เจอระหว่างทาง
Jev Workshop #4: ด่านตรวจใน CI และเทียบโมเดลถูก-แพงแบบคุ้มต่อบาท
บทจบของ Jev workshop — สร้างชุดคำตอบมาตรฐานที่คนตัดสินไว้แล้ว ให้ Jev ตรวจทุกครั้งที่มี PR แก้ prompt ถ้าเห็นตรงกับคนน้อยกว่าเกณฑ์หรือปล่อยคำตอบแย่หลุด ให้ CI ล้ม พร้อมเทียบโมเดลร่างคำตอบสองตัวว่าผ่านด่านกี่ข้อต่อเงินที่จ่าย และตั้ง budget แยกให้ key ของ CI
Jev Workshop #3: ให้ Jev ตรวจคำตอบของบอทก่อนส่งถึงลูกค้า
ให้ LLM ราคาถูกร่างคำตอบภาษาไทย แล้วให้ Jev ถามสามข้อก่อนส่ง: ตอบตรงคำถามไหม สัญญาเกินนโยบายร้านไหม และน้ำเสียงเหมาะกับแชท LINE ไหม พร้อมส่งนโยบายร้านเข้าไปใน state เพื่อให้ตรวจได้จริง
Jev Workshop #2: คัดแยกแชทลูกค้าด้วยความน่าจะเป็น และรู้ว่าเมื่อไหร่ต้องส่งให้คน
เอาข้อความลูกค้าภาษาไทย 16 ข้อความที่ติดป้ายเองมาวัดว่า Jev คัดแยกถูกแค่ไหน ตั้งเกณฑ์ความน่าจะเป็นต่อ action เขียนเทสแบบไม่ต้องต่อเน็ตด้วย mock evaluation model และเทียบกับ LLM classifier ตัวเดิม
Jev Workshop #1: รู้จัก Jev โมเดลที่ไม่พูดสักคำ แต่ตอบเป็น type ให้โค้ดใช้ต่อได้ทันที
เริ่ม workshop ใช้ Jev จาก TypeSafe AI ผ่าน Vercel AI Gateway ตรวจงานบอทตอบแชทลูกค้า บทแรกเรียก experimental_evaluate ครั้งแรก ถามคำถาม Choice, Boolean, Score กับข้อความภาษาไทย อ่านค่าใช้จ่ายจาก metadata และเจอ 403 แรกที่ทุกคนต้องเจอ
Workshop: ลอง Gemini 3.8 Flash TTS กับ Flash-Lite TTS ให้พูดไทยจริง ต่างกันแค่ไหน คุ้มตัวไหน
เทียบเสียงไทยของ Gemini 3.8 Flash TTS กับ Flash-Lite TTS ด้วยสคริปต์เดียวกัน ทั้งพูดคนเดียวและบทสนทนา 2 เสียง วัดเวลา ค่าใช้จ่ายจริงต่อคำขอ และเช็กย้อนด้วยการถอดเสียงกลับเป็นข้อความ พร้อมโค้ด TypeScript ที่ไม่ต้องลงไลบรารีเพิ่ม
Go Serialization 06: HTTP API และ benchmark ที่อ่านผลได้
วัด HTTP throughput และ p50/p95 แยกจาก encode/decode พร้อมผลดิบและค่ากลางจากการทดลอง 5 รอบ
Go Serialization 05: FlatBuffers อ่านตรงหรือ decode ทั้งชุด
แยก direct buffer access ออกจาก full decode เพื่อวัด FlatBuffers โดยเปรียบเทียบงานชนิดเดียวกัน
Go Serialization 04: Avro และต้นทุนของ schema
ใช้ Avro raw binary กับ schema ที่เตรียมครั้งเดียว พร้อมตรวจข้อมูลถูกตัดขาดและข้อจำกัดการเปลี่ยน schema
Go Serialization 03: Protobuf จาก schema ถึง generated code
ออกแบบ wire contract สร้าง Go code และวัดต้นทุน adapter ของ Protobuf อย่างครบถ้วน
Go Serialization 02: ทดลอง MessagePack จาก struct เดิม
เพิ่ม MessagePack adapter ตรวจข้อมูลไทย และอ่านผลขนาดพร้อม gzip โดยไม่เปลี่ยนข้อมูลที่ใช้เทียบ
Go Serialization 01: สร้าง JSON baseline ที่เปรียบเทียบได้
สร้างชุดสินค้าภาษาไทยและตรวจ round-trip ก่อนวัดเวลา ขนาด และ allocations ของ JSON
Workshop Go 1.27: ทดสอบ HTTP ช้าในเวลาจำลอง ไม่ต้องรอจริง
ใช้ httptest.NewTestServer ร่วมกับ testing/synctest สร้างเครือข่ายใน memory และข้ามเวลา 10 วินาทีใน test ที่รันจริง
Workshop Bun 1.4 Cron: นัดงาน 9 โมงกรุงเทพฯ โดยไม่ฝากไว้กับ OS
ใช้ Bun.cron.parse ตรวจตารางเวลาและ timezone แบบ deterministic ก่อนย้ายงานเข้า Bun.cron
Workshop Bun 1.4 Image: ทำ Thumbnail WebP โดยไม่เพิ่ม Native Dependency
ลงมือใช้ Bun.Image อ่าน metadata จำกัดขนาดภาพ ย่อแบบรักษาสัดส่วน และตรวจผล WebP จริงในสคริปต์เดียว
Workshop: ย้าย API จาก encoding/json v1 ไป v2 โดยไม่เปลี่ยนสัญญาแบบไม่รู้ตัว
เวิร์กช็อป Go 1.27 แบบลงมือจริง สร้าง characterization tests เปิดโหมดเข้ากันได้ แล้วค่อยเพิ่ม strict contract พร้อมคำสั่ง go test ที่ตรวจแล้ว
Zig Workshop #6: 1 ล้านบรรทัดใน 62 มิลลิวินาที และส่งขึ้นทุกแพลตฟอร์ม
บทจบของ workshop zlog — เก็บข้อมูลแบบ struct-of-arrays เพื่อคำนวณ percentile, เทียบเวลา Debug กับ Release ที่ต่างกัน 14 เท่า, คอมไพล์ binary ให้ห้าแพลตฟอร์มจากเครื่องเดียว และ benchmark เทียบกับ awk และ Python บนไฟล์ 94 MB เดียวกันที่ reproduce ได้
Zig Workshop #5: ให้ comptime สร้างตัวเลือกของ CLI จาก struct
เพิ่มฟิลด์ใน struct หนึ่งบรรทัด แล้ว --by, ข้อความ --help และตัวแปลงค่าของ CLI รองรับให้เองทันที — ใช้ @typeInfo กับ inline for อ่านโครงสร้าง LogLine ตอนคอมไพล์ และ @compileError ดักชื่อฟิลด์ผิดตั้งแต่ยังไม่ได้รัน
Zig Workshop #4: บั๊ก slice ที่ชี้ไปในอากาศ และวิธีแก้ด้วย arena
เก็บสถิติจาก log ที่อ่านมาแบบไม่ copy — สร้างบั๊ก dangling slice ขึ้นมาจริงแล้วแก้ด้วย arena interning, ใช้ getOrPut ให้ hash ครั้งเดียวแทนสามครั้ง, เรียง top-N ด้วย sort.pdq และให้ std.testing.allocator จับ leak ให้อัตโนมัติ
Zig Workshop #3: แยกวิเคราะห์ log โดยไม่ขอหน่วยความจำแม้แต่ไบต์เดียว
เขียน parser สำหรับ nginx combined log ที่ไม่ copy อะไรเลย — ทุกฟิลด์เป็น slice ที่ชี้กลับเข้าไปในบรรทัดต้นทาง, error set ที่บอกได้ว่าผิดตรงไหน, โหมด --strict และบทเรียนเรื่องอายุของข้อมูลที่คอมไพเลอร์ Zig ไม่ได้ตรวจให้
Zig Workshop #2: อ่านไฟล์ 94 MB ด้วยแรม 1.8 MB
อ่าน log ทีละบรรทัดแบบ streaming ด้วย Io.Reader ของ Zig 0.16 — ทำไม buffer ถึงเป็นพารามิเตอร์, takeDelimiter ทำงานยังไง, จัดการบรรทัดแบบ Windows และผลวัดจริงที่ streaming ใช้แรม 1.8 MB เทียบกับอ่านทั้งไฟล์ที่ใช้ 100 MB บนไฟล์เดียวกัน
Zig Workshop #1: วางโครง CLI ที่รันได้จริงด้วย build.zig ของ 0.16
เริ่ม workshop สร้าง zlog เครื่องมือวิเคราะห์ nginx access log — zig init ของจริงใน 0.16, build.zig.zon ที่บังคับ fingerprint, main ที่รับ std.process.Init, อ่าน argument, buffered stdout พร้อม flush และรหัสจบโปรแกรมที่ถูกต้อง
IoT Workshop #3: ตั้ง Project & DevOps ให้พร้อมรบ
ก่อน code จริงต้องตั้ง Monorepo, Docker Compose (MongoDB/Mosquitto/InfluxDB 2.7/Telegraf), Makefile และ env ให้ดีก่อน — workshop นี้เราเตรียม dev environment ตามของจริงให้ครบจบ
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 #1: ออกแบบ Architecture ก่อนลงมือจริง
พี่โชว์พา Design System Architecture แบบ event-driven สำหรับ IoT Platform จริง ตั้งแต่ Data Flow (ingest/command/query), Communication Patterns (REST/MQTT/WebSocket) ไปจนถึงเหตุผลที่เลือก Tech Stack แต่ละตัว
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 เดียว
ทำระบบ 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
สร้าง Admin Monitoring Dashboard แบบ Real-time
พี่โชว์พาสร้าง Monitoring Dashboard ครบชุด ตั้งแต่ Overview cards, Device Status Grid ที่ติดไฟด้วย WebSocket จริง, กราฟ readings จาก InfluxDB ด้วย Recharts, Alert Rules overview และ time-range control สไตล์ IoT Admin
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
ตั้ง 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 ครบจบในโพสต์เดียว
LynxJS Alerts: หน้า Alert Rules บนมือถือ
หน้า Alerts ใน LynxJS ที่อ่าน alert RULES จาก GET /alert-rules — badge ตาม severity, อธิบาย condition ให้คนอ่านง่าย, read/unread แบบ client-side และ notification preferences ในแอป พร้อมเล่าตรงๆ ว่าทำไม backend ไม่มี endpoint ประวัติ alert
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 ควบคุม IoT Devices จากมือถือ
สร้างหน้าจัดการ device ใน LynxJS — list ที่ค้นหา/กรองสถานะแบบ server-side, หน้า detail, ส่ง command จริงผ่าน POST /devices/:id/commands พร้อม command preset ตามชนิด device และ dialog ยืนยันกัน fat-finger
สร้าง 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 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 ในโค้ดเลย
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
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
ติดตั้ง InfluxDB 2.7 + Telegraf เป็นคลังข้อมูล IoT
รู้จัก Time-series database ก่อนลงมือ แล้วลุยติดตั้ง InfluxDB 2.7 + Telegraf ด้วย Docker Compose พร้อม Org/Bucket/Token, retention และ bucket downsampled แบบใช้งานได้จริง
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 ช้าทิ้ง
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
รับ 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
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
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 #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
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 จากโค้ดจริง
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 ตอนที่ 1: เริ่มต้นเขียน Mobile App ด้วย ReactLynx
พี่โชว์พาทำความรู้จัก Lynx.js (ReactLynx) — framework สำหรับสร้าง mobile app ข้าม platform ด้วย React + TypeScript จาก setup โปรเจกต์จริง, รันบนมือถือด้วย QR code, จนเข้าใจโครงสร้าง element แบบ view/text