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

Frontend Integration: พัฒนาหน้าบ้าน SolarCorp

การสร้างหน้าจอ Interactive และเชื่อมต่อข้อมูลแบบ Real-time ด้วย React และ Tailwind CSS

13:00 - 14:30 | ภาคปฏิบัติการสร้างส่วนติดต่อผู้ใช้

ภารกิจในช่วงบ่ายนี้

✅ พัฒนาหน้า Landing Page สำหรับแคมเปญโซลาร์เซลล์ [FR-1.1]

✅ สร้างระบบคำนวณแพ็กเกจเบื้องต้น (Solar Calculator) [FR-2.3]

✅ เชื่อมต่อฟอร์มลงทะเบียนเข้ากับ Django API ที่สร้างไว้เมื่อเช้า

✅ ปรับแต่งหน้าจอให้รองรับมือถือ (Mobile-first) [NFR-4]

เครื่องมือในการสร้างหน้าบ้าน

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

React

Component-Based Library

Tailwind CSS

Utility-First Styling

Vite

Build Tool ความเร็วสูง

การคิดแบบ Component-Driven

เราจะแบ่งหน้าเว็บออกเป็นชิ้นเล็กๆ เพื่อให้ AI สร้างได้แม่นยำที่สุด

Navbar
Hero Section
Lead Form

"เมื่อโค้ดแยกส่วนกัน จะช่วยลดความเสี่ยงในการเกิด Code Smells ได้ถึง 89.1%"

อัตลักษณ์แบรนด์ SolarCorp

Mood & Tone:

  • Colors: ขาว, ฟ้าสะอาด, และสีเหลืองแดด (Solar Yellow)
  • Feeling: น่าเชื่อถือ, ทันสมัย, รักษ์โลก

"เราจะใส่ข้อกำหนดนี้ไว้ใน .clinerules เพื่อให้ AI คุมโทนสีให้เรา"

เริ่มสร้างหน้า Landing Page [FR-1.1]

Prompt แนะนำ:

"สร้าง Hero Section สำหรับ SolarCorp ที่ประกอบด้วยพาดหัวที่น่าสนใจ, รูปภาพแผงโซลาร์เซลล์, และปุ่ม 'ขอใบเสนอราคา' ที่นำทางไปยังแบบฟอร์มลงทะเบียน"

🏗️

เครื่องมือคำนวณขนาดติดตั้ง [FR-2.3]

เปลี่ยนตัวเลขค่าไฟให้เป็น "คำแนะนำแพ็กเกจ"

Frontend Logic:

  • รับค่า 'ค่าไฟรายเดือน' จากผู้ใช้
  • เรียก API Backend เพื่อคำนวณความประหยัด
  • แสดงผลลัพธ์เป็นแพ็กเกจที่เหมาะสม (3kW, 5kW หรือ 10kW)

การจัดการข้อมูลในหน้าเว็บ (State)

เราจะใช้ `useState` ใน React เพื่อเก็บค่าที่ผู้ใช้กรอก

const [leadData, setLeadData] = useState({
  name: '',
  phone: '',
  monthlyBill: 0
});

"AI Orchestrator ต้องระบุฟิลด์เหล่านี้ให้ชัดเจนใน Prompt"

PDPA Consent Checkbox [FR-1.4]

การปฏิบัติตามกฎหมายความปลอดภัยข้อมูล

"ต้องมีช่องติ๊กยอมรับนโยบายความเป็นส่วนตัว และปุ่มส่งข้อมูลจะกดได้ก็ต่อเมื่อติ๊กถูกแล้วเท่านั้น"

ฉันยอมรับเงื่อนไขการเก็บข้อมูล...

Mobile-First Strategy [NFR-4]

"เพราะลูกค้าส่วนใหญ่เข้าผ่านมือถือ"

📱

Mobile (Single Column)

➡️
💻

Desktop (Grid Layout)

สั่ง AI: "ใช้ Tailwind Utility Classes สำหรับ Responsive (sm:, md:, lg:)"

การเชื่อมสะพาน: React 🤝 Django

เราจะใช้ `fetch` หรือ `Axios` ในการส่งข้อมูลข้ามชั้น

"เมื่อผู้ใช้กดปุ่ม 'ส่งข้อมูล' React จะส่ง JSON ไปยัง URL ของ Django Backend ที่เราเตรียมไว้"

ระวัง! CORS Forbidden Error

บั๊กอันดับ 1 ในโปรเจกต์ Fullstack

"Access to fetch at ... from origin 'http://localhost:5173' has been blocked by CORS policy"

"วิธีแก้: ต้องไปเพิ่ม URL ของ React ใน `CORS_ALLOWED_ORIGINS` ที่ Django เสมอ"

