สำหรับครู

แจ้งเตือนผ่าน LINE

ส่งข้อความถึงนักเรียนรายคนหรือทั้งห้องผ่าน LINE จาก D-DoGrade โดยตรง — มีแม่แบบ 5 ประเภท (ประกาศคะแนน · การบ้าน · เตือนใกล้หมดเวลา · คอมเมนต์ · เกรด) ระบบคิด โควต้าต่อบัญชี และทำ retry อัตโนมัติถ้าส่งไม่สำเร็จ

ภาพรวมหน้า — header + QuotaBanner + 4 step

หัวข้อด้านบนสุดบอกห้องที่ใช้ + โควต้าเดือนนี้, ด้านล่างเป็น wizard 01→04

NotifyPageHeader + QuotaBanner

ส่วนหัวของหน้าประกอบด้วย:

ชื่อหน้า "แจ้งเตือนผ่าน LINE" + ห้องที่กำลังส่ง
QuotaBanner — แท่ง progress + ตัวเลข "ใช้ X / Y · เหลือ Z"
สี QuotaBanner เปลี่ยนตามสัดส่วน: มินต์ (ok) → เหลือง (≥50%) → พิงค์ (≥80%)

NotifyPageHeader + QuotaBanner ติดด้านบนของหน้า /notify — รูปที่ 1 NotifyPageHeader + QuotaBanner

Step 01 — เลือกโหมดการส่ง (user / group)

ModeSelector toggle 2 ปุ่ม — เลือกก่อนเพราะ step 02 ขึ้นกับโหมด

2 โหมดต่างกันอย่างไร

	ส่งรายคน (user)	ส่งเข้ากลุ่ม (group)
ผู้รับ	นักเรียนที่ผูก LINE แล้วเท่านั้น — เลือกได้หลายคน	กลุ่ม LINE ของห้อง (1 กลุ่ม/ห้อง)
การตัดโควต้า	×จำนวนคนที่เลือก	×1 ต่อการส่ง (1 ข้อความ broadcast เข้ากลุ่ม)
การ setup	นักเรียนต้องผูก LINE เอง — ดู ผูก LINE	ครูต้องเชิญ OA เข้ากลุ่ม + ผูก Group ID
ใช้เมื่อไร	คอมเมนต์เฉพาะคน, เตือนคนที่ยังไม่ส่งงาน	ประกาศทั่วห้อง — คะแนน, การบ้าน, เกรด

ModeSelector — toggle 2 ปุ่ม 'ส่งรายคน (user)' / 'ส่งเข้ากลุ่ม (group)' — รูปที่ 2 ModeSelector toggle 2 ปุ่ม

Step 02A — โหมด user: เลือกผู้รับ

RecipientPicker แสดงรายชื่อนักเรียน — ติ๊กเฉพาะคนที่จะส่ง

RecipientPicker

รายชื่อนักเรียนในห้องโชว์เป็น checkbox แถวละ 1 คน:

นักเรียนที่ผูก LINE แล้ว — ติ๊กได้ ปกติ
นักเรียนที่ยังไม่ผูก LINE — checkbox จะ disable + label สีจาง + tooltip บอก "ยังไม่ผูก LINE"

ระบบโชว์ตัวเลข "เลือกแล้ว N คน" + ปุ่ม "เลือกทั้งหมด" / "ยกเลิกเลือก" ที่ช่องหัวรายการ

RecipientPicker — รายชื่อนักเรียน, checkbox, นักเรียนที่ยังไม่ผูก LINE จะ disabled — รูปที่ 3 RecipientPicker

Step 02B — โหมด group: ผูกกลุ่ม LINE ของห้อง

ทำครั้งเดียวต่อห้อง — เก็บไว้ ไม่ต้องผูกใหม่ทุกครั้งที่ส่ง

ถ้ายังไม่ผูก → เห็น GroupBindCard

กล่องนี้สอน 3 ขั้นในตัว:

สร้าง LINE group แล้วเชิญ OA @497ikknd เข้ากลุ่ม (search ใน LINE แล้วเชิญเหมือนเชิญเพื่อน)
OA จะพิมพ์ตอบในกลุ่มอัตโนมัติ พร้อม Group ID (รูปแบบ C ตามด้วยตัวเลข/ตัวอักษร 32 ตัว)
คัดลอก Group ID มาวางในช่อง input → กดปุ่ม 🔗 เชื่อมกลุ่ม

GroupBindCard — คำแนะนำ 3 ขั้น + input Group ID + ปุ่ม 'เชื่อมกลุ่ม' — รูปที่ 4 GroupBindCard — 3 ขั้น + ฟอร์ม

ผูกแล้ว → เห็น BoundGroupInfo

กล่องสีมินต์โชว์:

ชื่อกลุ่ม LINE (ที่ OA อ่านได้)
Group ID
เวลาที่ผูก
ปุ่ม "ยกเลิกการผูก" สำหรับเปลี่ยน/ลบ

BoundGroupInfo — แสดงชื่อกลุ่มที่ผูกแล้ว + ปุ่มยกเลิกการผูก — รูปที่ 5 BoundGroupInfo — ผูกแล้ว

ทำไมต้องเชิญ OA · ใช้ Group ID ทำไม

LINE ไม่มีลิงก์เชิญถาวรของกลุ่มแบบที่ Discord มี — วิธีเดียวให้ระบบยิงข้อความเข้ากลุ่มได้ คือต้องมี "คนใน" กลุ่มที่เป็นบัญชี OA แล้ว OA "แอบ" เห็น Group ID ของกลุ่มนั้น (ระบบใช้ ID นี้เป็นที่อยู่ส่งข้อความผ่าน LINE API)

