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
1 parent ce252dc061
commit 18c12a6a14
@@ -1,79 +1,71 @@
-# สรุปความแตกต่างและเป้าหมายการใช้งาน: `apps/ssr` vs `apps/website`
+# สรุปความแตกต่างและเป้าหมายการใช้งาน: `apps/spa` vs `apps/website` — DBK Platform

-> **Platform architecture note:** Any HomAroma-specific routes, data, or branding cited below are reference-tenant examples.
+> **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`](docs/PLATFORM_OVERVIEW.md).

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

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

-| คุณสมบัติ (Feature) | `apps/website` (SPA) | `apps/ssr` (Next.js) |
+| คุณสมบัติ (Feature) | `apps/spa` (Mobile / Social Commerce) | `apps/website` (Main Public Website) |
 | :--- | :--- | :--- |
 | **สถาปัตยกรรมพื้นฐาน** | Single Page Application (SPA) | Server-Side Rendering (SSR) |
-| **เครื่องมือ / Framework**| React 19 + Vite | Next.js 15 (App Router) + React 19 |
+| **เครื่องมือ / 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**, Web App ที่เน้นความลื่นไหล | **SEO**, การค้นหาผ่าน Google, หน้าเว็บสาธารณะ |
-| **จุดเด่น** | ทำงานลื่นไหลเหมือนแอปมือถือ (ไม่กระตุกตอนเปลี่ยนหน้า), เหมาะกับ Webview ในแอปพลิเคชัน | ทำ SEO ได้ดีมาก Bot สามารถอ่านข้อมูลสินค้าได้ทันที, โหลดหน้าแรกได้ไว |
-| **จุดด้อย** | ทำ SEO ได้ยาก (Bot ของ Google อาจจะอ่านข้อมูลไม่ครบเพราะต้องรอ JavaScript ทำงาน) | ต้องใช้ทรัพยากรฝั่ง Server ในการรัน (Node.js Process), ซับซ้อนกว่าในการตั้งค่า |
-| **รูปแบบการ Deploy** | **Static Files** (HTML/CSS/JS) เสิร์ฟผ่าน Nginx โดยตรง ไม่ต้องมี Node.js รันเป็นพื้นหลัง | **Node.js Server** ต้องใช้ PM2 รัน `next start` และใช้ Nginx ทำ Reverse Proxy |
-| **ตำแหน่งไฟล์บน Server**| `/home/ti/projects/MyNginxMain/nginx/html/homaroma.shop/website` | `/home/ti/projects/homaroma-ssr` |
-| **คำสั่ง Build** | `bun run build` (ได้โฟลเดอร์ `dist`) | `bun run build` (ได้โฟลเดอร์ `.next`) |
-| **Service ที่ทำงาน**| ไม่มี (Nginx จัดการทั้งหมด) | **PM2** ชื่อ process: `homaroma-ssr` รันบนพอร์ต `3001` |
-| **การจัดการ Routing** | `react-router-dom` (ประมวลผลที่ฝั่ง Client ทั้งหมด) | Next.js App Router (มีระบบ File-based routing) |
-| **การจัดการ State** | Zustand | React Context / Zustand / Server Components |
-| **ความเหมาะสมของระบบ Login**| เหมาะสมกับ **LINE LIFF Login** และ Token-based auth เพราะมี Context แบบ SPA | เหมาะกับ Cookie-based Auth (NextAuth/Auth.js) หรือ Session |
+| **เป้าหมายหลัก (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/website` เมื่อ:
- คุณต้องการพัฒนาฟีเจอร์ที่ให้ลูกค้าเปิดใช้งานผ่าน **LINE Official Account (LIFF Menu)**
+### 1. เลือกใช้ `apps/spa` เมื่อ:
+- คุณต้องการพัฒนาฟีเจอร์ที่ให้ลูกค้าเปิดใช้งานผ่าน **LINE Official Account (LIFF Menu)** หรือ Social Commerce
 - เน้นประสบการณ์ผู้ใช้แบบ **App-like UX** ที่ต้องการความรวดเร็วในการกดเปลี่ยนหน้า เช่น ระบบตะกร้าสินค้าแบบ Popup หรือ Dashboard ส่วนตัวลูกค้า
