ลงมือทำ · ทีละขั้น

สร้างระบบแรกของคุณ

ทำตามได้จริง จาก 0 → ขึ้นเว็บ— เราจะสร้าง "ระบบลูกค้า + ออเดอร์" ง่าย ๆ ด้วยกันทีละขั้น แล้วคุณจะร้อยทุกบทในห้องสมุดเข้าด้วยกันเป็นระบบจริงตัวแรกได้

หน้านี้ใช้ยังไง

นี่คือบท "ทำไปด้วยกัน"— เลือกระบบเล็ก ๆ 1 ตัวแล้วลุยจนขึ้นเว็บจริง. แต่ละขั้น ฝั่งซ้ายอธิบายว่าทำอะไร + ตัวอย่างจริง + ในกล่อง promptคือข้อความที่คุณก๊อปไปพิมพ์ให้ AI ได้เลย · ฝั่งขวาคือ "ผลที่ได้" (หน้าจอที่ควรออกมา). ทุกขั้นมีลิงก์ไปบทเจาะลึกในห้องสมุด — ทำตามลำดับ 1→7 อย่าข้าม

เตรียม 3 อย่างก่อนเริ่ม (ครั้งเดียว · ฟรีทั้งหมด)
Claude Code
เครื่องมือที่เราพิมพ์สั่ง AI ให้สร้างระบบ — ติดตั้งบนเครื่องคุณ คือพระเอกของทุกขั้น
บัญชี Supabase ฟรี
ที่เก็บข้อมูลลูกค้า/ออเดอร์ของระบบ — สมัครเมล สร้างโปรเจกต์ 1 อัน ใช้ตั้งแต่ขั้น 3
บัญชี Cloudflare ฟรี
สำหรับเอาระบบขึ้นเว็บให้มี URL จริง ใช้ตอนขั้น 6 — ยังไม่มีก็เริ่มขั้น 1 ไปก่อนได้
1เลือกโจทย์2วางข้อมูล3หน้าลูกค้า 4หน้าออเดอร์5Dashboard6ขึ้นเว็บ7สิทธิ์+ปลอดภัย
ขั้น 1เลือกโจทย์ + ขอบเขต

อย่าทำทั้ง ERP ทีเดียว — มือใหม่พลาดตรงนี้บ่อยที่สุด. เลือก ระบบเล็กที่ใช้ได้จริง 1 ตัวแล้วทำให้จบก่อน. เราจะทำ "ระบบลูกค้า + ออเดอร์": เก็บรายชื่อลูกค้า + บันทึกออเดอร์ของแต่ละคน. เขียน "อะไรอยู่ในขอบเขต / อะไรยังไม่ทำ" ให้ชัดก่อนเริ่ม จะได้ไม่หลงทาง

ตัวอย่างจริงร้านขายของออนไลน์เล็ก ๆ อยากเลิกจดออเดอร์ในสมุด — ไม่ต้องมีสต๊อก/บัญชี/ภาษีตั้งแต่วันแรก. แค่ "ลูกค้าคือใคร + สั่งอะไรไปบ้าง"ก็เปลี่ยนชีวิตได้แล้ว ค่อยต่อยอดทีหลัง
ทำ
ขอบเขตเล็ก ใช้ได้จริงใน 1 สัปดาห์ · ตัดให้เหลือ "หัวใจ" ก่อน
อย่า
ใส่ทุกฟีเจอร์ที่นึกออก · เริ่มจากระบบใหญ่ที่ไม่มีวันเสร็จ
ขอบเขต "ระบบลูกค้า + ออเดอร์"
✓ ทำในเวอร์ชันแรก
+ทะเบียนลูกค้า (เพิ่ม/แก้/ค้น)
+บันทึกออเดอร์ ผูกกับลูกค้า
+หน้าสรุปยอดขายง่าย ๆ
ยังไม่ทำ (ไว้เฟสหน้า)
สต๊อก · ผลิต · จัดส่ง
ใบกำกับภาษี · บัญชี
แอปมือถือ · หลายสาขา
ขั้น 2วางแกนกลาง / ข้อมูล

