Discord Announcement Studio — ระบบจัดการและส่งประกาศ Discord

เทมเพลตของเขียนประกาศ (Announcement Templates)

คลิกเลือกเทมเพลตที่บันทึกไว้เพื่อนำข้อความและโครงสร้าง Embed มาใช้งานหรือแก้ไขต่อได้ทันที

ช่องทางส่งประกาศ และโปรไฟล์ผู้ส่ง

เลือกห้อง Discord ที่บันทึกไว้ หรือตั้งค่าชื่อและรูปโปรไฟล์ของ Webhook/Bot

ช่องทางส่ง (Channel / Webhook)

ชื่อผู้ส่ง (Webhook / Bot Name)

ลิงก์รูปโปรไฟล์ผู้ส่ง (Avatar URL / อัปโหลดรูป) เว้นว่างเพื่อใช้ค่าเริ่มต้น หรือถูกดึงมาจากเทมเพลตอัตโนมัติ

เลือกรูป...

ข้อความหลัก & แท็กแจ้งเตือน (Rich Text & Mentions)

รองรับ Markdown ของ Discord และปุ่มลัดแท็กยศ

ข้อความประกาศ (Message Content)

กล่องข้อความ Embed (Discord Embed Builder)

ปรับแต่งแถบสี หัวข้อ รายละเอียด รูปภาพ ฟิลด์ย่อย และส่วนท้าย

เปิดใช้งานกล่อง Embed

ส่วนหัวด้านบน (Author Name)

สีแถบด้านข้าง (Embed Color)

หัวข้อประกาศ (Embed Title)

รายละเอียดในกล่อง (Embed Description)

รูปขนาดเล็กมุมขวา (Thumbnail URL)

รูปภาพแบนเนอร์ใหญ่ (Image URL)

ข้อความส่วนท้าย (Footer Text)

แนบเวลาปัจจุบันท้ายกล่อง (Timestamp)

หัวข้อย่อยใน Embed (Embed Fields)

ฟีเจอร์เสริม (ปุ่มลิงก์ / อีโมจิโหวต) & การตั้งเวลาส่ง

กำหนดปุ่มลิงก์ท้ายประกาศ อีโมจิรีแอคชัน และตั้งเวลาโพสต์ล่วงหน้า

อีโมจิรีแอคชัน / โพลสำรวจ (คั่นด้วยลูกน้ำ)

รูปแบบการส่งประกาศ

ปุ่มกดลิงก์ท้ายประกาศ (Button Components สำหรับโหมด Bot)

ตัวอย่างการแสดงผลใน Discord (Live Preview)

แสดงผลเสมือนจริงแบบเรียลไทม์ตามข้อความและ Embed ที่ตั้งค่า

# ยังไม่ได้เลือกห้องประกาศ

Discord Server

Announcement Bot APP วันนี้ เวลา 12:00

Discord Webhook JSON Payload

เพิ่มช่องทางส่งประกาศ (Webhook / Channel)

บันทึกห้องประกาศเพื่อเลือกใช้งานได้สะดวกโดยไม่ต้องวางลิงก์ใหม่ทุกครั้ง

เพิ่มยศสำหรับแท็กแจ้งเตือน (Role Picker)

บันทึก Role ID เพื่อให้กดแทรกแท็กยศในหน้าเขียนประกาศได้ทันที

🤖 ตั้งค่าบอทสำหรับแอดยศจริง (Discord Bot Role Assignment)

เนื่องจาก Discord Webhook ส่งได้เฉพาะข้อความ การแอดยศเข้าบัญชี Discord จริงต้องใช้ Guild ID และ Bot Token ที่มีสิทธิ์ Manage Roles

Discord Server ID (Guild ID) คลิกขวาที่เซิร์ฟเวอร์ → คัดลอก ID

Discord Bot Token บอทต้องมีสิทธิ์ Manage Roles และยศบอทต้องอยู่สูงกว่ายศบทลงโทษ

Proxy / Cloudflare Worker URL (แก้ปัญหาเบราว์เซอร์ติด CORS เวลาแอดยศ) เว้นว่างเพื่อยิงตรง หรือใส่ URL ของ Cloudflare Worker

รายการช่องทางส่งที่บันทึกไว้

เลือกจัดการหรือลบช่องทางที่บันทึกไว้

รายการยศ (Roles) ที่บันทึกไว้

จะแสดงในตัวเลือกแท็กยศหน้าสร้างประกาศในรูปแบบ <@&ROLE_ID>

สร้างเทมเพลตใหม่ & ตั้งค่าโปรไฟล์บอท

บันทึกรูปแบบประกาศที่ใช้บ่อย พร้อมกำหนดชื่อและรูปโปรไฟล์ (Avatar) ของบอทประจำเทมเพลตนั้นๆ ได้เอง

ชื่อเทมเพลต

🤖 ตั้งค่าโปรไฟล์บอทประกาศประจำเทมเพลต (Bot Name & Avatar)

