# 畢業專案

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

[忠誠度分布圖](http://www.bebit.com.tw/nps-intro/)

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

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

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

外帶
內用

會員自己點餐
非同步顯示

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