จุลสารนวัตกรรม ฉบับที่ 82 – สาระน่ารู้ : เรื่อง Vibe Coding กับการประยุกต์ใช้ในด้านการเรียนการสอน

        การเขียนโปรแกรมและการพัฒนาซอฟท์แวร์ในยุค AI ได้ถูกปฏิวัติด้วยวิธีการที่เรียกว่า Vibe coding ซึ่งเป็นการสั่งให้ AI พัฒนาโปรแกรมขึ้นมาโดยที่ผู้พัฒนาระบุถึงความต้องการ เป้าหมายและรูปแบบของผลลัพธ์ ด้วยภาษามนุษย์ คำว่า Vibe Coding ได้ถูกนิยามโดยนักพํฒนาโปรแกรมท่านหนึ่งซึ่งเป็นอินฟลูเอ็นเซอร์ด้วยชื่อว่า Andrej Karpathy ซึ่งเขาได้รับการคัดเลือกอยู่ใน 100 คนที่มีอิทธิพลในด้าน AI จากนิตยสาร Time ในปี 2024 [1]
        ความหมายของ Vibe coding ครอบคลุมทั้งวิธีการพัฒนาโปรแกรมและกระบวนการคิด (mindset) ซึ่งผู้พัฒนาจะต้องมีทักษะใหม่ในการโต้ตอบกับ AI เพื่อให้ได้ผลลัพธ์ที่ต้องการ ในกระบวนการดังกล่าวประกอบไปด้วยการเขียน prompt คำสั่ง ตรวจสอบผลลัพธ์ แก้ไขโปรแกรม (debug) ผ่านภาษามนุษย์
        Vibe coding ทำให้การพัฒนาโปรแกรมทำได้อย่างรวดเร็ว โดยผู้พัฒนาอาจไม่จำเป็นต้องมีความรู้ภาษาคอมพิวเตอร์นั้นๆ เพียงแต่มีแนวคิดของโปรแกรม และสามารถเขียน prompt ที่เหมาะสมให้ AI ปรับปรุงโปรแกรมทีละขั้นตอน วิธีการนี้เป็นการเพิ่มจำนวนผู้ที่สามารถพัฒนาโปรแกรมได้ด้วยตนเอง อีกทั้งเพิ่มจำนวนต้นแบบ (prototype) ของซอฟท์แวร์ที่ผู้พัฒนาจะคัดเลือกและต่อยอดให้เป็นแอพพลิเคชันหรือซอฟท์แวร์ที่สมบูรณ์ได้ กระบวนการเบื้องต้นของ vibe coding แสดงได้ในรูปที่ 1

รูปที่ 1 กระบวนการพัฒนาแอพพลิเคชันด้วย vibe coding

        อย่างไรก็ตามเพื่อให้เกิดประสิทธิภาพ ผู้พัฒนาอาจจะต้องมีความรู้เบื้องต้นในการพัฒนาด้วย เช่น ในการพัฒนาแอพพลิเคชันที่เป็นเว็บ (web application) อย่างน้อยผู้พัฒนาจะต้องมีความรู้ถึงองค์ประกอบ ได้แก่ Front-end ส่วนที่แสดงผลและโต้ตอบกับผู้ใช้ Back-end ส่วนที่ทำหน้าที่คำนวณและประมวลผลข้อมูล Database ส่วนที่เก็บข้อมูลอยู่ในรูปของฐานข้อมูล เป็นต้น
        เครื่องมือในการ vibe coding อาจจะอยู่ในรูปของเว็บไซต์ เช่น Codex จากบริษัท OpenAI Gemini จากบริษัท Google หรือ Cursor และ Replit ที่เป็นเครื่องมือเฉพาะทางในด้านนี้ อีกแบบหนึ่งคือ plug-in หรือ extension ที่สามารถทำงานบน IDE (integrated development environment) เช่น บน Visual Studio Code เป็นต้น
        ในคอร์ส “ฺBuild with Andrew” ของ deeplearning.ai [2] ได้มีการแนะนำ prompt เบื้องต้นที่ใช้สำหรับ vibe coding ซึ่งประกอบไปด้วย 5 ส่วนดังนี้

