หัวใจของแทบทุกระบบคือ CRUD — เพิ่ม อ่าน แก้ไข ลบ ข้อมูล บทความนี้จะสอนทำ CRUD ครบวงจรด้วย Google Apps Script โดยใช้ Google Sheet เป็นฐานข้อมูล พร้อมแสดงข้อมูลเป็นตารางบนหน้าเว็บ เหมาะสำหรับผู้เริ่มต้น ═══════════════════════════════════════ 📌 1. CRUD คืออะไร (ทบทวน) ═══════════════════════════════════════ CRUD = การจัดการข้อมูล 4 อย่างพื้นฐาน • C = Create → เพิ่มข้อมูล • R = Read → อ่าน/แสดงข้อมูล • U = Update → แก้ไขข้อมูล • D = Delete → ลบข้อมูล ถ้าทำ CRUD เป็น จะสร้างระบบได้แทบทุกชนิด (ลงทะเบียน, แจ้งซ่อม, สินค้า ฯลฯ) ═══════════════════════════════════════ 📊 2. เตรียม Google Sheet ═══════════════════════════════════════ สร้าง Sheet ใหม่ ตั้งชื่อชีตว่า "data" และใส่หัวคอลัมน์ที่แถวแรก: A1 = id B1 = name C1 = email โครงสร้างนี้: คอลัมน์ id ใช้ระบุแต่ละแถวไม่ให้ซ้ำ (สำคัญมากสำหรับ Update/Delete) ═══════════════════════════════════════ ➕ 3. CREATE — เพิ่มข้อมูล ═══════════════════════════════════════
javascript 
function createRow(name, email) {
  var sheet = SpreadsheetApp.openById("SHEET_ID").getSheetByName("data");

  // สร้าง id ใหม่จากเวลาปัจจุบัน (ไม่ซ้ำ)
  var id = new Date().getTime();

  sheet.appendRow([id, name, email]);
  return id;
}
═══════════════════════════════════════ 🔍 4. READ — อ่านข้อมูลทั้งหมด ═══════════════════════════════════════
javascript 
function readAll() {
  var sheet = SpreadsheetApp.openById("SHEET_ID").getSheetByName("data");
  var values = sheet.getDataRange().getValues();

  // แปลงเป็น array ของ object (ข้ามแถวหัวตาราง)
  var result = [];
  for (var i = 1; i < values.length; i++) {
    result.push({
      id: values[i][0],
      name: values[i][1],
      email: values[i][2]
    });
  }
  return result;
}
═══════════════════════════════════════ ✏️ 5. UPDATE — แก้ไขข้อมูล (ค้นหาแถวด้วย id) ═══════════════════════════════════════
javascript 
function updateRow(id, newName, newEmail) {
  var sheet = SpreadsheetApp.openById("SHEET_ID").getSheetByName("data");
  var values = sheet.getDataRange().getValues();

  for (var i = 1; i < values.length; i++) {
    if (values[i][0] == id) {          // เจอแถวที่ id ตรงกัน
      // แถวจริงใน Sheet = i + 1 (เพราะเริ่มนับ 1 และมีหัวตาราง)
      sheet.getRange(i + 1, 2).setValue(newName);   // คอลัมน์ B
      sheet.getRange(i + 1, 3).setValue(newEmail);  // คอลัมน์ C
      return true;
    }
  }
  return false;   // ไม่พบ id
}
═══════════════════════════════════════ 🗑️ 6. DELETE — ลบข้อมูล ═══════════════════════════════════════
javascript 
function deleteRow(id) {
  var sheet = SpreadsheetApp.openById("SHEET_ID").getSheetByName("data");
  var values = sheet.getDataRange().getValues();

  for (var i = 1; i < values.length; i++) {
    if (values[i][0] == id) {
      sheet.deleteRow(i + 1);   // ลบแถวจริงใน Sheet
      return true;
    }
  }
  return false;
}
═══════════════════════════════════════ 🌐 7. แสดงข้อมูลเป็นตารางบนหน้าเว็บ ═══════════════════════════════════════ ฝั่งเซิร์ฟเวอร์ (Code.gs) มี doGet และ readAll อยู่แล้ว ฝั่งหน้าเว็บเรียก readAll() ผ่าน google.script.run แล้ววาดตาราง
html 
<body>
  <h2>รายชื่อ</h2>
  <table id="myTable" border="1"></table>

  <script>
    // เมื่อโหลดหน้า ให้ดึงข้อมูลมาแสดง
    window.onload = function() {
      google.script.run.withSuccessHandler(showTable).readAll();
    };

    function showTable(rows) {
      var html = "<tr><th>ชื่อ</th><th>อีเมล</th></tr>";
      rows.forEach(function(r) {
        html += "<tr><td>" + r.name + "</td><td>" + r.email + "</td></tr>";
      });
      document.getElementById("myTable").innerHTML = html;
    }
  </script>
</body>
*** withSuccessHandler(ฟังก์ชัน) = สั่งให้ทำงานเมื่อได้ข้อมูลกลับมาจากเซิร์ฟเวอร์ *** ═══════════════════════════════════════ 🔗 8. รวมทุกอย่าง (Code.gs) ═══════════════════════════════════════
javascript 
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

// วาง 4 ฟังก์ชัน CRUD (createRow, readAll, updateRow, deleteRow) ไว้ในไฟล์นี้
// หน้าเว็บเรียกผ่าน google.script.run.<ชื่อฟังก์ชัน>(...)
═══════════════════════════════════════ ✅ 9. สรุป ═══════════════════════════════════════ • ใช้คอลัมน์ id ระบุแต่ละแถว (จำเป็นสำหรับ Update/Delete) • Create = appendRow, Read = getValues, Update = setValue, Delete = deleteRow • แถวจริงใน Sheet = index ใน array + 1 (เพราะมีหัวตาราง) • หน้าเว็บคุยกับเซิร์ฟเวอร์ผ่าน google.script.run + withSuccessHandler จำไว้: ทำ CRUD ให้ได้ 1 ระบบ แล้วคุณจะประยุกต์สร้างระบบอื่นได้ทั้งหมด 🗂️