iT邦幫忙

2024 iThome 鐵人賽

DAY 23
0
JavaScript

從PM到前端開發:我的React作品集之旅系列 第 23

Day 23: 使用 API 管理 i18n,多語言支援的後端實作

  • 分享至 

  • xImage
  •  

在之前的文章中,我們探討了如何透過本地 JSON 檔案來管理多語言支援(i18n)。隨著專案的擴展和多語言需求的增加,本地管理翻譯檔案可能變得不夠靈活。今天,我們將專注於後端,講述如何使用 Node.js 來建立一個 API,讓我們能夠動態管理翻譯資料,實現更高效的多語言支援架構。

為什麼要將 i18n 資料從本地轉為 API 形式?

  1. 集中管理翻譯資源:透過 API,所有翻譯資料都可以集中存放在伺服器上,減少本地存儲的複雜性,並確保翻譯內容能夠快速更新。
  2. 即時更新翻譯資料:透過 API,翻譯資料可以即時從伺服器載入,無需重新部署應用程式。這大幅提升了多語言應用的靈活性。
  3. 擴展性:API 管理可以允許我們隨時新增或修改翻譯內容,且可以針對不同地區動態提供適當的翻譯資料。

實際演練

Step 1: 初始化 Node.js 專案

首先,我們創建一個 Node.js 專案來搭建伺服器,並且安裝必要的依賴。

mkdir react-webpack-starter
cd react-webpack-starter
npm init -y
npm install express cors  
npm install -g vercel
  • express:用來建立伺服器的框架。
  • cors:解決跨域問題。
  • vercel :用於最終部署伺服器。

Step 2: 設定 Express 伺服器

接下來,我們會創建一個簡單的 Express 伺服器,並透過 API 提供多語言翻譯資料。這些翻譯資料將以 JSON 的形式返回給前端,並根據請求中的語言參數動態提供對應的翻譯。在根目錄下建立 server.js 文件,這是我們的後端伺服器主檔案。

// server.js
const express = require('express');
const cors = require('cors');
const app = express();
const PORT = process.env.PORT || 3000;

// 中間件
app.use(cors());
app.use(express.json());

// 翻譯資料
const translations = {
  en: {
   //...其他英文翻譯資料
   projectData: [
            {
                id: 1,
                date: "2024",
                category: "React Project",
                title: "Portfolio Website",
                description: `Created a personal portfolio website to showcase projects, blog posts, and professional experience. 
                    The website includes an interactive homepage, project filtering, and a blog section, all integrated into a smooth single-page application experience.`,
                stack: ['React', 'Figma'],
                image: "project1.png",
                live: {
                    icon: "projects/live.png",
                    url: "https://luma-c.com/home"
                },
            {
                id: 2,
                date: "2024",
                category: "UI/UX Design",
                title: "Recipe App Design",
                description: `Designed a recipe app for iPhone 14 with popular recipe recommendations, meal suggestions, live shopping, and ingredient purchase features. The interface is simple and intuitive, optimizing the browsing and buying experience.`,
                stack: ["Figma"],
                image: "project2.png",
                live: "",
            }
        ]
  },
  zh: {
     //...其他中文翻譯資料
       projectData: [
            {
                id: 1,
                date: "2024",
                category: "React 專案",
                title: "個人作品網站",
                description: `建立一個個人作品網站,展示項目、博客文章和專業經驗。網站包含互動首頁、項目過濾和博客部分,所有內容集成於單頁應用之中。`,
                stack: ['React', 'Figma'],
                image: "project1.png",
                live: {
                    icon: "projects/live.png",
                    url: "https://luma-c.com/home"
                },
            },
            {
                id: 2,
                date: "2024",
                category: "UI/UX 設計",
                title: "食譜APP設計",
                description: `針對 iPhone 14 設計的食譜APP,具備熱門食譜推薦、三餐推薦、購物直播及食材購買功能。界面設計簡潔直觀,並優化了使用者的瀏覽與購買體驗。`,
                stack: ["Figma"],
                image: "project2.png",
                live: "",
        }
  },
};

// 翻譯 API 端點
app.get('/api/translations', (req, res) => {
  const lang = req.query.lang || 'en'; // 預設語言為英文
  res.json(translations[lang] || translations.en); // 返回對應語言的翻譯
});

// 啟動伺服器
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Step 3: 配置路由

vercel.json 文件中配置路由:

{
    "version": 2,
    "builds": [
        {
            "src": "server.js",
            "use": "@vercel/node"
        }
    ],
    "routes": [
        {
            "src": "/api/translations",
            "dest": "/server.js"
        }
    ]
}

Step 4 : 部署到Vercel

以系統管理員開啟命令提示字元,使用 Vercel CLI 登入並部署專案:

vercel

Vercel 會自動檢測專案並進行部署。部署成功後,你會看到以下的執行結果:

https://ithelp.ithome.com.tw/upload/images/20240923/20168330JgSNmn2Y3G.png

你可以通過該 URL 你可以測試 API,
https://ithelp.ithome.com.tw/upload/images/20240923/201683304GPu7W1L6P.png

結語

今天,我們專注於後端,介紹了如何使用 Node.js 搭建一個簡單的 API 來動態管理多語言翻譯資料。這樣的架構能夠讓我們更靈活地管理和更新翻譯資料,減少了本地 JSON 文件的複雜性,並提升了應用程式的可擴展性與靈活性。

明天,我們將繼續討論如何在前端應用中使用這個 API,實現動態的 i18n 資料加載與切換。如果你對更多前端技術或專案實作有興趣,請持續關注我們的後續文章!


流光館Luma<∕> ✨ 期待與你繼續探索更多技術知識!



上一篇
Day 22: 自製 Swiper UI 組件,打造靈活的專案展示頁面
下一篇
Day 24: 從 JSON 到 API,優化 i18n 資料加載
系列文
從PM到前端開發:我的React作品集之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言