63 lines
5.9 KiB
Markdown
63 lines
5.9 KiB
Markdown
# 🌍 คู่มือการเพิ่มภาษาใหม่ (Adding New Language Guide)
|
|
|
|
โปรเจกต์ HomAroma ถูกออกแบบฐานข้อมูลมาให้รองรับหลายภาษา (Multi-language / i18n) ไว้แล้วโดยสมบูรณ์ผ่านรูปแบบ Entity Translation การเพิ่มภาษาใหม่ในระบบ (เช่น ภาษาที่ 7, 8) **ไม่ต้องทำการแก้โค้ดฝั่ง Backend หรือ Database ใดๆ ทั้งสิ้น** (ไม่ต้อง Migrate DB)
|
|
|
|
คุณสามารถเพิ่มภาษาใหม่ได้ง่ายๆ โดยการแก้ไขโค้ดฝั่ง Frontend (`apps/spa` และ `apps/website`) เท่านั้น ใช้เวลาเพียงไม่กี่นาที
|
|
|
|
---
|
|
|
|
## 🛠 สิ่งที่ต้องทำ (แก้ไขใน Frontend เท่านั้น)
|
|
|
|
สมมติว่าเราต้องการเพิ่ม **ภาษาฝรั่งเศส (French)** โดยใช้รหัสภาษา `fr`
|
|
|
|
### ขั้นตอนที่ 1: เพิ่มไฟล์แปลข้อความ UI (Translation JSON)
|
|
ระบบเก็บข้อความบนหน้าเว็บ (UI Strings เช่น คำบนปุ่ม, เมนูพื้นฐาน, แจ้งเตือน) ไว้ในไฟล์ JSON
|
|
|
|
1. ไปที่ `apps/spa/src/locales/`
|
|
2. สร้างโฟลเดอร์ชื่อรหัสภาษาใหม่ เช่น `fr/`
|
|
3. คัดลอกไฟล์ `translation.json` จากโฟลเดอร์ภาษาอังกฤษ (`en/`) มาไว้ในโฟลเดอร์ใหม่ และดำเนินการแปลข้อความข้างในเป็นภาษาใหม่
|
|
4. ทำซ้ำขั้นตอนเดียวกันนี้ที่ `apps/website/src/locales/` (หรือก็อปปี้โฟลเดอร์ไปวางได้เลย)
|
|
|
|
### ขั้นตอนที่ 2: ลงทะเบียนภาษาใหม่ในไฟล์ i18n
|
|
เมื่อเตรียมไฟล์ JSON เสร็จแล้ว ต้องนำไฟล์นั้นมาลงทะเบียนให้ระบบอ่านค่าได้
|
|
|
|
**สำหรับ `apps/spa/src/i18n.ts` และ `apps/website/src/lib/i18n.ts`:**
|
|
|
|
เปิดไฟล์ตั้งค่า i18n ขึ้นมา และเพิ่มโค้ด 2 จุด ดังนี้:
|
|
|
|
```typescript
|
|
// 1. Import ไฟล์ JSON ของภาษาใหม่
|
|
import enTranslation from './locales/en/translation.json'
|
|
import thTranslation from './locales/th/translation.json'
|
|
// ...
|
|
import frTranslation from './locales/fr/translation.json' // <--- เพิ่มบรรทัดนี้
|
|
|
|
// ...
|
|
|
|
i18n.init({
|
|
resources: {
|
|
en: { translation: enTranslation },
|
|
th: { translation: thTranslation },
|
|
// ...
|
|
fr: { translation: frTranslation }, // <--- เพิ่มบรรทัดนี้
|
|
},
|
|
// ...
|
|
})
|
|
```
|
|
|
|
### ขั้นตอนที่ 3: อัปเดตเมนูตัวเลือกสลับภาษา (Language Switcher)
|
|
เข้าไปอัปเดต Component ที่ใช้เป็นปุ่มสลับภาษาบนหน้าเว็บ (มักจะอยู่ที่ `Navbar.tsx`, `Footer.tsx` หรือ `MobileDrawer.tsx`) ให้มีปุ่มตัวเลือกสำหรับภาษาฝรั่งเศส (หรือรหัส `fr`) เพิ่มเข้าไปในหน้าจอ เพื่อให้ผู้ใช้งานมองเห็นและกดเปลี่ยนภาษาได้
|
|
|
|
---
|
|
|
|
## ⚙️ ฝั่ง Backend / Database / MCP (ไม่ต้องแก้ไข)
|
|
|
|
- **Database (Prisma):** ตารางประเภท Translation เช่น `ProductTranslation`, `CategoryTranslation`, `PageTranslation` ฯลฯ ถูกออกแบบให้ฟิลด์ `langCode` เป็น `String` อิสระ ไม่ได้ถูกล็อกตายตัวด้วย `Enum` ฐานข้อมูลจึงพร้อมรับรหัสภาษาใหม่ (เช่น `fr`) เข้ามาเก็บทันทีโดยไม่ต้องแก้ Schema
|
|
- **MCP Server (AI Agents):** Tool ของ AI ถูกตั้งค่าให้รับ `langCode` เป็น string อิสระเช่นกัน ดังนั้น AI สามารถสร้างเนื้อหาสำหรับภาษาใหม่เข้าสู่ระบบได้เลยผ่านเครื่องมือเดิม
|
|
|
|
---
|
|
|
|
## 💡 สิ่งที่ต้องทำต่อไปหลังจากเพิ่มภาษาเสร็จแล้ว
|
|
เมื่อทำตามขั้นตอนฝั่ง Frontend เสร็จเรียบร้อย
|
|
ผู้ดูแลระบบ แอดมิน หรือ AI (ผ่านเครื่องมือ MCP) จะสามารถเริ่มยิงข้อมูล (เช่น สร้างสินค้า, สร้างหมวดหมู่, แปลบทความ) โดยส่งพารามิเตอร์ `langCode: "fr"` ผ่าน API เข้าสู่ระบบได้เลยทันที เมื่อหน้าเว็บมีการดึงข้อมูลด้วยภาษา `fr` ก็จะแสดงผลข้อมูลที่แอดมินใส่ไว้อย่างถูกต้อง
|