หากคุณเขียนโค้ด HTML, CSS และ JavaScript เสร็จแล้ว แต่ไม่อยากเสียเงินค่าเช่าโฮสติ้ง (Hosting) หรือเซิร์ฟเวอร์ (Server) สำหรับโปรเจกต์ขนาดเล็ก Google Apps Script (GAS) คือทางออกที่ยอดเยี่ยมที่สุดครับ เพราะนอกจากจะใช้งานได้ฟรีแล้ว ยังมีความเสถียรสูงเนื่องจากรันอยู่บนระบบคลาวด์ของ Google เอง
บทความนี้จะสรุปขั้นตอนการนำโค้ดที่คุณเขียนมาเปลี่ยนเป็น Web Application ที่มี URL พร้อมใช้งานจริง และส่งให้คนอื่นเข้าดูได้ทันทีครับ
🛠️ ขั้นตอนที่ 1: เตรียมไฟล์และเขียนโค้ดพื้นฐาน
ก่อนจะ Deploy เราต้องมีโค้ดตั้งต้นเสียก่อน ให้คุณเข้าไปที่ script.google.com แล้วกด โครงการใหม่ (New Project)
1. ฝั่ง Backend (Code.gs)
นี่คือไฟล์ที่ใช้ควบคุมฝั่งเซิร์ฟเวอร์ กฎเหล็กของการทำ Web App บน GAS คือต้องมีฟังก์ชัน doGet() เสมอ เพื่อให้ระบบรู้ว่าจะต้องแสดงหน้าเว็บไหนเมื่อมีคนเข้า URL
JavaScript
function doGet() {
// สั่งให้แสดงผลไฟล์ชื่อ 'Index'
return HtmlService.createHtmlOutputFromFile('Index')
.setTitle('My Free Web App') // ตั้งชื่อ Title Bar
.addMetaTag('viewport', 'width=device-width, initial-scale=1'); // ทำให้รองรับมือถือ
}
2. ฝั่ง Frontend (Index.html)
กดปุ่ม + (เพิ่มไฟล์) เลือก HTML และตั้งชื่อไฟล์ว่า Index จากนั้นใส่โค้ดหน้าเว็บของคุณลงไป (ตัวอย่างด้านล่างเป็นหน้าเว็บแบบง่ายๆ)
HTML
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body { font-family: sans-serif; text-align: center; padding: 50px; }
h1 { color: #1a73e8; }
</style>
</head>
<body>
<h1>🎉 ยินดีต้อนรับสู่ Web App ของฉัน!</h1>
<p>ระบบนี้ทำงานอยู่บน Google Apps Script ฟรี 100%</p>
</body>
</html>
🌐 ขั้นตอนที่ 2: เริ่มการ Deploy (การทำให้ใช้งานได้)
เมื่อโค้ดพร้อมแล้ว ก็เข้าสู่ขั้นตอนสำคัญในการนำขึ้นระบบจริงครับ:
- มองไปที่มุมขวาบนของหน้าจอ คลิกที่ปุ่ม การทำให้ใช้งานได้ (Deploy)
- เลือก การทำให้ใช้งานได้รายการใหม่ (New deployment)
- ในหน้าต่างที่เด้งขึ้นมา ให้คลิกที่ ไอคอนรูปฟันเฟือง ⚙️ (ข้างคำว่า Select type)
- เลือกประเภทเป็น เว็บแอป (Web app)
🔐 ขั้นตอนที่ 3: การตั้งค่าสิทธิ์การเข้าถึง (สำคัญมาก!)
ในหน้าการตั้งค่า Web App จะมี 2 จุดที่คุณต้องเลือกให้ถูกต้องตามจุดประสงค์การใช้งาน:
- เรียกใช้ในฐานะ (Execute as):
- ฉัน (Me): แนะนำให้เลือกข้อนี้ เพื่อให้ Web App ทำงานโดยใช้สิทธิ์บัญชี Google ของคุณ (มีประโยชน์มากเวลาเว็บต้องดึงข้อมูลจาก Google Sheets หรือ Drive ของคุณโดยตรง ผู้ใช้คนอื่นจะได้ไม่ต้องขอสิทธิ์)
- ผู้ใช้ที่เข้าถึงเว็บแอป (User accessing the web app): เลือกเมื่อต้องการให้ผู้ใช้ใช้บัญชี Google ของตัวเองในการรันระบบ
- ผู้มีสิทธิ์เข้าถึง (Who has access):
- ทุกคน (Anyone): เปิดเป็นสาธารณะ ใครที่มี URL ก็สามารถเข้าใช้งานได้ทันที (แนะนำสำหรับเว็บทั่วไป)
- เฉพาะฉัน (Only myself): คุณเข้าดูได้คนเดียว
- ทุกคนที่มีบัญชี Google (Anyone with Google account): ผู้ใช้ต้องล็อกอิน Google ก่อนถึงจะเห็นหน้าเว็บ
เมื่อตั้งค่าเสร็จแล้ว ให้กดปุ่ม การทำให้ใช้งานได้ (Deploy)
ข้อควรระวัง: ในการ Deploy ครั้งแรก Google จะขึ้นหน้าต่าง ให้สิทธิ์การเข้าถึง (Authorize access) ให้คุณกดทำตามขั้นตอน เลือกบัญชีของคุณ > กด ขั้นสูง (Advanced) > และกด ไปที่โปรเจกต์ (Go to project) เพื่อยืนยันความปลอดภัยครับ
🔄 วิธีการอัปเดต Web App เมื่อมีการแก้ไขโค้ด
นี่คือจุดที่มือใหม่หลายคนพลาด เมื่อคุณแก้ไขโค้ดเสร็จและต้องการอัปเดตหน้าเว็บ ห้ามกด New deployment เด็ดขาด เพราะมันจะสร้าง URL ใหม่ขึ้นมาเรื่อยๆ ให้ทำตามนี้แทนครับ:
- คลิกปุ่ม การทำให้ใช้งานได้ (Deploy)
- เลือก จัดการการทำให้ใช้งานได้ (Manage deployments)
- คลิกไอคอน รูปดินสอ ✏️ (แก้ไข) ที่มุมขวาบนของหน้าต่าง
- ตรงช่องเวอร์ชัน (Version) ให้คลิกเมนู Dropdown แล้วเลือก เวอร์ชันใหม่ (New version)
- กด การทำให้ใช้งานได้ (Deploy)
เพียงเท่านี้ โค้ดใหม่ก็จะถูกอัปเดตไปที่ URL เดิมทันทีครับ
📊 สรุปข้อดีและข้อจำกัดของการ Deploy บน GAS
| หัวข้อ | รายละเอียด |
| ข้อดี (Pros) | ฟรีไม่มีค่าใช้จ่าย, ไม่ต้องตั้งค่า Server (Serverless), ได้ HTTPS อัตโนมัติ, เชื่อมต่อกับบริการอื่นของ Google (Sheets, Drive, Gmail) ได้ง่ายมาก |
| ข้อจำกัด (Cons) | URL ที่ได้จะค่อนข้างยาวและมีคำว่า script.google.com (ไม่สามารถทำ Custom Domain ตรงๆ ได้), ไม่รองรับงานที่ต้องประมวลผลหนักๆ นานเกิน 6 นาที, รองรับ Traffic ได้ในระดับปานกลาง |
