ช่วงที่ 3: นำ SolarCorp สู่โลกคลาวด์ด้วยพลังของ Browser Subagent
✅ เปลี่ยนจาก SQLite เป็น PostgreSQL สำหรับฐานข้อมูลจริง
✅ ใช้ AI Agent ท่องเว็บเพื่อ Config ระบบบน Render.com
✅ จัดการความลับ (Secrets) และ Environment Variables อย่างมืออาชีพ
✅ เชื่อมต่อ CI/CD ให้ระบบอัปเดตอัตโนมัติเมื่อมีการแก้ไขโค้ด
แพลตฟอร์มคลาวด์ที่ออกแบบมาเพื่อนักพัฒนาในยุคใหม่
รองรับ Django, React, และ PostgreSQL ได้อย่างสมบูรณ์
ระบบ Deploy แบบไม่หยุดพัก พร้อมฟีเจอร์ Rollback เมื่อเกิดความผิดพลาด
Frontend
Backend
Database
"ทุกส่วนเชื่อมต่อกันผ่าน Internal Network ของ Render เพื่อความเร็วและความปลอดภัย"
เราจะเปลี่ยนจาก SQLite (ไฟล์เครื่อง) สู่ PostgreSQL (คลาวด์)
ใช้สำหรับ Django ที่รันอยู่บน Render คุยกับฐานข้อมูล (ฟรีและเร็ว)
ใช้สำหรับเราต่อจากเครื่องคอมพิวเตอร์ไปแอบดูข้อมูลหลังบ้าน
"ห้ามทิ้ง API Key หรือรหัสผ่านฐานข้อมูลไว้ในโค้ด"
ตั้ง DEBUG = False เพื่อไม่ให้แฮกเกอร์เห็นจุดพังของระบบ
กำหนด ALLOWED_HOSTS ให้มี URL ของ Render ที่เราได้
ปกติ Django จะไม่เสิร์ฟไฟล์ภาพ/CSS บน Production เอง
เราจะใช้ WhiteNoise เพื่อให้ Django สามารถจัดการไฟล์สถาปัตยกรรมภาพโซลาร์เซลล์ได้โดยตรงบนคลาวด์
ขีดความสามารถพิเศษของ Antigravity ที่สั่งให้ AI "ท่องเว็บ" แทนคุณได้
"คุณไม่ต้องคลิกเมนู Render เอง... แค่สั่ง AI ให้ไปเปิดฐานข้อมูลและตั้งค่า Environment ให้"
เรียก Agent มาวางแผน
AI เปิดเว็บ Render แทนเรา
ยืนยันความสำเร็จผ่าน Artifact
"ช่วยเปิดเว็บไซต์ Render.com ค้นหา Repository SolarCorp และตั้งค่า Web Service สำหรับ Django โดยใช้ฐานข้อมูล PostgreSQL ที่เพิ่งสร้างใหม่"
backend/ uv ในการติดตั้งระบบ (NFR-2) เราต้องระบุคำสั่งให้ระบบรู้วิธี "สร้าง" และ "เริ่ม"
"หน้าเว็บ React จะทำงานแยกออกจาก Django Backend"
🎯 **Build Command:** npm run build
🎯 **Publish Directory:** dist
"Render จะส่งไฟล์ในโฟลเดอร์ dist ไปยัง Global CDN ทั่วโลก"
"React ต้องรู้ว่า Django อยู่ที่ไหนบนโลก"
VITE_API_URL=https://solar-api.onrender.com/
"AI Agent จะนำ URL ของ Backend มาใส่ตรงนี้ให้อัตโนมัติ"
"หากไม่ตั้งค่านี้ หน้าเว็บลูกค้าจะส่งข้อมูลลงทะเบียนไม่ได้"
กฎใน Django Settings:
CORS_ALLOWED_ORIGINS = ["https://solarcorp.onrender.com"]
ยกระดับความปลอดภัยให้แอปพลิเคชัน (NFR-3)
เราต้องเพิ่ม URL ของหน้าเว็บลงใน CSRF_TRUSTED_ORIGINS เพื่อให้ฟอร์มลงทะเบียน SolarCorp ปลอดภัยจากการถูกสวมรอย
"ทันทีที่คุณ Commit และ Push โค้ดที่ผ่านการทดสอบ (/verify) แล้ว Render จะเริ่มขั้นตอน Build ใหม่อัตโนมัติ"
1. เปิด Antigravity Chat และใช้คำสั่ง /deploy
2. ให้ Agent เปิดหน้า Render และกรอกข้อมูล Web Service ตาม Plan
3. ตรวจสอบ Log การสร้างฐานข้อมูล PostgreSQL ว่าสำเร็จหรือไม่
เปิดเมนู Static Site บน Render และใส่ค่า npm run build
ตรวจสอบว่า VITE_API_URL ใส่ URL ของ Backend ถูกต้องแล้ว
หลังจากออนไลน์แล้ว Agent จะทำ **Walkthrough Artifact**
🎥 AI จะบันทึกวิดีโอหน้าจอขณะมันเข้าไปทดลองกรอกชื่อลูกค้าใน SolarCorp ที่รันอยู่บน URL จริง เพื่อยืนยันว่าข้อมูลไหลลง Database ได้สำเร็จ
Checklist หน้างานจริง:
มักเกิดจากลืมทำ python manage.py migrate ในฐานข้อมูลใหม่
ลืมสั่ง collectstatic หรือลืมตั้งค่า WhiteNoise
"หากการ Build ล้มเหลว ให้ Copy Log จาก Render ส่งให้ AI พร้อมสั่ง:"
"ช่วยวิเคราะห์หาสาเหตุที่ระบบรันไม่ขึ้น และเสนอแผนแก้ไขทันที"
ยินดีด้วย! เว็บไซต์ SolarCorp ของคุณ
**เปิดให้บริการทั่วโลกแล้วตอนนี้!**
"คุณได้ย้ายงานจาก Local มาเป็น Global เรียบร้อย!"
"ใครมีปัญหาเรื่องการต่อ PostgreSQL หรือการตั้งค่า CORS ไหมครับ?"
"พักผ่อนสักนิด ก่อนกลับมาสรุปบทเรียน
และเตรียมตัวสู่ Hackathon 18 ชม."