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
