Nov 28, 2022
鐵人賽排行榜 製作小記 2022 版本
非官方鐵人賽排行榜，快速瀏覽有興趣的主題
往年靠著 qrtt1 大大無私的分享，有現成的鐵人賽排行榜可以用。查看鐵人賽好文章的速度增加了不少。今年好像沒有鐵人賽排行榜可以用，於是我就自己做了一個。
如果想要快速查看成品不想看過程的可以直接點 >>傳送門<< 觀看 2022 鐵人賽排行榜。
因為最近 Heroku 宣布改掉免費方案。趁這個機會就比較了一下 fly.io 與 render 這兩家一樣提供全託管服務 PAAS 的廠商，看看他們的收費方式與開發流程順不順。
以前的排行榜
2019–2020 年，用的是 gist 使用 markdown 格式儲存。好處是可以不斷地更新歷史記錄，而且不需要開一個資料庫。
2021 年改版成新版，用 S3 來存放雲端靜態檔案。比起舊版，介面改變。但這樣的方式還是要吃點流量的費用，因為 github gist 的流量完全免費，自架靜態網站在 S3 不貴，但還是需要花點小錢。
加上 Gist 有記錄歷史的功能，相比之下我覺得採用 Gist 來儲存優一點。
2022 新版排行榜製作
之前的版本很夠用了，很可惜今年好像沒有，那就自己來做一個吧！排行榜大致上分為三個部分要製作。
- 爬蟲 — 把各個參賽者的資料爬下來，才知道追蹤數和點閱率多高嘛！
- 後端 — 這部分用來儲存爬蟲爬下來的資料。
- 前端 — 顯示排行榜資料。
後端我使用 Python Flask 佈署在 Fly.io 上面，Fly.io 的價格方案有點複雜。似乎只有內建一個 app 可以免費，並且會開啟一個 build server。需要讓我花許多心力了解他的收費方案。
前端使用 React.js 的 MUI — MUI 將 React.js 和 Material UI 整合在一起。MUI — Core 是開源的可以自由取用，如果需要更進階的方案也可以使用 premium (MUI-X)版本的元件，功能更強大。免費版就很夠用，API 設計的看起來也滿漂亮。官網上有許多範例可以參考練習，十分適合拿來練手。
功能介紹
2022 版的鐵人賽排行榜 外觀上一貫樸素，能看到自己想看的文章是最重要的事情，想看比較漂亮排行的直接參照 IT 邦的官網即可。未來改版考慮改用更漂亮的版型，讓人感覺在看文件一樣。
跟以前的改變是使用了 React.js 來製作 SPA，加入了排序、過濾、分頁等等的基本功能，讓人更容易找到自己想要的文章。
預設以瀏覽數排序：
基本的分頁功能
用各欄位排序功能
搜尋作者名稱、文章標題
目前覺得堪用，但不美觀，如果讀者們有想使用的功能再跟我講一下。
網站穩定度
網站穩定度前端應該是沒問題，後端的話因為架在 fly.io 上面，要測試看看它的計費方案是如何運作的。也許超過用量直接扣錢，也許像 Heroku 一樣，用量一到直接讓你網站癱瘓😂
MongoDB 的免費方案倒是讓我很放心，DB 方面的 Query 次數應是綽綽有餘。
心得
實作這興趣型專案出發點是想解決自己的問題，快速看到自己的文章。以前有熱心大大做，今年沒有那就自己跳下來做吧。也許可以幫助到跟我有同樣困擾的人。
用了一些自己不是太熟悉的技術，這樣也好，有點像以前在新創公司開發小專案的一些熱血感。
感謝觀看到這邊的你，有任何建議歡迎提出 😀
