0 Fork 0

Files

T

antigravity-bot BotandYour Name 18c12a6a14 docs: modernize platform capability and architecture guides to DBK Platform (#5 )

Fixes #1

### Summary of Changes
- Modernized architecture documents to establish DBK Platform as the canonical multi-tenant commerce platform identity, treating HomAroma as the reference tenant.
- Updated frontend comparison to accurately reflect apps/spa (React 19 + Vite) vs apps/website (Next.js 15 SSR) instead of legacy names.
- Cleaned typos in PRISMA7_GUIDE and added cross-references to docs/PLATFORM_OVERVIEW.md.
- Updated docs/DOCUMENTATION_MIGRATION.md completion tracking.

---------

Co-authored-by: Your Name <you@example.com>
Reviewed-on: #5
Co-authored-by: antigravity-bot <bot@kittisak.com>

2026-10-18 01:47:59 +00:00

7.5 KiB

Raw Permalink Blame History

สรุปความแตกต่างและเป้าหมายการใช้งาน: `apps/spa` vs `apps/website` — DBK Platform

Platform architecture note: DBK Platform integrates two complementary frontend applications. HomAroma is the reference tenant; tenant-specific routes or branding cited below are reference examples. See docs/PLATFORM_OVERVIEW.md.

เอกสารนี้สรุปความแตกต่างเชิงสถาปัตยกรรม (Architecture) และจุดประสงค์การใช้งานระหว่าง Frontend ทั้งสองระบบใน DBK Platform เพื่อให้ทีมพัฒนาเข้าใจว่าควรเลือกใช้หรือพัฒนาต่อยอดที่โปรเจกต์ใด

ตารางเปรียบเทียบ (Comparison Table)

คุณสมบัติ (Feature)	`apps/spa` (Mobile / Social Commerce)	`apps/website` (Main Public Website)
สถาปัตยกรรมพื้นฐาน	Single Page Application (SPA)	Server-Side Rendering (SSR)
เครื่องมือ / Framework	React 19 + Vite + Tailwind CSS	Next.js 15 (App Router) + React 19 + Tailwind CSS
การประมวลผล (Rendering)	Client-side Rendering (ประมวลผลที่เบราว์เซอร์)	Server-side Rendering (ประมวลผลที่เซิร์ฟเวอร์ก่อนส่งให้ผู้ใช้)
เป้าหมายหลัก (Use Case)	LINE OA / LIFF App, Mobile-first commerce, Retention	SEO, การค้นหาผ่าน Google, หน้าเว็บแบรนด์สาธารณะ
จุดเด่น	ทำงานลื่นไหลเหมือนแอปมือถือ (ไม่กระตุกตอนเปลี่ยนหน้า), เหมาะกับ Webview ใน LINE	ทำ SEO ได้ดีมาก Bot ของ Search Engine อ่านข้อมูลสินค้าได้ทันที, โหลดหน้าแรกได้ไว
จุดด้อย	ทำ SEO ได้ยาก (Bot ของ Google อาจจะอ่านข้อมูลไม่ครบเพราะต้องรอ JavaScript)	ต้องใช้ทรัพยากรฝั่ง Server ในการรัน (Node.js Process), ซับซ้อนกว่าในการตั้งค่า
รูปแบบการ Deploy	Static Files (HTML/CSS/JS) เสิร์ฟผ่าน Nginx โดยตรง	Node.js Server รันด้วย PM2 / Bun และใช้ Nginx ทำ Reverse Proxy
คำสั่ง Build	`cd apps/spa && bun run build` (ได้โฟลเดอร์ `dist`)	`cd apps/website && bun run build` (ได้โฟลเดอร์ `.next`)
การจัดการ Routing	`react-router-dom` (ประมวลผลที่ฝั่ง Client ทั้งหมด)	Next.js App Router (File-based routing with Server Components)
การจัดการ State	Zustand	React Context / Zustand / Server State
ความเหมาะสมของระบบ Auth	เหมาะสมกับ LINE LIFF Login และ Token-based auth เพราะมี Context แบบ SPA	เหมาะกับ Cookie-based Auth / Server Session

สรุปแนวทางการพัฒนา (Development Guidelines)

1. เลือกใช้ `apps/spa` เมื่อ:

คุณต้องการพัฒนาฟีเจอร์ที่ให้ลูกค้าเปิดใช้งานผ่าน LINE Official Account (LIFF Menu) หรือ Social Commerce
เน้นประสบการณ์ผู้ใช้แบบ App-like UX ที่ต้องการความรวดเร็วในการกดเปลี่ยนหน้า เช่น ระบบตะกร้าสินค้าแบบ Popup หรือ Dashboard ส่วนตัวลูกค้า
ไม่เน้นเรื่อง Public Search SEO (เช่น หน้าจัดการโปรไฟล์ลูกค้าส่วนตัว, หน้าสะสมแต้ม, หน้า Checkout)

2. เลือกใช้ `apps/website` เมื่อ:

เป็นหน้าเพจที่ต้องการดึงดูดลูกค้าใหม่ (Acquisition) ผ่าน Search Engine (Google)
หน้าสินค้า (Product Details), หมวดหมู่สินค้า (Category), หรือบทความ (Blog) ที่ต้องการแชร์ลิงก์แล้วมี Rich Snippets / Open Graph สวยงามบน Facebook/LINE/X
เป็นหน้าหลัก (Landing Page) ที่เน้นความน่าเชื่อถือและต้องการโหลดให้เร็วที่สุดตั้งแต่ครั้งแรกที่เปิด (Core Web Vitals)

ข้อมูลเชิงลึกด้านการ Build & Deploy (Server Config)

📱 1. `apps/spa` (Single Page Application)

ระบบนี้ถูกคอมไพล์เป็นไฟล์ Static (HTML, CSS, JS) ซึ่งไม่มีการทำงานของ Server-side รันอยู่เบื้องหลัง

คำสั่ง Build: cd apps/spa && bun run build
สิ่งที่ได้จากการ Build: โฟลเดอร์ dist/
การตั้งค่า Nginx ที่จำเป็น (Routing Configuration): เพื่อให้ระบบ React Router ทำงานได้โดยไม่เกิด 404 Error Nginx ต้องถูกตั้งค่าให้โยน Path ที่ไม่รู้จักกลับไปหา index.html เสมอ
```
location / {
    root /usr/share/nginx/html/tenant/spa;
    index index.html;
    try_files $uri $uri/ /index.html;  # <--- บังคับให้ SPA จัดการ Route เอง
}
```

🌍 2. `apps/website` (Next.js Application)

ระบบนี้ต้องการ Server Runtime (Node.js หรือ Bun) เพื่อประมวลผลข้อมูลที่ฝั่งเซิร์ฟเวอร์

คำสั่ง Build: cd apps/website && bun run build
สิ่งที่ได้จากการ Build: โฟลเดอร์ .next/
การจัดการ Service (PM2): รันแอปเป็น background process เช่น:
```
pm2 start npm --name "website-ssr" -- start
```

การตั้งค่า Nginx ที่จำเป็น (Reverse Proxy): Nginx ทำหน้าที่เป็น Reverse Proxy ส่ง Request ต่อไปให้ Next.js:

location / {
    proxy_pass http://127.0.0.1:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

Updated for DBK Platform architecture standards

7.5 KiB Raw Permalink Blame History

สรุปความแตกต่างและเป้าหมายการใช้งาน: apps/spa vs apps/website — DBK Platform

ตารางเปรียบเทียบ (Comparison Table)

สรุปแนวทางการพัฒนา (Development Guidelines)

1. เลือกใช้ apps/spa เมื่อ:

2. เลือกใช้ apps/website เมื่อ: