Google Sheets เป็น Web App: โครงสร้างระบบและการกำหนดสิทธิ์

สวัสดีครับทุกคน นี่คือตอนแรกของซีซั่น “Sheets เป็น Web App” หลังจากที่เราได้ลองสร้าง“ผู้ช่วย AI ส่วนตัว (Custom AI)” เพื่อจัดการงานจุกจิกประจำโต๊ะทำงานกันไปแล้ว มีหลายคนทักเข้ามาคุยกับผมว่า “คุณตระกูลครับ ระบบที่ทำมันเจ๋งมากเลย แต่พอจะเอาไปให้พี่ๆ เพื่อนๆ ในทีมร่วมใช้งานด้วย กลับเจอปัญหาคลาสสิกซะงั้น!”

ปัญหาคลาสสิกที่ว่านั้นคืออะไร?

• “พี่พึ่งพาเทคโนโลยีไม่ค่อยเก่ง เห็นตาราง Excel หรือ Google Sheets ลายตาแล้วงงไปหมด”
• “บางคนในทีมไม่มีบัญชี AI ตัวที่ผมใช้ หรือบางคนขี้เกียจพิมพ์สั่งงานยาวๆ”
• “อยากให้คนนอกหรือแผนกอื่นส่งข้อมูลเข้ามาได้ แต่ไม่อยากเปิดสิทธิ์ให้เขาเข้ามาแก้ไขไฟล์ Google Sheets หลักของเราเพราะกลัวระบบพัง”

ถ้าคุณกำลังปวดหัวกับปัญหานี้ วันนี้ผมมีทางออกระดับ “มือโปร” มาฝากครับ นั่นคือการ “เปลี่ยน Google Sheets หลังบ้านให้กลายเป็น Web App หน้าบ้านสุดมินิมอล” ที่ทีมใช้งานผ่านสมาร์ตโฟนหรือคอมพิวเตอร์ได้ โดยการล็อกอินและสิทธิ์การใช้งานต้องออกแบบตามประเภทข้อมูลและความเสี่ยงของงาน

🧠 แนวคิดการเปลี่ยน Google Sheets เป็น Web App (Low-Code Solution)

หลักการทำงานของระบบนี้เรียบง่ายแต่อัจฉริยะมากครับ เราจะใช้ Google Sheets ทำหน้าที่เป็น “ฐานข้อมูล (Database)” คอยเก็บสถิติต่างๆ อยู่หลังบ้าน จากนั้นใช้ Google Apps Script เป็นสะพานเชื่อมเพื่อสร้างหน้าต่าง “Web App (HTML/CSS)” ขึ้นมาเป็นหน้าบ้านสวยๆ ให้ผู้ใช้ฝั่งทีมงานได้กรอกข้อมูล ค้นหา หรือกดยืนยันงานได้ในคลิกเดียว

⚖️ ข้อเปรียบเทียบ: การคีย์งานลงตาราง Sheets แบบเดิม VS การใช้งานผ่าน Web App หน้าบ้าน

🛠️ ฟังก์ชันระดับโปรที่ทำให้ Web App ของคุณดูอัจฉริยะ

หากต้องการให้ออกแบบระบบออกมาแล้วคนชมทั้งออฟฟิศ จนคุณดูเป็นนักพัฒนาระบบมือฉมัง (System Developer) ผมแนะนำให้เพิ่ม 2 ฟังก์ชันนี้เข้าไปในตัว Web App ครับ:

1. แถบแยกหมวดหมู่ตามส่วนงาน (Group-Based Categorization)

แทนที่จะรวมงานทุกอย่างไว้ในหน้าเดียว เราควรออกแบบหน้าบ้านให้มีแท็บแยกชัดเจน เช่น แยกตามแผนกในองค์กร (กบ., กช., กง., กธ. หรือ ผอ.) เพื่อให้สตาฟฟ์แต่ละฝ่ายคลิกเข้าไปดูเฉพาะงานที่เกี่ยวข้องกับตัวเองได้อย่างรวดเร็ว

2. ปุ่มเลือกทั้งหมดในคลิกเดียว (Select All Button)

ในกรณีที่ต้องมีการอนุมัติงาน ตรวจรับพัสดุ หรือจัดการคิวรถยนต์พร้อมกันหลายๆ รายการ การสร้างปุ่ม “Select All” แล้วกด “อนุมัติพร้อมกัน” จะช่วยลดเวลาการทำงานลงได้มหาศาล แทนที่จะต้องมานั่งติ๊กถูกทีละช่องครับ

🧑‍💻 วิธีลงมือทำจริง: ใช้ AI เขียนโค้ดหน้าบ้านให้ใน 3 ขั้นตอน

