---
# System prepended metadata

title: 畢業專案

---

# 畢業專案

#### 組員
Nacho, Kirwen, 文傑

#### Document製作工具整理
- wireframes app > https://balsamiq.com/wireframes/
- 畫面Gif app > ScreenToGif
- 圖表 chart.js https://codepen.io/ittus/pen/MGQaNY
- 專案規劃參考
    - https://hackmd.io/3koTmKU2RV6QFxTzag1sXg?both
    - https://docs.google.com/document/d/10DPq3NjUmT6pGUb246SCJqItFEXYYe1D-eO3GX4EQ5g/edit


## 專案簡介
與[眼鏡先生咖啡館](https://www.facebook.com/mrglassescf)合作
餐廳形象: 小店家、職人形象、老闆兩位(無其他員工)、自製料理、喜歡與顧客聊天

## 問題
經營一年多已累積一些顧客與品牌形象，目前有使用POS軟體做營業的管理。
【Their expectation】
有行動點餐的服務，一方面幫助他們做營業額的管理，收集顧客相關數據，一方面帶給顧客不一樣的消費體驗，並有更多的時間與顧客建立關係。
【Their need】
存取顧客的消費紀錄、行動點餐、一些簡單的統計分析


## 使用者
店長、會員、消費者

## 解決方案
提供營收、消費紀錄、顧客追蹤與資料分析的管理系統；協助店家發展行動點餐服務，分析不同購買情境與店家運作流程規劃點餐流程。


## 現有產品的user story(kirwen 整理)



## User Stories
### 訪客前台(行動裝置)
- 訪客可瀏覽店家的最新活動、精選菜單、用餐環境、顧客評價與關於我們

- 訪客點進"體驗/登入"進到登入/註冊前台

~~顧客走進咖啡店，隨處找到空位坐下後...看見桌上的QRcode~~
~~- 顧客掃描QRcode，導向點餐前台~~
~~- 顧客可以瀏覽店家的最新活動、精選菜單、用餐環境、顧客評價與關於我們~~
    ~~- 點擊"logo"回到首頁上方~~
    ~~- 點擊"內用點餐"會跳出視窗，提醒"很抱歉!內用點餐功能僅限店內使用。掃描QRcode掃描操作圖"~~

~~### 點餐前台(行動裝置介面)~~
~~掃描QRcode後，訪客不知道要點什麼?~~
~~- 顧客可在"不知道想點什麼"下方點選關鍵字(熱門商品、熱門組合、老顧客愛、老闆推薦)
    - 顧客可獲得與該關鍵字相應的五項商品~~
~~- 顧客可直接點選菜單品項(名稱與價格)
    - 顧客點選品項跳出相關介紹
    - 顧客點選品像的同時，會顯示已選購的總數與總額~~
~~- 品項與數量確認後，下一步選擇內用或外帶、備註(例如:微酸、不要奶泡等)，提交~~
~~- 送出訂單後，導回訪客前台，跳出訊息"請耐心等待片刻，我們正為您的製作中，祝你有個愉快的時光"
未掃QRcode後~~
~~- 訪客導向訪客前台，並跳出提醒視窗~~

### 登入/註冊前台(平板與行動裝置)
- 會員可透過帳號或電話與密碼登入會員前台

- 管理者可透過帳號與密碼登入管理者後台

- 訪客可註冊成為會員
    - 輸入"帳號"、稱呼、信箱、"手機"、"密碼與密碼驗證，及完成註冊，導向登入前台

### 會員前台(行動裝置)
- 會員前台包含首頁、點餐、訂單、會員

- 點餐(首頁)分成兩個區塊推薦區與菜單區
    - 推薦區會有關鍵字(例如熱門商品、老顧客愛、老闆推薦等)分類
    - 會員可看見三項推薦商品(依不同的分類)
    - 菜單區顯示選菜單的名稱與價格與"購買"與"取消"按鈕
    - 重覆點擊購買會顯示數量，例如"購買(2)"
    - 會員點選商品圖示會跳出相關介紹

- 訂單區會顯示購買品項與數量
    - 可以進一步選擇內用或外帶、備註
    - 此區也可修改品項數量或取消該品項
    - 送出訂單後，會出現訂單的狀態

- 會員
    - 查詢個人資料
    - 為個人喜好加入標籤

### 管理者後台(平板或以上之介面)
- 導覽列上有"未處裡(N)"、"未結帳(N)"、頭像、"登出"
    - 點擊"未處裡"、"未結帳"導向當日訂單
    - 管理者點擊頭像進入主頁進行個人資料編輯
- 店內點餐(首頁)
    - 店內點餐分成兩個區塊推薦區與菜單區
        - 推薦區會有關鍵字(例如熱門商品、老顧客愛、老闆推薦等)分類
        - 管理者可看見三項推薦商品(依不同的分類)
        - 菜單區顯示選菜單的名稱與價格與"購買"按鈕
        - 管理者可以查詢會員的名稱與手機，並加進訂單中*
        - 管理者點選商品圖示會跳出相關介紹
    - 管理者點選"購買按鈕"，同時，在購買清單上顯示品項、數量、內用或外帶與備註*
        - 點選選項，加入備註
        - 點選內用，可填入桌號
        - 下一步確認訂單，計算總數與總額，送出訂單導向"當日訂單"

- 當日訂單
    - 紀錄當日所有訂單
    - 訂單內容包含交易狀態、品項、金額、備註、交易日
        - 交易狀態(未處理、製作中、未結帳、已結帳、取消)
        - 點擊"取消"，訂單中該餐點狀態直接變成取消
    ~~- 系統自動刪除"取消"的訂單~~

- 會員管理
    - 管理者點選單一會員，查詢會員的購買紀錄
    - 管理者可瀏覽所有會員資料(名稱、消費次數)
    - 管理者可追蹤特定會員
    - 管理者可刪除特定會員
    ~~- 管理者可修改會員驗證狀態~~
    
~~- 歷史訂單
    - 管理者可瀏覽所有的訂單(顯示建立日期，由新到舊排序)
        - 顯示15筆，分頁設計~~
        
- 菜單管理
    - 管理者可建立菜單的分類
    - 管理者可建立菜單分類下的品項
    - 管理者可編輯、刪除分類與品項，分類刪除底下的品項也會刪除!
    - 管理者可對註品項加註標籤
    
- 儀錶板
    - 分成"顧客喜歡"、"顧客買過"與"熱銷組合"
    - 可透過不同時間區間重新計算組合
    - "顧客喜好"是透過過去訂單計算商品相關的標籤頻率，並列出前五標籤
    - "熱銷商品"是透過過去訂單之單一商品計算熱銷商品頻率，並列出前五商品
    - "熱銷組合"是透過過去訂單之組合計算熱銷組合頻率，並列出前五組合

~~- 活動管理 
    - 管理者可建立活動(名稱、內容、開始與結束時間、圖片上傳)
    - 管理者可瀏覽活動清單(名稱、點閱數、開始與結束時間)
    - 管理者可編輯、刪除活動~~

## 產品規格
### 會員點餐相關
- 訪客可瀏覽店家的最新活動、精選菜單、用餐環境、顧客評價與關於我們
- 訪客點進"體驗/登入"進到登入/註冊前台

### 管理者點餐相關


## 資料結構
SQL => MySQL
- User
    - account: string
    - phone: string
    - password: string
    - email: string
    - image: string
    - isAdmin: boolean
    - isVaild: boolean

- UserPrefered
    - tagId: integer
    - userId: integer
    
- Order
    - tableNum: integer
    - memo: string
    - amount: integer
    - quantity: integer
    - state: string(pending, unpaid, paid, cancel)
    - isTakingAway: boolean
    - createdAt: datetime
    - userId: integer*

- DishCombination
    - quantity: integer
    - dishId: integer
    - orderId: integer

- Tag
    - name: string

- DishAttachment
    - tagId :integer
    - dishId: integer

- Category
    - name: string

- Dish
    - name: string
    - price: integer
    - image: string
    - description: text
    - option: json
    - categoryId: integer
    ~~- tagId: integer~~
   ~~- userId: integer~~

    
~~- Reservation
    - people: integer(over two)
    - description: string
    - paymentMethod: string(seperated, together)
    - startedAt: datetime
    - finishedAt: datetime
    - createdAt: datetime
    - userId: datetime
    - isApproved: boolean~~
    
~~- Activity
    - name: string
    - description: text
    - createdAt: datetime
    - finishedAt: datetime
    - image: string
    - viewNums: integer
    - userId: integer~~
    
NoSQL => MongoDB 或 Neo4j

- HotProduct
    - products: array
        - dish: name
        - number: integer
    - createdDate: date
- HotCombination
    - comibinations: array
        - combination: hash
        - number: integer
    - createdDate: date

## RESTful API
**請針對後端需要串接資料的API撰寫**
登入/註冊之API
| Verb  | URL | 使用者動作 |
| ----- | ----| -------- |
| POST  | /api/signin  | 驗證資料與登入   |
| POST  | /api/signup  | 驗證資料與註冊新會員   |

店內點餐之API
| Verb  | URL | 使用者動作 |
| ----- | ----| -------- |
| GET   | /api/searchUser?phone='09XXX' | 搜尋號碼查詢會員 |
| GET   | /api/categories  | 得到所有分類的名稱與id   |
| GET   | /api/categories?categoryId=id  | 得到某一分類與其菜單   |
| POST  | /api/orders  | 新增一份新的訂單   |

當日訂單之API
| Verb  | URL | 使用者動作 |
| ----- | ----| -------- |
| GET   | /api/orders?state=pending  | 顯示未處裡的當日訂單，依據舊到新排列   |
| GET   | /api/orders/:id  | 顯示單一筆當日訂單   |
| PUT   | /api/orders/:id/prevState  | 訂單狀態往前   |
| PUT   | /api/orders/:id/nextState  | 訂單狀態往後   |
| GET   | /api/orders/pendingNums  | 顯示未處裡的當日訂單數量(navbar)   |
| GET   | /api/orders/unpaidNums  | 顯示未結帳的當日訂單數量(navbar)   |
| DELETE| /api/order/:id  | 刪除該筆當日訂單   |

會員管理之API
| Verb  | URL | 使用者動作 |
| ----- | ----| -------- |
| GET   | /api/members/search?phone='-'| 以手機號碼搜尋會員
| GET   | /api/members/         | 瀏覽的名的會員資料
| GET   | /api/members/:id      | 瀏覽某一會員資料
| DELETE| /api/members/:id      | 刪除某一會員資料
| PUT   | /api/members/admin/:id| 更變會員權限

菜單管理之API
| Verb  | URL | 使用者動作 |
| ----- | ----| -------- |
| POST  | /api/categories  | 新增分類   |
| PUT   | /api/categories/:id  | 編輯分類   |
| DELETE| /api/categories/:id  | 刪除分類   |

Dashboard之API

## 預計使用的套件和第三方API
### 前端套件(kirwen整理)
SASS
vue-sweetalert2
vue-masonry
vue-chartjs
moment.js
Vuelidate
Vuex
Bootstrap
Font Awesome
socket.io-client
    
### 後端套件(Nacho整理)
[bcrpyt](https://www.npmjs.com/package/bcrypt)
[faker](https://www.npmjs.com/package/faker) 
[cors](https://expressjs.com/en/resources/middleware/cors.html)
Google Place
https://developers.google.com/places/android-sdk/intro
https://ubilabs.net/en/google-maps/api-sdk-for-developers

## learning resource

### team work
[install git-flow](https://github.com/nvie/gitflow)
[git-flow tutorial](https://www.youtube.com/watch?v=BYrt6luynCI)
[為什麼需要git-flow](https://gitbook.tw/chapters/gitflow/why-need-git-flow.html)
[Git Flow + 好習慣](https://medium.com/kuma%E8%80%81%E5%B8%AB%E7%9A%84%E8%BB%9F%E9%AB%94%E5%B7%A5%E7%A8%8B%E6%95%99%E5%AE%A4/%E5%9F%BA%E7%A4%8E-git-flow-%E5%B7%A5%E4%BD%9C%E6%B3%95-fa50b1dddc4f)

### backend
[only for sql](https://www.w3schools.com/sql/sql_select.asp)
[use sequelize for postgre](https://dev.to/nedsoft/getting-started-with-sequelize-and-postgres-emp)
[optimize query](https://dzone.com/articles/how-to-optimize-mysql-queries-for-speed-and-perfor)
[20 methods you need to know about array](https://medium.com/better-programming/20-methods-to-get-to-know-javascript-array-operations-6935e757729b)
## Customization Service
行動點餐
QRcode



## Dev Timetable
- Sprint1  (12/09 - 12/15)
    - 開發文件確認(規格、資料結構、wireframe、ERD、API規劃)
- Sprint2  (12/16 - 12/20)
    - 基礎建設(model、種子資料、前後端分離)
    - 後台(一): 前後端開發與測試
        - 店內點餐
        - 註冊與登入

=======================以上達到MVP標準

- Sprint3  (12/21 - 12/27)
    - 後台(二): 前後端開發、CI/CV與部屬
        - 當日訂單
        - 會員管理
- Sprint4 (12/28 - 12/31)
    - 後台(三): 前後端開發與測試
        - 菜單、分類與標籤
- Sprint5 (1/1 - 1/4)
    - 後台(四): 前後端開發、CI/CV與部屬
        - Dashboard(一)
- Sprint6 (1/5 - 1/9)
    - 後台(五): 前後端開發、CI/CV與部屬
        - Dashboard(二)
- Sprint7 (1/10 - 1/14)
    - 優化(一): 前後端開發、CI/CV與部屬
    - 第一次UX測試
- Sprint8 (1/15 - 1/19)
    - 優化(二): 前後端開發、CI/CV與部屬
    - 第二次UX測試

## 分工方式
- 專案採用前後端在同一個repo的作法並由Nacho管理專案。
- 前後端分離
    - Kirwen負責前端
    - 文傑負責協同前端與後端支援
    - Nacho負責後端(功能與測試)

## 相關理論(選讀)
[顧客忠誠](https://wiki.mbalib.com/zh-tw/%E9%A1%BE%E5%AE%A2%E5%BF%A0%E8%AF%9A%E5%BA%A6)

[ACSI model](https://medium.com/marketingdatascience/%E5%86%8D%E8%AB%87%E9%A1%A7%E5%AE%A2%E6%BB%BF%E6%84%8F%E5%BA%A6%E8%88%87%E5%BF%A0%E8%AA%A0%E5%BA%A6-64d7a8c17c34)
![](https://i.imgur.com/tYHhGxP.png)

[忠誠度分布圖](http://www.bebit.com.tw/nps-intro/)
![](https://i.imgur.com/m9DRBTN.png)

[忠誠度之經營圖](https://www.managertoday.com.tw/glossary/view/216)
![](https://i.imgur.com/eDLr7hc.jpg)

好像有點看的價值
https://slidesplayer.com/slide/16236676/

http://www.bebit.com.tw/nps_introduction/


外帶
內用

會員自己點餐
非同步顯示

透過掃描 QR code 不需要成為會員也可以!!

