Event System Requirements & Flow Architecture

Event System Flow & Architecture

Based on Grand Conference (Festival Mode) + LINE Messaging API

Fully Multi-Role Ready
ระบบหลัก (Core Engine)

WordPress + WooCommerce

ใช้ Grand Conference (Festival Demo) เป็น Theme คุม UI และ WooCommerce รองรับระบบตะกร้าและชำระเงิน

ระบบการออกตั๋ว & LINE

FooEvents + LINE Flex Message

สร้างตั๋วแบบ QR Code อัตโนมัติ ส่งเป็น **LINE Flex Message** เข้าแชตผู้ซื้อโดยตรง + Email ยืนยัน

การเช็กอิน (Field Check-in)

Mobile Scanner App

Staff สแกนตั๋วผ่านแอปบน iOS/Android ป้องกันตั๋วซ้ำ real-time หรือค้นหาชื่อ manual เมื่อเกิดปัญหา

Requirement & Workflow จำแนกตามบทบาท

คลิกเลือกบทบาทเพื่อสลับดู Flow รายละเอียดของแต่ละฝั่ง

Organizer View: เน้นระบบบริหารจัดการหลังบ้าน การวางโครงสร้างตั๋ว การส่ง Invite และระบบวิเคราะห์ข้อมูล
01

สร้าง & ตกแต่งหน้า Event

  • ใส่ Teaser Video / รูปภาพไฮไลท์
  • จัดตาราง Line-up ศิลปิน หรือ Speaker
  • ใส่แผนที่ Google Maps & รายละเอียดงาน
02

กำหนด Ticket Tier & Quota

  • ตั้งราคา Early Bird / Regular / VIP
  • จำกัดจำนวนตั๋วสุทธิแต่ละระดับ
  • กำหนดวันเริ่มต้น - สิ้นสุด การเปิดขาย
03

ส่ง Invite & แคมเปญ VIP

  • ส่ง Direct Email Link ตั๋วฟรีให้แขก VIP
  • สร้าง Custom Coupon Code (100% OFF)
  • ออกแบบ Flex Message สำหรับตั๋ว LINE
04

Analytics & Export ข้อมูล

  • ดูยอดขายและ Revenue แบบ Real-time
  • ตรวจสอบรายชื่อ Attendee แยกตามสถานะ
  • Export รายชื่อผู้เข้าร่วมเป็น Excel/CSV
PROJECT ROADMAP & ROLES

แผนเวลาการดำเนินงาน (Timeline) และ ผู้รับผิดชอบในแต่ละส่วน

กรอบเวลาพัฒนาระบบรวมประมาณ 4 - 6 สัปดาห์ แบ่งตามเฟสและบทบาทหน้าที่อย่างชัดเจน

Phase 1

สัปดาห์ที่ 1: Requirements Gathering & Infrastructure Setup

Week 1
🎯 กิจกรรมหลัก (Tasks):
  • สรุปข้อกำหนดประเภทตั๋ว & เงื่อนไขงาน
  • ติดตั้ง Domain, Hosting & WordPress
  • ลงธีม Grand Conference (Festival Mode)
  • สมัคร LINE Official Account & LINE Dev
👤 ผู้รับผิดชอบหลัก:

Project Manager (PM) + System Administrator

ร่วมกับฝั่ง Organizer (ลูกค้า) ในการเซ็นรับมอบ Requirement

📦 ผลงานที่ส่งมอบ (Deliverables):

เอกสาร Scope & System Spec + WordPress Base ready + LINE OA Registered

Phase 2

สัปดาห์ที่ 2: Design & Content Structuring

Week 2
🎯 กิจกรรมหลัก (Tasks):
  • ปรับ UI/UX หน้าเว็บให้ตรง Identity ของงาน
  • ใส่ข้อมูล Line-up ศิลปิน / Speaker / Timetable
  • ออกแบบดีไซน์บัตร **LINE Flex Message**
  • จัดเตรียม รูปภาพ Teaser / Map / FAQs
👤 ผู้รับผิดชอบหลัก:

UI/UX Designer + Web Content Creator

ฝั่ง Organizer จัดส่งข้อมูลและไฟล์ Assets ทั้งหมด

