คู่มือ Web SPA — MUJEEN Content Studio

URL ผลิต: https://www.mujeen.com/content-studio/
ระบบ: SPA (mcp_content_mujeen) Express :5190 ถูก reverse proxy มาที่ path /content-studio/
เวอร์ชันเอกสาร: 2026.10.13
หน้าจอ: จับจากโค้ดจริง (public/index.html, manage.html, sso.html) บน production

เอกสารนี้เป็นคู่มือปฏิบัติงานสำหรับผู้รับผิดชอบบทความ ไม่ใช่เอกสาร deploy (ดู SOP เทคนิคที่ docs/mujeen/07-sop-content-studio.md)

1. วัตถุประสงค์ในการสร้างระบบนี้

Content Studio ถูกสร้างขึ้นเพื่อให้ทีมงาน เรียบเรียงบทความจากคลังคำสอนของอาจารย์แขก มันตระสยาม แล้วส่งขึ้นเว็บ MUJEEN โดยมีเป้าดังนี้

ทำไมต้องเป็น SPA แยกจาก Backoffice

• หน้าสร้างบทความต้องโหลดคลังคำสอนหลายร้อยรายการ ค้นหา เลือกหลายแหล่ง และเรียก generate/polish โดยไม่รอรอบ Next.js
• แยกสิทธิ์และ UX ของ “โต๊ะเขียน” ออกจากเมนูแอดมินอื่น
• เปิดจาก Backoffice ด้วย SSO ครั้งเดียว (handoff code อายุ ~60 วินาที ใช้แล้วทิ้ง)

flowchart LR
  A[ล็อกอิน Backoffice] -->|SSO handoff| B[Content Studio SPA]
  B --> C[เลือกคำสอนจาก KB]
  C --> D[สร้างด่วน / ขัดเกลา AI]
  D --> E[บันทึก draft / ตั้งเวลา / เผยแพร่]
  E --> F[API upsert]
  F --> G[หน้า /articles]
  F --> H[KB + RAG]

2. หน้าจอของ SPA (map จากโค้ด)

ทางลัดจากเว็บหลัก: Backoffice เมนู Content Studio หรือหน้า /admin/articles ปุ่ม เปิด Content Studio (lib/contentStudio.ts)

3. ใครใช้ได้

ถ้ายังไม่ถูกมอบหมาย: Backoffice → สมาชิก → คอลัมน์ผู้รับผิดชอบบทความ

4. ขั้นตอนปฏิบัติงาน

ขั้นที่ 0 — เข้าสู่ระบบ (เลือกวิธีใดวิธีหนึ่ง)

วิธีที่แนะนำ: SSO จาก Backoffice

1. ล็อกอิน https://www.mujeen.com/login ด้วยบัญชีผู้รับผิดชอบบทความ
2. เปิดเมนู Content Studio หรือหน้าบทความ → เปิด Content Studio
3. ระบบเรียก POST /api/v1/auth/studio-handoff แล้วเปิด /content-studio/sso?code=…
4. หน้า SSO แลกโค้ดอัตโนมัติ แล้วเข้าหน้าสร้างบทความ

หน้า SSO เมื่อเปิดตรงโดยไม่มีโค้ด (อย่า bookmark หน้านี้):

ตรวจขั้นที่ 0

• ข้อความบนหน้า SSO เป็น “เข้าสู่ระบบสำเร็จ” แล้วเด้งไป Studio ไม่ค้างที่ “ไม่พบรหัส SSO”
• ถ้าเห็น “ไม่พบรหัส” ให้เปิดใหม่จาก Backoffice อย่ารีเฟรชหน้า /sso (โค้ดใช้ครั้งเดียว)
• แถบเขียวบน Studio ขึ้นว่าเข้าใช้งานแล้วพร้อมอีเมล

วิธีสำรอง: ล็อกอินใน Studio

กางแผง เชื่อมบัญชีผู้รับผิดชอบ / Backend กรอกอีเมล/รหัส แล้วกด เข้าด้วยบัญชีผู้รับผิดชอบ

บนหน้าจัดการมีช่อง PIN โลคัลสำหรับเครื่องพัฒนา — บน production ให้ใช้ SSO / บัญชีผู้รับผิดชอบ ไม่ใช้ PIN เป็นทางหลัก

ตรวจขั้นที่ 0 (ล็อกอินใน Studio)

• badge เป็น เชื่อม API แล้ว (เขียว) ไม่ใช่ “ยังไม่เชื่อม API”
• ถ้าบัญชีติด 2FA จะมีช่อง OTP — เปลี่ยนไปใช้บัญชี content manager แทน
• ปุ่ม ซิงก์บทความที่มีอยู่ขึ้น API โชว์เมื่อเชื่อมแล้ว (ใช้เมื่อ seed ค้าง ไม่ใช้ทุกวัน)

