แนวคิดการส่งค่าจาก Server ไปยัง Frontend ด้วย inject → window.CONFIG

bysemicon -
0

 


ในการพัฒนา Web Application สมัยใหม่ โดยเฉพาะงานที่แยก ฝั่ง Server (Backend) และ ฝั่ง Client (Frontend) ออกจากกัน หนึ่งในโจทย์สำคัญคือ

“จะส่งค่าการตั้งค่า (Config) จาก Server ไปให้ JavaScript ฝั่งหน้าเว็บอย่างเป็นระบบ ปลอดภัย และดูแลรักษาง่ายได้อย่างไร?”

แนวคิด Server → Inject → window.CONFIG เป็นรูปแบบที่นิยมและเหมาะสมอย่างยิ่งกับงานประเภท

  • Google Apps Script Web App
  • ระบบ CMS / LMS
  • เว็บไซต์ที่ใช้ Config จากฐานข้อมูล เช่น Google Sheet

ภาพรวมแนวคิด (Concept Overview)

โฟลว์การทำงานมี 3 ขั้นตอนหลัก

Google Sheet / Database
        ↓
Server (Apps Script)
        ↓ inject
HTML <script> window.CONFIG = {...}
        ↓
JavaScript ใช้งาน


สรุปสั้น ๆ

  • Server เป็นผู้กำหนด “ความจริง” (Single Source of Truth)
  • HTML เป็นเพียงตัวรับค่า
  • JavaScript ฝั่ง Client อ่านค่าจาก window.CONFIG เพื่อนำไปใช้งาน

ทำไมต้องใช้ window.CONFIG

❌ ปัญหาของวิธีเดิม

  • เขียนค่า hardcode ซ้ำใน JS หลายไฟล์
  • เปลี่ยนชื่อระบบ / โลโก้ ต้องแก้หลายจุด
  • Config ไม่เป็นศูนย์กลาง
  • ดูแลยากเมื่อระบบใหญ่ขึ้น

✅ ข้อดีของ window.CONFIG

  • รวม Config ทั้งหมดไว้จุดเดียว
  • เปลี่ยนค่าที่ Server → หน้าเว็บเปลี่ยนทันที
  • ใช้ร่วมกันได้ทุกไฟล์ JS
  • อ่านง่าย เป็นมาตรฐาน

ตัวอย่างโครงสร้าง Config จากฐานข้อมูล

สมมุติ Google Sheet ชื่อ Config

keyvalue
logoUrlhttps://example.com/logo.png
system_nameLMS
system_titleระบบการจัดการการเรียนรู้
welcome_messageยินดีต้อนรับ
footer_text© 2026 Learning Management System

ฝั่ง Server (Google Apps Script)

1. อ่าน Config แล้วแปลงเป็น Object

function getConfigObject() {
  const sheet = SpreadsheetApp.getActive().getSheetByName('Config');
  const data = sheet.getDataRange().getValues();
  
  const config = {};
  data.slice(1).forEach(([key, value]) => {
    config[key] = value;
  });
  
  return config;
}

2. Inject Config เข้า HTML

function doGet() {
  const template = HtmlService.createTemplateFromFile('index');
  template.CONFIG = getConfigObject();
  return template.evaluate();
}

จุดสำคัญ: Server เป็นผู้ inject ค่า ไม่ใช่ Client ไป fetch เอง

ฝั่ง HTML (Inject → window.CONFIG)

<script>
  window.CONFIG = <?!= JSON.stringify(CONFIG) ?>;
</script>


เมื่อโหลดหน้าเว็บเสร็จ จะได้ Object ทันที เช่น

window.CONFIG = {
  logoUrl: "https://example.com/logo.png",
  system_name: "LMS",
  system_title: "ระบบการจัดการการเรียนรู้",
  welcome_message: "ยินดีต้อนรับ",
  footer_text: "© 2025 Learning Management System"
};

การใช้งานจริงใน JavaScript

ตัวอย่าง: เปลี่ยนโลโก้และชื่อระบบ

document.getElementById('logo').src = CONFIG.logoUrl;
document.getElementById('systemTitle').textContent = CONFIG.system_title;


ตัวอย่าง: ใช้ในหลายไฟล์ JS

if (CONFIG.system_name === 'LMS') {
  enableLearningModule();
}

window.CONFIG เป็น global → ใช้ได้ทุกไฟล์

Best Practice ที่แนะนำ

✅ 1. ใช้ชื่อ CONFIG ตัวพิมพ์ใหญ่

สื่อความหมายว่าเป็นค่าคงที่ระดับระบบ

✅ 2. Inject ก่อนโหลด JS หลัก

<script>window.CONFIG = ...</script>
<script src="main.js"></script>


✅ 3. แยก “Config” ออกจาก “Data”

  • Config → ชื่อระบบ, โลโก้, feature flag
  • Data → ข้อมูลผู้ใช้, รายการ, ตาราง

❌ ไม่ควรใส่ข้อมูลลับ

เช่น API Key, Token, Secret

เหมาะกับงานประเภทใดบ้าง

✔ ระบบ LMS / E-learning
✔ Web App ด้วย Google Apps Script
✔ CMS โรงเรียน / หน่วยงาน
✔ ระบบที่ต้องปรับค่าโดยไม่แก้โค้ด
✔ เว็บที่ใช้ Google Sheet เป็นฐานข้อมูล

สรุป

แนวคิด Server → inject → window.CONFIG คือรูปแบบที่

  • เรียบง่าย
  • เป็นมาตรฐาน
  • ดูแลรักษาง่าย
  • เหมาะกับ Web App ระยะยาว

“ให้ Server เป็นผู้กำหนดค่า
Frontend มีหน้าที่แค่ใช้”

หากคุณกำลังสร้าง Web App ด้วย Google Apps Script แนวคิดนี้คือ ของที่ควรมีตั้งแต่วันแรก 💡


หากถูกใจโปรดสนับสนุนเป็นกำลังใจกันด้วยนะครับ

สนับสนุนที่นี่

Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า