📦 ผลงานที่ส่งมอบ (Deliverables):

หน้าเว็บ Landing Page ตัวอย่าง + Flex Message Template ที่พร้อมยิง

Phase 3

สัปดาห์ที่ 3: Ticketing Engine & Payment Gateway Integration

Week 3
🎯 กิจกรรมหลัก (Tasks):
  • ตั้งค่า WooCommerce & FooEvents Engine
  • เชื่อมต่อระบบชำระเงิน (PromptPay QR /บัตรเครดิต)
  • ตั้งค่า Ticket Tier, Quota, Coupon VIP
  • ระบบสร้าง Unique QR Code ในตั๋ว
👤 ผู้รับผิดชอบหลัก:

Backend Developer + Payment Integrator

📦 ผลงานที่ส่งมอบ (Deliverables):

ระบบตะกร้าสินค้าที่กดซื้อตั๋ว ออกใบเสร็จ และ Gen QR Code ได้จริง

Phase 4

สัปดาห์ที่ 4: LINE Integration & Automation Development

Week 4
🎯 กิจกรรมหลัก (Tasks):
  • ตั้งค่า **LINE Login** ในหน้า Checkout
  • พัฒนา Webhook ยิง Flex Message เมื่อชำระเงินสำเร็จ
  • ทำระบบ Push Notification เตือนก่อนวันงาน
  • ทำระบบ Welcome Message หลังเช็กอิน
👤 ผู้รับผิดชอบหลัก:

LINE API Developer / Full-stack Dev

📦 ผลงานที่ส่งมอบ (Deliverables):

ระบบส่งตั๋วเข้าแชต LINE OA แบบออโตเมติกครบวงจร

Phase 5 - 6

สัปดาห์ที่ 5 - 6: Testing, Staff Training & Go-Live Event Day

Week 5-6
🎯 กิจกรรมหลัก (Tasks):
  • End-to-End Testing (ทดลองซื้อ -> รับ LINE -> สแกน)
  • ติดตั้งแอป FooEvents บนมือถือ Staff หน้าประตู
  • อบรมวิธีสแกนและการรับมือกรณีฉุกเฉินให้ Staff
  • แสตนด์บายดูแลระบบในวันงานจริง (On-site Support)
👤 ผู้รับผิดชอบหลัก:

QA Tester + Gate Staff Lead + On-site Tech Support

📦 ผลงานที่ส่งมอบ (Deliverables):

ระบบที่เปิดขายตั๋วได้จริง + การสแกนผ่านประตูราบรื่น + สรุปรายงานประจำงาน

สรุปบทบาทหน้าที่และความรับผิดชอบ (Role Breakdown)

1. Project Manager (PM)

ผู้นำโครงการ

  • คุมไทม์ไลน์และงบประมาณ
  • ประสานงานระหว่างทีม Dev กับผู้จัดงาน
  • สรุป Report ยอดขายและความคืบหน้า

2. WP & Web Developer

ผู้แต่งหน้าเว็บ & ระบบตั๋ว

  • ตั้งค่า Theme Grand Conference
  • วางระบบ WooCommerce & FooEvents
  • ดูแล UX/UI ให้รองรับ Mobile สวยงาม

3. LINE & API Developer

ผู้พัฒนาระบบ LINE

  • เชื่อมต่อ LINE Messaging API
  • เขียนโค้ด Webhook ยิง Flex Message
  • ตั้งค่า LINE Login Authentication

4. On-site Staff & Support

ทีมสแกนเช็กอินหน้าประตู

  • สแกนตั๋ว QR Code ผ่านแอป
  • แจก Wristband / Badge เข้างาน
  • แก้ปัญหาลูกค้าเปิดตั๋วไม่ได้หน้างาน
Live Demo Simulation

ทดลองจำลองระบบ สแกน QR Code หน้างาน

ลองกดปุ่มด้านขวาเพื่อทดลองสแกนตั๋วของ Attendee ในสถานการณ์ต่างๆ เพื่อดูว่าระบบตอบสนองและป้องกันตั๋วซ้ำอย่างไร

อัตราการรองรับการสแกน: ~3-5 วินาที / คน
การเชื่อมต่อ: Cloud Real-time Sync
FooEvents Scanner App Simulation
พร้อมสแกน

