#4 用RESTful API來訂杯珍奶喝吧！Part-1-畫面及功能簡介

這支APP花了一點時間撰寫，以春水堂的飲料菜單為主題，寫了一個可以實際用來訂飲料的工具，以下就來說說這個開發APP的故事，說完再來去買杯珍奶喝喝～～

這篇先粗略介紹一下APP的主要功能，細部建置的過程之後分篇說明囉～

主要功能：

1. 首頁透過WebKit Framework寫幾行程式，就可將春水堂的官方網站整合到APP中。
2. 瀏覽飲料menu，並可進行預訂飲料、查詢訂單、修改訂單、刪除訂單。
3. 透過手機定位查詢所在位置附近的春水堂分店位置，並在地圖中標示使用者所在位置與分店相對位置。

首頁：

春水堂官網己建置完善的RWD，所以在整合到APP中的過程並不複雜，只需透過IOS提供的WebKit Framework即可經鬆顯示網頁的內容。

畫面如下：

訂飲料：

這部份是APP主要功能，也是最花時間刻的部份，大致的內容如下：

1. 在menu的表頭以Collection View實現輪播banner。
2. 透過Segmented Control及Container View配合實現冷熱飲畫面切換。
3. 在Airtable建置品項menu，透過RESTful API串接Airtable，解析JSON內容後，使用Table View Controller呈現飲料品項。
4. 點擊飲料選單中任一飲品，進入訂購飲品頁面，透過Ggoogle Map API依據使用者所在位置，手機定位後搜尋附近1000公尺內春水堂分店，點擊店名輸入欄位後，螢幕下方顯示Picker View，可由此選擇訂購店家。
5. 選取Segmented Control客製飲料冰塊、甜度。
6. 點選杯數欄位鍵盤可使用小鍵盤輸入，或可透過Steper增加或減少杯數。
7. 如有其他客製需求，可在備註下方的Text View輸入需求告知店家。
8. 最後輸入訂購者姓名及手機號碼，按 "訂購" 時出現Alert Controller與使用者確認飲品數量及金額，使用者"確認"後透過RESTful API的 POST 上傳新增訂單。(訂購時檢核店名、姓名、手機欄位空白則會顯示Alert Controller提醒輸入資訊)

畫面如下：

訂單查詢、修改、刪除：

1. 點選飲品訂購頁面右上角 "訂單" 進入訂單列表畫面，首先顯示Alert Controller告知使用者可點選每筆訂單進入修改、刪除頁面。
2. 按掉通知訊息後，可滑動頁面檢視訂單，點選欲進行修改、刪除訂單進入調整頁面。
3. 調整頁面透過Segue將前頁-訂單列表中點選的訂單內容傳到修改、刪除頁面。
4. 調整頁面中店名的部分仍是透過Google Map API依使用者訂位將附近分店列出，點選後可由下方Picker選單中選擇訂購取件分店。
5. 修改訂購飲品的內容後，按下方 "修改" 按鈕，出現提示按鈕詢問"是否修改?"，按 "確認" 透過RESTful API的 PUT 方式修改Airtable訂單列表的Table中飲品的資訊。
6. 如欲刪除訂單，可按下方的 "刪除" 鈕，顯示Alert Controller確認畫面，訊息提示"請問是否刪除?"，與使用者確認是否刪透該筆訂單，使用者確認後，透過 RESTful API的 DELETE 將Airtable上此筆訂單記錄刪除。

畫面如下：

顯示使用者所在位置附近1000公尺內的分店：

1. 點選附近店家Tab Bar Item "附近店家"，進入分店列表頁面，一開始先跟使用者確認是否提供位置資訊，使用者同意後進行定位取得使用者當前位置。
2. 取得使用者當前位置後，依目前所在位置列出1000公尺內的分店資訊，如果附近沒有分店，則顯示Alert Controller提示附近沒有分店。
3. 點選列表中右上 "詳細" 進入顯示使用者所在位置及分店的相對位置地圖。

畫面如下：

APP概觀介紹到這邊，後面的篇章再來寫寫建置的細部說明，謝謝各位不吝寶貴的時間看到最後～

這邊附上整APP操作的GIF圖：(圖片太大壓縮後不會Repeat，請重新整理就能從頭播放)

關聯文章：

#5 用RESTful API來訂杯珍奶喝吧！Part-2 — 重來 就從 APPLE APP 開始吧 — Medium

#6 用RESTful API來訂杯珍奶喝吧！Part-3 — 重來 就從 APPLE APP 開始吧 — Medium

#7 用RESTful API來訂杯珍奶喝吧！Part-4-訂單上傳及查詢 — 重來 就從 APPLE APP 開始吧 — Medium

#8 用RESTful API來訂杯珍奶喝吧！Part-5-訂單修改及刪除 — 重來 就從 APPLE APP 開始吧 — Medium