拿Trello當資料庫 建一個店家清單:上篇-Trello基本使用

拿Trello當資料庫 建一個店家清單:上篇-Trello基本使用

Trello可以排工作,更可以吐出JSON

下完標題後發現,Augustus這段要寫的都寫在標題上勒XD~

好,總之,一般大家會使用到Trello,都是拿來做工作清單或是專案進度控管用,以前也看過朋友拿來做出遊清單的,是個半好物。

為什麼說是半好物?因為一開始看Trello介面可能會不太習慣、不太直覺、不太好用,但如果公司說要用還是得熟悉(咦?)。坦白說奇妙清單Wonder List還比較好用,但自從被上古神獸IE的發明公司微X給併購了以後,明顯的Bug就永遠都好不了,讓人怒刪(咦?)。

如果是公司要用,那看板都是私人或團隊性質,當把看板轉成公開後,奇妙的事情就發生了,產生的JSON就可以介接,基本上就像是拿Trello當API用。(未設成公開會因授權不過而被擋下)

本篇筆記分成上、下2篇。

上篇,就是本篇,筆記建立Trello的看板及卡版,並取得輸出的JSON Url。

下篇,因為之前寫過畫一個台灣地圖後,一直想來做點什麼,目前有想到做一個台灣蔬食店家地圖,所以就拿公館站有的蔬食店家當資料,做一個秀出清單的頁面。


Trello建立資料步驟

在Trello要建立一筆資料,要過六關:

  1. 建立團隊
  2. 建立看板
  3. 建立列表
  4. 建立卡片
  5. 建立待辦清單
  6. 輸入資料

比關公過五關斬六將還多了一關,請大家看完這六關後有點耐心,我們一步步走下去。

Trello註冊方式就不筆記了,進入Trello官網後按下註冊就行:https://trello.com/

建立團隊

註冊完後,會進到主要介面,首先要先建立一個團隊,找到左側的項目有一個「個團隊 +」,按下那個 + 就行:

新增團隊
新增團隊

接著會要輸入團隊名稱跟描述,輸入完後按下「繼續」,會進到是否要邀請其他人進來,沒有的話按下「稍後再說」就行:

輸入團隊名及描述
輸入團隊名及描述

建立看板

團隊建立完,進到團隊頁面,按下「建立新的看板」就會開始新增一個新看板:

按下建立新的看板
按下建立新的看板

新增看板的部份,主要是寫看板的名稱,以及設定看板背景圖,還有一個最重要的設定權限。權限一定要設成公開,之後頁面想用AJAX來接資料才接得到:

看板權限設成公開
看板權限設成公開

如果在建立看板的這個步驟沒設到也沒關係,這些在建立完看板後也可以更改,以下筆記怎麼在建立看板完後修改。

建立完一個看板後,點進看板可以看到看板的介面,一樣按下「團隊觀看權限」,選擇公開:

公開看板
公開看板

因為公開就是指全宇宙都看得到的意思,Trello會再次跟你講這件事,再按下確認就行:

再次確認改成公開
再次確認改成公開

這邊Augustus也特別用粗體字說明一下,公開看板後全宇宙都看得到是真的,因為就代表Google搜尋的到,因此公開的看板請不要寫到公司機密或個人機密。


建立列表

點選「新增一個列表」,輸入完列表標題後按下「新增列表」即可:

為列表輸入標題後,按下新增
為列表輸入標題後,按下新增

建立卡片

列表新增完,按下「新增卡片」,輸入完卡片標題後,按下「新增卡片」就新增了:

為卡片輸入完標題,按下新增卡片
為卡片輸入完標題,按下新增卡片

建立待辦清單

點擊剛剛新增的卡片,會看見這張卡片的介面,每張卡片裡就是收納一個個的待辦清單,卡片就很像一個專案,而專案的每一個流程就是一個個的待辦清單。

卡片介面的右側有一個「待辦清單」,按下就可以開始新增:

按下卡片介面右側的「待辦清單」
按下卡片介面右側的「待辦清單」

輸入完待辦清單的標題,再按下「新增」就新增完成。

輸入資料

待辦清單裡,是一條條的項目,每個項目就是待辦事項,Trello會去計算這些項目完成的百分比,完成的就打勾。但本篇筆記是拿Trello當資料庫,所以都不用打勾。

以下是Augustus拿各個店家當待辦清單,項目填入地址、電話後的截圖:

Augustus完成的Trello樣子
Augustus完成的Trello樣子

因為看板是公開的,所以也貼上看板的連結,可以直接看到卡片:

https://trello.com/c/3WLeR9AB

按照一開始講的六關,配合本筆記要製作的公館站蔬食店家地圖,輸入資料的層級如下:

  1. 建立團隊:網站名 Let’s Write
  2. 建立看板:蔬食地圖
  3. 建立列表:捷運綠線
  4. 建立卡片:公館站
  5. 建立待辦清單:店家名稱
  6. 輸入資料:店家地址、電話

因為之後要接JSON的資料,為了欄位順序統一,因此資料的順序都固定是先地址,再電話。另外店家名稱跟地址的部份,因為之後想嵌入Google Map,所以統一用Google Map上顯示的名稱跟地址。


取得Trello JSON的Url

這步最重要也最簡單,一樣是在卡片的介面,往下拉後,右側會看見一個「分享」:

點擊「分享」
點擊「分享」

點了分享後,會看見這張卡片的分享方式,這邊有個UX上的…該說是Bug嗎?畢竟一般人也不會沒事去看JSON,按下會先去看「連結到此卡片」的input,而忽略了那一行的上面其實有一個「輸出 JSON」:

分享卡片,輸出JSON
分享卡片,輸出JSON

按下「輸出 JSON」後,就會進到這張卡片的JSON網址了,像本篇範例輸出的JSON就是這樣:

https://trello.com/card/5da2c8a3f11397244be7ad22/-.json

可以看見每個待辦清單的資料都在 checklists 裡,而地址、電話就是在裡面的 checkItems 中:

成功取得卡片的JSON
成功取得卡片的JSON

上篇筆記就寫到這篇,實際介接寫在下篇:

拿Trello當資料庫 建一個店家清單:下篇-建立清單頁面


Summary
拿Trello當資料庫  建一個店家清單:上篇-Trello基本使用
Article Name
拿Trello當資料庫 建一個店家清單:上篇-Trello基本使用
Description
本篇大綱:Trello可以排工作,更可以吐出JSON、Trello建立資料步驟、建立團隊、建立看板、建立列表、建立卡片、建立待辦清單、輸入資料、取得Trello JSON的Url。本篇筆記要記錄的分成2篇。本篇是如何將Trello的看板設成公開,並建一個清單來接。
Augustus
Let's Write
Let's Write
Publisher Logo

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *