อยากทำเว็บแอปแต่ไม่เคยเขียนโค้ด ไม่มีเซิร์ฟเวอร์ ไม่อยากติดตั้งโปรแกรมยุ่งยาก? Google Apps Script คือคำตอบ! มันให้คุณสร้างเว็บแอปที่เชื่อมกับ Google Sheet ได้ฟรี ๆ แค่มีบัญชี Google บทความนี้จะพาคุณทำทีละขั้นตั้งแต่ศูนย์จริง ๆ ═══════════════════════════════════════ 📌 1. Google Apps Script คืออะไร (ทำไมเหมาะกับมือใหม่) ═══════════════════════════════════════ Google Apps Script (เรียกสั้น ๆ ว่า GAS) คือเครื่องมือเขียนโปรแกรมของ Google ที่ให้เราสร้างระบบอัตโนมัติและเว็บแอปได้ โดยใช้ภาษา JavaScript ทำไมเหมาะกับผู้เริ่มต้นมาก: • ฟรี 100% แค่มีบัญชี Gmail • ไม่ต้องติดตั้งอะไรเลย เขียนบนเว็บเบราว์เซอร์ได้ทันที • ไม่ต้องเช่าเซิร์ฟเวอร์ (Google โฮสต์ให้ฟรี) • เชื่อมกับ Google Sheet ได้ทันที (ใช้ Sheet เป็นฐานข้อมูล) • เผยแพร่ให้คนอื่นใช้งานได้ด้วยลิงก์เดียว เปรียบเทียบ: ถ้าเว็บทั่วไปต้องมี "เซิร์ฟเวอร์ + ฐานข้อมูล + โดเมน" GAS รวมทุกอย่างให้ฟรีในที่เดียว — เหมาะมากสำหรับเริ่มต้น ═══════════════════════════════════════ 🎯 2. GAS สร้างอะไรได้บ้าง ═══════════════════════════════════════ • เว็บแอป (Web App) — หน้าเว็บที่มีฟอร์ม ปุ่ม แสดงข้อมูล • ระบบบันทึกข้อมูลลง Google Sheet (เช่น ลงทะเบียน, แจ้งซ่อม, เช็คชื่อ) • ส่งอีเมลอัตโนมัติ • สร้าง/แก้ไขไฟล์ใน Google Drive • ทำงานตามเวลาที่ตั้งไว้ (เช่น ส่งรายงานทุกเช้า) ตัวอย่างระบบยอดฮิตที่ทำด้วย GAS: ระบบลาออนไลน์, ระบบจองห้องประชุม, ระบบเช็คชื่อนักเรียน, ระบบแบบสอบถาม ═══════════════════════════════════════ 🚀 3. เริ่มต้น: เปิดโปรเจกต์แรก ═══════════════════════════════════════ ขั้นตอน (ทำตามได้เลย): 1. ล็อกอินบัญชี Google 2. เปิดเว็บ script.google.com 3. กดปุ่ม "New project" (โปรเจกต์ใหม่) 4. จะเห็นหน้าจอเขียนโค้ด มีไฟล์ชื่อ Code.gs และฟังก์ชันตัวอย่าง หน้าจอ Apps Script มีส่วนหลัก: • พื้นที่เขียนโค้ด (ตรงกลาง) • ปุ่ม Run (▶) — รันโค้ด • ปุ่ม Save (💾) — บันทึก • Execution log (ด้านล่าง) — แสดงผลลัพธ์ ═══════════════════════════════════════ ✏️ 4. โค้ดแรกของคุณ ═══════════════════════════════════════ ลบโค้ดเดิมออก แล้วพิมพ์นี้ลงไป
javascript 
function myFirstFunction() {
  Logger.log("สวัสดี Google Apps Script");
}
จากนั้นกด Save (💾) แล้วกด Run (▶) ครั้งแรกจะมีหน้าต่างขออนุญาต ให้กด "Review permissions" แล้วอนุญาต เสร็จแล้วดูผลที่ Execution log ด้านล่าง จะเห็นข้อความที่เราพิมพ์ • function = ฟังก์ชัน (ชุดคำสั่ง) • Logger.log() = แสดงผลใน log (ไว้ทดสอบ/debug) • ทุกคำสั่งจบด้วย ; ═══════════════════════════════════════ 📘 5. ภาษาที่ใช้ = JavaScript พื้นฐาน ═══════════════════════════════════════ GAS ใช้ภาษา JavaScript สิ่งพื้นฐานที่ควรรู้
javascript 
function example() {
  // ตัวแปร
  var name = "สมชาย";
  var age = 25;

  // เงื่อนไข
  if (age >= 18) {
    Logger.log(name + " เป็นผู้ใหญ่");
  }

  // วนซ้ำ
  for (var i = 1; i <= 3; i++) {
    Logger.log("รอบที่ " + i);
  }
}
ไม่ต้องกังวลถ้ายังไม่คล่อง JavaScript — ค่อย ๆ เรียนไปพร้อมทำโปรเจกต์ได้ ═══════════════════════════════════════ 🌐 6. สร้างหน้าเว็บด้วย doGet() ═══════════════════════════════════════ หัวใจของ Web App คือฟังก์ชันชื่อ doGet() — Google จะเรียกฟังก์ชันนี้ เมื่อมีคนเปิดเว็บแอปของเรา แบบง่ายสุด (แสดงข้อความ):
javascript 
function doGet() {
  return HtmlService.createHtmlOutput("<h1>สวัสดีเว็บแอปแรกของฉัน</h1>");
}
แบบใช้ไฟล์ HTML แยก (แนะนำ เพราะจัดหน้าตาได้สวยกว่า):
javascript 
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}
วิธีสร้างไฟล์ HTML: 1. กดเครื่องหมาย + ข้าง "Files" 2. เลือก "HTML" 3. ตั้งชื่อว่า index (จะได้ไฟล์ index.html) ตัวอย่างเนื้อหาไฟล์ index.html:
html 
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>ยินดีต้อนรับ</h1>
    <p>นี่คือเว็บแอปที่สร้างด้วย Google Apps Script</p>
  </body>