ไม่ต้องตกใจนะครับที่คุณเห็นคำว่า Web App แล้วคิดว่าต้องไปนั่งเรียนเขียนโค้ดใหม่ เพราะเรามี “กุนซือ AI” (ดูวิธีสั่งงาน AI) คอยช่วยอยู่แล้ว ให้คุณทำตามขั้นตอนโปรๆ ดังนี้ครับ:

📝 ขั้นตอนการสั่ง AI สร้าง Web App หน้าบ้าน

• ขั้นตอนที่ 1 (เตรียมหลังบ้าน): สร้าง Google Sheets ขึ้นมา 1 ไฟล์ ตั้งชื่อคอลัมน์ให้เรียบร้อย (เช่น วันที่, ชื่อผู้แจ้ง, รายละเอียดงานซ่อม, สถานะ)
  
• ขั้นตอนที่ 2 (สั่งงาน AI): เปิด ChatGPT หรือ Claude แล้วป้อนคำสั่งสไตล์โปรว่า:“สวมบทบาทเป็นผู้เชี่ยวชาญ Full-Stack Developer ช่วยเขียนโค้ด Google Apps Script (ไฟล์ Code.gs) และหน้าบ้าน HTML (ไฟล์ index.html) เพื่อสร้าง Web App แจ้งซ่อมบำรุง โดยให้หน้าบ้านดึงข้อมูลจาก Google Sheets มาแสดงผลแยกหมวดหมู่ตามสถานะงาน และมีปุ่ม Select All สำหรับกดอัปเดตสถานะพร้อมกัน ขอดีไซน์หน้าเว็บที่ดูน่ารัก มินิมอล โทนสีพาสเทลสว่าง ใช้งานง่ายบนมือถือ”
  
• ขั้นตอนที่ 3 (ติดตั้งระบบ): นำโค้ดที่ AI ให้มาไปวางใน Extensions > Apps Script ของ Google Sheets อ่านให้เข้าใจว่าแต่ละฟังก์ชันทำอะไรก่อน แล้ว Deploy เป็น Web App ตามขั้นตอนในหัวข้อ ลองทำตาม ด้านล่าง เลือกสิทธิ์ผู้เข้าใช้ให้แคบที่สุดเท่าที่งานต้องการ เช่น ระบบภายในของหน่วยงานที่ใช้ Google Workspace ให้เลือก Anyone within ตามด้วยโดเมนของหน่วยงาน แล้วส่งเฉพาะลิงก์ที่ลงท้ายด้วย /exec ให้ทีมงาน

ลองทำตาม: Web App แจ้งซ่อมแบบง่ายที่สุด

ก่อนให้ AI เขียนระบบใหญ่ ลองทำ Web App ขั้นต่ำด้วยตัวเองสักครั้ง จะเข้าใจโครงสร้างทั้งหมดและตรวจโค้ดที่ AI เขียนได้ง่ายขึ้นมาก ตัวอย่างนี้มีแค่ฟอร์มส่งเรื่องแจ้งซ่อม แล้วบันทึกลง Google Sheets ทดลองด้วยข้อมูลสมมติได้เลย

1. เตรียมชีต

สร้าง Google Sheets ใหม่ ตั้งชื่อแท็บว่า Requests แล้วพิมพ์หัวคอลัมน์ในแถวแรก 4 ช่อง ได้แก่ วันที่ ชื่อผู้แจ้ง รายละเอียด และสถานะ

2. วางโค้ดฝั่งเซิร์ฟเวอร์ (Code.gs)

ในชีตนั้นไปที่เมนู ส่วนขยาย (Extensions) > Apps Script ลบโค้ดเดิมในไฟล์ Code.gs แล้ววางโค้ดนี้

const SHEET_NAME = 'Requests';

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
    .setTitle('แจ้งซ่อมบำรุง')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

function clean_(value, maxLength) {
  const text = String(value || '').trim().slice(0, maxLength);
  // ข้อความที่ขึ้นต้นด้วย = + - @ ชีตจะตีความเป็นสูตร จึงเติม ' นำหน้าให้เป็นข้อความธรรมดา
  return /^[=+\-@]/.test(text) ? "'" + text : text;
}

function submitRequest(form) {
  const name = clean_(form.name, 100);
  const detail = clean_(form.detail, 1000);
  if (!name || !detail) {
    throw new Error('กรุณากรอกชื่อและรายละเอียดให้ครบ');
  }
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(SHEET_NAME);
  if (!sheet) {
    throw new Error('ไม่พบแท็บชื่อ ' + SHEET_NAME);
  }
  sheet.appendRow([new Date(), name, detail, 'รอดำเนินการ']);
  return 'บันทึกเรียบร้อย ขอบคุณครับ';
}

