AI Fullstack Web Builder: From Zero to Production

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

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

Day 1: จาก Prompt สู่เว็บแอปที่ใช้งานได้จริง

Section 1: พื้นฐาน AI และ LLM ที่ต้องรู้ก่อนใช้งาน

• AI และ LLM ทำงานอย่างไร และทำไมบางครั้งจึงตอบผิดอย่างมั่นใจ
• แนวคิด Context และ Token และผลต่อคุณภาพของคำตอบและค่าใช้จ่าย
• โครงสร้างการทำงานของ LLM ตั้งแต่ชั้นโมเดลจนถึงชั้นแอปพลิเคชันที่เราใช้
• ขอบเขตที่ AI ทำได้ดีและงานที่ยังต้องอาศัยคนตรวจสอบเสมอ

Section 2: การเลือกเครื่องมือ AI และการควบคุมค่าใช้จ่าย

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

Section 3: Workshop สร้างหน้าเว็บแรกจาก Prompt

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

Section 4: การติดตั้งเครื่องมือพัฒนา

• การติดตั้ง Visual Studio Code และ Extension ที่จำเป็นสำหรับการทำงานกับ AI
• การติดตั้งและใช้งาน Git ในระดับที่เพียงพอต่อการเก็บงานและย้อนกลับได้
• การจัดโครงสร้างโฟลเดอร์โปรเจกต์ให้ AI ทำงานกับไฟล์ได้ถูกที่
• Lab: ติดตั้งเครื่องมือทั้งหมดบนเครื่องตัวเองให้พร้อมใช้งาน

Section 5: องค์ประกอบของเว็บแอป

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

Section 6: Workshop สร้างเว็บแอปด้วย React และ AI

• แนวคิดการแบ่งหน้าจอเป็นส่วนย่อย (Component) และเหตุผลที่ทำให้แก้ไขง่าย
• การสั่งให้ AI สร้างหน้าจอ เพิ่มปุ่ม รับข้อมูลจากผู้ใช้ และแสดงผลลัพธ์
• การปรับหน้าตาให้ใช้งานได้ดีบนทั้งคอมพิวเตอร์และมือถือ
• Workshop: สร้างเว็บแอปขนาดเล็กที่ทำงานได้จริงด้วย React ร่วมกับ AI

Section 7: การวางแผนด้วย Context และการทดสอบ

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

Section 8: Deploy ขึ้นอินเทอร์เน็ตครั้งแรก

• การนำโค้ดขึ้น GitHub และการเชื่อมต่อกับบริการ Deploy
• การ Build และ Deploy เว็บขึ้น Vercel ให้เข้าถึงได้จากอินเทอร์เน็ตจริง
• การอัปเดตเว็บหลัง Deploy และสิ่งที่ต้องระวังเมื่อมีคนใช้งานจริง
• Workshop: Deploy เว็บของตัวเองขึ้นใช้งานจริงและสรุปสิ่งที่ได้ในวันแรก

Day 2: Workflow มืออาชีพและ Fullstack ด้วย Next.js

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

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

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

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

Section 11: Spec-Driven Development

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

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

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

Section 13: Next.js และ TypeScript

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

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

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

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

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

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

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

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

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