Basic CRM System with Vibe Coding

เอกสารทั้งหมด

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

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

TEACHING DECK · 33 SLIDES

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

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

เปิดดูผ่านเว็บ ดาวน์โหลด PDF

STUDENT HANDBOOK · A4 · 26 หน้า

Handbook นักเรียน

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

เปิดดูผ่านเว็บ ดาวน์โหลด PDF

เรียนอะไรบ้าง

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

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

วงจรพัฒนาระบบ SDLC 6 ขั้น เก็บรวบรวมความต้องการ วางแผน คิดวิเคราะห์ ออกแบบ พัฒนา ทดสอบ ขึ้นระบบ ดูแล — Session 1วงจรพัฒนาระบบ (SDLC)

ระบบ 1 ระบบ = ร้านอาหาร 3 ส่วน: Frontend หน้าบ้าน, Backend หลังบ้าน, Database ฐานข้อมูล — Session 1ระบบ 1 ระบบ = ร้านอาหาร 3 ส่วน

ล็อกอิน = บัตรพนักงาน: Authentication กับ Authorization — Session 1ล็อกอิน = บัตรพนักงาน

Agent คุยกันเองไหม: ความเชื่อผิดและความจริง ทำงานผ่านใบสั่งงาน CLAUDE.md และไฟล์โปรเจกต์ — Session 2Agent คุยกันเองไหม?

ทำไมใช้ Main Agent ตัวเดียว: ทำทีละชั้น แก้น้อยรอบ ประหยัดโทเค็น — Session 2ทำไมใช้ Main Agent ตัวเดียว

Use Case ระบบ CRM สโมสร 5 ผู้กระทำ — Workshop 1Use Case: ใครทำอะไรได้บ้าง

หน้าจอตามบทบาท

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

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

หน้าเข้าสู่ระบบ Harmony Club CRM — **ล็อกอิน**หน้าเดียวทุกบทบาท ระบบพาไปหน้าของบทบาทนั้น

หน้าสมัครใช้งาน และหน้าส่งคำขอรอแอดมินอนุมัติ — **ทีมงานสมัครใหม่**สมัครแล้วรอแอดมินอนุมัติและกำหนดบทบาท

หน้าจอแอดมิน ผู้ใช้และสิทธิ์ ผู้สมัครรออนุมัติ ทีมงาน และลีดที่ยังไม่มอบหมาย — **แอดมิน**อนุมัติผู้สมัคร กำหนดบทบาท เห็นลีดทุกคน มอบหมายได้

หน้าจอพนักงานขาย ลีดของฉัน แยกตามสถานะ — **พนักงานขาย**เห็นเฉพาะลีดที่ได้รับมอบหมาย เปลี่ยนสถานะ บันทึกการติดต่อ

Dashboard ผู้บริหาร ตัวเลขสรุป กราฟลีดรายสัปดาห์ ช่องทาง ขั้นการขาย และผลงานทีม — **ผู้บริหาร**Dashboard ภาพรวม กราฟแนวโน้ม ดูอย่างเดียว

เปิดหน้าจอตัวอย่างทั้งหมด + ตารางสิทธิ์

ตารางสอน

หนึ่งวัน: เช้าเข้าใจและออกแบบ บ่ายสร้างทีละเฟส

เวลา	ช่วง	หัวข้อ
10:00–10:45	Session 1	การพัฒนาระบบทำงานอย่างไร — SDLC · ระบบ 3 ชั้น · ตามรอย 1 คำขอ · Authentication / Authorization
10:45–11:30	Session 2	AI Agent ทำงานจริงอย่างไร — Main Agent / Subagent · ทำไมใช้ Main Agent ตัวเดียว · CLAUDE.md คืออะไร
11:30–12:30	Workshop 1	เตรียม Env (Next.js + Supabase + Cloudflare) + ออกแบบระบบ: Use Case · หน้าจอตามบทบาท · เติมบทบาทเอง · ได้ CLAUDE.md แบ่ง 3 เฟส
12:30–13:30	พักกลางวัน
13:30–15:00	Workshop 2	Phase 1 สมัคร + ล็อกอิน + 3 บทบาท (แอดมินอนุมัติ) · ด่าน 1
15:00–15:15	เบรก
15:15–16:30	Workshop 3	Phase 2 ลีด CRM ทีละชั้น · ด่าน 2
16:30–17:00	ปิดวัน	สรุป + Phase 3 การบ้าน (Dashboard + ขึ้นเว็บ) + ถาม-ตอบ

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

ผลลัพธ์หลังเรียน

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

เข้าใจการพัฒนาระบบ

SDLC และ 3 ชั้น Frontend · Backend · Database

ออกแบบก่อนสร้าง

Use Case + ตารางสิทธิ์ ว่าใครทำอะไรได้

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

Main Agent ตัวเดียว + CLAUDE.md ที่ออกแบบบทบาทเอง แบ่ง 3 เฟส

สมัคร + ล็อกอิน 3 บทบาท

แอดมินอนุมัติ ล็อกสิทธิ์ที่ฐานข้อมูล

ลีด CRM + การบ้าน

พนักงานขายเห็นลีดตัวเอง · Dashboard + ขึ้นเว็บทำต่อที่บ้าน

แผนต่อยอด

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

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

Phase 3 · การบ้าน Dashboard ผู้บริหาร + ขึ้นเว็บจริงบน Cloudflare (มี Prompt ให้)
Waiting List · ระบบจอง เสียบเข้าฐานข้อมูลเดิม
ร่างสัญญา ดึงข้อมูลสมาชิกไปเติมแม่แบบ คนอนุมัติ
Chatbot / LINE · Agent ในระบบ AI ร่าง คนกดอนุมัติ

วิธีเดิมทุกข้อ: เพิ่มเป็น Phase 4, 5 … ใน CLAUDE.md แล้วสั่ง "อ่าน CLAUDE.md แล้วทำ Phase 4"