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

วันที่ 2

การพัฒนา Fullstack แบบ AI-Native

จาก "พิมพ์เขียว" สู่ "ระบบที่ใช้งานได้จริง" ด้วยพลังของ AI Orchestration

หัวข้อบรรยายเช้านี้

  • โครงสร้างระบบ Solar Cell แบบ AI-Native Architecture
  • Advanced Prompt Engineering สำหรับ Django & React
  • Session Architecture: การจัดการบริบทไม่ให้ AI สับสน
09:00 - 10:30 | บรรยายเชิงลึก

ทบทวนเป้าหมาย: SolarCorp Project

อ้างอิงจาก SRS.md ที่เราวางแผนไว้

1. Sales Automation

ระบบรับคำสั่งซื้อแพ็กเกจโซลาร์เซลล์อัตโนมัติ

2. Lead Management

ลงทะเบียนผู้สนใจและคำนวณขนาดติดตั้งเบื้องต้น

  • สมัครบัญชี Google
  • สมัครบัญชี Github ด้วยการเชื่อมกับบัญชี Google
  • สมัครบัญชีผู้เริ่มต้นกับ pythonanywhere โดยใช้ Google email แล้วสร้าง web app ใหม่
    • - Django
    • - Python 3.13 & Django 5.1.3
    • - เปิด Console ใช้คำสั่ง zip -r mysite.zip mysite
    • - Download mysite.zip แยกไฟล์แล้วเปิดด้วย Antigravity
  • สไลด์
  • mysite-2026-05-06.zip
  • https://solarcorp.pythonanywhere.com

ภารกิจวันนี้: สร้างบ้านที่มีรากฐานแข็งแรง

เราจะไม่ให้ AI เขียนโค้ดไปเรื่อยๆ แต่เราจะคุม "โครงสร้าง" ทั้งหมด

🐍

Django Backend

⚛️

React Frontend

AI-Native Architecture คืออะไร?

การออกแบบซอฟต์แวร์ที่แยกชั้น Orchestration Logic(ส่วนที่สั่งการ AI) ออกจาก Business Logic (กฎทางธุรกิจ)

ทำไมต้องทำแบบนี้?

  • เพื่อให้ AI เข้าใจหน้าที่ของแต่ละไฟล์ได้ง่ายขึ้น
  • ลด Technical Debt เมื่อต้องการเปลี่ยนโมเดล AI ในอนาคต
  • ทำให้ระบบตรวจสอบความปลอดภัย (Security) ได้เป็นส่วนๆ

สถาปัตยกรรม 3 ชั้นสำหรับ Solar Project

1. Data Layer (Django Models)

เก็บข้อมูล Solar Packages, Leads, และ Orders

2. API Layer (Django REST Framework)

สะพานเชื่อมส่งข้อมูลข้ามไปมาระหว่างหน้าบ้านและหลังบ้าน

3. Presentation Layer (React + Tailwind)

หน้าเว็บ Landing Page และแบบฟอร์มรับลูกค้า

Advanced Prompt Engineering

เทคนิคการ "สั่งงาน" ให้ AI สร้างโค้ดที่ตรงใจ 100%

สูตรลับ: P-C-T-F

P - Persona: กำหนดบทบาท
C - Context: ให้ข้อมูลแวดล้อม
T - Task: ระบุงานที่ต้องทำ
F - Format: กำหนดรูปแบบผลลัพธ์

Persona: กำหนด "สมอง" ให้ AI

"คุณคือ Senior Django Developer ที่เชี่ยวชาญด้านความปลอดภัยและการออกแบบฐานข้อมูลประสิทธิภาพสูง..."

การกำหนดแบบนี้จะทำให้ AI เขียนโค้ดที่มีความซับซ้อนและปลอดภัยกว่าการสั่งงานแบบลอยๆ

Context: อย่าให้ AI เดาเอง

ส่งเฉพาะไฟล์หรือส่วนของ SRS ที่เกี่ยวข้องให้ AI เสมอ

❌ พลาด:

"สร้างหน้าลงทะเบียนให้หน่อย"

✅ ถูกต้อง:

"อ้างอิงจาก FR-1.1 ใน SRS.md ช่วยสร้าง Django Form สำหรับเก็บข้อมูล Lead ที่มีฟิลด์ ชื่อ, เบอร์โทร และค่าไฟเฉลี่ย "

Task & Format: สั่งให้ชัด มัดให้จบ

Task: "สร้าง API สำหรับบันทึก Order และส่ง Email ยืนยันอัตโนมัติ"

Format: "ส่งผลลัพธ์เป็นไฟล์ views.py และ serializers.py โดยต้องใช้ Clean Code และมี Comment อธิบายทุกฟังก์ชัน"

Session Architecture

"อย่าคุยกับ AI แบบมาราธอน แต่จงคุยแบบเป็นภารกิจ (Discrete Units)"

ปัญหาของการคุยยาวเกินไป:

  • AI เริ่มจำกฎที่ตั้งไว้ตอนแรกไม่ได้ (Context Drift)
  • ความแม่นยำลดลง เริ่มสร้าง Code Smells (89.1%)
  • เปลือง Token Budget โดยไม่จำเป็น

เทคนิค: The Handoff Pattern

สรุปงานเก่า เพื่อเริ่ม Session ใหม่ที่สะอาดกว่าเดิม

จบงาน 1

"สรุปว่าเราสร้าง Model แพ็กเกจโซลาร์เสร็จแล้วนะ..."

➡️

เริ่มงาน 2

"จากสรุปเมื่อกี้ ช่วยสร้างหน้าจอคำนวณค่าไฟด้วย React ต่อเลย..."

