พัฒนาเว็บไซต์ · WDC-116

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

หลักสูตร AI Next.js Fullstack Workshop เป็นการอบรมแบบเวิร์กชอปสำหรับนักพัฒนาที่วาง Workflow ร่วมกับ AI Agent ตั้งแต่ออกแบบ UI ด้วย AI, MCP และ Spec-Driven Development จนถึง Next.js, Prisma และ Supabase เหมาะกับนักพัฒนาเว็บและ Frontend Developer ที่อยากทำ Backend จบแล้ว Deploy เว็บแอปขึ้น Production ได้

อัปเดตล่าสุด 21 ส.ค. 2569

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

ราคาเริ่มต้น 5,310 บาท / ท่าน 5,900 −10% ยังไม่รวม VAT 7% · มีราคาหมู่คณะ

ขอใบเสนอราคาอบรมองค์กร ลงชื่อจองไว้

PDFดาวน์โหลด Course Outline

ระยะเวลา6 ชั่วโมง · 1 วัน
รูปแบบออนไซต์ / ออนไลน์สด
รอบถัดไปเปิดตามคำขอ
ใบรับรองมี Certificate

ภาพรวมหลักสูตร

นักพัฒนาส่วนใหญ่เริ่มใช้ AI ช่วยเขียนโค้ดกันแล้ว แต่ยังใช้ในลักษณะถามทีละคำถามและคัดลอกโค้ดมาวาง ซึ่งได้ประโยชน์เพียงบางส่วนและมักเจอปัญหาโค้ดที่ AI สร้างไม่เข้ากับโครงสร้างเดิม การทำงานร่วมกับ AI แบบมืออาชีพต้องมี Workflow ที่ชัดเจน ตั้งแต่การออกแบบ การเขียนเอกสารกำกับ (Spec) ให้ AI ทำงานตามกรอบ ไปจนถึงการมอบงานเป็นชิ้นและตรวจรับผลลัพธ์ หลักสูตรนี้เป็น Workshop เต็มวันสำหรับผู้ที่มีพื้นฐานเว็บอยู่แล้ว

พาจัดวาง Workflow การพัฒนาเว็บแอปยุคใหม่ทั้งกระบวนการ ครอบคลุมการออกแบบ UI ด้วย AI, การเชื่อมงานออกแบบเข้าสู่ Editor ด้วย MCP, แนวคิด Spec-Driven Development ด้วยไฟล์ design.md และ spec.md, การวางแผนงานและแตกงานด้วย AI, การสร้างแอปด้วย Next.js และ TypeScript ร่วมกับ Prisma และ Supabase, การทำระบบยืนยันตัวตน, การไล่หาบั๊กและ Code Review ด้วย AI, การมอบงานให้ AI Agent ทำเป็นรอบ ไปจนถึงการ Deploy ขึ้น Production พร้อมตั้งค่าให้ใช้งานจริง (อบรม 1 วัน 6 ชั่วโมง ระดับ Intermediate)

สิ่งที่คุณจะได้รับ

จัดวาง Workflow การพัฒนาเว็บแอปร่วมกับ AI ได้ตั้งแต่ออกแบบจนถึง Deploy
ใช้ AI ช่วยออกแบบ UI และประเมินผลงานออกแบบก่อนนำไปพัฒนาต่อ
เชื่อมงานออกแบบเข้าสู่ Editor ด้วย MCP เพื่อสร้างโค้ดตั้งต้นได้รวดเร็ว
เขียนไฟล์ Spec กำกับการทำงานของ AI ให้ผลลัพธ์ตรงตามที่ออกแบบไว้
วางแผนโครงการและแตกงานเป็นชิ้นย่อยด้วย AI ให้พัฒนาได้ต่อเนื่อง
สร้างเว็บแอปด้วย Next.js และ TypeScript ร่วมกับ Prisma และ Supabase
ทำระบบยืนยันตัวตนและจัดการสิทธิ์ผู้ใช้ในเว็บแอปได้
ใช้ AI ช่วยไล่หาบั๊กและตรวจทานโค้ดอย่างเป็นระบบ
Deploy แอปขึ้น Production พร้อมตั้งค่าตัวแปรและข้อมูลลับอย่างปลอดภัย

หลักสูตรนี้เหมาะสำหรับ

นักพัฒนาเว็บที่ต้องการยกระดับการทำงานร่วมกับ AI ให้เป็นระบบ
Frontend Developer ที่อยากขยับไปทำงานฝั่ง Backend และฐานข้อมูลได้ด้วย
ผู้ที่มีพื้นฐาน HTML, CSS และ JavaScript และต้องการเริ่มใช้ Next.js
Freelance และเจ้าของโปรเจกต์ที่ต้องการส่งงานได้เร็วขึ้นโดยคุณภาพไม่ตก
ทีมพัฒนาที่ต้องการวาง Workflow การใช้ AI ให้เป็นมาตรฐานเดียวกัน