ชื่อบอทประกาศ (Bot Name)

รูปโปรไฟล์บอท (Avatar URL / อัปโหลดรูป)

เลือกรูป...

Announcement Bot APP

ตัวอย่างโปรไฟล์บอทที่จะแสดงเมื่อใช้เทมเพลตนี้

ข้อความหลัก (Message Content)

หัวข้อ Embed (Embed Title)

สีแถบ Embed

รายละเอียดใน Embed

ข้อความท้ายกล่อง (Footer)

เทมเพลตที่บันทึกไว้

กด "นำไปใช้" เพื่อโหลดทั้งข้อความและโปรไฟล์บอท (ชื่อ + รูป Avatar) ไปใช้งานได้ทันที

คิวประกาศที่รออนุมัติ และตั้งเวลาส่งล่วงหน้า (Approval & Scheduled Queue)

รายการร่างประกาศจาก Editor ที่รอ Admin อนุมัติ หรือรายการที่ตั้งเวลาส่งล่วงหน้าไว้

ประกาศที่ส่งไปแล้ว (Edit / Delete Sent Messages)

เก็บ Message ID ของประกาศที่ส่งแล้ว เพื่อให้แอดมินกดแก้ไขข้อความ (Edit) หรือลบประกาศ (Delete) ได้

ประวัติการทำงานและส่งประกาศ (Audit Logs & History)

บันทึกว่าใครเป็นคนทำรายการ ส่งไปที่ห้องไหน เมื่อไหร่ และสถานะเป็นอย่างไร

สร้างแบบฟอร์มใหม่สำหรับให้ Admin ใช้งาน (Form Builder)

ตำแหน่ง Editor สามารถสร้างและแก้ไขช่องกรอกข้อมูลของแบบฟอร์ม เพื่อให้หน้า Admin นำไปใช้สร้างประกาศได้ทันที

ชื่อแบบฟอร์ม (Form Name)

🤖 ตั้งค่าโปรไฟล์บอทประกาศประจำแบบฟอร์มนี้ (Bot Name & Avatar)

ชื่อบอทประกาศ (Bot Name)

รูปโปรไฟล์บอท (Avatar URL / อัปโหลดรูป)

เลือกรูป...

Announcement Bot APP

ตัวอย่างโปรไฟล์บอทที่จะแสดงเมื่อ Admin โพสต์ประกาศด้วยแบบฟอร์มนี้

ข้อความเกริ่นนำ / แท็กแจ้งเตือน

สีแถบ Embed

หัวข้อประกาศ (Embed Title) ใช้ {ชื่อช่อง} แทนค่าได้

ข้อความท้ายกล่อง (Footer)

ช่องกรอกข้อมูลในฟอร์ม (Form Input Fields)

กำหนดช่องที่ต้องการให้ Admin กรอก (รองรับช่อง ID Discord และ SteamHex)

ตัวเลือกบทลงโทษแบบเช็คบ็อกซ์ (Penalty Checkboxes)

สร้างตัวเลือกเช็คบ็อกซ์บทลงโทษ ตั้งชื่อเช็คบ็อกซ์ กำหนดยศใน Discord และเลือก Emote ประจำเช็คบ็อกซ์

รายการแบบฟอร์มทั้งหมดในระบบ (สำหรับ Editor จัดการ)

Editor สามารถกดแก้ไขโครงสร้างฟอร์ม ลบฟอร์ม หรือสลับไปหน้า Admin เพื่อทดสอบสร้างประกาศจากฟอร์ม

☁️ เชื่อมต่อฐานข้อมูลออนไลน์ (Cloudflare Worker + KV / D1 Database)

เชื่อมต่อฐานข้อมูลกลางบน Cloudflare เพื่อให้ทีมงานและแอดมินทุกคนที่เปิดเว็บเห็นแบบฟอร์ม เทมเพลต ช่องทางส่ง ยศ และประวัติประกาศตรงกันทั้งหมด

Cloudflare Worker Database Endpoint URL URL ของ Worker ที่ผูกกับ KV หรือ D1 Database

รหัสผ่านป้องกันฐานข้อมูล (API Secret Key - ตัวเลือกเสริม) ตั้งให้ตรงกับตัวแปร API_SECRET ใน Cloudflare (เว้นว่างได้)

เปิดใช้งานการซิงก์ข้อมูลอัตโนมัติ (อัปเดตขึ้น Cloud DB ทันทีเมื่อเพิ่ม/แก้ไขข้อมูล และดึงข้อมูลใหม่ทุก 15 วินาที)

🚀 ขั้นตอนการอัปเว็บขึ้น Cloudflare Pages พร้อมเชื่อมฐานข้อมูล KV

ทำตาม 4 ขั้นตอนนี้เพื่อเปิดเว็บออนไลน์ฟรีและให้ทุกคนเห็นข้อมูลตรงกัน

1. สร้างฐานข้อมูล Cloudflare KV (เก็บข้อมูลกลาง):

