อยากทำเว็บแอปแต่ไม่เคยเขียนโค้ด ไม่มีเซิร์ฟเวอร์ ไม่อยากติดตั้งโปรแกรมยุ่งยาก? 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% — ลงมือทำโปรเจกต์แรกวันนี้เลย แล้วคุณจะเก่งขึ้นเอง 🚀