iT邦幫忙

2022 iThome 鐵人賽

0
Modern Web

想轉職的鯊魚從零基礎開始學習JavaScript系列 第 31

想轉職的鯊魚從零基礎開始學習JavaScript Day-31 API 與 Airtable 運用

  • 分享至 

  • xImage
  •  

什麼是API

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

這裡有不錯的影片讓你可以簡單的瞭解API

Yes

資料來源

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

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

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

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


何謂 Airtable

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

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

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

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

Imgur

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

Imgur

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

  2. 複製下面的示範code

Imgur

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

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

Imgur

  1. 延伸 如果不選curl 選JavaScript 你需要 先引入airtable.js檔後,才能用JavaScript操作

接下來我們需要借助postman這個軟體來處理拿來下的code讓他轉成JavaScript可以操作的樣子

Imgur

postman是一個協助你操作API的軟體,安裝部分就不贅述了

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

Imgur

  1. 點選import,準備匯入要先前複製的code

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

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

Imgur

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

Imgur

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

  2. 將資料送出

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

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

Imgur

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

  2. 點擊右上角的複製鍵

Imgur

  1. 在瀏覽器中測試

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

Imgur

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

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

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

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

Imgur

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

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

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

Imgur

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

Imgur

2022.12.05 更新錯字及影片連結

參考資料

Airtable
Postman


上一篇
想轉職的鯊魚從零基礎開始學習JavaScript Day-30 資料驗證
系列文
想轉職的鯊魚從零基礎開始學習JavaScript31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言