初次嘗試開發專案：整合 YouBike 與大眾運輸的全方位路徑導航地圖

專案開發週期：2025年4月 — 2025年底

---

前言：為什麼需要另一個導航地圖？

在台灣，公共自行車 YouBike 與捷運、公車等大眾運輸系統已經是我們生活中不可或缺的一部分。然而，身為一個依賴大眾交通的通勤族，我常遇到一個痛點：現有的地圖服務將「YouBike」與「大眾運輸」視為兩個平行的世界。

當我想規劃一趟騎 YouBike 到捷運站，轉乘捷運後再騎 YouBike 到學校的行程時，往往需要在不同的 App 之間切換，自行加總時間與費用。

為了解決這個斷裂的體驗，我決定在 2025 年 4 月啟動我的第一個完整全端開發專案——整合 YouBike 與大眾運輸的全方位路徑導航地圖。這個專案的目標很簡單：在一個介面上，提供包含所有交通模式的總時間、總距離以及整合後的費用預估。

---

技術棧

作為初次嘗試開發的專案，我使用了前後端分離的架構。完整的進行一遍全端開發。

前端

前端的重點在於地圖互動與即時資料呈現：

• 核心語言：HTML5, CSS3, Vanilla JavaScript
• 地圖引擎：Google Maps JavaScript API

雖然 Leaflet.js 是開源的好選擇，但考量到台灣使用者的操作習慣與圖資豐富度，Google Maps 仍是我開發時的第一選則。

• 定位與通訊：HTML5 Geolocation API、Fetch API

本篇文章真的沒收 Google 的錢

後端

後端負責處理複雜的邏輯運算與 API 整合：

• 框架：FastAPI

選擇 FastAPI 是因為它效能優異且原生支援非同步處理，非常適合處理高併發的 API 請求，同時也是最適合我一個初入門小白的框架。

• 工具庫：httpx、python-dotenv

外部服務

• 即時車輛資訊：YouBike 2.0 Open Data API

這是我唯一一個找到的免費Youbike資料，但也因為只有這個免費導致服務除了臺北市內能使用外其餘縣市都無法體驗到完整服務。

---

核心功能與開發挑戰

在這個專案中，最困難的不是串接 API，而是如何將分散的資訊計算並整合在一起。

混合路徑演算法

系統需要同時考量 YouBike 站點的即時狀況以及大眾運輸的班次。為了精確計算使用者當前位置與最近 YouBike 站點的距離，我實作了 半正矢公式 來使服務能順利運作。

$$d = 2r \arcsin\left(\sqrt{\sin^2\left(\frac{\Delta\phi}{2}\right) + \cos(\phi_1)\cos(\phi_2)\sin^2\left(\frac{\Delta\lambda}{2}\right)}\right)$$

透過這個算法，後端能快速篩選出最佳的起訖站點，再將其座標進行路徑規劃。

費用整合邏輯

這是現有地圖服務最缺乏的功能。

• YouBike 費用與其他交通工具的整合
• 功能實現：我在後端寫了一套計費邏輯。當系統收到路徑資料後，會根據 YouBike 的騎乘時間，依照目前的費率進行計算，最後將這筆金額加到大眾運輸票價上，呈現出預估的總花費。

---

系統部署：Home Lab 與 Cloudflare 的結合

為了節省成本並練習 Linux 伺服器管理，我採用了混合部署架構。

部署流程：

1. 後端： 在家中的 Linux 伺服器上，使用 Docker 容器化運行 FastAPI 服務，確保環境隔離與穩定性。
2. 內網穿透 Cloudflare Tunnel： 為了不需設定繁瑣的 Port Forwarding 並隱藏家中 IP，我使用 Cloudflare Tunnel 建立安全通道，將地端 API 暴露至網際網路。
3. 前端： 前端靜態檔案託管於 Cloudflare R2 儲存服務。
4. 路由整合 Cloudflare Workers： 利用 Cloudflare Workers 處理進出的 HTTP 請求，將前端頁面與後端 API 進行路由分發。

這套架構讓我能直接在 VS Code 透過 SSH 遠端連線回家開發，也能提供一定的資安防護。

---

成果展示與未來展望

目前成果

經過 8 個月的開發，目前的版本已經具備 RWD 響應式設計，在手機上操作流暢。使用者只需輸入起終點，系統就會自動規劃出一條包含 YouBike 騎乘與大眾運輸的複合路線，並顯示精準的總時間與總費用。

待優化項目

在測試過程中，我也發現了許多可以迭代的方向：

• 基礎設施升級：家用網路的頻寬與穩定性畢竟有限且需要手動開機。未來計畫遷移至 VPS ，提升服務可用性。

  前提是我有錢

• 更聰明的計費：目前的計費尚未包含 TPASS 行政院通勤月票 的邏輯。未來希望加入票種選擇功能，讓持有月票的使用者能看到實際額外支出。

• 跨縣市服務：目前受限於資料源，僅支援臺北市。擴充其他縣市的 Open Data 是下一步的重點。

  當然還是需要我有錢

• 個人化體驗：未來增加最愛路線與歷史紀錄功能，減少重複輸入的麻煩。

對我就是需要更多錢

---

結語：從 0 到 1 的全端旅程

這不僅是一個導航地圖的專案，更是我技術成長的縮影。

從 2025 年 4 月寫下第一行 code 時對網頁設計的探索，到年底能夠獨立架設 Linux 伺服器、撰寫 Dockerfile、調度 Cloudflare 服務以及處理複雜的後端邏輯。到了2026年，我已經可以使用 Next.js 製作一個個網頁專案，也開始進行更多不同的研究與專案開發。

我的個網 https://twcat0503.org 就是用 Next.js 做的，當然這個blog也是

附上一份2025年的 Github 綠點點，雖然我的 repo 都是私人的。