สอนทำ Apps Script — ระบบเช็คชื่อนักเรียนและยืม-คืนอุปกรณ์

Apps Script · นักเรียน + อุปกรณ์ QR

🎒

ระบบเช็คชื่อนักเรียนและยืม-คืนอุปกรณ์ ออนไลน์

ทำเว็บแอปโรงเรียนด้วย Apps Script — เช็คชื่อรายวัน สร้างบัตร QR นักเรียน สแกนขอยืม/คืนอุปกรณ์ ติดตามคืนไม่ครบ ออกรายงาน และแจ้งเตือน LINE โดยใช้ Google Sheets เป็นฐานข้อมูล

🎯 เป้าหมาย: จบบทนี้ น้องจะได้ ระบบเช็คชื่อนักเรียนและยืม-คืนอุปกรณ์ออนไลน์ — มี Dashboard, เช็คชื่อ, ใบลา, บัตร QR นักเรียน, คิวขอยืมจากมือถือ, รับคืนด้วย QR, รายงาน PDF/CSV และ LINE แจ้งเตือน ทำงานบน Google Sheets แล้วได้ลิงก์เปิดใช้จริง

📖 ระบบนี้ทำงานอย่างไร?

เป็น Web App บน Google Apps Script ที่ใช้ Google Sheets เป็นฐานข้อมูล — มีระบบล็อกอินหลายบทบาท (Admin / Teacher / Equipment Admin / Student) จัดการนักเรียน เช็คชื่อ ใบลา อุปกรณ์ คิวขอยืม การคืน และรายงานในหน้าเดียว

โค้ดทั้งหมดมีให้โหลดจากเมนู ☰ (Code.gs + Index.html) — รันฟังก์ชัน setupSystem ครั้งเดียว ระบบจะสร้างชีตหลักและข้อมูลตัวอย่างให้เอง

✅ เช็คชื่อนักเรียนรายวัน 🎫 สร้างบัตร QR นักเรียน 📱 สแกน QR เพื่อขอยืม 📦 จัดอุปกรณ์จากคิว 🔁 รับคืนด้วยบัตร QR ⚠️ ติดตามคืนไม่ครบ/เกินกำหนด 📝 ยื่น/อนุมัติใบลา 📊 Dashboard Real-time 📄 รายงาน PDF/CSV 💬 แจ้งเตือน LINE 📱 Responsive

🧩 ส่วนประกอบหลัก

ส่วนประกอบ	หน้าที่
Code.gs	ฝั่งเซิร์ฟเวอร์ — ล็อกอิน อ่าน/เขียน Sheets จัดการ QR ยืม-คืน ออกรายงาน ส่ง LINE และมี doGet() คืนหน้าเว็บ
Index.html	หน้าเว็บ Single Page — Login + Dashboard + เช็คชื่อ + QR Borrow + Queue + Return + Equipment + Reports + Settings
google.script.run	สะพานเชื่อม — ให้หน้าเว็บเรียกฟังก์ชันใน Code.gs
SpreadsheetApp	ใช้ Google Sheets เป็นฐานข้อมูล (อ่าน/เขียนข้อมูลจริง)
QR Libraries	ใช้ html5-qrcode สำหรับสแกน และ qrcodejs สำหรับสร้างบัตร QR
LINE Messaging API	ส่งแจ้งเตือนรายการขอยืม ส่งมอบ คืนไม่ครบ และแจ้งเตือนใกล้ครบกำหนด

🗄️ ฐานข้อมูลหลัก (สร้างอัตโนมัติ)

ชีต	เก็บอะไร
Students	ข้อมูลนักเรียน + CardToken สำหรับบัตร QR
Attendance	บันทึกเช็คชื่อรายวันตามห้อง/ช่วงเวลา
Classes / StudyPeriods	ข้อมูลห้องเรียนและช่วงเวลาเรียน
Equipment / EquipmentCategories	คลังอุปกรณ์ จำนวนพร้อมใช้ ถูกยืม ชำรุด สูญหาย
CardBorrowQueue	คิวคำขอยืมจากมือถือหลังสแกนบัตรนักเรียน
BorrowRequests / BorrowItems	รายการยืมและรายการอุปกรณ์ในแต่ละใบยืม
EquipmentReturns / Repairs	ประวัติรับคืนและแจ้งซ่อมอุปกรณ์
Users / Sessions / Settings	ผู้ใช้ ระบบล็อกอิน และค่าตั้งค่า LINE/โรงเรียน

🎯 ภารกิจ 6 ขั้นตอน

