今年 vs 去年技術與工具對比 - 以北大明星賽投票網站總結

David / 2023-04-16

最近北大明星賽的投票網站剛上線，正好想到距離上次明星賽也是剛好一年了。於是心血來潮想說利用這個今年的投票網站來總結及對比一下現在跟去年的我增進了什麼技術以及新用了什麼工具。

框架升級

去年的投票網站是單純的 client side app 而已，沒有 server side render 的結果就是同學們在分享投票頁面的時候永遠只會在社群軟體的預覽頁面看到我在 index.html 裡面所下的網站標題以及簡介，就算我在程式裡有用 react helment 去動態更改標題以及簡介也是一樣。

今年升級到 next.js 後讓每個頁面都可以定義自己的標題以及簡介，並在 server side pre-render 出對應的資訊 ，希望可以讓同學們在分享頁面時更清楚這個頁面到底是哪一頁，也讓每位參賽同學都可以更方便的分享自己的投票頁面（在下面討論畫面時會提到）。

程式部署

去年因為懂的工具不多，每次改 code 之後都要在自己的電腦上 build 完，並把打包過後的整包 code deploy 到 firebase hositing 上，做久了其實還是有點煩人。但現在知道了其實一堆 PaaS 可以很方便的透過與 git provider 的 webhook 將最新的程式碼 build 好並部署到線上環境。

而且也因為新學到了這個觀念，讓我接著又去補足了關於 cicd 的很多知識，從原本什麼都不懂到現在能夠自己寫出 gitlab、github 的 yaml 檔。

程式部署這塊還有另一個開發時的重點 - 測試，去年因為沒有接觸過真正的的開發模式只靠著一個資料庫就走過了開發、測試以及正式時期，以至於去年花了很多心力在新增資料、刪除資料的無限循環裡。但今年多了這塊的知識後把環境區分好讓自己也是輕鬆了不少。

資料取得

權限統一

兩次網站的資料都是存在 firebase 的 firestore 裡，而資料的取得方式因為去年那時懶得重新開發一個後端，於是便在 client side 直接使用 firstore sdk 去跟資料庫要資料，而今年受惠於 next js 的架構以及 api routing 讓我可以很方便的在同一個 codebase 裡開發後端 api。

這樣做最好的優勢我覺得就是權限更方便管理、資料更安全，因為與資料庫的溝通統一在後端由在 google 所註冊的 service account 來進行，這樣就只要把權限開給一個 service account ，其餘皆關閉，不會因為要開權限給使用者設計很多規則。

流量費用

這次使用 Vercel 作為 hosting 的平台，這帶來另一個好處 - 『無痛使用 Vercel 的 edge-network caching』。去年在投票結束後其實還有另一筆衍生的費用：靜態資源（尤其是參加同學的照片）的流量費用，原因是因為那時候還不懂的 cache 的運作方式，網站上的靜態資源沒有做 cache，每次使用者其實都是直接跟 orgin server 拿資料，以至於被收了這筆流量費用。而今年則藉著 Vercel 提供的 caching 服務成功省了一筆可觀的流量費。

UX 提升

分享功能

去年在做畫面的時候沒有特別讓每個參賽者可以有自己的專屬頁面，這樣就變成要投給他的其他同學都要到他們所屬的分區尋找到他要投票的人，雖然有一個搜尋功能，但還是有點不方便。

今年就有特別考慮到這個情境，在設計路由時多開一個參賽者的獨立頁面，並搭配 server side render 帶來的 seo 改善，讓分享投票頁面這件事的使用者體驗變得更好更直覺。

取消投票

去年因為時程較趕沒有實作這個功能，但其實對於使用者來說取消投票這件事好像蠻重要的，因此今年也有把取消功能加上，期待可以更好的提升使用者體驗（雖然現在從 GA 來看好像沒什麼人有用🥲）。

結論

以上就是今年的投票網站中幾個我覺得比較值得一提的改善項目，做一個簡單的總結，並期許自己可以持續學習，持續進步！