โปสเตอร์งาน Claude Thailand Community Meetup 3
CLAUDE THAILAND COMMUNITY MEETUP 3 · SCBX NEXT TECH

Building a War Room with Claude Codein 24 Hours

Poramate Minsiri · Founder WARROOM

สแกนเพื่อเปิดบนมือถือ

สไลด์ประกอบการบรรยาย

Building a War Room with Claude Code in 24 Hours · เปิดดูตามได้เลย กด N เพื่ออ่านบทพูด

เปิดสไลด์→
warroom-ceo.vercel.app/war-room-24h
QR code warroom-ceo.vercel.app/war-room-24h
สไลด์ประกอบการบรรยาย
2/16

“ขณะที่หลายพื้นที่ยังเผชิญน้ำท่วม ทุกวันที่ผ่านไปคือความกังวลของคนที่ห่วงบ้าน ห่วงครอบครัว และรอให้ชีวิตกลับมาเป็นปกติ”

WARROOM
การเห็นสถานการณ์เร็วขึ้น อาจหมายถึงเวลาที่เพิ่มขึ้นให้ใครอีกหลายคนได้เตรียมตัวและปลอดภัย
3/16
ตัวอย่างจากเพจ WAR ROOM

ตัวอย่างวันที่ฝนตกหนักในกรุงเทพฯเช้าเก็บข้อมูล · เย็นเทียบ · แล้วโพสต์ให้คนวางแผน

06:19 เรดาร์ฝน06:19 เรดาร์ฝน

ภาพเรดาร์ย้อนหลัง 06:19–06:49 น. กลุ่มฝนจากกาญจนบุรีผ่านกรุงเทพฯ ไปชลบุรี + พยากรณ์ ECMWF บ่าย–เย็น

07:20 ถนนที่ปิด07:20 ถนนที่ปิด

อ่านจาก Google Maps: รัชดาภิเษก ช่วงจตุจักร/ลาดพร้าว ปิดถึงเที่ยง และถนนอื่นที่ Maps ระบุว่าปิด

17:36 เทียบกับเช้า17:36 เทียบกับเช้า

รัชดา + พัฒนาการยังปิด และเลื่อนเวลาออกไปค่ำ สรุปสั้น ๆ ให้คนตัดสินใจเส้นทางกลับบ้าน

เก็บ อ่าน เทียบ แล้วบอกต่อ: ทำด้วยมือได้ แต่ทำซ้ำทุกชั่วโมงได้ยาก
ภาพจากโพสต์สาธารณะของเพจ WAR ROOM · แผนที่ © Google · เรดาร์ Windy.com
4/16
WAR ROOM

War Room ที่หน้างานคืออะไรทีมเห็นข้อมูล 4 อย่างชุดเดียวกัน แล้วตัดสินใจร่วมกัน

สถานการณ์ฝนเรดาร์ พยากรณ์ ฝนสะสม
ระดับน้ำจุดวัด ภาพจากคนในพื้นที่
จุดเสี่ยงถนนปิด ชุมชนลุ่มต่ำ
ความช่วยเหลือที่ไปถึงแล้ว และที่ยังไปไม่ถึง
เห็นร่วมกัน → เตรียมพร้อมได้เร็ว · ประสานงานได้ตรงจุด · ติดตามดูแลกันต่อเนื่อง
5/16
THE CHALLENGE

24 ชั่วโมง คือการเปรียบเปรยภายในหนึ่งวัน ได้ต้นแบบที่ทำงานจริง ไม่ใช่สไลด์แนวคิด

25commitsภายในหนึ่งวันgit log ของต้นแบบ
2,526บรรทัดโค้ด Python + JavaScriptนับจาก repo ไม่รวม library
51testsผ่านทั้งหมด (Python 31 · Node 20)docs/verification.md
14ADRบันทึกการตัดสินใจที่ Claude ต้องทำตามplan.md · docs/adr
ทีมของคุณอาจใช้เวลามากหรือน้อยกว่านี้ สิ่งสำคัญคือเริ่มจากพื้นที่เดียวให้จบในหนึ่งรอบ
6/16
PROTOTYPE · WARROOM CITY OBSERVATORY

สนามทดลอง: จราจรรอบสยามเมือง 3D + หลักฐาน + ไทม์ไลน์

เมือง 3Dอาคารและถนนจาก OpenStreetMap
ภาพหลักฐานทุกสถานะกดดูภาพต้นฉบับได้
ไทม์ไลน์ + คาดการณ์ย้อนดูทุกรอบ เทียบ แล้วมองรอบถัดไป
แดชบอร์ด WARROOM City Observatory: เมือง 3D สยาม–ราชประสงค์ สถานะถนน 4 สี และแผงสถานการณ์
ฝึกกระบวนการกับสิ่งที่ตรวจคำตอบได้ก่อน แล้วค่อยย้ายไปน้ำท่วม
ภาพหน้าจอต้นแบบ · ข้อมูลในภาพเป็นชุดจำลอง ติดป้าย SYNTHETIC · อาคารจาก OSM © OpenStreetMap contributors
7/16
METHOD

