Vibe Coding สำหรับครูและนักเรียน: ทำสื่อการสอนและส่งงานเป็นลิงก์

ครูหลายคนเริ่มใช้ ChatGPT หรือ Claude ทำสื่อการสอนแล้ว ได้ไฟล์ HTML สวย ๆ มาหนึ่งไฟล์ เป็นแบบฝึกหัด เกมทายคำศัพท์ หรือแบบจำลองการทดลอง แต่ติดตรงที่ "จะส่งให้นักเรียนเปิดยังไง" ส่งไฟล์ในกลุ่มแชตแล้วเปิดในมือถือไม่ได้บ้าง เปิดได้แต่หน้าตาเพี้ยนบ้าง ส่วนนักเรียนที่ทำโปรเจกต์ด้วย AI ก็ส่งงานเป็นไฟล์ ZIP ที่ครูต้องมานั่งแตกไฟล์เปิดทีละคน

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

สรุปสั้นก่อนอ่าน
🍎 ไฟล์ HTML ที่ AI ทำให้ นำขึ้นเว็บได้โดยไม่ต้องมี coding agent: อัปโหลด ZIP หรือวางโค้ดจากแชต AI
🍎 ครูรวมสื่อทุกบทไว้ในโปรเจกต์เดียวได้ แยกเป็นโฟลเดอร์ เช่น /lesson-1/
🍎 เว็บแบบ static (HTML, CSS, JavaScript ล้วน) ไม่พัก เปิดได้ทันทีทุกครั้ง
🍎 นักเรียนส่งงานเป็นลิงก์ ครูเปิดตรวจจากมือถือได้ ไม่ต้องแตกไฟล์
🍎 ผู้ใช้อายุต่ำกว่า 18 ปีต้องได้รับความยินยอมจากผู้ปกครองตามข้อกำหนดการใช้บริการ

ทำไมต้องเป็นลิงก์

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

นำงานขึ้นเว็บได้ 3 ทาง

1. อัปโหลด ZIP ไฟล์ทั้งโฟลเดอร์ ไม่เกิน 256 MB ในหน้า อัปโหลดแล้วขึ้นเว็บ
2. วางโค้ดจากแชต AI หน้าเดียวกันมีข้อความสำเร็จรูปให้คัดลอกไปวางในแชต (ChatGPT, Claude, Gemini) AI จะตอบกลับเป็นไฟล์ทั้งหมด แล้วคัดลอกคำตอบทั้งหมดมาวาง
3. ส่งลิงก์และ token ให้ AI coding agent บนคอมพิวเตอร์ (Claude Code, Codex, Cursor, Windsurf) เหมาะกับงานที่ใหญ่ขึ้น เช่น มีฐานข้อมูลเก็บคะแนน

ทางที่ 1 และ 2 ยังอยู่ในขั้นทดสอบระบบ (มีป้าย BETA) ถ้าติดตรงไหน กด คุยกับทีมงาน ได้จากหน้าเดียวกัน ส่วนขั้นนำงานขึ้นเว็บแนะนำให้ทำบนคอมพิวเตอร์ การนำขึ้นจากมือถือยังไม่เสถียร

สำหรับครู: ทำเว็บสื่อการสอนประจำวิชา

ขั้น 1: สร้างโปรเจกต์หนึ่งโปรเจกต์ต่อวิชา

สมัครบัญชี (ยืนยันด้วยเบอร์มือถือ) แล้วสร้างโปรเจกต์ ตั้งชื่อเว็บให้จำง่าย เช่น sci-m2 นักเรียนจะเปิดที่ https://sci-m2.host.brewinth.net แพ็กเกจ Free มี 1 โปรเจกต์ จึงรวมทุกบทไว้ในโปรเจกต์เดียว

ขั้น 2: ให้ AI ทำสื่อทีละบท

ทำหน้าเว็บสื่อการสอนวิชาวิทยาศาสตร์ ม.2 เรื่อง "แรงและการเคลื่อนที่"
- ไฟล์ HTML CSS JavaScript ล้วน ไม่ใช้ server และไม่ใช้ฐานข้อมูล
- เปิดบนมือถือได้ดี ตัวหนังสือใหญ่ อ่านง่าย
- มีเนื้อหาสั้น ๆ 3 ส่วน แต่ละส่วนมีภาพประกอบที่วาดด้วย SVG
- มีแบบจำลอง: เลื่อนแถบปรับแรงและมวล แล้วเห็นความเร่งเปลี่ยน
- ท้ายบทมีแบบฝึกหัด 10 ข้อ ตรวจคำตอบในเครื่องทันที พร้อมเฉลยอธิบาย
- ไม่เก็บชื่อหรือข้อมูลของนักเรียน
วางไฟล์ไว้ในโฟลเดอร์ "lesson-3" โดยหน้าแรกชื่อ index.html

ขั้น 3: จัดโฟลเดอร์ให้เป็นสารบัญ

ให้มีหน้าแรก index.html เป็นสารบัญ แล้วแต่ละบทอยู่ในโฟลเดอร์ของตัวเองที่มี index.html ระบบจะเปิดหน้าในโฟลเดอร์ให้เองเมื่อเข้าที่อยู่แบบ /lesson-3/ ครูจึงส่งลิงก์ตรงไปบทที่ต้องการได้ แล้วเมื่อมีบทใหม่ ให้ AI เพิ่มโฟลเดอร์และลิงก์ในสารบัญ แล้วนำขึ้นที่โปรเจกต์เดิมอีกครั้ง

ขั้น 4: แชร์ให้นักเรียน

