上篇的最後取得了 URL
上篇最後「取得 Trello JSON 的 URL」這段,我們取得了卡片的 URL。
下篇,就是本篇,要筆記的是取得資料後的整理,以及處理成一個店家清單的頁面。為了有切換的功能,除了上篇的公館站外,August 另外又建了一個古亭站,兩張卡片的 JSON URL 各自如下:
公館站:https://trello.com/card/5da2c8a3f11397244be7ad22/-.json
古亭站:https://trello.com/card/5da5b564ca7ce5220c35c047/-.json
整理取得的資料
上篇的最後,有說從 Trello 得來的資料結構如下:
每個店家都在 checklists
裡,而地址、電話就是在裡面的 checkItems
中,所以只需要在 fetch 後寫一個 forEach,就可以整理出我們要的資料了:
let shops = {}; Array.prototype.forEach.call(results.checklists, list => { shops[list.id] = Object.create(null, { id: { value: list.id }, name: { value: list.name }, site: { value: list.checkItems[0].name }, tel: { value: list.checkItems[1].name } }); });
整理完 console 印出來的結果如下圖:
因為會在切換捷運站的時候,取得不同的 JSON,所以在原始碼的部份寫成 Vue.js 的 methods 來取得,原始碼會附在本文的最後一段。
確認完可以成功取得、整理資料,下一步就是製作一個清單頁。
製作顯示清單頁面
頁面的部份直接拿 Bootstrap 來套,不過樣式的部份改用 Bootswatch 站上的,選用了「Darkly」這個佈景。
基本上用了 Bootstrap 後,因為示範用的頁面比較簡單,也不用怎麼改,最後完成的頁面如下圖:
切換的功能,像捷運站的切換,左側選單點了會更換右側的詳細資訊,用的是 Vue.js,先附上 HTML 的部份,為了方便看架構,會刪掉大部份的 class name。
捷運站選單
用了 v-on:click
跟 v-bind:class
來切換 .active
:
<button type="button" @click="getShops('公館')" :class="{ 'active': mrt == '公館' }">公館站</button> <button type="button" @click="getShops('古亭')" :class="{ 'active': mrt == '古亭' }">古亭站</button>
清單卡片部份
用 v-for
丟整理過的店家清單, v-on:click
時執行修改詳細店家的資料:
<div class="card mb-3"> <h5>{{ cardName }} 蔬食店家</h5> <div> <button v-for="s in shops" :class="{ 'active': s.id === shop.id }" @click="shop = shops[s.id]">{{ s.name }} </button> </div> </div>
店家詳細資料
清單點擊後會改變 shop,所以店家詳細資料就是 shop 的值,地圖的部份用 Google Maps Embed API:
<div> <h5>詳細資訊</h5> <div> <h4>{{ shop.name }}</h4> <p>{{ shop.tel }}</p> <p>{{ shop.site }}</p> <div> <iframe :src="'https://www.google.com/maps/embed/v1/place?key=YOUR_TOKEN&q=' + shop.name"></iframe> </div> </div> </div>
iframe 裡的 YOUR_TOKEN 要換成 Google Maps API 的 token。取得 token 的方式可參考這篇:Google Maps API學習筆記 – 1:地圖、標記、客製樣式。
原始碼及 Demo
有了資料跟頁面,整個範例就完成了,原始碼整理放到了 GitHub 上:
https://github.com/letswritetw/letswrite-trello-db
最後完成的 Demo 頁在這:
https://letswritetw.github.io/letswrite-trello-db/
這也太厲害了!居然是用Trello做出來的XD