แผนการเรียนรู้
/
qrcode

เริ่มต้นภาคปฏิบัติ: การสร้างรากฐานระบบ

ช่วงที่ 1: การตั้งค่า Workspace และเชื่อมต่อ GitHub (30 นาที)

ภารกิจในครึ่งชั่วโมงนี้

  • จัดเตรียม "บ้าน" ของโค้ดบน GitHub สำหรับระบบขายมือถือมือสอง
  • เปิดใช้งาน "ศูนย์บัญชาการ" Google Antigravity
  • เชื่อมต่อ AI Agent เข้ากับพื้นที่เก็บข้อมูลของคุณ
วันแรก | 13:00 - 13:30 น. [1]

เป้าหมายโปรเจกต์: Second-hand Mobile Store

เรากำลังจะสร้างเว็บไซต์ที่รับคำสั่งซื้อสินค้า โดยมีโครงสร้างแบบ Fullstack [2, 3]

Django Backend

ใช้จัดการข้อมูลมือถือ สต็อกสินค้า และบันทึกคำสั่งซื้อของลูกค้าลงฐานข้อมูล

React Frontend

ใช้แสดงรายการมือถือที่สวยงาม และสร้างฟอร์มให้ลูกค้ากรอกข้อมูลการสั่งซื้อ

ขั้นตอนที่ 1: สร้าง GitHub Repository

นี่คือ "บ้านดิจิทัล" ที่ AI จะนำโค้ดที่สร้างเสร็จแล้วมาเก็บไว้ที่นี่ [4]

1

เข้าหน้าเว็บ github.com แล้วกดปุ่ม "New"

2

ชื่อ Repository: second-hand-mobile-shop

3

เลือก Public และติ๊กถูกที่ Add a README file

ทำไมต้องใช้ Antigravity?

เครื่องมือนี้จะช่วยเปลี่ยน "มือใหม่" ให้เป็น "ผู้ออกแบบระบบ" (Orchestrator) [1]

  • 🛰️
    Agent-First: ออกแบบมาเพื่อทำงานร่วมกับ AI Agent โดยเฉพาะ
  • 📂
    Context Aware: เข้าใจความต้องการทั้งโปรเจกต์ ไม่ใช่แค่ทีละไฟล์ [5]
  • ⚙️
    Ready to Work: ตั้งค่าครั้งเดียวจบ พร้อมให้ AI เริ่มสร้างระบบ Django/React ได้ทันที

ขั้นตอนที่ 2: เปิด Antigravity และสร้าง Workspace

1. เปิดโปรแกรม Google Antigravity ที่ติดตั้งไว้

2. เลือกเมนู "Create New Workspace" [6]

3. ตั้งชื่อ Workspace ว่า Mobile Shop MVP

*Workspace คือพื้นที่ทำงานดิจิทัลที่เราจะใช้ตลอดเวิร์กชอปนี้*

ขั้นตอนที่ 3: เชื่อมต่อโลกของ AI และ GitHub

เราจะให้ AI Agent เข้ามาทำงานใน "บ้าน" ที่เราสร้างไว้บน GitHub

  • ✅ ใน Antigravity ให้คลิกที่ไอคอน "Git / Source Control"
  • ✅ กดปุ่ม "Connect to GitHub" และทำตามขั้นตอนการยืนยันตัวตน (Authorize)
  • ✅ เลือก Repository second-hand-mobile-shop ที่เราเพิ่งสร้างขึ้น
🔗

ตรวจสอบความพร้อม! (Ready Check)

บน GitHub:

มี Repository ชื่อ 'second-hand-mobile-shop' พร้อมไฟล์ README.md

ใน Antigravity:

Workspace ถูกสร้างแล้ว และมีแถบสีเขียวแสดงสถานะการเชื่อมต่อ GitHub

"ยินดีด้วย! คุณได้สร้างพื้นฐานของระบบขายมือถือสำเร็จแล้ว"

อะไรคือลำดับถัดไป?

เมื่อมี "บ้าน" และ "เครื่องมือ" แล้ว
เราจะเริ่ม "ออกแบบสถาปัตยกรรม" และ "ข้อตกลงการรับส่งข้อมูล" (API Contract)

พบกันในช่วงถัดไป: 13:30 - 14:30 น.

👷‍♂️

การออกแบบสถาปัตยกรรมและ API Contract

ช่วงที่ 2: วางแผนพิมพ์เขียวของข้อมูลและข้อตกลงการสื่อสาร (60 นาที)

หัวใจสำคัญของช่วงนี้

  • ออกแบบฐานข้อมูลให้ AI เข้าใจบริบท (Data Layer Design)
  • สร้าง "สัญญา" ระหว่าง Backend และ Frontend (API Contract)
  • ใช้ AI ช่วยวิจารณ์ความสมเหตุสมผลของโครงสร้างระบบ
13:30 - 14:30 น. | การคิดเชิงระบบ

การออกแบบ Data Layer สำหรับ AI

AI จะทำงานได้แม่นยำขึ้น หากเราออกแบบโครงสร้างข้อมูลให้ชัดเจนตั้งแต่ต้น [3]

