Find Courses More Easily
用 R 語言架設選課網站提升體驗！
我用 R Shiny 架的選課網站。
你也可以在我新建的 medium publication 上讀到這篇文章。
1 Introduction
這篇文章共分三個部分，分別是痛點與需求發掘、網站開發、成品描述，希望能在短短的篇幅中寫清楚這三件事情。
我自己就是個重度的課程網站使用者。每個新學期選課前都是我最快樂的時光，我會打開台大課程網，看完那個學期得所有課程。實際課程的筆數大概在一萬兩千到三千之間，扣掉重複的共同必修像是國文課或是語言課，還剔除每個系所幾乎都有的專題，剩下的課程資訊量還是很大很大，我把這個過程當成探索自己以及探索台大的方式，也在這樣的過程中找到職業生涯的其他可能。
因為用了課程網四年，心理也開始許願能夠增加更多功能，朋友聊天時也常說有時候都找不到有興趣的課程。後來我開始寫程式，發現自己也有能力實現想像中的功能，所以我想說那我不要等了，一個便當吃不夠可以吃兩個，網站不夠好自己也來寫一個。最近朋友的團隊開始賣咖啡，有興趣可以參考一下連結，我很喜歡他們的標語：「我們想照顧你的時間，讓你好好照顧生活」，這也是我們寫這個課程網想做的事情。
接下來我會依序敘述我的團隊怎麼想像這個選課網站的未來模樣。我們從痛點發掘開使並進一步探詢潛在需求，找到問題後進行網站開發的流程，努力將痛點映射到產品的實際功能，最後則會描述我們架設的這個選課網能帶給使用者什麼好處，又該如何使用它。
2 Find the Pain Points and Potential Needs
我們尋找痛點的方法並不嚴謹，主要透過朋友之間的聊天了解現有課程網問題所在，也有請朋友實際使用台大課程網給我們看，以下是整理朋友曾經抱怨過的情境 ，並依序分類如下：
- 內容面相: 「我想找 R 語言相關的課，但搜尋課名找不到啊」
- 過濾面相: 「我扣掉必修只剩周四下午跟周五早上有空，但不能只選這兩個時段的課」
- 版面面相: 「點開課程詳細內容就彈出一個視窗有點討厭」
- 使用者經驗面向: 「課程網用沒多久就被登出好煩喔」
- 視覺面向: 「我覺得課程網有點老舊」
將這些情境轉化成實際的需求：
- 內容面相: 我要更強大的搜尋功能
- 過濾面相: 我要更強大的過濾功能
- 版面面相: 我不希望選課還被彈出視窗打擾
- 使用者經驗面向: 我希望能夠穩定的選課
- 視覺面向: 我希望看到舒服的版面
最後將這些需求對應到待開發的功能：
- 內容面相: 增加搜尋功能的搜索資訊範圍
- 過濾面相: 提升過濾功能的彈性
- 版面面相: 設計較不打擾使用者的版面
- 使用者經驗面向: 這塊因為人數與流量限制，非官方尚無法介入
- 視覺面向: 以使用者使用習慣出發，排版盡量跟上時代
在最開始的痛點中，我們優先針對「找不到想找的課」、「無法過濾想要的課程條件」開發功能，並盡可能的在技術限制之下也滿足其他需求，以下則是開發過程的描述，不會涉及太多技術細節，請放心！
3 Product Development
3.1 Break Down the Workflow
開發過程共分為四個階段，分別是網路爬蟲、資料清理、網站開發、網站部署。
3.2 Web Crawling
台大課程網的結構主要分成兩個部分，第一個是搜尋課程的頁面，第二個是課程的詳細資訊。其他還有比較細部的分頁或是外連連結，舉例來說，搜尋頁面就有分成快速查詢、共同必修查詢、體育軍訓查詢、通識查詢等等分頁，但其實核心的資料庫還是同一個。對使用者來說，這些分頁都是幫助自己更好的找到課程，因為通識或是軍訓或是共同必修其實都是一種標籤，實際上在哪個分頁找到課程，就等同於用什麼標籤找到課程，因此我們最後開發的網站並沒有分頁，希望透過增加的搜尋與過濾功能讓同學找到想上的課。
Figure 3.1: 搜尋課程的頁面
Figure 3.2: 課程詳細資訊
我們用 rvest 抓下了課程索引、教師資訊、課程詳細資訊，因為技術上沒有太大的難度，就不一一細述，詳細的程式碼放在 Github 上，裡面 clean 開頭的檔案就是了。
爬蟲過程中有幾個比較重要的點，像是觀察網址規律以及決定爬蟲網址設定，一開始並沒有打算抓課程索引，想要直接抓課程詳細資訊。在爬課程詳細資訊的時候也發現網址結構是由系所跟課號所組成，但後來發現網址結構有出現難以理解的不規律，所以後來決定從課程搜尋頁面抓取連結，這樣爬會最完整。
另外教師資訊需要解決登入問題，這部分我有使用到 jsonlite 裡面的 GET 函數，主要是用來設定登入時的 cookie。set cookies 部分要填寫「登入台大課程網的帳號密碼」的cookies內容，若不知道怎麼看 cookies 位置，可以使用 chorme 瀏覽器，在登入台大課程往之後按右鍵檢查，接下來會跑出一個頁面 (google chrome developer)，裡面可以看到原始碼。打開後找Application的分頁，點開裡面左邊 Storage ，細項當中的 Cookies 裡面就有了，另外也提醒一下過一段時間要更新裡面內容，因為 cookies 應該是會更新或者失效，這部分有請高手指點，我們團隊沒有人會寫前端所以只能靠 Google 。
Figure 3.3: 用黃色遮住的就是 cookies 位置
3.3 Data Tidying, Joining , and Cleansing
抓下資訊後主要有兩件事情要做，分別是資料整理與合併、資料清理兩個部分。這部分雖然無趣卻是不可或缺，並且跟最後呈現出的結果有很大關係。
就資料整理與合併而言，因為課程網重點在於讓同學可以找到有興趣的課，並進一步希望讓同學可以探索未知的課程，前面的需求最為基本，所以很大的重點是搜尋。那麼，搜尋結果應該也是先顯示課程列表就跟現有的一樣，同學有興趣再點進去。
「讓同學點進去這件事情」，背後的資料長相有兩個可能，第一種做法是所有資訊都 join 一起所以其實有一張巨型 table ，點特定課程的時候就告訴 table 我要 filter 那個課程，然後 select course/schedule information 的欄位。(這邊的英文主要來自資料庫管理的授課觀念與語法)
第二種做法則是分開資訊到兩張 table，看使用者在哪個搜尋框搜尋，就去那張 table 撈資料，但我們討論後，認為第二種做法會遇到一個問題，譬如說有個人想找任何有提到統計的課，因此系統撈出課程名稱涵蓋「統計」，另外再去詳細的課程內容比對是否包含「統計」，發現 ID = 11 的詳細的課程內容有包含統計學，這樣還是要串接，那這樣不如一開始就串好，也因此最後我們先將所有資料串成一張巨型 table，最後再依照頁面決定要呈現什麼欄位。
就資料清理而言，必須時時刻刻想到後面該怎麼實作最後的功能，因此花上最多時間。
Figure 3.4: 時間篩選功能
以上圖為例，我們希望增進過濾功能，讓同學可以過濾出「週五上午或週三下午」的課程，因此資料欄位的設計就非常重要，舉例而言有堂課是周四的二三四節正課，另外加上周五的五六節助教課，原始的格式是「四2,3,4(管二104)五5,6(管二104)」，透過強大的 stringr 套件，最後我們增加了新欄位，內容為「四2四3四4五5五6」，如此一來，在過濾條件篩選時選擇「四2」便可以找到這堂課了。不過截圖當中的程式碼不是最新版本，因為沒有考慮到週六的課程還有晚上也就是 A,B,C 三個時段的課，後來有再增補。
Figure 3.5: 開發時整理的待處理欄位
如上圖所示，在開發時整理了一些待處理欄位，再依照資料的不同內容進行測試，有時候在清理的過程中覺得自己搞定一切了，但後來才發現還有缺漏的情境，譬如說前面在切時間過濾功能，就有出現「四2四3四4一105」的結果，去追查才發現原來那堂課在管一105上課，後來過濾掉才解決了這個問題。
3.4 Shiny Building
因為底下會展示這個網站，所以這邊就不花太多篇幅敘述。如果想知道什麼是 Shiny，可以看我先前的文章簡介。
我們的 Shiny APP 原型參考由 Jenny Listman 開發的美國的議會女性參選地圖，功能上則非常仰賴 datatable。
3.5 Website Deploying
因為 Shiny 的免費帳戶只提供 25 個小時/月的時數，所以我們選擇將這個網站部署到 heroku APP，它提供了至少 450個小時/月的免費時數，加上信用卡認證後可以達到 1000個小時/月。
整個網站開發最為困難的流程就是部署到 heroku 網站上，因為 heroku 沒有原生支援 R 語言，而我們又對前端一竅不通，連 Git 都不太會用，所已不斷卡關。
網路上可以找到好心人士 Chris Stefano 開發的 R 語言版本，請注意 R 本身的版本要在 3.4.4 以下才能成功部署，詳細流程可以參考這個教學，如果你懶得看，可以直接複製這個 repo，直接修改裡面的 code 就可以了！
4 Website Demo
這個網站有三個分頁，第一個是課程的搜尋頁面，第二個則是課程的詳細頁面，第三個則是開發團隊的資訊與廣告版面。就課程的搜尋頁面而言，又分為上半部的搜尋與下半部的資料表格呈現。
Figure 4.1: 課程搜尋頁面
如上圖所示，上面的按鈕分為選修/必修以加選方式，這邊的按鈕預設全選，使用英文則是因為編碼問題，暫時無法解決中文顯示的問題。底下的欄位可以過濾學分數與授課對象還有上課時間，裡面的選項都有 “All”，選擇後就會包含所有課程了，我個人最喜歡的功能是用上課時間過濾課程！
右下角有一個 search bar，欄位內容為全站搜尋，你可以搜尋「R 語言」看看，搜尋結果會包含課程名稱與課程內容喔！這個欄位也支援正規表達式，所以你可以搜尋「R 語言| python」看看，「|」符號代表「或」。另外，底下的資料表格部分，在每個欄位上面也都有搜尋欄位，基本上都可以打字搜尋。
課程資料表其實跟台大課程網的頁面差不多，但能夠實現更好的搜尋與過濾。另外也很感謝 ccClub 的朋友告訴我他們做的課程網站是如何做到串接「加入選課名單功能」的，之前不知道怎麼做，謝謝他們不藏私，知道作法後也就把這個功能和串接 ntucourse 版上評價搜尋的功能加進表格，一定要 credit to ccClub。
Figure 4.2: 課程詳細頁面
在課程搜尋的結果之中，如果點擊 ID 欄位，就會跳轉至課程詳細資訊的分頁，這個分頁可以看到詳細的課程資訊，因為欄位比較多，所以有分頁。
Figure 4.3: 個人資訊頁面
最後一個分頁是團隊相關的資訊，裡面附上了這篇文章還有我部落格的連結，希望大家可以幫我衝 medium 的點閱跟追蹤。在做這個分頁的時候，也想到很多比較不相關的事情，譬如說架設一個廣告欄位讓廠商打廣告，或是貼銀行帳戶讓喜歡這個服務的人可以斗內增進網站品質，其他還有想到開放資料的精神、媒體的商業模式、網站開發的流程，還有很多很多。
5 Conclusion
5.1 Additional work for future and some thoughts
目前正在努力做的事情是為課程貼標籤 e.g. 統計, ML, R語言等，但卡在貼的這個標籤要怎麼下，是要電腦自動抓譬如 tf-idf 後的關鍵字，或者用 structure topic modeling 各個主題的前幾名詞彙，還是直接去外面匯入某些技能或領域的詞庫再來比對比較好。
當然，還有更天馬行空的想法，像是統計大家使用時的搜尋資料，再架一個 real-time 的儀錶板進行熱門搜尋詞彙排序，就像最近看的好劇 - 請輸入搜索詞www 裡面的劇情，感覺就很棒。這當中也有些自我對話與思考，譬如說我認為很重要的功能像是進階或複雜版的過濾不受青睞，又或者是我不想只看這個學期的課，想看老師還開過什麼課的歷史紀錄，但對其他輕度使用者來說，這一點都不重要。
上面說的功能都是很美好的想像，或多或少都回歸了選課網站的本質：究竟要滿足什麼需求？但因為寫網站很花時間，而且團隊人力有限，因為其實團隊只有我一個，跟期末報告分組一樣好慘好想哭，但如果有其他的功能建議還是可以和我說。
5.2 A short review
在這篇文章當中，我利用 R 語言架了一個選課網站，希望讓大家可以更好的尋找課程，實作上主要改善現有課程網兩個點，一個是課堂時間選擇，二是課程內容的關鍵字搜尋，其他改善比較微小像是介面優化、更加豐富的過濾功能 、課程資訊頁面重調等，希望你會喜歡！特別感謝水豚君 Capy 幫我規劃的前端學習路徑，祝水豚君君 08/12 生日快樂，另外謝謝求職狗群組與小翔激勵我寫出這個網站，還有 jilung 給予我貼網站標籤的建議。
Figure 5.1: 下學期我會擔任這堂課的助教有興趣可以修喔