- ไม่สนใจเรื่อง SEO (เช่น หน้าจัดการโปรไฟล์ลูกค้าส่วนตัว, หน้า Checkout)
+- ไม่เน้นเรื่อง Public Search SEO (เช่น หน้าจัดการโปรไฟล์ลูกค้าส่วนตัว, หน้าสะสมแต้ม, หน้า Checkout)

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

 ---

 ## ข้อมูลเชิงลึกด้านการ Build & Deploy (Server Config)
-อ้างอิงจากการตั้งค่าในสคริปต์ `serverinfo/post-receive` บน Server ปัจจุบัน

-### 📱 1. `apps/website` (Single Page Application)
+### 📱 1. `apps/spa` (Single Page Application)
 ระบบนี้ถูกคอมไพล์เป็นไฟล์ Static (HTML, CSS, JS) ซึ่งไม่มีการทำงานของ Server-side รันอยู่เบื้องหลัง
- **คำสั่ง Build:** `cd apps/website && bun run build`
+- **คำสั่ง Build:** `cd apps/spa && bun run build`
 - **สิ่งที่ได้จากการ Build:** โฟลเดอร์ `dist/`
- **ตำแหน่งไฟล์ปลายทาง (Target Directory):** 
-  `/home/ti/projects/MyNginxMain/nginx/html/homaroma.shop/website`
- **การจัดการ Environment:** ต้องประกาศตัวแปรแวดล้อมก่อนสั่ง Build เสมอ (เช่น `export VITE_LIFF_ID=...`) เพื่อให้ Vite ฝังค่าเข้าไปในไฟล์โค้ด
 - **การตั้งค่า Nginx ที่จำเป็น (Routing Configuration):** 
  เพื่อให้ระบบ React Router ทำงานได้โดยไม่เกิด 404 Error Nginx ต้องถูกตั้งค่าให้โยน Path ที่ไม่รู้จักกลับไปหา `index.html` เสมอ
  ```nginx
  location / {
-      root /usr/share/nginx/html/homaroma.shop/website;
+      root /usr/share/nginx/html/tenant/spa;
      index index.html;
      try_files $uri $uri/ /index.html;  # <--- บังคับให้ SPA จัดการ Route เอง
  }
  ```

-### 🌍 2. `apps/ssr` (Next.js Application)
-ระบบนี้ต้องการ Node.js Server (รันผ่าน PM2) เพื่อประมวลผลข้อมูลที่ฝั่งเซิร์ฟเวอร์ทุกครั้งที่มีคนเปิดหน้าเว็บ (หรือประมวลผลไว้ล่วงหน้า)
- **คำสั่ง Build:** `cd apps/ssr && bun run build`
- **สิ่งที่ได้จากการ Build:** โฟลเดอร์ `.next/` และไฟล์ Source Code
- **ตำแหน่งไฟล์ปลายทาง (Target Directory):**
-  `/home/ti/projects/homaroma-ssr`
+### 🌍 2. `apps/website` (Next.js Application)
+ระบบนี้ต้องการ Server Runtime (Node.js หรือ Bun) เพื่อประมวลผลข้อมูลที่ฝั่งเซิร์ฟเวอร์
+- **คำสั่ง Build:** `cd apps/website && bun run build`
+- **สิ่งที่ได้จากการ Build:** โฟลเดอร์ `.next/`
 - **การจัดการ Service (PM2):**
-  ต้องสั่งรันให้แอปทำงานอยู่เบื้องหลังเสมอด้วยคำสั่ง:
+  รันแอปเป็น background process เช่น:
  ```bash
-  pm2 start /home/ti/projects/homaroma-ssr/node_modules/.bin/next --name homaroma-ssr -- start -p 3001
+  pm2 start npm --name "website-ssr" -- start
  ```
 - **การตั้งค่า Nginx ที่จำเป็น (Reverse Proxy):**
-  Nginx จะไม่ได้เสิร์ฟไฟล์ตรงๆ เหมือน SPA แต่ทำหน้าที่เป็นประตูส่ง Request ต่อไปให้ PM2 (ที่พอร์ต 3001)
+  Nginx ทำหน้าที่เป็น Reverse Proxy ส่ง Request ต่อไปให้ Next.js:
  ```nginx
  location / {
-      proxy_pass http://127.0.0.1:3001;
+      proxy_pass http://127.0.0.1:3000;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
@@ -83,4 +75,4 @@
  ```

 ---
-*Generated by Antigravity AI on 2026-05-01*
+*Updated for DBK Platform architecture standards*