2025-08-02 Line 訂單系統- 三台機器像工程公司入職手冊

發表於 2025-11-22 分類於 OneDayOneNote 閱讀次數：

「企業級完整入職手冊（Fully-Featured Onboarding Handbook）」**，並將：

✔ 所有開發需要的工具
✔ 所有必裝的 VS Code 外掛
✔ 前端、後端、文件機各自的軟體
✔ Git / Node / DB / Redis / CICD / Debug 工具
✔ 專案規範
✔ 新工程師第一週任務

全部寫進去。

格式採用「企業標準手冊」，可直接貼入 GitHub Wiki / 公司 Notion / Confluence。

🏢《工程部入職手冊（Full Onboarding Handbook）》

適用：LINE AI 訂單系統
版本：1.1（強化版）

📌 第一章：專案簡介（Project Overview）

本專案為 LINE AI 訂單管理系統，採用三台 Notebook 作為整個系統的開發與運行環境：

設備	角色	用途
Lenovo（32GB）	後端主機	NestJS API + MySQL + Redis + LINE Webhook
MacBook Air #1（4GB）	前端開發機	Vue3 管理後台、RWD、UI/UX
MacBook Air #2（4GB）	文件＋設計機	架構、流程、Mermaid、Wireframe、文件

📌 第二章：本專案採用的技術棧（Technology Stack）

🟨 後端（Lenovo）

Node.js LTS + NVM
NestJS
MySQL
Redis (Memurai 替代)
Ngrok（Webhook 測試）
Swagger API
PM2（未來部署用）

🟦 前端（MacBook Air #1）

Vite
Vue3 + Composition API
Pinia
Axios
Vue Router
TailwindCSS（可選）

🟪 文件 / 設計（MacBook Air #2）

Notion
Obsidian
VS Code（輕量擴充）
Mermaid
Figma / Draw.io

📌 第三章：所有工程師必安裝的基礎工具

無論哪台電腦，都必須安裝：

✔ 1. Git（版本控制）

Windows（Lenovo）

安裝 Git for Windows
安裝 Git Bash

Mac（兩台）

1	brew install git

✔ 2. VS Code（主要開發工具）

三台都要裝，但用途不同：

🟦 Lenovo（後端）

必裝擴充：

ESLint
Prettier
NestJS Files
DotENV
GitLens
REST Client
MySQL
Redis Explorer

🟧 Mac #1（前端）

必裝擴充：

Vue Language Features (Volar)
Vite
Tailwind CSS IntelliSense
ESLint
Prettier
Path Intellisense
Debugger for Chrome

🟪 Mac #2（文件）

必裝擴充：

Markdown All in One
Mermaid Markdown Syntax Highlighting
Draw.io Integration
GitLens

✔ 3. Node.js LTS + NVM（每台都要）

Mac：

1 2	brew install nvm nvm install 18

Windows：

安裝 nvm-windows

1 2	nvm install 18 nvm use 18

📌 第四章：各設備完整 Setup（企業標準）

🖥️ A. Lenovo（後端＋DB＋Redis 主機）Setup

這台是整個系統的「後端中樞」。

1. 安裝 Node / Git / VS Code

（已在前章說明）

2. 安裝 MySQL（核心資料庫）

步驟：

下載 MySQL Installer
安裝 MySQL Server 8.0 + Workbench
設定 root 密碼：

1	root / LocalDev123!

建立資料庫：

1	CREATE DATABASE line_order;

匯入初始資料：

1	mysql -u root -p line_order < db/init.sql

3. 安裝 Redis

Windows 使用 Memurai 替代 Redis：

安裝 Memurai
自動啟動即可（無需額外設定）

4. 安裝 NestJS CLI

1	npm i -g @nestjs/cli

5. Clone backend 專案

1
2
3

git clone https://github.com/.../backend.git
cd backend
npm install

6. 設定 .env

PORT=3000
DATABASE_HOST=localhost
DATABASE_USER=root
DATABASE_PASS=LocalDev123!
DATABASE_NAME=line_order

REDIS_HOST=localhost
REDIS_PORT=6379

LINE_CHANNEL_SECRET=xxxx
LINE_CHANNEL_ACCESS_TOKEN=xxxx

7. 啟動後端

1	npm run start:dev

8. 用 Ngrok 開 Webhook 通道

1	ngrok http 3000

🍎 B. MacBook Air #1（前端開發機）Setup

這台是 Vue3 管理後台的主力開發環境

1. 安裝 Node / Git / VS Code（前述）

2. 建立 Vue3 專案

1
2
3

npm create vite@latest admin --template vue
cd admin
npm install

3. 開發伺服器

1	npm run dev

4. 設定 API 端點

在 .env：

1	VITE_API_BASE=http://lenovo-ip:3000

5. 安裝前端必要模組

1	npm i axios pinia vue-router

Tailwind（可選）

1 2	npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

🍎 C. MacBook Air #2（文件＋設計機）Setup

1. 安裝文件工具

Notion（公司文件）
Obsidian（個人技術知識庫）
VS Code（文件用途）

2. 安裝架構／流程工具

Figma（UI 設計）
Draw.io（流程圖）
Mermaid（架構圖）

3. Git 用途

此機主要更新文件：

1
2
3

git add .
git commit -m "docs: update architecture"
git push

📌 第五章：專案規範（Coding Standards）

✔ 後端（NestJS）

每個 module＝Controller + Service + DTO + Entity
Service 不直接回傳 response
Controller 只處理 Request / Response
使用 ValidationPipe
每個 API 要寫 Swagger

✔ 前端（Vue3）

使用 Composition API
Store 統一使用 Pinia
所有 API 呼叫封裝在 /api/ 目錄
元件命名統一：PascalCase.vue
UI 採用可維護設計（Tailwind 或 ElementPlus）

📌 第六章：新工程師入職流程（企業標準）

🗓 第一天

安裝所有工具（依 3 台分工）
Clone GitHub
跑起後端與前端

🗓 第二天

練習建立 Vue 頁面
練習呼叫 /products API

🗓 第三天

練習建立 NestJS Module
學會 DTO, Controller, Service 流程

🗓 第四天

狀態管理（Pinia）
完成商品 CRUD UI

🗓 第五天

熟悉 LINE Webhook 流程
完成「購買 1」→ 自動建立訂單

📌 第七章：三台電腦整體架構（Mermaid）

flowchart LR

  subgraph Mac1[MacBook Air #1 - 前端開發機]
    F1[Vue3 Admin\nVite Dev Server]
  end

  subgraph Mac2[MacBook Air #2 - 文件 / 設計機]
    D1[Mermaid 架構圖]
    D2[Wireframe]
    D3[Notion 文件]
  end

  subgraph Lenovo[Lenovo - 後端 / DB 主機]
    B1[NestJS API]
    B2[MySQL]
    B3[Redis]
    B4[LINE Webhook Server]
  end

  F1 -->|REST API| B1
  B1 --> B2
  B1 --> B3
  D1 -.-> B1
  D3 -.-> F1

🎉 最終完成！

如果你需要我再產生：

✅ PDF 版
✅ DOCX 版
✅ 公司 Wiki（Markdown 完整版）
✅ 產出三台機器的「桌面圖示配置」
✅ 產出「每日開發例行事項」

都可以告訴我，我會幫你補進去。