畢業學分計算工具開發心得 | side project 的嘗試與迭代

最近用 Chrome Extension 實作了能夠計算長庚大學醫務管理學系的畢業學分工具，計算結果能夠呈現目前總學分、每個畢業門檻是否已經完成，還差哪些科目和領域未完成。

此擴充功能已經測試完畢，並且上線了，想來跟大家分享開發此工具的一些心得。

( 很感謝長庚大學醫管三學妹 Carol 從第一版就協助參與及測試 )

工具連結：https://reurl.cc/qDW4ay

緣起

當初為什麼會想開發此套工具呢？其實一直以來我都有在做一些 side project。只是有次與大學同學聊以前的事時，想到當初我因為誤算學分，通識課超修所以不列入畢業學分，因而差 1 學分就延畢了。我還記得那時我參加新北市電腦商業同業公會，資訊種子培訓計畫的海外參訪，在北京收到大學同學傳訊息跟我說：我差 1 學分延畢，雖然聽到想說：啊不然算了，反正那時已經找到工作了，好像也沒差。不過後來我還是有去上個體育課畢業。

想到這段荒唐的往事，於是我就想到假設每年都會要請學校一千多位學生確認自己有沒有通過畢業門檻，每個人花個 1 分鐘算好了，每年就浪費了那多人的時間，這不是交給電腦算就好了嗎？ 於是我就開始構思要怎麼解決這個問題。

第一個 Prototype

照著 Lean Startup 提的 minimum viable product ( MVP ) 方法，我也不知道我的想法是不是真的有人會想用。於是我就想快速做個小成品，丟到市場上去測試。

一開始我就用了最簡單的方法，我寫了一隻爬蟲去把長庚大學醫管系、通識中心課程爬了下來，把他分類成課程名稱、學分數、類別 ( 必修、選修、通識 )，然後丟到一個頁面上讓使用者勾選，選完後用 ajax post 到後端計算，最後再把結果回傳呈現。

大致上的樣子就長這樣，一開始也就從手機版出發，用 Bootstrap 快速處理版面。然後部署到 Heroku，於是我就把他上線，拿去發在 Dcard 長庚大學版，查探大家的興趣。

網站連結

丟到 Dcard 上，收到的回應有超出我的預期，雖然沒有詳細計算，但觀察一下長庚大學版超過 30 - 40 愛心算是關注跟討論度蠻高的文章，我發佈的文章獲得 50 個愛心、8 則回應，還有收到一位學生來信希望取得原始碼做該系的開發，還有一位學生提供頁面上的回饋及部分計算問題。

於是我想應該蠻值得再開發下去，於是我請身旁朋友操作此 Prototype，獲取一些 UI / UX 上的回饋。收到最多回饋的部分果不其然是：「 要勾選那麼多科目超級麻煩 」。於是我就又開始思考要怎麼做比較好。

工作中突然靈機一動

為了能夠不讓使用者要去勾選那麼多科目，我一直思考有什麼方法可以直接取得使用者修過的學分來做計算。本來還想去攔截長庚大學 APP 的 API，但後來發現學校 APP 好像沒有列出使用者的學分功能。後來才在長庚大學學生學習歷程檔案( E-Portfolio ) 此頁面找到會有所有修過的學分，不過那時一直卡在要怎麼把這些學分取出來。

有天在工作時，使用到之前工程師開發的 Chrome Extension，我們是用來快速顯示出目前所在頁面的簡單資訊。於是突然靈機一動：那我就用 Chrome Extension 擷取課程資料拿來運算就好了（ 後來發現資種學弟很早之前就有用此方法實現 NTUST credit counter )。

開始實作及測試

想到方法後，回家就開始看 Chrome Extension 怎麼開發。主要是參考 2017 iT 邦幫忙鐵人賽 - Chrome Extension 開發與實作系列的文章，簡單描述一下實作方法：

1. 透過 Chrome Extension 先引導使用者到  E-Portfolio 並登入

2. 登入後點擊 Chrome Extension 按鈕，會去 request 每個學期修得學分頁面 ( 學校系統拆成好幾頁 ... ) ，並把課程代碼、學分數取得，再透過 ajax post 此段 json 資料到 API。

3. 利用 Python Flask 建置 API，部署到 Heroku，取得 post 過來的資料，然後去跟用爬蟲爬下來學校的課程代碼、課程分類所建成的 json 格式檔案 ( 用來管理學分的資料庫 )，比對分類及計算後，將資料丟回到前端做呈現。 ( 為什麼要用 Flask 建置 API 呢？單純是因為之前沒用過想試試看哈哈 )

實際工具的操作流程如下：

這次版本的工具確實花了比較多時間開發，但我覺得比第一版方便許多，基本上使用者一鍵就能計算出結果了。後續在維護上也比較省事一點，透過爬蟲定期去抓最新的課程代碼和分類即可，除了有時候學年出現計算邏輯的異動 ( 但通常不大 )。

後續比較重要的是測試計算邏輯有沒有錯誤，這邊花了最多時間，比較可惜的是還沒有建好一個快速測試邏輯的方法，每次有問題重測都有點麻煩，後續要再補上。

總結

此次開發算是我首次有在更新迭代的工具，因此覺得有一點小心得和收穫，總結心得如下：

1. 如果想驗證想法有沒有市場，快速做出 MVP 丟在市場驗證最快。
2. 除了量化的數據，蒐集質化的資料對於開發出最適合的產品也很有幫助
3. 我覺得開發 side project 有趣的是可以嘗試不同的技術來實現想法，像這次 Chrome Extension 和 Flask 建置 API 都是第一次使用。

---

如果喜歡我的文章，想隨時收到最新行銷、技術分享，歡迎按 fb 粉專讚

    或加入 LINE 官方帳號，即時接收最新文章通知