Back
Featured image

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

🚑 GPE 小幫手－拯救你我的程式檢定考試 分享自己專案與開發過程

前言

安安，這次來分享我自己近來開發的專案 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 裡面，但是感覺應該還是要直接放在前端比較實在

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

    Imgur

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

    想坐在前端的話就更彈性

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

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

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

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

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

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

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

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

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

Imgur

爬蟲

資訊取得

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

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

內嵌？

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

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

想想還是算惹 :3

題目種類

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

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

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

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

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

Imgur

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

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

這點是稍微比較可惜

推薦度

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

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

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

結語

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

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

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

有問題歡迎留言詢問

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

Written by setsal Lan (小藍) in