ก่อนสั่งสร้างหน้าจอ ให้คิด "ข้อมูลอยู่ที่ไหน"ก่อน. กฎทองคือ เก็บที่เดียว แล้วชี้มา (SSOT)— ทะเบียนลูกค้ามีที่เดียว, ออเดอร์ เก็บแค่ "รหัสลูกค้า"ไม่จดชื่อ-ที่อยู่ซ้ำ. ลูกค้าย้ายบ้าน แก้ที่เดียวจบ ออเดอร์เก่าก็ถูกต้องตาม

ตัวอย่างจริงถ้าจดชื่อลูกค้าซ้ำในทุกออเดอร์ พอลูกค้าเปลี่ยนเบอร์ ออเดอร์เก่า 50 ใบก็ผิดหมด. เก็บลูกค้าที่เดียว ออเดอร์ชี้ด้วย C-018→ แก้จุดเดียว ทุกที่อัปเดตตาม
ความสัมพันธ์ข้อมูล
ลูกค้า บ้านหลังหลัก
customer_id· ชื่อ · เบอร์ · ที่อยู่
▲ ออเดอร์ "ชี้มา" ด้วยรหัส · ไม่ก๊อปซ้ำ
ออเดอร์
order_id · customer_id↗ · สินค้า · ยอด · วันที่
1 ลูกค้า → มีได้หลายออเดอร์.ออเดอร์เก็บแค่รหัสลูกค้า เวลาจะโชว์ชื่อค่อยดึงจากทะเบียน
ขั้น 3สั่ง AI สร้างหน้าลูกค้า

ถึงเวลาลงมือ. สั่ง AI สร้างหน้าจัดการลูกค้าแบบครบ (เพิ่ม-ดู-แก้-ลบ = CRUD) เคล็ดลับคือ บอกให้ครบ: ทำอะไร, มีช่องอะไร, หน้าตาเป็นแบบไหน. ก๊อป prompt ข้างล่างไปวางให้ AI ได้เลย — ผลที่ได้คือหน้าตารางลูกค้าตามภาพขวา

prompt ที่จะพิมพ์
สร้างหน้า "จัดการลูกค้า"เป็นตารางแสดงรายชื่อลูกค้า แต่ละแถวมี: ชื่อ, เบอร์โทร, จังหวัด, สถานะ มีปุ่ม "+ เพิ่มลูกค้า"เปิดฟอร์มกรอก ชื่อ/เบอร์/ที่อยู่ แต่ละแถวกดแก้ไข/ลบได้ และมีช่องค้นหาด้านบน เก็บข้อมูลใน Supabase ตาราง customers
ตัวอย่างจริงพิมพ์ prompt นี้ใน Claude Code → ได้หน้าลูกค้าใช้งานได้จริงใน ~2 นาที. ค้นหา/เพิ่ม/แก้ได้ครบ ไม่ต้องเขียนโค้ดเอง
ผลที่ได้ · หน้าลูกค้า
ลูกค้า (32)+ เพิ่มลูกค้า
ค้นหาชื่อ / เบอร์…
คุณสมชาย ใจดี
081-234-5678 · กรุงเทพฯ
ลูกค้าประจำ
ร้านกาแฟมุมเมือง
089-555-1212 · เชียงใหม่
ใหม่
คุณมานี รักดี
062-888-0000 · ขอนแก่น
ลูกค้าประจำ
ขั้น 4สร้างหน้าออเดอร์ + เชื่อมลูกค้า

