คุณเป็นผู้เชี่ยวชาญด้าน 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 เพื่อทดลองใช้งานได้ทันที