利用 Airtable 製作 iOS App 連結的後台資料

網站 Airtable 提供強大的資料表單功能,如下圖所示,美美的表格可以在瞬間完成,而且欄位裡可輸入多種類型的資料,比方文字,時間,圖片,多選的選項等都不是問題。

除此之外,Airtable 還提供串接的 API,因此如果沒有太複雜的後台功能,其實可以利用它當雲端資料庫,比方製作一個台灣電影時刻表 App。

接下來我們將嘗試利用 Airtable 製作 iOS App 連結的後台資料,然後再介紹如何利用 API 實現資料的讀取和新增。

連到 Airtable 網站,點選 Sign up 註冊帳號

設定 workspace 的名字

之後我們將在 workspace 下新增儲存電影資料的 table(表單)。

設定 workspace 名稱後,我們將進入 Airtable 的管理頁面。如下圖所示,在 workspace Peter Pan App 下已經有 5 個事先建好供我們參考的樣本。

點選 Add a base 新建 base

一個 base 下可以包含多個 table,待會我們將在 base 下新增電影 table。

選擇 Start from scratch。

設定名字,在此我們將 base 取名為 Movie。

點選 Movie,進入 Movie 的管理頁面

Movie 下預設將有一個 table,我們也可以點選左上方的 + Add or import 新增 table。

修改 table 名稱,取名為 Movie

點選 Table 1 的 Rename table。

改名為 Movie。

刪除 table 的 Notes,Attachments & Status 欄位

原本 table 預設有 4 個欄位,可惜並不是我們要的,所以請先將它們刪除。

點選欄位旁的下拉箭頭後,點選 Delete field 將它刪除。請依序刪除 Notes,Attachments & Status。

此時只剩下 Name 欄位。

將 Name 欄位改名為 name

點選欄位旁的下拉箭頭後,點選 Rename field 改名。在此我們將它改成小寫開頭的 name,因為 Swift 習慣的 JSON key 名稱以小寫開頭。

刪除空白的第二列 & 第三列

待會我們將從頭輸入電影資料,所以請先勾選空白的第二列 & 第三列 ,然後從右鍵選單按 Delete all selected record 刪除。

設定資料的欄位

點選 + 新增欄位。

新增欄位 releaseDate,type 選擇 Date。

新增欄位 image,type 選擇 Attachment。Attachment 的意思是附件,之後我們可在此欄位加入圖片,影片,音樂等檔案,而且可以不只一個,比方加入三張電影的圖片。

新增欄位 genre 儲存電影類型,type 選擇 Multiple select,表示可能包含多種類型。

新增 imdb 儲存電影分數,type 選擇 Number,Format 設定 Decimal,表示有小數點。

大功告成 ! 現在我們的電影有 name,releaseDate,image,genre,imdb 5 個欄位。

輸入資料

連到 yahoo 查詢電影資料,然後將資料輸入到 Airtable。

以神力女超人 1984 為例。

輸入日期時可從月曆選擇。

上傳 image 的圖片時,先點選框框裡的 +。

上傳時有多種選擇,可上傳電腦裡的檔案,也可輸入圖片網址,Airtable 會幫我們抓圖存入 table。在此我們選擇 Link(URL)。

輸入 yahoo 電影神力女超人的圖片網址。

點選 Upload 上傳。

成功後圖片將以縮圖顯示在 table 裡。

點擊縮圖可看到大圖。此圖片將是 Airtable 另外儲存的圖片,所以就算當初 yahoo 電影的圖片被刪除,Airtable 的圖片也不會受到影響。

genre 欄位可輸入多個字串,在此我們輸入動作,冒險,劇情。

imdb 欄位輸入數字 7.3,完成後神力女超人的資料如下。

使用同樣的方法,輸入其它電影。

串接 Airtable的 API 開發 iOS App

準備好資料後,終於可以開始串接 API,開發我們的 iOS App 了。有興趣的朋友可進一步參考以下連結的說明。

--

--

彼得潘的 iOS App Neverland
彼得潘的 Swift iOS App 開發問題解答集

彼得潘的iOS App程式設計入門,文組生的iOS App程式設計入門講師,彼得潘的 Swift 程式設計入門,App程式設計入門作者,http://apppeterpan.strikingly.com