ว่าด้วยเรื่อง doGet() ของ Google App Script

 

คำสั่ง doGet() 

doGet() เป็นฟังก์ชันหลักที่ใช้สำหรับ สร้างหน้าเว็บของ Web App ด้วย Google Apps Script โดยใช้ไฟล์ HTML เป็นฐานในการแสดงผลบนเบราว์เซอร์เมื่อมีการเข้าถึง Web App แบบ GET request (เปิดหน้าเว็บตาม URL ของ Web App)

    function doGet() {
      return HtmlService.createTemplateFromFile('index').evaluate()
        .setTitle("Project Kru Chian")
        .setFaviconUrl("https://semicon.github.io/img/logo2small.png")
        .addMetaTag('viewport', 'width=device-width , initial-scale=1')
        .setSandboxMode(HtmlService.SandboxMode.IFRAME)
        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
    }
    

🔍 อธิบายแต่ละบรรทัดอย่างละเอียด

javascript
function doGet() {

• ฟังก์ชัน doGet() เป็นฟังก์ชันพิเศษใน Google Apps Script ที่ทำงานเมื่อผู้ใช้เข้าถึง Web App แบบ HTTP GET request (เช่น เปิด URL)
• มักใช้ในการสร้างหน้า HTML หรือส่งข้อมูลแบบ JSON ก็ได้

---

javascript
  return HtmlService.createTemplateFromFile('index').evaluate()

• HtmlService.createTemplateFromFile('index'):
• เรียกใช้ไฟล์ HTML ที่ชื่อว่า index.html (คุณต้องมีไฟล์นี้ในโปรเจกต์)
• ใช้ createTemplateFromFile เพื่อให้สามารถใส่ ตัวแปรหรือสคริปต์ฝั่งเซิร์ฟเวอร์ (Google Apps Script) ลงใน HTML ผ่าน <?!= someVar ?> ได้
• .evaluate():
• ประมวลผล template HTML และแปลงเป็น HtmlOutput ที่สามารถส่งกลับให้ผู้ใช้ดูได้ในเบราว์เซอร์

---

javascript
    .setTitle("Project Kru Chian")

• ตั้งชื่อ title ของหน้าเว็บ ซึ่งจะแสดงที่แท็บของเบราว์เซอร์ว่า "Project Kru Chian"

---

javascript
    .setFaviconUrl("https://semicon.github.io/img/logo2small.png")

• ตั้งค่า favicon (ไอคอนที่แสดงในแท็บของเบราว์เซอร์)
• ใช้ URL ของไฟล์ภาพที่โฮสต์อยู่ภายนอก

---

javascript
    .addMetaTag('viewport', 'width=device-width , initial-scale=1')

• เพิ่ม meta tag เพื่อควบคุม การแสดงผลบนอุปกรณ์พกพา (responsive design)
• คำว่า viewport หมายถึงหน้าต่างการแสดงผลของเบราว์เซอร์
• width=device-width หมายถึง ให้ใช้ความกว้างของอุปกรณ์
• initial-scale=1 หมายถึง ซูม 100% ตอนโหลด

---

javascript
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)

• กำหนดโหมด sandbox ของ HTML output
• IFRAME คือให้โหลด HTML นี้ใน <iframe> ซึ่งมีความปลอดภัยสูงกว่า และสามารถใช้ CSS และ JavaScript ได้มากกว่า NATIVE mode
• หมายเหตุ: ปัจจุบัน Google อาจไม่จำเป็นต้องใช้บรรทัดนี้เสมอไป เพราะมี default อยู่แล้ว

---

javascript
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)

• ปกติ Google จะไม่อนุญาตให้ Web App ที่คุณสร้าง ถูกโหลดจาก <iframe> ในเว็บอื่นๆ (เพื่อความปลอดภัย)
• บรรทัดนี้เป็นการ อนุญาตให้สามารถโหลด Web App นี้ผ่าน iframe จากทุกโดเมน ได้
• ใช้เมื่อคุณต้องฝัง Web App ไว้ในเว็บอื่น (เช่น HTML page หรือเว็บไซต์ส่วนตัว)

---

🧩 สรุปแบบเข้าใจง่าย

โค้ดนี้สร้างหน้าเว็บจากไฟล์ index.html พร้อมปรับแต่ง UI/UX ดังนี้:

• ✅ ใช้ HTML template พร้อมฝั่ง Apps Script ได้
• 🧭 ตั้งชื่อหน้าเว็บ และ favicon
• 📱 รองรับมือถือ (responsive)
• 🧷 อนุญาตให้โหลดผ่าน iframe ได้ทุกเว็บ
• 📦 ใช้ iframe เป็น sandbox เพื่อให้ใช้ CSS/JS ได้หลากหลาย