AI Next.js Fullstack Workshop พัฒนาเว็บแอปยุคใหม่ร่วมกับ AI Agent

รายละเอียดหลักสูตร

อบรม 1 วัน 6 ชั่วโมง (10:00-17:00 น.) รูปแบบ Workshop ลงมือทำตลอดวัน ระดับ Intermediate ผู้เรียนควรมีพื้นฐาน HTML, CSS และ JavaScript มาก่อน และต้องเตรียมโน้ตบุ๊กมาเอง (Windows หรือ macOS) พร้อมสิทธิ์ติดตั้งโปรแกรม ผู้เรียนจะได้ Source Code ชุด Spec Template (design.md และ spec.md) Prompt Workflow และแอปของตัวเองที่ Deploy ขึ้น Production แล้วกลับไป เนื้อหาเน้นที่ Workflow และหลักการ จึงปรับไปใช้กับเครื่องมือ AI ตัวอื่นได้เมื่อเทคโนโลยีเปลี่ยน

Session 1: AI UI Design, MCP และ Spec (10:00-12:00)

Section 1: การออกแบบ UI ด้วย AI

• การใช้ AI ช่วยร่างหน้าจอและสร้างทางเลือกของงานออกแบบอย่างรวดเร็ว
• การประเมินงานออกแบบที่ AI สร้าง: ความสอดคล้อง การใช้งานจริง และความเป็นไปได้ในการพัฒนา
• การกำหนดระบบสีและองค์ประกอบให้ทุกหน้าจอไปในทิศทางเดียวกัน
• Lab: ออกแบบหน้าจอของโปรเจกต์ด้วย AI และคัดเลือกแบบที่จะนำไปพัฒนาต่อ

Section 2: MCP เชื่อมงานออกแบบเข้าสู่ Editor

• แนวคิด MCP และการเปิดให้ AI Agent เข้าถึงเครื่องมือและข้อมูลภายนอกได้
• การส่งงานออกแบบเข้าสู่ Editor เพื่อสร้างโค้ดตั้งต้นโดยไม่ต้องเริ่มจากศูนย์
• การตรวจสอบและปรับโค้ดตั้งต้นให้เข้ากับโครงสร้างโปรเจกต์จริง
• Lab: เชื่อมงานออกแบบเข้าสู่โปรเจกต์และได้โครงหน้าจอชุดแรก

Section 3: Spec-Driven Development

• ปัญหาของการสั่ง AI ทีละคำถามและผลลัพธ์ที่ไม่เข้ากับโครงสร้างเดิม
• การเขียนไฟล์ design.md อธิบายหน้าตาและพฤติกรรมของระบบให้ AI อ่านก่อนลงมือ
• การเขียนไฟล์ spec.md กำหนดขอบเขต ข้อกำหนด และเงื่อนไขการยอมรับของแต่ละงาน
• Lab: เขียน design.md และ spec.md ของโปรเจกต์และให้ AI ทำงานตามเอกสาร

Session 2: การวางแผนและ Next.js Fullstack (13:00-15:15)

Section 4: การวางแผนโครงการและแตกงานด้วย AI

• การให้ AI ช่วยวางแผนโครงการและลำดับงานจากเอกสาร Spec ที่เขียนไว้
• การแตกงานใหญ่ให้เป็นงานย่อยขนาดที่ AI ทำเสร็จได้ในรอบเดียว
• การจัดลำดับงานให้พัฒนาต่อเนื่องได้โดยไม่ติดขัดระหว่างทาง
• การติดตามความคืบหน้าและปรับแผนเมื่อความต้องการเปลี่ยน

Section 5: Next.js และ TypeScript

• โครงสร้างโปรเจกต์ Next.js และการแบ่งงานระหว่างฝั่งเซิร์ฟเวอร์และฝั่งเบราว์เซอร์
• การจัดเส้นทางหน้าเว็บ การสร้าง API และการดึงข้อมูลมาแสดงผล
• การใช้ TypeScript กำหนดชนิดข้อมูลเพื่อลดข้อผิดพลาดและช่วยให้ AI เข้าใจโค้ดมากขึ้น
• Lab: สร้างโครงโปรเจกต์ Next.js พร้อมหน้าจอและ API ชุดแรก

Section 6: ฐานข้อมูลด้วย Prisma และ Supabase

• การออกแบบโครงสร้างข้อมูลและความสัมพันธ์ระหว่างตาราง
• การใช้ Prisma กำหนด Schema และจัดการการเปลี่ยนแปลงโครงสร้างฐานข้อมูล
• การเชื่อมต่อ Supabase และการอ่านเขียนข้อมูลจากแอปอย่างปลอดภัย
• Lab: สร้างฐานข้อมูลของโปรเจกต์และเชื่อมเข้ากับหน้าจอที่ทำไว้

Section 7: ระบบยืนยันตัวตนและสิทธิ์ผู้ใช้

• การทำระบบสมัครสมาชิกและล็อกอินด้วย Better Auth
• การจัดการ Session และการป้องกันหน้าที่ต้องล็อกอินก่อนเข้าถึง
• การกำหนดสิทธิ์ผู้ใช้แต่ละระดับและการตรวจสอบสิทธิ์ฝั่งเซิร์ฟเวอร์
• Lab: เพิ่มระบบล็อกอินและจำกัดสิทธิ์การเข้าถึงในแอปของตัวเอง

Session 3: AI Debugging, Agent และ Production Deploy (15:15-17:00)

Section 8: การไล่หาบั๊กและ Code Review ด้วย AI

• การส่งข้อมูลบริบทให้ AI เพียงพอที่จะหาสาเหตุของปัญหาได้จริง
• การให้ AI ตรวจทานโค้ดและชี้จุดเสี่ยงด้านความปลอดภัยและประสิทธิภาพ
• ข้อจำกัดของการตรวจทานด้วย AI และจุดที่คนต้องตัดสินใจเอง
• การมอบงานเป็นรอบให้ AI Agent และการตรวจรับผลลัพธ์แต่ละรอบ

Section 9: Deploy ขึ้น Production และสรุป

• การเตรียมโปรเจกต์ให้พร้อม Deploy และการตรวจสอบก่อนขึ้นใช้งานจริง
• การตั้งค่าตัวแปรสภาพแวดล้อมและการเก็บข้อมูลลับอย่างปลอดภัย
• การเชื่อมต่อฐานข้อมูลบน Production และการอัปเดตแอปหลัง Deploy
• Workshop: Deploy แอปขึ้น Production จริงและสรุปแนวทางนำ Workflow ไปใช้ต่อ