---
# System prepended metadata

title: 找餐店APP

---


# 找餐店APP

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


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

:::

 

**APP功能流程**
-- 
:::spoiler <font color="blue">**流程**</font>
![](https://hackmd.io/_uploads/BJxZ9a7l6.png)


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


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

:::





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


![](https://hackmd.io/_uploads/r1gM3hqXea.png)
![](https://hackmd.io/_uploads/BJeMn39QlT.png)
![](https://hackmd.io/_uploads/B1Gh35XeT.png)
![](https://hackmd.io/_uploads/H1f235QgT.png)
![](https://hackmd.io/_uploads/SJzh29mxa.png)
![](https://hackmd.io/_uploads/ByG339Qlp.png)
:::


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

![](https://hackmd.io/_uploads/SyxeTqmep.png)
![](https://hackmd.io/_uploads/SyWx69QeT.png)
![](https://hackmd.io/_uploads/r1-xT9mxp.png)
:::






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


|  使用軟體 | 用途 | 備註 |
| -------- | -------- | -------- |
|   ![](https://hackmd.io/_uploads/r1Cvq57e6.png)   |   部署JSON Server API環境   |      |
|   ![](https://hackmd.io/_uploads/Hk8Fc57lT.png)   |   將APP所需要用到的資料透過編輯json檔 來建構後端服務   |      |
|   ![](https://hackmd.io/_uploads/B1Xs9cmxa.png)   |   撰寫APP的框架   |      |
|   ![](https://hackmd.io/_uploads/SyUTq9QeT.png)   |   生成apk構建工具   |      |
|   ![](https://hackmd.io/_uploads/S1lyj9Ql6.png)   |   撰寫Code   |      |
|   ![](https://hackmd.io/_uploads/SyGS7oQlp.png)   |   調整專案設定   |      |
|   ![](https://hackmd.io/_uploads/H1Gs7jXxa.png)   |   構建專案   |  V18.18.0   |
|   ![](https://hackmd.io/_uploads/SyvPNp7gT.png)   |   API函式庫   |      |
|   ![](https://hackmd.io/_uploads/H1lP4oQea.png)   |   測試API工具   |      |
|   ![](https://hackmd.io/_uploads/HkZFuiXlT.png)   |   查詢資料   |      |
|   ![](https://hackmd.io/_uploads/rygNE67gT.png)   |   Git    |      |
|   ![](https://hackmd.io/_uploads/BJLxEameT.png)   |   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)



:::