War Room ต้องทำอะไรได้บ้างเก็บได้ → อ่านได้ → เทียบได้ → ตรวจหลักฐานได้ → คาดการณ์ได้

01เก็บภาพมุมเดิม ทุก 15 นาที
02อ่านAI อ่านสถานะ คนตรวจแก้
03เทียบรอบนี้กับรอบก่อน
04ตรวจหลักฐานกดกลับไปดูภาพต้นฉบับ
05คาดการณ์แนวโน้มรอบถัดไป +15 นาที
ทุกตัวเลขบนจอต้องกดย้อนไปดูหลักฐานได้ ไม่ว่าจะเฝ้าจราจร ฝน หรือระดับน้ำ
8/16
ARCHITECTURE

ระบบนี้สร้างจากอะไรของเปิดและของที่มีอยู่แล้ว ต่อกันด้วย Claude Code

01จับภาพClaude in Chrome · Computer Use
02หลักฐานกล่องรับตรวจมุม/เวลา · SQLite + SHA-256
03อ่าน + ตรวจClaude อ่านภาพ คนแก้ได้
04เทียบ + คาดการณ์กติกาแนวโน้ม งดเมื่อข้อมูลไม่พอ
05แดชบอร์ด 3DMapLibre + OSM · PocketBase
ไม่มีคลาวด์ ไม่มีค่ารายเดือน ทั้งหมดรันบนเครื่องเดียวที่ 127.0.0.1
9/16
HOW WE WORKED

หนึ่งวันนี้ใครทำอะไรคนตั้งโจทย์ กติกา ตรวจ · Claude อ่าน เขียน ทดสอบ บันทึก

คน
ตั้งโจทย์ + กติกาคำถามบนเวที · AGENTS.md ภาษาไทย
ตัดสินใจADR 14 ข้อ
ตรวจของจริงภาพ ผลอ่าน หน้าจอ
Claude Code
สำรวจ + เขียนระบบOSM 356 features · FastAPI · MapLibre
เขียน tests51 tests กันถอยหลัง
บันทึกส่งต่อhandoff ก่อน compact
กติกาเขียนไว้ก่อน แล้ว agent ทำตามได้ทั้งวันโดยไม่ต้องคุมทุกบรรทัด
10/16
TRUST RULES

War Room ที่คนกล้าใช้ตัดสินใจ ต้องมีกติกาอะไรจริงกับจำลองไม่ปนกัน และไม่อ้างว่า "สด" ถ้าไม่ใช่

ภาพต้นฉบับ + เวลา + SHA-256 เก็บเสมอคนแก้ผลอ่านได้ แต่ต้นฉบับไม่ถูกเขียนทับ
ข้อมูลจำลองติดป้ายทุกจุด · อ่านไม่ได้ = เทาไม่เดาเป็นเขียว ไม่เติมค่าแทน
ข้อมูลไม่พอ 3 รอบ = งดทำนายระบบบอกว่า "ยังไม่รู้" ได้
รันที่ 127.0.0.1ไม่เผยแพร่เอง ไม่แจ้งเตือนเอง
ความเร็วมีค่า เมื่อความถูกต้องตรวจได้
11/16
NEXT · FLOOD WAR ROOM

เปลี่ยนสนามจากจราจรเป็นน้ำท่วม ต้องเปลี่ยนอะไรเปลี่ยนแหล่งภาพและข้อมูล โครงเดิมใช้ต่อได้ทั้งหมด

ต้นแบบวันนี้ · จราจรสยาม
  • ภาพ: Google Maps จราจร มุมเดิม 5 มุม
  • สิ่งที่ติดตาม: ช่วงถนน 9 ช่วง สถานะ 4 สี
  • หลักฐาน: ภาพ PNG + เวลา + SHA-256
  • คาดการณ์: แนวโน้มจราจร +15 นาที
  • ผู้ใช้: คนที่จะออกจากสยามพารากอน
→
War Room ชุมชน · น้ำท่วม
  • ภาพ: เรดาร์ Windy · ฝนสะสม ThaiWater · Open-Meteo 77 จังหวัด
  • สิ่งที่ติดตาม: จุดเสี่ยง ถนนปิด ระดับน้ำจากภาพของชาวบ้าน
  • หลักฐาน: แบบเดิม + ใครส่ง เมื่อไร ที่ไหน
  • คาดการณ์: ฝนบ่าย–เย็น จุดที่น้ำน่าจะถึงก่อน
  • ผู้ใช้: ทีมอาสาและครอบครัวที่รอความช่วยเหลือ
