拿 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

隨選筆記文

Bot LINE

LINE Bot:X-Line-Signature 簽名驗證 範例

Front-End

IntersectionObserver:上篇-基本介紹及使用

Bot Telegram

Telegram Bot 學習筆記 – 3:鍵盤 keyboard

Vue

用 VuePress 製作說明文件頁面 – 3:導覽列

Front-End

Day.js 計算最近7天、上週、上個月的日期

API

Instagram Embedding 抓 iframe 高度及 3 種大小圖片

WordPress

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

Front-End

OSM + Leaflet 學習筆記1:建地圖、marker、事件、換圖層

Google Others

用 reCAPTCHA v2 來做非機器人驗證

Firebase Google

Firebase Dynamic Links 從後台建立縮網址

本站準備替換留言功能,投票調查中,歡迎 參與投票

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

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

Let's Write

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.