วาง QR Code ในกรอบ

กดปุ่มทดลองด้านขวาเพื่อสแกน

การปรับใช้ในธีม Grand Conference: Concert/Party vs สัมมนา

วิธีแปลงโหมดฟีเจอร์ในธีมเดียวกันเพื่อรองรับลักษณะงานที่แตกต่างกัน

องค์ประกอบ (Module) งาน Concert / Party งานสัมมนา / Conference
1. บุคคลสำคัญ (People Module) แสดงเป็น **Artists / DJs Line-up** พร้อมตัวอย่างเพลง แสดงเป็น **Speakers / Keynote** พร้อมประวัติและตำแหน่ง
2. ตารางเวลา (Schedule Module) แสดง **Stage Timetable** (เช่น Main Stage / VIP Lounge) แสดง **Track Agenda** แยกตามห้องสัมมนาและเบรก
3. ประเภทตั๋ว (Ticket Tiers) Early Bird, GA Standing, VIP Zone, VVIP Table Online Stream Pass, On-site Pass, VIP Networking Pass
4. ของแจกหน้าประตู (Check-in Output) สแกนแล้วแจก **Wristband สายรัดข้อมือ** ตามสีโซน สแกนแล้วรับ/พิมพ์ **Name Badge ป้ายชื่อ** ติดหน้าอก

สรุปชุด Software Stack ที่ต้องเตรียมติดตั้ง

Theme: Grand Conference (Festival Mode) Core: WordPress Checkout: WooCommerce QR & App: FooEvents for WooCommerce LINE Messaging API (Flex Message) Payment: PromptPay / Omise / Stripe
Step-by-Step Implementation: Custom Domain Architecture
Implementation Guide

ขั้นตอนการทำงานแบบละเอียด
Custom Domain Architecture

การตั้งระบบสำหรับการทำ Custom Domain Mapping จะแบ่งออกเป็น 2 ฝั่ง คือ ฝั่งระบบ (Platform/System) ที่ต้องทำครั้งเดียวตอนเริ่มต้น และ ฝั่งผู้ใช้งาน (Organizer) ที่เข้ามาใช้งานในภายหลัง

🟢 ฝั่งที่ 1: การตั้งค่าระบบโดยเรา

(System Setup - ทำครั้งเดียว)

เปิดใช้งาน WordPress Multisite

แก้ไขไฟล์ wp-config.php บน Server ใส่โค้ดเปิดใช้งาน:

// PHP
define( 'WP_ALLOW_MULTISITE', true );
  • ไปที่หน้า WP-Admin -> Tools > Network Setup เลือกโครงสร้างแบบ Sub-domains (เช่น organizer.yourevent.com)
  • นำโค้ดที่ WordPress เจนมาให้ ไปวางใน wp-config.php และ .htaccess เพื่อแปลงเป็น WordPress Network
1
2

ตั้งค่า Server & DNS (Wildcard DNS)

ไปที่ผู้ให้บริการ Hosting / Cloudflare ของเว็บหลักเรา และเพิ่ม A Record แบบ Wildcard เพื่อรับ Traffic ทุกโดเมน:

Type
Name
Target (IPv4)
A
*
[IP Server ของเรา]

ติดตั้ง Domain Mapping Plugin

  • ติดตั้งปลั๊กอิน Mercator หรือ WP Ultimo ในระดับ Network Admin
  • ตั้งค่าให้เปิดช่อง "Add Custom Domain" ในหน้าจัดการโปรไฟล์ของ Organizer / Host
3
4

ตั้งค่า Cloudflare (SSL for SaaS)

หาก Organizer ชี้โดเมนตัวเองเข้ามา โดยไม่มี SSL เว็บจะขึ้นเตือน "Not Secure"

ใช้บริการ Cloudflare SSL for SaaS เพื่อให้ Cloudflare ช่วยออก SSL Certificate (HTTPS) ให้โดเมนภายนอกของ Organizer ทุกเจ้าอัตโนมัติเมื่อมีการ Mapping สตรีมเข้ามา

🔵 ฝั่งที่ 2: ขั้นตอนการใช้งานโดย Organizer

