ระบบบันทึกสุขภาพประจำตัวนักเรียน (Student Health Record System)

สรุปขอบข่ายของ "ระบบบันทึกสุขภาพประจำตัวนักเรียน"
สรุปขอบข่ายระบบ (System Scope)
ระบบนี้เป็นเว็บแอปพลิเคชันแบบ Single Page Application (SPA) ที่พัฒนาด้วย Google Apps Script โดยใช้ Google Sheets เป็นฐานข้อมูลหลัก มีวัตถุประสงค์เพื่อบันทึก ติดตาม และแสดงผลข้อมูลสุขภาพของนักเรียนผ่านแดชบอร์ด

1. เทคโนโลยีหลัก (Core Technology)
Backend: Google Apps Script (Code.gs)

Database: Google Sheets (ชีต users และ health_records)

Frontend: HTML, CSS, และ JavaScript

ไลบรารี (Libraries):

Bootstrap 5: สำหรับโครงสร้างหน้าเว็บ (UI/UX) และการรองรับมือถือ (Responsive)

jQuery: สำหรับการจัดการ DOM และการเรียกใช้งาน (Events)

Chart.js: สำหรับการสร้างกราฟทั้ง 3 รูปแบบ (เส้น, แท่ง, วงกลม)

SweetAlert2: สำหรับการแจ้งเตือน (เช่น ยืนยันการลบ, แสดงสถานะโหลด)

2. บทบาทผู้ใช้งาน (User Roles)
ระบบรองรับการเข้าใช้งาน 3 ระดับ (กำหนดในชีต users):

admin (ผู้ดูแลระบบ): สามารถเข้าถึงเมนูพิเศษ (เช่น การตั้งค่า) และจัดการข้อมูลทั้งหมด

teacher (ครู): สามารถเข้าดูแดชบอร์ดและจัดการข้อมูลนักเรียน

student (นักเรียน): (ในระบบนี้ยังไม่ได้จำกัดสิทธิ์ แต่โครงสร้างรองรับไว้แล้ว)

3. ขอบข่ายการทำงานหลัก (Key Features)
A. ระบบยืนยันตัวตน (Authentication)
หน้า Homepage: แสดงข้อมูลเบื้องต้นของระบบ และ Carousel Slide

หน้า Login: สำหรับกรอก Username/Password เพื่อเข้าสู่ระบบ

การจัดการ Session: ใช้ sessionStorage เพื่อเก็บข้อมูลผู้ใช้ ทำให้ "ไม่หลุดเมื่อรีเฟรชหน้า"

Logout: ฟังก์ชันออกจากระบบเพื่อเคลียร์ Session

B. หน้าแดชบอร์ด (Dashboard)
เป็นหน้าแสดงผลข้อมูลสุขภาพ โดยมีองค์ประกอบดังนี้:

Box สรุปข้อมูล (Info Boxes):

ข้อมูลทั้งหมด (จำนวนนักเรียน)

น้ำหนักเฉลี่ย

ส่วนสูงเฉลี่ย

จำนวนผู้มีไข้

กราฟ 3 รูปแบบ (Charts):

กราฟเส้น: แสดงแนวโน้มอุณหภูมิ

กราฟแท่ง: แสดงน้ำหนักเฉลี่ยตามชั้นเรียน

กราฟวงกลม: แสดงสัดส่วนนักเรียนในแต่ละชั้น

ตัวกรองข้อมูล (Filters):

สามารถกรองข้อมูลในแดชบอร์ดตาม "ชั้นเรียน"

แถบความคืบหน้า (Progress Bar):

แสดงสถานะความคืบหน้าเมื่อมีการโหลดข้อมูลจาก Server

C. การจัดการข้อมูล (CRUD Operations)
Read (อ่าน): แสดงข้อมูลสุขภาพทั้งหมดในรูปแบบตาราง (Responsive)

Create (เพิ่ม): เพิ่มข้อมูลสุขภาพนักเรียนใหม่ผ่าน Modal (Popup)

Update (แก้ไข): แก้ไขข้อมูลนักเรียนรายบุคคลผ่าน Modal เดียวกัน

Delete (ลบ): ลบข้อมูลนักเรียน พร้อมการยืนยัน (Confirm SweetAlert)

D. ประสบการณ์ผู้ใช้ (UX/UI)
Responsive Design: รองรับการแสดงผลทั้งบนคอมพิวเตอร์และมือถือ

Loading Status: มี SweetAlert "กำลังโหลด..." แสดงทุกครั้งที่ติดต่อกับ Server (แก้ปัญหาหน้าขาว/ผู้ใช้ไม่รู้ว่าระบบกำลังทำงาน)

Modern UI: ใช้สีโทนเขียวตามที่กำหนด, ปุ่มแบบ Gradient, และ Card-Header ที่ทันสมัย