Group ID เป็นข้อมูลลับ — ถ้าหลุดออกไปคนนอกไม่สามารถส่งข้อความเข้ามาได้ เพราะต้องมีสิทธิ์ของ OA และ access token ของระบบประกอบกัน

Step 03 — เขียนข้อความ (Event + Composer)

เลือกแม่แบบ → ระบบ autofill หัวข้อ/รายละเอียด/ปุ่ม → ปรับเอง → ดู preview

EventTypeSelector — 5 แม่แบบ + 'เขียนเอง'

กดปุ่มแม่แบบใดปุ่มหนึ่ง ระบบจะ autofill ฟิลด์ใต้ทันที:

📊 ประกาศคะแนน — ลิงก์ปลายทาง: หน้าห้องเรียนของนักเรียน
📝 การบ้านใหม่ — ลิงก์ไป /assignments
⏰ เตือนใกล้หมดเวลาส่ง — ลิงก์ไป /assignments
💬 คอมเมนต์งานที่ส่ง — ลิงก์ไป /assignments
🎓 ประกาศเกรดประจำภาค — ลิงก์ไปหน้าห้องของนักเรียน
✏️ เขียนเอง — เคลียร์ทุกฟิลด์ ให้ครูเริ่มจากศูนย์

EventTypeSelector — ปุ่ม 6 ตัว (5 template + 'เขียนเอง') — รูปที่ 6 EventTypeSelector — 6 ปุ่ม (5 แม่แบบ + เขียนเอง)

ComposeRow — 4 ฟิลด์ที่ปรับได้

หัวข้อ (title) — บรรทัดแรกที่เด้งบน LINE (placeholder ของแต่ละ template ใส่ {classroomName} ให้แล้ว ระบบจะแทนค่าจริงตอนส่ง)
รายละเอียด (body) — multi-line, รองรับ {senderName}, {subjectName}, {classroomName}
ลิงก์ปลายทาง (ctaUrl) — ไม่บังคับ, ถ้าว่าง ระบบใช้ URL default ของ template นั้น (ครูเห็นเป็น placeholder)
ชื่อปุ่ม (ctaLabel) — เช่น "ดูคะแนน" / "ส่งงาน"

ขวาของฟอร์มมี NotifyPreview — render ตัวอย่าง LINE bubble จริงตามที่นักเรียนจะเห็น (อัปเดต live ขณะพิมพ์)

ComposeRow + NotifyPreview — ฟิลด์ title/body/ctaUrl/ctaLabel + preview ฝั่งขวา — รูปที่ 7 ComposeRow + NotifyPreview

Step 04 — ตรวจสอบและส่ง

SendBar ตรวจ canSend → กดส่ง → toast ผล + retry อัตโนมัติถ้าล้มเหลว

SendBar — เงื่อนไขที่ปุ่มจะกดได้

ปุ่มส่งจะ enable เฉพาะเมื่อครบ:

มีหัวข้อ + รายละเอียด (ไม่ว่าง)
โหมด user: เลือกผู้รับ ≥ 1 คน
โหมด group: ผูกกลุ่มแล้ว
จำนวนข้อความที่กำลังจะส่ง ≤ โควต้าที่เหลือ

ถ้าไม่ผ่านเงื่อนไข — กดปุ่มแล้วจะขึ้น toast info บอกว่ายังขาดอะไร

SendBar — ปุ่มส่ง + สถานะ canSend / overQuota / sending — รูปที่ 8 SendBar + badge ผู้รับ/โควต้า

ผลของการกดส่ง — toast

โหมด user:

toast เขียว: "ส่งสำเร็จ X · ล้มเหลว Y" — รวมจำนวนคนที่ส่งสำเร็จ/ล้มเหลว
ระบบเคลียร์ composer + เริ่มฟอร์มใหม่ให้

โหมด group:

status=sent → toast เขียว "ส่งเข้ากลุ่มเรียบร้อย"
status=failed → toast แดง "ส่งไม่สำเร็จ" + ข้อความ error ถ้ามี
status=retrying → toast เหลือง "กำลัง retry · ลองใหม่ใน 30s/2m/10m" — ระบบจะ retry อัตโนมัติ 3 รอบ

Toast หลังกดส่ง — เขียวสำเร็จ X คน, ส้มเตือน retry, แดงล้มเหลว — รูปที่ 9 Toast ผลการส่ง

ถ้าโควต้าจะหมด — QuotaBanner เปลี่ยนสีเตือน

เมื่อเข้าใกล้เพดาน:

ใช้ ≥ 50% → QuotaBanner เป็นสีเหลือง
ใช้ ≥ 80% → QuotaBanner เป็นสีพิงค์ (warn)
เหลือไม่พอกับจำนวนผู้รับที่เลือก → ปุ่มส่ง disable + บอกว่า "เกินโควต้า"

โควต้า reset ทุกต้นเดือน (cron job)

QuotaBanner สีพิงค์เมื่อใช้โควต้าไป ≥80% — รูปที่ 10 QuotaBanner ขึ้นสีพิงค์ (warn)

สรุปขั้นใช้งาน — flow ครบรอบ

(ครั้งเดียวต่อห้อง) ผูกกลุ่ม LINE ของห้อง ถ้าจะใช้โหมด group
เลือกโหมด — group สำหรับประกาศ, user สำหรับเฉพาะคน
เลือกแม่แบบที่ตรง — autofill รวดเร็วกว่าเริ่มจากศูนย์
แก้ข้อความ/CTA ตามที่ต้องการ → ดู preview ก่อนส่ง
กด ส่ง → อ่าน toast ผล → ถ้าเห็น "กำลัง retry" รอ 10 นาทีแล้วกลับมาดู