เมื่อระบบหลังบ้านพร้อมแล้ว Flow ของ Organizer จะเป็นแบบนี้:

ซื้อโดเมนตัวเอง
ตั้งค่า DNS ชี้มาที่เรา
กรอกชื่อในระบบเรา
Verifies & Connects
01

Organizer ตั้งค่า CNAME / A Record ที่ Domain Registrar

ระบบต้องมีหน้าคำแนะนำ (Instruction Page) ให้ Organizer นำค่าไปตั้งที่ผู้ให้บริการโดเมนของตนเอง โดยมี 2 ทางเลือก:

แนะนำ

Option A: CNAME Record

  • Host: www (หรือ @)
  • Target: custom.youreventdomain.com

Option B: A Record

  • เพิ่ม A Record
  • ชี้มาที่ IP Address ของ Server เรา
02

Organizer นำชื่อโดเมนมากรอกในระบบเรา

  • 1 Organizer เข้าหน้า Dashboard บนเว็บเรา -> ไปที่เมนู "Domain Settings"
  • 2 พิมพ์ชื่อโดเมนที่ตัวเองเป็นเจ้าของ เช่น www.my-festival2026.com แล้วกด Save / Verify
03

ระบบตรวจสอบและเปิดใช้งาน (Automated Verification)

  • ปลั๊กอิน (เช่น Mercator / WP Ultimo) จะทำการ Check DNS Lookup ว่าโดเมนนั้นชี้มาที่ IP ของเราจริงหรือยัง
  • เมื่อ Verify ผ่าน ระบบจะทำการ Map โดเมนนั้นเข้ากับ Event/Sub-site นั้นทันที
  • โดเมน www.my-festival2026.com จะสามารถเข้าถึงหน้า Event บนแพลตฟอร์มเราได้สมบูรณ์แบบ โดยมี SSL (HTTPS) เขียวปลอดภัย

สรุปคำแนะนำสำหรับโปรเจกต์นี้

กรณีที่ 1: Start Small

งานไม่ใหญ่มาก / งบจำกัด

แนะนำให้ใช้แค่ Subpath Custom URL จะประหยัดเวลาเซ็ต Server และดูแลรักษาง่ายกว่ามาก

yourevent.com/e/my-festival
กรณีที่ 2: Enterprise Scaling

แพลตฟอร์ม SaaS จริงจัง

การลงทุนทำ WP Multisite + WP Ultimo + Cloudflare for Platforms จะช่วยสร้าง Value ให้แพลตฟอร์มได้สูงมาก เพราะ Organizer จะรู้สึกว่าได้เว็บ Event เป็นของแบรนด์ตัวเองจริงๆ

© 2026 Technical Implementation Blueprint.
Platform Architecture SaaS Documentation
Organizer vs Host: Role Comparison

Organizer vs Host ต่างกันอย่างไร?

สรุปความแตกต่างเชิงลึกเพื่อการออกแบบระบบและจัดการสิทธิ์ (Permissions)

B2B / OWNER
👑

Organizer (ผู้จัดงานหลัก)

คือบริษัทหรือบุคคลที่เป็น "เจ้าของอีเวนต์" รับผิดชอบภาพรวมทั้งหมดของงาน (Concert, Festival, Seminar)

  • เจ้าของตั๋วทั้งหมดในคลัง (Total Inventory)
  • กำหนดราคาตั๋วและโปรโมชั่นหลัก
  • รับเงินรายได้ทั้งหมดเข้าบัญชีบริษัท
  • ดูแลสตาฟหน้าประตูสแกนเช็คอิน
C2C / COMMUNITY
🤝

Host (หัวหน้าก๊วน / ผู้จัดย่อย)

คือ "ลูกค้า VIP" หรือ "ผู้นำชุมชน" ที่พาเพื่อนมางานในสเกลเล็ก เช่น ก๊วนเพื่อน 1 โต๊ะ หรือกลุ่มสัมมนา 10 คน

  • ซื้อตั๋วแบบเหมา (Group Buy) จาก Organizer
  • กระจายตั๋ว (Transfer/Claim) ให้เพื่อนในกลุ่ม
  • สร้าง Event ย่อยส่วนตัว (เช่น After Party ก๊วนเรา)
  • ไม่มีสิทธิ์แก้ไขข้อมูลหลักของงาน (Concert Data)