ตอนนี้ทำหน้าออเดอร์ และนี่คือจุดที่ SSOT ทำงาน — ในฟอร์มออเดอร์ เลือกลูกค้าจากทะเบียน (dropdown)ไม่ให้พิมพ์ชื่อใหม่. ระบบจะเก็บแค่ customer_idตามที่วางไว้ขั้น 2. บอก AI ให้ผูกตารางออเดอร์กับลูกค้าด้วยรหัส

prompt ที่จะพิมพ์
สร้างหน้า "ออเดอร์"มีปุ่มเพิ่มออเดอร์ ในฟอร์ม เลือกลูกค้าจาก dropdownที่ดึงจากตาราง customers (เก็บแค่ customer_id ห้ามพิมพ์ชื่อซ้ำ) ใส่: รายการสินค้า, ยอดเงิน, สถานะ (ใหม่/ส่งแล้ว) ตารางออเดอร์โชว์ชื่อลูกค้าโดย join จาก customer_id
ตัวอย่างจริงพนักงานเปิดออเดอร์ใหม่ พิมพ์ชื่อ 2 ตัวอักษร dropdown ขึ้นให้เลือก— เลือกผิดคนยาก เบอร์/ที่อยู่ตามมาเอง ไม่ต้องคีย์ซ้ำ
ผลที่ได้ · ออเดอร์ใหม่
เพิ่มออเดอร์#ORD-104
คุณสมชาย ใจดี
กาแฟดริป ×3, คุกกี้ ×2
฿540
บันทึกออเดอร์
ขั้น 5เพิ่มหน้าสรุป (Dashboard)

มีข้อมูลลูกค้า + ออเดอร์แล้ว ก็ทำหน้า "ภาพรวม"ให้เจ้าของเปิดดูปุ๊บรู้สถานะปั๊บ. dashboard ไม่สร้างข้อมูลใหม่ แต่รวบตัวเลขมาแสดง— KPI ยอดขาย/จำนวนออเดอร์ + กราฟรายวัน. สั่ง AI ให้นับจากตารางออเดอร์ที่มีอยู่

prompt ที่จะพิมพ์
สร้างหน้า "แดชบอร์ด"สรุปจากตาราง orders แสดงการ์ด KPI: ยอดขายเดือนนี้, จำนวนออเดอร์, ลูกค้าใหม่ ใต้การ์ดทำ กราฟแท่งยอดขายราย 7 วัน ตัวเลขให้คำนวณจากข้อมูลจริง ไม่ใส่เลขปลอม
ตัวอย่างจริงเจ้าของเปิดดูตอนเช้าเห็น ฿128k ▲12% · 64 ออเดอร์รู้ทันทีว่าวันนี้ขายดีไหม ไม่ต้องเปิด Excel ไล่บวกเอง
ผลที่ได้ · แดชบอร์ด
ภาพรวมเดือนนี้
ยอดขาย
฿128k
▲ 12%
ออเดอร์
64
▲ 9%
ยอดขาย 7 วันล่าสุด
ขั้น 6เอาขึ้นเว็บ (Deploy)

ระบบทำงานบนเครื่องเราแล้ว แต่ยังไม่มีใครเข้าได้. Deploy = เอาขึ้นเว็บให้มี URL จริงเปิดจากมือถือ/คอมไหนก็ได้. ขั้นตอนคือ push โค้ด → ระบบ build → ขึ้น liveอัตโนมัติ. กับ Cloudflare Pages แทบไม่ต้องตั้งค่าอะไร — ก๊อป prompt นี้

prompt ที่จะพิมพ์
ช่วย deploy ระบบนี้ขึ้น Cloudflare Pagesให้หน่อย - ตั้ง build แล้ว push ขึ้น git - ต่อกับ Supabase ที่ใช้อยู่ - บอก URL ที่เปิดใช้ได้จริงด้วย
ตัวอย่างจริงกด deploy เสร็จได้ลิงก์ myshop.pages.dev— ส่งให้ทีมเปิดจากมือถือใช้งานได้ทันที. แก้โค้ดแล้ว push ใหม่ เว็บอัปเดตเองใน ~1 นาที
จากเครื่องเรา → ขึ้นเว็บจริง
1
Push โค้ด
git pushส่งโค้ดขึ้น repo
2
Build อัตโนมัติ
Cloudflare รับโค้ดไปประกอบเป็นเว็บ
3
Live ออนไลน์ สำเร็จ
myshop.pages.devเปิดได้ทุกที่
ขั้น 7เก็บงาน: สิทธิ์ + ปลอดภัย

