คุณเป็นผู้เชี่ยวชาญด้าน Google Apps Script, Google Sheets, HTML, CSS และ JavaScript
จงสร้างเว็บแอปพลิเคชันชื่อ
“ระบบเช็คชื่อนักเรียนแบบง่าย”
ระบบนี้จัดทำเพื่อเป็นตัวอย่างสำหรับผู้เริ่มต้นเรียน Google Apps Script จึงต้องเขียนโค้ดให้อ่านง่าย ไม่ซับซ้อน และมี Comment ภาษาไทยอธิบายส่วนสำคัญ
วัตถุประสงค์ของระบบ
	•	จัดการรายชื่อนักเรียนแบบง่าย
	•	เช็คชื่อนักเรียนรายวันในห้องเรียน
	•	บันทึกข้อมูลลง Google Sheets
	•	ดูประวัติการเช็คชื่อย้อนหลัง
	•	รองรับโทรศัพท์มือถือ แท็บเล็ต และคอมพิวเตอร์
เทคโนโลยีที่ใช้
	•	Google Apps Script Web App
	•	Google Sheets เป็นฐานข้อมูล
	•	HTML
	•	CSS
	•	Vanilla JavaScript
	•	google.script.run
	•	Responsive Design
	•	ระบบจัดการรายชื่อนักเรียน
ระบบต้องสามารถดำเนินการดังนี้
	•	เพิ่มนักเรียน
	•	แสดงรายชื่อนักเรียนทั้งหมด
	•	แสดงรายชื่อตามห้องเรียน
	•	เรียงรายชื่อตามห้องเรียนและเลขที่
	•	ป้องกันเลขที่ซ้ำในห้องเรียนเดียวกัน
	•	ลบนักเรียนด้วยการเปลี่ยนสถานะเป็น INACTIVE
	•	ไม่ลบข้อมูลจริง เพื่อรักษาประวัติการเช็คชื่อเดิม
ข้อมูลนักเรียนประกอบด้วย
	•	รหัสนักเรียน
	•	ชื่อ-นามสกุล
	•	ห้องเรียน
	•	เลขที่
	•	สถานะ
	•	วันที่สร้างข้อมูล
	•	ระบบเช็คชื่อรายวัน
ระบบต้องสามารถดำเนินการดังนี้
	•	เลือกวันที่
	•	เลือกห้องเรียน
	•	โหลดรายชื่อนักเรียนตามห้องเรียน
	•	แสดงเลขที่ รหัสนักเรียน และชื่อ-นามสกุล
	•	เลือกสถานะของนักเรียนแต่ละคน
	•	เพิ่มหมายเหตุรายบุคคล
	•	มีปุ่ม “มาเรียนทั้งหมด”
	•	บันทึกข้อมูลพร้อมกันทั้งห้อง
	•	แสดง Loading ระหว่างบันทึก
	•	แสดงข้อความเมื่อบันทึกสำเร็จ
	•	แสดงข้อความเมื่อเกิดข้อผิดพลาด
	•	ป้องกันการกดปุ่มบันทึกซ้ำ
สถานะการเช็คชื่อประกอบด้วย
	•	มาเรียน
	•	ขาดเรียน
	•	ลาป่วย
	•	ลากิจ
	•	มาสาย
กฎการบันทึกเช็คชื่อ
	•	นักเรียนหนึ่งคนต้องมีข้อมูลเช็คชื่อได้เพียงหนึ่งรายการต่อวัน
	•	หากนักเรียนคนเดิมและวันเดิมมีข้อมูลอยู่แล้ว ให้แก้ไขแถวเดิม
	•	ห้ามเพิ่มข้อมูลซ้ำเป็นแถวใหม่
	•	ต้องบันทึกวันที่และเวลาที่ทำรายการ
	•	ต้องตรวจสอบข้อมูลจากฝั่ง Google Apps Script ก่อนบันทึก
	•	การ์ดสรุปการเช็คชื่อ
หน้าเช็คชื่อต้องมีการ์ดสรุปดังนี้
	•	นักเรียนทั้งหมด
	•	มาเรียน
	•	ขาดเรียน
	•	ลาป่วย
	•	ลากิจ
	•	มาสาย
เมื่อผู้ใช้เปลี่ยนสถานะของนักเรียน ตัวเลขสรุปต้องเปลี่ยนตามทันที
	•	ระบบประวัติการเช็คชื่อ
