แผนที่น้ำท่วมกรุงเทพแบบสด AI สร้างเสร็จใน 3 ชั่วโมง นี่คือวิธีทำ

แอปนี้ทำอะไรได้บ้าง

เปิดในมือถือได้เลย ไม่ต้องลงแอป รวมรายงานน้ำท่วมจริงจาก Traffy Fondue, Longdo, เซ็นเซอร์วัดน้ำบนถนนของ กทม. และสถานีวัดน้ำในคลอง มาไว้บนแผนที่ดาวเทียมจุดเดียว แล้วให้ AI อ่านรายงานภาษาไทยทีละอันว่าน้ำลึกแค่ไหน กำลังขึ้นหรือลด และน่าเชื่อถือแค่ไหน

• แผนที่สด ดึงข้อมูลใหม่เองทุกไม่กี่นาที
• รูปจริง ระดับน้ำจริง ข้อเท้า เข่า เอว พร้อมเวลาที่เห็นน้ำ
• ไทม์ไลน์ 24 ชม. ของแต่ละพื้นที่ รู้ว่าน้ำกำลังขึ้นหรือลด
• เส้นทางหลบน้ำ ค้นหาที่หมาย แล้วแอปพาอ้อมจุดที่ท่วม
• แผนที่ที่ลุ่ม ที่ต่ำน้ำท่วมก่อน ดูแล้วเข้าใจทันที
• แจ้งน้ำท่วมใน 4 ขั้น พร้อมรูปหรือวิดีโอ ไม่ต้องสมัครสมาชิก

ดูของจริง 45 วินาที

3 ชั่วโมง ไม่มีคนแตะโค้ด

เจ้าของโปรเจกต์ทำแค่อย่างเดียว คือบอก AI เป็นภาษาคนว่าอยากได้อะไร ที่เหลือ AI (Claude) ทำเองทั้งหมด: เขียนโค้ด เขียนเทสต์ ส่งขึ้นเว็บ เปิดเว็บจริงมาเช็กเอง เจอบั๊กก็แก้เอง นี่คือไทม์ไลน์จริง เช้าวันที่ 27 ก.ย. 2026 เวลากรุงเทพ:

• 07:57SV Cloud เตรียมบ้านให้แอปเสร็จแล้ว: ที่เก็บโค้ด ฐานข้อมูล ที่เก็บไฟล์ และลิงก์เว็บจริง AI เริ่มงาน
• 09:16แอปตัวแรกเสร็จ: แผนที่ ดึงรายงาน AI อ่านข้อความ หน้าจอมือถือ
• 09:31ขึ้นเว็บจริงครั้งแรก มีรายงานน้ำท่วม 459 จุดบนแผนที่
• 10:26เพิ่มเซ็นเซอร์วัดน้ำบนถนนของ กทม. อัปเดตทุก 10 นาที
• 11:04เส้นทางหลบน้ำ แผนที่ที่ลุ่ม ไทม์ไลน์ และการกรองข้อมูลขยะ ขึ้นเว็บครบ รวม 25 รอบการส่งงาน

ทำไมเร็วขนาดนี้: SV Cloud คือคลาวด์ที่ AI ใช้เป็น

ส่วนที่ช้าที่สุดของการทำแอปมักไม่ใช่การเขียนโค้ด แต่คือการ เอาแอปขึ้นเว็บให้ได้: ตั้งเซิร์ฟเวอร์ ต่อฐานข้อมูล ตั้งรหัสลับ แก้ตอนมันพัง ขั้นตอนพวกนี้ AI มักติด และต้องรอคนมากดให้

SV Cloud ออกแบบมาเพื่อให้ AI ทำขั้นตอนพวกนี้ได้เองตั้งแต่แรก สร้างโดยคนไทย:

• สร้างโปรเจกต์ปุ๊บ ได้เว็บจริงปั๊บ ได้ลิงก์เว็บ ฐานข้อมูล และที่เก็บไฟล์ ต่อกันไว้ให้แล้ว ไม่ต้องสมัครอะไรเพิ่ม
• มีคู่มือสำหรับ AI ในทุกโปรเจกต์ AI อ่านแล้วรู้เลยว่าต้องส่งงานยังไง ใช้ฐานข้อมูลยังไง ห้ามทำอะไร
• ส่งงานเข้าเว็บด้วยคำสั่งเดียว ขึ้นเว็บจริงในไม่กี่นาที ถ้าเทสต์ไม่ผ่าน ระบบไม่ยอมให้ขึ้น เว็บที่คนใช้อยู่จึงไม่พัง
• AI เปิดดู log และสถานะเองได้ เห็นว่าเว็บพังตรงไหน แล้วแก้เอง ไม่ต้องให้คนไปก๊อปข้อความ error มาวาง

