所以我說，我的 YouBike 呢？

超簡單的首頁

首頁上可以看到系統總共追蹤的站點有幾個，而整體來看，累積多少時間沒有車可以借、沒有位可以還

另外，最頂部的表情跟底下的文字會依照全部已追蹤站點的狀態顯示

在首頁上面，這幾個表情符號分別代表：

• 綠色笑臉：全部的站點都有車可以借，有位可以還
• 黃色哭臉：有站點沒有位子可以還了
• 紅色生氣：有站點沒有車可以借

而每個站點也都可以展開顯示近幾個小時的歷史紀錄，還有該站點有多少百分比的時間沒有車可以借或是位可以還

算詳細的站點報告

在首頁點下去「查看更多歷史資料」的按鈕後，會跑出這個頁面：

這個頁面可以查詢最多 5 天內的各小時站點狀態快照還有即時的站點狀態，旁邊有一個小小的狀態條會顯示那個時候的站點狀態

哦對了，每小時快照狀態條的顏色跟首頁的狀態顏色意義一樣，也是黃色是沒位可還，紅色是沒車可借

但是頁面最上面的表情符號顏色意義跟就跟首頁稍稍不一樣了。為了讓別人看這個頁面可以直接知道現在的狀態，各個顏色代表：

• 紅色：已經全部沒車可借或是沒車可還
• 黃色：<5 臺車可借 或是 <3 個還車柱可還
• 綠色：就完全正常，可借可還

可能會改，但目前我認為這樣比較可以一下子就知道有沒有車可以借

怎麼加站點？

啊當然現在寫了一長串好用的功能，你可能會想問你要怎麼把站點加進追蹤清單內

因為目前這個網頁還不太穩定，站點現在採申請制。如果你想要把你家附近的站點或是學校附近的站點加到這個網頁裡面，你可以發一個郵件到 me@wolf-yuan.dev

郵件內容必須包含以下幾個東西：

1. 要加站點的完整站點名稱

   不知道可以看停車柱上面的站點名字，或是上 YouBike 官網查詢。得是完整的站點名稱。 站點名稱得讓我知道的你指的站點到底是哪個，如果還是真的不確定到底叫做什麼，你可以丟地址給我。記得檢查有沒有其他站點撞名哦

2. 一張或是多張 站點沒車 或是 站點滿車然後你沒位子可以還的照片

   如果沒有照片，你可以寫一小段為什麼要加的理由

伺服器與資料庫資源有限（目前是很有限），目前還沒辦法全台的站點都加進去，所以目前得先這樣處理

拉資料的後端（應該算後端

後端採 TypeScript 撰寫，跑在 Cloudflare Workers 上面會從 YouBike 的網頁 API 抓完資料後，放進 Supabase 資料庫

資料類型分成兩種，兩個都用 cron trigger 跑：

• 每分鐘即時資料 * * * * *：抓即時資料，看站點狀態來增加沒車 / 滿車的時數
• 每小時資料快照 0 * * * *：抓資料放站點快照，就這樣

每個小時的快照僅會保存 5 天，但每分鐘的沒車 / 滿車狀態則是累加，無天數限制

顯示資料的前端（網頁

前端用 Astro + TypeScript + TailwindCSS 撰寫，跑在 Cloudflare Workers 上

每個頁面都是用 SSR (Server side rendering)，也就是每個頁面都不需要 client 額外去叫 Supabase 的 API，理論上會讓效能變好很多，特別是在效能超級糟糕的中低階手機上。網頁設計採用跟我個人網站一樣的設計語言

頁面跟頁面之間都用 Astro 的 <ClientRouter /> 串起來，用瀏覽器的 View Transition API 做出頁面跟頁面之間超級流暢的動畫

我很抱歉 Firefox 使用者，Firefox 現在沒有 View Transition API 所以只會看到淡入淡出

YouBike 的伺服器是馬鈴薯做的

另外，吐槽一下 YouBike

後端在抓資料的時候，時不時就會抓到 YouBike 伺服器噴出來的 503，不知道是刻意的還是伺服器後端程式寫太爛，但每次都是在深夜出現

目前推測是 YouBike 為了省錢，在夜晚的時候 scale-down 伺服器或是 DB 的 replica 變少，讓錯誤率提高