ขั้นที่ 1 — เปิดหน้าสร้าง และอ่านสถานะระบบ

เปิด https://www.mujeen.com/content-studio/

ส่วนหัวบอกสุขภาพระบบ (จาก GET /api/health ใน app.js):

แถบนำทาง 3 ขั้นของสตูดิโอ:

1. สร้างจากคำสอน — หน้านี้
2. ตรวจ / จัดการ — รายการทั้งหมด
3. Backoffice เผยแพร่ — /admin/articles

วิซาร์ดในหน้า: 1. เลือกคำสอน → 2. เรียบเรียง / SEO → 3. นัดเวลา / เผยแพร่

ตรวจขั้นที่ 1

• URL มี slash ท้าย /content-studio/ สไตล์และสคริปต์โหลด (ไม่เพี้ยน CSS)
• คลังความรู้มีรายการ ไม่ขึ้น “ไม่พบแหล่งที่ตรงกับคำค้น”
• ข้อความแบ่งงานชัด: Studio = เรียบเรียง · Backoffice = ตรวจ แก้ เผยแพร่

ขั้นที่ 2 — เลือกคำสอนจากคลังความรู้

แผงซ้าย (#sourceList):

1. ค้นหาในช่อง ค้นหาคำสอน / หัวข้อ
2. กรองชนิด: คำสอนอาจารย์แขก (ค่าเริ่มต้น) / ทั้งหมดในขอบเขต / KB อื่น (spiritual/public)
3. คลิกการ์ดเพื่อเลือก (แนะนำ 1–2 · สูงสุด 4)
4. กด รีเฟรช ถ้าเพิ่ง ingest คำสอนใหม่

การ์ดแสดงชื่อ ชิป “คำสอน” หรือ “KB” โดเมน และใจความสั้น

ตรวจขั้นที่ 2

• แหล่งที่เลือกโชว์เป็นแท็กบนแผงขวา (ลบด้วย × ได้)
• ต้นฉบับตรงเรื่องที่ตั้งใจ ไม่ปนคลิปคนละประเด็น
• ไม่เลือกเกิน 4 แหล่ง (ระบบจะเตือน)

ขั้นที่ 3 — วางแผน copy แล้วสร้างด่วน

แผง เรียบเรียงบทความ เดินตามเส้นทาง 7 บท:

1. คอนเซปต์ / Unique / Unfair advantage / กลุ่มแรก
2. Direct + Indirect + Awareness
3. หวังผล → Lead type · ฝึก 10 หัวจาก Lead 2 ประเภท
4. ติ๊ก LF8 แล้วเติม benefit 8 บรรทัด
5. สูตร + 8 ข้อก่อนโพสต์ + CTA
6. Sale page: โครง IMTFD · Email: subject 5 วัน + upsale
7. วาง Headline 3 หัวก่อน แล้วสร้างด่วน

ตรวจขั้นที่ 3

• แถบเส้นทาง 7 บท มีเครื่องหมายครบตามชนิดชิ้นงาน
• มีกลุ่มแรก + Direct benefit + LF8 + CTA
• Sale page มีหัว I–D หรือ Email มี subject + hidden LF8 วัน 4

ขั้นที่ 4 — เรียบเรียง SEO รูปปก ภาษาจีน

หลังสร้างด่วน ฟอร์มแก้ไขจะเปิด (#preview):

ถ้าภาษายังแข็ง กด ขัดเกลาด้วย AI (timeout ~25 วินาที ถ้าช้าจะคงฉบับด่วนไว้)

ตรวจขั้นที่ 4

• Checklist SEO ครบสี่ข้อเป็น ✓
• Slug ไม่ชนบทความเก่า (ดูที่หน้าจัดการ)
• รูปปกโหลดพรีวิวได้ ไม่แตก
• markdown ใช้ ## ตามโครงสไตล์ (How-to เป็นขั้น, List เป็นข้อ)
• ไม่มีคำขู่ คลิกเบต หรือสัญญาผลลัพธ์ส่วนบุคคล

ขั้นที่ 5 — บันทึก ตั้งเวลา หรือเผยแพร่

ปุ่มแถวเดียวกับสร้างด่วน (หลังมีบทความแล้วจะกดได้):

หลังสำเร็จจะมีกล่องขั้นถัดไป: ดูบนเว็บ / ไปตรวจจัดการ / เปิด Backoffice

ตรวจขั้นที่ 5 (ฉบับร่าง)

• รายการขึ้นใต้ฉบับร่างล่าสุด
• หน้าจัดการสถานะเป็น ฉบับร่าง
• /articles/<slug> ยังไม่ โชว์สาธารณะ

ตรวจขั้นที่ 5 (ตั้งเวลา)

• มีวันที่แสดง + เวลานัด (เขตเวลา Bangkok)
• สถานะยังเป็นฉบับร่าง และมีชิป นัดเวลา
• อย่าใส่ scheduled_at ย้อนหลังโดยไม่ตั้งใจ

ตรวจขั้นที่ 5 (เผยแพร่ทันที)

• ยืนยันไดอะล็อกแล้ว toast บอกเผยแพร่ + ขึ้น API
• เปิด /articles/<slug> ได้ ภาษาถูกต้อง
• รายการในหน้าจัดการเป็น เผยแพร่ และแหล่ง ขึ้น API แล้ว
• Backoffice /admin/articles สถานะตรงกัน

ขั้นที่ 6 — ตรวจ / จัดการ (/content-studio/manage)

ตัวเลขบนสุด: ฉบับร่าง · นัดเวลา · เผยแพร่แล้ว · ค้างซิงก์

1. ค้นหาชื่อ/slug หรือกรองสถานะ
2. ดูคอลัมน์ แหล่ง — ต้องเป็น “ขึ้น API แล้ว” ถ้าตั้งใจให้อยู่บนเว็บ
3. แถวละปุ่ม: แก้ไข · เผยแพร่ / เป็นฉบับร่าง · เก็บแล้ว
4. ในแผงแก้ไข: บันทึก + อัปเดต frontend · เผยแพร่ · เป็นฉบับร่าง · เก็บแล้ว

ตรวจขั้นที่ 6

• แถบสถานะมุมขวาเป็น อีเมล · staff (หรือ role จริง) ไม่ใช่ “ล็อกอยู่”
• บรรทัดเมตาขึ้นว่าแหล่งหลักคือ API
• ค้างซิงก์ = 0 ก่อนปิดงาน
• กดแก้ไขแล้วชื่อ/เนื้อหาตรงบทความที่เลือก ไม่เปิดแผงว่าง

ขั้นที่ 7 — ตรวจบนเว็บสาธารณะ

1. เปิด https://www.mujeen.com/articles
2. หาแท็กที่ติดไว้ แล้วเปิด slug
3. เทียบ Headline, วันที่, รูปปก, ย่อหน้าแรกกับใน Studio
4. (ถ้าใช้ RAG) ถามท่านผู้เฝ้าวิหารด้วยใจความบทความ ว่าดึงได้หรือไม่

ตรวจขั้นที่ 7

• บทความใหม่อยู่ในรายการ (นับรวมตรงกับที่เผยแพร่)
• แท็กคลิกแล้วกรองถูก
• มือถืออ่านพรีวิวใกล้กับหน้าจริง
• ไม่มี 404 ที่ slug ที่เพิ่งเผยแพร่ (ถ้า 404 ให้รอ revalidate หรือเปิดจาก Backoffice อีกครั้ง)

5. Checklist ปิดงานประจำวัน

ทำตามลำดับนี้ทุกครั้งที่ “ส่งบทความแล้ว”

1. ต้นฉบับมาจากคลังคำสอนที่เลือก ไม่แต่งหลักใหม่
2. Headline / Subheadline / Kicker แยกกันชัด
3. SEO ครบสี่ข้อ · รูปปกใช้ได้
4. สถานะตรงเจตนา: draft / scheduled / published
5. หน้าจัดการแหล่ง = ขึ้น API แล้ว (ถ้าเผยแพร่)
6. /articles/<slug> เปิดได้ (ถ้าเผยแพร่)
7. Backoffice สถานะตรงกัน
8. ไม่ทิ้ง draft ที่ scheduled_at ผิดวัน
9. ไม่ใช้บัญชี admin เขียนงานประจำ (เลี่ยง 2FA ค้างคิว)

6. เมื่อผิดปกติ — ตรวจเป็นขั้น

7. แผนที่ปุ่ม ↔ โค้ด (สำหรับตรวจระบบ)

Backoffice เปิด Studio: mujeen-frontend/lib/contentStudio.ts → POST /api/v1/auth/studio-handoff

8. สิ่งที่คู่มือนี้ไม่ครอบ (ตั้งใจ)

• Deploy Docker / nginx / Huawei ECS → docs/HUAWEI_ECS.md และ SOP 07
• เขียนบทความด่วนใน Backoffice โดยไม่ผ่านคลังคำสอน → ใช้เฉพาะงานแก้ด่วน ไม่แทน Studio
• ตัดต่อวิดีโอ / CMS หลายไซต์

อัปเดตล่าสุด: 2026-10-13 — จับหน้าจอจาก https://www.mujeen.com/content-studio/ ตามโค้ดใน mcp_content_mujeen/public/