主題

【程式作品】嘉義大學選課輔助器

魔化鬼鬼 | 2021-12-18 15:08:29 | 巴幣 4218 | 人氣 616

  • 前言
        原本嘉義大學選課只有給你一大串的課程,課程類型要一直回上一個來修改,課程上面有所有需要知道的內容,雖然內容十分充足,但是十分的不方便,衝堂的課也要自己看,旁邊也沒有預覽課表。


        在坐火車往返嘉義高雄的期間,斷斷續續看了一些 React.js 框架的影片教學後(Tech with Tim),我嘗試做出了一個簡單的 todo-list,認識了 React 中 state tree 的概念,便覺得原來 js 在有了框架中是這麼的強大,原來前端沒有我想得這麼麻煩,程式碼相比於 Jquery 乾淨太多了。在腦袋中思考一下整體 state tree 後就開始製作這個專案了。

  • 介紹
        相比於原本的選課系統,這個網頁提供了以下輔助
    • 衝堂課程鎖定
    • 課表圖表化預覽
    • 更簡潔現代的風格
    • 更方便的搜尋和篩選
    • 畫面的動態更新
    • 計算已選課程的學分數



  • 後端
        後端我是將之前開發「嘉義大學課表產生器」的 API 新增一個端口的,依然是 python flask restful。

        不得不說,全校課程查詢這一塊我觀察了很久,因為這個選單只有給四個大方向搜尋「依關鍵字查詢」「依類別查詢」「依校區節次查詢」「依系所查詢」,首先依關鍵字和依系所就先排除,因為一個不知道關鍵字,一個抓不到沒有系所的(軍訓之類的)。接著依類別雖然有幾乎所有的課程,但是每個分類點進去的 form 又不太一樣,這會導致撰寫爬蟲很麻煩。

        最後是選擇了依校區節次查詢,缺點是每更新一次資料就要花費 3~5 分鐘,因為要送出「節數 * 星期 * 校區」個 requests,且學校的輸出的結果頁面還要等他渲染個一兩秒,然後我又不想給學校造成太大的負擔,所以沒有選擇 multithread,不過由於是 3~5 分鐘我覺得是可以接受的,畢竟也沒有需要很常更新。未來可能會用個 github action 來定時更新資料。

  • 前端
        這次前端我是使用 React.js 框架來完成的,之所以想學 react 因為看到外國前端設計師影片看他們很常使用 react,所以我就想說也來玩看看,也算是大概接觸一下前端三本柱之一看看。

        我覺得 React 的好處是畫面的更新是 based on 元件內的狀態,只要一修改了那個狀態,有關那個狀態的元件都會被重新渲染,而且 react 內部的 diff 演算法也會去偵測哪些頁面內容沒修改,省去不必要的重新渲染。

        CSS 的部分就是使用 bootstrap 以及「嘉義大學課表產生器」的部分 CSS。Icon 一樣是我自己用小畫家隨便畫的 XD

創作回應

更多創作