Featured image of post Web Technology Development Basic Workshop: จากพื้นฐาน Software Engineering สู่การพัฒนาด้วย AI

Web Technology Development Basic Workshop: จากพื้นฐาน Software Engineering สู่การพัฒนาด้วย AI

ประสบการณ์การจัด Web Technology Development Basic Workshop สำหรับนิสิตชั้นปีที่ 3 มหาวิทยาลัยเกษตรศาสตร์ วิทยาเขตศรีราชา ตั้งแต่พื้นฐาน Full-stack Development, Gitflow และ Agile ไปจนถึงการต่อยอดด้วย AI Agent อย่างมีหลักการ

วันที่ 12–13 กันยายน 2569 ผมมีโอกาสกลับไปที่ มหาวิทยาลัยเกษตรศาสตร์ วิทยาเขตศรีราชา อีกครั้ง แต่ครั้งนี้ไม่ใช่ในฐานะนิสิต ผมกลับไปในบทบาทของผู้สอนในกิจกรรม Web Technology Development Basic Workshop สำหรับนิสิตชั้นปีที่ 3 สาขาวิทยาการและเทคโนโลยีดิจิทัล คณะวิทยาศาสตร์ จำนวนกว่า 50 คน เพื่อเตรียมความพร้อมก่อนเข้าสู่หลักสูตรสหกิจศึกษา

สำหรับผม กิจกรรมครั้งนี้มีความหมายมากกว่าการกลับไปสอนเรื่องเทคโนโลยี เพราะเป็นโอกาสที่จะถ่ายทอดสิ่งที่ผมได้เรียนรู้จากการทำงาน Software Development จริง ว่าเบื้องหลังซอฟต์แวร์หนึ่งระบบนั้นไม่ได้มีเพียงการเขียนโค้ดให้ทำงานได้ แต่ยังมีเรื่องของแนวคิด การออกแบบ การทำงานร่วมกัน และความรับผิดชอบต่อระบบที่เราส่งมอบ

มากกว่าการเรียน Framework

เป้าหมายของ Workshop ครั้งนี้ไม่ใช่เพียงให้นิสิตสามารถเขียน Backend หรือ Frontend ให้ทำงานได้ แต่ผมอยากให้เข้าใจว่า Software หนึ่งระบบถูกสร้างขึ้นมาอย่างไร ตั้งแต่แนวคิด การออกแบบ โครงสร้างของ Application ไปจนถึงวิธีที่ทีม Software Development ทำงานร่วมกันในโลกจริง

Framework และเครื่องมือสามารถเปลี่ยนไปได้ตลอดเวลา วันนี้เราอาจใช้ .NET, Vue.js หรือ TypeScript อีกไม่กี่ปีข้างหน้าเครื่องมืออาจเปลี่ยน แต่พื้นฐานของการคิดแบบวิศวกรรมซอฟต์แวร์ยังคงนำไปใช้ต่อได้เสมอ

กำลังอธิบาย Gitflow Workflow และแนวทางการทำงานร่วมกันในทีมพัฒนาซอฟต์แวร์

ผมจึงพยายามให้ผู้เรียนเห็นภาพตั้งแต่ต้นว่า Full-stack Development ไม่ใช่การเอา Frontend กับ Backend มาวางต่อกันเท่านั้น แต่เป็นการเข้าใจความสัมพันธ์ของแต่ละส่วนในระบบ ทั้ง API, Data Flow, Application Structure, การจัดการ State และการตัดสินใจเชิงออกแบบที่อยู่เบื้องหลังโค้ด

จากศูนย์สู่ Full Stack

การอบรมถูกออกแบบในลักษณะ Hands-on ให้ลงมือทำจริง โดยเริ่มจากพื้นฐานของ Web Application ก่อนค่อย ๆ ต่อไปสู่การสร้าง Backend, Frontend และการเชื่อมต่อทั้งสองฝั่งเข้าด้วยกัน

เนื้อหาหลักครอบคลุมเรื่อง RESTful API, Backend Development, Frontend Development, TypeScript, การจัดการข้อมูล และการเชื่อมต่อ Application แบบ Full Stack รวมถึงการอธิบายว่าแต่ละส่วนมีหน้าที่อะไร และทำไมเราจึงออกแบบโครงสร้างแบบนั้น

สิ่งที่ผมให้ความสำคัญคือ อย่าเพิ่งรีบจำ Syntax แต่ให้เข้าใจเหตุผลของโค้ดก่อน เพราะถ้าเราเข้าใจโครงสร้าง เราจะสามารถเรียนรู้ Framework ใหม่ หรือแก้ปัญหาที่ซับซ้อนขึ้นได้ด้วยตัวเอง

การให้คำแนะนำระหว่าง Hands-on Lab ของนิสิต

ระหว่าง Lab สิ่งที่น่าสนใจคือคำถามของผู้เรียนไม่ได้อยู่แค่ “ต้องพิมพ์อะไรต่อ” แต่เริ่มเปลี่ยนเป็น “ทำไมต้องทำแบบนี้” ซึ่งสำหรับผมเป็นจุดที่สำคัญมาก เพราะการพัฒนาซอฟต์แวร์ไม่ได้เกิดจากการจำคำสั่ง แต่เกิดจากการเข้าใจปัญหาและตัดสินใจอย่างมีเหตุผล

Software Development เป็นงานของทีม

อีกเรื่องที่ผมตั้งใจใส่ไว้ใน Workshop คือวิธีการทำงานร่วมกันของทีม Software Development

