คู่มือพัฒนา Web App ด้วย Google Sheets + AI สำหรับนักวิชาการส่งเสริมการเกษตร

// 1. ระบุรหัส Google Sheet ของคุณ
const SPREADSHEET_ID = "ใส่รหัส_SPREADSHEET_ID_ของคุณตรงนี้";
const SHEET_NAME = "Sheet1";

// 2. ฟังก์ชันหลักสำหรับเสิร์ฟหน้าเว็บแอป
function doGet(e) {
  const page = e && e.parameter && e.parameter.page ? e.parameter.page : '';
  const templateName = page === 'dashboard' ? 'Dashboard' : 'Index';
  return HtmlService.createTemplateFromFile(templateName)
      .evaluate()
      .setTitle("ระบบจัดการข้อมูลอัจฉริยะ")
      .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

// 3. ฟังก์ชันสำหรับบันทึกข้อมูลต่อท้าย
function saveData(payload) {
  try {
    const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
    const sheet = ss.getSheetByName(SHEET_NAME);
    const timestamp = new Date();
    
    // ต่อท้ายแถวใหม่ลงในชีท
    sheet.appendRow([
      timestamp,
      payload.date,
      payload.farmerName,
      payload.tambon,
      payload.cropType,
      payload.areaRai,
      payload.yieldPerRai
    ]);
    
    return { success: true, message: "บันทึกข้อมูลเรียบร้อย!" };
  } catch (error) {
    return { success: false, error: error.message };
  }
}

อยากทำหน้าเว็บบันทึกข้อมูล [รายงานการขึ้นทะเบียนปลูกข้าวและพืชผล] ลงใน Google Sheets โดยใช้ Google Apps Script
หัวตารางในกูเกิลชีทของฉันมีตามนี้: [วันเวลาบันทึก, ชื่อเกษตรกร, อำเภอ, ตำบล, พันธุ์พืช, พื้นที่ปลูก (ไร่), ผลผลิตต่อไร่ (กก.), ผู้รายงาน]

ช่วยเขียนส่วนหลังบ้าน (ไฟล์ Code.gs) ให้ฉันหน่อย โดยต้องการ:
1. กำหนด ID ของ Google Sheets และระบุชื่อชีทไว้ด้านบนสุดเป็นตัวแปรแก้ไขง่าย
2. มีฟังก์ชัน doGet รับหน้าที่เสิร์ฟหน้าเว็บ Index.html (ใช้สำหรับป้อนฟอร์ม) และหน้า Dashboard.html (เมื่อพิมพ์ ?page=dashboard)
3. มีฟังก์ชัน saveData เพื่อรับข้อมูลจากหน้าเว็บและนำไปลงตารางชีทให้โดยอัตโนมัติ
4. แนะนำวิธีคัดลอกโค้ดไปวางใน Google Apps Script แบบอธิบายทีละขั้นสำหรับมือใหม่

ช่วยเขียนโค้ดหน้าตาเว็บส่งข้อมูล (ไฟล์ Index.html) ใช้งานคู่กับ Google Apps Script ให้หน่อย
1. ออกแบบหน้าเว็บฟอร์มสไตล์โมเดิร์น โทนสีเขียวขาวดูสบายตา เหมาะสำหรับเจ้าหน้าที่ส่งเสริมการเกษตรกรอกรายงานในพื้นที่แปลงเกษตร
2. มีฟอร์มรับค่า: [วันที่รายงาน, ชื่อเกษตรกร, อำเภอ (ดรอปดาวน์), ตำบล (ดรอปดาวน์), ชนิดพืช (ดรอปดาวน์), พื้นที่ปลูก (ไร่), ผลผลิตเฉลี่ยต่อไร่ (กก.)]
3. เขียนฟังก์ชัน JavaScript เชื่อมกับ Google Apps Script ส่งค่าไปเก็บ
4. ขอระบบความปลอดภัย: ถ้าผู้ใช้ไม่ได้ป้อนตัวเลขหรือป้อนเว้นว่าง ห้ามส่งข้อมูล และมีหน้าต่างสรุปผลลัพธ์ (Modal) เด้งขึ้นมาให้กดยืนยันรอบสุดท้ายก่อนส่งจริง

ช่วยเขียนหน้าสถิติแดชบอร์ด (ไฟล์ Dashboard.html) เพื่อใช้วิเคราะห์ผลยอดรายงานผลผลิตการเกษตร
1. ตกแต่งหน้าจอด้วย UI สไตล์โมเดิร์น โทนสีเขียวสว่างสะอาดตา มีการ์ดแสดงตัวเลขเด่นชัดด้านบนสะดุดตา
2. ดึงข้อมูลจากกูเกิลชีทมาหาผลรวม: พื้นที่ปลูกรวม (ไร่), ปริมาณผลผลิตคาดการณ์รวม (ตัน), จำนวนเกษตรกรที่รายงานเข้ามาสะสม
3. สร้างกราฟแท่งด้วย ApexCharts แสดงปริมาณผลผลิตรวมจำแนกรายอำเภอ
4. สร้างกราฟวงกลมแสดงสัดส่วนชนิดพืชหรือพันธุ์ข้าวที่ปลูกมากที่สุด
5. มีปุ่มกดนำพาตัวผู้ใช้งานคลิกสลับหน้าย้อนกลับไปยังหน้าฟอร์มกรอกข้อมูล (หน้าหลัก) ได้ง่าย