สรุปขอบข่ายของ "ระบบบันทึกสุขภาพประจำตัวนักเรียน"
สรุปขอบข่ายระบบ (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 ที่ทันสมัย