AI Agent Co-Working System · Day 1

First Vibe
Coding

สร้างระบบ CRM สโมสร แบบพื้นฐาน

จากไอเดียสู่ระบบที่ล็อกอินได้จริง เข้าใจ Frontend · Backend · Database และทำงานกับทีม AI Agent อย่างถูกวิธี

1 วัน · 10:00–17:00 น. Supabase · Cloudflare Pages Claude Code / Codex
เปิดสไลด์สอน ดูเอกสารทั้งหมด
เอกสารทั้งหมด

เลือกเอกสารที่ต้องการ

ทุกชิ้นเปิดอ่านผ่านเว็บได้ทันที หรือดาวน์โหลดเป็น PDF — เนื้อหา ตารางเวลา และ Prompt ตรงกันทั้งหมด ใช้ได้ทั้ง Claude Code และ Codex

TEACHING DECK · 56 SLIDES

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

สไลด์สอนทั้งวัน: Frontend / Backend / Database, ระบบล็อกอิน, Use Case, ทำไมงานเดฟใช้ Main Agent ตัวเดียว และ Prompt ทุก Workshop พร้อมปุ่มคัดลอก · บนเว็บใช้ปุ่มลูกศรเลื่อน กด T เปิดแถบสไลด์

เปิดดูผ่านเว็บดาวน์โหลด PDF
STUDENT HANDBOOK · A4 · 31 หน้า

Handbook นักเรียน

คู่มือทำตามในคลาสและใช้ต่อที่บ้าน: Setup ทีละขั้น Prompt ฉบับเต็มทุกขั้นพร้อมปุ่มคัดลอก หน้าจอตามบทบาท ตารางสิทธิ์ แผนต่อยอด และตารางแก้ปัญหา

เปิดดูผ่านเว็บดาวน์โหลด PDF
เรียนอะไรบ้าง

ภาพอธิบายในคลาส

เข้าใจระบบจากภาพก่อนลงมือสร้าง — กดที่ภาพเพื่อดูเต็มจอ

ระบบ 1 ระบบ = ร้านอาหาร 3 ส่วน: Frontend หน้าบ้าน, Backend หลังบ้าน, Database ฐานข้อมูล
Session 2ระบบ 1 ระบบ = ร้านอาหาร 3 ส่วน
ตามรอยคำขอ ลูกค้ากดสมัคร 5 ขั้น
Session 2ตามรอยคำขอ: ลูกค้ากดสมัคร
ล็อกอิน = บัตรพนักงาน: Authentication กับ Authorization
Session 2ล็อกอิน = บัตรพนักงาน
Subagent ทำงานอย่างไร: Main Agent แจกใบสั่งงานให้ Frontend Backend Database แล้วรับรายงานกลับ ไม่คุยกันเอง
Session 3Subagent ทำงานอย่างไร
Use Case: ใครทำอะไรได้บ้าง 4 บทบาท
Workshop 1Use Case: ใครทำอะไรได้บ้าง
ซ่อนปุ่มไม่พอ ต้องล็อกที่ตู้: Row Level Security
Workshop 3ซ่อนปุ่มไม่พอ ต้องล็อกที่ตู้
หน้าจอตามบทบาท

ล็อกอินแล้ว แต่ละบทบาทเห็นอะไร

ระบบเดียวกัน ฐานข้อมูลเดียวกัน แต่เมนูและปุ่มที่แต่ละคนเห็นไม่เท่ากัน — หน้าจอตัวอย่างที่ใช้ออกแบบใน Workshop 1 และสร้างจริงใน Workshop 3

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

หนึ่งวัน สาม Session สี่ Workshop

เวลาช่วงหัวข้อ
10:00–10:30Session 1Vibe Coding คืออะไร + เปิดโจทย์สโมสร + Setup
10:30–11:00Session 2ระบบ 1 ระบบประกอบด้วยอะไร — Frontend / Backend / Database + Authentication / Authorization
11:00–11:30Session 3AI Agent ทำงานจริงอย่างไร — Main Agent · Subagent · เลือกใช้ให้ถูกงาน
11:30–12:30Workshop 1ออกแบบก่อนสร้าง: Use Case · หน้าจอตามบทบาท · Permission Matrix · SPEC.md
12:30–13:30พักพักรับประทานอาหารกลางวัน
13:30–15:00Workshop 2สร้าง CRM ด้วย Main Agent ทีละชั้น (Database → Backend → Frontend) · ด่าน 1
15:00–15:15เบรกพักเบรก
15:15–16:30Workshop 3ระบบล็อกอินและบทบาท + ล็อกสิทธิ์ที่ฐานข้อมูล · ด่าน 2
16:30–17:00Workshop 4ขึ้นเว็บจริง + สรุป + แผนต่อยอด · ด่าน 3
ตารางเวลาเป็นแนวทาง ผู้สอนอาจปรับเวลาแต่ละช่วงให้เหมาะกับความคืบหน้าของผู้เรียน โดยเนื้อหาและผลลัพธ์หลักยังครบถ้วน
ผลลัพธ์หลังเรียน

สิ่งที่ผู้เรียนได้กลับไป

01

เข้าใจ 3 ชั้นของระบบ

Frontend · Backend · Database และข้อมูลไหลอย่างไร

02

Use Case + ตารางสิทธิ์

ระบบมีกี่บทบาท แต่ละบทบาททำอะไรได้

03

ทำงานกับ AI Agent ถูกวิธี

Main Agent ทีละชั้น, SPEC.md และไฟล์กติกาทีม

04

CRM ที่ล็อกอินได้จริง

ฟอร์มสมัคร → ลีด → หลังบ้าน 3 บทบาท

05

ขึ้นเว็บจริง

Cloudflare Pages เปิดบนมือถือได้

แผนต่อยอด

เรียนแกนกลางให้แน่น แล้วต่อยอดเอง

แผนต่อยอดจากแกน CRM: Join Now, อนุมัติ + Audit Log, Waiting List, ระบบจอง, ร่างสัญญา, Chatbot + FAQ, Agent ในระบบ, Dashboard ละเอียด

เพื่อให้ผู้เรียนเข้าใจพื้นฐานอย่างแท้จริงภายใน 1 วัน คลาสนี้สอนเฉพาะแกนกลางของระบบ ส่วนที่เหลือเป็นงานต่อยอดที่ผู้เรียนทำต่อเองได้ด้วยวิธีเดียวกัน

  • Join Now ขั้น 1–2 หน้า Explore + แบบประเมินความเหมาะสม %
  • ขั้นอนุมัติ + Audit Log ใครแก้ เมื่อไหร่ ค่าก่อน/หลัง
  • Waiting List · ระบบจอง · ร่างสัญญา เสียบเข้าฐานข้อมูลเดิม
  • Chatbot + FAQ · Agent ในระบบ AI ร่าง คนอนุมัติ
  • Dashboard ละเอียด + ล็อกอินขั้นสูง

ทุกข้อมี Prompt ตั้งต้นใน Handbook บท "แผนต่อยอด"