ห้าขั้นเดิม เปลี่ยนแค่แหล่งภาพ · ฐานฝน 77 จังหวัด (Rain Watch) สร้างไว้แล้ว
12/16
DO IT YOURSELF

ชุมชนของคุณเริ่มได้ด้วยอะไรคนที่รู้พื้นที่ + Claude Code + ข้อมูลเปิด + เครื่องหนึ่งเครื่อง

คนในพื้นที่รู้จุดเสี่ยง รู้ว่าบ้านไหนยังไม่ได้รับความช่วยเหลือ ข้อมูลนี้ไม่มีในอินเทอร์เน็ต
Claude Codeเขียนกติกาเป็นภาษาไทยว่าทีมต้องเห็นอะไร แล้วให้สร้างระบบจากกติกานั้น
ข้อมูลเปิดOpenStreetMap · Open-Meteo · ThaiWater · ภาพจากกลุ่ม LINE ของชุมชน
เครื่องเดียวโน้ตบุ๊กหนึ่งเครื่อง + เบราว์เซอร์ ไม่ต้องมีเซิร์ฟเวอร์ ไม่ต้องมีคลาวด์
คืนนี้ทำได้เลย: เขียน 4 อย่างที่ทีมต้องเห็น แล้วให้ Claude Code สร้างหน้าแรก
13/16
LIMITS

สิ่งที่หนึ่งวันยังไม่ได้พิสูจน์ต้นแบบพิสูจน์กระบวนการ ยังไม่พิสูจน์การทำนายน้ำท่วม

ยังไม่ทำนายน้ำท่วมไม่ทำนายฝน น้ำท่วม หรือความปลอดภัยของเส้นทาง จากสีถนน?
ภาพจริง 1 รอบนำเข้าภาพจริง 1 ภาพ ยังไม่มีฐานข้อมูลปกติของพื้นที่?
ยังต้องมีผู้ดูแลการเก็บภาพยังไม่ unattended คนต้องกดส่งภาพกลับ?
สิทธิ์ภาพภาพ Google Maps ต้องตรวจข้อกำหนดก่อนเก็บต่อเนื่องหรือเผยแพร่?
ระบบที่บอกขีดจำกัดตัวเองได้ คือระบบที่คนไว้ใจ
14/16
WARROOM

เห็นสถานการณ์เร็วขึ้น คือเวลาที่เพิ่มขึ้น

เพราะการเห็นสถานการณ์เร็วขึ้น อาจหมายถึงเวลาที่เพิ่มขึ้นให้ใครอีกหลายคนได้เตรียมตัวและปลอดภัย · Poramate Minsiri · Founder WARROOM · เพจ Facebook: WAR ROOM

15/16

แหล่งอ้างอิง

หน้า 4ตัวอย่างวันที่ฝนตกหนักในกรุงเทพฯ

หน้า 624 ชั่วโมง คือการเปรียบเปรย

  • ทางการต้นแบบ WARROOM City Observatory (repo ส่วนตัว warrroom-diy): README, plan.md, docs/verification.md, git log

หน้า 7สนามทดลอง: จราจรรอบสยาม

  • ทางการต้นแบบ WARROOM City Observatory (repo ส่วนตัว warrroom-diy): README, plan.md, docs/verification.md, git log
  • ทางการOpenStreetMap contributors, ODbL 1.0 (รูปทรงอาคารและถนนในต้นแบบ)
    https://www.openstreetmap.org/copyright
  • ทางการMapLibre GL JS 5.6.2 (แผนที่ 3D ในต้นแบบ)
    https://maplibre.org/

หน้า 9ระบบนี้สร้างจากอะไร

  • ทางการต้นแบบ WARROOM City Observatory (repo ส่วนตัว warrroom-diy): README, plan.md, docs/verification.md, git log
  • ทางการMapLibre GL JS 5.6.2 (แผนที่ 3D ในต้นแบบ)
    https://maplibre.org/
  • ทางการOpenStreetMap contributors, ODbL 1.0 (รูปทรงอาคารและถนนในต้นแบบ)
    https://www.openstreetmap.org/copyright

หน้า 11War Room ที่คนกล้าใช้ตัดสินใจ ต้องมีกติกาอะไร

  • ทางการต้นแบบ WARROOM City Observatory (repo ส่วนตัว warrroom-diy): README, plan.md, docs/verification.md, git log

หน้า 14สิ่งที่หนึ่งวันยังไม่ได้พิสูจน์

  • ทางการต้นแบบ WARROOM City Observatory (repo ส่วนตัว warrroom-diy): README, plan.md, docs/verification.md, git log
16/16
PDF ⤓