[Web]自製公車資訊實作細節-前端

前端的部分使用native javascript開發，並且用了一些功能讓網頁更方便操作，當然UI還有待改善，畢竟我不是學美術的XD

還沒看過該作品的同學，可以從這邊前往，一鍵公車，眼尖的朋友可能會發現畫面和當初的版本似乎不同了，畢竟也花了不少時間持續優化，所以跟初版相比算是華麗了不少吧，以下是前端的一些特點

資料取得與展示
加到桌面，如APP一般
SVG Sprite
可單手操作的選單
簡潔的Toast訊息
分享功能
避免外部資源被快取而不更新

洋洋灑灑也有好幾項，雖然有些只是使用到而已，但是適當的使用，也可以讓你的應用加分，而不是把所有功能都放進來就好，有些是使用別人的成果，雖然有經過一些調整，還是會將出處附在參考，以示尊重。另外因為是設定給手機使用，就不考慮相容老爺機或者桌機的部分，盡量使用新的API

資料取得與展示

使用fetch來取得資料，為了避免使用者習慣性重新整理，使用了快取機制，因為資料端更新頻率約1分鐘，太頻繁沒有幫助反而造成後端壓力，所以1分鐘內直接使用快取。

另外自動1分鐘重新整理一次，省去使用者手動操作，考量到使用者會關螢幕，一段時間再打開來看，接收visibilitychange事件，讓使用者開螢幕時，馬上重新整理，並在讀取時，右下角顯示圖示讓使用者知道

const DATA_CACHE_TIME = 'data_cache_time';
const DATA_CACHE = 'data_cache';
const REFRESH_PERIOD = 60*1000;
const DATA_URL = 'https://script.google.com/macros/s/AKfycbxVH6wsfiRs_u-GSLVKVoENVX_SfJ7wUSFEqTB_hDFleA4NzEY/exec?key=7dKw1ubRxz4EtL2EuN5ZWKZPT9GBeL6T';

let loadTimeout;
//檢測頁面不可見時，停止重整，在頁面恢復時，馬上重新整理
document.addEventListener('visibilitychange', function(){
  clearTimeout(loadTimeout);
  if(document['hidden']){
  }else{
    loadData()
  }
}, false);

function loadData(){
  //檢查和上次快取的時間間隔，低於間隔則直接使用快取，減少要求次數
  var now = new Date();
  //if less than 60s use cache
  if(localStorage[DATA_CACHE] && 
    localStorage[DATA_CACHE_TIME] && 
    (now.getTime() - parseInt(localStorage[DATA_CACHE_TIME], 10) < 60000)){
    parseData(JSON.parse(localStorage[DATA_CACHE]));
    return;
  }
  document.querySelector('.loading').classList.toggle('hidden');
  fetch(DATA_URL,{
    method:'GET',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
    }
  })
  .then(res => {
      return res.json();
  }).then(result => {
      parseData(result);
      localStorage[DATA_CACHE] = JSON.stringify(result);
    localStorage[DATA_CACHE_TIME] = now.getTime();
      document.querySelector('.loading').classList.toggle('hidden');
      loadTimeout = setTimeout(function(){loadData()}, REFRESH_PERIOD);
  })
  .catch(function(err) {
      alert(err);
      document.querySelector('.loading').classList.toggle('hidden');
      loadTimeout = setTimeout(function(){loadData()}, REFRESH_PERIOD);
  });
}

function parseData(result){
  let estimate = [];
  for(let i=0;i<result.length;i++){
    let text = '';
    if(result[i]['PlateNumb'] == '-1' || result[i]['PlateNumb'] == ''){
      text = getStatus(result[i]['StopStatus'], result[i]['NextBusTime']);
    }else{
      if(result[i]['EstimateTime'] > 60){
        text = Math.ceil(result[i]['EstimateTime']/60)+'分後';
      }else{
        text = '1分鐘內';
      }
    }
    estimate.push({
      route: result[i]['SubRouteName']['Zh_tw'],
      no: result[i]['PlateNumb'],
      text: text,
      stop: result[i]['StopName']['Zh_tw']
    });
  }
  showResult(estimate);
}

