Taichunung-Bus

台中公車動態資訊

Demo

使用技術

• 原生 JS
• xmlRequest
• Firebase RealTime Database
• Firebase Facebook auth login API
  • 太久沒使用，FB develop API 被取消啦 QQ
• 手刻 SCSS layout
• CSS animation
• 一顆青澀不怕丟臉的心

使用說明

• 訪客使用者
  • 點選 公車路線項目即可查詢該號公車目前的進站情況
  • 公車路線頁面可切換「來程」或「去程」(起點與終點相反)
  • 使用最上方的搜尋可快速搜尋要找的公車路線
  • 電腦版右方(手機版)下方，可切換繁體或是英文介面
• 已登入的使用者 (目前無法使用)
  • 可以釘選最愛公車路線
    • 被釘選的路線會顯示於列表的最上層
  • 其餘功能與訪客相同

---

開發筆記

心得全文不同步刊載於「it邦幫忙 2018年鐵人賽 」

• Day20 「使用網頁等公車」 ─ 台中公車動態系統 - 序
• Day21 「使用網頁等公車」 ─ 尋找 api 去囉！
• Day22 「使用網頁等公車」 ─ 從 AJAX 開始的 api 串接之旅
• Day23 「來個小插曲，聊聊心得」 ─ 那些你用過的技術，才是你的
• Day24 「準備接第二個 api 囉」 ─ 製作公車到站時間...欸？
• Day25 「想要的參數在不同頁怎麼辦？」 ─ 把它們丟到網址上吧！ - 使用網址傳參數
• Day26 「親愛的，我把 api Call 爆了」 ─ status of 429 (Too Many Requests)
• Day27 「使用 setInterval 排程囉」 ─ 嗯？好像不太對勁啊..？
• Day28 「使用網頁等公車」 ─ 就來做搜尋功能囉！

---

不重要的雜談

同樣不怎麼有美感但筆者當初做得很開心的小動畫