利用 Airtable & Imgur API 製作雲端動態牆 App

網路上免費資源眾多,網站 Airtable 提供強大的資料表單功能,而 Imgur 則是提供無限量的圖片上傳空間,最棒的是兩者都具備了可串接的 API。這麼好康當然不必客氣,接下來就嘗試利用 Airtable & Imgur 兩大免費神器,無料製作連結後台資料庫的簡易版雲端動態牆 App 吧!

作品展示

結合 Airtable & Imgur API 製作動態 po 文的雲端動態牆 App,先用 Imgur API 上傳圖片,接著再用 Airtable API 上傳包含 Imgur 圖片網址的資料。

結合 Airtable & Imgur API 製作雲端動態牆 App
  • 動態牆連接 Airtable 雲端資料庫的 PostWall 資料表單內容,顯示所有動態文章的內容、照片、作者和 po 文時間。
  • 點選「+」發表包含照片和文字的動態文章,並將發表內容分別上傳至 Airtable 雲端資料庫和 Imgur 圖片空間。
  • 點選動態文章,進入該篇 po 文的全文檢視頁面。

實作重點

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

連到 Airtable 網站註冊帳號,建立 PostWall base 及 PostWall table,並新增所需資料欄位,包括單行文字 (Single line text) 型別的 name、日期 (Date) 型別的 postDate、附件 (Attachment) 型別的 image、長文字 (Long text) 型別的 article 四個欄位。

完成後台資料表後,即可開始為 App 新增一些後台資料備用。

串接 Airtable 的 API 開發 App

連到 Airtable 的 account 頁面產生 API key,接著利用 Airtable 提供的 API 實現後台資料的讀取和新增。

從 Airtable 的 API 網頁中可以獲得各項 API 的完整說明及範例,包括欄位說明 (Fields)、資料的列表 (List records)、擷取 (Retrieve a record)、新增 (Create records)、修改 (Update records)、刪除 (Delete records),以及其他的相關資訊。

定義上傳的資料型別 PostBody 並裝入準備上傳的資料,利用 JSONEncoder 將資料編碼成 JSON 格式的 data 後存在 httpBody,最後運用 URLSession 執行上傳任務。

值得注意的,雖然 Attachment 型別的欄位可以加入圖片,但使用 API 卻不能直接上傳圖片,而是要上傳檔案的 url,因此圖片部分採用了兩階段的上傳方式,即先透過 Imgur API 上傳圖片取得 url,再將 url 連同其他資料一併透過 Airtable API 上傳至後台的 PostWall table 完成新增作業。

另外,Date 型別的欄位也必須留意,除了需要設定時區避免出現格林威治時間之外,由 Airtable 取得的日期格式是 yyyy-MM-dd’T’HH:mm:ss.SSSZZZZZ,而 App 顯示的日期格式是 yyyy-MM-dd HH:mm,因此需要特別使用 DateFormatter 進行時區的設定以及日期的格式化。

串接 Imgur 的 API 上傳 App 圖片

連到 Imgur 網站除了註冊帳號外,還要註冊 App 得到 Client ID,才能使用 Imgur 提供的 API 實現圖片上傳。

從 Imgur 的 API 網頁中可以獲得各項 API 的完整說明及範例,包括圖片的取得 (Image)、上傳 (Image Upload)、刪除 (Image Deletion)、修改 (Update Image Information),以及其他的相關資訊。

由於 Image Upload API 上傳資料的格式是 multipart/form-data,所以另外搭配了第三方套件 Alamofire 來進行串接。成功上傳時 API 會回傳一個 JSON 物件,其中 data.link 即是後續要新增至 Airtable 後台資料表的 image 圖片網址。

使用 Info.plist 存放 API Key 們

程式需要經常呼叫 API 來進行資料的傳遞存取,將 API Key 存放在 Info.plist 可避免重複輸入及打錯字的困擾,使用上只需利用 Bundle.main 呼叫 function object(forInfoDictionaryKey:) 即可讀取 Info.plist 的內容。

--

--