function showResult(estimate){
  let content = '';
  for(let i=0;i<estimate.length;i++){
    content += '<div class="info_row">'+
      '<div class="info_route">'+estimate[i]['route'] + '</div>'+
      '<div class="info_no">'+estimate[i]['no']+'</div>'+
      '<div class="info_text">' + estimate[i]['text']+'</div>'+
      '<div class="info_stop">' + estimate[i]['stop']+'</div>'+
    '</div>';
  }
  document.getElementById('estimate_info').innerHTML = content;
}

function getStatus(status, next_time){
  if(status === 1){
    if(next_time == undefined){ return '尚未發車';}
    var time = new Date(next_time);
    var hour = time.getHours() < 10 ? '0'+time.getHours() : time.getHours();
    var minute = time.getMinutes() < 10 ? '0'+time.getMinutes() : time.getMinutes();
    return hour + ':' + minute + '發車';
  }else if(status === 2){
    return '交管不停靠';
  }else if(status === 3){
    return '末班車已過';
  }else if(status === 4){
    return '今日未營運';
  }
}

CSS部分，簡單定義了每一欄的寬度，讀取圖示等

.info_row{
  padding: .5em 0;
}
.info_route{
  display: inline-block;
  width: 15%;
}
.info_no{
  display: inline-block;
  width: 25%;
}
.info_text{
  display: inline-block;
  width: 30%;
}
.info_stop{
  display: inline-block;
  width: 30%;
}
.svg-icon {
    fill: #fff;
    width: .8em;
  height: .8em;
  margin: .2em;
}
.loading{
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  bottom: .3em;
  right: .3em;
  fill: black;
  animation: spin 1.4s infinite linear;
}
.hidden { display: none; }

@keyframes spin{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

加到桌面，如APP一般

Add to home screen，這個功能可以將捷徑建立在手機桌面，執行時可隱藏網址列，獲得類似原生APP的操作體驗，需要建立manifest.json，定義捷徑的外觀和作用，還有記得製作圖示檔案

{
  "short_name": "一鍵公車",
  "name": "一鍵公車",
  "icons": [
    {
      "src": "icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "./index.html?source=app",
  "scope": "./",
  "background_color": "#3367D6",
  "display": "standalone",
  "theme_color": "#3367D6"
}

SVG Sprite

考量到SVG的支援度已相當普及，用起來也比CSS Sprite簡單，因此把圖示的部分全部集中到一個SVG檔案中，使用方法如下，只要指定symbol的id就可以囉，是不是很方便~

<svg class="svg-icon loading hidden" xmlns="http://www.w3.org/2000/svg">
  <use xlink:href="icon.svg#loading"></use>
</svg>

SVG的格式如下，svg節點中可放置多個symbol，此格式的圖可以由CSS來定義大小和顏色，非常靈活

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="loading" viewBox="0 0 24 24"><path d="M23 12c0 1.042-.154 2.045-.425 3h-2.101c.335-.94.526-1.947.526-3 0-4.962-4.037-9-9-9-1.706 0-3.296.484-4.655 1.314l1.858 2.686h-6.994l2.152-7 1.849 2.673c1.684-1.049 3.659-1.673 5.79-1.673 6.074 0 11 4.925 11 11zm-6.354 7.692c-1.357.826-2.944 1.308-4.646 1.308-4.962 0-9-4.038-9-9 0-1.053.191-2.06.525-3h-2.1c-.271.955-.425 1.958-.425 3 0 6.075 4.925 11 11 11 2.127 0 4.099-.621 5.78-1.667l1.853 2.667 2.152-6.989h-6.994l1.855 2.681z"/></symbol>
</svg>

可單手操作的選單

多數手機的APP和網頁選單都是從上面操作，不是左上就是右上，問題是這樣很不利於單手使用，考慮到這點，我花了一些時間找是否有單手可操作的選單，終於讓我找到了，居然連文章都沒有，只有一個範例，根據我的需求調整了一些屬性，單位也都改成em

不得不佩服作者，因為他把大部分的參數都使用CSS Variables，很輕易地可以調整，HTML的部分也不會太複雜，還保留了不少彈性，篇幅太大，詳細的代碼還是要參考github原始碼~

:root{
  --colorWhite: #fff;
  --colorMain: #4557bb;
  --rLinkTextColor: var(--colorWhite);
  --rlinkActiveColor: #d0e6ff;
  --menuCircleSize: 6em;
  --menuCircleBgColor: var(--colorMain);
  --menuHamburgerWidth: 1.68em;
  --menuHamburgerHeight: 1.2em;
  --menuHamburgerBgColor: var(--colorWhite);
}

<div class="menu">
  <nav class="menu__nav">
    <ul class="r-list menu__list">
      <li class="menu__group">
        <a href="https://ptx.transportdata.tw/PTX" class="r-link menu__link">
          <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" data-svg-id="bus" onload="assignSvgUrl(this);">
        <use xlink:href=""></use>
      </svg>交通部PTX
        </a>
      </li>
      <li class="menu__group">
        <a href="https://woodloch.blog" class="r-link menu__link">
          <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" data-svg-id="user" onload="assignSvgUrl(this);">
        <use xlink:href=""></use>
      </svg>木澤
        </a>
      </li>
      <li class="menu__group">
        <a href="https://woodlochhome.wordpress.com/2020/05/30/oneclickbus/" class="r-link menu__link">
          <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" data-svg-id="link" onload="assignSvgUrl(this);">
        <use xlink:href=""></use>
      </svg>部落格
        </a>
      </li>
      <li class="menu__group">
        <a href="mailto:admin@woodloch.blog" class="r-link menu__link">
          <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" data-svg-id="mail" onload="assignSvgUrl(this);">
        <use xlink:href=""></use>
      </svg>聯繫我
        </a>
      </li>
      <li class="menu__group">
        <a href="javascript:void(0);" onclick="shareUrl();" class="r-link menu__link">
          <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" data-svg-id="share" onload="assignSvgUrl(this);">
        <use xlink:href=""></use>
      </svg>分享給朋友
        </a>
      </li>
    </ul>
  </nav>
  <div class="menu__toggle">
    <button class="r-button menu__hamburger">
        <span class="m-hamburger">
        <span class="m-hamburger__label">Open menu</span>
        </span>
    </button>
  </div>  
</div>

簡潔的Toast訊息

考量訊息提示時，不希望使用者一直去點確定，那就學原生APP的Toast方式好了，許多套件都很花俏，但容量不小，後來找到一個簡易輕量的範例，套用了以後發現了一個bug，因為它使用js的setTimeout來隱藏，要配合CSS動畫的時間，有時候兩者時間因為延遲不一致，會看到不正常的閃爍。這部份好解決，不要使用animation，只用transition就可以了

#toast {
  min-width: 250px; 	  
  background-color: #333; 
  color: #fff; 
  text-align: center; 
  border-radius: 2px; 
  padding: 16px; 
  position: fixed; 
  z-index: 1000; /* need to higher than .menu in nav.css */
  left: 50%; /* Center the toast */
  transform: translatex(-50%);
  opacity: 0;
  bottom: calc(var(--toastBottom) * -1 );
  transition: bottom .5s, opacity .5s;/* move with animation */
}

#toast.show {
  opacity: 1;
  bottom: var(--toastBottom);
  transition: bottom .5s, opacity .5s;/* move with animation */
}
:root{
	--toastBottom: 3.2em;
}

<div id="toast">Some text some message..</div>

function showToast(text) {
  var x = document.getElementById("toast");
  x.innerText = text;
  x.classList.toggle('show');
  setTimeout(function(){ x.classList.toggle('show'); }, 3000);
}

分享功能

Web應用畢竟還是靠網址傳遞，因此方便分享，所以使用了Share API來呼叫原生的分享功能，假設不支援，也可以把網址複製到剪貼簿中，再到其他的社群貼上

//for share API
const shareData = {
  url: window.location.href
};

function shareUrl(){
  //確認支援度
  if (navigator.share) {
      try {
        navigator.share(shareData);
    } catch (err) {
        const { name, message } = err;
        if (name === 'AbortError') {
          console.log('您已取消分享此訊息');
        } else {
          console.log('發生錯誤', err);
        }
    }
  } else {
    //不支援則將網址複製到剪貼簿
    copy(window.location.href);
    showToast('網址複製完成');
  }
  //隱藏選單
  document.querySelector('.menu__hamburger').dispatchEvent(new Event('click'));
}

function copy(text){
  const input = document.createElement('input');
  input.value = text;
  document.body.appendChild(input);
  input.select();
  if (document.execCommand('Copy')) {
       document.execCommand('Copy');
  }
  document.body.removeChild(input);
}

避免外部資源被快取而不更新

在初版開發完畢後，後續改版一直有遇到一個困擾，就是外部引用的資源會因為瀏覽器快取，顯示舊版本的內容，像是SVG明明已經新增圖了，可是快取的圖沒有，就空一塊，又或者是選單的nav.css已經修改樣式，但同樣因為快取問題，顯示舊的樣式。

通常處理這個問題，就是從引用的url下手，尾部加上版號之類的，只要url不同，瀏覽器就會重新取得最新版，問題是CSS和SVG都是hardcode上去的，這是前端，沒有後端幫我加字串，因此不得已的情況下，只好採用動態載入，採用半自動的方式，定義好一個值，每次有更新就跟著改變，配合動態載入外部資源url變更達到更新的效果

const LAST_MODIFIED_DATE = '2020060121';
//prevent css cache not update
document.getElementsByTagName("head")[0].insertAdjacentHTML(
	'afterBegin',
	'<link rel="stylesheet" href="nav.css?v='+LAST_MODIFIED_DATE+'" />');

SVG則是定義在onload事件，動態改變href值

function assignSvgUrl(svg){
  var use = svg.getElementsByTagName("use")[0];
  use.href.baseVal = 'icon.svg?v='+LAST_MODIFIED_DATE+'#' + svg.dataset.svgId;
}

<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" data-svg-id="user" onload="assignSvgUrl(this);">
  <use xlink:href=""></use>						</svg>

感覺篇幅有點長，可以看到這裡，耐心令人佩服，Web前端博大精深，UI、UX更是一門學問，如果你有更好的想法，歡迎多多指教~

一拖拉庫的參考

[Web]自製公車資訊實作細節-前端

資料取得與展示

加到桌面，如APP一般

SVG Sprite

可單手操作的選單

簡潔的Toast訊息

分享功能

避免外部資源被快取而不更新

對「[Web]自製公車資訊實作細節-前端」的一則回應

Add yours

發表迴響取消回覆

近期文章: 木澤的研發腦

[體會]專案節奏的差異

[經驗]一個人的辦公室

[Web]自製公車資訊實作細節-前端

[GAS]自製公車資訊實作細節-後端

[作品]一鍵取得個人公車資訊

標籤

資料取得與展示

加到桌面，如APP一般

SVG Sprite

可單手操作的選單

簡潔的Toast訊息

分享功能

避免外部資源被快取而不更新

分享此文：

請按讚：

相關

對「[Web]自製公車資訊實作細節-前端」的一則回應

Add yours

發表迴響 取消回覆

近期文章: 木澤的研發腦

[體會]專案節奏的差異

[經驗]一個人的辦公室

[Web]自製公車資訊實作細節-前端

[GAS]自製公車資訊實作細節-後端

[作品]一鍵取得個人公車資訊

標籤

發表迴響取消回覆