個人網站 Personal Website

React、RWD、Git、GitHub Pages

GitHub Repo

這是我的個人網站，上面有我的自我介紹、經歷、技能跟作品集等等，此外也有展示我最新的幾篇部落格文章。

這個網站是使用React建構的靜態網頁，使用Create-React-App從零開始切版，使用gh-pages架設在GitHub Pages上。由於我之前工作是負責後端，所以想寫一個網頁給自己磨鍊前端技術，同時也建立一個屬於我自己的個人網站，到目前都還是會持續更新內容或是新功能！

這個網站也有RWD的設計，針對手機螢幕的尺寸去設計相對應的UI，所以用手機瀏覽這個網站也是沒有問題的！

網站連結

開發歷程

因為當時公司前端同事使用React開發公司產品的UI，因此想說練習用React建立一個我自己的網站，當時還不知道Next.js這個框架，因此使用Create-React-App當作初始專案，在當時還沒有ChatGPT可以問，只能東查查西找找，漸漸地瞭解了React基本的概念並嘗試切版、製作一些我自己的UI Component，在設計RWD和一些動畫時候遇到了比較多問題，但也讓我練習上網找資源、讀文件等能力，這也是我第一次設計RWD的網頁，看到成品之後相當有成就感！

教室借用系統

HTML/CSS/JavaScript、Firebase、RWD

「教室借還系統」是由台南大學諮輔系委託開發的一個網頁應用程式，用來取代系上原本人工紀錄的作業。這個系統主要解決了以下幾個問題：

1. 老師、學生原本詢問或借用教室都要到系辦處理，有了這個線上系統後只需要使用電腦或手機登入就可以快速地查詢、借用，系辦人員亦可透過該系統審核借用請求
2. 系辦人員可以根據日期、教室或其他條件篩選並檢視需要查詢的借用紀錄，比起翻閱紙本更快速方便
3. 系辦人員可限制能夠借用教室的人員，且系統也會限制每個學生能夠借用的最大時數，大幅減少系辦人員人工作業的時間
4. 該系統可直接匯入學生資料(.xlsx檔)，減少每學年人員變動時建立資料的繁複操作

該系統從和業主討論需求、設計操作流程、UI介面到資料庫架構規劃皆是由我自己獨力完成，前端實作由另一位夥伴撰寫，而我則負責後端的API、網頁功能和後期測試、維護、部屬等工作。由於該系統規模較小，所以前端使直接使用純HTML/CSS撰寫，而後端則因學校方並沒有提供架設資料庫的伺服器，因此選擇Firebase平台裡的Firestore當作資料庫，並用JavaScript撰寫API供前端串接。

系辦人員 - 資料管理

系辦人員可透過這些頁面查看、新增、編輯及刪除帳號、教室、課程資料

系辦人員 - 借用查詢

系辦人員可透過這個介面快速篩選、查詢需要的借用紀錄並對其進行操作

老師/學生 - 查詢借用

老師/學生端可在此介面查詢自己借用的紀錄及其審核狀態、歸還狀態

手機版UI設計

手機版的頁面選單及登出按鈕設計在側邊side bar，讓手機版介面更簡潔

開發歷程

在開發這個系統時因為還較缺乏實務經驗，中途經歷過了許多次的專案重構、專案架構的修改。其中最大的改動屬於資料庫讀寫次數的優化，由於Firestore免費額度有每日讀寫次數限制，且由於系統規模不大，因此業主希望能將讀寫次數壓在免費額度內。我花了一個月左右的時間去優化這部分的內容，作了以下調整：

• 首先是在首次登入時將所有帳號、教室、課程等資料資料讀取下來並暫存在本機，後續使用時切換畫面就不需要重複向資料庫抓取資料。
• 再來是針對數量較多的資料加上Lazy Loading，例如隨著使用時間加長會不斷增加的借用紀錄，當系辦人員要查看借用紀錄時，一次只會讀取50筆資料，當要查看更多時才會接著讀取後面50筆。
• 最後是用開發者工具log每一支API使用的資料庫讀寫次數，方便在測試時檢測每一支API消耗的讀寫次數

經過優化後系統已可以負荷每日正常使用，且透過資料庫讀寫次數的追蹤，也可限制短時間內異常大量的讀寫請求，防止被有心人士惡意攻擊的可能。雖然上述的優化其實應該在開發中就應該考量到，但由於當時缺乏實務上的經驗，也對於系統測試沒有概念，因此到了系統上線使用一段時間後才遇到此問題，但也藉由此次機會讓我學習到了許多。

螢幕便條紙 Desktop Note

.NET、C#、MVVM、WPF、Material Design

GitHub Repo

這是一個Windows桌面應用程式，可以在螢幕上的任何地方貼上便條紙，並且讓這些便條紙維持在螢幕的最上方，就算切換視窗也不會被覆蓋過去。會寫這個專案是因為以前在工作的時候，常常事情做一半被打斷去做別的事情，或是有一些事情要記，某天在工作上接觸到WPF後就突發奇想可以寫一個便條紙應用程式。

於是我就開始用閒暇時間開發這個小專案，我決定用.NET WPF Application來開發，UI風格遵循Material Design的設計原則，配色部分就使用常見的便條紙的黃色。整個專案都是用XAML來撰寫前端介面、用C#來撰寫程式功能，雖然這個專案規模很小，但我還是遵循MVVM的架構去開發，當作是給自己練習MVVM架構的機會。

使用畫面

左圖為新增、編輯便條紙內容的主視窗( 編輯視窗因為開發後期較沒時間因此還沒進行美化 )，右圖為便條紙貼在螢幕上的效果，可以控制其大小、透明度、是否固定等參數。

當隱藏主視窗時，程式會進入背景執行，可以雙擊工具列中便條紙的icon叫出主視窗

開發歷程

這個專案因為規模不大，開發時程很短，後續也因為工作變得較忙碌而沒時間繼續開發這個專案，目前只能算是是個練習小品。一開始卡比較久的問題是要怎麼讓便條紙視窗保持在畫面最上方而不被其他視窗蓋過，接下來是要能夠讓應用程式在背景執行，這些有的是WPF原生支持的功能，有的要用套件達成，這些都考驗對.NET跟WPF的熟悉度。

其實我對這個專案還有很多想法，首先當然是要完成介面的美化，讓所有視窗跟按鈕都是統一風格跟配色，在功能方面，我想開發共用、協作便條紙的功能，例如有一個團隊有共同的備忘事項，可以由leader新增便條紙，其他成員就會看到便條紙並可以把它們貼在螢幕上，而且便條紙可以設定成已完成或是已過期等狀態，增加這個程式的實用性。希望未來有空閒時間時還可以繼續開發這個有趣的小專案！