ระบบต้องสามารถดำเนินการดังนี้
	•	ดูประวัติการเช็คชื่อย้อนหลัง
	•	กรองตามวันที่
	•	กรองตามห้องเรียน
	•	แสดงข้อมูลล่าสุดไม่เกิน 200 รายการ
ข้อมูลในตารางประวัติประกอบด้วย
	•	วันที่
	•	รหัสนักเรียน
	•	ชื่อ-นามสกุล
	•	ห้องเรียน
	•	สถานะ
	•	หมายเหตุ
	•	วันที่และเวลาที่บันทึก
	•	โครงสร้าง Google Sheets
ให้ระบบสร้าง Google Sheets และหัวตารางโดยอัตโนมัติเมื่อรันฟังก์ชัน setupSystem()
ชีต Students
StudentID | FullName | ClassRoom | StudentNumber | Status | CreatedAt
ความหมายของแต่ละคอลัมน์
	•	StudentID คือรหัสนักเรียนที่ระบบสร้างให้อัตโนมัติ
	•	FullName คือชื่อ-นามสกุล
	•	ClassRoom คือห้องเรียน
	•	StudentNumber คือเลขที่
	•	Status คือสถานะ ACTIVE หรือ INACTIVE
	•	CreatedAt คือวันที่สร้างข้อมูล
ชีต Attendance
AttendanceID | Date | StudentID | FullName | ClassRoom | AttendanceStatus | Note | RecordedAt
ความหมายของแต่ละคอลัมน์
	•	AttendanceID คือรหัสรายการเช็คชื่อ
	•	Date คือวันที่เช็คชื่อ
	•	StudentID คือรหัสนักเรียน
	•	FullName คือชื่อ-นามสกุล
	•	ClassRoom คือห้องเรียน
	•	AttendanceStatus คือสถานะเช็คชื่อ
	•	Note คือหมายเหตุ
	•	RecordedAt คือวันที่และเวลาที่บันทึก
	•	ฟังก์ชัน setupSystem()
ให้สร้างฟังก์ชัน setupSystem() สำหรับดำเนินการดังนี้
	•	ตั้ง Time Zone เป็น Asia/Bangkok
	•	สร้างชีต Students หากยังไม่มี
	•	สร้างชีต Attendance หากยังไม่มี
	•	สร้างหัวตารางของแต่ละชีต
	•	Freeze แถวหัวตาราง
	•	กำหนดสีพื้นหลังหัวตารางเป็นสีน้ำเงิน
	•	กำหนดข้อความหัวตารางเป็นสีขาว
	•	ปรับความกว้างคอลัมน์อัตโนมัติ
	•	สร้างนักเรียนตัวอย่าง 3 คนในห้อง ม.1/1 หากยังไม่มีข้อมูล
ข้อมูลตัวอย่าง
	•	เด็กชายสมชาย ใจดี ห้อง ม.1/1 เลขที่ 1
	•	เด็กหญิงสมหญิง เรียนดี ห้อง ม.1/1 เลขที่ 2
	•	เด็กชายมานะ ขยันดี ห้อง ม.1/1 เลขที่ 3
	•	ฟังก์ชันใน Code.gs
ไฟล์ Code.gs ต้องมีฟังก์ชันหลักอย่างน้อยดังนี้
doGet()
	•	เปิดไฟล์ Index.html
	•	กำหนดชื่อหน้าเว็บว่า “ระบบเช็คชื่อนักเรียน”
setupSystem()
	•	สร้างชีตและข้อมูลตัวอย่าง
getInitialData()
	•	โหลดข้อมูลนักเรียน
	•	โหลดรายชื่อห้องเรียน
	•	ส่งวันที่ปัจจุบันกลับไปยังหน้าเว็บ
getStudents(classRoom)
	•	โหลดนักเรียนทั้งหมด
	•	กรองตามห้องเรียนเมื่อมีการส่งชื่อห้องมา
	•	เรียงตามห้องเรียนและเลขที่
saveStudent(student)
	•	เพิ่มข้อมูลนักเรียน
	•	ตรวจสอบข้อมูลว่าง
	•	ตรวจสอบเลขที่ซ้ำในห้องเรียนเดียวกัน
	•	สร้างรหัสนักเรียนอัตโนมัติ
	•	ใช้ LockService ป้องกันการบันทึกพร้อมกัน
deleteStudent(studentId)
	•	ค้นหานักเรียนจาก StudentID
	•	เปลี่ยน Status เป็น INACTIVE
	•	ไม่ลบแถวข้อมูลจริง
	•	ใช้ LockService