เข้าไปที่แดชบอร์ด Cloudflare → เมนู Storage & Databases → KV → กด Create a namespace ตั้งชื่อว่า STUDIO_DB แล้วกด Add

2. สร้าง Cloudflare Worker และวางโค้ดทางด้านขวา:

ไปที่เมนู Compute (Workers) → Workers & Pages → กด Create → Create Worker ตั้งชื่อแล้วกด Deploy จากนั้นกด Edit code ลบโค้ดเดิมออกทั้งหมดแล้ววางโค้ด worker.js จากกล่องทางด้านขวาลงไป แล้วกด Deploy

3. ผูกฐานข้อมูล KV เข้ากับ Worker (สำคัญมาก):

กลับมาที่หน้าตั้งค่าของ Worker → แท็บ Settings → หัวข้อ Bindings → กด Add → เลือก KV Namespace:

• ช่อง Variable name พิมพ์คำว่า STUDIO_DB

• ช่อง KV namespace เลือก STUDIO_DB ที่สร้างไว้ในข้อ 1 แล้วกด Deploy

4. อัปโหลดไฟล์ index.html ขึ้น Cloudflare Pages:

ดาวน์โหลดไฟล์ index.html จากแอปนี้ → ไปที่เมนู Workers & Pages → แท็บ Pages → เลือก Upload assets (Direct Upload) อัปโหลดไฟล์ขึ้นไป แล้วนำ URL ของ Worker จากข้อ 2 มาวางในช่อง Cloudflare Worker Database Endpoint URL ด้านบน ระบบจะซิงก์ให้ทุกคนเห็นข้อมูลเหมือนกันทันที!

โค้ด `worker.js` สำเร็จรูป (รวมระบบ Cloud DB + แอดยศ Discord)

คัดลอกโค้ดนี้ไปวางใน Cloudflare Worker ตัวเดียว ใช้ได้ทั้งเป็นฐานข้อมูลกลาง (KV) และเป็นตัวกลางยิงแอดยศ Discord โดยไม่ติด CORS

สร้างประกาศจากแบบฟอร์มที่มีอยู่แล้ว (Admin Form Submitter)

เลือกแบบฟอร์มที่ต้องการใช้งาน กรอกข้อมูลให้ครบถ้วน แล้วกดสร้างประกาศ

รายการประกาศที่สร้างและส่งแล้วล่าสุด

ประวัติประกาศที่ถูกส่งเข้าสู่ Discord

ตัวอย่างประกาศที่จะแสดงใน Discord (Live Preview)

อัปเดตอัตโนมัติตามข้อมูลที่ Admin กรอกในแบบฟอร์มด้านซ้าย

# general-announcement

Discord Server

Announcement Bot APP วันนี้

เทมเพลตของเขียนประกาศ (Announcement Templates)

ช่องทางส่งประกาศ และโปรไฟล์ผู้ส่ง

ข้อความหลัก & แท็กแจ้งเตือน (Rich Text & Mentions)

กล่องข้อความ Embed (Discord Embed Builder)

ฟีเจอร์เสริม (ปุ่มลิงก์ / อีโมจิโหวต) & การตั้งเวลาส่ง

ตัวอย่างการแสดงผลใน Discord (Live Preview)

เพิ่มช่องทางส่งประกาศ (Webhook / Channel)

เพิ่มยศสำหรับแท็กแจ้งเตือน (Role Picker)

🤖 ตั้งค่าบอทสำหรับแอดยศจริง (Discord Bot Role Assignment)

รายการช่องทางส่งที่บันทึกไว้

รายการยศ (Roles) ที่บันทึกไว้

สร้างเทมเพลตใหม่ & ตั้งค่าโปรไฟล์บอท

เทมเพลตที่บันทึกไว้

คิวประกาศที่รออนุมัติ และตั้งเวลาส่งล่วงหน้า (Approval & Scheduled Queue)

ประกาศที่ส่งไปแล้ว (Edit / Delete Sent Messages)

ประวัติการทำงานและส่งประกาศ (Audit Logs & History)

สร้างแบบฟอร์มใหม่สำหรับให้ Admin ใช้งาน (Form Builder)

รายการแบบฟอร์มทั้งหมดในระบบ (สำหรับ Editor จัดการ)

☁️ เชื่อมต่อฐานข้อมูลออนไลน์ (Cloudflare Worker + KV / D1 Database)

🚀 ขั้นตอนการอัปเว็บขึ้น Cloudflare Pages พร้อมเชื่อมฐานข้อมูล KV

โค้ด worker.js สำเร็จรูป (รวมระบบ Cloud DB + แอดยศ Discord)

สร้างประกาศจากแบบฟอร์มที่มีอยู่แล้ว (Admin Form Submitter)

รายการประกาศที่สร้างและส่งแล้วล่าสุด

ตัวอย่างประกาศที่จะแสดงใน Discord (Live Preview)

โค้ด `worker.js` สำเร็จรูป (รวมระบบ Cloud DB + แอดยศ Discord)