คุณเป็นผู้เชี่ยวชาญด้าน Google Apps Script, Google Sheets, HTML, CSS, JavaScript, Responsive Web Design, ระบบ QR Code, Chart.js, LINE Messaging API และการพัฒนาเว็บแอปพลิเคชันสำหรับสถานศึกษา จงสร้างเว็บแอปพลิเคชันชื่อ “ระบบเช็คชื่อนักเรียนและยืม-คืนอุปกรณ์ผ่าน QR Code บัตรนักเรียน” ชื่อภาษาอังกฤษ: “Student Attendance & QR Equipment Borrowing System” ระบบต้องสามารถนำไปใช้งานจริงในโรงเรียน วิทยาลัย หรือมหาวิทยาลัยได้ โดยพัฒนาด้วย Google Apps Script และใช้ Google Sheets เป็นฐานข้อมูล เว็บแอปพลิเคชันต้องรองรับการใช้งานผ่านโทรศัพท์มือถือ แท็บเล็ต และคอมพิวเตอร์ โดยเฉพาะระบบยืม-คืนอุปกรณ์ที่ต้องใช้โทรศัพท์มือถือสแกน QR Code บนบัตรนักเรียน และส่งคำขอไปแสดงบนหน้าจอคอมพิวเตอร์ของเจ้าหน้าที่แบบอัตโนมัติ • วัตถุประสงค์ของระบบ ระบบต้องมีวัตถุประสงค์ดังต่อไปนี้ • บันทึกการเข้าเรียนของนักเรียนรายวัน • ตรวจสอบนักเรียนที่มาเรียน ขาดเรียน ลา และมาสาย • จัดการข้อมูลนักเรียน ระดับชั้น และห้องเรียน • รองรับการยื่นคำขอลาและอนุมัติการลา • จัดเก็บข้อมูลอุปกรณ์ของโรงเรียน • ตรวจสอบจำนวนอุปกรณ์ที่พร้อมให้ยืมแบบ Real-time • ใช้ QR Code บนบัตรนักเรียนเพื่อระบุตัวตนของผู้ยืม • ให้นักเรียนหรือเจ้าหน้าที่พิมพ์รายการอุปกรณ์ที่ต้องการยืมผ่านโทรศัพท์มือถือ • ส่งคำขอจากโทรศัพท์มือถือไปแสดงบนหน้าจอคอมพิวเตอร์ของเจ้าหน้าที่ • ช่วยให้เจ้าหน้าที่ตรวจสอบและเลือกอุปกรณ์ที่ส่งมอบจริง • บันทึกการยืม การส่งมอบ การคืน และการคืนบางส่วน • ตรวจสอบนักเรียนที่คืนอุปกรณ์ไม่ครบ • ติดตามอุปกรณ์ที่ใกล้ถึงกำหนดคืนและเกินกำหนดคืน • บันทึกอุปกรณ์ที่ชำรุด สูญหาย หรืออยู่ระหว่างซ่อม • สร้างรายงาน PDF และ CSV • แจ้งเตือนผ่าน LINE Messaging API • ลดการใช้เอกสารกระดาษภายในสถานศึกษา • ประเภทผู้ใช้งาน ระบบต้องมีผู้ใช้งานอย่างน้อย 3 บทบาท 2.1 ผู้ดูแลระบบ Admin สามารถดำเนินการดังนี้ • ดูข้อมูลทั้งหมดของระบบ • จัดการบัญชีผู้ใช้งาน • เพิ่ม แก้ไข และปิดใช้งานข้อมูลนักเรียน • จัดการระดับชั้นและห้องเรียน • จัดการข้อมูลครูและเจ้าหน้าที่ • จัดการข้อมูลอุปกรณ์ • จัดการหมวดหมู่อุปกรณ์ • จัดการข้อมูลการเช็คชื่อ • อนุมัติหรือไม่อนุมัติคำขอลา • ดูคำขอยืมอุปกรณ์จากโทรศัพท์มือถือ • อนุมัติและส่งมอบอุปกรณ์ • ตรวจรับคืนอุปกรณ์ • บันทึกอุปกรณ์ชำรุดหรือสูญหาย • ตรวจสอบรายการคืนไม่ครบ • ตรวจสอบรายการเกินกำหนด • สร้างรายงาน PDF และ CSV • ตั้งค่าข้อมูลโรงเรียน • ตั้งค่าการแจ้งเตือน LINE • ดูประวัติการทำรายการของผู้ใช้งาน 2.2 ครูหรือเจ้าหน้าที่ Teacher / Officer สามารถดำเนินการดังนี้ • เช็คชื่อนักเรียนในห้องเรียนที่รับผิดชอบ • ดูสถิติการเข้าเรียน • ตรวจสอบคำขอลา • ดูคำขอยืมอุปกรณ์จากโทรศัพท์มือถือ • เลือกอุปกรณ์และจำนวนที่ส่งมอบจริง • ยืนยันการส่งมอบอุปกรณ์ • สแกนบัตรนักเรียนตอนรับคืน • ตรวจรับคืนอุปกรณ์ • บันทึกการคืนบางส่วน • บันทึกอุปกรณ์ชำรุด สูญหาย หรืออุปกรณ์ไม่ครบ • ดูรายการนักเรียนที่ยังคืนอุปกรณ์ไม่ครบ • สร้างรายงานตามสิทธิ์ที่ได้รับ 2.3 นักเรียน Student นักเรียนไม่จำเป็นต้องเข้าถึงหน้าจัดการระบบทั้งหมด แต่สามารถดำเนินการผ่านหน้าสำหรับโทรศัพท์มือถือได้ดังนี้ • ใช้ QR Code บนบัตรนักเรียนเพื่อระบุตัวตน • ตรวจสอบชื่อ รหัสนักเรียน ระดับชั้น และห้องเรียนหลังสแกน • พิมพ์รายการอุปกรณ์ที่ต้องการยืม • ระบุวัตถุประสงค์ในการยืม • ระบุวันที่ต้องการใช้และวันที่กำหนดคืน • ส่งคำขอไปยังหน้าจอคอมพิวเตอร์ของเจ้าหน้าที่ • ตรวจสอบรายการอุปกรณ์ที่ตนเองกำลังยืม • แจ้งขอคืนอุปกรณ์ ระบบต้องตรวจสอบสิทธิ์จากฝั่ง Server ทุกครั้ง ห้ามใช้เพียงการซ่อนเมนูจากหน้า HTML • ระบบเข้าสู่ระบบ ออกแบบหน้า Login สไตล์ Modern โดยมีรายละเอียดดังนี้ • แบ่งหน้าจอเป็นสองฝั่งเมื่อเปิดบนคอมพิวเตอร์ • ฝั่งซ้ายเป็นพื้นหลัง Gradient สีน้ำเงิน • แสดงชื่อระบบ ชื่อโรงเรียน สโลแกน และจุดเด่นของระบบ • ฝั่งขวาเป็นการ์ด Login สีขาว มุมโค้ง และมีเงานุ่ม • มีช่องชื่อผู้ใช้ • มีช่องรหัสผ่าน • มีปุ่มแสดงหรือซ่อนรหัสผ่าน • มีตัวเลือกจดจำชื่อผู้ใช้ • มีปุ่มเข้าสู่ระบบแบบ Gradient • รองรับการกด Enter เพื่อเข้าสู่ระบบ • มี Loading ระหว่างตรวจสอบข้อมูล • แสดงข้อความเมื่อเข้าสู่ระบบไม่สำเร็จ • รองรับหน้าจอโทรศัพท์มือถือแบบ Responsive • มีปุ่มออกจากระบบ • กำหนดอายุ Session • บังคับให้ผู้ดูแลระบบเปลี่ยนรหัสผ่านหลังเข้าสู่ระบบครั้งแรก • ระบบรักษาความปลอดภัย ระบบต้องมีมาตรการดังต่อไปนี้ • ห้ามเก็บรหัสผ่านเป็นข้อความธรรมดา • เข้ารหัสหรือ Hash รหัสผ่านก่อนบันทึก • ใช้ Salt ร่วมกับการ Hash รหัสผ่าน • สร้าง Session Token ที่คาดเดาได้ยาก • ตรวจสอบ Session ทุกครั้งก่อนเข้าถึงข้อมูลสำคัญ • ตรวจสอบ Role จากฝั่ง Server • ห้ามส่ง PasswordHash, LINE Token หรือข้อมูลสำคัญกลับไปยัง Browser • ตรวจสอบและกรองข้อมูล Input • ป้องกัน HTML Injection และ Script Injection • ใช้ LockService เมื่อมีการเปลี่ยนจำนวนอุปกรณ์ • ป้องกันการกดปุ่มซ้ำ • บันทึกประวัติการเข้าสู่ระบบ • บันทึก Audit Log สำหรับรายการสำคัญ • ใช้ Soft Delete หรือการเปลี่ยนสถานะแทนการลบประวัติธุรกรรม • กำหนด Time Zone เป็น Asia/Bangkok • ระบบจัดการข้อมูลนักเรียน ข้อมูลนักเรียนต้องประกอบด้วย • รหัสนักเรียน • เลขบัตรหรือรหัส QR • คำนำหน้า • ชื่อ • นามสกุล • ชื่อเล่น • ระดับชั้น • ห้องเรียน • เลขที่ • เพศ • เบอร์โทร • อีเมล • ชื่อผู้ปกครอง • เบอร์โทรผู้ปกครอง • รูปประจำตัว • สถานะ • วันที่สร้างข้อมูล • วันที่แก้ไขล่าสุด ความสามารถของระบบ • เพิ่มข้อมูลนักเรียน • แก้ไขข้อมูลนักเรียน • ค้นหาด้วยรหัสหรือชื่อ • กรองตามระดับชั้นและห้องเรียน • เปิดหรือปิดสถานะนักเรียน • ดูประวัติการเช็คชื่อ • ดูประวัติการลา • ดูประวัติการยืม-คืนอุปกรณ์ • ดูรายการอุปกรณ์ที่นักเรียนยังไม่ได้คืน • ระบบ QR Code บัตรนักเรียน ระบบต้องสร้าง QR Code ประจำตัวนักเรียนแต่ละคน ข้อมูลใน QR Code ควรใช้ Token หรือรหัสเฉพาะที่ระบบสร้างขึ้น ไม่ควรเก็บข้อมูลส่วนตัวทั้งหมดไว้ใน QR Code โดยตรง ความสามารถของระบบ QR Code • สร้าง QR Code ให้นักเรียนโดยอัตโนมัติ • QR Code แต่ละคนต้องไม่ซ้ำกัน • เปิดดูบัตรนักเรียนบนหน้าจอ • แสดงชื่อ รหัสนักเรียน ระดับชั้น ห้องเรียน รูปนักเรียน และ QR Code • พิมพ์บัตรนักเรียนได้ • ดาวน์โหลด QR Code ได้ • สร้างบัตรนักเรียนหลายคนพร้อมกันได้ • รองรับการเปลี่ยน QR Token กรณีบัตรสูญหาย • QR Code เดิมต้องไม่สามารถใช้งานได้หลังเปลี่ยน Token • ระบบเช็คชื่อนักเรียน ระบบเช็คชื่อต้องมีความสามารถดังนี้ • เลือกวันที่ • เลือกระดับชั้น • เลือกห้องเรียน • เลือกรายวิชาหรือคาบเรียนได้ • แสดงรายชื่อนักเรียนตามตัวกรอง • ค้นหาด้วยชื่อหรือรหัสนักเรียน • แสดงรูป ชื่อ รหัส ห้องเรียน และเลขที่ • บันทึกสถานะรายบุคคล • มีปุ่มกำหนดสถานะ “มาเรียนทั้งหมด” • มีปุ่มล้างสถานะทั้งหมด • มีช่องหมายเหตุรายบุคคล • บันทึกชื่อผู้เช็ค • บันทึกวันที่และเวลาทำรายการ • แก้ไขย้อนหลังได้เฉพาะผู้มีสิทธิ์ • ป้องกันการบันทึกข้อมูลซ้ำ สถานะการเข้าเรียนประกอบด้วย • มาเรียน • ขาดเรียน • ลาป่วย • ลากิจ • มาสาย • เข้าร่วมกิจกรรม • อื่น ๆ • ระบบยื่นคำขอลา ระบบต้องรองรับ • เลือกประเภทการลา • วันที่เริ่มลา • วันที่สิ้นสุด • จำนวนวันลา • เหตุผล • เบอร์โทรติดต่อ • URL เอกสารหรือหลักฐาน • สถานะรออนุมัติ • อนุมัติ • ไม่อนุมัติ • ยกเลิก • บันทึกผู้อนุมัติ • บันทึกวันที่และเวลาอนุมัติ • บันทึกเหตุผลกรณีไม่อนุมัติ • เมื่อลาได้รับอนุมัติ ให้ลงสถานะในระบบเช็คชื่อโดยอัตโนมัติ • ป้องกันการยื่นคำขอลาซ้ำในช่วงวันเดียวกัน • หน้า Dashboard Dashboard ต้องแสดงข้อมูลแบบ Real-time หรือโหลดข้อมูลล่าสุดจาก Google Sheets การ์ดสรุปการเช็คชื่อ • นักเรียนทั้งหมด • มาเรียนวันนี้ • ขาดเรียน • ลาป่วย • ลากิจ • มาสาย • ยังไม่เช็คชื่อ การ์ดสรุปอุปกรณ์ • อุปกรณ์ทั้งหมด • อุปกรณ์พร้อมให้ยืม • อุปกรณ์กำลังถูกยืม • คำขอยืมที่รอดำเนินการ • นักเรียนที่ยังคืนอุปกรณ์ไม่ครบ • อุปกรณ์ใกล้ถึงกำหนดคืน • อุปกรณ์เกินกำหนดคืน • อุปกรณ์ชำรุด • อุปกรณ์สูญหาย • อุปกรณ์อยู่ระหว่างซ่อม กราฟและตาราง • Donut Chart สัดส่วนการเข้าเรียนวันนี้ • Line Chart การเข้าเรียนย้อนหลัง 7 วัน • Bar Chart แยกตามห้องเรียน • Donut Chart สถานะอุปกรณ์ • Bar Chart จำนวนการยืมแยกตามหมวดหมู่ • ตารางนักเรียนที่ยังไม่เช็คชื่อ • ตารางคำขอยืมล่าสุด • ตารางนักเรียนที่คืนอุปกรณ์ไม่ครบ • ตารางอุปกรณ์เกินกำหนด ใช้ Chart.js และต้องป้องกันการสร้าง Chart ซ้ำบน Canvas เดิม • ระบบจัดการอุปกรณ์ ข้อมูลอุปกรณ์ประกอบด้วย • รหัสอุปกรณ์ • รหัสทรัพย์สิน • ชื่ออุปกรณ์ • หมวดหมู่ • รายละเอียด • ยี่ห้อ • รุ่น • Serial Number • ประเภทอุปกรณ์ • หน่วยนับ • จำนวนทั้งหมด • จำนวนพร้อมให้ยืม • จำนวนที่ถูกจอง • จำนวนที่กำลังถูกยืม • จำนวนชำรุด • จำนวนสูญหาย • สถานที่จัดเก็บ • ผู้รับผิดชอบ • รูปภาพ • สถานะ • หมายเหตุ • วันที่สร้าง • วันที่แก้ไขล่าสุด ระบบต้องรองรับอุปกรณ์สองรูปแบบ • อุปกรณ์แบบมีรหัสประจำชิ้น เช่น Notebook กล้องถ่ายรูป โทรศัพท์ และเครื่องมือวัด • อุปกรณ์แบบนับจำนวน เช่น ลูกบอล สาย HDMI เมาส์ คีย์บอร์ด กรรไกร และอุปกรณ์กีฬา สถานะอุปกรณ์ประกอบด้วย • พร้อมใช้งาน • ถูกจอง • ถูกยืม • ชำรุด • สูญหาย • อยู่ระหว่างซ่อม • ยกเลิกการใช้งาน ความสามารถของระบบ • เพิ่ม แก้ไข และค้นหาอุปกรณ์ • กรองตามหมวดหมู่และสถานะ • แสดงจำนวนคงเหลือแบบ Real-time • แสดงรูปภาพอุปกรณ์ • แสดง Badge สถานะ • ดูประวัติการยืม-คืนรายอุปกรณ์ • ห้ามยืมอุปกรณ์ที่ชำรุด สูญหาย อยู่ระหว่างซ่อม หรือยกเลิกการใช้งาน • ขั้นตอนยืมอุปกรณ์ผ่าน QR Code บัตรนักเรียน ขั้นตอนต้องทำงานดังนี้ • ผู้ใช้งานเปิดหน้า “สแกนบัตรเพื่อยืม” บนโทรศัพท์มือถือ • ระบบขออนุญาตใช้งานกล้อง • ใช้กล้องโทรศัพท์สแกน QR Code บนบัตรนักเรียน • ระบบนำ QR Token ไปตรวจสอบกับข้อมูลนักเรียนใน Google Sheets • หากพบข้อมูล ให้แสดงชื่อ รูป รหัสนักเรียน ระดับชั้น และห้องเรียน • หากไม่พบข้อมูล ให้แสดงข้อความว่าไม่พบบัตรนักเรียน • รองรับการกรอกรหัสนักเรียนแทนการสแกน • หลังยืนยันตัวตนแล้ว ให้แสดงแบบฟอร์มคำขอยืม • นักเรียนหรือเจ้าหน้าที่พิมพ์ชื่ออุปกรณ์ที่ต้องการ • สามารถพิมพ์ได้หลายรายการ • ระบุจำนวนโดยประมาณ • ระบุวัตถุประสงค์ • ระบุวันที่ต้องการใช้ • ระบุวันที่กำหนดคืน • เพิ่มหมายเหตุ • กดส่งคำขอ • ระบบบันทึกคำขอลง Google Sheets • ระบบแสดงเลขคิวหรือเลขที่คำขอ • คำขอต้องไปแสดงบนหน้าจอคอมพิวเตอร์ของเจ้าหน้าที่ หน้าโทรศัพท์ต้องออกแบบให้ใช้งานง่าย ปุ่มมีขนาดใหญ่ ตัวหนังสืออ่านง่าย และไม่ล้นหน้าจอ ใช้ไลบรารีสแกน QR Code เช่น html5-qrcode ผ่าน CDN โดยรวมการเรียกใช้งานไว้ในไฟล์ Index.html • หน้าจอคิวคำขอบนคอมพิวเตอร์ สร้างหน้า “คิวคำขอยืม” สำหรับเปิดบนคอมพิวเตอร์ของเจ้าหน้าที่ ความสามารถของหน้าคิว • แสดงคำขอใหม่จากโทรศัพท์มือถือ • รีเฟรชข้อมูลอัตโนมัติทุก 3 วินาที • มีปุ่มหยุดหรือเปิดการรีเฟรชอัตโนมัติ • แสดงเลขคิว • แสดงเวลาที่ส่งคำขอ • แสดงชื่อและรูปนักเรียน • แสดงรหัสนักเรียน • แสดงระดับชั้นและห้องเรียน • แสดงข้อความรายการอุปกรณ์ที่นักเรียนพิมพ์ • แสดงวัตถุประสงค์ • แสดงกำหนดคืน • เรียงคำขอใหม่ที่สุดหรือเก่าที่สุดได้ • มีเสียงแจ้งเตือนเมื่อมีคำขอใหม่ โดยต้องเปิดใช้งานเสียงหลังผู้ใช้กดอนุญาต • ป้องกันคิวเดิมแสดงซ้ำ • มีสถานะ รอดำเนินการ กำลังจัดของ ส่งมอบแล้ว ยกเลิก และไม่อนุมัติ • ระบบเลือกอุปกรณ์และส่งมอบจริง ข้อความที่นักเรียนพิมพ์เป็นเพียงคำขอเบื้องต้น เจ้าหน้าที่ต้องเลือกอุปกรณ์จริงจากฐานข้อมูล เจ้าหน้าที่สามารถ • เปิดรายละเอียดคำขอ • ค้นหาอุปกรณ์จากฐานข้อมูล • เพิ่มอุปกรณ์หลายรายการในคำขอเดียว • ระบุจำนวนที่อนุมัติ • ตรวจสอบจำนวนคงเหลือ • ลบรายการที่เลือกผิด • เปลี่ยนจำนวน • ระบุสภาพก่อนยืม • ระบุอุปกรณ์ประกอบ • เพิ่มหมายเหตุ • ยืนยันส่งมอบ • ไม่อนุมัติคำขอ • ยกเลิกคำขอ ก่อนส่งมอบ ระบบต้องตรวจสอบจำนวนคงเหลือล่าสุดจาก Google Sheets อีกครั้ง เมื่อยืนยันส่งมอบ • ลด AvailableQty • เพิ่ม BorrowedQty • บันทึกวันและเวลาส่งมอบ • บันทึกชื่อเจ้าหน้าที่ • บันทึกอุปกรณ์และจำนวนที่ส่งมอบจริง • บันทึก Transaction • เปลี่ยนสถานะคำขอเป็น “ส่งมอบแล้ว” • แสดงรายการในหน้าอุปกรณ์ที่นักเรียนกำลังถือครอง • การป้องกันจำนวนอุปกรณ์ผิดพลาด ทุกครั้งที่อนุมัติ ส่งมอบ คืน ยกเลิก หรือเปลี่ยนจำนวนอุปกรณ์ ต้องใช้ LockService ขั้นตอนภายใน LockService ต้องเป็นดังนี้ • เรียก Lock • รอ Lock ตามเวลาที่เหมาะสม • อ่านจำนวนล่าสุดจาก Google Sheets • ตรวจสอบจำนวนอีกครั้ง • ปรับจำนวน • บันทึก Transaction • บันทึก Audit Log • ปล่อย Lock ใน finally กฎสำคัญ • ห้าม AvailableQty ติดลบ • ห้าม BorrowedQty ติดลบ • ห้ามคืนเกินจำนวนที่ยังไม่ได้คืน • ห้ามส่งมอบเกินจำนวนที่มี • ห้ามบันทึกรายการซ้ำจากการกดปุ่มหลายครั้ง • ต้องใช้รหัสธุรกรรมที่ไม่ซ้ำกัน • หากเกิดข้อผิดพลาด ให้พยายามคืนค่าข้อมูลเดิมเท่าที่ Google Sheets รองรับ • แสดงข้อความผิดพลาดที่ผู้ใช้งานเข้าใจได้ • ระบบรับคืนอุปกรณ์ด้วยบัตรนักเรียน ขั้นตอนรับคืนต้องทำงานดังนี้ • เจ้าหน้าที่เปิดหน้า “สแกนบัตรรับคืน” • ใช้โทรศัพท์หรือกล้องสแกน QR Code บัตรนักเรียน • รองรับการกรอกรหัสนักเรียนแทนการสแกน • ระบบแสดงข้อมูลนักเรียน • ระบบค้นหารายการอุปกรณ์ที่นักเรียนยังไม่ได้คืน • แสดงชื่ออุปกรณ์ จำนวนที่ยืม จำนวนที่คืนแล้ว และจำนวนที่ยังค้าง • แสดงวันที่ยืม • แสดงกำหนดคืน • แสดงจำนวนวันที่เกินกำหนด • เจ้าหน้าที่เลือกรายการที่นำมาคืน • ระบุจำนวนที่คืน • ระบุสภาพหลังคืน • ระบุอุปกรณ์ประกอบที่ขาด • ระบุค่าเสียหาย • เพิ่มหมายเหตุ • ยืนยันรับคืน สภาพหลังคืนประกอบด้วย • ปกติ • ชำรุด • อุปกรณ์ไม่ครบ • สูญหาย • รอตรวจสอบเพิ่มเติม • ระบบคืนบางส่วน ระบบต้องรองรับการคืนอุปกรณ์บางส่วน ตัวอย่าง นักเรียนยืมลูกบอลจำนวน 10 ลูก • คืนครั้งแรก 6 ลูก • ระบบต้องแสดงว่ายังค้าง 4 ลูก • คืนครั้งที่สอง 4 ลูก • ระบบจึงเปลี่ยนสถานะเป็นคืนครบแล้ว กฎการปรับจำนวน • คืนสภาพปกติ: ลด BorrowedQty และเพิ่ม AvailableQty • คืนชำรุด: ลด BorrowedQty แต่ไม่เพิ่ม AvailableQty ให้เพิ่มจำนวนชำรุด • สูญหาย: ลด BorrowedQty แต่ไม่เพิ่ม AvailableQty ให้เพิ่มจำนวนสูญหาย • คืนไม่ครบ: คงจำนวนที่เหลือในระบบ • ต้องบันทึกประวัติการคืนทุกครั้ง • ห้ามแก้ไขทับประวัติการคืนครั้งก่อน • หน้า “รายการคืนไม่ครบ” สร้างหน้าสำหรับติดตามนักเรียนที่ยังคืนอุปกรณ์ไม่ครบ ข้อมูลที่ต้องแสดง • รหัสนักเรียน • ชื่อนักเรียน • ระดับชั้น • ห้องเรียน • เบอร์โทรนักเรียน • เบอร์โทรผู้ปกครอง • เลขที่คำขอยืม • ชื่ออุปกรณ์ • จำนวนที่ยืม • จำนวนที่คืนแล้ว • จำนวนที่ยังค้าง • วันที่ยืม • กำหนดคืน • จำนวนวันที่เกินกำหนด • สถานะ • หมายเหตุ ความสามารถของหน้า • ค้นหาด้วยรหัสหรือชื่อนักเรียน • กรองตามระดับชั้น • กรองตามห้องเรียน • กรองตามสถานะ • กรองเฉพาะรายการเกินกำหนด • เปิดดูรายละเอียดนักเรียน • เปิดดูประวัติการคืน • พิมพ์รายงาน • ส่งออก CSV • สร้าง PDF • ส่งข้อความแจ้งเตือนผ่าน LINE • เรียงลำดับตามจำนวนวันที่เกินกำหนด • ระบบติดตามกำหนดคืน ระบบต้อง • คำนวณจำนวนวันที่เหลือก่อนกำหนดคืน • แสดงสถานะ “ใกล้ถึงกำหนด” • แสดงสถานะ “ครบกำหนดวันนี้” • แสดงสถานะ “เกินกำหนด” • แสดงจำนวนวันที่เกินกำหนด • ตรวจสอบรายการอัตโนมัติทุกวัน • สร้าง Time-driven Trigger • ป้องกันการสร้าง Trigger ซ้ำ • ส่งสรุปรายการเกินกำหนดให้เจ้าหน้าที่ตามการตั้งค่า • แสดงรายการบน Dashboard • ระบบแจ้งซ่อม ระบบต้องรองรับ • เลือกอุปกรณ์ • ระบุอาการเสีย • ระบุระดับความเสียหาย • ระบุผู้แจ้ง • ระบุผู้รับผิดชอบ • ระบุวันที่ส่งซ่อม • ระบุสถานะการซ่อม • ระบุค่าใช้จ่าย • ระบุผลการซ่อม • แนบ URL รูปภาพ • เพิ่มหมายเหตุ สถานะการซ่อม • รอตรวจสอบ • รอส่งซ่อม • กำลังซ่อม • ซ่อมเสร็จ • ซ่อมไม่ได้ • ยกเลิก เมื่อซ่อมเสร็จและใช้งานได้ ให้ปรับจำนวนอุปกรณ์กลับเข้าสู่ AvailableQty อย่างถูกต้อง • ระบบรายงาน รายงานการเช็คชื่อ • รายงานเช็คชื่อรายวัน • รายงานเช็คชื่อรายเดือน • รายงานแยกตามห้องเรียน • รายงานนักเรียนขาดเรียน • รายงานนักเรียนมาสาย • รายงานการลา • รายงานรายบุคคล รายงานอุปกรณ์ • รายงานอุปกรณ์ทั้งหมด • รายงานอุปกรณ์พร้อมให้ยืม • รายงานอุปกรณ์ที่กำลังถูกยืม • รายงานนักเรียนที่คืนไม่ครบ • รายงานรายการเกินกำหนด • รายงานอุปกรณ์ชำรุด • รายงานอุปกรณ์สูญหาย • รายงานประวัติการยืม-คืน • รายงานอุปกรณ์ที่ถูกยืมบ่อย • รายงานแยกตามห้องเรียน • รายงานค่าใช้จ่ายในการซ่อม รองรับ • ดาวน์โหลด PDF • ดาวน์โหลด CSV • พิมพ์รายงาน • กรองตามช่วงวันที่ • กรองตามระดับชั้น • กรองตามห้องเรียน • กรองตามนักเรียน • กรองตามอุปกรณ์ • กรองตามสถานะ รายงาน PDF ต้องมี • โลโก้โรงเรียน • ชื่อโรงเรียน • ชื่อรายงาน • ช่วงวันที่ • วันที่สร้าง • ชื่อผู้สร้างรายงาน • ตารางข้อมูล • สรุปยอดรวม • เลขหน้า • ช่องลงชื่อผู้จัดทำและผู้ตรวจสอบ • ระบบแจ้งเตือน LINE Messaging API ใช้ LINE Messaging API ไม่ใช้ LINE Notify ตั้งค่าผ่าน Script Properties หรือหน้า Settings ข้อมูลที่ต้องตั้งค่า • LINE Channel Access Token • LINE Target User ID • LINE Group ID • เปิดหรือปิดการแจ้งเตือน • จำนวนวันแจ้งเตือนก่อนกำหนด • เวลาส่งสรุปประจำวัน เหตุการณ์ที่แจ้งเตือน • มีคำขอยืมใหม่ • ยืนยันการส่งมอบ • แจ้งขอคืน • รับคืนเรียบร้อย • คืนอุปกรณ์ไม่ครบ • อุปกรณ์ใกล้ถึงกำหนดคืน • อุปกรณ์เกินกำหนด • อุปกรณ์ชำรุด • อุปกรณ์สูญหาย • สรุปประจำวัน สร้างฟังก์ชันทดสอบการส่ง LINE และแสดงผลว่าสำเร็จหรือไม่ ห้ามส่ง LINE Token กลับไปยังหน้า Browser • โครงสร้าง Google Sheets ระบบต้องสร้าง Sheet และหัวตารางให้อัตโนมัติเมื่อรัน setupSystem() สร้าง Sheet อย่างน้อยดังนี้ Students StudentID | QRToken | Prefix | FirstName | LastName | Nickname | GradeLevel | ClassRoom | StudentNumber | Gender | Phone | Email | ParentName | ParentPhone | PhotoURL | Status | CreatedAt | UpdatedAt Classes ClassID | GradeLevel | ClassRoom | HomeroomTeacher | Status | CreatedAt | UpdatedAt Users UserID | Username | PasswordHash | PasswordSalt | Role | StudentID | DisplayName | MustChangePassword | Status | LastLogin | CreatedAt | UpdatedAt Sessions SessionID | UserID | SessionToken | ExpireAt | CreatedAt | LastActiveAt | Status Attendance AttendanceID | Date | StudentID | GradeLevel | ClassRoom | Subject | Period | Status | TimeIn | Note | RecordedBy | CreatedAt | UpdatedAt LeaveRequests LeaveID | StudentID | LeaveType | StartDate | EndDate | TotalDays | Reason | ContactPhone | AttachmentURL | Status | ApprovedBy | ApprovedAt | RejectReason | SubmittedAt | UpdatedAt EquipmentCategories CategoryID | CategoryName | Description | Status | CreatedAt | UpdatedAt Equipment EquipmentID | AssetCode | EquipmentName | CategoryID | Description | Brand | Model | SerialNumber | EquipmentType | Unit | TotalQty | AvailableQty | ReservedQty | BorrowedQty | DamagedQty | LostQty | StorageLocation | ResponsiblePerson | ImageURL | Status | Note | CreatedAt | UpdatedAt | UpdatedBy MobileRequests MobileRequestID | QueueNumber | StudentID | RequestedText | EstimatedQty | Purpose | NeededDate | DueDate | Note | RequestStatus | SubmittedAt | ProcessedBy | ProcessedAt | UpdatedAt BorrowRequests BorrowID | BorrowNumber | MobileRequestID | StudentID | GradeLevel | ClassRoom | RequestDate | NeededDate | DueDate | Purpose | Status | ApprovedBy | ApprovedAt | DeliveredBy | DeliveredAt | ReturnRequestedAt | CompletedAt | Note | CreatedAt | UpdatedAt BorrowItems BorrowItemID | BorrowID | EquipmentID | RequestedQty | ApprovedQty | DeliveredQty | ReturnedQty | RemainingQty | ItemStatus | ConditionBefore | Accessories | Note | CreatedAt | UpdatedAt EquipmentReturns ReturnID | BorrowID | BorrowItemID | EquipmentID | StudentID | ReturnQty | ReturnDateTime | ConditionAfter | MissingAccessories | DamageFee | ReceivedBy | EvidenceURL | Note | CreatedAt EquipmentTransactions TransactionID | BorrowID | BorrowItemID | EquipmentID | StudentID | TransactionType | Quantity | TransactionDateTime | ConditionBefore | ConditionAfter | PerformedBy | ReferenceID | Note EquipmentRepairs RepairID | EquipmentID | ReportDate | ProblemDescription | Severity | ReportedBy | AssignedTo | RepairStatus | SentRepairDate | CompletedDate | RepairResult | Cost | ImageURL | Note | CreatedAt | UpdatedAt Settings Key | Value | Description | UpdatedAt | UpdatedBy AuditLogs LogID | UserID | Username | Action | Module | ReferenceID | OldValue | NewValue | UserAgent | CreatedAt LoginLogs LoginLogID | UserID | Username | LoginStatus | UserAgent | CreatedAt Notifications NotificationID | UserID | NotificationType | Title | Message | ReferenceID | IsRead | CreatedAt • การออกแบบหน้าเว็บ ออกแบบสไตล์ Modern School Dashboard ใช้สีหลัก • น้ำเงิน #2563EB • เขียว #10B981 • แดง #EF4444 • เหลือง #F59E0B • ม่วง #8B5CF6 • พื้นหลัง #F8FAFC • ข้อความหลัก #0F172A • ข้อความรอง #64748B ลักษณะ UI • Sidebar บนคอมพิวเตอร์ • Hamburger Menu บนโทรศัพท์ • Top Navigation • การ์ดมุมโค้ง • เงานุ่ม • ตาราง Responsive • Modal Form • Toast Notification • Confirm Dialog • Loading Overlay • Skeleton Loading • Badge แสดงสถานะ • ปุ่มมี Hover Effect • รองรับภาษาไทย • ใช้ Font Sarabun หรือ Prompt • ห้ามหน้าเว็บล้นจอบนมือถือ • ปุ่มสแกน QR ต้องเห็นชัดและกดง่าย • หน้าคิวคอมพิวเตอร์ต้องอ่านง่ายจากระยะไกล • เทคโนโลยีที่ใช้ • Google Apps Script Web App • Google Sheets Database • HTML • CSS • Vanilla JavaScript • google.script.run • Chart.js • html5-qrcode • QRCode.js • Google Drive • Google Sheets Export • LINE Messaging API • LockService • PropertiesService • CacheService • Time-driven Trigger • โครงสร้างไฟล์ ต้องสร้างโค้ดเพียง 2 ไฟล์เท่านั้น ไฟล์ที่ 1 ชื่อ Code.gs รวมโค้ดฝั่ง Server ทั้งหมด เช่น • doGet() • setupSystem() • createDefaultAdmin() • setupDailyTrigger() • ระบบ Login • ระบบ Session • ระบบตรวจสอบ Role • ระบบนักเรียน • ระบบ QR Token • ระบบเช็คชื่อ • ระบบลา • ระบบอุปกรณ์ • ระบบคำขอจากมือถือ • ระบบคิวบนคอมพิวเตอร์ • ระบบอนุมัติและส่งมอบ • ระบบรับคืน • ระบบคืนบางส่วน • ระบบติดตามคืนไม่ครบ • ระบบเกินกำหนด • ระบบแจ้งซ่อม • ระบบ Dashboard • ระบบรายงาน PDF และ CSV • ระบบ LINE Messaging API • ระบบ LockService • ระบบ Audit Log • Utility Functions ทั้งหมด ไฟล์ที่ 2 ชื่อ Index.html รวมโค้ดฝั่ง Client ทั้งหมด เช่น • HTML • CSS • JavaScript • หน้า Login • Dashboard • Sidebar • Top Navigation • หน้าเช็คชื่อ • หน้านักเรียน • หน้าบัตรนักเรียนและ QR Code • หน้าสแกนบัตรเพื่อยืมบนมือถือ • หน้าคิวคำขอบนคอมพิวเตอร์ • หน้าส่งมอบอุปกรณ์ • หน้าสแกนบัตรรับคืน • หน้ารายการคืนไม่ครบ • หน้าอุปกรณ์เกินกำหนด • หน้าจัดการอุปกรณ์ • หน้ารายงาน • หน้าตั้งค่า • Modal • Toast • Loading • Confirm Dialog • Chart.js • QR Scanner • Responsive Design ห้ามสร้างไฟล์ CSS หรือ JavaScript แยกเพิ่มเติม • ข้อกำหนดการเขียนโค้ด • ห้ามย่อโค้ด • ห้ามตัดโค้ด • ห้ามใช้ Pseudocode • ห้ามใช้ Placeholder แทนฟังก์ชันจริง • ห้ามเขียนว่า “เพิ่มโค้ดส่วนที่เหลือเอง” • ห้ามเขียนว่า “โค้ดเหมือนเดิม” • ต้องเขียนโค้ดให้ครบทุกฟังก์ชันหลัก • ใส่ Comment ภาษาไทยในส่วนสำคัญ • ตั้งชื่อฟังก์ชันและตัวแปรให้อ่านเข้าใจง่าย • ทุกฟังก์ชันฝั่ง Server ต้องส่งค่ากลับเป็น Object รูปแบบเดียวกัน เช่น success, message และ data • ทุกการเรียก google.script.run ต้องมี Success Handler และ Failure Handler • ปิด Loading ทั้งกรณีสำเร็จและเกิดข้อผิดพลาด • ตรวจสอบข้อมูลว่าง • ตรวจสอบ Sheet ที่ไม่มี • ตรวจสอบ Header ที่ไม่ตรง • ตรวจสอบ ID ของ HTML ให้ตรงกับ JavaScript • ตรวจสอบชื่อฟังก์ชัน Client และ Server ให้ตรงกัน • ป้องกัน Chart.js สร้างกราฟซ้ำ • ป้องกัน QR Scanner เปิดกล้องซ้ำ • ปิดกล้องเมื่อออกจากหน้าสแกน • ป้องกัน setInterval ซ้ำ • หยุด Auto Refresh เมื่อออกจากหน้าคิว • ป้องกันปุ่มกดซ้ำ • ใช้ try-catch-finally ในฟังก์ชันสำคัญ • ใช้ LockService ทุกครั้งที่เปลี่ยนจำนวนอุปกรณ์ • ห้ามส่งข้อมูลสำคัญไปยัง Browser • ใช้ Time Zone Asia/Bangkok • แสดงวันที่แบบ DD/MM/YYYY • ตรวจสอบ Syntax Error ก่อนส่งออก • ตรวจสอบวงเล็บและเครื่องหมายคำพูด • ตรวจสอบ Template Literal • ตรวจสอบฟังก์ชันที่เรียกแต่ไม่ได้ประกาศ • ตรวจสอบกรณีข้อมูลใน Google Sheets ว่าง • รองรับการใช้งานจริงบนโทรศัพท์มือถือ • ข้อมูลเริ่มต้น สร้างฟังก์ชัน setupSystem() เพื่อ • สร้าง Sheet ทุก Sheet • สร้าง Header • ตั้งรูปแบบ Header • Freeze แถวแรก • ตั้ง Time Zone • สร้างข้อมูลตัวอย่างระดับชั้น • สร้างหมวดหมู่อุปกรณ์ตัวอย่าง • สร้างอุปกรณ์ตัวอย่าง • สร้างนักเรียนตัวอย่าง • สร้าง Admin เริ่มต้น บัญชี Admin เริ่มต้นสำหรับทดสอบ Username: admin Password: Admin@1234 ระบบต้องบังคับให้เปลี่ยนรหัสผ่านหลังเข้าสู่ระบบครั้งแรก • รูปแบบ Output ที่ต้องการ ให้สร้างไฟล์จริงจำนวน 2 ไฟล์ ได้แก่ • Code.gs • Index.html หากสภาพแวดล้อมรองรับการสร้างไฟล์ ให้สร้างไฟล์ไว้ในตำแหน่งดังนี้ /mnt/data/Code.gs /mnt/data/Index.html จากนั้นให้แสดงลิงก์ดาวน์โหลดในรูปแบบ ดาวน์โหลด Code.gs ดาวน์โหลด Index.html ห้ามตอบเฉพาะ Code Block หากสามารถสร้างไฟล์ดาวน์โหลดได้ ห้ามรวม Code.gs และ Index.html ไว้ในไฟล์เดียว ห้ามเปลี่ยนชื่อไฟล์ ห้ามสร้างไฟล์อื่นเพิ่มเติม เว้นแต่จะสร้าง ZIP เพิ่มเป็นตัวเลือก โดยต้องมี Code.gs และ Index.html อยู่ภายในครบถ้วน ก่อนส่งไฟล์ ให้ตรวจสอบว่าไฟล์มีอยู่จริงและเปิดอ่านได้ • คำอธิบายหลังสร้างไฟล์ หลังจากแสดงลิงก์ดาวน์โหลด ให้สรุปวิธีใช้งานแบบสั้น ๆ ตามลำดับดังนี้ • สร้าง Google Sheets ใหม่ • เปิดเมนูส่วนขยาย • เลือก Apps Script • วาง Code.gs • สร้างไฟล์ HTML ชื่อ Index • วาง Index.html • รัน setupSystem() • อนุญาตสิทธิ์ • Deploy เป็น Web App • เข้าสู่ระบบด้วยบัญชี Admin เริ่มต้น • เปลี่ยนรหัสผ่าน • ทดสอบเพิ่มนักเรียนและสร้างบัตร QR • เปิดหน้าสแกนบนโทรศัพท์ • เปิดหน้าคิวบนคอมพิวเตอร์ • ทดลองยืมและคืนบางส่วน • การตรวจสอบก่อนส่งคำตอบ ก่อนสร้างไฟล์และส่งคำตอบ ต้องตรวจสอบประเด็นต่อไปนี้ • Code.gs ไม่มี Syntax Error • JavaScript ใน Index.html ไม่มี Syntax Error • ฟังก์ชันที่เรียกทั้งหมดมีการประกาศ • ชื่อ Sheet ตรงกันทุกตำแหน่ง • ชื่อ Column ตรงกันทุกตำแหน่ง • ชื่อฟังก์ชัน Client และ Server ตรงกัน • QR Scanner สามารถเริ่มและหยุดได้ • QR Token ค้นหานักเรียนได้ถูกต้อง • หน้าคิวรีเฟรชทุก 3 วินาที • ไม่สร้าง setInterval ซ้ำ • จำนวนอุปกรณ์ไม่ติดลบ • ไม่สามารถคืนเกินจำนวนคงค้าง • รองรับคืนบางส่วน • รายการคืนไม่ครบแสดงถูกต้อง • กำหนดคืนและจำนวนวันเกินกำหนดคำนวณถูกต้อง • Session และ Role ทำงานถูกต้อง • Loading ปิดทุกกรณี • Modal เปิดและปิดได้ • ปุ่มไม่สามารถกดซ้ำระหว่างประมวลผล • ตารางใช้งานได้บนโทรศัพท์ • หน้าเว็บไม่ล้นจอ • ข้อมูลสำคัญไม่ถูกส่งไปยัง Browser • ไฟล์ Code.gs และ Index.html สามารถดาวน์โหลดได้จริง ห้ามถามคำถามเพิ่มเติม หากรายละเอียดบางส่วนไม่ได้กำหนดไว้ ให้เลือกแนวทางที่ปลอดภัย เหมาะสม และสามารถใช้งานจริงกับ Google Apps Script และ Google Sheets ได้ ผลลัพธ์สุดท้ายต้องเป็นเว็บแอปพลิเคชันที่ผู้เข้าอบรมสามารถดาวน์โหลดไฟล์ Code.gs และ Index.html แล้วนำไปวางใน Google Apps Script เพื่อทดลองใช้งานได้ทันที

ระบบเช็คชื่อนักเรียนและยืม-คืนอุปกรณ์ ออนไลน์

📝 แบบทดสอบหลังเรียน

👁️ Prompt สร้างระบบนักเรียน + อุปกรณ์ QR

📄 Code.gs

🖥️ ข้อมูลเข้าทดลองระบบ

📍 วิธีหา Target ID (User ID / Group ID)

วิธี A — User ID ของตัวเอง (ง่ายสุด เหมาะทดสอบ)

วิธี B — Group ID (ส่งแจ้งเตือนเข้ากลุ่ม)