🎉 Prompt!! ระบบบันทึกเวลาเรียน (Student Attendance System) !!
👇 คัดลอก Prompt ไปใช้ได้เลยครับ 👇
(นำไปพัฒนาและต่อยอดได้)
#Prompt #Gemini #GoogleAppsScript #education #school #Coding #KRUSB
โต้ตอบเป็นภาษาไทย
เนื่องจากคุณคือผู้เชี่ยวชาญในการสร้าง Web App ด้วย Google App Script
ช่วยสร้าง Web App ด้วย Google App Script แบบละเอียด และบันทึกฐานข้อมูลลงใน Google Sheet ตามแนวคิดดังนี้
📌 1. ข้อมูลทั่วไปของระบบ
- ชื่อระบบ: ระบบบันทึกเวลาเรียน (Student Attendance System)
- รูปแบบ: Single Page Website (SPA)
🔐 2. หน้าเข้าสู่ระบบ (Login)
- รองรับผู้ใช้งาน 3 ระดับ: ผู้ดูแลระบบ (Admin), ฝ่ายวิชาการ (Academic) และ ครูประจำชั้น (Teacher)
- ข้อมูลที่ใช้เข้าสู่ระบบ: Username และ Password
🛠️ 3. หน้าสำหรับผู้ดูแลระบบ (Admin) และ ฝ่ายวิชาการ (Academic)
ประกอบด้วยเมนูทางซ้ายมือ (Active Menu) ดังนี้:
3.1 เมนูหน้าแรก (Dashboard)
- Card สรุปตัวเลข: จำนวนนักเรียนทั้งหมด, มาเรียนวันนี้, ขาดเรียนวันนี้, สายวันนี้
- กราฟ (Chart.js): แบบ Line แสดงสถิติการมาเรียนรายสัปดาห์, แบบ Doughnut แสดงสัดส่วนสถานะการมาเรียนวันนี้, และ แบบ Bar แสดงนักเรียนกลุ่มเสี่ยง (ขาด/ลา/ป่วยบ่อย)
3.2 เมนูบันทึกเวลาเรียน
- Dropdown เลือกห้องเรียน และฟอร์มเลือกวันที่ (Datepicker)
- ปุ่ม Quick Action ด้านบน: เช็คมาทุกคน, เช็คขาดทุกคน เพื่อความรวดเร็ว
- ตารางรายชื่อนักเรียน พร้อมปุ่มสถานะ (มา, ขาด, สาย, ลา, ป่วย) กดแล้วเปลี่ยนสีสถานะ (Active) ได้ทันที และมีช่องไอคอนสำหรับกรอกหมายเหตุ
- มีปุ่ม "บันทึกทั้งหมด" เพื่ออัปเดตข้อมูลลง Google Sheet แบบกลุ่ม (Batch) ในครั้งเดียว
3.3 เมนูจัดการข้อมูลนักเรียน
- ตารางแสดงข้อมูล: ลำดับที่ (สร้างอัตโนมัติ), รหัสนักเรียน, คำนำหน้า, ชื่อ-นามสกุล, ห้องเรียน, เลขที่, เพศ
- คอลัมน์ "จัดการ": มีไอคอนอัปเดตแก้ไข และ ไอคอนลบ
- ฟังก์ชัน: เพิ่ม, ลบ, แก้ไข ข้อมูลนักเรียนได้ (ผ่าน Modal)
- ฟอร์มกรองข้อมูลด้านบนตาราง: ค้นหาชื่อ/รหัส, Dropdown ค้นหาห้องเรียน
3.4 เมนูจัดการปฏิทินและเวลาเรียน
- ฟังก์ชันกำหนดช่วง วันเปิด-ปิด ภาคเรียนที่ 1 และ 2 ของแต่ละปีการศึกษา
- ฟังก์ชัน เพิ่ม/ลบ วันหยุดราชการ, วันหยุดพิเศษ, และ วันเรียนชดเชย
3.5 เมนูรายงานสรุป
- เลือกดูรายงานแบบ "รายเดือน" หรือ "รายภาคเรียน"
- มี Dropdown เลือกห้องเรียน, เดือน, และปีการศึกษา
- ตารางแสดงผลสรุปจำนวนวัน มา, ขาด, ลา, สาย, ป่วย ของนักเรียนแต่ละคน และคิดเป็นเปอร์เซ็นต์ (%)
3.6 เมนูจัดการผู้ใช้งาน (User Management - แสดงเฉพาะ Admin)
- ตารางจัดการข้อมูลผู้ใช้: Username, Password, ชื่อ-นามสกุล, สิทธิ์การใช้งาน, ห้องเรียนประจำชั้น
- ฟังก์ชัน: เพิ่ม, ลบ, แก้ไข ข้อมูลผู้ใช้งานได้
👩🏫 4. หน้าสำหรับครูประจำชั้น (Teacher)
- เมนูหน้าแรก (Dashboard): แสดงสถิติและกราฟ เฉพาะห้องเรียนของตนเอง
- เมนูข้อมูลส่วนตัว: สามารถแก้ไข ชื่อ-นามสกุล และ รหัสผ่าน ได้
- เมนูบันทึกเวลาเรียน: ล็อกให้แสดงเฉพาะนักเรียนในห้องเรียนของตนเอง ไม่ต้องมี Dropdown เลือกห้อง
- เมนูจัดการข้อมูลนักเรียน: ดูและแก้ไขได้เฉพาะข้อมูลนักเรียนในห้องของตนเอง
- เมนูรายงานสรุป: ดูรายงานได้เฉพาะห้องเรียนของตนเอง
🎨 5. รูปแบบ UI/UX และเทคนิค
- ใช้ Font Kanit จาก Google Fonts
- UI Style Modern, Responsive, สวยงามทันสมัย และประดับด้วย Icon/อิโมจิให้เหมาะสม
- จัด Layout ให้สวยงาม ใช้งานง่าย มี Loading Spin ในทุกกระบวนการดึงหรือบันทึกข้อมูล
- การกดปุ่ม เพิ่ม/แก้ไข ข้อมูล ให้แสดงผลในรูปแบบ Pop-up Modal
- การลบข้อมูล ให้ใช้ SweetAlert2 Confirm และแจ้งเตือนผลการทำงาน (Success/Error) ด้วย SweetAlert หรือ Toast
- ตกแต่งสถานะต่างๆ ในตารางด้วย Badge สีสันชัดเจน
- Table ให้มี Overflow-x สำหรับรองรับการเลื่อนดูบนหน้าจอมือถือ
- รูปแบบเมนู (Sidebar) อยู่ด้านซ้ายมือ เมื่อเปิดในหน้าจอมือถือ (Responsive) ให้ซ่อนเมนู และมีปุ่ม Hamburger คลิกเพื่อเปิดสไลด์เมนูออกมา
- Theme Color: สีหลักคือ น้ำเงินเข้ม (#1E40AF) และ ขาว / สีสถานะ: มา (เขียว #10B981), ขาด (แดง #EF4444), สาย (ส้ม #F59E0B)
