🧑🎓
ระบบเช็คชื่อนักเรียนแบบง่าย
ตัวอย่าง Apps Script สำหรับผู้เริ่มต้น — มีแค่รายชื่อนักเรียน เช็คชื่อรายวัน ประวัติย้อนหลัง และ Google Sheets 2 ชีต อ่านโค้ดง่าย เหมาะใช้สอนในห้องอบรม
🎯 เป้าหมาย: จบบทนี้ ผู้เข้าอบรมจะได้เว็บแอปเช็คชื่อนักเรียนที่เพิ่มรายชื่อ เลือกห้องเรียน บันทึกสถานะรายวัน ดูประวัติย้อนหลัง และนำไป Deploy เป็น Web App ได้ทันที
📖 ระบบนี้ทำงานอย่างไร?
เป็น Web App บน Google Apps Script ที่ใช้ Google Sheets เป็นฐานข้อมูล โดยแยกข้อมูลเป็น 2 ชีตเท่านั้น: รายชื่อนักเรียนและประวัติการเช็คชื่อ
โค้ดทั้งหมดโหลดได้จากเมนู ☰ (Code.gs + Index.html) — รันฟังก์ชัน setupSystem ครั้งเดียว ระบบจะสร้างชีตและนักเรียนตัวอย่างให้เอง
👥 เพิ่มรายชื่อนักเรียน
🏫 แยกตามห้องเรียน
✅ เช็คชื่อรายวัน
⚡ มาเรียนทั้งหมด
📝 หมายเหตุรายคน
📚 ประวัติย้อนหลัง
📱 Responsive
🧩 Vanilla JS
🧩 ส่วนประกอบหลัก
| ส่วนประกอบ | หน้าที่ |
|---|---|
| Code.gs | ฝั่ง Server — สร้างชีต โหลดรายชื่อ บันทึกเช็คชื่อ ป้องกันข้อมูลซ้ำ และคืนผลแบบ success/message/data |
| Index.html | หน้าเว็บ Single Page — Tab เช็คชื่อ รายชื่อนักเรียน และประวัติ พร้อม Loading/Toast |
| google.script.run | สะพานเชื่อมระหว่างหน้าเว็บกับฟังก์ชันใน Apps Script |
| LockService | ช่วยกันบันทึกซ้อนตอนเพิ่มนักเรียน ลบ และบันทึกเช็คชื่อพร้อมกัน |
🗄️ ฐานข้อมูล 2 ชีต
| ชีต | เก็บอะไร |
|---|---|
| Students | รหัสนักเรียน ชื่อ ห้องเรียน เลขที่ สถานะ และวันที่สร้าง |
| Attendance | วันที่ รหัสนักเรียน ชื่อ ห้องเรียน สถานะ หมายเหตุ และเวลาที่บันทึก |
🎯 ภารกิจ 5 ขั้นตอน