⚙️
ดึงข้อมูลจาก Google Sheets มาทำ Dashboard
สร้าง Web App ด้วย Google Apps Script — เขียนโค้ดฝั่งเซิร์ฟเวอร์ + หน้าเว็บ แล้วเผยแพร่เป็นลิงก์ ฟรี ไม่ต้องมีเซิร์ฟเวอร์เอง
🎯 เป้าหมาย: จบบทนี้ น้องจะทำ Dashboard เว็บแอป ที่ดึงข้อมูลสดจาก Google Sheets มาแสดงเป็นการ์ดตัวเลข + กราฟ แล้วได้ลิงก์เปิดใช้จริง
🗺️ ภาพรวมขั้นตอนทั้งหมด
ดูภาพรวมขั้นตอนทั้งหมดก่อนเริ่ม แล้วค่อยทำตามทีละข้อด้านล่าง
📖 Apps Script Web App คืออะไร?
Google Apps Script คือการเขียน JavaScript ที่รันบนเซิร์ฟเวอร์ของ Google ทำให้เว็บของเรา "คุยกับ" Google Sheets / Gmail / Drive ได้ — เผยแพร่เป็น Web App ที่เปิดผ่านลิงก์ได้เลย ไม่ต้องเช่าเซิร์ฟเวอร์
ตัวอย่างในบทนี้คือ Dashboard สรุป "ความร่วมมือ MOU" ที่อ่านข้อมูลจาก Google Sheets มาแสดง (อ่านอย่างเดียว ไม่แก้ไขข้อมูลจริง)
| ส่วนประกอบ | หน้าที่ |
|---|---|
| Code.gs | ฝั่งเซิร์ฟเวอร์ — อ่านข้อมูลจาก Sheets ด้วย SpreadsheetApp และมี doGet() คืนหน้าเว็บ |
| Index.html | ฝั่งหน้าเว็บ — แสดง KPI/กราฟ/ตาราง (HTML + CSS + JS) |
| google.script.run | สะพานเชื่อม — ให้หน้าเว็บเรียกฟังก์ชันใน Code.gs เพื่อขอข้อมูล |
🎯 ภารกิจ 6 ขั้นตอน