1. ความสัมพันธ์ชัดเจน

กำหนด Foreign Keys และความสัมพันธ์ (One-to-Many, Many-to-Many) ให้ชัดเจนเพื่อให้ AI เขียน Join Query ได้ถูกต้อง

2. Metadata ที่สมบูรณ์

ระบุประเภทข้อมูล (Field Types) และคำอธิบาย (Help Text) เพื่อให้ AI รู้ว่าฟิลด์นี้ใช้ทำอะไร

โครงสร้างฐานข้อมูล: ระบบขายมือถือมือสอง

Table: MobilePhone

  • - id (Primary Key)
  • - brand (Apple, Samsung, etc.)
  • - model (iPhone 15, S24)
  • - storage_gb (128, 256, 512)
  • - price (DecimalField)
  • - status (Available, Sold)

Table: CustomerOrder

  • - id (Primary Key)
  • - phone_id (ForeignKey to MobilePhone)
  • - customer_name (CharField)
  • - contact_number (CharField)
  • - order_date (DateTimeField)

"การเชื่อมโยง phone_id ทำให้ AI รู้ว่าคำสั่งซื้อนี้เป็นของสินค้าชิ้นไหน" [1]

API Contract คืออะไร?

คือ "ข้อตกลง" ระหว่าง Backend (Django) และ Frontend (React) ว่าจะคุยกันด้วยภาษาอะไร [1, 4]

Django (API)
🤝
React (UI)
"ถ้าไม่มีสัญญาที่ชัดเจน React จะไม่รู้ว่าต้องส่งข้อมูลลูกค้ายอดฮิตไปที่ไหน หรือ Django จะส่งข้อมูลมือถือกลับมาในรูปแบบใด ทำให้เกิดบั๊กมหาศาล"

ตัวอย่างสัญญา (API Contract)

Request (จาก React)

POST /api/orders/
{
  "phone_id": 1,
  "customer_name": "Somsak",
  "contact": "081-xxx-xxxx"
}

Response (จาก Django)

201 Created
{
  "order_id": 101,
  "status": "Success",
  "message": "บันทึกคำสั่งซื้อเรียบร้อย"
}

ใช้ AI วิจารณ์สถาปัตยกรรม

อย่าเพิ่งสั่งให้สร้าง ให้สั่งให้ "คิด" และ "วิจารณ์" ก่อน [2]

Prompt แนะนำ:

"นี่คือโครงสร้างฐานข้อมูลสำหรับระบบขายมือถือมือสองที่ฉันคิดไว้ (ส่ง Schema ให้ดู) คุณเห็นจุดอ่อนหรือความเสี่ยงในเชิงความปลอดภัยและประสิทธิภาพไหม? ช่วยเสนอแนะการปรับปรุงก่อนที่เราจะเริ่มสร้าง Implementation Plan"

"การทำแบบนี้ช่วยป้องกันปัญหา Technical Debt ได้ตั้งแต่บรรทัดแรก" [1]

กิจกรรมปฏิบัติ: ออกแบบระบบของคุณ

ใช้ Antigravity ร่วมกับ AI เพื่อสรุปพิมพ์เขียวข้อมูล

1

ระบุ Model ที่ต้องใช้ (MobilePhone, Order, etc.)

2

กำหนด API Endpoints หลักที่ Frontend ต้องใช้

3

ให้ AI สร้าง **ER Diagram** หรือคำอธิบายโครงสร้างไฟล์

ตรวจสอบความเรียบร้อย (Checkpoint)

✅ เข้าใจความสัมพันธ์ระหว่างสินค้าและคำสั่งซื้อ

✅ มีโครงสร้าง JSON สำหรับรับส่งข้อมูลในหัว

✅ AI ยอมรับว่าสถาปัตยกรรมนี้สมเหตุสมผล

ลำดับถัดไป (14:45): การเขียน Technical Spec 7 องค์ประกอบ
เพื่อเริ่มรันโครงการจริง!

"เรามาพักเบรก 15 นาทีกันก่อนครับ"

ช่วงสุดท้าย: การเนรมิตโปรเจกต์จากพิมพ์เขียว

ช่วงที่ 3: การเขียน Technical Spec 7 องค์ประกอบและการเริ่มต้นโครงการ (75 นาที)

ภารกิจส่งท้ายวันแรก

  • จัดทำเอกสารข้อกำหนด (Spec) ที่ AI สามารถเปลี่ยนเป็นโค้ดได้ 100% [1]
  • เริ่มต้นสั่งการ AI ผ่าน Implementation Plan ใน Antigravity [2]
  • ตรวจสอบและอนุมัติโค้ดชุดแรกเพื่อลดหนี้ทางเทคนิค (Technical Debt) [3]
14:45 - 16:00 น. | จากความคิดสู่ผลลัพธ์

ทำไมต้องเขียน Spec ให้ละเอียด?

หากคำสั่งไม่ชัดเจน AI จะ "เดา" และนั่นคือบ่อเกิดของความล้มเหลว

หนี้ทางเทคนิค (Technical Debt)