คัดลอกลิงก์จากหัวหน้าโปรเจกต์ไปวางในกลุ่มห้อง หรือทำเป็น QR code ด้วยเครื่องมือสร้าง QR ที่ใช้ประจำ เว็บที่เป็น HTML ล้วนแบบนี้ไม่พัก นักเรียนเปิดเมื่อไรก็โหลดทันที

ข้อควรระวัง อย่าใส่ไฟล์วิดีโอขนาดใหญ่ลงเว็บ แพ็กเกจ Free มีพื้นที่ไฟล์ 20 MB และ bandwidth 1 GB ต่อเดือน วิดีโอให้อัปโหลดไว้ที่ YouTube แล้วฝังลงหน้าเว็บแทน

สำหรับนักเรียน: ส่งงานเป็นลิงก์

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

• ลิงก์เว็บ ที่เปิดใช้งานได้จริง
• บันทึกสั้น ๆ ว่าสั่ง AI อะไรบ้าง ส่วนไหนแก้เอง และเจอปัญหาอะไร

prompt ตั้งต้นสำหรับงานกลุ่ม

ช่วยทำเว็บโปรเจกต์วิชาสังคมศึกษา หัวข้อ "สถานที่สำคัญในจังหวัดของเรา"
- HTML CSS JavaScript ล้วน เปิดบนมือถือได้ดี
- หน้าแรกมีแผนที่แบบภาพ (วาดเอง ไม่ใช้รูปที่มีลิขสิทธิ์) คลิกแต่ละจุดแล้วเห็นข้อมูล
- ข้อมูล 5 สถานที่ ใช้ข้อความที่พวกเราเขียนเองซึ่งจะส่งให้ในข้อความถัดไป
- มีหน้า "ผู้จัดทำ" บอกชื่อเล่นและหน้าที่ของแต่ละคน ไม่ใส่เบอร์โทรหรือที่อยู่
- ทุกครั้งที่แก้ ให้อธิบายสั้น ๆ ว่าแก้อะไร เพื่อเอาไปเขียนบันทึกการทำงาน

ประโยคสุดท้ายสำคัญ: นักเรียนได้เรียนรู้ว่า AI ทำอะไร แทนที่จะคัดลอกผลลัพธ์อย่างเดียว

เกณฑ์ตรวจงานที่ครูใช้ได้เลย

1. เปิดได้จริง ทั้งบนมือถือและคอมพิวเตอร์ ปุ่มกดได้ ไม่มีหน้าขาว
2. ทำตามโจทย์ครบ ทุกหน้าที่และทุกฟังก์ชันที่สั่ง
3. เนื้อหาถูกต้อง ตรวจข้อเท็จจริงแล้ว ไม่ใช่ข้อความที่ AI แต่งขึ้นเองโดยไม่มีที่มา
4. บันทึกการทำงาน บอกว่าใช้ AI ตรงไหน แก้เองตรงไหน และแก้ปัญหาอะไรไปบ้าง
5. ปลอดภัย ไม่มีเบอร์โทร ที่อยู่ หรือรูปของคนอื่นโดยไม่ได้รับอนุญาต

ครูปรับน้ำหนักคะแนนได้ตามวิชา เช่น วิชาคอมพิวเตอร์ให้น้ำหนักข้อ 1-2 มาก วิชาอื่นให้น้ำหนักข้อ 3-4 มาก

อยากโชว์ผลงานให้คนอื่นเห็น

BrewInTH มี พอร์ทัล (portal.brewinth.com) รวมเว็บ เกม และเครื่องมือที่สร้างด้วย AI ตอนสร้างโปรเจกต์จะมีตัวเลือก เผยแพร่ผ่าน portal ของ brewInTH เพื่อประชาสัมพันธ์ฟรี เปิดไว้เป็นค่าเริ่มต้น ผลงานจะขึ้นพอร์ทัลก็ต่อเมื่อทีมงานอนุมัติแล้ว ถ้าเป็นงานในชั้นเรียนที่ไม่อยากให้คนนอกเห็น ปิดตัวเลือกนี้ได้ตอนสร้างโปรเจกต์ หรือในแท็บ พอร์ทัล ภายหลัง

คำถามที่พบบ่อย

ครูต้องเขียนโค้ดเป็นไหม

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

ใช้ฟรีได้ไหม

ได้ แพ็กเกจ Free มี 1 โปรเจกต์ พื้นที่ไฟล์ 20 MB และ bandwidth 1 GB ต่อเดือน พอสำหรับสื่อการสอนแบบ HTML หลายบท ถ้าต้องการหลายโปรเจกต์ แพ็กเกจ Starter 99 บาทต่อเดือนมี 2 โปรเจกต์ และ Maker 1,499 บาทต่อปีมี 5 โปรเจกต์

นักเรียนใช้บัญชีของครูร่วมกันได้ไหม

ไม่แนะนำ ควรให้แต่ละคนมีบัญชีของตัวเอง (ยืนยันด้วยเบอร์มือถือ) งานจะเป็นของนักเรียนเอง และไม่ต้องแชร์รหัสผ่านกัน

เก็บคะแนนแบบฝึกหัดของนักเรียนได้ไหม

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

แก้สื่อแล้วต้องส่งลิงก์ใหม่ไหม

ไม่ต้อง นำไฟล์ชุดใหม่ขึ้นที่โปรเจกต์เดิม ลิงก์เดิมจะแสดงเวอร์ชันใหม่ นักเรียนรีเฟรชหน้าก็เห็น

สรุป

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

เริ่มโปรเจกต์แรกฟรี →

บทความที่เกี่ยวข้อง

• ทำเว็บแบบสอบถามหรือควิซ เก็บคำตอบลงฐานข้อมูลด้วย AI
• เอาเกม HTML5 / Godot / Unity WebGL ขึ้นเว็บ ให้เพื่อนเล่นได้ทันที