---
# System prepended metadata

title: Final Project

---

# Final Project

[TOC]

### 零、專案初步規劃

- 專案主題：網路甜點店 - 甜之呼吸
- 協作人員：Core Kang、Heidi、Ivy、Oceankj
- 專案時程：12 月上半完成規劃，預計二到四個禮拜完成
- 專案架構：
  - 產品介紹與目標
  - 使用者故事
  - 產品功能架構 User Story
    - 使用流程圖 User Flow Map
    - 網頁功能架構 Wireframe
    - 資料庫架構 Database
- 參考實例：
  - [PONPIE](https://ponpie.tw/)
  - [溪底遙學習農園](https://www.befarmer.com/)
  - [Buonissimo](https://buonissimo.com.tw/)
  - [品好乳酪](https://www.pincheesecake.com/)
  - [游游農產](https://yuyufarm.com/)
- 參考 UI：
  - [甜之呼吸 Zeplin](https://app.zeplin.io/project/5fc4feb5c23582b72a791d00/dashboard#)（[樣板來源](https://www.sketchappsources.com/free-source/4450-flower-store-ui-kit-sketch-freebie-resource.html)）
  - [RWD 參考樣板（來源：六角）](https://xd.adobe.com/spec/934efdb7-a7e4-47d5-572e-efece0914f62-e57f/grid)

### 一、產品介紹與目標

#### 1.1 產品簡介

「甜の呼吸」是一個以實體店面為基礎的網路甜點店，提供管理者簡易操作的平台，讓消費者能夠在線上選購甜點，並整合物流與金流服務。

#### 1.2 產品目標功能

- 共同區塊
  - Navbar：頁面連結、社群連結
  - Footer：電話、地址、Copyright、回到頂部 
- 首頁
  - Banner：轉場圖片、超連結
  - 推薦商品
- 訊息模組
  - 共同區塊：Instagram 等社群預覽
  - 最新消息：分頁功能（每 5 則）
  - 單篇消息
  - 關於品牌：店面資訊、Google Map
- 商品模組
  - Breadcrumbs：導覽路徑
  - 全部產品：依產品選單排序、進入商品頁面、加入購物車、加入追蹤
  - 單一產品：商品資訊、直接購買、加入購物車、加入最愛
  - 產品搜尋
- 購物模組
  - 購物車頁面：新增、刪除商品
  - 結帳頁面：串接物流、金流
- 會員系統（消費者）
  - 註冊、登入、登出功能：Google／Facebook 帳戶連結
  - 編輯會員資料：重設密碼功能
  - 檢視訂單：訂單明細、取消功能、付款狀況、物流進度、貨到通知
  - 檢視追蹤清單
  - 客服功能
- 後台管理系統（管理者）
  - 首頁 Banner：修改圖片（數量限制）
  - 會員管理：查看會員資訊、折價券派發
  - 產品管理：產品資訊、產品分類、產品價格
  - 訂單管理：訂單明細、付款狀況、物流進度
  - 訊息管理：訂單訊息、貨到通知、最新活動
  - 銷量分析：即時銷量、銷售排名、瀏覽排名

### 二、使用者故事（User Story）

#### 1.1 身份

- 管理員
- 使用者（會員 + 非會員）
- 會員

#### 1.2-1 前台

- 首頁

[Navbar]

P1 身為一個使用者，我希望首頁能有 nabvar 導覽區塊，我才可以很快掌握網站提供哪些服務
P1 身為一個使用者，我希望能進入註冊登入頁面，讓我能登入使用網站提供的服務

[Banner]

P1 身為一個使用者，我希望能透過橫幅廣告，讓我一進入網站就快速瞭解品牌風格
P2 身為一個使用者，我希望能透過點擊橫幅廣告，直接連結到相關活動或商品頁面

[推薦商品]

P1 身為一個使用者，我希望能在首頁看到推薦商品，讓我能快速瀏覽店家主打的商品

[共同區塊]

P1 身為一個使用者，我希望網站右下角隨時有回到頂部的按鈕，方便快速回到頁面頂端
P1 身為一個使用者，我希望網站最下方有 footer 區塊，能夠顯示店家相關資訊
P2 身為一個使用者，我希望網站有 Messenger 功能，可以即時詢問客服有關訂單、商品等問題

- 註冊登入頁面

P1 身為一個使用者，我希望能註冊登入會員，讓我能夠使用網站提供的服務
**P2 身為一個使用者，我希望能連結社群帳號，讓我能註冊登入使用網站提供的服務**
P2 身為一個會員，如果我忘記密碼了，希望在註冊登入頁面能有忘記密碼的功能，能夠收信來重設密碼

- 最新消息頁面

P1 身為一個使用者，我希望能在消息頁面，查看店家最近有什麼活動或優惠
P2 身為一個使用者，我希望能在消息頁面看到店家社群資訊（FB、IG 貼文預覽功能）
P2 身為一個使用者，我希望消息頁面有提供標籤功能，能夠方便查看相關類型的資訊

- 關於品牌頁面

P1 身為一個使用者，我希望能在關於品牌頁面，瀏覽店家資訊、實體店面位置、或是品牌故事

- 產品頁面

[所有商品頁面]

P1 身為一個使用者，我希望能有商品分類，我才能透過分類查看有沒有想要的商品
P1 身為一個使用者，我希望能在點擊個別商品後，能夠進入單一商品頁面，看到該商品的詳細資訊，我才能根據商品內容、價格決定要不要購買
P2 身為一個使用者，我希望能有搜尋功能，我才可以快速查看是否有我想要的商品
P2 身為一個使用者，我希望能在進入商品詳細頁面之前，就能直接把想要的商品加入購物車
P2 身為一個會員，我希望能在進入商品詳細頁面之前，就能直接把想要的商品加入追蹤
P2 身為一個使用者，我希望商品頁面右側隨時有購物車按鈕，方便查看購物車
P3 身為一個使用者，我希望商品頁面右側的購物車按鈕會顯示商品數量，方便直接查看購物車商品數量

[單一商品頁面]

P1 身為一個使用者，我希望能在商品詳細頁面把想購買的商品加入購物車，之後再決定要不要結帳
P2 身為一個會員，我希望能在商品詳細頁面把喜歡的商品加入追蹤清單，之後想買才可以快速找到這個商品

- 購物車頁面

註：會員才可以進入結帳頁面

P1 身為一個使用者，我希望能在購物車頁面，新增、刪除購物車內容
P1 身為一個使用者，我希望能在結帳前，有註冊、登入會員的選項，登入後可以直接跳轉回結帳頁面
P1 身為一個會員，我希望可以選擇付款方式
~~P1~~ ***P2 身為一個會員，我希望可以選擇商品運送方式，或選擇到店取貨**
P2 身為一個會員，我希望在結帳前可以確認選購的商品是否適用優惠活動

- 會員系統頁面

P1 身為一個會員，我希望能在會員系統頁面編輯會員資料
**P1 身為一個會員，我希望能在檢視訂單頁面，查看訂單明細、付款狀況、~~物流進度~~、貨到通知
P2 身為一個會員，我希望能在檢視訂單頁面，查看物流進度**
P2 身為一個會員，我希望能在追蹤清單中，查看或編輯追蹤商品清單

#### 1.2-2 後台

- 後台管理系統

P1 身為一個管理者，我希望能夠在後台管理系統頁面，選擇要管理網站的哪個區塊

- 首頁管理

~~P1~~ **P2 身為一個管理者，我希望能在首頁管理頁面，修改 Banner 圖片**
P1 身為一個管理者，我希望能在首頁管理頁面，修改 Footer 裡面的資訊
P1 身為一個管理者，我希望能在首頁管理頁面，修改推薦商品資訊
P2 身為一個管理者，我希望能在首頁管理頁面，修改 Banner 連結網址

- 消息管理頁面

P1 身為一個管理者，我希望能在消息管理頁面，新增、編輯、刪除（軟刪除/ 狀態調整）要發布的文章
P2 身為一個管理者，我希望在消息管理頁面中，能有一個區塊提供內嵌功能，用來顯示 Instagram 或 Facebook 等社群貼文
P3 身為一個管理者，我希望在消息管理頁面中，可以自由拖曳排版位置

- 關於品牌管理頁面

~~P1~~ **P2 身為一個管理者，我希望能在關於品牌管理頁面，修改店家資訊、實體店面位置、或是品牌故事內容**

- 商品管理頁面

[所有商品頁面]

P1 身為一個管理者，我希望能夠在商品管理頁面，管理要刊登的商品，顯示商品上下架、補貨、售完等狀態
P1 身為一個管理者，我希望能夠在所有商品管理頁面，進入單一商品管理頁面進行編輯
P1 身為一個管理者，我希望能夠在商品管理頁面，修改商品類別
P3 身為一個管理者，我希望在商品管理頁面中，可以自由拖曳排版位置

[單一商品頁面]

P1 身為一個管理者，我希望能夠在單一商品管理頁面，編輯個別商品詳細內容
P2 身為一個管理者，我希望能夠在單一商品管理頁面，建立商品關鍵字（標籤），讓顧客能透過搜尋功能快速找到想要的商品

- 會員管理系統

P1 身為一個管理者，我希望能查看會員清單，快速掌握會員資訊，能夠查看會員取貨表現
P1 身為一個管理者，我希望能編輯會員權限狀態，例如未取貨達到一定次數的會員，可自動或手動編輯該對象的購物權限
P1 身為一個管理者，我希望能搜尋會員，查看該會員資料

- 訂單管理系統

P1 身為一個管理者，我希望能在訂單管理系統，查看有哪些未完成、已完成訂單
P1 身為一個管理者，我希望能在訂單管理系統，查看訂單明細，確認付款狀況、物流進度
P1 身為一個管理者，我希望能有手動取消訂單的功能，避免商品庫存不足的情況發生

- 訊息管理系統

P1 身為一個管理者，我希望能在顧客完成訂單後，系統自動透過 email 發送下訂成功通知
P1 身為一個管理者，我希望能在商品到貨後，系統自動發送貨到通知
P2 身為一個管理者，我希望能在顧客完成訂單後，系統自動透過簡訊或其他方式發送下訂成功通知
P2 身為一個管理者，我希望能在訊息管理系統，編輯需要自動發送的訊息內容
P2 身為一個管理者，我希望能手動發送活動通知訊息

- 客服系統

P2 身為一個管理者，我希望網站有提供 LINE、Messenger 功能，可以快速回覆顧客訊息
P2 身為一個管理者，我希望可以在客服訊息管理頁面，查看顧客的信件內容
P2 身為一個管理者，我希望可以在客服訊息管理頁面，回覆顧客來信

### 三、產品功能架構

#### 3.1 使用流程圖 User Flow Map

見附件一 (文件下方)

#### 3.2 網頁功能架構 Wireframe

見附件二（文件下方）

#### 3.3 資料庫架構 Database

- 會員資料庫 users
  - id
  - user_number 會員編號
  - username 用戶名
  - email 信箱
  - password 密碼（hash）
  - address 地址
  - phone_number 電話
  - isAuthenticated 是否有權限
  - created_at
- 商品列表資料庫 product_list
  - id
  - product_name 商品名稱
  - category 商品分類
  - product_img 商品圖片
  - description 商品介紹
  - product_status 商品狀態
  - created_at
- 商品規格資料庫 product_items
  - id
  - product_name 商品名稱
  - style 商品規格
  - price 商品單價
  - stock 庫存
  - created_at
- 商品分類資料庫 product_catagory
  - id
  - category_name 分類名稱
  - category_status 分類狀態
  - created_at
- 訂單資料庫 orders
  - id
  - order_number 訂單編號
  - user_number 會員編號
  - order_status 訂單狀態
  - order_itemId 訂單商品
  - order_stock 訂單商品數量
  - total 訂單金額
  - created_at
- 訂單商品狀態資料庫 orders_items
  - id
  - product_name 商品名稱
  - item 商品規格
  - price 商品單價
  - product_name 商品名稱
  - category 商品分類
  - product_img 商品圖片
  - description 商品介紹
  - product_status 商品狀態
- 消息資料庫 news
  - id
  - title 消息標題
  - content 消息內容
  - news_img 消息圖片
  - date 顯示日期
  - isShow 是否刊登
  - created_at
- 圖片管理資料庫 imgs
  - id
  - img_number 圖片編號
  - img_route 圖片路徑
- 頁面管理資料庫

---

### 附件一、 User Flow

大圖連結 → [前台](https://whimsical.com/user-flow-3tEi3hG3GKRsEhkS2NWyUr) & [後台](https://whimsical.com/user-flow-manager-BgBcJw88u6hrNPrxwfpJDv)

![](https://i.imgur.com/20mXWKx.png)

![](https://i.imgur.com/G4K6zXf.png)
![](https://i.imgur.com/20mXWKx.png)

![](https://i.imgur.com/G4K6zXf.png)

---
**商品前台**

![](https://imgur.com/FYKk7LC.png)
---
**商品後台**

![](https://imgur.com/Oa9BM8j.png)
---
**訂單管理後台**

![](https://imgur.com/NqqFtZt.png)
---
**購物車前台**

![](https://imgur.com/SVC6Cc1.png)


### 附件二、 Wire Frame
### 首頁 + 消息 + 會員相關頁面

**首頁**
![](https://imgur.com/hS1T1MD.jpg)

**登入頁面**
![](https://imgur.com/qkzmlFw.jpg)

**註冊頁面**
![](https://imgur.com/46hCxmK.jpg)

**佈告欄**
![](https://imgur.com/6coiI9e.jpg)

**聯絡我們頁面**
![](https://imgur.com/rRecxv4.jpg)

**會員後台頁面**
![](https://imgur.com/FWR4oZc.jpg)

![](https://imgur.com/b1XuAlY.jpg)


### 商品 + 購物車頁面

**商品列表頁面(前台)**
![](https://imgur.com/9SOyuQ8.png)

**商品頁面(前台)**
![](https://imgur.com/IHHFVgL.png)

**商品管理頁面(後台)**
![](https://imgur.com/Wp0wxcG.png)

**商品編輯頁面(後台)**
![](https://imgur.com/xX0h81h.png)

**分類管理頁面(後台)**
![](https://imgur.com/mPekXW9.png)

**訂單管理頁面(後台)**
![](https://imgur.com/va9a9ra.png)

**購物車(前台)**
![](https://imgur.com/G8KtJZQ.png)

**結帳頁面(前台)**
![](https://imgur.com/N8zQLEU.png)

