สร้างเว็บแอปกรอกข้อมูลด้วย Google Sheets + Apps Script (ฉบับมือใหม่)

เรียนรู้วิธีสร้างเว็บฟอร์มสำหรับกรอกข้อมูลที่บันทึกลง Google Sheets แบบเรียลไทม์ โดยใช้ Google Apps Script เหมาะสำหรับผู้เริ่มต้นที่ไม่มีพื้นฐานโปรแกรมมิ่ง

August 27, 2025

เคยไหมที่อยากทำเว็บฟอร์มง่ายๆ สำหรับกรอกข้อมูล เช่น ฟอร์มลงทะเบียน, ฟอร์มบันทึกข้อมูลลูกค้า หรือฟอร์มสำรวจเล็กๆ แต่ไม่อยากไปยุ่งกับเรื่องเซิร์ฟเวอร์, ฐานข้อมูล หรือการเขียนโค้ดที่ซับซ้อน?

บทความนี้จะเปลี่ยน Google Sheets ที่คุณคุ้นเคยให้กลายเป็น ฐานข้อมูล และใช้ Google Apps Script (เครื่องมือเขียนโค้ดฟรีที่ติดมากับ Google) เพื่อสร้างหน้าเว็บสำหรับกรอกข้อมูล โดยข้อมูลทั้งหมดจะถูกบันทึกลงใน Google Sheets ของคุณแบบเรียลไทม์

Google Sheets คือฐานข้อมูล

เราจะใช้ Google Sheets ที่คุ้นเคยเป็นที่เก็บข้อมูลทั้งหมด ไม่ต้องตั้งค่าฐานข้อมูลให้วุ่นวาย จัดการและดูข้อมูลง่ายเหมือนใช้สเปรดชีตทั่วไป

Apps Script คือสมองกล

Google Apps Script จะทำหน้าที่เป็นโค้ดฝั่ง “หลังบ้าน” (Backend) คอยรับข้อมูลจากหน้าเว็บฟอร์มแล้วนำไปบันทึกลงในชีตที่เรากำหนด

HTML คือหน้าตาเว็บ

เราจะใช้โค้ด HTML พื้นฐานในการสร้างหน้าเว็บฟอร์ม (Frontend) ที่ให้ผู้ใช้กรอกข้อมูล ซึ่งเป็นมาตรฐานการสร้างเว็บที่เรียนรู้ง่าย

ฟรีและพร้อมใช้งาน

เครื่องมือทุกอย่างที่เราใช้ในบทความนี้มีให้ใช้ฟรี แค่มีบัญชี Google (Gmail) ก็สามารถเริ่มต้นสร้างเว็บแอปของตัวเองได้ทันที

ขั้นตอนที่ 1: เตรียม Google Sheet ของเรา

ก่อนอื่น เราต้องสร้าง “บ้าน” ให้ข้อมูลของเราก่อน ซึ่งก็คือ Google Sheet นั่นเอง

ไปที่ sheets.google.com แล้วสร้างสเปรดชีตใหม่
ตั้งชื่อไฟล์ตามใจชอบ เช่น “WebApp Data”
ที่ชีทแรก (Sheet1) ให้เปลี่ยนชื่อเป็น Data (สำคัญมาก เพราะเราจะอ้างอิงชื่อนี้ในโค้ด)
ในแถวแรกของชีท Data ให้สร้างหัวข้อคอลัมน์ที่เราต้องการเก็บข้อมูล:
- column A1: Timestamp (สำหรับเก็บเวลาที่ข้อมูลถูกส่งมา)
- column B1: name
- column C1: phone
- column D1: email

column อื่นๆ ตามที่เราต้องการให้ข้อมูลถูกบันทึกที่ google sheet

💡 ข้อควรรู้: ชื่อชีทต้องตรงกัน

โค้ด Apps Script ของเราถูกเขียนให้มองหาชีทที่มีชื่อเฉพาะเจาะจง หากชื่อชีทในไฟล์ Google Sheets ของคุณไม่ตรงกับชื่อที่ระบุในโค้ด โปรแกรมจะทำงานผิดพลาดทันที
บรรทัดที่สำคัญคือ: const sheet = ss.getSheetByName(‘Data’);
ดังนั้น คุณต้องมั่นใจว่าชีทที่จะใช้เก็บข้อมูลใน Google Sheets ของคุณนั้น ตั้งชื่อว่า Data เป๊ะๆ (ตัวพิมพ์เล็ก-ใหญ่มีความสำคัญ) หากต้องการเปลี่ยนชื่อ ก็ต้องแก้ทั้งในชีทและในโค้ดให้ตรงกันครับ

