# 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)




---
**商品前台**

---
**商品後台**

---
**訂單管理後台**

---
**購物車前台**


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

**首頁**

**登入頁面**

**註冊頁面**

**佈告欄**

**聯絡我們頁面**

**會員後台頁面**


### 商品 + 購物車頁面

**商品列表頁面(前台)**

**商品頁面(前台)**

**商品管理頁面(後台)**

**商品編輯頁面(後台)**

**分類管理頁面(後台)**

**訂單管理頁面(後台)**

**購物車(前台)**

**結帳頁面(前台)**