รายละเอียดระบบ

ระบบลงทะเบียนฉีดวัคซีนสัตว์เลี้ยง (Web App) พร้อมเชื่อม Google Sheets
วันนี้ขอแบ่งปันตัวอย่าง โค้ดระบบรับข้อมูลออนไลน์ ที่พัฒนาด้วย Google Apps Script + HTML + Tailwind CSS สามารถนำไปประยุกต์ใช้ทำระบบต่างๆ ได้ เช่น ระบบลงทะเบียน ระบบบันทึกข้อมูล หรือแบบฟอร์มออนไลน์ของหน่วยงานครับ
🔎 ภาพรวมการทำงานของโค้ด (Frontend)
โค้ดส่วนนี้เป็น หน้าบ้าน (Frontend) ทำหน้าที่รับข้อมูลจากผู้ใช้งานและส่งต่อไปบันทึก โดยแบ่งการทำงานหลัก ๆ ออกเป็น 3 ส่วน
🧩 1. ส่วนหน้าตาฟอร์ม (UI Design)
• ใช้ HTML สร้างโครงสร้างฟอร์มรับข้อมูล เช่น
• ชื่อสัตว์เลี้ยง
• ประเภทสัตว์
• สายพันธุ์
• ข้อมูลเจ้าของ
• ข้อมูลการนัดหมาย
• ใช้ Tailwind CSS ช่วยตกแต่งหน้าตาให้สวยงามและรองรับมือถือ (Responsive)
• ใช้ฟอนต์ Kanit เพื่อให้อ่านง่าย เหมาะกับผู้ใช้งานภาษาไทย
⚙️ 2. ส่วนควบคุมการทำงานเมื่อกดส่งข้อมูล (JavaScript Logic)
เมื่อผู้ใช้กดปุ่ม “ยืนยันการลงทะเบียน” ระบบจะ
• หยุดการรีเฟรชหน้าเว็บด้วย e.preventDefault()
• ล็อคปุ่มกดชั่วคราว เพื่อป้องกันการส่งข้อมูลซ้ำ
• เปลี่ยนข้อความเป็น “กำลังบันทึก…” พร้อมไอคอน Loading
• รวบรวมข้อมูลจากฟอร์มทั้งหมดมาเก็บไว้ในตัวแปร data
🔗 3. ส่วนเชื่อมต่อและแจ้งเตือนผลลัพธ์ (API & Feedback)
ระบบจะใช้คำสั่ง google.script.run เพื่อส่งข้อมูล data ไปยังฟังก์ชัน processForm() ที่อยู่ในฝั่งหลังบ้าน (Google Apps Script / Code.gs) เพื่อบันทึกลง Google Sheets
✅ กรณีบันทึกสำเร็จ
• แสดงข้อความสีเขียวแจ้งว่า บันทึกข้อมูลเรียบร้อย
• ล้างข้อมูลในฟอร์ม (Reset Form)
• ปลดล็อคปุ่มให้ใช้งานได้ตามปกติ
❌ กรณีเกิดข้อผิดพลาด
• แสดงข้อความแจ้งเตือนสีแดง
• ปลดล็อคปุ่มให้ผู้ใช้สามารถกดส่งข้อมูลใหม่ได้
⏱️ ข้อความแจ้งเตือนทั้งหมดจะค่อยๆ ซ่อนหายไปเองภายใน 5 วินาที
💡 โค้ดนี้สามารถนำไปต่อยอดทำเป็น
• ระบบลงทะเบียนกิจกรรม
• ระบบบันทึกข้อมูลประชาชน
• ระบบลงทะเบียนสัตว์เลี้ยง
• ระบบแบบฟอร์มออนไลน์ของหน่วยงาน