RECOMMENDED GEARS
สินค้าไอทีแนะนำ ราคาสุดคุ้มจาก Shopee
ทำไมต้องดูตัวอย่าง Google Apps Script ก่อน Deploy?
การดูตัวอย่าง Google Apps Script ก่อนนำไปใช้งานจริงเป็นขั้นตอนที่หลายคนมักข้ามไป แต่จริงๆ แล้วมีความสำคัญมากกว่าที่คิด
ปัญหาที่พบบ่อยคือนักพัฒนามือใหม่มักเขียน Script เสร็จแล้ว Deploy ขึ้น Google Sheets ทันที โดยไม่รู้ว่าหน้าตา UI จะออกมาเป็นอย่างไร ผลลัพธ์ที่ได้อาจผิดพลาดทั้งด้าน Layout, สี, หรือการจัดวาง ทำให้เสียเวลาแก้ไขซ้ำหลายรอบ
Google Apps Script รองรับการสร้าง UI ได้ 2 รูปแบบหลักตามเอกสารทางการของ Google คือ Dialog และ Sidebar ซึ่งทั้งสองแบบใช้ HtmlService ในการแสดงผล HTML, CSS และ JavaScript ภายใน Google Workspace อ้างอิง: https://developers.google.com/apps-script/guides/dialogs
การดูตัวอย่าง Google Apps Script ล่วงหน้าจึงช่วยประหยัดเวลาได้มากและทำให้ผลลัพธ์ที่ได้ตรงกับความต้องการตั้งแต่ครั้งแรก
วิธีที่ 1 — ใช้ Apps Script Preview Tool บนเว็บ
ดูตัวอย่าง Google Apps Script ด้วย Interactive Preview Tool
วิธีที่ง่ายและสะดวกที่สุดสำหรับมือใหม่คือการใช้ Preview Tool บนเว็บที่ให้วาง HTML Code แล้วดูผลลัพธ์ได้ทันทีโดยไม่ต้องเปิด Google Sheets เลย
ทาง reviewderkub.com ได้พัฒนา Apps Script Interactive Preview Tool ขึ้นมาให้ใช้งานฟรี โดยรองรับการจำลองทั้ง 3 รูปแบบคือ Dialog, Sidebar และ Spreadsheet UI เพียงวาง HTML Code ในช่องข้างบน ผลลัพธ์จะแสดงด้านล่างทันที
ขั้นตอนการใช้งาน
- เปิดหน้า Tools บนเว็บ reviewderkub.com
- เลือก Mode ที่ต้องการ ได้แก่ Dialog, Sidebar หรือ Spreadsheet UI
- วาง HTML Code ของ Apps Script ลงในช่อง Editor ด้านบน
- ดู Preview ที่แสดงผลทันทีทางด้านล่าง
- ปรับแก้ Code แล้ว Preview จะอัปเดตให้อัตโนมัติ
วิธีที่ 2 — ทดสอบผ่าน Google Apps Script Editor โดยตรง
ใช้ Logger และ console.log ตรวจสอบก่อน Deploy
Google Apps Script Editor มีเครื่องมือในตัวที่ช่วยทดสอบ Script ได้ก่อน Deploy จริง วิธีนี้เหมาะสำหรับผู้ที่ต้องการทดสอบทั้ง Logic และ UI ไปพร้อมกัน
ขั้นตอนคือเขียน Script ใน Google Apps Script Editor ที่ https://script.google.com จากนั้นกดปุ่ม Run เพื่อรัน Function ทดสอบ ระบบจะแสดง Dialog หรือ Sidebar ใน Google Sheets จริงๆ ให้เห็นทันที แต่ข้อเสียคือต้องเปิด Google Sheets และผูก Script เข้ากับ Spreadsheet ก่อนทุกครั้ง
ข้อจำกัดของวิธีนี้
วิธีนี้ใช้เวลานานกว่าเพราะต้องผ่านขั้นตอน Authorization ทุกครั้งที่แก้ไข Code และไม่สะดวกสำหรับการทดสอบ UI ซ้ำๆ หลายรอบ ทำให้วิธีนี้เหมาะกับการทดสอบขั้นสุดท้ายก่อน Deploy จริงมากกว่า
วิธีที่ 3 — ใช้ CodePen หรือ JSFiddle จำลอง HTML UI
จำลองหน้าตา Dialog และ Sidebar ด้วยเครื่องมือออนไลน์
อีกหนึ่งวิธีที่นิยมในกลุ่มนักพัฒนาคือการนำ HTML Code ที่จะใช้ใน HtmlService ไปทดสอบบนเว็บอย่าง CodePen (https://codepen.io) หรือ JSFiddle (https://jsfiddle.net) ก่อน
เพราะ Google Apps Script ใช้ HTML, CSS และ JavaScript มาตรฐานในการสร้าง UI ดังนั้นหน้าตาที่เห็นบน CodePen จะใกล้เคียงกับที่จะแสดงใน Google Sheets มาก วิธีนี้สะดวกและไม่ต้องล็อกอิน Google เลย
ข้อควรระวัง
อย่างไรก็ตามมีสิ่งที่ต้องระวังคือ Function พิเศษของ Apps Script เช่น google.script.run ที่ใช้เรียก Server-side Function จะไม่ทำงานบน CodePen เพราะต้องการ Google Workspace Environment จริงๆ เท่านั้น ดังนั้นวิธีนี้เหมาะสำหรับทดสอบเฉพาะส่วน UI และ Layout เท่านั้น
เปรียบเทียบ 3 วิธี ใช้แบบไหนดี?
วิธีที่ 1 Apps Script Preview Tool บน reviewderkub.com ความสะดวก: สูงมาก ไม่ต้องล็อกอิน วาง Code แล้วดูผลทันที เหมาะกับ: มือใหม่ที่อยากดูตัวอย่าง Google Apps Script อย่างรวดเร็ว
วิธีที่ 2 Google Apps Script Editor ความสะดวก: ปานกลาง ต้องมี Google Account และผูก Spreadsheet เหมาะกับ: การทดสอบขั้นสุดท้ายก่อน Deploy จริง
วิธีที่ 3 CodePen หรือ JSFiddle ความสะดวก: สูง ไม่ต้องล็อกอิน แต่ไม่รองรับ google.script.run เหมาะกับ: ทดสอบเฉพาะ UI และ Layout
สรุป
การดูตัวอย่าง Google Apps Script ก่อน Deploy จริงเป็นสิ่งที่นักพัฒนาทุกระดับควรทำ ไม่ว่าจะเป็นมือใหม่หรือมืออาชีพ เพราะช่วยลดความผิดพลาดและประหยัดเวลาได้อย่างมาก
จาก 3 วิธีที่แนะนำ หากต้องการความสะดวกและรวดเร็วที่สุด แนะนำเริ่มจาก Apps Script Preview Tool บน reviewderkub.com ก่อนเลย เพราะไม่ต้องเตรียมอะไรเพิ่ม วาง HTML Code แล้วดูผลได้ทันที จากนั้นค่อย Deploy ผ่าน Google Apps Script Editor เมื่อ UI พร้อมแล้ว
อ้างอิงข้อมูลจาก Google Developers Documentation: https://developers.google.com/apps-script/guides/html
