[107-2] Web Programming Final
電機系的預選系統及課程評價網站
從 repo clone 下來之後
$ cd backend
$ npm install
$ npm start
$ cd ../frontend
$ npm install
$ npm run watch登入後，可在首頁看到已經選的課程以及還未選的課程
可以從首頁點進去課程，修改志願序
選課可以看到所有年級的課程
評價可以看到其他人對課程的評價，可以發表文章或是回應
點右上角的頭像可以修改個人資料以及登出
使用者可以在右上角的「編輯個人資料」裡面修改暱稱(或是用我們的「隨機產生按鈕」隨機生成一個)，然後瀏覽他人的文章並留言回覆。
回覆頁面中點擊重新整理即可刷新評論。文章部分提供用課程名稱以及老師名稱來搜尋。除了瀏覽外，使用者也可以自己發表評論。「載入模板」按鍵可以load出ptt ntu_course版的課程評價格式，讓評價內容更有架構性。發表後，使用者亦可找到自己之前發表過的文章，進行修改或是刪除。
另外，我們也有充分考慮到響應式網頁的設計，讓手機使用者可以極為方便地進行操作。
如果發生更新後看不到網頁的狀況，屬於react router 使用client side render的問題，請到/commentlist下進行重新整理即可
| Package | Description |
|---|---|
| apollo-client | client 端 access graphql |
| babel | compile 新版 ECMA-262 語法 |
| classnames | 將陣列/物件/字串組合成 classname |
| graphql | graphql 本體 |
| js-file-download | 下載檔案 |
| material ui | material design 的界面 |
| react | react 本體 |
| react-dropzone | 透過拖曳或點擊上傳檔案 |
| react-redux | react 連接 redux |
| react-router-dom | client-side routing |
| react-scripts | create-react-app 的 module |
| react-smooth-dnd | 提供平滑的 element drag and drop |
| redux | redux 本體 |
| webpack | 比 create-react-script 啟動更快的 hot-module-replacement |
| Package | Description |
|---|---|
| apollo-server-express | 結合 apollo-server 與 express，在 server 加上 graphql |
| bcrypt | 安全、簡單的 hash 密碼 |
| express | server 本體 |
| graphql | graphql 本體 |
| jsonwebtoken | jwt，用來驗證用戶身份 |
| mongoose | 連接 mongoDB |
1. 選課系統頁面前端及後端的設計與銜接
2. 資料格式設計
3. 伺服器端的資訊安全架構設計（利用jwt的驗證）
4. 很多的debug
5. 管理員介面與選課系統的連接
1. 管理員頁面(Admin)之前端及後端學生、課程之資料格式設計及儲存
2. 過去電機課程地圖之評價資料建檔
3. 整個課程評價網頁(從前端乃至 CRUD 皆是)
1. 資料格式設計
2. DB資料銜接後端
3. 分發演算法設計及分析
4. 隨機生成志願序&組別的測資&測試
這次的專題讓我完整的了解redux的dataflow也讓我重新思考了整個web developement的架構，可以如此的簡化，方便開發，以及維護，還有Graphql對於datatype以及schema定義的更加嚴謹，使不同開發者能夠同時開發後端與前端並且能夠無縫的銜接起來，也更好維護。 當初想要選修這門課，就是一直想要有能力解覺生活身邊的問題，從期中到期末，能夠用自己的能力做出實用的作品真的很有成就感。
這次的專題我們不只使用了 webpack、redux 等新潮技術，在 API 部分更是選擇了上課教過但比較不熟悉，資料也十分有限的 GraphQL。而從學期結束前零零星星的隨意寫一些課程爬蟲的部分，結果後來發現實用度太低只好捨棄，到後來用了不到一週的時間，把電機課程地圖網站給生出來，整個過程絕非易事。而「整整」一個禮拜都在系 K，從早上連續打扣到晚上的生活，對我來說也是非常辛苦。然而，最支持著我的動力，就是想到未來一屆一屆的電機系同學可以真正的使用我的網頁的那個時候。想到自己從學期初甚麼也不會，到現在寫的網頁已經可以真實的解決現在的問題，就令人感到十分振奮!謝謝這門課讓我成長了不少，也要感謝我的組員們，在打扣和 debug 部分都給了非常多的建議!
事實上，我並非EE的一分子，因此對於EE的選課機制不甚了解。再此之前，也不知道過往的選課機制為何，與其他系的選課機制有何不同。這就要感謝我的組員們，讓我可以快速的了解到整個選課的特別之處，包括十選二的分組課程等等。並且將其實做出來，乃至於汰換以前不太合理的志願序機制。 雖然我負責的部份與Web Programming比較有交集的是「為了銜接DB的資料，而實做各種由gql定義的interface/format的轉換」，其他地方丟就比較偏DSnP那邊的事情，但我認為我還是學習到的了不少事情：到底該怎麼tune每個年級的priority的gaussian distribution才會比較「公平」？又到底如何在整個志願序的大系統下如何分發課程？分組的話又該如何做priority分發比較適當？這些問題看似瑣碎，但其實背後都有挺深的緣由與邏輯。在這也要感謝我的組員們，如果是一個人在思考這些事情，想必是非常無趣的。因為他們的存在，整個問題才可以更深入的探討下去，讓EE的選課系統一代比一代成熟，一代比一代還要公正。
本專案為電機系之課程預選系統，為系學會資訊部管轄範圍。因預選系統具有選課的時限性，必須及早完成，所以有一位資訊部員李子筠同學和我們同時進行開發，主要負責和陳昱行同學類似的部分。為避免造成誤會，因此在此特別註明。
admin : 123
b06901048 : 123