[分享] GPE Helper - 程式檢定考小幫手

setsal Lan (小藍) -

前言

安安，這次來分享我自己近來開發的專案 GPE Helper 的一些緣由與心得(還有抱怨XD)

跟上一篇 Fake-phone-screen 一樣的

會先從緣由與功能開始介紹，最後再簡短講一些開發的心得~

緣起

由於交大碩士畢業需要通過程式能力的檢定測驗，例如全台灣的 CPE，或是由系上主辦的 GPE 考試

也有其他相關考試或抵免方法, 通過門檻則看考試難易進行調整，例如 CPE 要 3 題以上，GPE 則 2.4 題(240分), 具體門檻可以看系上首頁的修業規定

GPE 有粉專可以參考 [https://www.facebook.com/nctupe]

我當初大學系上其實也有類似的門檻，但那時候我透過 ITSA 桂冠賽去底免惹，但交大好像不承認該項比賽, 所以研所我只好又再來考一次 GPE (CPE 開的場次比較少，名額也是，所以蠻多人會來考系上的 GPE 檢定)

但競技程式這種東西久了沒碰其實頗容易生疏，加上 GPE 考試有時候又很微妙

競程每個人看待的角度不同，就不說太多了，不過我個人真的不是很喜歡競程XD

說遠了 最主要問題我覺得是以下兩點

  1. 題型老舊和太多無用的英文敘述

    有時候我真的不懂題目出題者到底是在考題還是在考英文 配上有時候題目很爛的狀況下, 只是個檢定考我真的🥴...

  2. GPE 練習系統對於資訊彙整程度不佳, 回應速度也慢

    這點其實不怪系統，畢竟早年開發用到現在，主要就是一些 UI/UX 的體驗不佳

    像是查看歷屆題型、分類、Judge 結果跳轉刷新等

    這點其實對於想要練習的人來說 頗不方便的

抱怨歸抱怨，但有些事情也強求不來，時間債、技術債、角度，也是很辛苦ㄉ

既然強求不來，那就自己做做看吧🙂

開發目的 ＆ 目標

目的
主要是讓自己能夠有效率練習 GPE 檢定考試，以通過交大(陽交大)碩士畢業的一項門檻

目標
寫一個簡潔的網頁配合爬蟲抓下來的資料讓 User 體驗變好練習順利

GPE Helper 介紹

🚑 GPE 小幫手－拯救你我的程式檢定考試

Made 💖 with

  1. ReactJS
    • UI: Semantic UI React
  2. Python
    • Beautiful Soup Crawler
  3. Integration of

Feature

  • 2018~今每次考試歷史出題一覽
  • 2019~今所有題目一覽
    • 搜尋功能
    • AC 率、OnSite 次數、題目 Access 次數等欄位排序
    • 我的最愛題目
    • 不負責任題目推薦度亂算
  • 題目分類

運作畫面

實際運作畫面

通過 GPE 的心得

可以參考我另一篇考 GPE 的心得

[心得] 交大 GPE 程式檢定考考試心得
個人 GPE 程式檢定考試心得 (*´▽`*)
型號藍の小屋setsal Lan (小藍)

簡短開發心得

前端

前端基本上主要以簡潔去做呈現，當初花比較多的時間是在資料與表格設計呈現上的處理

另外是因為有了稍微複雜一點的細項資料，所以也嘗試了更多 React Hook 的寫法

對比於以上一個界面設計為主的專案 Fake-phone-screen 學到了更多 Hook、Reducer 的配合

界面的話就盡量以簡潔、有條不紊、明朗配合 UI Framework 去做設計

說說 Semantic-UI

Semantic UI React 是我很久以前就用慣的一款 UI Framework

蠻喜歡他對於前端元件上的設計，但在這次開發中都還是遇到了一些問題點

  1. Override 原始配色還是蠻麻煩的

  2. Semantic UI React 官網基本上都還是 class 的寫法

    而自己想要全採 React hook 的寫法要多花點心思且自己有踩到一些奇怪的 bug 在表格排序的時候

  3. Semantic UI 本身更新的幅度也不算太快，有點小擔心QQ

我的最愛

因為沒有後端，所以就透過瀏覽器的緩存實現啦

缺點是換裝置或設備紀錄會被清掉，不過至少可以直接在網頁上紀錄題目了🥰

沒實現的點子

就...沒實現的點子

  1. 隨機出題

    熱血猜題

  2. 直接點擊題目然後配合一個你自選的模板下載

    這個其實有做在爬蟲的一隻 script genTemplate.py 裡面，但是感覺應該還是要直接放在前端比較實在

    目的就看下面這張圖吧，雖然可能只是我自己想要的功能> <

    主要是方便 Git 和自己整理追蹤啦

    想坐在前端的話就更彈性

    例如可以設計成一個選單，根據你習慣的語言選擇要 gen 成哪種副檔名(.c .cpp .java .py.. 雖然練習系統不支援 python XD )

    然後還有啊 可以自定義自己喜歡的註解範例

    例如在瀏覽器先定義好一個類似以下的這個

    /* 
    Problem: {problem_name}, ACs: {problem_acs}
    Link: {problem_link}
*/

    直接讓自己看的更順眼，然後點一點直接生成然後下載，方便至極

    但最後覺得太麻煩沒時間就算惹orz

當初從 Material Design 看到，覺得很好看就搬過來惹

會去抓 Github User Public 的資料然後做呈現

也花了一番功夫做這個有趣的東西XD

爬蟲

資訊取得

因為主要是做資訊統合呈現的網站，後端或 Judge 的部份決定還是依賴於本身的 GPE 網站

這邊主要是以定期固定的爬蟲資料做一個更新，另一方面也減少網站本身的負擔

內嵌？

當初有嘗試想透過內嵌等方式來對 GPE 網站直接做一個題目連結，而不是僅僅的連結

但是目前 GPE 網站限校內連線，內嵌相關諸如 iframe 隨著近期瀏覽器資安的限制

想想還是算惹 :3

題目種類

這個其實是基本資料都快設計完成後才想到

看看那個又臭又長的題目，有時候我們想快速練習分類會許要題目相關的種類(e.g. GCD, DP, Tree.etc)

但學校的 GPE 網站沒有這類資訊怎麼辦？

翻了一下 google，有人做相關題目的種類比較多的是在 https://zerojudge.tw/，所以又再額外撰寫了 zero judge 的爬蟲, 配合 GPE 原本的資料去做種類的新增

最後設計出來的像是下圖這樣

不過由於這些分類也都好像是網路上解題的人後續標註上去的

所以有些題目要是沒有在 zero judge 上搜到或分類，也會沒有相關的分類

這點是稍微比較可惜

推薦度

這個其實有點亂算XD 但是想要一個酷星星設計推薦練習哪些題目的感覺

所以就拿了一些參考值(AC率啦、歷史出題次數等)來做中位數的加權平均

就給個參考囉 好一點應該是要整理出一套公式或用某種演算法才對QQ

結語

一口氣打了好多，總之希望能幫助到要通過系上畢業門檻的各位

如果覺得這專案很有趣或有小小幫助到你，也歡迎給我個 ⭐ 支持

setsal/GPE-Helper
🚑 GPE 小幫手－拯救你我的程式檢定考試. Contribute to setsal/GPE-Helper development by creating an account on GitHub.
GitHubsetsal

有問題歡迎留言詢問

最後 感謝看到這裡的你 有機會我們下篇文章再見 :)