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

/

上篇的最後取得了 URL

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

下篇,就是本篇,要筆記的是取得資料後的整理,以及處理成一個店家清單的頁面。為了有切換的功能,除了上篇的公館站外,Augustus 另外又建了一個古亭站,兩張卡片的 JSON URL 各自如下:

公館站:https://trello.com/card/5da2c8a3f11397244be7ad22/-.json

古亭站:https://trello.com/card/5da5b564ca7ce5220c35c047/-.json


整理取得的資料

上篇的最後,有說從 Trello 得來的資料結構如下:

從Trello得來的資料結構
從 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:clickv-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/

Summary
拿 Trello 當資料庫 建一個店家清單:下篇 - 建立清單頁面
Article Name
拿 Trello 當資料庫 建一個店家清單:下篇 - 建立清單頁面
Description
本篇大綱:上篇的最後取得了 URL、整理取得的資料、製作顯示清單頁面、捷運站選單、清單卡片部份、店家詳細資料、原始碼及 Demo。本篇要筆記的是取得資料後的整理,以及處理成一個店家清單的頁面。為了有切換的功能,除了上篇的公館站外,Augustus 另外又建了一個古亭站。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

PWA

PWA 學習筆記 – 2:Workbox CLI

API Front-End

WebSocket 基本介紹及使用筆記

Firebase Google

Firebase Dynamic Links Analytics API 取得短網址分析資料

WordPress

WordPress SEO 有幫助的 3 + 4 個外掛

API

如何用 Mockoon 快速建立 Mock APIs Server

Vue

Vue.js 3 Composition API 基本學習筆記-1:Ref、Props、watch、生命週期

Front-End

TestCafe 學習筆記 – 1:自動化測試會員登入

Front-End

Promise、Async、Await 基本使用筆記

Vue

D3.js、Vue 畫一個台灣地圖

Front-End

製作 RWD email 工具:MJML,如何使用及注意事項

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
1 Comment
最舊
最新
Inline Feedbacks
看所有留言
Joyu
Joyu
6 月 之前

這也太厲害了!居然是用Trello做出來的XD