ทำตามได้ใน 5 ขั้น

ไม่ต้องเขียนโค้ดเป็น ใช้เวลาของคุณจริง ๆ ราว 30 นาที ที่เหลือคือรอ AI ทำงาน

1. เตรียมของ 3 อย่าง

   Claude แบบ Pro หรือ Max (แนะนำ Claude Code ในแอป Claude บนคอม), บัญชี GitHub ฟรี (ที่เก็บโค้ด) และ ที่ฝากเว็บ (ดูตัวเลือกในข้อถัดไป)

2. เลือกที่ฝากเว็บ

   ถ้าใช้ SV Cloud: ตอนนี้ยังเป็นเวอร์ชันทดลอง (alpha) และใช้ฟรี ลงชื่อรอคิวที่ cloud.sv-academy.org พอได้สิทธิ์ ให้กดสร้างโปรเจกต์ใหม่ ตั้งชื่อ แล้วคุณจะได้ที่เก็บโค้ดบน GitHub กับลิงก์เว็บจริงทันที ถ้าใช้ที่อื่น ข้ามไปขั้น 3 ได้เลย Claude จะพาตั้งค่าให้

3. เปิด Claude ในโฟลเดอร์โปรเจกต์

   ในแอป Claude ไปที่แท็บ Code แล้วเลือกโฟลเดอร์ของโปรเจกต์ (หรือโฟลเดอร์ว่างใหม่) ถ้าใช้ SV Cloud ให้พิมพ์บอก Claude ว่า "ช่วยโคลนโปรเจกต์ SV Cloud ของฉันจาก GitHub แล้วติดตั้ง svcloud ให้หน่อย"

4. คัดลอกคำสั่งด้านล่าง ไปวางใน Claude

   แก้บรรทัดแรกให้ตรงกับที่ฝากเว็บของคุณ แล้วกดส่ง Claude จะวางแผน สร้าง และส่งขึ้นเว็บเอง

5. ตอบเมื่อ Claude ถาม แล้วลองในมือถือ

   Claude จะหยุดถามแค่ไม่กี่เรื่อง เช่น ขอกุญแจ API (รหัสสำหรับใช้บริการภายนอก) และจะบอกว่าไปเอาที่ไหน พอเสร็จ เปิดลิงก์ในมือถือ ถ้าอะไรไม่ถูกใจ บอกเป็นภาษาคนได้เลย เช่น "ปุ่มเล็กไป" หรือ "อยากให้เห็นน้ำท่วมใกล้บ้านก่อน"

คำสั่งสำหรับ Claude (คัดลอกทั้งก้อน)

คำสั่งนี้คือสรุปสิ่งที่เราขอ AI จริงตอนสร้างแผนที่นี้ พร้อมแหล่งข้อมูลที่ใช้จริง

ที่ฝากเว็บของฉัน: SV Cloud   (เปลี่ยนเป็น Vercel หรือ Railway ได้)

ช่วยสร้างเว็บแอป "แผนที่น้ำท่วมกรุงเทพแบบสด" ให้เสร็จ และขึ้นเว็บจริง ฉันไม่ใช่โปรแกรมเมอร์ อธิบายด้วยภาษาง่าย ๆ

ก่อนเริ่ม:
- ถ้าเป็น SV Cloud: อ่านไฟล์ SVAGENTS.md ในโฟลเดอร์นี้ก่อน แล้วทำตามกฎในนั้นทุกข้อ ส่งงานขึ้นเว็บด้วยการ push เข้า main
- ถ้าเป็น Vercel หรือ Railway: สร้างโปรเจกต์ใหม่ ต่อฐานข้อมูล Postgres และบอกฉันทีละขั้นว่าต้องกดอะไรตรงไหน

สิ่งที่แอปต้องทำ:
1. แผนที่ดาวเทียมกรุงเทพ แสดงจุดน้ำท่วมจากรายงานจริง ดึงข้อมูลใหม่เองทุกไม่กี่นาที จากแหล่งเหล่านี้:
   - Traffy Fondue: publicapi.traffy.in.th (เรื่องร้องเรียนน้ำท่วม)
   - Longdo Traffic: event.longdo.com/feed/json
   - เซ็นเซอร์วัดน้ำบนถนนของ กทม.: now.bangkok.go.th/flood-alert.html
   - สถานีวัดน้ำในคลองและปริมาณฝน: api-v3.thaiwater.net
