ทำหน้าเว็บสวยและเร็วใน Google Apps Script ด้วย HtmlService

แยกไฟล์ด้วยฟังก์ชัน include

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate()
    .setTitle('ระบบของฉัน')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

function include(name) {
  return HtmlService.createHtmlOutputFromFile(name).getContent();
}

ใน index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('styles'); ?>
  </head>
  <body>
    <div id="app"></div>
    <?!= include('script'); ?>
  </body>
</html>

เรียกฟังก์ชันฝั่งเซิร์ฟเวอร์

google.script.run
  .withSuccessHandler(list => render(list))
  .withFailureHandler(err => showError(err.message))
  .getProducts();

google.script.run เป็นแบบ asynchronous เสมอ ควรแสดงสถานะ "กำลังโหลด" ระหว่างรอ

เทคนิคให้เร็วขึ้น

• โหลดข้อมูลเริ่มต้นผ่าน template (<?= JSON.stringify(data) ?>) แทนการเรียก google.script.run หลังหน้าโหลด
• รวมคำขอหลายอย่างเป็นฟังก์ชันเดียว ลดจำนวนรอบที่เรียกเซิร์ฟเวอร์
• ใช้ CacheService แคชข้อมูลที่ไม่ค่อยเปลี่ยน
• ใส่ <base target="_top"> เพื่อให้ลิงก์เปิดนอก iframe ของ Google