1. เป้าหมาย (goal) ระบุถึงแอพพลิเคชันที่จะสร้างขึ้น
2. ข้อมูลขาเข้า (input) ระบุถึงสิ่งที่ผู้ใช้จะป้อนข้อมูลเข้ามา
3. การจัดวางรูปแบบ (layout) อธิบายถึงหน้าตา สีสัน องค์ประกอบที่อยู่บนหน้าเว็บ
4. ความสามารถหรือฟังก์ชัน (feature) ระบุถึงการทำงานเฉพาะทางที่อยู่บนแอปพลิชัน
5. ผลลัพธ์ (output) คือสิ่งที่ผู้ใช้จะได้ร้บหลังจากที่ได้ใช้แอพพลิเคชัน

        ยกตัวอย่างการเขียน prompt สำหรับการพัฒนาเว็บสร้างสูตรอาหารโดยให้ผู้ใช้กรอกชื่ออาหาร ดังรูปที่ 2

รูปที่ 2 คำสั่ง (prompt) ในการสร้างแอพพลิเคชันสร้างสูตรอาหาร ด้วย vibe coding

       ในด้านการเรียนการสอน vibe coding สามารถนำมาสร้างสื่อการสอนในรูปแบบของการจำลอง (simulation) เพื่อให้เกิดการเรียนรู้ในหัวข้อนั้น ซึ่งจะอยู่ในรูปแบบการเรียนรู้แบบ Simulation-based learning ซึ่งให้ผู้เรียนมีปฏิสัมพันธ์กับการจำลองผ่านหน้าจอคอมพิวเตอร์ จนเข้าใจเนื้อหาการเรียนรู้ได้ รูปแบบการเรียนรู้นี้เหมาะกับสถานการณ์ที่อาจจะไม่สามารถเรียนรู้จากระบบจริงซึ่งสถานศึกษาอาจจะไม่สามารถเข้าถึงได้ด้วยข้อจำกัดด้านงบประมาณ เช่น ระบบควบคุมบนเครื่องบิน หรือสถานการณ์ที่อาจจะเสี่ยงอันตรายต่อผู้เรียนที่ยังอายุน้อย เช่น ระบบนิเวศทางทะเล หรือปรากฏการณ์ที่อาจจะมองด้วยตาเปล่าไม่เห็น เช่น กระบวนการทางเคมี เป็นต้น
        ผู้เขียนได้ทดลองนำ vibe coding มาสร้างเป็นแอพพลิเคชัน ด้วยเครื่องมือ Gemini ในหัวข้อ อัลกอริทึมการเรียง (sorting algorithm) ในรายวิชา Computer Science Education ของสถาบันฯ พบว่าสามารถแสดงให้เห็นถึงความแตกต่างและประสิทธิภาพของอัลกอริทึมต่าง ๆ ได้เป็นอย่างดี ดังรูปที่ 3

รูปที่ 3 การจำลองการทำงานของอัลกอริทึมในการจัดเรียงแบบต่าง ๆ

        ทั้งนี้การสร้างแบบจำลองบน Gemini ทำได้โดยไม่ยาก ซึ่งอาจจะไม่จำเป็นต้องอาศัยรูปแบบการเขียน prompt ที่แนะนำมาเบื้องต้น อีกทั้งไม่ต้องมีความรู้ด้านการพัฒนาซอฟท์แวร์เลย ดังนั้นการใช้ vibe coding เพื่อนำมาสร้างแบบจำลองในการศึกษาในชั้นเรียน จึงเป็นสิ่งที่ผู้สอนอาจจะทำได้เลย เพียงต้องมีความรู้ในหัวข้อนั้น ๆ และต้องทำการตรวจสอบผลลัพธ์จากที่ AI ได้สร้างขึ้นมาให้มีความถูกต้อง เหมาะสมกับระดับของผู้เรียน และมีปฏิสัมพันธ์อย่างเหมาะสม เพื่อให้เกิดความรู้ความเข้าใจ
        การสร้างการจำลองในรูปที่ 3 นั้น อาศัย Gemini ด้วยโหมดที่เรียกว่า canvas หมายถึงรูปแบบการแสดงผล ซึ่งหน้าจอด้านซ้ายจะเป็น prompt ที่โต้ตอบกับผู้พัฒนา ด้านขวาจะเป็นผลลัพธ์ การใช้ canvas ทำได้โดยกดปุ่มที่อยู่ในเมนูที่ประกอบกับการเขียน prompt

เอกสารอ้างอิง

• [1] Chow, Andrew R. (5 September 2024). “Andrej Karpathy: The 100 Most Influential People in AI 2024” Time. https://time.com/collections/time100-ai-2024/7012851/andrej-karpathy
• [2] DeepLearning.AI, “Build with Andrew”