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

Backend Implementation: ระบบหลังบ้าน SolarCorp

การสร้าง API และฐานข้อมูลอัจฉริยะด้วย Django REST Framework

10:45 - 12:00 | ภาคปฏิบัติเชิงลึก

เป้าหมายในชั่วโมงนี้

✅ เปลี่ยน SRS เป็น Django Models สำหรับระบบโซลาร์เซลล์

✅ สร้าง API Contract เพื่อเชื่อมต่อหน้าบ้านและหลังบ้าน

✅ ปรับแต่งระบบจัดการพนักงานขาย (Admin Dashboard)

✅ รีวิวความปลอดภัยและลด Technical Debt ในโค้ด AI

โครงสร้างเทคโนโลยี (Backend Stack)

อ้างอิงจาก SRS.md ข้อ 1.3

Django

Framework หลัก

uv

ตัวจัดการ Package ที่เร็วที่สุด

SQLite

ฐานข้อมูลช่วงพัฒนา

เริ่มต้นโครงการด้วยความเร็วสูง

ใช้คำสั่ง `uv` เพื่อสร้างฐานโปรเจกต์ให้ AI ทำงานต่อได้ทันที

uv init SolarCorp
uv add django djangorestframework django-cors-headers
uv run django-admin startproject core .

"Antigravity จะใช้สภาพแวดล้อมนี้ในการรันระบบให้เรา"

สร้าง Model: Solar Package

Requirement FR-2.1:

"จัดการข้อมูลแพ็กเกจโซลาร์ (เช่น 3kW, 5kW, 10kW)"

➡️
class SolarPackage(models.Model):
  name = models.CharField(...)
  capacity_kw = models.IntegerField()
  price = models.DecimalField(...)

สร้าง Model: Lead Generation

เก็บข้อมูลผู้สนใจเพื่อส่งต่อให้ทีมขาย

Fields:

  • - customer_name
  • - phone_number
  • - avg_monthly_bill
  • - utm_source [FR-1.3]

Status Tracking:

  • - New
  • - Contacted
  • - Closed Won/Lost

การเชื่อมโยงข้อมูล (Order & Leads)

Lead
Order
Package

"กำหนด Foreign Key ให้ชัดเจนเพื่อให้ AI เข้าใจความสัมพันธ์ของธุรกิจ"

ตรรกะการแนะนำแพ็กเกจ (FR-2.3)

ฟังก์ชันคำนวณขนาดติดตั้งเบื้องต้นอัตโนมัติ

"หากค่าไฟ > 3,000 บาท แนะนำ 5kW"
"หากค่าไฟ > 6,000 บาท แนะนำ 10kW"

*เราจะสั่งให้ AI เขียนตรรกะนี้ไว้ใน Model Save Method หรือ Serializer*

Serializers: นักแปลภาษาข้อมูล

เปลี่ยนข้อมูลในฐานข้อมูลให้กลายเป็น JSON ที่หน้าบ้านอ่านออก

# Backend Data
Lead.objects.all()
# JSON Output
{ "name": "Somsak", "package": "5kW" }

API ViewSets: จัดการทุก CRUD ในที่เดียว

ใช้ Antigravity สร้างความสามารถในการ สร้าง/ดู/แก้ไข/ลบ ข้อมูล

  • List/Retrieve: แสดงรายการแพ็กเกจโซลาร์
  • Create: บันทึกข้อมูล Lead จากหน้า Landing Page [FR-1.1]
  • Update: อัปเดตสถานะการขายของทีมงาน [FR-4.2]

ทำสัญญาการรับส่งข้อมูล (API Contract)

POST /api/leads/

{ "name": "...", "bill": 4500 }

Response 201 Created

{ "id": 1, "suggested": "5kW" }

"สัญญานี้จะทำให้การสร้าง React ในช่วงบ่ายไม่มีข้อผิดพลาด"

Rapid Admin Panel (FR-3.4)