ตอนนี้ Google Sheet ของเราพร้อมรับข้อมูลแล้ว ✅

ขั้นตอนที่ 2: เปิดโปรแกรมเขียนโค้ด (Apps Script)

เครื่องมือนี้ซ่อนอยู่ใน Google Sheets ของเรานี่เอง

ในไฟล์ Google Sheet ที่เราสร้างไว้ ไปที่เมนู Extensions (ส่วนขยาย) > Apps Script
หน้าต่างใหม่จะเปิดขึ้นมา นี่คือหน้าสำหรับเขียนโค้ดของเรา ในหน้าต่างนี้คุณจะเห็นไฟล์ชื่อ Code.gs

ขั้นตอนที่ 3: เขียนโค้ดฝั่ง “หลังบ้าน” (ไฟล์ Code.gs)

ไฟล์ Code.gs จะทำหน้าที่เป็นเหมือน “สมอง” ของเว็บแอป คอยรับคำสั่งและจัดการข้อมูล

ลบโค้ดเดิมทิ้งทั้งหมด แล้วคัดลอกโค้ดข้างล่างนี้ไปวางแทนที่:

// ฟังก์ชันนี้จะทำงานเมื่อมีคนเปิดหน้าเว็บแอปของเรา
function doGet() {
  // คำสั่งให้ไปแสดงผลหน้าเว็บที่ชื่อว่า index.html
  return HtmlService.createHtmlOutputFromFile('index');
}

// ฟังก์ชันนี้จะทำงานเมื่อมีการกด "บันทึกข้อมูล" จากหน้าเว็บ
function saveData(formData) {
  try {
    // เข้าถึงไฟล์ Google Sheet ที่เราทำงานอยู่
    const ss = SpreadsheetApp.getActiveSpreadsheet();
    // เลือกชีทที่ชื่อว่า 'Data'
    const sheet = ss.getSheetByName('Data');
    
    // สร้างแถวข้อมูลใหม่
    // new Date() คือการดึงเวลาปัจจุบัน
    // formData.name, formData.phone, formData.email คือข้อมูลที่ส่งมาจากฟอร์ม
    const newRow = [
      new Date(), 
      formData.name, 
      formData.phone, 
      formData.email
    ];
    
    // นำแถวข้อมูลใหม่ไปต่อท้ายข้อมูลที่มีอยู่เดิมในชีท
    sheet.appendRow(newRow);
    
    // ส่งข้อความกลับไปบอกหน้าเว็บว่า "บันทึกสำเร็จ"
    return "บันทึกข้อมูลสำเร็จ";
    
  } catch (error) {
    // หากเกิดข้อผิดพลาด ให้ส่งข้อความข้อผิดพลาดกลับไป
    return "เกิดข้อผิดพลาด: " + error.toString();
  }
}

ฟังก์ชัน doGet()

เป็นฟังก์ชันมาตรฐานของ Google Apps Script ที่จะทำงานโดยอัตโนมัติเมื่อ URL ของเว็บแอปถูกเรียก (เมื่อมีคนเปิดหน้าเว็บ) หน้าที่ของมันในโค้ดนี้คือการบอกให้ Apps Script ไปเอาไฟล์ index.html มาแสดงผลเป็นหน้าเว็บให้ผู้ใช้เห็น

ฟังก์ชัน saveData(formData)

เป็นฟังก์ชันที่เราสร้างขึ้นเองเพื่อจัดการข้อมูลที่ถูกส่งมาจากฟอร์ม มันจะทำหน้าที่ 3 อย่างหลักๆ คือ:

