FRC Taiwan 2025 網站開發故事

前言

早安你好我是 YD，今年 FRC Taiwan 2025 官網的開發者，現任中和高中高三學生。在這篇心得文中我會完整的從頭分享整個開發經過，用故事的敘述手法帶你了解網頁的架構和有趣的事。

過程

加入 FRC 到成為組長

我是在高一下學期加入中和高中 FRC 隊伍的，起因是班上同學的邀約，希望我能協助寫程式。在參與各校的培訓後漸漸了解機器人的架構，也有幸能和幾位夥伴一起撰寫比賽的程式碼，並擔任組長的重責大任。

開發校內的場地管理系統

有參與過 FRC 比賽的人應該都對課後留校練習不陌生，畢竟不論是機構、程式都需要花費大量時間的製作與撰寫，同時還需要整合測試等等。過往留校的申請都是採用紙本申請表，需要由各組長或隊長填寫後交由指導老師簽名才可以練習，為了簡化這個流程並提升審核速度，老師使用 Google Script 設計了一個報名表系統供大家使用。

然而老師的時間有限，在網站優化或功能開發上無法下太多工夫，因此整體使用者體驗並不是很好。在某天我放學回家的公車上，隊友們向老師提起網站載入速度過慢的問題，老師竟然在群組標註我希望我能協助解決，而我一時衝動地就答應下來了。現在回想起來也不知道老師當時是開玩笑的還是真的希望我處理，而答應他的我也只有開發靜態網站的經驗，就在這樣的背景下走上了網頁開發的不歸路。

給自己的挑戰 - 接下 FRC 官方網站

不確定是否是因為開發過校內的管理系統，總之在某天時老師就突然問我有沒有意願開發 2025 的官方網站。當時的我天真的以為官方網站應該不會太難，就又把自己推進開發網站的火坑中，開啟了爆肝工程師日常(誤)。

事後回想起這段往事都還是覺得非常的不可思議，機會就是這樣突然的出現，如果當時我有過多的考慮，機會也許就這樣流失了，就這樣失去了學習的機會。

多國語系的架構

第一個迎接我的就是多國語言的支援。

在過去我都是開發個人的 Side Projects 網站，從來沒有做過動態選染或是翻譯的功能，所以一聽到這個需求完全毫無頭緒，再上網查了許多資料都失敗後就採用了許多開發者都曾經做過的事，使用工人智慧「暴力破解」所有頁面翻譯，幸好只需要支援中英雙語頁面數量還不至於太大，不到半小時就完成了。

當然，故事不會就這樣結束，不然我就不會寫成一個單元了。

隨著頁面一天天的增加，以及不斷的調整頁面布局，越來越常發生忘記調整另一個語言的頁面，導致中英文頁面不同步的問題，逼得我必須正視暴力解帶來的問題。在決定改用 i18n 架構後就是尋找套件的環節，由於 Next.js 版本升級的問題，許多早期的多國語系翻譯套件都無法正常運作，東翻西找了約莫一個禮拜後才在數學課上發現了 next-intl 這個拯救我生命的套件。雖然他在設計上我沒有到很喜歡，但秉持著能動就是好東西的精神上，最後就把整個網站更新到這個架構上。

小小抱怨一下，結果最後英文版網站根本沒有幾個人用。發現外國人都看中文版網站後，老師還是在中文版中添加了英文，失去了 i18n 的價值。

部落格的建立與崩潰

作為官方網站，最重要的事情當是公告事項。傳統上來說可以用文件網站來做，但由於我有開發部落格的經驗，因此就直接移植到這個專案上，當作最新公告、場地資訊等頁面的架構。

由於我手上管理的網站數量不少，為了方便我同步更新維護，因此我就在某次更新將文章載入器改為自己開源的部落格載入器，改完在本地開發伺服器測試完就洗洗睡了，忘記在正式部署後也確認。沒想到隔天就接到老師通知網站崩掉了，情急之下直接在上課時間排查問題，並用中午時間把問題處理掉，才避免更多人看到錯誤畫面。

影片競賽載入的優化

後來還多了影片競賽的環節，我的第六感告訴我這會很多使用，果不其然正式上線後湧入了上千人次的瀏覽，大大考驗網站的負載能力。影片資料是使用 Youtube API 從 Google 伺服器上直接抓的，但為了預防用量爆掉我特別設計一個定時腳本，由腳本執行 API 並存入資料庫，再從前端讀取資料庫的數據。

除此之外我還在上線之後的幾天進行一個優化，調整數據的結構和資料庫安全規則，讓影片競賽的資料不用經過網站後端，直接從前端讀取加快載入速度。如果有實際使用過的人應該會非常有感，測試下來從原先的 2 秒載入時間壓縮至不到 1 秒鐘即可完成。

與時間賽跑，搶救錯誤

隨著影片競賽和比賽日期的接近，每天都有數百人瀏覽網站，但由於事前的測試並不是做得很足夠，加上許多功能都是開發完當天馬上上線，並沒有太多測試的機會，因此常常會遇到一些錯誤。其中印象最深刻的還是部落格崩潰的那次，由於幾乎影響了所有頁面，還迫使我在上課時間去嘗試修復，算是蠻特別的體驗。除此之外還有幾次檔案無法下載，瀏覽人數過高導致超出伺服器負載，深色模式配色錯誤導致對比度不足等問題，也都是迫切的需要當天處理掉。

心得

能作為 FRC Taiwan 2025 官網開發者我很開心

這是我第一次維護上萬人次使用的大型網站，對於協作、穩定性測試等都是考驗，因此也讓我從中成長許多。雖然說這個網站不是完美的，其中也還留有一些小錯誤，但整體來說算是圓滿完成了。

身為開發者的我想在這邊和大家分享幾張圖片，給大家看看網站的統計數據。

另外如果對網頁開發感興趣的人也可以看看由我舉辦的網頁開發讀書會。