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

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

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

下完標題後發現,August 這段要寫的都寫在標題上勒 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 會再次跟你講這件事,再按下確認就行:

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

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


建立列表

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

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

建立卡片

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

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

建立待辦清單

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

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

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

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

輸入資料

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

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

August完成的Trello樣子
August 完成的 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。本篇是記錄如何將 Trello 的看板設成公開,並建一個清單來接。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest

1 Comment
最舊
最新
Inline Feedbacks
看所有留言
trackback
拿 Trello 當資料庫 建一個店家清單 - 下篇:建立清單頁面 - Vue - Let's Write
5 月 之前

[…] 上篇最後「取得 Trello JSON 的 URL」這段,我們取得了卡片的 URL。 […]