小提醒！
昨天的 LIFF 表單在存入 orders 資料表時，欄位有變動，大家可依個人需求作欄位的調整！若不想調整，想直接沿用 Day 11 所建立的 schema 也是可以的喔～將 axios.post 中的 payload 修一下就可以了。
文末有昨日 LIFF 表單的測試結果。

昨天我們完成了顧客下單（LIFF 表單）與訂單流程的串接，現在是時候來建構「店家端」的後台了。

沒有後台，店家只能依靠 LINE 推播查看訂單，長期下來難以管理。

今天我們將建立一個簡單的 Admin 後台雛形，包含基本 UI 架構與登入頁面，作為未來擴充（訂單列表、狀態修改、報表）的基礎。

為什麼需要後台？

• LINE 推播只能即時提醒，無法完整管理。

• 店家需要一個「集中檢視」的地方來管理所有訂單。

• 後台 UI 是往電商系統邁進的必經之路。

後台 UI 架構設計

• 使用 React/Vue（本文以 React + Vite 為例）。

• 頁面結構：

  • /login 登入頁面

  • /dashboard 後台首頁

• Navbar、Sidebar、主要內容區。

登入頁面設計

• 簡單的表單：Email / Password。

• 按下登入 → 呼叫 /auth/admin/login API。

• 成功 → 儲存 JWT 到 LocalStorage，導向 /dashboard。

Router 與保護路由

• 使用 React Router：登入後才能進入 /dashboard。

• 沒有 JWT → 自動跳轉到 /login。

程式碼片段

建立 React 專案

npm create vite@latest admin-frontend -- --template react
cd admin-frontend
npm install react-router-dom axios

Router 架構 (App.jsx)

import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import Login from "./pages/Login";
import Dashboard from "./pages/Dashboard";

function App() {
  const token = localStorage.getItem("jwt");
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route
          path="/dashboard"
          element={token ? <Dashboard /> : <Navigate to="/login" />}
        />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

登入頁面 (pages/Login.jsx)

import { useState } from "react";
import axios from "axios";

export default function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  async function handleLogin(e) {
    e.preventDefault();
    try {
      const res = await axios.post("http://localhost:3000/auth/admin/login", {
        email, password
      });
      localStorage.setItem("jwt", res.data.jwt);
      window.location.href = "/dashboard";
    } catch (err) {
      alert("登入失敗");
    }
  }

  return (
    <form onSubmit={handleLogin}>
      <h2>Admin Login</h2>
      <input value={email} onChange={e => setEmail(e.target.value)} placeholder="Email" />
      <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Password" />
      <button type="submit">登入</button>
    </form>
  );
}

Dashboard 頁面 (pages/Dashboard.jsx)

export default function Dashboard() {
  return (
    <div>
      <h1>管理後台</h1>
      <p>這裡未來會顯示訂單列表</p>
    </div>
  );
}

重點回顧

• 今天我們完成了 Admin 後台雛形：登入頁面 + Dashboard 架構。

• 這是往訂單管理系統邁進的重要一步，明天(Day 18)會開始實作完整邏輯。

昨日(Day 16) LIFF 表單測試結果

上述操作步驟結束後，不僅會建立一筆訂單到我們 Day 11 所建立的 mongoDB，也會觸發到 Day 12 的訂單通知流程！有沒有漸漸覺得所有東西都連貫在一起了XD

鐵人賽也大概參賽到一半了，只能說蠻慶幸自己當初有按下報名的，把一個專案的最小可行範圍先拆分成 30 天的實作，不僅在工作之餘不會帶來太大的負擔，還可以學習到一些工作領域外的新事物，希望大家都能順順利利完賽並達成當初參加比賽的初衷！

接下來，
Week 3 會以後台與安全為主；
Week 4 則會以商業化延伸（取貨、金流、報表）、部署與維運為主。

Day 18 就會開始帶大家實作 Admin 後台的登入機制，讓網站更加安全。

參考

Vite 官網