今天是整個系列的中點，也是第三階段的收尾。我們先暫停加新功能，回頭把現有的東西整理得更完整、更好用。

目前完成的功能盤點

• ✅ PWA 基礎架構（可安裝、Manifest、Service Worker 雛形）
• ✅ TDX 即時公車到站資料串接與自動更新
• ✅ Google Maps 地圖顯示、路線規劃、Directions API
• ✅ 兩份資料在同一畫面呈現

加入簡單的起訖點輸入介面

目前起訖點都是寫死在程式碼裡，今天讓使用者可以自己輸入。修改 index.html：

<div class="search-form">
  <input id="origin-input" placeholder="起點，例如：台北車站" />
  <input id="destination-input" placeholder="目的地，例如：西門" />
  <button id="search-btn">查詢</button>
</div>

在 src/main.js 綁定事件（先用固定座標對照表示範，之後可以接 Places API 做真正的地址搜尋）：

const knownPlaces = {
  '台北車站': { lat: 25.0478, lng: 121.5170 },
  '西門': { lat: 25.0421, lng: 121.5079 },
};

document.getElementById('search-btn').addEventListener('click', () => {
  const originName = document.getElementById('origin-input').value;
  const destName = document.getElementById('destination-input').value;

  const origin = knownPlaces[originName];
  const destination = knownPlaces[destName];

  if (!origin || !destination) {
    alert('目前示範版本僅支援：台北車站、西門');
    return;
  }

  planJourney(origin, destination, '0100000A00');
});

程式碼健檢

趁中點回顧一下 syncetalite-pwa/ 的檔案是否都各司其職：api/ 只管資料存取、components/ 只管畫面、main.js 負責串起流程。

如果你發現某個檔案開始做太多事情，這就是重構的訊號。

第三階段完成

第一到第三階段，我們做的都是「忠實呈現原始資料」，但回到 Day 1 的初衷——使用者要的不是資料，是「建議」。

從明天開始的第四階段，我們要開始碰觸這個系列真正的核心：如何把不確定的交通時間，轉換成一句使用者聽得懂的出發時間建議。

這部分也會呼應我在研究上探討的 SOTA（Stochastic On-Time Arrival）與 newsvendor 問題精神，但我會用完全不涉及艱澀數學的方式帶大家理解。