การเชื่อมไฟล์ใน appscript
#ติดเทรนด์ #ป้ายยากับlemon8 #appscript #พื้นฐานการเขียนเว็ปไซต์ #เชื่อมไฟล์
การเชื่อมไฟล์ในการเขียนเว็บแอปด้วย Google Apps Script นั้น โดยหลักๆ แล้วสามารถทำได้ 2 วิธีหลักๆ ซึ่งแต่ละวิธีก็มีข้อดีและข้อจำกัดที่แตกต่างกันไป ดังนี้ครับ
1. การเชื่อมไฟล์โดยใช้ HTML Service (สำหรับ UI ที่ซับซ้อนและโต้ตอบได้)
วิธีนี้เป็นการสร้างไฟล์ HTML, CSS และ JavaScript แยกต่างหาก แล้วนำมา "เสิร์ฟ" ผ่าน Google Apps Script เพื่อสร้างส่วนติดต่อผู้ใช้ (User Interface) ที่ซับซ้อนและโต้ตอบได้เสมือนเว็บแอปพลิเคชันทั่วไป
หลักการทำงาน:
คุณจะสร้างไฟล์ HTML (เช่น index.html, sidebar.html) ภายในโปรเจกต์ Apps Script ของคุณ
ในไฟล์ HTML เหล่านี้ คุณสามารถเขียนโค้ด HTML, CSS และ JavaScript เพื่อออกแบบหน้าตาและการทำงานของ UI
Google Apps Script จะทำหน้าที่เป็น "เซิร์ฟเวอร์" ในการส่งมอบไฟล์ HTML เหล่านี้ไปยังเบราว์เซอร์ของผู้ใช้
JavaScript ที่อยู่ในไฟล์ HTML สามารถเรียกใช้ฟังก์ชันฝั่ง Apps Script (Server-side) ผ่าน google.script.run เพื่อดึงข้อมูลหรือประมวลผลข้อมูล
Apps Script สามารถส่งข้อมูลกลับไปยัง JavaScript ฝั่ง Client-side เพื่ออัปเดต UI
ข้อดี:
ความยืดหยุ่นสูง: สามารถสร้าง UI ที่สวยงาม ซับซ้อน และมีลูกเล่นได้เหมือนเว็บแอปพลิเคชันทั่วไป
การโต้ตอบแบบ Real-time: JavaScript ฝั่ง Client-side สามารถโต้ตอบกับผู้ใช้และเรียกใช้ฟังก์ชันฝั่ง Server-side ได้อย่างราบรื่น
แยกส่วนชัดเจน: โค้ด HTML, CSS, JavaScript และ Apps Script (หลังบ้าน) ถูกแยกออกจากกัน ทำให้จัดการและบำรุงรักษาง่ายขึ้น
ข้อจำกัด:
ซับซ้อนกว่า: ต้องมีความรู้พื้นฐานด้าน HTML, CSS และ JavaScript
การดีบัก: การดีบักโค้ด JavaScript ฝั่ง Client-side อาจซับซ้อนกว่า
ประสิทธิภาพ: หากมีการส่งข้อมูลระหว่าง Client-side และ Server-side มากเกินไป อาจมีผลต่อประสิทธิภาพบ้าง
ตัวอย่างการใช้งาน:
สร้างฟอร์มกรอกข้อมูลพร้อมการตรวจสอบความถูกต้องแบบ Real-time
สร้าง Dashboard แสดงผลข้อมูลแบบกราฟิก
สร้างแอปพลิเคชันที่มีการนำทางหลายหน้า
2. การเชื่อมไฟล์โดยใช้ Content Service (สำหรับข้อมูลดิบหรือเนื้อหาแบบง่าย)
วิธีนี้เป็นการใช้ Google Apps Script เพื่อส่งคืนเนื้อหาที่เป็นข้อความดิบ (Plain Text), JSON, CSV หรือ XML โดยตรงไปยังผู้ใช้หรือแอปพลิเคชันอื่น ๆ เหมาะสำหรับกรณีที่คุณต้องการให้บริการข้อมูลดิบ หรือสร้าง API แบบง่ายๆ
หลักการทำงาน:
คุณจะใช้ฟังก์ชัน doGet() หรือ doPost() ในไฟล์ .gs (Apps Script) เพื่อจัดการกับคำขอ HTTP
แทนที่จะส่งคืน HTML ทั้งหน้า คุณจะใช้ ContentService.createTextOutput() เพื่อสร้างเอาต์พุตที่เป็นข้อความ
คุณสามารถกำหนดประเภทเนื้อหา (MIME type) ได้ เช่น MimeType.JSON สำหรับ JSON หรือ MimeType.TEXT สำหรับข้อความธรรมดา
เหมาะสำหรับการสร้าง API ที่แอปพลิเคชันภายนอกสามารถเรียกใช้เพื่อรับข้อมูล
ข้อดี:
ใช้งานง่าย: ไม่ต้องเขียนโค้ด HTML, CSS หรือ JavaScript ฝั่ง Client-side
ประสิทธิภาพสูง: เนื่องจากส่งคืนข้อมูลดิบ ไม่ต้องประมวลผล UI ที่ซับซ้อน
เหมาะสำหรับ API: สร้าง Web API ที่แอปพลิเคชันอื่นสามารถเรียกใช้ได้ง่าย
ข้อจำกัด:
UI จำกัด: ไม่สามารถสร้างส่วนติดต่อผู้ใช้ที่ซับซ้อนได้โดยตรงจาก Content Service
การโต้ตอบจำกัด: การโต้ตอบกับผู้ใช้ต้องทำผ่านแอปพลิเคชันภายนอกที่เรียกใช้ API
ตัวอย่างการใช้งาน:
สร้าง API สำหรับดึงข้อมูลจาก Google Sheet ในรูปแบบ JSON
สร้างบริการสำหรับบันทึกข้อมูลที่ส่งมาจากฟอร์มภายนอกลงใน Google Sheet
สร้าง Webhook สำหรับรับข้อมูลจากบริการอื่น ๆ
หลายคนเริ่มทำ Google Apps Script แล้วงงว่า “เชื่อมไฟล์ยังไง” หรือไฟล์ .gs กับไฟล์ HTML ต้องเรียกกันแบบไหน เราลองสรุปแบบใช้งานจริงให้เอาไปเริ่มโปรเจกต์ได้ไวขึ้น (เหมาะกับคนทำ web app script / app script html service web app) 1) โครงสร้างโปรเจกต์ที่เจอบ่อย (New Project Interface) เวลาเปิดโปรเจกต์ใหม่ใน Apps Script ปกติจะมีไฟล์ Code.gs (หรือ .gs) เป็นฝั่งเซิร์ฟเวอร์ จากนั้นเราจะเพิ่มไฟล์ HTML (เช่น index.html) ผ่านเมนู + แล้วเลือก HTML วิธีนี้ทำให้แยกหน้าบ้านกับหลังบ้านชัดเจน และแก้ UI ง่ายขึ้น 2) ตัวอย่าง “เชื่อมไฟล์” ด้วย HTML Service (ทำหน้าเว็บ/Google App Script UI) ฝั่ง .gs ให้สร้าง doGet เพื่อเสิร์ฟหน้าเว็บ: - doGet() { return HtmlService.createHtmlOutputFromFile('index'); } ฝั่ง index.html ถ้าต้องการเรียกฟังก์ชันใน .gs ให้ใช้ google.script.run เช่นอยากดึงข้อความไปแสดง: - ใน .gs ทำฟังก์ชัน getMessage() { return 'hello from server'; } - ใน index.html เรียก google.script.run.withSuccessHandler(fn).getMessage(); ทริคที่ช่วยตอนทำ UI: - แยกไฟล์ย่อยได้ เช่น header.html, style.html แล้ว include เข้า index (ช่วยจัดระเบียบ) - ระวังเรื่อง async: google.script.run เป็นแบบไม่รอผลทันที ควรใช้ withSuccessHandler/withFailureHandler 3) ตัวอย่างใช้ Content Service (ส่งข้อมูลดิบ/ทำ API แบบง่าย) ถ้าเป้าหมายคือส่ง JSON/Text ให้ระบบอื่นหรือหน้าเว็บฝั่งอื่นเรียกใช้ ให้ใช้ ContentService ใน doGet/doPost เช่น: - return ContentService.createTextOutput(JSON.stringify(data)).setMimeType(ContentService.MimeType.JSON); แนวคิดคือ “ไม่ทำ UI” แต่ทำ endpoint สำหรับส่งข้อมูล เหมาะกับงานดึงข้อมูลจากชีต/ทำ webhook มากกว่า 4) เลือกใช้แบบไหนดีระหว่าง HTML Service vs Content Service? - ถ้าต้องมีหน้าเว็บ กดปุ่ม กรอกฟอร์ม มีการโต้ตอบ: ใช้ HTML Service - ถ้าต้องการแค่ข้อมูลดิบให้เรียกไปใช้ต่อ (JSON/Text/CSV): ใช้ Content Service - บางโปรเจกต์ใช้คู่กันได้: หน้าเว็บทำด้วย HTML Service แล้วให้ฝั่งหน้าเว็บเรียกฟังก์ชัน .gs เพื่ออ่าน/เขียนชีต หรือทำอีก endpoint แบบ Content Service ไว้ให้ระบบอื่นเรียก 5) ปัญหาที่เจอบ่อยตอนทำ Google web app script - Deploy แล้วแก้โค้ดไม่ขึ้น: ต้อง Deploy เวอร์ชันใหม่/อัปเดต deployment - สิทธิ์เข้าถึง (Authorization): ครั้งแรกมักต้องอนุญาตสคริปต์ โดยเฉพาะงานอ่านเขียน Google Sheet/Drive - เปิดในมือถือ (google app script mobile): UI จาก HTML Service เปิดได้บนมือถือ แต่ควรทำ responsive เอง (เช่นใช้ CSS ให้ปุ่ม/ฟอร์มพอดีจอ) ถ้าคุณตั้งใจทำ “ตัวอย่าง google app script” เพื่อเป็นเว็บแอป แนะนำเริ่มจาก HTML Service ให้เห็นภาพ UI ก่อน แล้วค่อยแตกฟังก์ชันใน .gs เป็นชุดๆ จะดูแลง่ายและต่อยอดเร็วมาก
