圖片來源:https://www.canva.com/templates/

使用sheetDB產生API,自行串接顯示資料

使用google表單讓sheetDB產生API,用ios APP查詢資料、新增、刪除

奇妙仙子開咖啡廳,需要製作新的Menu,方便控管品項。
靠魔法太不切實際了,只好動手自己做。

1.本次利用google 表單當作DB使用,而第一列為欄位名稱

google表單示意圖

2.在sheetDB產生API,提供ios串接使用

https://sheetdb.io/apis

3.於Xcode中產生基本的tablev View ,以及串接頁面的controller 兩個(新增

、查詢頁面)

4. 產生所需資料欄位的類別,在這裡因為需要insert資料,

故需要再準備一個data變數(裡面為物件的array)

5.另需為cell準備對應的class file,並將cell control drag 與view controller連接(cell 上所發生的事情都交給主頁面的view controller 處理)

6.主頁面的view controller 需要處理cell的資料顯示、事件,須遵從兩個協定

並且實現3個func

  1. 幾個區塊
  2. 每隔區塊項目 (回傳陣列長度)
  3. 資料來源設定和顯示

因為載入資料會需花較久時間,故需放上loading效果,而在viewWillAppear去抓取資料call getMysource 這個自訂方法

(若在viewdidload抓取資料,則會發生返回此頁面不會再執行viewdidload,造成資料不被更新)

而刪除動作,則採用左滑刪除

在tableview editActionForRowAt 設定刪除鈕,並將「選擇的物件」傳給DB做刪除動作

而在刪除資料的方式遇到一個大問題,就是眼睛長太大..

官方文件https://sheetdb.io/documentation

官方表明網址後方加上/自訂欄位名稱/第一格的值

於是我就開心的把欄位名稱填入/name/ ,怎麼刪都沒成功

debug超久都找不到問題..寫的程序也對..卡了整晚..

後來問彼得潘..才發現我的欄位名稱是product_name

跟一般網路範例不同..(其他人都剛好是name 名稱)

於是..五分鐘後終於能順利讓資料離開我的DB了!太感動了!

ps.若第一格的值是中文,需要再處理一下addingPercentEncoding()

sheetDB官方文件-刪除
code裡面的網址

而prepare則需判斷segue id,並指定該segue去到哪一個畫面

7.查詢頁面:需將被選中的物件傳給Detail頁面,

Detail頁面接到物件資料再去做顯示


8.新增頁面:

將輸入的值判斷後,並建立物件將值存入,

再將物件轉換成data上傳至指定url(DB)

並用將新增頁面(nav 畫面)用pop 移除,讓主頁面再度浮到最上層

。Demo:

。目前都有做商品分類標示,

但因為小仙子繁忙,未來還會再加上分類結果

就先讓我回森林休息吧~

To be continue…

The Project on my Github : Version 1.0