</html>
═══════════════════════════════════════ 📊 7. เชื่อมต่อ Google Sheet (ใช้เป็นฐานข้อมูล) ═══════════════════════════════════════ GAS เชื่อมกับ Google Sheet ได้ทันทีผ่าน SpreadsheetApp เตรียม Sheet: สร้าง Google Sheet ใหม่ ใส่หัวคอลัมน์ที่แถวแรก เช่น ช่อง A1="วันที่", B1="ชื่อ", C1="ข้อความ" แล้วคัดลอก ID จาก URL (URL: docs.google.com/spreadsheets/d/【ID อยู่ตรงนี้】/edit) อ่านข้อมูลจาก Sheet:
javascript 
function readData() {
  var sheetId = "วาง_ID_ของ_Sheet_ที่นี่";
  var sheet = SpreadsheetApp.openById(sheetId).getSheetByName("ชีต1");

  var data = sheet.getDataRange().getValues();  // ได้ข้อมูลทั้งหมดเป็น array
  Logger.log(data);
}
เขียน/เพิ่มข้อมูลลง Sheet:
javascript 
function addData(name, message) {
  var sheetId = "วาง_ID_ของ_Sheet_ที่นี่";
  var sheet = SpreadsheetApp.openById(sheetId).getSheetByName("ชีต1");

  // เพิ่มแถวใหม่ท้ายตาราง (วันที่, ชื่อ, ข้อความ)
  sheet.appendRow([new Date(), name, message]);
}
• openById() = เปิด Sheet ด้วย ID • getSheetByName() = เลือกชีต • getDataRange().getValues() = อ่านข้อมูลทั้งหมด • appendRow([...]) = เพิ่มแถวใหม่ ═══════════════════════════════════════ 🔗 8. รับข้อมูลจากฟอร์มบนเว็บ → บันทึกลง Sheet ═══════════════════════════════════════ ส่วนสำคัญ: หน้าเว็บ (HTML) เรียกฟังก์ชันฝั่งเซิร์ฟเวอร์ (GAS) ผ่านคำสั่งพิเศษ google.script.run ไฟล์ index.html (ฟอร์ม):
html 
<body>
  <h2>ฝากข้อความ</h2>
  <input type="text" id="name" placeholder="ชื่อของคุณ">
  <input type="text" id="message" placeholder="ข้อความ">
  <button onclick="submitForm()">ส่ง</button>

  <script>
    function submitForm() {
      var name = document.getElementById("name").value;
      var message = document.getElementById("message").value;

      // เรียกฟังก์ชัน addData ที่อยู่ในไฟล์ .gs
      google.script.run.addData(name, message);
      alert("บันทึกเรียบร้อย!");
    }
  </script>