2. แต่ละจุดบอกระดับน้ำ (ข้อเท้า เข่า เอว) รูปถ้ามี เวลาที่เห็นน้ำ และน้ำกำลังขึ้นหรือลด
3. ใช้ Claude อ่านข้อความรายงานภาษาไทยแต่ละอัน สรุประดับน้ำ แนวโน้ม และให้คะแนนความน่าเชื่อถือ กรองข้อมูลขยะออก ใช้โมเดลเล็กราคาถูกเป็นหลัก
4. กดที่พื้นที่ไหน เห็นไทม์ไลน์ 24 ชั่วโมงของบริเวณนั้น เรียงตามเวลาที่เห็นน้ำจริง
5. ช่องค้นหาสถานที่ และปุ่มหาเส้นทางที่อ้อมจุดน้ำท่วม
6. แผนที่ "ที่ลุ่ม" แสดงความสูงของพื้นดิน ให้เห็นว่าทำไมบางที่ท่วมก่อน
7. ปุ่ม "แจ้งน้ำท่วม" แจ้งพร้อมรูปหรือวิดีโอใน 4 ขั้น ย่อไฟล์ก่อนอัปโหลด ลบตำแหน่ง GPS ในรูปออก ไม่ต้องสมัครสมาชิก แค่ตั้งชื่อเล่นครั้งแรก
8. ออกแบบให้มือถือก่อน ใช้ได้ทั้ง iPhone และ Android ภาษาไทยเป็นหลัก สลับอังกฤษได้ ตัวหนังสือน้อย เลื่อนน้อย หน้าเดียวจบ

วิธีทำงาน:
- แบ่งงานเป็นชิ้นเล็ก เสร็จชิ้นไหนส่งขึ้นเว็บจริงทันที แล้วเปิดเว็บที่ขึ้นแล้วเช็กเองว่าใช้ได้จริง
- เขียนเทสต์ทุกฟีเจอร์ ถ้าเทสต์ไม่ผ่าน ห้ามส่งขึ้นเว็บ
- ถ้าต้องใช้กุญแจ API ให้หยุดถามฉัน บอกว่าไปเอาได้ที่ไหน และห้ามใส่กุญแจไว้ในโค้ด (เช่น Anthropic API key สำหรับให้ AI อ่านรายงาน, OpenRouteService key ฟรีสำหรับหาเส้นทาง)
- ถ้าแหล่งข้อมูลไหนล่ม ให้แอปยังทำงานต่อได้ด้วยแหล่งที่เหลือ
- ทุกครั้งที่ทำอะไรเสร็จ ส่งภาพหน้าจอขนาดมือถือมาให้ดู
- จบงานเมื่อส่งลิงก์เว็บที่เปิดในมือถือได้จริงมาให้ฉัน

ที่ฝากเว็บ: เลือกอะไรดี

คำสั่งข้างบนใช้ได้กับทุกที่ แค่บอก Claude ว่าใช้ที่ไหน ต่างกันตรงที่คุณต้องตั้งค่าเองมากแค่ไหน

ถ้าติด

• ข้อมูลไม่ขึ้น ถาม Claude ว่า "แหล่งข้อมูลไหนดึงไม่ได้ เพราะอะไร" บางแหล่งปิดปรับปรุงเป็นพัก ๆ
• หาเส้นทางไม่ได้ บริการหาเส้นทางฟรีมักจำกัดจำนวนครั้ง ให้ Claude เพิ่มตัวสำรอง หรือใช้กุญแจ API ของคุณเอง
• แอปไม่รู้ตำแหน่งของเรา เช็กว่าเบราว์เซอร์ในมือถืออนุญาตตำแหน่งแล้ว (iPhone: ตั้งค่า > ความเป็นส่วนตัว > บริการหาตำแหน่ง)
• อย่างอื่น เล่าให้ Claude ฟังว่าเห็นอะไรบนจอ แนบภาพหน้าจอไปด้วย แล้วให้มันแก้

แหล่งข้อมูลทั้งหมดเป็นข้อมูลสาธารณะ ถ้าจะเอาไปใช้ในเชิงธุรกิจ อ่านเงื่อนไขการใช้งานของแต่ละแหล่งก่อน