ในงานจริง โค้ดไม่ได้จบที่เครื่องของคนเขียน เราต้องทำงานร่วมกับคนอื่น ต้องมีการ Review ต้องมีการแก้ไข ต้องมี Release และในอนาคตอาจมีคนอื่นเข้ามาดูแลต่อ

นิสิตจึงได้เรียนรู้และทดลองแนวคิดของ Gitflow Workflow, การสร้าง Feature Branch, การทำ Pull Request และแนวทางการทำงานที่ลดความเสี่ยงจากการแก้ไขโค้ดร่วมกัน

รวมถึงแนวคิด Agile และ Best Practices ต่าง ๆ ที่ช่วยให้ทีมสามารถส่งมอบซอฟต์แวร์ได้อย่างต่อเนื่อง โดยยังคงคุณภาพของระบบไว้

บรรยากาศการลงมือพัฒนา Web Application ภายในห้องปฏิบัติการ

ผมอยากให้เห็นว่า “Code ใช้งานได้” เป็นเพียงเงื่อนไขหนึ่งของ Software ที่ดี เพราะในโลกจริง Code นั้นยังต้อง อ่านได้ ตรวจสอบได้ แก้ไขได้ ทดสอบได้ และส่งต่อให้คนอื่นดูแลได้

พื้นฐานที่แข็งแรงก่อนใช้ AI

ทุกวันนี้ AI Agent สามารถช่วยเราเขียนโค้ด สร้าง Feature หรือแม้แต่ทำงานหลายขั้นตอนแทน Developer ได้อย่างรวดเร็ว

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

ถ้าเราไม่เข้าใจ Architecture, Data Flow, Security, Maintainability หรือหลักการของ Software Development เราอาจได้ Code ที่ดูเหมือนทำงานได้เร็วมาก แต่กำลังสร้างปัญหาใหม่และเพิ่ม Technical Debt ให้กับระบบโดยไม่รู้ตัว

สิ่งที่ผมอยากให้ผู้เรียนเห็นคือเส้นทางประมาณนี้:

Understand → Design → Build → Collaborate → Improve → Accelerate with AI

ไม่ใช่

Prompt → Generate → Copy → Hope it works

AI ควรเป็นเครื่องมือที่ช่วยขยายความสามารถของ Developer ไม่ใช่เครื่องมือที่ทำให้เราเลิกคิด

เมื่อพื้นฐานแข็งแรง เราจะสามารถใช้ AI Agent เพื่อเพิ่ม Productivity ได้มากขึ้น ทั้งการสร้าง Feature, Refactoring, Testing, Documentation หรือ Code Review และในขณะเดียวกันก็ยังสามารถประเมินคุณภาพของสิ่งที่ AI สร้างขึ้นมาได้

สิ่งที่ผมอยากให้นิสิตได้กลับไป

เวลาของ Workshop มีจำกัด และเนื้อหาที่เตรียมไว้ทั้งหมดไม่สามารถส่งต่อได้ครบทุกหัวข้อ

ผมจึงเลือกที่จะไม่เร่งให้ผ่านทุก Slide แต่ให้ความสำคัญกับการที่ผู้เรียนได้คิด ทดลอง และเข้าใจสิ่งที่กำลังทำให้มากที่สุด

Software Development เป็นทักษะที่ไม่สามารถเรียนจบได้ภายในสองวัน สิ่งสำคัญหลังจาก Workshop คือการฝึกต่อ การทดลองสร้างของจริง และการเรียนรู้อย่างต่อเนื่อง

ช่วงหนึ่งของการสอนและทดลองระบบร่วมกับนิสิต

สิ่งที่ผมประทับใจคือความสนใจ ความร่วมมือ และ Productivity ของนิสิตตลอดช่วงเวลาที่เราอยู่ด้วยกัน หลายคนเริ่มจากพื้นฐาน แล้วค่อย ๆ เชื่อมโยงแต่ละส่วนจนเห็นภาพของ Full-stack Application ที่สมบูรณ์มากขึ้น

การกลับไปที่มหาวิทยาลัยครั้งนี้จึงไม่ได้เป็นเพียงโอกาสในการแบ่งปันความรู้ แต่ยังทำให้ผมได้พลังและแรงบันดาลใจกลับมาด้วย มันย้ำให้ผมเห็นอีกครั้งว่าทำไมผมถึงชอบงาน Software Development และทำไมการส่งต่อความรู้ด้านวิศวกรรมซอฟต์แวร์ให้กับคนรุ่นต่อไปจึงมีความหมาย

ท้ายที่สุด สิ่งที่อยากฝากไว้มากที่สุดคือ เครื่องมือเปลี่ยนได้ แต่พื้นฐานที่ดีจะทำให้เราไปต่อได้เสมอ

บรรยากาศการเตรียมการสอนใน Web Technology Development Basic Workshop

สื่อการสอน

สื่อและ Hands-on Lab ที่ใช้ใน Workshop ครั้งนี้สามารถดูได้จากหน้า Workshop โดยตรง:

Web Technology Development Basic Workshop

หน้า Workshop นี้รวบรวมเนื้อหาที่ใช้ในการเรียนรู้ทั้ง Backend, Frontend, Git Workflow และ Hands-on Lab ไว้ในรูปแบบที่อ่านและติดตามได้ง่ายกว่าการเข้าไปไล่ดูไฟล์ใน Repository โดยตรง

ถูกสร้างด้วย Hugo
ธีม Stack ออกแบบโดย Jimmy