📍
ระบบเช็คชื่อเข้าร่วมโครงการ ด้วย Apps Script
ทำหน้าลงทะเบียนบนมือถือที่ ตรวจพิกัด GPS ให้ผู้เข้าร่วมอยู่ในบริเวณงานจริง + ถ่ายรูปยืนยันตัวตน แล้วเก็บลง Google Sheets และ Google Drive อัตโนมัติ
🎯 เป้าหมาย: จบบทนี้ น้องจะได้ ระบบเช็คชื่อเข้างานแบบ GPS ที่ผู้เข้าร่วมสแกนลิงก์บนมือถือ ถ่ายรูป ตรวจตำแหน่ง แล้วลงทะเบียนได้เฉพาะเมื่ออยู่ในรัศมีงาน — ข้อมูล+รูปเข้า Google Sheets/Drive ทันที
📖 ระบบนี้ทำงานอย่างไร?
เป็น Web App บน Google Apps Script หน้าเดียว (mobile-first) ที่ผู้เข้าร่วมเปิดผ่านลิงก์/QR — ระบบขอ ตำแหน่ง GPS และ กล้อง แล้วส่งข้อมูลไปให้ Code.gs ตรวจสอบและบันทึกลง Google Sheets + อัปโหลดรูปลง Google Drive
จุดเด่นคือ Code.gs จะ ตรวจพิกัดซ้ำอีกครั้งฝั่งเซิร์ฟเวอร์ (ไม่เชื่อค่าจากหน้าเว็บอย่างเดียว) เพื่อกันการปลอมตำแหน่ง
📍 ตรวจพิกัด GPS ในรัศมีงาน
📷 ถ่ายรูปสด + ลายน้ำ
🖼️ ฟิลเตอร์ปรับภาพ
🗜️ บีบอัดรูป ~700KB
🛡️ กันลงซ้ำ (เบอร์/อุปกรณ์)
🔒 ตรวจซ้ำฝั่งเซิร์ฟเวอร์
📊 Sheets + Drive
📱 Mobile-first + PDPA
🧩 ส่วนประกอบหลัก
| ส่วนประกอบ | หน้าที่ |
|---|---|
| Code.gs | ฝั่งเซิร์ฟเวอร์ — ตรวจพิกัด (Haversine), กันซ้ำ, กัน Formula Injection, บันทึก Sheet + อัปโหลดรูป Drive และมี doGet() คืนหน้าเว็บ |
| Index.html | หน้าเว็บมือถือ — ฟอร์ม + เปิดกล้องถ่ายรูป + ตรวจ GPS + ยินยอม (consent) |
| google.script.run | สะพานเชื่อม — getClientConfig() และ submitRegistration() |
| SpreadsheetApp | เก็บข้อมูลลงทะเบียนใน Google Sheets (ชีต Registrations) |
| DriveApp | เก็บรูปถ่ายจริงในโฟลเดอร์ Google Drive |
| Geolocation API | ขอพิกัด GPS จากเบราว์เซอร์ (watchPosition) |
🧠 แนวคิดเด่นที่ได้เรียนรู้
- Haversine — สูตรคำนวณระยะทางระหว่าง 2 พิกัดบนโลก ใช้ตัดสินว่าอยู่ในรัศมีงานไหม
- ตรวจซ้ำฝั่งเซิร์ฟเวอร์ — ไม่เชื่อค่า GPS/ข้อมูลจากหน้าเว็บอย่างเดียว Code.gs เช็คระยะ+ความแม่นยำอีกรอบ
- กันลงซ้ำ — เช็คเบอร์โทรและ User Agent ที่เคยลงแล้ว
- บีบอัดรูป — ย่อ+ลด quality ให้ ~700KB ก่อนส่ง ประหยัดพื้นที่ Drive
- PDPA / Consent — ต้องติ๊กยินยอมก่อนเก็บข้อมูลส่วนบุคคล
- ความปลอดภัย — LockService กันเขียนชนกัน + กัน Formula Injection ในชีต
🎯 ภารกิจ 6 ขั้นตอน