เจาะลึกโครงสร้างข้อมูล (Solar Cell Models)

สิ่งที่คุณต้องสั่งให้ AI สร้างในบ่ายนี้

Package Model:

  • - name (3kW, 5kW, 10kW)
  • - price (ราคาติดตั้ง)
  • - description

Lead Model:

  • - customer_name
  • - monthly_electricity_bill
  • - suggested_package

โจทย์ที่ยากที่สุด: ระบบคำนวณอัตโนมัติ

อ้างอิง FR-2.3: "กรอกค่าไฟแล้วแนะนำแพ็กเกจที่เหมาะสม"

วิธีคุยกับ AI Agent:

"ช่วยเขียนฟังก์ชันใน Django ที่รับค่าตัวเลข 'ค่าไฟรายเดือน' และคำนวณว่าลูกค้าควรใช้แพ็กเกจขนาดกี่ kW โดยยึดหลักว่า 1kW ผลิตไฟได้ประมาณ 120 หน่วยต่อเดือน..."

API Contract ของ Solar Project

Request (React ➡️ Django)

POST /api/leads/
{
  "name": "Anirut",
  "bill": 3500
}
        

Response (Django ➡️ React)

{
  "recommendation": "5kW System",
  "saving_estimate": "2,800 THB/mo"
}
        

Human-in-the-loop: คุณคือด่านสุดท้าย

ทำไมต้องตรวจโค้ด?

โค้ดที่ AI สร้างอาจ "รันผ่าน" แต่แอบแฝงช่องโหว่ความปลอดภัย เช่น ลืมใส่การยืนยันตัวตน (Authentication) ในหน้าจัดการ Order

🕵️‍♀️

Security & Compliance (FR-1.4)

"รองรับการทำ PDPA Consent ในหน้าฟอร์มลงทะเบียน"

1. สั่งให้ AI เพิ่มฟิลด์ pdpa_accepted ในฐานข้อมูล

2. บังคับให้ AI สร้างหน้าจอ Checkbox ใน React ที่ต้องติ๊กก่อนกดส่ง

"กฎทางกฎหมายเป็นส่วนหนึ่งของ Technical Spec ที่ AI ต้องทำตาม 100%"

กฎเหล็กประจำโปรเจกต์ (.clinerules)

เขียนกฎควบคุม AI ไม่ให้สร้าง Technical Debt

# SolarCorp Governance Rules

- ทุก Model ต้องมี 'created_at' และ 'updated_at'

- ห้ามใช้ฟังก์ชันคำนวณค่าไฟที่หน้า Frontend ให้เรียกจาก Backend เท่านั้น

- โค้ด React ต้องรองรับ Dark Mode ตามธีมบริษัท

ระวัง! AI Slop (ขยะดิจิทัล)

โค้ดที่ทำงานได้ แต่ไม่มีใครเข้าใจและดูแลยาก

  • Code Smells: โค้ดซ้ำซ้อนหรือใช้ Library ล้าสมัย (89.1%)
  • Broad Exception: การดัก Error ที่กว้างเกินไปจนไม่รู้จุดที่พัง
  • วิธีแก้: สั่ง AI ให้ "Refactor" ทันทีหลังเขียน Boilerplate เสร็จ

กลยุทธ์ "อธิบายก่อน...ค่อยทำ"

Prompt ที่ต้องใช้ในบ่ายนี้:

"ฉันต้องการสร้างระบบหลังบ้านสำหรับจัดการ Solar Packages ช่วยสรุปขั้นตอนการทำงาน (Implementation Plan) ให้ฉันตรวจก่อน และห้ามเขียนโค้ดจนกว่าฉันจะอนุญาต"

ลองคิดดูสิ...

"ถ้าเราจ้างโปรแกรมเมอร์มา 1 คน แล้วเราสั่งงานเขาไม่เคลียร์ ผลลัพธ์จะเป็นอย่างไร?"

"นั่นแหละคือสิ่งที่ AI จะเป็น... ถ้าคุณไม่ทำตัวเป็น Orchestrator ที่ดี"

อาวุธลับ: Antigravity Browser Subagent

ใช้ AI ไปท่องเว็บแทนคุณเพื่อหาข้อมูลเทคนิค

ค้นหา Library

"ไปหา Library ของ React ที่ใช้แสดงกราฟประหยัดพลังงานที่สวยที่สุดมาให้หน่อย"

เช็ค Doc ล่าสุด

"ไปอ่าน Django 5.1 Documentation เรื่องการจัดการไฟล์ภาพว่ามีอะไรเปลี่ยนไปไหม"

สรุปหลักการพัฒนาวันนี้

1

ยึดโครงสร้าง **Django + React** เป็นที่ตั้ง

2

ใช้ **Prompt สูตร P-C-T-F** ในการสั่งงาน

3

แบ่งงานเป็น **Discrete Sessions** และตรวจ Code Smells เสมอ

สู่สนามรบจริง: Hackathon 18 ชม.

ทุกความรู้ในเช้านี้ คืออาวุธที่คุณจะใช้ใน Phase 2

🔥 "เราจะไม่แค่เรียน... แต่เราจะสร้างเว็บไซต์ที่รับคำสั่งซื้อได้จริง!"

ช่วงถาม-ตอบ (Q&A)

"มีข้อสงสัยเรื่องโครงสร้างระบบหรือการเขียน Prompt ไหมครับ?"

🤔❓

พักเบรก 15 นาที

กลับมาเจอกันที่หัวข้อถัดไป:
**Backend Implementation: เนรมิตระบบหลังบ้าน Solar Cell**

เริ่มช่วงถัดไปเวลา 10:45 น.