ขึ้นเว็บแล้วใคร ๆ ก็เข้าได้ — ก่อนใช้จริงต้อง ใส่ระบบล็อกอิน + บทบาท(ใครทำอะไรได้) และ กันข้อมูลรั่ว. อย่างน้อย: ต้องล็อกอินก่อนเข้า, พนักงานเห็นเฉพาะที่ควรเห็น, เปิดกฎความปลอดภัยของฐานข้อมูล ไม่ให้คนนอกดึงข้อมูลตรง ๆ

prompt ที่จะพิมพ์
เพิ่ม ระบบล็อกอินให้ระบบนี้ - ต้องเข้าสู่ระบบก่อนถึงใช้งานได้ - มี 2 บทบาท: เจ้าของ(เห็นทุกอย่าง) / พนักงาน(ไม่เห็นแดชบอร์ดยอดรวม) - เปิด Row Level Security ใน Supabase กันคนนอกดึงข้อมูล
ตัวอย่างจริงพนักงานล็อกอินเห็นแค่หน้าลูกค้า+ออเดอร์ ไม่เห็นยอดขายรวม. และถึงมีคนรู้ลิงก์ฐานข้อมูล ก็ดึงข้อมูลไม่ได้เพราะติดกฎ RLS
เช็กก่อนเปิดให้คนอื่นใช้
ต้องล็อกอินก่อนเข้า
ไม่มีหน้าไหนเปิดโล่งโดยไม่ยืนยันตัว
แยกบทบาท เจ้าของ / พนักงาน
พนักงานไม่เห็นยอดขายรวม
เปิด RLS ที่ฐานข้อมูล
คนนอกดึงข้อมูลตรง ๆ ไม่ได้
ไม่ฝังรหัสลับในโค้ดหน้าเว็บ
key สำคัญเก็บฝั่งหลังบ้าน
ยืนยันก่อนลบข้อมูล
กันกดพลาด · ลบ = ซ่อน ไม่ลบจริง

จบแล้ว — คุณมีระบบจริงตัวแรก

กฎเหล็กของมือใหม่: ทำระบบเล็กให้จบ 1 ตัวก่อน แล้วค่อยต่อโมดูลอื่น. ระบบลูกค้า+ออเดอร์ที่เพิ่งทำคือ "แกนกลาง" ที่ทุกอย่างต่อยอดได้ — อยากเพิ่มสต๊อก/ใบกำกับ/จัดส่ง ก็ อ้างอิงทะเบียนลูกค้าเดิมไม่ต้องเริ่มใหม่. โตทีละก้าว ดีกว่าทำใหญ่แล้วไม่เสร็จ

1เลือกโจทย์2วางข้อมูล3หน้าลูกค้า4หน้าออเดอร์5dashboard6ขึ้นเว็บ7สิทธิ์+ปลอดภัย
กลับห้องสมุดออกแบบ
พี่ปุ้ย ปริวรรตน์ อรุโณทยานันท์ ผู้สอนสร้างระบบธุรกิจด้วย AI
คิด เขียน และเป็นเจ้าของไอเดียเว็บนี้โดย พี่ปุ้ย ปริวรรตน์ อรุโณทยานันท์
ผู้เชี่ยวชาญวางระบบองค์กร & AI — สอนเจ้าของกิจการสร้างระบบของตัวเองมากกว่า 400 คน
ประวัติพี่ปุ้ย ·  ดูคอร์ส →