---
# System prepended metadata

title: Airtable 與 API 運用
tags: [2022業主挑戰賽, Airtable]

---

###### tags: `2022業主挑戰賽` `Airtable`
# Airtable 與 API 運用 

## 什麼是API

API 應用程式介面 也就是 Application Programming Interface 的縮寫

這裡有不錯的影片讓你可以簡單的瞭解API
{%youtube zvKadd9Cflc %}

[資料來源](https://medium.com/codingbar/api-到底是什麼-用白話文帶你認識-95f65a9cfc33)

如果沒空看影片這邊用文字簡略的說

網路上有存取很多資料的伺服器

而我們可以透過API 向那些伺服器 拿取資料 更近一步可以存取資料甚至可以操作那些資料

API就是我們操作那些資料的媒介

----

## 何謂 Airtable

Airtable 是一個雲端資料庫 就像是一個線上Excel 可以彙整各種資料

並可以透過API 對裡面的資料進行操作 進一步 取得或是修改相關資料

1. 先從API的介面點選右上角的Help叫出 Help選單

2. 再點選最下面的API documentation(API 文檔)，叫出API操作說明

![Imgur](https://i.imgur.com/J8bImMn.png)

3. 選擇你要的操作的Table，展開該Table的細部選項
  * List records -- Get所有資料(並可以透過資料參數選擇要Get的資料細項)
  * Retrieve a records -- Get單筆資料(透過ID選取要Get哪筆資料)
  * Create a records -- 在資料庫上添加一筆資料
  * Update records -- 將資料庫上的資料全部更新
  * Delete records -- 刪除資料庫上特定一筆資料(透過ID去選擇)

4. 這裡示範 做資料串接 所以選擇 List records 

![Imgur](https://i.imgur.com/PpkICUG.png)

5. 要使用API需要驗證身分，所以他給的示範code 上面都會有 YOUR_API_KEY，要使用這些code需要點選右上角的"show API key" 讓示範code嵌入你的API-key

6. 複製下面的示範code 

![Imgur](https://i.imgur.com/Pp8JA3s.png)

7. 將複製下來的示範code貼到終端機(CMD)上測試，看看這個API code是不是能正常運作

8. 確認測試結果是不是你要取得的資料

![Imgur](https://i.imgur.com/Imwxspi.png)

9. 延伸 如果不選curl 選JavaScript 你需要 先引入[airtable.js](https://github.com/Airtable/airtable.js)檔後，才能用JavaScript操作

---

接下來我們需要借助[postman](https://www.postman.com/)這個軟體來處理拿來下的code讓他轉成JavaScript可以操作的樣子

![Imgur](https://i.imgur.com/yRBp3k5.png)

[postman](https://www.postman.com/)是一個協助你操作API的軟體，安裝部分就不贅述了

1. 打開postman介面，選擇My WorkSpace，進入工作平台

![Imgur](https://i.imgur.com/JFMPb22.png)

2. 點選import，準備匯入要先前複製的code

3. 選擇匯入的種類，現階段我們使用的是Raw text

4. 將剛剛複製的code貼上，並點選右下角的Continue(圖上忘記畫上去)

![Imgur](https://i.imgur.com/6CJFJqB.png)

5. 確認資料沒問題後點擊Import(匯入)

![Imgur](https://i.imgur.com/pH1YpvE.png)

6. 調整參數--將數量限制拿掉(這邊還可以增加參數，去篩選獲得的資料)

7. 將資料送出

8. 檢查拿到的是不是你要的資料

9. 選右上角的</>拿取經過postman轉換過的程式碼

![Imgur](https://i.imgur.com/rZ4WUBs.png)

10. 選擇輸出程式碼的形式，這邊我使用JavaScript-Fetch

11. 點擊右上角的複製鍵

![Imgur](https://i.imgur.com/ObJUxrq.png)

12. 在瀏覽器中測試

13. 確認是否是你要的資料

![Imgur](https://i.imgur.com/RvVNSD7.png)

14. 將輸出資料的形式改成JavaScript能使用的json檔

這之後是作者目前使用的方式，不一定是最適當的，可能以後會變

15. 宣告一個參數來接收取得的資料

16. 將這些取得的資料賦予給剛剛宣告的參數

![Imgur](https://i.imgur.com/LYOBtb7.png)

延伸 資料庫的資料超過100筆 後端分頁的處置

當資料超過100筆的時候會因為後端分頁的限制，沒辦法一次取得，這時候取出來的資料會在多一個屬性offset

1. 當資料超過100筆的時候，資料的最後面會多一個屬性offset

![Imgur](https://i.imgur.com/REcXaGs.png)

2. 將offset的屬性跟他的值放進，API的參數裡面，送出就能取得後100筆的資料了

![Imgur](https://i.imgur.com/PmQyPNk.png)