Trello 可以排工作,更可以吐出 JSON
下完標題後發現,August 這段要寫的都寫在標題上勒 XD~
好,總之,一般大家會使用到 Trello,都是拿來做工作清單或是專案進度控管用,以前也看過朋友拿來做出遊清單的,是個半好物。
為什麼說是半好物?因為一開始看 Trello 介面可能會不太習慣、不太直覺、不太好用,但如果公司說要用還是得熟悉(咦?)。坦白說奇妙清單 Wonder List 還比較好用,但自從被上古神獸 IE 的發明公司微 X 給併購了以後,明顯的 Bug 就永遠都好不了,讓人怒刪(咦?)。
如果是公司要用,那看板都是私人或團隊性質,當把看板轉成公開後,奇妙的事情就發生了,產生的 JSON 就可以介接,基本上就像是拿 Trello 當 API 用。(未設成公開會因授權不過而被擋下)
本篇筆記分成上、下 2 篇。
上篇,就是本篇,筆記建立 Trello 的看板及卡版,並取得輸出的 JSON URL。
下篇,因為之前寫過 畫一個台灣地圖 後,一直想來做點什麼,目前有想到做一個台灣蔬食店家地圖,所以就拿公館站有的蔬食店家當資料,做一個秀出清單的頁面。
Trello 建立資料步驟
在 Trello 要建立一筆資料,要過六關:
- 建立團隊
- 建立看板
- 建立列表
- 建立卡片
- 建立待辦清單
- 輸入資料
比關公過五關斬六將還多了一關,請大家看完這六關後有點耐心,我們一步步走下去。
Trello 註冊方式就不筆記了,進入 Trello 官網後按下註冊就行:https://trello.com/
建立團隊
註冊完後,會進到主要介面,首先要先建立一個團隊,找到左側的項目有一個「個團隊 +」,按下那個 + 就行:
接著會要輸入團隊名稱跟描述,輸入完後按下「繼續」,會進到是否要邀請其他人進來,沒有的話按下「稍後再說」就行:
建立看板
團隊建立完,進到團隊頁面,按下「建立新的看板」就會開始新增一個新看板:
新增看板的部份,主要是寫看板的名稱,以及設定看板背景圖,還有一個最重要的 設定權限。權限一定要設成公開,之後頁面想用 AJAX 來接資料才接得到:
如果在建立看板的這個步驟沒設到也沒關係,這些在建立完看板後也可以更改,以下筆記怎麼在建立看板完後修改。
建立完一個看板後,點進看板可以看到看板的介面,一樣按下「團隊觀看權限」,選擇公開:
因為公開就是指全宇宙都看得到的意思,Trello 會再次跟你講這件事,再按下確認就行:
這邊 August 也特別用粗體字說明一下,公開看板後全宇宙都看得到是真的,因為就代表 Google 搜尋的到,因此公開的看板請不要寫到公司機密或個人機密。
建立列表
點選「新增一個列表」,輸入完列表標題後按下「新增列表」即可:
建立卡片
列表新增完,按下「新增卡片」,輸入完卡片標題後,按下「新增卡片」就新增了:
建立待辦清單
點擊剛剛新增的卡片,會看見這張卡片的介面,每張卡片裡就是收納一個個的待辦清單,卡片就很像一個專案,而專案的每一個流程就是一個個的待辦清單。
卡片介面的右側有一個「待辦清單」,按下就可以開始新增:
輸入完待辦清單的標題,再按下「新增」就新增完成。
輸入資料
待辦清單裡,是一條條的項目,每個項目就是待辦事項,Trello 會去計算這些項目完成的百分比,完成的就打勾。但本篇筆記是拿 Trello 當資料庫,所以都不用打勾。
以下是 August 拿各個店家當待辦清單,項目填入地址、電話後的截圖:
因為看板是公開的,所以也貼上看板的連結,可以直接看到卡片:
按照一開始講的六關,配合本筆記要製作的公館站蔬食店家地圖,輸入資料的層級如下:
- 建立團隊:網站名 Let’s Write
- 建立看板:蔬食地圖
- 建立列表:捷運綠線
- 建立卡片:公館站
- 建立待辦清單:店家名稱
- 輸入資料:店家地址、電話
因為之後要接 JSON 的資料,為了欄位順序統一,因此資料的順序都固定是先地址,再電話。另外店家名稱跟地址的部份,因為之後想嵌入 Google Map,所以統一用 Google Map 上顯示的名稱跟地址。
取得 Trello JSON 的 URL
這步最重要也最簡單,一樣是在卡片的介面,往下拉後,右側會看見一個「分享」:
點了分享後,會看見這張卡片的分享方式,這邊有個 UX 上的…該說是 Bug 嗎?畢竟一般人也不會沒事去看 JSON,按下會先去看「連結到此卡片」的 input,而忽略了那一行的上面其實有一個「輸出 JSON」:
按下「輸出 JSON」後,就會進到這張卡片的 JSON 網址了,像本篇範例輸出的 JSON 就是這樣:
https://trello.com/card/5da2c8a3f11397244be7ad22/-.json
可以看見每個待辦清單的資料都在 checklists
裡,而地址、電話就是在裡面的 checkItems
中:
上篇筆記就寫到這篇,實際介接寫在下篇:
拿 Trello 當資料庫 建一個店家清單:下篇 – 建立清單頁面
[…] 上篇最後「取得 Trello JSON 的 URL」這段,我們取得了卡片的 URL。 […]