Trello 是一個專案管理協作軟體，雖然好像說起來很複雜，但其實就是一個方便使用者創建各式各樣的清單的服務。即使不是資訊業的人，也能找到適合自己的 Trello 用法，不過我相信以 Trello 的名氣，沒聽過他的人應該沒有很多吧？而且 Trello 有繁中版了呢。

其實 Trello 作為一個專案管理工具，必須跟其他工具相輔相成是非常理所當然的事情。各種第三方 APP 都會推出某些與 Trello 整合的功能，像是 Slack、Dropbox、
Google Drive 、Google Calendar 之類的。

為了把使用者時時刻刻從別的 APP 上引回 Trello，利用第三方 APP 來補足 Trello 的不足之處，Trello 自己當然是歡迎並鼓勵大家利用 Trello API 來開發一些小工具，今天就要來使用看看 Trello API。

就直接點進去 “Get Started Under 5 Minutes” 這邊，來看看 Trello 的官方教學。
Power-Ups，聽起來有點饒口，大概就是 Plugin 的意思。不過這邊先跳過，直接看看 Trello’s Rest API 裡面的 API Introduction。

首先，使用 API 之前，要先取得 APP Key 來進行 Authentication 跟 Authorization。在進行授權時，Trello 會幫你把事情處理好：讓使用者選擇帳號並登入，拿到 Access Token然後放回你的 APP 裡。

往下滑的話，是一些簡單的 API resource 介紹，像是 Boards 、lists、cards。這些東西實作的時候再回來翻看，先跳到 Client.js 的部分。

使用 Trello 的 client.js library 讓開發 Web APP 的人少了很多麻煩，只要在客戶端就可以進行 Authentication 的流程。

先按下中間那個綠色按鈕來取得 Application Key

把 APP Key 複製下來，然後在 HTML 檔案裡面加上一個 JQuery 跟一個 client.js 的 script。在 client.js 的script src 裡面放進你抓下來的 APP Key。

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://api.trello.com/1/client.js?key={APIKey}"></script>

這麼一來你就可以使用 Trello Object 跟他裡面的各種 methods了。
現在，利用這個 Trello Object，我們要來做 authentication。
Authentication 使用到的是 Trello.authenticate 這個 method，他啟動 authentication 流程之後會回傳 access token。有了這個 token 表示你基本上作為這個授權給你的使用者呼叫 API ，可以存取他的各種資料。
放進 Trello.authenticate 的參數是一個各種參數組成的物件，像是

• type ：進行 authentication 的方式，default 是 redirect，也可以選 popup

• name：進行授權時，展示的你的 APP 的名稱

• persist：要不要把 token 存放在 localStorage 裡，default 是 true

• scope：授權的權限，default 都是唯讀 { read: true, write: false}

• expiration ：token 的有效期限

• success & error：授權成功跟失敗的之後呼叫的 function

  window.Trello.authorize({
  type: 'popup',
  name: 'Getting Started Application',
  scope: {
  read: 'true',
  write: 'true' },
  expiration: 'never',
  // 如果成功呼叫 authenticationSuccess 這個 function
  success: authenticationSuccess,
  // 如果失敗呼叫 authenticationFailure 這個 function
  error: authenticationFailure
  });

跟著官方教學來實做看看，以下是成果：

按下 Allow 之後，在 Console 裡面得到了授權成功的訊息：

接下來我們就可以來呼叫 API 啦。
我先在 Trello 上建立了一個拿來試驗的 Board。

在右邊可以看到 https://trello.com/b/fyXIHjWR 這個 Board 的連結，如果在他結尾加上 .json 然後丟進瀏覽器，會發生什麼事情呢？

拿到了關於這個 Board 的資料，像是 "idBoard":"5a5075cf0cf5143e2c53fd64``"，同理個別 card 也能透過連結拿到一樣的資料。URL 在點開卡片的網址列裡。

一樣透過加上.json 可以拿到關於卡片的 data，包含他所在的 idList idBoard 。在官方教學裡，抓到這個 idList 之後，寫一個物件像這樣：

var myList = 'INSERT YOUR IDLIST HERE';

var creationSuccess = function (data) {
  console.log('Card created successfully.');
  console.log(JSON.stringify(data, null, 2));
};

var newCard = {
  name: 'New Test Card', 
  desc: 'This is the description of our new card.',
  // Place this card at the top of our list 
  idList: myList,
  pos: 'top'
};

window.Trello.post('/cards/', newCard, creationSuccess);

利用 Trello.post() 這個method 把資料丟進 API 裡。.post() 裡面的第一個參數是/cards/ 的endpoint、第二個是卡片的各種參數，存放在物件的property 裡。

最後給卡片放上名字。

window.Trello.put('/cards/[ID]', {name: 'New Test Card'});

Trello 上就成功出現新卡片了：

今天先暫時告個段落啦。
Codepen 連結