iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Software Development

SyncETA 開發日記:手把手打造你的智慧出發時間推薦 PWA 系列

本系列將記錄開發 SyncETA Lite 的完整歷程——一套基於機率式思維、為初學者設計的出發時間推薦 PWA。

內容涵蓋 PWA 基礎架構、台灣 TDX 運輸資料與 Google Maps API 串接、簡化版機率推薦邏輯(分位數運算)、離線與推播體驗優化,以及部署上線。

全程程式碼皆會標注寫在專案 syncetalite-pwa/ 資料夾中的哪個檔案,適合對智慧交通、PWA 開發有興趣的初學者跟著實作。

參賽天數 14 天 | 共 14 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 11

【Day 11】Google Maps API 申請與基本設定

第三階段開始,今天要申請 Google Maps API 金鑰,並了解我們會用到哪些子服務。 需要哪些 API? Google Maps Platform 底...

2026-09-03 ‧ 由 zoeeyee 分享
DAY 12

【Day 12】在頁面上嵌入地圖、標記起訖點

今天建立 src/components/Map.js,讓 SyncETA Lite 第一次出現真正的地圖畫面。 建立地圖元件 // src/component...

2026-09-04 ‧ 由 zoeeyee 分享
DAY 13

【Day 13】使用 Directions API 計算路線與時間

有了地圖跟標記,今天要讓 SyncETA Lite 具備「算路線」的能力。目標檔案:src/api/googleMaps.js。 建立路線查詢函式 // sr...

2026-09-05 ‧ 由 zoeeyee 分享
DAY 14

【Day 14】將 TDX 資料與地圖路線結合顯示

今天是第三階段的整合日,要把「即時公車到站資料」跟「Google Maps 路線規劃」放進同一個畫面,讓兩份原本各自獨立的資料開始產生關聯。 目標畫面 使用者...

2026-09-06 ‧ 由 zoeeyee 分享