นิตยสาร สสวท. ฉบับที่ 261

ปีที่ 54 ฉบับที่ 261 กรกฎาคม - สิงหาคม 2569 | 37 บ ทความนี้จะนำ�เสนอขั้นตอนในการใช้กระบวนการพัฒนาซอฟต์แวร์ บนเว็บแบบ Vibe Coding เพื่อสร้างสื่อการเรียนรู้ที่สามารถใช้งาน ได้ทันทีผ่านเทคโนโลยีที่แพร่หลายในภาคการศึกษาคือ Gemini และ Google Sites โดยเน้นที่การสร้างสื่อเพื่อสนับสนุนการเรียนรู้ในชั้นเรียน หรือทบทวนหัวข้อที่เรียนแบบกระชับ ใช้เวลาไม่นานในการเรียนรู้ ขั้นตอนการพัฒนาเว็บซอฟต์แวร์แบบ Vibe Coding การใช้งาน Vibe Coding ในกรณีที่สื่อการเรียนรู้ไม่ซับซ้อน สามารถสนทนาโดยตรงกับ AI เพื่อสร้างเป็นโค้ด แต่หากต้องการพัฒนา สื่อการเรียนรู้ที่ซับซ้อน ควรเตรียม Prompt ที่มีรายละเอียดครบถ้วน มี โครงสร้าง Prompt ให้ชัดเจน (Prompt Engineering Techniques) ในการแบ่งองค์ประกอบ เช่น การใช้โครงสร้างด้วยภาษา Extensible Markup Language (XML) ซึ่งเป็นวิธีการจัดการข้อมูลด้วยการล้อมหัวข้อ ไว้ด้วย Tags คล้ายกับภาษา HTML เหมาะสำ�หรับการจัดการเอกสารให้มี เนื้อหาที่ AI เข้าใจได้ง่ายขึ้น โครงสร้าง Prompt การอภิปรายต่อไปนี้แสดงหลักการออกแบบโครงสร้างภาพรวม เพื่อให้เห็นภาพส่วนประกอบทั้งหมด และในส่วนถัดไปจะเป็นการอธิบาย เหตุผลของแต่ละส่วน โดยอ้างอิงถึงส่วนต่างๆ ของ Prompt ด้วย สัญลักษณ์ <tag> โดยใช้ Prompt ตัวอย่างที่ปรากฏในเว็บไซต์ https:// sites.google.com/view/dadreadsresearch/interactive-Prompt โครงสร้างภาพรวม ในภาพรวมของ Prompt ประกอบด้วยส่วนสำ�คัญ คือ <user_inputs> ทำ�หน้าที่รับข้อมูลจากผู้สอน <design_system> กำ�หนด รายละเอียดการออกแบบของระบบ <ai_concept_generation> นำ�ข้อมูล สองส่วนแรกมาประมวลเพื่อนำ�เสนอแนวคิดให้ผู้สอนเลือกเพียงหนึ่ง ตัวเลือกเพื่อดำ�เนินการสร้าง Prompt สำ�หรับ Vibe Coding ในขั้นตอน <build_Prompt_generation> และสร้างแนวทางการออกแบบด้วย <collection_compatibility> กรณีวางแผนพัฒนาสื่อชิ้นต่อไปในอนาคต <educational_tool_builder> <user_inputs> <language>...</language> <subject>...</subject> <topic>...</topic> <audience>...</audience> <learning_goal>...</learning_goal> </user_inputs> <design_system> <screen_constraints>...</screen_constraints> <time_constraints>...</time_constraints> <instruction_constraints>...</instruction_constraints> <visual_density>...</visual_density> <audience_visual_tone>...</audience_visual_tone> <design_template>...</design_template> </design_system> <ai_concept_generation> <instruction>...</instruction> <interaction_patterns>...</interaction_patterns> <output_format>...</output_format> <selection_Prompt>...</selection_Prompt> </ai_concept_generation> <build_Prompt_generation> <vibe_coding_Prompt>...</vibe_coding_Prompt> <teacher_note>...</teacher_note> </build_Prompt_generation> <collection_compatibility> <guideline>...</guideline> </collection_compatibility> </educational_tool_builder> ส่วนที่ 1 การรับข้อมูลจากผู้สอน <user_inputs> <user_inputs> เป็นจุดเริ่มต้นของกระบวนการทั้งหมด โดย กำ�หนดให้ผู้สอนระบุข้อมูลพื้นฐาน 5 มิติผ่าน 5 Sub-element ได้แก่ 1. <language> ภาษาที่ใช้ในเครื่องมือ เช่น ภาษาไทยหรือภาษา อังกฤษ 2. <subject> วิชา เช่น คณิตศาสตร์ วิทยาศาสตร์ 3. <topic> หัวข้อหรือทักษะที่ต้องการฝึก 4. <audience> ระดับผู้เรียน เช่น ประถม หรือมัธยม และ 5. <learning_goal> เป้าหมายการเรียนรู้ โดยในขั้นตอนนี้ ผู้สอนจะใส่ Prompt ทั้งหมดลงใน Gemini AI (ใช้ได้แบบฟรีแพ็กเกจ) และควรเลือกใช้โมเดล 3.1 Pro ที่ระดับการคิด ภาพ 1 ตัวอย่างหน้าจอแสดงผล Prompt เพื่อเริ่มกระบวนการใน Gemini โดยเลือก Thinking mode