สิทธิ์การเข้าถึงข้อมูล (Permissions)

Organizer จะเน้นเรื่อง "Financial & Infrastructure" ส่วน Host จะเน้นเรื่อง "Social & Group Management"

Full Access (Organizer)
Limited Access (Host)

ความสัมพันธ์ในระบบ (The Ecosystem)

LEVEL 1
Organizer
สร้างงาน & ขายตั๋วเหมา
──▶
LEVEL 2
Host (ก๊วน)
ซื้อตั๋วเหมา & ส่งลิงก์เชิญ
──▶
LEVEL 3
Attendee
กดรับตั๋ว & สแกนเข้างาน
*Host เปรียบเสมือน "ตัวกลาง" ที่ช่วย Organizer ขายตั๋วได้เร็วขึ้นผ่านพลังของ Community
Event System Sitemap & Mockup Inventory

Sitemap & Mockup Inventory

โครงสร้างหน้าเว็บและรายการที่ต้องออกแบบเพื่อส่งต่อทีม UI/UX

Total Mockups Needed
18 Screens

Design Workload Distribution

Design Logic: "Experience First"

เราให้ความสำคัญกับ **Mobile View เป็นอันดับแรก (Mobile-First)** เนื่องจาก 80% ของ Attendee จะเปิดตั๋วและซื้อตั๋วผ่าน LINE บนมือถือ ส่วน Organizer Dashboard จะเน้น Desktop เพื่อการจัดการข้อมูลที่แม่นยำ

5
Public Pages
6
Dashboard UI
4
Mobile/Staff
3
LINE Flex Msg

Site Map Tree

Main Platform Home
Attendee Path Event Microsite
Ticket Selection
Checkout / Payment
Confirmation (LINE)
Organizer Path Org Dashboard
Event Builder
Sales Analytics
Domain Config
Host Path Host Community Portal
Private Event Form
Group Claim Tracking
Staff Path Mobile Scanner UI
QR Scan View
Manual Lookup

Detailed Mockup Inventory

Total 18 Screens

Attendee & Public (Mobile Focus)

1. Main Landing (Portal Home) High

หน้าแรกของแพลตฟอร์ม แสดง Event ทั้งหมดที่จัดอยู่

2. Event Microsite (Organizer) High

หน้าโปรไฟล์งานที่มีตาราง Line-up และปุ่มซื้อตั๋ว

3. Ticket Selection & Cart High

เลือกประเภทตั๋ว และจำนวนที่ต้องการ

4. Checkout & Payment (QR) High

หน้ากรอกข้อมูลผู้ซื้อและแสดง QR PromptPay

5. Order Success / LINE Instructions Mid

หน้าขอบคุณและปุ่มเชื่อมต่อ LINE เพื่อรับตั๋ว

Organizer & Host Dashboards

6. Organizer Main Dashboard High

หน้า Dashboard สรุปยอดขายรวมของแต่ละผู้จัด

7. Event Builder (Edit View) Mid

หน้าจอปรับแต่งเนื้อหางาน Schedule และ Line-up

8. Domain & SSL Management Low

หน้าจอตั้งค่า Subdomain หรือผูก Domain ของตัวเอง

9. Host: Create Community Event High

ฟอร์มสร้างงานย่อยสำหรับหัวหน้าก๊วนเพื่อน

10. Host: Attendee/Friend Tracker Mid

หน้าจอติดตามว่าเพื่อนคนไหนกดรับตั๋วไปแล้วบ้าง

Staff & Gate Experience

11. Staff App: Login & Event Select Low
12. Scanner View (Active Camera) High
13. Scan Result (Success/Fail) High
14. Manual Name Lookup Mid

System Templates & Messaging

15. LINE Flex Message: Digital Ticket High

Template ข้อความใน LINE OA ที่มี QR Code

16. LINE Flex Message: Invite Card Mid

Template การ์ดเชิญเพื่อนสำหรับ Host แชร์เข้ากลุ่ม

17. Email Template (Order Confirmation) Low
18. Error / Maintenance Page Low