YouBike 車輛查詢

顯示鄰近 YouBike 站點即時車位與租借狀況的網頁應用，支援定位、QR Code 分享與一鍵導航到 Google Maps。

線上版本：https://youbike-6n2.pages.dev/

功能

• 📍 依目前位置自動列出全台最近的 3 個 YouBike 站點與距離
• 🚲 即時顯示可借車輛數、可還空位數，並分別列出一般車與電輔車數量
• 🎟️ 標示「友愛接力」站點（滿站借車或空站還車可獲得騎乘券）
• 🔄 按下重新整理按鈕即可更新車輛與定位資訊
• 🧭 點站名或導航按鈕，一鍵在 Google Maps 開啟站點
• 📱 一鍵開啟 YouBike 官方 App
• 📷 顯示 QR Code，方便分享網站給他人

技術架構

• 前端：純 HTML / CSS / JavaScript，不使用框架
• 後端：Cloudflare Pages Functions（functions/api/youbike.js）作為 API proxy，透過交通部運輸資料流通服務（TDX）取得全台各縣市公共自行車即時資料，並依距離排序
• API 用量控制：
  • 每次請求只查詢離使用者最近的 1～2 個縣市
  • 各縣市資料在 Cloudflare 快取 60 秒，快取期間不會重複呼叫 TDX
  • TDX access token 在有效期限內重複使用
  • 前端重新整理按鈕有 3 秒冷卻時間
  • 每次最多回傳 10 個站點
  • API 只接受台灣 IP（依 Cloudflare 判定的國家），其他國家回傳 403
• 流量分析：Google Analytics 4 與 Cloudflare Web Analytics

本機開發

需要一組免費的 TDX 帳號（申請方式見下方），並在專案根目錄建立 .dev.vars 放入金鑰：

TDX_CLIENT_ID=xxxx
TDX_CLIENT_SECRET=xxxx

.dev.vars 已列在 .gitignore，不會被提交到 Git。

啟動本機伺服器：

npx wrangler pages dev public --port 1234

在 localhost 開啟時，左下角會出現除錯用的假定位按鈕（萬華 266 號綠地），正式站不會顯示。

部署

npx wrangler pages deploy public --project-name=youbike

正式環境也需要設定 TDX_CLIENT_ID / TDX_CLIENT_SECRET。可在 Cloudflare 後台的專案 Settings → Environment variables 設定，或使用指令：

npx wrangler pages secret put TDX_CLIENT_ID --project-name=youbike
npx wrangler pages secret put TDX_CLIENT_SECRET --project-name=youbike

修改 script.js 或 style.css 後，請同步調高 index.html 裡的 ?v=NN 版本號，避免使用者讀到 CDN 上的舊檔案。

申請 TDX 金鑰

到 tdx.transportdata.tw 註冊免費帳號，在「會員中心」建立 API 應用程式，即可取得 Client ID 與 Client Secret。

致謝

App 圖示：Bicycle icon，作者 Magnific，來源 www.flaticon.com

授權

MIT