</body>
ไฟล์ Code.gs (ฝั่งเซิร์ฟเวอร์):
javascript 
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

function addData(name, message) {
  var sheetId = "วาง_ID_ของ_Sheet_ที่นี่";
  var sheet = SpreadsheetApp.openById(sheetId).getSheetByName("ชีต1");
  sheet.appendRow([new Date(), name, message]);
}
*** google.script.run คือสะพานเชื่อมหน้าเว็บ (HTML) กับโค้ดฝั่งเซิร์ฟเวอร์ (.gs) *** ═══════════════════════════════════════ 🚢 9. เผยแพร่เป็นเว็บแอป (Deploy) ═══════════════════════════════════════ เมื่อโค้ดพร้อม ให้เผยแพร่ให้คนอื่นใช้งาน ขั้นตอน: 1. กดปุ่ม "Deploy" (มุมขวาบน) → "New deployment" 2. กดไอคอนเฟือง ⚙ เลือกชนิดเป็น "Web app" 3. ตั้งค่า: • Execute as: Me (รันด้วยสิทธิ์ของคุณ) • Who has access: เลือกใครเข้าได้ - "Only myself" = เฉพาะเรา - "Anyone" = ทุกคนที่มีลิงก์ (ใช้บ่อยสุด) 4. กด "Deploy" แล้วอนุญาตสิทธิ์ 5. จะได้ URL ของเว็บแอป — เอาลิงก์นี้ไปแชร์ได้เลย! *** ทุกครั้งที่แก้โค้ด ต้อง Deploy ใหม่ (หรือเลือก "Manage deployments" แล้วแก้เวอร์ชัน) *** ═══════════════════════════════════════ 🎯 10. สรุปภาพรวมระบบที่เราสร้าง ═══════════════════════════════════════ โครงสร้างระบบฟอร์มบันทึกข้อมูล: • index.html → หน้าเว็บ + ฟอร์ม (ผู้ใช้เห็น) • Code.gs → doGet() แสดงหน้าเว็บ + addData() บันทึกข้อมูล • Google Sheet → ที่เก็บข้อมูล (ฐานข้อมูล) การทำงาน: ผู้ใช้กรอกฟอร์ม → กดส่ง → google.script.run เรียก addData() → บันทึกลง Google Sheet → เสร็จ! ═══════════════════════════════════════ ✅ 11. เคล็ดลับสำหรับมือใหม่ ═══════════════════════════════════════ • เริ่มจากเล็ก ๆ: ทำฟอร์มบันทึก 1 อย่างให้ได้ก่อน แล้วค่อยเพิ่ม • ใช้ Logger.log() ตรวจสอบค่าระหว่างทางเสมอเมื่อโค้ดไม่ทำงาน • อย่าลืม Deploy ใหม่ทุกครั้งที่แก้โค้ด • คัดลอก ID ของ Sheet ให้ถูกต้อง (ระวังช่องว่าง) • ใช้ AI ช่วยเขียนโค้ด GAS ได้ (บอกความต้องการเป็นภาษาไทย) • ค้นหาตัวอย่างเพิ่มที่ developers.google.com/apps-script จำไว้: GAS คือประตูที่ง่ายที่สุดสู่โลกการเขียนโปรแกรมทำเว็บ ไม่ต้องรอให้พร้อม 100% — ลงมือทำโปรเจกต์แรกวันนี้เลย แล้วคุณจะเก่งขึ้นเอง 🚀