การรีวิวแผนการพัฒนาหน้าบ้าน

1

สร้างโครงสร้างโปรเจกต์ Vite + Tailwind (จบ Session)

2

พัฒนา UI Components และแบบฟอร์ม (จบ Session)

3

เขียน Logic การส่งข้อมูลไปยัง API (จบ Session)

สร้างประสบการณ์การใช้งานที่ดี (UX)

อย่าปล่อยให้หน้าจอนิ่งเฉยเมื่อมีการทำงาน

Loading State

แสดง Spinner เมื่อกำลังส่งข้อมูล

Success Alert

แสดงข้อความ 'ลงทะเบียนสำเร็จ' เมื่อบันทึกงานเสร็จ

ความปลอดภัยฝั่งหน้าบ้าน

"AI มักจะลืมเรื่อง Input Sanitization"

  • XSS Prevention: ระวังการใช้ `dangerouslySetInnerHTML`
  • Form Validation: ตรวจสอบรูปแบบเบอร์โทรศัพท์ก่อนส่ง API
  • Secret Leak: ห้ามทิ้ง API Key ตัวจริงไว้ในไฟล์ `.js`

การลดหนี้ทางเทคนิคใน React

"โค้ดทำงานได้ แต่ดูแลยาก = AI Slop"

สิ่งที่ Orchestrator ต้องสั่ง AI ให้แก้:

  • 🧹

    Extract Components: แยกส่วน Logic ที่ยาวเกินไปออกมาเป็น Component ย่อย

  • 🧹

    Clean Classes: ยุบ Tailwind Classes ที่ซ้ำซ้อนด้วย `@apply` หรือตัวแปร

เทคนิค: อธิบายดีไซน์ก่อนลงมือ

Prompt แนะนำสำหรับหน้าบ้าน:

"ก่อนที่จะเขียนโค้ด React ช่วยอธิบายโครงสร้าง DOM และลำดับของ Tailwind classes ที่คุณจะใช้ในหน้าแบบฟอร์มลงทะเบียนให้ฉันฟังก่อน เพื่อให้แน่ใจว่าเป็น Mobile-friendly"

การตรวจสอบด้วย Browser Subagent

ใช้ AI ไปทดสอบคลิกปุ่มแทนคุณใน Antigravity

🤖 **Autonomous Validation:** AI จะเปิดเบราว์เซอร์ ทดลองกรอกค่าไฟ และบันทึกวิดีโอ (Walkthrough) มาให้คุณตรวจผลลัพธ์

🎥

ลงมือปฏิบัติ: เนรมิตหน้าจอ SolarCorp

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

2. สั่ง: "ช่วยสร้างหน้า Landing Page พร้อม Solar Calculator ตาม SRS FR-2.3"

3. ใช้ **Review Changes Panel** ตรวจสอบโค้ดก่อนกด Accept

คุณคือ "ผู้อนุมัติ" ดีไซน์

"จำไว้ว่า AI ไม่มีสายตาเหมือนมนุษย์ มันอาจจัดวางปุ่มทับซ้อนกันได้..."

"คุณต้องเปิดเบราว์เซอร์และใช้สายตาของคุณยืนยันความงามและการใช้งานจริง!"

เช็คลิสต์การเชื่อมต่อ (Integration)

✅ หน้าเว็บแสดงผลถูกต้องบนมือถือ
✅ ฟอร์มสามารถรับข้อมูลได้ครบทุกฟิลด์
✅ ปุ่ม 'ส่งข้อมูล' ทำงานร่วมกับ API แล้ว
✅ มีระบบ PDPA Consent เรียบร้อย

ผลลัพธ์: การสร้าง MVP ในพริบตา

ด้วย AI Orchestration เราใช้เวลาน้อยกว่าเดิม 3-10 เท่า ในการสร้างหน้าจอที่ซับซ้อน

"จากเดิมที่ต้องใช้เวลา 2 วัน วันนี้คุณทำเสร็จใน 90 นาที!"

⚡

จบช่วงการพัฒนาหน้าบ้าน

ช่วงต่อไป (14:45): **การคุมคุณภาพและการจัดการ Technical Debt**
เราจะมาเรียนรู้วิธีการทำความสะอาดโค้ดให้พร้อมใช้งานในระยะยาว

"เตรียมตัวพักเบรกบ่าย 15 นาทีครับ"

พักเบรกบ่าย

"ลุกยืดเส้นยืดสาย เพื่อกลับมาสู่ช่วงสุดท้ายของการคุมคุณภาพงาน"

เริ่มช่วงสุดท้ายเวลา 14:45 น.
🥤