台大好課評價：Ric's Web Programming

開課年度

105-2

授課教師

（開課）黃鐘揚、（助教）朱柏憲、林承澤、曾建勳

開課系所與授課對象

電機系專題，但外系也可填一樣的表單申請

私心推薦指數（滿分十分）：

不排斥自學、查文件：十分
喜歡寫程式：十分
想只用聽課學東西：五分

課程大概內容

• Week 1 - Web 發展 / JavaScript / DOM
• Week 2 - JS good parts / bad parts / ESLint
• Week 3 - Node / Express.js / Git warm up
• HW1 - TODOs
• Week 4 - ES6 (ES2015) / Babel / JSX / React
• Week 5 - Webpack
• Week 6 - In-class Practice: Calculator
• Week 7 - More on React
• Week 8 - RESTful / Promise / fetch
• HW2 - Comment Board
• Week 9 - Router / Testing
• Week 10 - In-class Hackathon
• Week 11 - Redux
• Week 12 - Database / SQL
• HW3 - Blog
• Week 13 - SQL builder / MVC / Cookie & Session
• Week 14 - Hash / Migration/ ORM / Auth
• Final Project

上課用書

Github 上的投影片與課前 pre-Reading：https://web-seminar.github.io/slide-v4/

上課方式

每堂課結束後會在 Github 上丟下次的 pre-Reading 連結，上課主要用掛在網上的投影片和現場 demo。

評分方式

沒有公佈。但我猜是三次作業＋ InClass Hackathon＋期末 Project。

考題型式、作業方式

沒有考試。

作業一是用 React 寫純前端的雙層 TodoApp，要能在網頁裡任意新增 TodoList，然後在每一層 TodoList 裡任意新增 TodoItem。需求為新增、刪除、更新、勾選、統計等功能，然後用 github-page deploy。

作業二是前端 React 串接後端 Express Server 但不需接資料庫的留言板。前端結構跟 TodoApp 有點像，跟作業一主要只差在多了跟後端的溝通。這次大多數人都用 now 來 deploy。

作業三是寫一個涵蓋前後端和資料庫的 Blog。基本框架是 React+Express，資料庫的部分雖然上課教的是 SQL，但幾乎九成九的學生都用 mongodb。deploy 部分隨意，我是用 Heroku。

InClass Hackathon 大約在期中週，還沒教到資料庫。基本上就是要你事先查一些資料和想題目，然後用課程的三小時實作出一個 Web App 來 demo。沒做完的可以帶回去繼續做，一週內 deploy 後傳上社團。

Final Project 是在期末考後一週 demo，兩到三人一組，題目自訂，盡量要用到課程所學的技術。最後要交一份簡單的心得、github 連結和 demo 連結到社團。

其他

偶爾會點名，不知道有沒有看出席率。

基礎的部分，需要先會基本的 HTML、CSS、JavaScript。另外課程要求準備 Linux 或 OSX 環境的筆電、自己喜歡的編輯器（Atom、Sublime、vim、Emacs 等）、安裝 git 和 node v6（n 或 nvm 管理版本）。

這個專題基本上是用教授開的表單申請的，內容包含信箱、programming經驗、修專題的動機和期許等。外系和低年級也可能簽的上（我物理系大一），聽說填的人爆多，但錄取三十人裡頭仍有五個外系生、六個大一生。雖然表單寫說填寫內容不影響修課資格，但可能還是有差也說不準。然後應該是沒給加簽。

教授有說下學期太忙不會繼續開這個專題，但 106-2 會正式把它變成一堂電機系的選修課。

心得與總結

其實會填這門專題的原因有幾個。一是本身對 Web 有點興趣，然而網路上查了一下前後端的技術體系和資源實在多如牛毛，對一個 Coding 經驗為只寫過半年普物課 Python 模擬的物理系小大一來說真的沒辦法快速建立一個好的 big picture。而這個專題會導覽現在最普遍和最新潮的開發技術，算是剛好符合到我的需求。

再來就是上學期初有選上教授的資結，但當時根本不會寫 C++，只快速的用兩天看一下網路上的教學就直接上戰場。原以為在邊做邊學應該也不是問題，誰知光作業一就花了快二十個小時才拼出來，基於時間和學分的關係毅然決然在第二週退選決定到大二上再戰。這次的退選經歷使得大一下看到同樣是 Ric 教授開的專題就有種想要進來把它修過的衝動，於是立馬自學了 Html、CSS、Javascript，把環境設好並填下表單。

最後就是選上了，並寫一整學期的 Code XD

總體來說我的感想是，教學部分如果課前沒看 pre-Reading 或其他資源的話，那上課通常很快就不太知道助教在講什麼了。但如果有認真看、甚至自己延伸找資料的話，那上課助教講的東西大部分也都會了。所以這門專題修好的關鍵之一應該在自己看 pre-Reading 和查文件的能力。

作業部份有沒有認真寫是另一個進步的關鍵。修過資結的話應該都知道 Ric 的課程精華都在作業，這門專題也不意外。不管一開始的程度在哪裡，只要撐過三次作業，經歷過所有解 bug 、解 lint error 、查資料的崩潰期，最後必然會達到一定的水平，至少前後端和資料庫都有完整實作過。而且三次作業有循序漸進的感覺，對於我這種新手來說到作業三終於實作出一個 Blog 並 deploy 到網路上的那一刻真的很感動！

然後重頭戲的 Final Project 是我覺得在這個專題學到最多東西的部份，從期末考結束後一整週的時間幾乎每天都在寫 Code，最後幾天收工入睡時天常常已經亮了。除了能真正經歷 Github 上的溝通協作上會碰到的各種問題（pull request、conflict）外，中途在解 bug 的時候也能揪出一些觀念上的疏失。更重要的是能在過程中觀摩到其他人做專案的模式，透過分工讓每個人發揮自己擅長的部分用很高的效率去完成最終的成品。

最後附上我們這次 Final Project 的介紹連結，因為那又是可以寫一整篇東西的事了。