🏆
MOU Executive Dashboard
เว็บแอปสรุปความร่วมมือ MOU ที่ดึงข้อมูลสดจาก Google Sheets — สร้างด้วย Google Apps Script (ตัวอย่างจริงจากบทเรียน “สอนทำ Apps Script”)
🖼️ ภาพผลงาน (Desktop & Mobile)
📖 สรุปการทำงานของโค้ด
เว็บแอปนี้แยกเป็น 2 ไฟล์ที่ทำงานคู่กัน — Code.gs (ฝั่งเซิร์ฟเวอร์) อ่านข้อมูล และ Index.html (ฝั่งหน้าเว็บ) แสดงผล
👤 ผู้ใช้เปิดลิงก์→
doGet() ส่ง Index.html→
หน้าเว็บเรียก getAllDashboardData()→
Code.gs อ่าน Google Sheets→
ส่ง JSON กลับ→
วาดการ์ด/กราฟ/ตาราง
⚙️ Code.gs — ฝั่งเซิร์ฟเวอร์ (อ่านข้อมูล)
- CONFIG — ตั้งค่ากลาง: ชื่อ 2 ชีต, เขตเวลา, เกณฑ์ “ใกล้หมดอายุ” 180 วัน และผังตำแหน่งคอลัมน์
- doGet() — ประตูเข้าเว็บแอป คืนหน้า Index.html ให้ผู้ใช้
- getAllDashboardData() — ฟังก์ชันหลักที่หน้าเว็บเรียก อ่านทั้ง 2 ชีตแล้วส่งกลับเป็น { mou, industry, meta }
- getSheetByFlexibleName_() — หาแท็บแบบยืดหยุ่น (ตัดช่องว่าง/ไม่สนตัวพิมพ์) กันปัญหา “ไม่พบชีต”
- findHeaderIndex_() — จับคู่หัวคอลัมน์อัตโนมัติจากชื่อ (เผื่อสลับคอลัมน์)
- buildMouRecord_ / buildIndustryRecord_ — แปลงแต่ละแถวเป็นข้อมูล + จัดกลุ่ม (สถานะ, DOM/INT, Cluster) + คำนวณวันหมดอายุ
- ตัวช่วยแปลงวันที่ พ.ศ./ค.ศ. และนับจำนวนต่างๆ — อ่านอย่างเดียว ไม่เขียนกลับลงชีต
🖥️ Index.html — ฝั่งหน้าเว็บ (แสดงผล)
- โหลด Google Charts แล้วเรียกข้อมูลด้วย google.script.run...getAllDashboardData()
- มี 2 แท็บ: “ภาพรวมความร่วมมือ MOU” และ “MoU ภาคอุตสาหกรรม” (switchPage())
- ตัวกรอง + ค้นหา — กรองตามสถานะ/ปีงบ/Cluster ฯลฯ แล้วคำนวณใหม่ทันที (applyMouFilters())
- การ์ด KPI — รวมจำนวน MOU, มีผลบังคับใช้, หมดอายุ, ใกล้หมดอายุ ฯลฯ (renderMouMetrics())
- กราฟ — วงกลม/แท่ง/คอลัมน์ ด้วย Google Charts (drawPieChart / drawBarChart / drawColumnChart)
- ตารางแจ้งเตือน — รายการ MOU ที่หมด/ใกล้หมดอายุ พร้อม badge สี
- รองรับทั้ง Desktop และ Mobile (ปรับ layout อัตโนมัติ)