docs: modernize platform capability and architecture guides to DBK Platform

This commit is contained in:
Your Name committed 2026-10-18 08:33:48 +07:00
1 parent ce252dc061
commit a7a5a4546f
8 files changed
+53 -52

No files matched your search

+2 -2
View File
@@ -1,6 +1,6 @@
# DBK Platform Admin Section Guide # DBK Platform Admin Section Guide
> **Platform scope:** This guide describes shared CMS administration capabilities. Product and content examples are tenant-specific; HomAroma is the reference tenant. > **Platform scope:** This guide describes shared CMS administration capabilities. Product and content examples are tenant-specific; HomAroma is the reference tenant. See [`docs/PLATFORM_OVERVIEW.md`](docs/PLATFORM_OVERVIEW.md).
This guide explains the dynamic page blocks available in the Page Builder and what each block contains. This guide explains the dynamic page blocks available in the Page Builder and what each block contains.
@@ -138,7 +138,7 @@ This guide explains the dynamic page blocks available in the Page Builder and wh
### `SCENT_NOTES_BREAKDOWN` ### `SCENT_NOTES_BREAKDOWN`
- Purpose: Fragrance layer breakdown - Purpose: Fragrance layer breakdown (reference tenant vertical block; pattern for multi-tier attribute breakdowns)
- Contains: - Contains:
- `title` localized string optional - `title` localized string optional
- `description` localized string optional - `description` localized string optional
+1 -1
View File
@@ -1,6 +1,6 @@
# Architecture Decisions — DBK Platform # Architecture Decisions — DBK Platform
> **Platform scope:** HomAroma references in this ADR are reference-tenant context unless a decision explicitly names an operational resource. > **Platform scope:** DBK Platform architecture decisions. HomAroma references in this ADR are reference-tenant context unless a decision explicitly names an operational resource. See [`docs/PLATFORM_OVERVIEW.md`](docs/PLATFORM_OVERVIEW.md).
> บันทึกการตัดสินใจเชิงสถาปัตยกรรม (ADR) จากการประชุมทีม > บันทึกการตัดสินใจเชิงสถาปัตยกรรม (ADR) จากการประชุมทีม
> อัปเดตล่าสุด: 2026-07-12 > อัปเดตล่าสุด: 2026-07-12
+2 -2
View File
@@ -1,7 +1,7 @@
# แผนการพัฒนาและคู่มือสร้างแผนที่ Malaysia & Vietnam Map # แผนการพัฒนาและคู่มือสร้างแผนที่ Malaysia & Vietnam Map
> **Platform capability plan:** Geographic coverage, data availability, and analytics configuration must be enabled and validated per tenant. > **Platform capability plan:** Geographic coverage, data availability, and analytics configuration are platform capabilities enabled per tenant. HomAroma is the reference tenant. See [`docs/PLATFORM_OVERVIEW.md`](docs/PLATFORM_OVERVIEW.md).
สำหรับเมนู Business Analytics บนระบบ HomAroma Admin สำหรับเมนู Business Analytics บนระบบ DBK Platform Admin (Multi-tenant & Multi-region)
เอกสารนี้รวบรวมรายละเอียด แหล่งข้อมูล Open-source Repositories สำหรับดาวน์โหลดไฟล์ GeoJSON สถาปัตยกรรมทางเทคนิค และแผนขั้นตอนการนำไปพัฒนาต่อยอดให้เหมือนกับ **Omnichannel Sales Map (แผนที่ประเทศไทย)** เดิม เอกสารนี้รวบรวมรายละเอียด แหล่งข้อมูล Open-source Repositories สำหรับดาวน์โหลดไฟล์ GeoJSON สถาปัตยกรรมทางเทคนิค และแผนขั้นตอนการนำไปพัฒนาต่อยอดให้เหมือนกับ **Omnichannel Sales Map (แผนที่ประเทศไทย)** เดิม
+3 -3
View File
@@ -1,8 +1,8 @@
# Custom Block Flow Guide # Custom Block Flow Guide — DBK Platform
> **Platform scope:** This guide describes shared CMS block workflows. Content examples belong to their named tenant. > **Platform scope:** This guide describes shared CMS block workflows for DBK Platform. Content examples (e.g. `BakeryCategories`) belong to their named tenant. HomAroma is the reference tenant. See [`docs/PLATFORM_OVERVIEW.md`](docs/PLATFORM_OVERVIEW.md).
เอกสารนี้อธิบาย Flow การสร้าง Custom Block สำหรับ HomAroma Page Builder โดยใช้ `BakeryCategories` เป็นตัวอย่างจริง เพื่อให้เพิ่ม block ถัดไปได้โดยไม่ต้อง hardcode section type ใหม่ทุกครั้ง เอกสารนี้อธิบาย Flow การสร้าง Custom Block สำหรับ DBK Platform Page Builder โดยใช้ `BakeryCategories` เป็นตัวอย่าง tenant จริง เพื่อให้เพิ่ม block ถัดไปได้โดยไม่ต้อง hardcode section type ใหม่ทุกครั้ง
## แนวคิดหลัก ## แนวคิดหลัก
+4 -4
View File
@@ -1,14 +1,14 @@
# Prisma 7 — คู่มือการเชื่อมต่อและทำ Seed (ไม่งงอีกต่อไป) # Prisma 7 — คู่มือการเชื่อมต่อและทำ Seed — DBK Platform
> **Platform engineering guide:** Any HomAroma seed data in this guide is reference-tenant data. Validate the target tenant database and seed strategy before use. See [`docs/PLATFORM_OVERVIEW.md`](docs/PLATFORM_OVERVIEW.md).
> **Platform engineering guide:** Any HomAroma seed data in this guide is reference-tenant data. Validate the target tenant database and seed strategy before use.
xx
> **สำคัญมาก:** Prisma 7 เปลี่ยนวิธีการเชื่อมต่อฐานข้อมูลอย่างพื้นฐาน > **สำคัญมาก:** Prisma 7 เปลี่ยนวิธีการเชื่อมต่อฐานข้อมูลอย่างพื้นฐาน
> ถ้าเคยใช้ Prisma 4, 5, หรือ 6 มาก่อน — ของเก่าพวกนั้น **ใช้ไม่ได้อีกแล้ว** > ถ้าเคยใช้ Prisma 4, 5, หรือ 6 มาก่อน — ของเก่าพวกนั้น **ใช้ไม่ได้อีกแล้ว**
--- ---
## 1. สิ่งที่เปลี่ยนไปจาก Prisma 6fdss → Prisma 7 ## 1. สิ่งที่เปลี่ยนไปจาก Prisma 5/6 → Prisma 7
| เรื่อง | Prisma 5/6 (เก่า) | Prisma 7 (ใหม่) | | เรื่อง | Prisma 5/6 (เก่า) | Prisma 7 (ใหม่) |
|---|---|---| |---|---|---|
+9
View File
@@ -13,6 +13,15 @@ See [Platform Overview](PLATFORM_OVERVIEW.md) for terminology.
- `PROJECT_SYSTEM_SUMMARY.md` - `PROJECT_SYSTEM_SUMMARY.md`
- `PROJECT_MANAGEMENT_PERSPECTIVE.md` - `PROJECT_MANAGEMENT_PERSPECTIVE.md`
- `LLM_MCP_GUIDE.md` - `LLM_MCP_GUIDE.md`
- `ARCHITECTURE_DECISIONS.md`
- `CUSTOM_BLOCK_FLOW_GUIDE.md`
- `ADMIN_MCP_SECTION_GUIDE.md`
- `PRISMA7_GUIDE.md`
- `mcp_update.md`
- `implementation_plan.md`
- `frontend-comparison.md`
- `BUSINESS_ANALYTICS_MAPS_PLAN.md`
- `goal.section.md`
These documents now introduce DBK Platform before mentioning HomAroma and explain These documents now introduce DBK Platform before mentioning HomAroma and explain
the platform/tenant boundary. the platform/tenant boundary.
+31 -39
View File
@@ -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) ## ตารางเปรียบเทียบ (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) | | **สถาปัตยกรรมพื้นฐาน** | 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 (ประมวลผลที่เซิร์ฟเวอร์ก่อนส่งให้ผู้ใช้) | | **การประมวลผล (Rendering)**| Client-side Rendering (ประมวลผลที่เบราว์เซอร์) | Server-side Rendering (ประมวลผลที่เซิร์ฟเวอร์ก่อนส่งให้ผู้ใช้) |
| **เป้าหมายหลัก (Use Case)** | **LINE OA / LIFF App**, Web App ที่เน้นความลื่นไหล | **SEO**, การค้นหาผ่าน Google, หน้าเว็บสาธารณะ | | **เป้าหมายหลัก (Use Case)** | **LINE OA / LIFF App**, Mobile-first commerce, Retention | **SEO**, การค้นหาผ่าน Google, หน้าเว็บแบรนด์สาธารณะ |
| **จุดเด่น** | ทำงานลื่นไหลเหมือนแอปมือถือ (ไม่กระตุกตอนเปลี่ยนหน้า), เหมาะกับ Webview ในแอปพลิเคชัน | ทำ SEO ได้ดีมาก Bot สามารถอ่านข้อมูลสินค้าได้ทันที, โหลดหน้าแรกได้ไว | | **จุดเด่น** | ทำงานลื่นไหลเหมือนแอปมือถือ (ไม่กระตุกตอนเปลี่ยนหน้า), เหมาะกับ Webview ใน LINE | ทำ SEO ได้ดีมาก Bot ของ Search Engine อ่านข้อมูลสินค้าได้ทันที, โหลดหน้าแรกได้ไว |
| **จุดด้อย** | ทำ SEO ได้ยาก (Bot ของ Google อาจจะอ่านข้อมูลไม่ครบเพราะต้องรอ JavaScript ทำงาน) | ต้องใช้ทรัพยากรฝั่ง Server ในการรัน (Node.js Process), ซับซ้อนกว่าในการตั้งค่า | | **จุดด้อย** | ทำ 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 | | **รูปแบบการ Deploy** | **Static Files** (HTML/CSS/JS) เสิร์ฟผ่าน Nginx โดยตรง | **Node.js Server** รันด้วย PM2 / Bun และใช้ Nginx ทำ Reverse Proxy |
| **ตำแหน่งไฟล์บน Server**| `/home/ti/projects/MyNginxMain/nginx/html/homaroma.shop/website` | `/home/ti/projects/homaroma-ssr` | | **คำสั่ง Build** | `cd apps/spa && bun run build` (ได้โฟลเดอร์ `dist`) | `cd apps/website && bun run build` (ได้โฟลเดอร์ `.next`) |
| **คำสั่ง Build** | `bun run build` (ได้โฟลเดอร์ `dist`) | `bun run build` (ได้โฟลเดอร์ `.next`) | | **การจัดการ Routing** | `react-router-dom` (ประมวลผลที่ฝั่ง Client ทั้งหมด) | Next.js App Router (File-based routing with Server Components) |
| **Service ที่ทำงาน**| ไม่มี (Nginx จัดการทั้งหมด) | **PM2** ชื่อ process: `homaroma-ssr` รันบนพอร์ต `3001` | | **การจัดการ State** | Zustand | React Context / Zustand / Server State |
| **การจัดการ Routing** | `react-router-dom` (ประมวลผลที่ฝั่ง Client ทั้งหมด) | Next.js App Router (มีระบบ File-based routing) | | **ความเหมาะสมของระบบ Auth**| เหมาะสมกับ **LINE LIFF Login** และ Token-based auth เพราะมี Context แบบ SPA | เหมาะกับ Cookie-based Auth / Server Session |
| **การจัดการ State** | Zustand | React Context / Zustand / Server Components |
| **ความเหมาะสมของระบบ Login**| เหมาะสมกับ **LINE LIFF Login** และ Token-based auth เพราะมี Context แบบ SPA | เหมาะกับ Cookie-based Auth (NextAuth/Auth.js) หรือ Session |
--- ---
## สรุปแนวทางการพัฒนา (Development Guidelines) ## สรุปแนวทางการพัฒนา (Development Guidelines)
### 1. เลือกใช้ `apps/website` เมื่อ: ### 1. เลือกใช้ `apps/spa` เมื่อ:
- คุณต้องการพัฒนาฟีเจอร์ที่ให้ลูกค้าเปิดใช้งานผ่าน **LINE Official Account (LIFF Menu)** - คุณต้องการพัฒนาฟีเจอร์ที่ให้ลูกค้าเปิดใช้งานผ่าน **LINE Official Account (LIFF Menu)** หรือ Social Commerce
- เน้นประสบการณ์ผู้ใช้แบบ **App-like UX** ที่ต้องการความรวดเร็วในการกดเปลี่ยนหน้า เช่น ระบบตะกร้าสินค้าแบบ Popup หรือ Dashboard ส่วนตัวลูกค้า - เน้นประสบการณ์ผู้ใช้แบบ **App-like UX** ที่ต้องการความรวดเร็วในการกดเปลี่ยนหน้า เช่น ระบบตะกร้าสินค้าแบบ Popup หรือ Dashboard ส่วนตัวลูกค้า
- ไม่สนใจเรื่อง SEO (เช่น หน้าจัดการโปรไฟล์ลูกค้าส่วนตัว, หน้า Checkout) - ไม่เน้นเรื่อง Public Search SEO (เช่น หน้าจัดการโปรไฟล์ลูกค้าส่วนตัว, หน้าสะสมแต้ม, หน้า Checkout)
### 2. เลือกใช้ `apps/ssr` เมื่อ: ### 2. เลือกใช้ `apps/website` เมื่อ:
- เป็นหน้าเพจที่ต้องการดึงดูดลูกค้าใหม่ (Acquisition) ผ่าน Search Engine (Google) - เป็นหน้าเพจที่ต้องการดึงดูดลูกค้าใหม่ (Acquisition) ผ่าน Search Engine (Google)
- หน้าสินค้า (Product Details), หมวดหมู่สินค้า (Category), หรือบทความ (Blog) ที่คุณอยากให้แชร์ลิงก์แล้วขึ้นภาพ Preview (Open Graph) ที่สวยงามบน Facebook/LINE - หน้าสินค้า (Product Details), หมวดหมู่สินค้า (Category), หรือบทความ (Blog) ที่ต้องการแชร์ลิงก์แล้วมี Rich Snippets / Open Graph สวยงามบน Facebook/LINE/X
- เป็นหน้าหลัก (Landing Page) ที่เน้นความน่าเชื่อถือและต้องการโหลดให้เร็วที่สุดตั้งแต่ครั้งแรกที่เปิด - เป็นหน้าหลัก (Landing Page) ที่เน้นความน่าเชื่อถือและต้องการโหลดให้เร็วที่สุดตั้งแต่ครั้งแรกที่เปิด (Core Web Vitals)
--- ---
## ข้อมูลเชิงลึกด้านการ Build & Deploy (Server Config) ## ข้อมูลเชิงลึกด้านการ 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 รันอยู่เบื้องหลัง ระบบนี้ถูกคอมไพล์เป็นไฟล์ Static (HTML, CSS, JS) ซึ่งไม่มีการทำงานของ Server-side รันอยู่เบื้องหลัง
- **คำสั่ง Build:** `cd apps/website && bun run build` - **คำสั่ง Build:** `cd apps/spa && bun run build`
- **สิ่งที่ได้จากการ Build:** โฟลเดอร์ `dist/` - **สิ่งที่ได้จากการ Build:** โฟลเดอร์ `dist/`
- **ตำแหน่งไฟล์ปลายทาง (Target Directory):**
`/home/ti/projects/MyNginxMain/nginx/html/homaroma.shop/website`
- **การจัดการ Environment:** ต้องประกาศตัวแปรแวดล้อมก่อนสั่ง Build เสมอ (เช่น `export VITE_LIFF_ID=...`) เพื่อให้ Vite ฝังค่าเข้าไปในไฟล์โค้ด
- **การตั้งค่า Nginx ที่จำเป็น (Routing Configuration):** - **การตั้งค่า Nginx ที่จำเป็น (Routing Configuration):**
เพื่อให้ระบบ React Router ทำงานได้โดยไม่เกิด 404 Error Nginx ต้องถูกตั้งค่าให้โยน Path ที่ไม่รู้จักกลับไปหา `index.html` เสมอ เพื่อให้ระบบ React Router ทำงานได้โดยไม่เกิด 404 Error Nginx ต้องถูกตั้งค่าให้โยน Path ที่ไม่รู้จักกลับไปหา `index.html` เสมอ
```nginx ```nginx
location / { location / {
root /usr/share/nginx/html/homaroma.shop/website; root /usr/share/nginx/html/tenant/spa;
index index.html; index index.html;
try_files $uri $uri/ /index.html; # <--- บังคับให้ SPA จัดการ Route เอง try_files $uri $uri/ /index.html; # <--- บังคับให้ SPA จัดการ Route เอง
} }
``` ```
### 🌍 2. `apps/ssr` (Next.js Application) ### 🌍 2. `apps/website` (Next.js Application)
ระบบนี้ต้องการ Node.js Server (รันผ่าน PM2) เพื่อประมวลผลข้อมูลที่ฝั่งเซิร์ฟเวอร์ทุกครั้งที่มีคนเปิดหน้าเว็บ (หรือประมวลผลไว้ล่วงหน้า) ระบบนี้ต้องการ Server Runtime (Node.js หรือ Bun) เพื่อประมวลผลข้อมูลที่ฝั่งเซิร์ฟเวอร์
- **คำสั่ง Build:** `cd apps/ssr && bun run build` - **คำสั่ง Build:** `cd apps/website && bun run build`
- **สิ่งที่ได้จากการ Build:** โฟลเดอร์ `.next/` และไฟล์ Source Code - **สิ่งที่ได้จากการ Build:** โฟลเดอร์ `.next/`
- **ตำแหน่งไฟล์ปลายทาง (Target Directory):**
`/home/ti/projects/homaroma-ssr`
- **การจัดการ Service (PM2):** - **การจัดการ Service (PM2):**
ต้องสั่งรันให้แอปทำงานอยู่เบื้องหลังเสมอด้วยคำสั่ง: รันแอปเป็น background process เช่น:
```bash ```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 ที่จำเป็น (Reverse Proxy):**
Nginx จะไม่ได้เสิร์ฟไฟล์ตรงๆ เหมือน SPA แต่ทำหน้าที่เป็นประตูส่ง Request ต่อไปให้ PM2 (ที่พอร์ต 3001) Nginx ทำหน้าที่เป็น Reverse Proxy ส่ง Request ต่อไปให้ Next.js:
```nginx ```nginx
location / { location / {
proxy_pass http://127.0.0.1:3001; proxy_pass http://127.0.0.1:3000;
proxy_http_version 1.1; proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade; proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade'; proxy_set_header Connection 'upgrade';
@@ -83,4 +75,4 @@
``` ```
--- ---
*Generated by Antigravity AI on 2026-05-01* *Updated for DBK Platform architecture standards*
+1 -1
View File
@@ -1,6 +1,6 @@
# ระบบ CMS Pages และ Section Block ของ DBK Platform # ระบบ CMS Pages และ Section Block ของ DBK Platform
> **Platform scope:** HomAroma content blocks are reference-tenant examples, not a restriction on tenant verticals. > **Platform scope:** HomAroma content blocks are reference-tenant examples, not a restriction on tenant verticals. See [`docs/PLATFORM_OVERVIEW.md`](docs/PLATFORM_OVERVIEW.md).
## การทำงานของระบบ CMS Pages และ Section Block ## การทำงานของระบบ CMS Pages และ Section Block