ใช้พลังของ Django Admin เป็นอาวุธให้ทีมขาย

🎯 **Custom Search:** ค้นหา Lead จากเบอร์โทรศัพท์

🎯 **Filters:** กรองเฉพาะเคสที่ "รอนัดหมาย"

🎯 **CSV Export:** ส่งออกข้อมูลไปทำรายงานต่อ [FR-4.3]

หยุด! อย่าเพิ่งกด Accept

"AI สร้างโค้ดได้ แต่คุณต้องเป็นคนอนุมัติ"

🚦

สถิติ: 89.1% ของโค้ด AI มี Code Smells

หน้าที่ของคุณ: ตรวจสอบฟังก์ชันคำนวณและช่องโหว่ความปลอดภัย

Security Gate: SQL Injection

Bad (Insecure)

cursor.execute("SELECT * FROM leads WHERE name = " + user_input)

Good (Django OR)

Lead.objects.filter(name=user_input)

"เราจะใช้ **Agent Side Panel** ในการแสกนหาจุดบกพร่องเหล่านี้"

การคุมบริบท (Session Architecture)

1

สร้าง Models และทำ Migrations (จบ Session)

2

สร้าง API ViewSets และ Serializers (จบ Session)

3

ติดตั้ง CORS เพื่อรอเชื่อมต่อหน้าบ้าน (จบ Session)

ด่านสกัดกั้น CORS

"ถ้าไม่ตั้งค่านี้ หน้าบ้าน React จะเรียกหาข้อมูลจากหลังบ้านไม่ได้"

CORS_ALLOWED_ORIGINS = [
  "http://localhost:5173", # React Dev
  "https://solarcorp.onrender.com", # Production
]

การกำจัด Code Smells

"อย่าปล่อยให้โค้ด AI กลายเป็นหนี้ที่คุณต้องจ่ายภายหลัง"

  • 🧹

    Refactor: สั่ง AI ให้ยุบรวมโค้ดที่ซ้ำซ้อน

  • 🧹

    Clean Code: บังคับใช้ Type Hints และ Docstrings

ลงมือปฏิบัติ: สร้าง Solar API

1. เปิด Antigravity Chat และส่ง SRS.md ส่วน Backend เข้าไป

2. สั่ง: "ช่วยสร้างไฟล์ Models สำหรับโครงการ SolarCorp ตาม SRS นี้"

3. ตรวจสอบ Implementation Plan และกด Approve

การ Migrations และรันระบบ

ใช้ Terminal ของ Antigravity เพื่อจัดการโครงสร้างฐานข้อมูล

python manage.py makemigrations
python manage.py migrate
python manage.py runserver

"ตรวจสอบว่าไม่มี Error ปรากฏในแถบสถานะทางขวา"

เทคนิค: Explain-Then-Implement

Prompt แนะนำ:

"ก่อนจะเขียน Serializers สำหรับระบบ Lead ช่วยอธิบายลำดับชั้นของข้อมูลที่จะส่งไปให้ React ฟังก่อน เพื่อความมั่นใจว่าเราเข้าใจตรงกัน"

ตรวจสอบงานก่อนพักเบรก!

✅ Models: Package, Lead, Order ครบถ้วน
✅ API Endpoints เปิดใช้งานแล้ว
✅ Admin Panel เพิ่มข้อมูลตัวอย่างได้
✅ รีวิว Code Smells และ Security แล้ว

จบช่วง Backend

ช่วงบ่าย: เราจะเนรมิตหน้าตาเว็บไซต์ด้วย **React + Tailwind**
และเชื่อมต่อเข้ากับ API ที่เราสร้างเสร็จในตอนนี้!

🥗

พักรับประทานอาหารกลางวัน

"พักผ่อนให้เพียงพอ เพื่อกลับมาลุย Frontend แบบติดจรวด"

พบกันอีกครั้งเวลา 13:00 น.