สถิติพบว่า 89.1% ของโค้ด AI มี "Code Smells" และ 24.2% ของปัญหานั้นจะตกค้างอยู่ในระบบหากไม่มี Spec คุมคุณภาพ [1-3]

ทางรอด: Precision Engineering

การเขียน Spec 7 องค์ประกอบช่วยให้ AI สร้างโค้ดได้แม่นยำ 100% ลดเวลาการแก้ไขงานลง 3-10 เท่า [1]

1. วัตถุประสงค์ และ 2. ขอบเขตระบบ

🎯 Business Purpose (ทำไปทำไม):

"สร้างเว็บแอปพลิเคชันเพื่อจัดการคำสั่งซื้อสินค้ามือถือมือสอง ลดภาระงานเอกสารของพนักงานขาย"

🚫 System Scope (ทำอะไร/ไม่ทำอะไร):

  • In Scope: แสดงรายการมือถือ, รับข้อมูลชื่อลูกค้า/เบอร์โทร, บันทึกการจอง
  • Out of Scope: การจ่ายเงินผ่านบัตร, การคำนวณค่าจัดส่ง, ระบบสมาชิก

3. โครงสร้างข้อมูล และ 4. หน้าตาผู้ใช้

📊 Data Structure (Django Models):

ตาราง MobilePhone เชื่อมโยงกับ CustomerOrder แบบ One-to-Many

🎨 UI/UX Requirements (React):

  • ใช้ Tailwind CSS แบบ Responsive (รองรับมือถือ)
  • มี Card แสดงรุ่นมือถือ และ Modal สำหรับกรอกข้อมูลสั่งซื้อ

5. ฟังก์ชันการทำงาน (Functional Req.)

ระบุตรรกะทางธุรกิจ (Business Logic) ให้ชัดเจน

"เมื่อลูกค้ากดปุ่ม 'สั่งซื้อ' และกรอกข้อมูลครบถ้วน ระบบต้องตรวจสอบสถานะสินค้า หากยังเป็น 'Available' ให้บันทึกคำสั่งซื้อและเปลี่ยนสถานะสินค้าเป็น 'Sold' ทันที"

*คำสั่งที่ระบุเป็นลำดับขั้นตอน (Step-by-step) จะช่วยให้ AI ไม่พลาดจุดสำคัญ*

6. มาตรฐานและกฎของทีม (.clinerules)

สร้างรั้วกั้นไม่ให้ AI เขียนโค้ดนอกลู่นอกทาง

# Mobile Shop Rules

- ใช้ Django REST Framework สำหรับ API เท่านั้น

- ห้ามใส่ข้อมูลลับ (Secrets) ในโค้ด ให้ใช้ .env

- โค้ด React ต้องเป็นแบบ Functional Component

- ตรวจสอบความปลอดภัยจาก SQL Injection ทุกครั้ง [2, 4]

7. เงื่อนไขการยอมรับงาน (Testing)

จะรู้ได้อย่างไรว่า AI ทำงานสำเร็จ?

✅

สามารถดึงรายการมือถือจาก Backend มาแสดงที่หน้า React ได้

✅

กดสั่งซื้อแล้วข้อมูลบันทึกลงฐานข้อมูล SQLite สำเร็จ

ลงมือปฏิบัติ: เริ่มต้นสร้างโครงการ

นำ Spec 7 องค์ประกอบส่งให้ Antigravity

1. คัดลอก Spec ทั้งหมดที่เขียนไว้

2. ใน Antigravity Chat ให้ใช้คำสั่ง: "ช่วยสร้าง Implementation Plan สำหรับโปรเจกต์นี้จาก Spec ที่ฉันให้"

3. สำคัญ: ตรวจสอบแผนที่ AI เสนอมาทีละข้อก่อนกดปุ่มอนุมัติให้เริ่มเขียนโค้ด [1, 2]

การเป็น "ผู้อนุมัติ" (Reviewer)

กฎการ Accept โค้ด:

  • 🔍 **อ่านชื่อตัวแปร:** ตรงกับที่ตกลงใน Spec หรือไม่?
  • 🛡️ **เช็คความปลอดภัย:** มีจุดเสี่ยง SQL Injection ไหม? [2]
  • 🛠️ **รันใน Terminal:** ใช้คำสั่ง python manage.py runserver เพื่อดูผลลัพธ์จริง
👩‍💻

ความสำเร็จของวันนี้

เข้าใจกลไก AI Agent [1]
ตั้งค่า Workspace สำเร็จ [2]
มี Spec ที่แม่นยำในมือ [1]
🔥 คุณได้เริ่มต้นเส้นทางสู่ AI Orchestrator แล้ว!

เจอกันใหม่พรุ่งนี้!

พรุ่งนี้เราจะเข้าสู่ **Phase 2: Fullstack Development**
พัฒนาฟีเจอร์จองสินค้าให้สมบูรณ์และเชื่อมต่อ Django เข้ากับ React [2, 5]

เริ่ม 09:00 น. | เตรียมสมองให้พร้อมสำหรับการโค้ดดิ้งแบบติดจรวด
👋😴