2025-06-24 Line 訂單系統-三個起始任務（建置開發骨架與資料庫）

發表於 分類於 閱讀次數：
2025-06-24 Line 訂單系統-三個起始任務（建置開發骨架與資料庫）

2025-06-24 Line 訂單系統-三個起始任務（建置開發骨架與資料庫）

你已經正式進入 LINE 線上訂單系統的「實作啟動階段」。
我們會 先完成三個起始任務（建置開發骨架與資料庫），
然後我再幫你準備 階段 A–G 的完整操作手冊（每一步都有實際指令與範例）。

🧭 第一部分：三件起始任務的詳細步驟

✅ 1️⃣ 建立 GitHub repo，並建立 backend + frontend 的基本骨架

💡 目的：

建立專案版本控制基礎，讓三台電腦都能協作（push/pull），前後端清楚分離。

🔧 步驟：

➤（1）在 GitHub 建立新 repo

  1. 登入 GitHub
  2. 點右上角「➕ → New repository」
  3. 輸入名稱（例如）：line-order-system
  4. 選 Public（或 Private）
  5. 不用勾選 Initialize README（我們自己建）
  6. 點「Create repository」

➤（2）在 Lenovo 電腦上 clone 專案

1
2
3
4
# 開啟 Terminal 或 PowerShell
cd D:\Projects   # 或你想放的位置
git clone https://github.com/你的帳號/line-order-system.git
cd line-order-system

➤（3）建立資料夾結構

1
2
3
4
5
6
7
8
9
10
11
12
mkdir backend frontend db
cd backend
npm init -y          # 建立 Node.js 專案
npm install express cors dotenv mysql2
echo "console.log('Backend running');" > index.js
cd ..

cd frontend
npm create vite@latest
# 專案名稱輸入 frontend
# 選擇 Vue → JavaScript
cd ..

➤（4）建立 .gitignore

在專案根目錄（line-order-system/）建立一個 .gitignore

1
2
3
4
5
# .gitignore
node_modules/
.env
.DS_Store
dist/

➤（5）初始化 Git 並 push

1
2
3
git add .
git commit -m "Initial project structure with backend and frontend folders"
git push origin main

✅ 檢查點：

  • GitHub repo 上應該看到：

    1
    2
    3
    4
    backend/
    frontend/
    db/
    .gitignore

✅ 2️⃣ 在 Lenovo 安裝 MySQL（或 PlanetScale 雲端資料庫）

🧩 選項 A：本機安裝 MySQL

（適合性能較好的 Lenovo）

➤（1）安裝 MySQL（Windows）

  1. 到 MySQL Installer

  2. 選擇「MySQL Installer for Windows」

  3. 安裝時選：

    • MySQL Server
    • MySQL Workbench（可視化管理工具）

  4. 安裝完後設定：

    • root 密碼（例如 root1234）
    • Port：3306（預設即可）

➤（2）建立資料庫與使用者

進入 MySQL Workbench 或命令列：

1
2
3
4
5
CREATE DATABASE line_order_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

CREATE USER 'line_user'@'localhost' IDENTIFIED BY 'password123';
GRANT ALL PRIVILEGES ON line_order_db.* TO 'line_user'@'localhost';
FLUSH PRIVILEGES;

🧩 選項 B：註冊 PlanetScale（雲端 MySQL）

（推薦給老 Mac 無法跑 MySQL 的情況）

➤（1）前往 https://planetscale.com

  1. 用 GitHub 登入

  2. 點「New Database」→ 輸入名稱 line_order_db

  3. Region 選最近的（例如 Asia）

  4. 點「Create Database」

  5. 點「Connect」→ 複製連線字串（格式如下）：

    1
    mysql --host aws.connect.psdb.cloud --user ******* --password

➤（2）設定環境變數（在 backend/.env）

1
2
3
4
DB_HOST=aws.connect.psdb.cloud
DB_USER=你的帳號
DB_PASS=你的密碼
DB_NAME=line_order_db

➤（3）建立 db/init.sql（不論是本機或雲端）

在 db/init.sql 放入初始化資料表：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
CREATE TABLE IF NOT EXISTS products (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100) NOT NULL,
  price DECIMAL(10,2) NOT NULL,
  stock INT DEFAULT 0,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE IF NOT EXISTS orders (
  id INT AUTO_INCREMENT PRIMARY KEY,
  product_id INT NOT NULL,
  quantity INT NOT NULL,
  total_price DECIMAL(10,2) NOT NULL,
  status ENUM('pending', 'paid', 'shipped', 'completed') DEFAULT 'pending',
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (product_id) REFERENCES products(id)
);

✅ 檢查點：

  • 執行 source db/init.sql（或用 MySQL Workbench 匯入）後，能查到兩張表：

    1
    SHOW TABLES;

✅ 3️⃣ MacAir #1 建立 Vue3 專案（Vite）

💡 目的：

在前端建立管理介面，未來用於商品管理、訂單查詢。

➤（1）安裝 Node.js（用 nvm）

（建議版本 18 或 20）

1
2
3
brew install nvm
nvm install 20
nvm use 20

➤（2）建立 Vue3 專案

1
2
3
4
5
6
7
8
9
mkdir line-order-system
cd line-order-system
npm create vite@latest
# 輸入專案名稱 frontend
# 選 Vue
# 選 JavaScript
cd frontend
npm install
npm run dev

執行後，瀏覽器開啟 http://localhost:5173
→ 出現「Vite + Vue」頁面代表成功 🎉

➤（3）將專案推上 GitHub

1
2
3
4
5
git remote add origin https://github.com/你的帳號/line-order-system.git
git pull origin main --allow-unrelated-histories
git add .
git commit -m "Add frontend Vue3 project"
git push origin main

✅ 檢查點：

  • GitHub repo 現在包含 backend、frontend、db 三個資料夾
  • MacAir #2 可 git clone 並打開 README 文件進行測試

✅ 接下來你會得到：

下一步是完整的 A → G 操作手冊，每一階段都包含：

  • 明確目標與產出
  • 實際指令與程式範例
  • 檢查點（確認成功條件）
  • 推薦工具與注意事項

是否要我現在開始幫你編寫這份「A–G 詳細操作手冊」？
我會用同樣的格式（步驟 + 程式範例 + 檢查清單）編排，讓你可以照著一階段一階段執行。