iT邦幫忙

2025 iThome 鐵人賽

DAY 13
0

「如果前端是舞台,那麼後端就是支撐整場表演的幕後機械。」

在前幾天,我們談過使用者旅程、前端框架(React/Next.js),也為專案打好了系統藍圖。今天,正式走進後端的核心—— Node.js/Express

對於「韌性生活指南」這個專案來說,後端的角色主要有三件事:

1.資料交換的橋樑: 把前端使用者的輸入,轉化為能操作的請求(Request),再回傳乾淨、結構化的回應(Response)。
2.業務邏輯的守門員: 確保推薦物資的流程有清楚邏輯,不會因隨便的參數就回傳奇怪的清單。
3.擴充的基礎: 日後若要接入更多 API(電商、AI 模組、官方資料庫),必須能快速新增與管理。


為什麼選擇 Node.js/Express

原因有三:

  • **與前端同語系:**前端React/Next.js已經是JavaScript,後端也用Node.js,可以減少心智切換。
  • 社群與資源豐富: Express是Node.js生態系最成熟的框架,擴充套件多、解法多,適合快速開發side project。
  • **足夠靈活:**這個專案目前還在實驗階段,不需要一開始就承擔複雜的企業級架構,Express 提供了剛剛好的自由度。

對於鐵人賽30天side project的場景來說,Express就像是一個輕巧但可靠「積木底座」。


架構設計:API的骨架

先定義「資源 (Resource)」與「行為 (Action)」,再決定路由 (Route)。

以防災物資推薦平台」為例,核心資源有:

  • users: 使用者(居住人數、年齡層、住宅型態、寵物…)
  • items: 物資清單(來自官方清單與擴充內容)
  • recommendations: 推薦結果(依情境與使用者條件生成)

因此,我會設計出以下 API:

POST   /api/users                 # 建立使用者需求設定
GET    /api/items                 # 取得物資清單
POST   /api/recommendations       # 生成推薦物資清單

這樣的規劃能確保前端清楚知道要去哪裡拿資料,而後端則能保持職責分明。


實作範例:Express後端骨架

以下是一個最小可行的 Express 伺服器範例:

import express from "express";
import bodyParser from "body-parser";

const app = express();
app.use(bodyParser.json());

// 假資料:官方物資清單 (之後可串接 MongoDB)
const items = [
  { id: 1, name: "飲用水", category: "必需品" },
  { id: 2, name: "乾糧", category: "必需品" },
  { id: 3, name: "口罩", category: "醫療" },
];

// 取得物資清單
app.get("/api/items", (req, res) => {
  res.json(items);
});

// 生成推薦清單(簡化版邏輯)
app.post("/api/recommendations", (req, res) => {
  const { people, hasPet } = req.body;
  let result = [...items];

  if (hasPet) {
    result.push({ id: 99, name: "寵物飼料", category: "寵物" });
  }

  res.json({
    recommendedFor: `${people} 人家庭`,
    items: result,
  });
});

app.listen(3000, () => {
  console.log("Server is running on http://localhost:3000");
});

這段程式碼雖然簡單,但已經完成了「前端輸入 → 後端處理 → 回傳推薦」的最小循環。未來我們可以將假資料替換為MongoDB Atlas,再把推薦邏輯接到AI 模組,讓清單更智慧化。


延展性考量:為未來留空間

一個好的後端,不是能跑就好,而是要能隨時進化。我會預留這些設計:

1.API文件化: 用 Swagger/OpenAPI 生成 API 文件,方便日後擴充與協作。
2.環境管理: 使用 .env 管理金鑰(AI API、電商 API),避免敏感資訊外洩。
3.模組化邏輯: 把「推薦邏輯」拆到獨立檔案,未來可以替換成更複雜的 AI 判斷。
4.錯誤處理: 針對輸入錯誤、API 失效時的回應,提供清楚訊息,避免前端「一片空白」。


小結:後端是韌性的重要基礎

對「韌性生活指南」這個專案來說,後端不是冷冰冰的程式碼,而是把資訊轉化為可行動的橋樑
一個穩定、模組化的後端,能讓平台:

  • 安全地擴展
  • 快速地迭代
  • 靈活地串接外部服務

這正是「韌性」在技術世界裡的具體展現。


明日預告(Day 14):我將分享資料庫設計:如何用MongoDB Atlas管理物資清單,並揭露第一版的資料模型。


上一篇
Day 12|前端設計:React/Next.js 與使用者介面
下一篇
Day 14|資料庫模型:MongoDB Atlas 與物資清單結構
系列文
《韌性生活指南:用科技打造更堅韌的日常》14
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言