เชื่อมต่อชีต: ใช้คำสั่ง SpreadsheetApp เพื่อเข้าถึงไฟล์ Google Sheet และชีตที่ชื่อว่า Data
เตรียมข้อมูล: นำข้อมูลที่ได้รับ (formData) มาจัดเรียงเป็นแถวใหม่ (newRow) พร้อมกับเพิ่มเวลาปัจจุบัน (new Date()) เข้าไปในคอลัมน์แรก
บันทึกข้อมูล: ใช้คำสั่ง sheet.appendRow() เพื่อนำข้อมูลแถวใหม่ไปต่อท้ายข้อมูลที่มีอยู่เดิมในชีต
ส่งผลลัพธ์กลับ: ส่งข้อความ “บันทึกข้อมูลสำเร็จ” กลับไปแสดงที่หน้าเว็บ

ขั้นตอนที่ 4: สร้างหน้าเว็บฟอร์ม “หน้าบ้าน” (ไฟล์ index.html)

ตอนนี้เราจะมาสร้างหน้าตาของเว็บฟอร์มที่ผู้ใช้จะเห็นกันครับ ในหน้าต่าง Apps Script ที่มุมบนซ้าย ให้คลิกที่เครื่องหมายบวก (+) ข้างๆคำว่า “Files” เลือก HTML และตั้งชื่อไฟล์ว่า index (ไม่ต้องใส่ .html) แล้วกด Enter ลบโค้ดเดิมทิ้งทั้งหมด แล้วคัดลอกโค้ดข้างล่างนี้ไปวางแทนที่:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      /* ทำให้หน้าเว็บดูดีขึ้นนิดหน่อย */
      body { font-family: Arial, sans-serif; margin: 20px; }
      form { display: flex; flex-direction: column; width: 300px; }
      input, button { margin-bottom: 10px; padding: 8px; font-size: 16px; }
      button { cursor: pointer; background-color: #4CAF50; color: white; border: none; }
      #status { margin-top: 15px; font-weight: bold; }
    </style>
  </head>
  <body>
    <h1>ฟอร์มบันทึกข้อมูล</h1>
    
    <form id="myForm">
      <label for="name">ชื่อ-สกุล:</label>
      <input type="text" id="name" name="name" required>
      
      <label for="phone">เบอร์โทร:</label>
      <input type="tel" id="phone" name="phone">
      
      <label for="email">อีเมล:</label>
      <input type="email" id="email" name="email" required>
      
      <button type="submit">บันทึกข้อมูล</button>
    </form>
    
    <div id="status"></div>

    <script>
      document.getElementById("myForm").addEventListener("submit", function(e) {
        e.preventDefault(); 
        const statusDiv = document.getElementById("status");
        statusDiv.textContent = "กำลังบันทึก...";

        // คำสั่งพิเศษ! ใช้เรียกฟังก์ชันใน Code.gs จากหน้าเว็บ
        google.script.run
          .withSuccessHandler(function(response) {
            statusDiv.textContent = response; 
            document.getElementById("myForm").reset(); 
          })
          .withFailureHandler(function(error) {
            statusDiv.textContent = "เกิดข้อผิดพลาด: " + error.message;
          })
          .saveData(this); // เรียกใช้ฟังก์ชัน saveData และส่งข้อมูลฟอร์มไป
      });
    </script>
  </body>
</html>

ส่วนของ <form>

นี่คือโครงสร้างของฟอร์มที่เราเห็น แต่ละช่องกรอกข้อมูล (<input>) จะมีป้ายชื่อ name ที่สำคัญมาก เช่น name=“name”, name=“phone” ซึ่งชื่อเหล่านี้จะถูกใช้เพื่ออ้างอิงข้อมูลในไฟล์ Code.gs (เช่น formData.name)

ส่วนของ <script>

นี่คือ “ตัวเชื่อม” ที่สำคัญที่สุด! มันใช้ JavaScript เพื่อดักจับเหตุการณ์เมื่อผู้ใช้กดปุ่ม “บันทึกข้อมูล” (submit) และทำงานดังนี้:

ป้องกันการรีเฟรช: e.preventDefault() ป้องกันไม่ให้หน้าเว็บโหลดใหม่หลังกดปุ่ม
เรียกใช้โค้ดหลังบ้าน: google.script.run เป็นคำสั่งพิเศษที่ทำให้หน้าเว็บสามารถเรียกใช้ฟังก์ชันในไฟล์ Code.gs ได้
จัดการผลลัพธ์: .withSuccessHandler() จะทำงานเมื่อฟังก์ชัน saveData ทำงานเสร็จและส่งข้อความกลับมา ส่วน .withFailureHandler() จะทำงานเมื่อเกิดข้อผิดพลาด
ส่งข้อมูล: .saveData(this) คือการเรียกฟังก์ชัน saveData และส่งข้อมูลทั้งหมดในฟอร์ม (this) ไปให้

ขั้นตอนที่ 5: เผยแพร่ (Deploy) ให้เป็นเว็บแอป

ตอนนี้โค้ดของเราพร้อมแล้ว ถึงเวลาเอามันขึ้นออนไลน์ให้คนอื่นใช้งานได้

ที่มุมบนขวาของหน้าจอ Apps Script คลิกที่ปุ่ม Deploy สีฟ้า (ภาษาไทยจะใช้คำว่า “การทำให้ใช้งานได้”) > เลือก New deployment (“การทำให้ใช้งานได้รายการใหม่”)
คลิกที่รูป เฟือง (⚙️) ข้างๆคำว่า “Select type (เลือกประเภท)” แล้วเลือกประเภทเป็น Web app.

ตั้งค่าดังนี้:

Description: (ไม่บังคับ) ใส่คำอธิบายสั้นๆ เช่น “Web App กรอกข้อมูล”
Execute as: เลือก Me (บัญชีของคุณ)
Who has access: เลือก Anyone (เพื่อให้ทุกคนที่มีลิงก์สามารถเข้าได้)
คลิกปุ่ม Deploy.

💡 ข้อควรรู้: การให้สิทธิ์ครั้งแรก (Authorize access)

ในการ Deploy ครั้งแรก Google จะขออนุญาตให้สคริปต์นี้เข้าถึง Google Sheets ของคุณ

คลิก Authorize access
เลือกบัญชี Google ของคุณ
คุณอาจเห็นหน้าจอเตือนว่า “Google hasn’t verified this app” ไม่ต้องตกใจ เพราะเราเป็นคนสร้างแอปนี้เอง ให้คลิก Advanced > แล้วคลิก Go to [ชื่อโปรเจกต์ของคุณ] (unsafe)
กด Allow เพื่ออนุญาต

เมื่อให้สิทธิ์สำเร็จ คุณจะได้รับ Web app URL มา ให้คัดลอกลิงก์นี้เก็บไว้ นี่คือลิงก์เว็บแอปของคุณ สามาถนำไปเผยแพร่เพื่อให้ผู้อื่นเข้าถึงเว็บแอปของเราได้

ทดสอบการใช้งาน

เปิดลิงก์ Web app URL ที่คุณคัดลอกมาในเบราว์เซอร์
คุณจะเห็นหน้าฟอร์มที่เราสร้างไว้ ลองกรอกข้อมูล แล้วกดปุ่ม “บันทึกข้อมูล”
รอสักครู่ จะมีข้อความ “บันทึกข้อมูลสำเร็จ” ปรากฏขึ้นมา
กลับไปดูที่ไฟล์ Google Sheets ของคุณ จะเห็นว่ามีข้อมูลแถวใหม่เพิ่มเข้ามาพร้อมกับเวลาที่บันทึก

สรุปและก้าวต่อไป ยินดีด้วย คุณเพิ่งสร้างเว็บแอปสำหรับกรอกข้อมูลด้วยตัวเองสำเร็จแล้ว วิธีนี้มีทั้งข้อดีและข้อจำกัดที่ควรรู้

ฟรี 100%: ไม่ต้องเสียค่าเซิร์ฟเวอร์หรือฐานข้อมูล
ง่ายสำหรับมือใหม่: ไม่ต้องติดตั้งโปรแกรมหรือตั้งค่าสภาพแวดล้อมที่ซับซ้อน
เชื่อมต่อกับ Google Ecosystem: นำข้อมูลไปใช้ต่อกับบริการอื่นของ Google ได้ง่าย
ปลอดภัย: ทำงานบนโครงสร้างพื้นฐานที่ปลอดภัยของ Google

หน้าตาปรับแต่งได้จำกัด: การปรับแต่ง UI/UX ให้สวยงามซับซ้อนทำได้ยากกว่าเฟรมเวิร์คสมัยใหม่
ความเร็วในการตอบสนอง: อาจไม่เร็วเท่าเว็บแอปที่ทำงานบนเซิร์ฟเวอร์โดยตรง เป็นข้อเสียที่อาจทำให้ขัดใจเวลาเห็นเว็บโหลดช้า

นี่เป็นเพียงจุดเริ่มต้นที่แสดงให้เห็นถึงพลังของ Google Sheets และ Apps Script คุณสามารถนำไปต่อยอดได้อีกมากมาย เช่น:

เพิ่มช่องกรอกข้อมูล: แค่เพิ่ม <input> ในไฟล์ index.html และเพิ่มคอลัมน์ใน Google Sheet กับในโค้ด saveData
ปรับแต่งหน้าตา: ใช้ CSS ในแท็ก <style> เพื่อทำให้หน้าเว็บสวยงามขึ้น
ทำระบบแจ้งเตือน: เพิ่มโค้ดให้ส่งอีเมลแจ้งเตือนทุกครั้งที่มีคนกรอกข้อมูลเข้ามา

แก้ปัญหาที่พบบ่อย (Troubleshooting)

เป็นเรื่องปกติมากที่การทำตามขั้นตอนครั้งแรกอาจเจอปัญหาเล็กๆ น้อยๆ ไม่ต้องกังวลครับ ปัญหาส่วนใหญ่มักเกิดจากจุดเล็กๆ ที่มองข้ามไป ลองตรวจสอบตามอาการยอดฮิตเหล่านี้ดูครับ

อาการที่ 1: กดปุ่ม “บันทึก” แล้วข้อมูลไม่เข้า Google Sheet (แต่หน้าเว็บไม่ขึ้น Error)

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

💡 สาเหตุและวิธีแก้ไข

ชื่อชีทไม่ตรงกัน (พบบ่อยที่สุด): ตรวจสอบว่าคุณได้เปลี่ยนชื่อชีทใน Google Sheets เป็น Data แล้วหรือยัง? ชื่อจะต้องตรงกับในโค้ด Code.gs เป๊ะๆ (ตัวพิมพ์ใหญ่-เล็กมีผล)
- โค้ดบอกว่า: ss.getSheetByName(‘Data’);
- ชีทของคุณต้องชื่อ: Data (ไม่ใช่ data หรือ Sheet1)
name ในฟอร์ม HTML ไม่ตรงกับในโค้ด .gs: ตรวจสอบว่าป้ายชื่อ name ในแท็ก <input> ของไฟล์ index.html ตรงกับที่คุณเรียกใช้ในไฟล์ Code.gs หรือไม่
- ตัวอย่าง: ถ้าใน HTML เป็น <input name=“username”>
- แต่ใน Code.gs คุณเขียนว่า formData.name แบบนี้ข้อมูลจะไม่เข้าครับ ต้องแก้ให้เป็น formData.username ให้ตรงกัน

อาการที่ 2: หน้าเว็บขึ้น Error สีแดงว่า “Script function not found: saveData”

เมื่อกดปุ่มบันทึกแล้วมีกล่องข้อความสีแดงขึ้นมาที่หน้าเว็บฟอร์ม

💡 สาเหตุและวิธีแก้ไข

ปัญหานี้เกิดจากการพิมพ์ชื่อฟังก์ชันผิด ทำให้ JavaScript ในหน้าเว็บ (index.html) เรียกหาฟังก์ชันหลังบ้าน (Code.gs) ไม่เจอ

ตรวจสอบไฟล์ Code.gs: ดูว่าฟังก์ชันของคุณชื่อ function saveData(formData) เป๊ะๆ หรือไม่ (ไม่ใช่ savedata หรือ SaveData)
ตรวจสอบไฟล์ index.html: ในส่วน <script> ดูบรรทัดสุดท้ายของการเรียกใช้ ต้องเป็น .saveData(this) เป๊ะๆ เช่นกัน

สรุป: ชื่อฟังก์ชันในทั้งสองไฟล์ต้องสะกดเหมือนกันทุกตัวอักษร

อาการที่ 3: แก้ไขโค้ดแล้ว แต่หน้าเว็บยังแสดงผลแบบเดิม

คุณอาจจะเพิ่มช่องกรอกข้อมูลใหม่ หรือเปลี่ยนข้อความในหน้าเว็บ แต่พอเปิดลิงก์ URL ดูกลับไม่เห็นการเปลี่ยนแปลงใดๆ

💡 สาเหตุและวิธีแก้ไข

นี่เป็นคอนเซ็ปต์ที่สำคัญที่สุดของการใช้ Apps Script Web App ครับ ทุกครั้งที่คุณแก้ไขโค้ด คุณต้องทำการ Deploy ใหม่เสมอ

การ Deploy เปรียบเสมือนการ “กด Save เวอร์ชั่นใหม่” เพื่อเอาขึ้นออนไลน์ ลิงก์ URL เดิมจะอ้างอิงถึงเวอร์ชั่นเก่าที่คุณ Deploy ไว้เสมอจนกว่าคุณจะ Deploy ทับด้วยเวอร์ชั่นใหม่

วิธีแก้ไข:

ไปที่หน้า Apps Script
คลิกที่ปุ่ม Deploy > เลือก New deployment
ทำตามขั้นตอนเดิมอีกครั้ง ระบบจะให้ URL ใหม่ หรืออัปเดต URL เดิมให้ (แนะนำให้ใช้ URL ใหม่เสมอเพื่อความแน่นอน)

เคล็ดลับ: ในระหว่างการพัฒนา ให้ใช้ “Test deployments” จะสะดวกกว่า แต่สำหรับบทความนี้ การใช้ “New deployment” จะเข้าใจง่ายที่สุดสำหรับมือใหม่ครับ

อาการที่ 4: เปิดลิงก์ URL แล้วเป็นหน้าขาวๆ หรือหน้า Error ของ Google

หน้าเว็บไม่แสดงฟอร์มที่เราสร้างไว้เลย

💡 สาเหตุและวิธีแก้ไข

พิมพ์ชื่อฟังก์ชัน doGet ผิด: ฟังก์ชันหลักที่ใช้แสดงหน้าเว็บต้องชื่อ doGet เท่านั้น ตรวจสอบในไฟล์ Code.gs ว่าคุณไม่ได้พิมพ์เป็น DoGet, Doget หรือชื่ออื่น
ตั้งชื่อไฟล์ HTML ผิด: ในโค้ด doGet เราสั่งให้เปิดไฟล์ชื่อ index (createHtmlOutputFromFile(‘index’)) ดังนั้นไฟล์ HTML ของคุณต้องชื่อ index.html เท่านั้น (และต้องเป็นตัวพิมพ์เล็กทั้งหมด)
ตั้งค่าสิทธิ์การเข้าถึงผิด: ตอน Deploy ตรงหัวข้อ “Who has access” คุณอาจจะเลือกเป็น “Only myself” ลองกลับไปแก้การ Deploy (Manage deployments) แล้วตั้งค่าเป็น “Anyone”

ให้ AI ช่วยเขียนโค้ดสร้างเว็บแอปในแบบของคุณ

เมื่อคุณเข้าใจโครงสร้างพื้นฐานของเว็บแอป (HTML + Apps Script) แล้ว คุณไม่จำเป็นต้องเขียนโค้ดทั้งหมดด้วยตัวเองเสมอไป คุณสามารถใช้ AI อย่าง ChatGPT, Google Gemini, หรือ Claude มาเป็นผู้ช่วยเขียนโค้ดให้คุณได้ แต่กุญแจสำคัญคือการเขียน “คำสั่ง” หรือ “Prompt” ที่ดีและชัดเจน

💡 โครงสร้าง Prompt ที่ดีสำหรับสั่ง AI เขียนโค้ด

AI จะทำงานได้ดีที่สุดเมื่อเราให้ข้อมูลที่ครบถ้วนและเป็นระบบ ลองใช้โครงสร้างนี้เป็นแม่แบบในการสั่งงาน:

บอกบทบาทและเป้าหมาย (Role & Goal): เริ่มต้นด้วยการบอกให้ AI รู้ว่ามันต้องทำอะไร และเป้าหมายสุดท้ายคืออะไร
- ตัวอย่าง: “คุณคือผู้เชี่ยวชาญด้าน Google Apps Script ฉันต้องการสร้าง Web App สำหรับ…”
ระบุข้อมูลที่ต้องการเก็บ (Define the Data): บอกให้ชัดเจนว่าใน Google Sheet จะมีคอลัมน์อะไรบ้าง นี่คือการออกแบบ “ฐานข้อมูล” ของเรา
- ตัวอย่าง: “ข้อมูลที่จะบันทึกลง Google Sheet มีดังนี้: Timestamp, ชื่องาน, วันที่จัดงาน, ชื่อผู้ลงทะเบียน, อีเมล”
ออกแบบหน้าฟอร์ม (Design the Form): อธิบายหน้าตาเว็บฟอร์ม (HTML) ว่าต้องการช่องกรอกข้อมูลอะไรบ้าง บอกทั้ง “ป้ายกำกับ (Label)” และ “ประเภทของช่อง (Input Type)“
- ตัวอย่าง: “หน้าเว็บฟอร์มต้องมีช่องกรอกข้อมูลต่อไปนี้: 1. ชื่องาน (text input), 2. วันที่จัดงาน (date input), 3. ชื่อผู้ลงทะเบียน (text input), 4. อีเมล (email input)”
ให้คำสั่งทางเทคนิค (Technical Instructions): บอกรายละเอียดสำคัญที่ AI ต้องรู้
- ชื่อชีท: “ให้บันทึกข้อมูลลงในชีทที่ชื่อว่า ‘Events‘“
- การเชื่อมต่อ: “ใช้ google.script.run เพื่อส่งข้อมูลจาก HTML ไปยังฟังก์ชัน Apps Script”
- การแยกไฟล์: “ช่วยเขียนโค้ดแยกเป็น 2 ส่วน คือไฟล์ Code.gs และไฟล์ index.html”
- เพิ่มคำอธิบาย: “ช่วยใส่ Comment อธิบายการทำงานของโค้ดในแต่ละส่วนด้วย”

ตัวอย่าง Prompt ที่นำไปใช้งานได้จริง

ลองคัดลอก Prompt นี้ไปทดสอบกับ AI ที่คุณชื่นชอบได้เลย เพื่อสร้าง “เว็บแอปฟอร์มลงทะเบียนเข้าร่วมกิจกรรม”

คุณคือผู้เชี่ยวชาญด้านการเขียน Google Apps Script

ฉันต้องการสร้าง Web App สำหรับเป็นฟอร์มลงทะเบียนเข้าร่วมกิจกรรม โดยให้ข้อมูลบันทึกลงใน Google Sheet โดยอัตโนมัติ

**ความต้องการ:**

1.  **ข้อมูลที่จะบันทึกลง Google Sheet:**
    *   Timestamp (เวลาที่ลงทะเบียน)
    *   ชื่อ-สกุล (Full Name)
    *   อีเมล (Email)
    *   จำนวนผู้เข้าร่วม (Number of Attendees)

2.  **หน้าเว็บฟอร์ม (index.html):**
    *   มีช่องกรอก "ชื่อ-สกุล" (เป็น text input)
    *   มีช่องกรอก "อีเมล" (เป็น email input)
    *   มีช่องกรอก "จำนวนผู้เข้าร่วม" (เป็น number input)
    *   มีปุ่มสำหรับกด "ลงทะเบียน"

3.  **ข้อกำหนดทางเทคนิค:**
    *   ให้บันทึกข้อมูลทั้งหมดลงในชีทที่ชื่อว่า "Registrations"
    *   ใช้ `google.script.run` ในการสื่อสารระหว่าง Frontend (HTML) และ Backend (Apps Script)
    *   เมื่อบันทึกข้อมูลสำเร็จ ให้แสดงข้อความว่า "ลงทะเบียนเรียบร้อยแล้ว"
    *   ช่วยเขียนโค้ดแยกเป็น 2 ส่วนให้ชัดเจน คือส่วนของไฟล์ `Code.gs` และไฟล์ `index.html`
    *   กรุณาใส่ Comment อธิบายโค้ดในส่วนที่สำคัญด้วย

เมื่อคุณใช้ Prompt นี้ AI จะสร้างโค้ดทั้ง 2 ไฟล์มาให้คุณ ซึ่งคุณสามารถนำไปวางในโปรเจกต์ Apps Script ของคุณ, ทำการ Deploy, และใช้งานได้ทันที การเรียนรู้ที่จะสร้าง Prompt ที่ดี คือทักษะสำคัญที่จะช่วยให้คุณสร้างสรรค์โปรเจกต์ต่างๆ ได้อย่างรวดเร็วและง่ายดายยิ่งขึ้น