AI Web App Builder Workshop

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

อบรม 1 วัน 6 ชั่วโมง (10:00-17:00 น.) รูปแบบ Workshop ลงมือทำตลอดวัน ระดับ Beginner ไม่ต้องมีพื้นฐานการเขียนโปรแกรมมาก่อน ผู้เรียนต้องเตรียมโน้ตบุ๊กมาเอง (Windows หรือ macOS) และควรมีสิทธิ์ติดตั้งโปรแกรมบนเครื่อง วิทยากรจะพาติดตั้งเครื่องมือทั้งหมดในคลาส ผู้เรียนจะได้ชุด Prompt Template โค้ดตัวอย่าง และเว็บแอปของตัวเองที่ Deploy ขึ้นอินเทอร์เน็ตแล้วกลับไป

Session 1: AI และ LLM Fundamentals และการเตรียมเครื่องมือ (10:00-12:00)

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

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

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

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

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

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

Session 2: พื้นฐานเว็บแอปและ React (13:00-14:30)

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

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

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

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

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

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

Session 3: Workflow การทดสอบ และการ Deploy (14:45-17:00)

Section 7: การวางแผนงานด้วยไฟล์ Context

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

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

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

Section 9: Deploy ขึ้นอินเทอร์เน็ตและสรุป

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