📊
Dashboard แสดงข้อมูลแจกทรายอะเบท
ตัวอย่าง Apps Script ที่อ่านข้อมูลจาก Google Sheets มาสรุปเป็นแดชบอร์ด — มีการ์ดสรุป ตัวกรองหลายชั้น และรายการที่ควรติดตาม (เกินกำหนดรอบถัดไป / พื้นที่เสี่ยง HI-CI) เหมาะกับงานสาธารณสุขในพื้นที่จริง
🎯 เป้าหมาย: จบบทนี้ ผู้เข้าอบรมจะนำข้อมูลการแจกทรายอะเบทที่มีอยู่ใน Sheets มาทำเป็นเว็บแดชบอร์ด อ่านอย่างเดียว (READ-ONLY) ที่เปิดดูจากมือถือได้ และ Deploy เป็น Web App ใช้จริงได้ทันที
📖 ระบบนี้ทำงานอย่างไร?
เป็น Web App บน Google Apps Script ที่ใช้ Google Sheets เป็นฐานข้อมูล โดยฝั่งเซิร์ฟเวอร์อ่านข้อมูลทั้งชีต แล้วคำนวณสถิติ/สถานะให้ ก่อนส่งไปแสดงผลบนหน้าเว็บ
จุดต่างจากบทเรียนอื่น: ระบบนี้ ไม่เขียนข้อมูลกลับไปที่ชีตเลย — เจ้าหน้าที่ยังกรอกข้อมูลใน Sheets เหมือนเดิม แดชบอร์ดมีหน้าที่ “อ่านมาสรุป” อย่างเดียว จึงปลอดภัยกับข้อมูลจริง
📈 การ์ดสรุป KPI
🔎 ตัวกรองหลายชั้น
⏰ แจ้งเกินกำหนดรอบถัดไป
🦟 เตือนพื้นที่เสี่ยง HI/CI
🗓️ รองรับวันที่ พ.ศ.
🔒 READ-ONLY
📱 Responsive
🧩 Vanilla JS
🔄 ภาพรวมการทำงาน
🧩 ส่วนประกอบหลัก
| ส่วนประกอบ | หน้าที่ |
|---|---|
| Code.gs | ฝั่ง Server — อ่านชีต แปลงวันที่ คำนวณวันครบกำหนด/พื้นที่เสี่ยง แล้วคืน rows + meta |
| Index.html | หน้าเว็บหน้าเดียว — การ์ดสรุป ตัวกรอง ตารางข้อมูล และรายการที่ควรติดตาม |
| getDashboardData() | ฟังก์ชันหลักที่หน้าเว็บเรียกผ่าน google.script.run เพื่อขอข้อมูลทั้งหมด |
| buildFieldMap_() | จับคู่ชื่อหัวคอลัมน์กับฟิลด์ในโค้ด — สลับตำแหน่งคอลัมน์ในชีตได้โดยไม่ต้องแก้โค้ด |
| parseDate_() | อ่านวันที่ได้ทั้ง พ.ศ. และ ค.ศ. (เช่น 06/01/2569) |
⚙️ ค่า CONFIG ที่ปรับได้
| ค่า | ความหมาย |
|---|---|
| SHEET_NAME | ชื่อชีตข้อมูล (ค่าเริ่มต้น ข้อมูลแจกทรายอะเบท) — ถ้าไม่พบจะใช้ชีตแรกอัตโนมัติ |
| SPREADSHEET_ID | เว้นว่างถ้าสคริปต์ผูกกับไฟล์ชีตอยู่แล้ว · ใส่ ID ถ้าเป็นสคริปต์แบบ Standalone |
| NEAR_DUE_DAYS | กี่วันถือว่า “ใกล้ครบกำหนด” รอบแจกถัดไป (ค่าเริ่มต้น 30 วัน) |
| HI_ALERT / CI_ALERT | เกณฑ์พื้นที่เสี่ยง — กรมควบคุมโรคใช้ HI > 10 |
🗄️ คอลัมน์ข้อมูลในชีต
ชีตเดียวจบ ชื่อ ข้อมูลแจกทรายอะเบท — โหลดไฟล์ CSV ตัวอย่าง (75 รายการ) จากเมนู ☰ ไปนำเข้าได้ทันที
| กลุ่ม | คอลัมน์ |
|---|---|
| รายการ | ลำดับ · รหัสรายการ · วันที่แจก · สถานะ · หมายเหตุ |
| พื้นที่ | หมู่ที่ · ชื่อหมู่บ้าน · ตำบล · อำเภอ · จังหวัด |
| การแจก | ชื่อครัวเรือน/ผู้รับ · จำนวนหลังคาเรือน · จำนวนทรายอะเบท (ซอง) · จำนวนภาชนะที่ใส่ทราย |
| ผู้ดำเนินการ | หน่วยงานผู้ดำเนินการ · ชื่อ อสม. ผู้แจก |
| ติดตามผล | รอบการแจก · วันครบกำหนดรอบถัดไป · ค่า HI · ค่า CI |
📥 ไฟล์ตัวอย่างสำหรับดาวน์โหลด
📄Code.gsโค้ดฝั่งเซิร์ฟเวอร์
🖥️Index.htmlหน้าเว็บแดชบอร์ด
📊ข้อมูลตัวอย่าง (CSV)75 รายการ พร้อมนำเข้า Sheets
🤖Prompt สร้างระบบให้ AI ช่วยสร้างระบบนี้
💡 กดที่ Code.gs หรือ Index.html ในเมนู ☰ จะเปิดดูโค้ดเต็มพร้อมปุ่มคัดลอกได้เลย
🎯 ภารกิจ 6 ขั้นตอน