ฟังก์ชัน doGet ส่งหน้าเว็บให้ผู้ใช้ ฟังก์ชัน clean_ ตัดช่องว่าง จำกัดความยาว และกันไม่ให้ผู้กรอกแอบใส่สูตรลงชีต ชื่อที่ลงท้ายด้วยขีดล่างทำให้เป็นฟังก์ชันส่วนตัว หน้าเว็บเรียกใช้ตรง ๆ ไม่ได้ ส่วน submitRequest ตรวจว่ากรอกครบแล้วต่อแถวใหม่ท้ายชีต การตรวจทั้งหมดอยู่ฝั่งเซิร์ฟเวอร์ ผู้ใช้จึงข้ามการตรวจด้วยการแก้หน้าเว็บไม่ได้

3. สร้างหน้าเว็บ (index.html)

ในหน้า Apps Script กดปุ่ม + ข้างคำว่า Files เลือก HTML ตั้งชื่อว่า index แล้ววางโค้ดนี้

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      body { font-family: sans-serif; max-width: 480px; margin: 24px auto; padding: 0 16px; }
      input, textarea, button { width: 100%; box-sizing: border-box; margin-top: 8px; padding: 10px; font: inherit; }
      button { border: 0; border-radius: 8px; background: #5b42d6; color: #fff; }
    </style>
  </head>
  <body>
    <h1>แจ้งซ่อมบำรุง</h1>
    <form id="request-form">
      <input name="name" maxlength="100" placeholder="ชื่อผู้แจ้ง" required>
      <textarea name="detail" rows="4" maxlength="1000" placeholder="รายละเอียดงานซ่อม" required></textarea>
      <button type="submit">ส่งเรื่อง</button>
    </form>
    <p id="message"></p>
    <script>
      var form = document.getElementById('request-form');
      var button = form.querySelector('button');
      var message = document.getElementById('message');

      form.addEventListener('submit', function (event) {
        event.preventDefault();
        button.disabled = true;
        message.textContent = 'กำลังบันทึก...';
        google.script.run
          .withSuccessHandler(function (text) {
            message.textContent = text;
            form.reset();
            button.disabled = false;
          })
          .withFailureHandler(function (error) {
            message.textContent = error.message;
            button.disabled = false;
          })
          .submitRequest(form);
      });
    </script>
  </body>
</html>

google.script.run คือสะพานที่หน้าเว็บใช้เรียกฟังก์ชันใน Code.gs เมื่อส่งตัวฟอร์มไปทั้งก้อน Apps Script จะแปลงช่องในฟอร์มเป็นข้อมูลตามชื่อช่อง (name และ detail) ให้เอง ปุ่มส่งถูกปิดไว้ระหว่างบันทึก เพื่อกันการกดซ้ำแล้วได้ข้อมูลซ้ำสองแถว

4. Deploy เป็น Web App

1. กด Deploy > New deployment กดรูปเฟืองข้าง Select type แล้วเลือก Web app
2. Execute as เลือก Me สคริปต์จะเขียนชีตด้วยสิทธิ์ของเจ้าของ ผู้ใช้จึงไม่ต้องมีสิทธิ์แก้ไขชีตโดยตรง
3. Who has access เลือก Only myself ไว้ก่อนระหว่างทดสอบ
4. กด Deploy แล้วอนุญาตสิทธิ์ตามที่ Google ถาม ถ้าเจอหน้าเตือนว่าแอปยังไม่ได้รับการยืนยัน (Google hasn’t verified this app) ให้กด Advanced แล้วเลือก Go to ชื่อโปรเจกต์ (unsafe) ได้เฉพาะกรณีที่เป็นสคริปต์ที่เราเขียนและตรวจเอง ห้ามกดอนุญาตสคริปต์ของคนที่ไม่รู้จัก
5. คัดลอกลิงก์ Web app ที่ลงท้ายด้วย /exec ลิงก์นี้คือลิงก์ที่ส่งให้ผู้ใช้ ส่วนลิงก์ /dev ในเมนู Test deployments ใช้ทดสอบได้เฉพาะคนที่มีสิทธิ์แก้สคริปต์
6. ทุกครั้งที่แก้โค้ด ต้องไปที่ Deploy > Manage deployments กดรูปดินสอ แล้วเลือก Version เป็น New version ลิงก์ /exec เดิมจึงจะใช้โค้ดใหม่

เลือกสิทธิ์ผู้เข้าใช้ให้แคบที่สุดเท่าที่งานต้องการ

เมื่อเข้าใจโครงนี้แล้ว ค่อยให้ AI ต่อยอดเป็นหน้าแสดงรายการ แยกตามสถานะ หรือปุ่มอนุมัติหลายรายการ แล้วตรวจโค้ดตามรายการ “ก่อนนำไปใช้กับงานจริง” ท้ายบทความทุกครั้ง อ่านรายละเอียดการ Deploy และสิทธิ์ทั้งหมดได้ที่ คู่มือ Web Apps ของ Google Apps Script

⚠️ ข้อควรระวังในการทำ Web App ส่วนกลาง

แม้ระบบนี้จะสะดวกสบายมาก แต่เมื่อเปิด Web App ให้คนอื่นใช้ โดยเฉพาะสิทธิ์ Anyone ที่ใครมีลิงก์ก็เข้าได้โดยไม่ต้องล็อกอิน มีกฎเหล็กที่ต้องระวังครับ:

1. สิทธิ์การเข้าถึงหลังบ้าน: ตรวจสอบให้มั่นใจว่าคุณแชร์ลิงก์เฉพาะที่เป็นลิงก์ Web App (ลิงก์ที่ลงท้ายด้วย /exec) ห้ามแชร์ลิงก์ตัวแก้ไข Sheets หลังบ้านให้คนอื่นเด็ดขาด
2. การดักจับข้อผิดพลาด (Error Handling): สั่ง AI ให้เขียนโค้ดป้องกันการกรอกข้อมูลว่างเปล่า (Validation) เช่น หากผู้ใช้งานไม่กรอก “ชื่อผู้แจ้ง” ระบบจะไม่ยอมให้กดส่ง เพื่อป้องกันไม่ให้ข้อมูลหลังบ้านของคุณแหว่งหรือสกปรก

บทสรุป

การเปลี่ยน Google Sheets ให้เป็น Web App คือก้าวสำคัญที่เปลี่ยนให้คุณจาก “คนใช้ AI ทั่วไป” กลายเป็น “นักสร้างโซลูชัน (Solution Creator)” ประจำองค์กร ช่วยจัดหน้าจอให้ทีมใช้งานง่ายขึ้น แต่ยังต้องทดสอบความเข้าใจของผู้ใช้ เพราะหน้าต่างที่เขาเห็นจะมีเพียงแค่ปุ่มกดง่ายๆ ส่วนความซับซ้อนและการประมวลผลอัจฉริยะทั้งหมด ถูกซ่อนไว้ใต้พลังของ AI และ Sheets หลังบ้านของคุณอย่างเป็นระเบียบ

สัปดาห์นี้ ลองหยิบ Google Sheets ตัวที่ทีมงานของคุณต้องใช้ร่วมกันบ่อยๆ มาลองเปลี่ยนเป็น Web App หน้าบ้านดูสักตัวสิครับ แล้วคุณจะพบว่าประสิทธิภาพในการทำงานของทีมจะพุ่งทะยานขึ้นอย่างแน่นอน!

✍️ เขียนโดย: ตระกูล อ่อนรัตน์

🌐 เว็บไซต์: trakun.com

ก่อนนำไปใช้กับงานจริง

• ตรวจสิทธิ์การอ่านและแก้ไขแต่ละรายการฝั่งเซิร์ฟเวอร์ การแยกแท็บบนหน้าจอไม่ใช่การป้องกันข้อมูลข้ามแผนก
• คำสั่งอนุมัติต้องตรวจผู้มีสิทธิ์ ยืนยันการเปลี่ยนสถานะ ป้องกันการกดซ้ำ และบันทึกประวัติ ห้ามเปลี่ยนข้อมูลจากลิงก์ GET เพียงอย่างเดียว
• ใช้ข้อมูลสมมติทดสอบทั้งผู้มีสิทธิ์และไม่มีสิทธิ์ ไม่ส่งรหัสผ่าน โทเคน หรือข้อมูลภายในไปยัง AI หรือหน้าเว็บฝั่งผู้ใช้

ภาพประกอบเป็นภาพอธิบายแนวคิด ไม่ใช่ภาพหน้าจอจากระบบจริง ตัวอย่างโค้ดในหัวข้อ “ลองทำตาม” เป็นโครงขั้นต่ำสำหรับฝึก ควรทดสอบด้วยข้อมูลสมมติก่อนนำไปใช้กับงานจริง

อ้างอิง: เอกสาร Google Apps Script Web Apps และ HTML Service: Communicate with Server Functions — ตรวจข้อมูล 18 ตุลาคม 2026

• Facebook
• X
• Line