# 找餐店APP

**作品緣由**
--
:::spoiler <font color="blue">**作品緣由**</font>

> 因每天都會到早餐店用餐，看著他們做的一套這個APP服務，想說可以發揮自己所學技能來實作一套自己APP來跟他們致敬；看到他們運用了二維碼點餐技術，於是開始思考這後面商業邏輯怎麼運作，雖然無法得知他們做的邏輯，但能透過點餐方式自己探索"可能"的點餐流程，這是覺得相當有趣的點。

:::

**APP功能流程**
--
:::spoiler <font color="blue">**流程**</font>

**功能介紹**
--
:::spoiler <font color="blue">**功能介紹**</font>

| 功能 | 顧客版 | 業主版 |
| -------- | -------- | -------- |
| 選購早餐 | ✔ | |
| 精選早餐 | ✔ | |
| 新增購物車 | ✔ | |
| 刪除購物車 | ✔ | |
| 二維碼送出訂單 | ✔ | |
| 直接送單 | ✔ | |
| 訂單追蹤 | ✔ | |
| 餐點反饋 | ✔ | |
| 登入頁面 | ✔ | ✔ |
| 接單管理 | | ✔ |
| 新增餐點 | | ✔ |
| 刪除餐點 | | ✔ |
| 顧客反饋 | | ✔ |

:::

**功能截圖 (客戶版)**
--
:::spoiler <font color="blue">**APP 功能截圖 (客戶版)**</font>
>

:::

**功能截圖 (業主版)**
--
:::spoiler <font color="blue">**APP 功能截圖 (業主版)**</font>

:::

**使用技術與工具**
--
:::spoiler <font color="blue">**使用技術與工具**</font>

| 使用軟體 | 用途 | 備註 |
| -------- | -------- | -------- |
|  | 部署JSON Server API環境 | |
|  | 將APP所需要用到的資料透過編輯json檔 來建構後端服務 | |
|  | 撰寫APP的框架 | |
|  | 生成apk構建工具 | |
|  | 撰寫Code | |
|  | 調整專案設定 | |
|  | 構建專案 | V18.18.0 |
|  | API函式庫 | |
|  | 測試API工具 | |
|  | 查詢資料 | |
|  | Git | |
|  | Git Desktop 版控工具 | |

:::

**遇到問題**
--
:::spoiler <font color="blue">**遇到問題**</font>

> 在新增訂單到JSON Server 發送請求時 每一筆資料的id 在渲染FlatList列表其中data 陣列物件資料中 其中id必需無重複 否則彈出警告 為了解決此問題 所以發現兩種方式處理:

1.在發送訂單請求時候將id做一個random，但之後可能必須要將每一筆訂單都Load回到APP端逐筆檢查是否有重複id，亦或是後端人員必須檢查id重複性，提示給前端知道

2.在FlatList元件其中屬性

keyExtractor={(item) => item.id.toString()}

可以改用FlatList內部自己產生的index加上資料給的id

keyExtractor={(item,index) => `${item.id.toString()}${index}` }

  const handleClickPostOrder = ( ) =>{
      let data = 
      {
        id: Math.random().toString(36).substr(2, 9),
        M_Name: "測試",
        M_DT: "2023-09-23 10:30:00",
        M_ImgSrc: "",
        OrderType: 2,
        CIdx: 1,
        Price: 30,
        Progress: 0
      }
      axios.post("https://json-server-vercel-w33n-git-main-raychen1996.vercel.app/Orders",data)
      .then((response) => {
        console.log(response.data) 
          Alert.alert("已送單！");
      })
      .catch((error) => {
          Alert.alert("送單失敗！");
      });
  }  

> 在業主APP版本，站在業主立場發現一個小問題是，當餐廳在忙著製作訂單時，沒空打開APP接單，或是APP退到背景程序，沒有活動與伺服器保持最新資料，恐導致訂單被延遲管理上問題。

思考方向是
透過第三方郵件系統結合並在APP寫一個無法被註銷的服務。例如與Google Mail串接，即是需於伺服器端寫一個Bot定期爬訂單資料，如有就會通知APP請刷新API資料。

:::

**未來規劃&展望**
--
:::spoiler <font color="blue">**未來規劃**</font>

> 希望能夠再將React 例如:useState useEffect狀態管理、以及常用元件生命週期Hook 知識點使用方式補齊更加熟悉處理方式
> 希望能夠提高切版細緻度更貼近設計師真實線稿圖的設計

:::

**希望優化此作品的點**
--
:::spoiler <font color="blue">**希望優化**</font>

- [ ] 登入登出功能串接
- [ ] 店家可透過APP控制訂單進度 也可掌握接單 製作 送單 客戶完單
- [ ] 將其餘JSON Server CRUD API功能串接完成
- [ ] 各頁面的列表分類切換資料顯示
- [ ] 結合真實手機APP相機功能來完成業主掃描二維條碼餐點流程
- [ ] 顧客可瀏覽每日餐點輪播動效
- [ ] 可以跟第三方串接登入API
- [ ] 業主版APP能及時與伺服器刷新達到通知定通知效果
- [ ] 串接金流API
- [ ] 增加 利用NFC手機外設功能靠卡新增信用卡功能
- [ ] GraphQL Client
- [ ] Zustand 狀態管理 + MMKV 當本地儲存
- [ ]

:::

**專案連結**
--
:::spoiler <font color="blue">**專案連結**</font>

[APK下載連結](https://drive.google.com/drive/folders/1W-dhPT1oGvodOcJt7Nzitqp-Fn__Uz3m?usp=sharing)

[業主版Repo](https://github.com/RayChen1996/orderbreakfast_Boss)

[顧客版Repo](https://github.com/RayChen1996/orderbreakfast)

:::