getAttendance(dateText, classRoom)
	•	โหลดนักเรียนตามห้องเรียน
	•	ตรวจสอบข้อมูลเช็คชื่อที่เคยบันทึกในวันที่เลือก
	•	หากยังไม่มีข้อมูล ให้กำหนดค่าเริ่มต้นเป็น “มาเรียน”
saveAttendance(payload)
	•	รับวันที่ ห้องเรียน และรายชื่อนักเรียน
	•	ตรวจสอบสถานะที่อนุญาต
	•	หากมีข้อมูลของนักเรียนในวันเดิม ให้แก้ไขแถวเดิม
	•	หากยังไม่มีข้อมูล ให้เพิ่มแถวใหม่
	•	ใช้ LockService
	•	ป้องกันการบันทึกข้อมูลซ้ำ
getAttendanceHistory(filters)
	•	โหลดประวัติการเช็คชื่อ
	•	กรองตามวันที่
	•	กรองตามห้องเรียน
	•	ส่งกลับไม่เกิน 200 รายการ
	•	ฟังก์ชันช่วยใน Code.gs
ต้องมีฟังก์ชันช่วยสำหรับ
	•	สร้างชีตหากยังไม่มี
	•	ตรวจสอบว่ามีชีตหรือไม่
	•	อ่านข้อมูล Google Sheets แล้วแปลงเป็น Object
	•	สร้าง Header Map
	•	สร้างรหัสที่ไม่ซ้ำ
	•	ทำความสะอาดข้อความ
	•	จัดรูปแบบวันที่
	•	จัดรูปแบบวันที่และเวลา
	•	ส่งผลลัพธ์กลับในรูปแบบเดียวกัน
ผลลัพธ์ทุกฟังก์ชันควรอยู่ในรูปแบบ
{ success: true หรือ false, message: ข้อความแจ้งผล, data: ข้อมูล }
	•	หน้า Index.html
ไฟล์ Index.html ต้องรวมทั้งหมดไว้ในไฟล์เดียว ได้แก่
	•	HTML
	•	CSS
	•	JavaScript
ห้ามแยกไฟล์ CSS หรือ JavaScript เพิ่ม
หน้าเว็บต้องมีเมนูแบบ Tab จำนวน 3 เมนู
	•	เช็คชื่อรายวัน
	•	รายชื่อนักเรียน
	•	ประวัติการเช็คชื่อ
	•	หน้าเช็คชื่อรายวัน
ต้องมีส่วนประกอบดังนี้
	•	ช่องเลือกวันที่
	•	ช่องเลือกห้องเรียน
	•	ปุ่มโหลดรายชื่อ
	•	ปุ่มมาเรียนทั้งหมด
	•	ปุ่มบันทึกเช็คชื่อ
	•	การ์ดสรุปสถานะ
	•	ตารางรายชื่อนักเรียน
	•	Dropdown เลือกสถานะ
	•	ช่องหมายเหตุรายบุคคล
	•	หน้ารายชื่อนักเรียน
ต้องมีแบบฟอร์มเพิ่มนักเรียนประกอบด้วย
	•	ชื่อ-นามสกุล
	•	ห้องเรียน
	•	เลขที่
	•	ปุ่มเพิ่มนักเรียน
ต้องมีตารางแสดง
	•	ห้องเรียน
	•	เลขที่
	•	รหัสนักเรียน
	•	ชื่อ-นามสกุล
	•	ปุ่มลบ
ก่อนลบนักเรียนต้องแสดง Confirm Dialog
	•	หน้าประวัติการเช็คชื่อ
ต้องมี
	•	ช่องเลือกวันที่
	•	ช่องเลือกห้องเรียน
	•	ปุ่มค้นหา
	•	ปุ่มล้างตัวกรอง
	•	ตารางประวัติการเช็คชื่อ
	•	การออกแบบหน้าเว็บ
ใช้รูปแบบ Modern แบบเรียบง่าย
สีหลัก
	•	สีน้ำเงิน #2563EB
	•	สีเขียว #10B981
	•	สีแดง #EF4444
	•	สีพื้นหลัง #F8FAFC
	•	สีข้อความหลัก #0F172A
	•	สีข้อความรอง #64748B
ลักษณะการออกแบบ
	•	ใช้ Font Sarabun
	•	Header แบบ Gradient
	•	การ์ดมุมโค้ง
	•	เงานุ่ม
	•	ปุ่มกดง่าย
	•	ตารางมีเส้นแบ่งชัดเจน
	•	ตารางเลื่อนแนวนอนได้บนมือถือ
	•	รองรับโทรศัพท์มือถือและคอมพิวเตอร์
	•	ห้ามหน้าเว็บล้นหน้าจอ
	•	Loading และการแจ้งเตือน
