อยากได้ระบบจัดการอบรมสัมมนาแบบที่ผู้เข้าร่วมสัมมนาสามารถแสดง QR Code และ สามารถทำการ scan ด้วย WebApp เพื่อ record จำนวนผู้เข้าร่วมงานได้
📌 Workflow ทั้งหมดของระบบ
- ผู้เข้าร่วมสัมมนาทำการกรอกข้อมูลใน Google form
- มีอีเมลยืนยันการเข้าร่วมสัมมนาส่งไปยังอีเมลผู้ลงทะเบียนพร้อม QR Code
- เมื่อมาถึงหน้างานผู้เข้าร่วมสัมมนาสามารถแสดง QR Code
- ผู้จัดการสัมมนาสามารถใช้ Web App ในการ scan เพื่อยืนยันการเข้าร่วมสัมมนา
- ระบบทำการอัพเดทข้อมูลผู้เข้าร่วมสัมมนาว่าได้เข้าร่วมสัมมนาแล้วใน Google Sheets พร้อมทั้งระบุเวลาเข้าร่วม
โดยระบบนี้สามารถนำไปประยุกต์เพื่อใช้งานกับงานประเภทอื่นที่ต้องการความสามารถในการ scan เพื่ออัพเดทข้อมูลก็ได้เช่น ระบบจัดการการยืมคืนอุปกรณ์ หรือ ระบบเช็คอิน เช็คเอ้า อุปกรณ์ต่างๆ
เริ่มต้นเราสามารถนำ Prompt ดังต่อไปนี้ไปใส่ที่ AI ตัวใหนก็ได้ โดยในที่นี้ผมจะใช้เป็น Gemini Pro
เป้าหมาย: สร้างระบบลงทะเบียนและเช็คอินเข้าร่วมงานอีเวนต์แบบครบวงจรโดยใช้ Google Apps Script
องค์ประกอบของระบบ:
ระบบประกอบด้วย 3 ส่วนหลัก:
Google Form สำหรับการลงทะเบียน
Google Apps Script สำหรับจัดการข้อมูลหลังบ้านและส่งอีเมลอัตโนมัติ
Web App สำหรับใช้สแกน QR Code เพื่อเช็คอินหน้างาน
ขั้นตอนการทำงานที่ต้องการ:
ส่วนที่ 1: การลงทะเบียน (Google Form & Sheet)
ให้สร้าง Google Form ที่มีช่องสำหรับกรอก ชื่อ-นามสกุล และ อีเมล
ให้เชื่อมต่อ Form นี้กับ Google Sheet ใหม่โดยอัตโนมัติ
ใน Google Sheet ที่สร้างขึ้น นอกจากคอลัมน์ที่มาจากฟอร์มแล้ว ให้เพิ่มคอลัมน์ต่อไปนี้ต่อท้าย:
Registration ID
Email Status
Attendance
ส่วนที่ 2: การส่งอีเมลยืนยันพร้อม QR Code (Apps Script)
ให้เขียนฟังก์ชัน onFormSubmit ใน Google Apps Script ที่จะทำงานอัตโนมัติทุกครั้งเมื่อมีการส่งฟอร์มใหม่
ในฟังก์ชันนี้ ให้ทำสิ่งต่อไปนี้:
สร้างรหัสลงทะเบียนที่ไม่ซ้ำกัน (เช่น REG-timestamp-row) แล้วบันทึกลงในคอลัมน์ Registration ID
สร้าง QR Code จากรหัสลงทะเบียน โดยใช้ API ของ https://quickchart.io/
ส่งอีเมลยืนยัน (HTML Email) ไปยังอีเมลของผู้ลงทะเบียน
เนื้อหาในอีเมลให้ระบุชื่อผู้ลงทะเบียน, รหัสลงทะเบียน, และแสดงรูปภาพ QR Code ที่สร้างขึ้นอย่างชัดเจน
หลังจากส่งอีเมลสำเร็จ ให้บันทึกสถานะ "ส่งแล้ว" ลงในคอลัมน์ Email Status
ส่วนที่ 3: ระบบเช็คอินหน้างาน (Web App)
ให้สร้าง Web App ด้วย Google Apps Script
หน้าเว็บ (index.html):
ให้มีหน้าตาเรียบง่ายและใช้งานบนมือถือได้ดี
ต้องมีปุ่ม "เปิดกล้องเพื่อสแกน" เพื่อเริ่มการทำงาน และปุ่ม "ปิดกล้อง"
เมื่อกดเปิดกล้อง ให้ใช้กล้องหลังของมือถือ
ให้ใช้ library ในการ scanQR Code ดังต่อไปนี้ https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.js
มีพื้นที่สำหรับแสดงผลลัพธ์การสแกน (เช่น "เช็คอินสำเร็จ" หรือ "ไม่พบข้อมูล")
สคริปต์หลังบ้าน (Code.gs):
ให้สร้างฟังก์ชัน processCheckIn(registrationId) เพื่อรับค่าจาก QR Code ที่สแกนได้
ฟังก์ชันนี้ต้องค้นหารหัส registrationId ใน Google Sheet
เงื่อนไข:
ถ้าเจอข้อมูลและคอลัมน์ Attendance ยังว่างอยู่: ให้เติมคำว่า "Present" พร้อมเวลาที่เช็คอินลงไป แล้วส่งข้อความกลับไปที่หน้าเว็บว่า "เช็คอินสำเร็จ: [ชื่อผู้ลงทะเบียน]"
ถ้าเจอข้อมูลแต่คอลัมน์ Attendance มีข้อมูลอยู่แล้ว: ให้ส่งข้อความกลับไปว่า "[ชื่อผู้ลงทะเบียน] ได้เช็คอินไปแล้ว"
ถ้าไม่เจอข้อมูล: ให้ส่งข้อความกลับไปว่า "ไม่พบรหัสลงทะเบียนนี้ในระบบ"
หน้าเว็บจะต้องแสดงผลลัพธ์ที่ได้รับกลับมา และพร้อมที่จะสแกนคนต่อไปได้โดยอัตโนมัติหลังจากแสดงผลลัพธ์ประมาณ 3 วินาทีโดยเราสามารถทำการปรับแต่ง Prompt ตามความต้องการของเราได้เลย
หลังจากนั้น AI จะทำการบอก step รวมทั้งให้ script สำหรับ การนำไปสร้างเป็นระบบต่างๆให้กับเราตาม Workflow
โดยหลังจากที่เราทำการสร้างระบบตาม Step ทั้งหมดเสร็จเรียบร้อยแล้ว เราจะได้ระบบในการตอบกลับอีเมลแบบอัตโนมัติพร้อม QR Code
พร้อมกับ Web Application ที่สามารถใช้ในการ scan QR Code ที่หน้างานได้ทันที
หากต้องการดูคลิปวีดีโอจับมือทำวิธีการสร้างระบบลงทะเบียนเข้างานด้วย QR Code ด้วย AI ก็สามารถดูได้ที่คลิปด้านล่างนี้เลย
💳 ชอบคลิปที่ช่วยเพิ่มประสิทธิภาพการทำงานแบบนี้สามารถสมัครสมาชิกช่องได้ที่
https://www.youtube.com/channel/UChxmhkD8uSSzUOkfMO_p5oQ/join
🎥 อุปกรณ์ที่ผมใช้
กล้อง Sony ZV-E10 kit 16-50mm
Mouse Logitech MX Master 3s
MacBook Air M2
ไมค์ wireless Saramonic Blink 500
เก้าอี้ Anda Seat X-Air Pro Ergonomic Gaming Chair
แขนจับจอ Anda Seat Stealth A6L Ergonomic Monitor Arm
ไมโครโฟน AKG Lyra
ไฟส่องหน้าจอ Xiaomi Light Bar
