รายละเอียดระบบ

ระบบประเมินผลการปฏิบัติงานบุคลากร
❌ ไม่อนุญาตให้นำไปจำหน่ายนะคะ
สรุปภาพรวมการทำงานของโค้ดในหน้า Canvas (Index.html) ให้ฟังแบบเข้าใจง่ายค่ะ 👇
💻 ระบบนี้เป็น “หน้าจอผู้ใช้งาน (Frontend/UI)” ของระบบประเมินผล ซึ่งแบ่งการทำงานออกเป็น 3 ส่วนหลัก
🔹 1. ส่วนแสดงผล (UI & Layout)
หน้าเว็บถูกออกแบบด้วย HTML และ Tailwind CSS ทำให้หน้าตาสวยงาม รองรับทุกอุปกรณ์ทั้งมือถือและคอมพิวเตอร์ (Responsive)
ใช้ฟอนต์ “Sarabun” จาก Google Fonts เพื่อความเป็นทางการ อ่านง่าย
ปุ่มให้คะแนน 1-5 มีการใช้ JavaScript ช่วยสร้างแบบอัตโนมัติ ลดโค้ดซ้ำ ทำให้โค้ดดูสะอาดและเป็นระเบียบมากขึ้น
🔹 2. ส่วนฟอร์มรับข้อมูล (Form Inputs)
มีช่องกรอกข้อมูลสำคัญ เช่น
- ชื่อผู้ประเมิน
- ผู้ถูกประเมิน
- แบบประเมิน 4 ด้าน (ความรับผิดชอบ / คุณภาพงาน / การทำงานเป็นทีม / ความคิดริเริ่ม)
- ช่องข้อเสนอแนะเพิ่มเติม
พร้อมปุ่ม “บันทึกผล” ที่มี Loading Spinner ซ่อนไว้ เพื่อแสดงสถานะตอนส่งข้อมูล
🔹 3. ส่วนประมวลผล (JavaScript Logic)
เมื่อกด “บันทึก”
ระบบจะไม่รีเฟรชหน้า (e.preventDefault())
และแสดง Loading เพื่อให้ผู้ใช้รู้ว่าระบบกำลังทำงาน
จากนั้นจะรวบรวมข้อมูลทั้งหมดเป็น Object แล้วส่งไปยังฝั่ง Server (Code.gs) ด้วยคำสั่ง google.script.run เพื่อนำไปบันทึกลง Google Sheet
📌 ผลลัพธ์:
✅ ถ้าสำเร็จ → แจ้งเตือนด้วย SweetAlert2 + ล้างฟอร์ม
❌ ถ้าผิดพลาด → แจ้งเตือน Error ให้ผู้ใช้ทราบทันที
🎯 จุดเด่นของระบบนี้
✔ ใช้งานง่าย ไม่ต้องมีเซิร์ฟเวอร์
✔ ทำงานบน Google ทั้งระบบ
✔ เหมาะกับโรงเรียน/องค์กรที่ต้องการระบบประเมินแบบรวดเร็ว