ต้องมี Loading Overlay ระหว่าง
	•	โหลดข้อมูล
	•	เพิ่มนักเรียน
	•	ลบนักเรียน
	•	บันทึกเช็คชื่อ
	•	โหลดประวัติ
ต้องมี Toast Notification สำหรับ
	•	บันทึกสำเร็จ
	•	เพิ่มนักเรียนสำเร็จ
	•	ลบนักเรียนสำเร็จ
	•	ข้อมูลไม่ครบ
	•	เกิดข้อผิดพลาด
ทุกการเรียก google.script.run ต้องมี
	•	withSuccessHandler()
	•	withFailureHandler()
	•	ข้อกำหนดการเขียนโค้ด
	•	เขียนโค้ดให้อ่านง่ายและเหมาะกับผู้เริ่มต้น
	•	ใส่ Comment ภาษาไทยในส่วนสำคัญ
	•	ห้ามย่อโค้ด
	•	ห้ามใช้ Pseudocode
	•	ห้ามใช้ Placeholder แทนโค้ดจริง
	•	ห้ามเขียนว่า “เพิ่มโค้ดส่วนที่เหลือเอง”
	•	ห้ามเขียนว่า “โค้ดเหมือนเดิม”
	•	ต้องเขียนฟังก์ชันหลักให้ครบ
	•	ป้องกันการกดปุ่มซ้ำระหว่างประมวลผล
	•	ปิด Loading ทั้งกรณีสำเร็จและผิดพลาด
	•	ตรวจสอบข้อมูลว่าง
	•	ป้องกันการบันทึกเช็คชื่อซ้ำ
	•	ใช้ LockService ตอนเพิ่มนักเรียน ลบนักเรียน และบันทึกเช็คชื่อ
	•	ใช้ Time Zone Asia/Bangkok
	•	ตรวจสอบชื่อฟังก์ชัน Client และ Server ให้ตรงกัน
	•	ตรวจสอบ ID ของ HTML ให้ตรงกับ JavaScript
	•	ตรวจสอบ Syntax Error ก่อนส่งออก
	•	โครงสร้างไฟล์
สร้างไฟล์เพียง 2 ไฟล์
ไฟล์ที่ 1 ชื่อ Code.gs
รวมโค้ด Google Apps Script ฝั่ง Server ทั้งหมด
ไฟล์ที่ 2 ชื่อ Index.html
รวม HTML, CSS และ JavaScript ฝั่งหน้าเว็บทั้งหมด
ห้ามเปลี่ยนชื่อไฟล์
ห้ามสร้างไฟล์ CSS หรือ JavaScript แยกเพิ่มเติม
	•	รูปแบบ Output
ให้สร้างไฟล์จริงไว้ที่
/mnt/data/Code.gs
/mnt/data/Index.html
จากนั้นแสดงลิงก์ดาวน์โหลดในรูปแบบ
ดาวน์โหลด Code.gs
ดาวน์โหลด Index.html
ห้ามตอบเฉพาะ Code Block หากสภาพแวดล้อมสามารถสร้างไฟล์ดาวน์โหลดได้
ก่อนส่งคำตอบ ให้ตรวจสอบว่าไฟล์ทั้งสองมีอยู่จริงและเปิดอ่านได้
	•	วิธีใช้งานหลังสร้างไฟล์
อธิบายวิธีใช้งานแบบสั้น ๆ ตามลำดับ
	•	สร้าง Google Sheets ใหม่
	•	เปิดเมนู Extensions หรือส่วนขยาย
	•	เลือก Apps Script
	•	วางโค้ด Code.gs
	•	สร้างไฟล์ HTML ชื่อ Index
	•	วางโค้ด Index.html
	•	บันทึกโปรเจกต์
	•	รันฟังก์ชัน setupSystem()
	•	อนุญาตสิทธิ์การเข้าถึง Google Sheets
	•	เลือก Deploy
	•	เลือก New deployment
	•	เลือก Web app
	•	กำหนด Execute as เป็น Me
	•	เปิดลิงก์ Web App เพื่อทดสอบ
ห้ามถามคำถามเพิ่มเติม
หากรายละเอียดบางส่วนไม่ได้กำหนด ให้เลือกแนวทางที่ง่าย ปลอดภัย และเหมาะสำหรับผู้เริ่มต้นเรียน Google Apps Script