พื้นฐานของผู้เข้าอบรม

มีพื้นฐาน HTML, CSS และ JavaScript ในระดับที่อ่านและแก้โค้ดได้
เคยสร้างหน้าเว็บหรือเว็บแอปขนาดเล็กมาก่อน (ไม่จำเป็นต้องเคยใช้ Next.js)
ใช้งาน Command Line และ Git ในระดับพื้นฐานได้
เตรียมโน้ตบุ๊กของตัวเองมาเรียน (Windows หรือ macOS) พร้อมสิทธิ์ติดตั้งโปรแกรม

หัวข้อการฝึกอบรม

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

อบรม 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 ไปใช้ต่อ

รอบอบรมและรูปแบบการอบรม

สำหรับบุคคล — รอบอบรมทั่วไป

ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770

ลงชื่อจองไว้ สอบถามรอบอบรม

สำหรับองค์กร — In-house / Private Training

ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ

ขอใบเสนอราคาอบรมองค์กร

วิทยากรผู้สอน

สามิตร โกยมCEO ที่สถาบันไอทีจีเนียส

คำถามที่พบบ่อย

MCP คืออะไร ช่วยให้ AI Agent ทำงานได้มากขึ้นอย่างไร

MCP (Model Context Protocol) เป็นมาตรฐานเปิดที่ให้แอป AI เชื่อมกับเครื่องมือและแหล่งข้อมูลภายนอกผ่าน MCP Server ในรูปแบบเดียวกัน เช่น เครื่องมือออกแบบ ฐานข้อมูล หรือ API แทนที่จะต้องคัดลอกข้อมูลมาวางในแชตเอง AI Agent จึงอ่านงานออกแบบหรือข้อมูลจริงแล้วลงมือทำงานต่อได้ เช่น ดึงงานออกแบบเข้า Editor เพื่อสร้างโค้ดตั้งต้น ทั้งนี้ควรให้สิทธิ์เข้าถึงเท่าที่จำเป็น

ทำ Spec-Driven Development ร่วมกับ AI มีขั้นตอนอย่างไร

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

Prisma ช่วยจัดการฐานข้อมูลในโปรเจกต์ Next.js อย่างไร

Prisma เป็น ORM สำหรับ TypeScript ที่ให้กำหนดตารางและความสัมพันธ์ในไฟล์ schema.prisma แล้วสร้าง Client ที่มีชนิดข้อมูลถูกต้องให้อัตโนมัติ เวลาเขียนคำสั่งอ่านเขียนข้อมูล Editor จะช่วยเติมโค้ดและเตือนเมื่อชื่อฟิลด์ผิด เมื่อแก้ Schema ให้ใช้ prisma migrate สร้างไฟล์ Migration เพื่อเปลี่ยนโครงสร้างฐานข้อมูลอย่างเป็นระบบ และใช้ร่วมกับ PostgreSQL บน Supabase ได้

หลักสูตร AI Next.js Fullstack Workshop เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

เหมาะกับนักพัฒนาเว็บที่ต้องการทำงานร่วมกับ AI อย่างเป็นระบบ Frontend Developer ที่อยากขยับไปทำ Backend และฐานข้อมูล ผู้ที่มีพื้นฐาน HTML CSS และ JavaScript และอยากเริ่มใช้ Next.js รวมถึง Freelance ที่ต้องการส่งงานเร็วขึ้น ควรอ่านและแก้โค้ด HTML CSS และ JavaScript ได้ เคยทำเว็บขนาดเล็กมาก่อน และใช้ Command Line กับ Git พื้นฐานได้ ไม่จำเป็นต้องเคยใช้ Next.js

เรียนจบหลักสูตร AI Next.js Fullstack Workshop แล้วทำอะไรได้บ้าง

ออกแบบหน้าจอด้วย AI และส่งงานออกแบบเข้า Editor ผ่าน MCP เขียน design.md และ spec.md ให้ AI ทำงานตามเอกสาร สร้างแอป Next.js ด้วย TypeScript พร้อม API ออกแบบฐานข้อมูลด้วย Prisma และ Supabase ทำระบบล็อกอินและสิทธิ์ผู้ใช้ด้วย Better Auth ใช้ AI ไล่หาบั๊กและตรวจโค้ด และ Deploy แอปขึ้น Production ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้

เรียน AI Next.js Fullstack Workshop ต้องเตรียมอะไรมาบ้าง

เตรียมโน้ตบุ๊กของตัวเองที่เป็น Windows หรือ macOS พร้อมสิทธิ์ติดตั้งโปรแกรม เพราะต้องติดตั้งเครื่องมือพัฒนาและรันโปรเจกต์ Next.js บนเครื่องตัวเองตลอด Workshop และควรทบทวน JavaScript Command Line และคำสั่ง Git พื้นฐานก่อนเรียน เพื่อให้ตามการทำ Lab ได้ทันตั้งแต่ช่วงแรก