## Welcome to
### 107-2 Ric's Web Programming Class
---
### 課程緣起
* Open source movement, modern web techniques, global software business trends… 這些似乎都跟電機系的課... 沒有關係？
* 即使是熱門如 AI, 如果沒有工程技術的配合，也是無法真正對我們的生活造成 impacts
---
### BUT...
* (Disclaimer) 網路的技術實在是進步太快了！我也無法完全的 follow 到，而我也沒有那麼多時間去寫網頁練習
* 如果你期待這門課會像 DSnP (資料結構與程式設計) 那樣有完整的教材、我可以隨時回答你的各種問題，那你可能是走錯棚了...
---
### So... 這學期如果要修這門課，正確的心態應該是：
* 跟著課程進度「自學」
* 多多參與討論(physically or in FB group)
* 課前 readings 以及 homeworks 務必要能跟上
* 請每堂課都帶筆電過來 (Linux or Mac OS is required)
---
### 以培養「全端工程師」為目標：
包含前端介面、後端伺服器、資料庫、甚至是 web/internet admin 的基本觀念
---
去年的 final project list ([details](https://www.facebook.com/groups/NTURicWebProg/))
---
### 上課方式 -- Example-Driven Lecture
根據每週的 topic 會有一個 example, 上課時會帶大家把這個 example 從 0(or some 殼子) 做到過半完成，剩下的部分會變成大家回家的練習或是作業
---
### Syllabus (1/5)
| Date | Contents | Examples |
| ----- | -------- | -------- |
| 02/20 | Class Introduction <br> Intro to HTML+CSS | Homepage |
| 02/27 | Intro to JavaScript | Image Viewer |
| 03/06 | More on JavaScript | TODO List (pure JS) |
| 03/13 | More on JavaScript + p5.js + Git Flow | Flappy Bird (on github) |
---
### Syllabus (2/5)
| Date | Contents | Examples |
| ----- | -------- | -------- |
| 03/20 | Classes in JS <br> Intro to React.js | Simple Blog Page <br>in React |
| 03/27 | More on React.js | TODO List |
| 04/03 | **Spring Break** | (React) Calculator |
| 04/10 | More on React.js <br> React Router | Mini Blog Page |
---
### Syllabus (3/5)
| Date | Contents | Examples |
| ----- | -------- | -------- |
| 04/17 | Promise / Async-Await <br> HTTP/Express/Middleware <br> Cloud + VM | Mini Blog Server |
| 04/24 | Node.js + Database | Complete Blog Page |
| 05/01 | **F8 (no class)** | **N/A** |
| 05/08 | Midterm Practice | TBA |
---
### Syllabus (4/5)
| Date | Contents | Examples |
| ----- | -------- | -------- |
| 05/15 | npm / Babel / Webpack / Oauth | Complete Blog Service |
| 05/22 | Redux + GraphQL | Mini Social Network |
| 05/29 | More on Database and Data Analytics | TBD |
| 06/05 | Project Design / Testing | TBD |
---
### Syllabus (5/5)
| Date | Contents | Examples |
| ----- | -------- | -------- |
| 06/12 | Open-Source Project: Bottender.js | Chatbot |
| 06/19 | **Final Exam Week (no class, no exam)** | **N/A** |
| 06/26 | **Final Project Presentation** | **N/A** |
---
### 評分方式
* Practice: 10%
* Homework: 30%
* Midterm Practice: 20%
* Final Project: 40%
**Final score will be linearly adjusted based on overall performance**
---
### Practice (10%)
* 一般較簡單的課堂 examples，約 6 ~ 8 個
* Deadline: 9pm on Sunday
* Practice 就是 practice, 本身不被評分
* 同學互相給 comments，TA 會挑選一些認真的 comments 給 bonus points
* 學期 practice score (10%) 會根據 bonus 來做調整 (e.g. 6 ~ 10)
---
### Homework (30%)
* 大約 3 ~ 4 個階段性比較完整的 in-class examples
* Deadline: default at 9pm on Tuesday
* TA 批改 & 評分 (hopefully 會先給評分標準)
* (Maybe) 會挑一些做得比較好的給大家做參考
---
### Midterm Practice (20%)
* Individual work
* 題目自訂 (但會有些規定)
* 05/08 課堂 demo (視人數而定)
---
### Final Project (40%)
* Team project (原則上是 1 ~ 3 人一組)
* 分數原則上是以組為評分單位，但會考量 individual contributions
* 06/26 Final Project Presentation (視人數而定)
---
### 作業抄襲？
Well, 除非太明顯助教一眼就看出來，
否則我懶得抓抄襲了。
作業抄襲沒有學到東西，就算拿到分數，
也是你的損失。
---
### 修課 or 旁聽？
* 不開放旁聽
* 基本上如果沒有跟上所有的 assignments, 旁聽也只是浪費彼此的資源
* 線上其實已經有非常豐富的教學資源
---
### 修課 or 旁聽？
* 那我應該要修課嗎？
* 跟 DSnP 一樣，這門課沒有考試，但會有像海浪一樣的作業每週來襲
* 課程前後有連貫，如果無法全學期 commit, 建議不要來修課，免得到時候還要來停修
---
### 加選方式
* 呃，因為一些作業失誤，本來這門課是二類選修 (i.e. 需要授權碼)，後來變成三類選修(註)，所以真心想要修課的人請自行上網選修吧...
ps. 第三類選修：教師有設定修課人數上限，擬修課學生上網登記後，教務處於網路加選期間，依各課程之剩餘名額進行四次分發作業。
---
### 課程 (websit & Ceiba & FB)
* 課程講義：https://ric2k1.github.io/
* Ceiba：應該是不會用...
* FB 討論版：https://www.facebook.com/groups/NTURicWebProg/
---
## End
---
## 附註一：請立即完成 Github 帳號開設
---
### 1. 使用 ntu 信箱辦理 [GitHub](https://github.com/) 帳號
* 已用 NUT e-mail 使用 GitHub 者，go to 2
* 申請 Github Education較方便（才能免費使用 private 功能）
* 日後還可以綁定其他常用信箱
* 已有 GitHub帳號者請新增 NTU Mail 並暫時將他設為主要信箱
---
### 2. 使用此帳號申請 [學生版附加功能](https://education.github.com/)
* 點選右上角 Join Github Education
* 勾選 Student/Individual account
* 勾選 ntu 信箱
* 在 How do you plan to use Github? 填寫 “For NTU Web Programming Lecture”
* 點選 Submit Request （通常需要一到三天時間）
---
### 3. 開設本課程專用之 Repository (repo)
* 請將 repo 命名為 WebProg2019
* 請將 repo 權限設定為 private
* 若命名或者權限有任何問題，將可能導致作業0分，請務必注意
---
### 4. 將助教以及老師加入該 repo 的協作者 (Collaborator)
* 助教的帳號為：cjs840312
* 老師的帳號為：ric2k1
---
### 5. 填寫 repo form, 以利作業批改
* [Repo Form](https://goo.gl/forms/16FSJ0UW2xPCgD7t2)
* github repo url 請填 SSH
---
### 6. 加入 FB 社團
* 為了分享 project 以及參與討論，請加入 [Ric's Web Programming Class FB 社團](https://www.facebook.com/groups/NTURicWebProg)
---
## 附註二：
## HW + Practice Policy
---
每份作業請根據以下格式
在 **WebProg2019** 開設底下的目錄：
* 例如:
* HW1/
* HW1/own/
* HW1/review/
---
**own/** 目錄是用來存放自己寫的作業
請務必在 deadline 前將作業 push 到該目錄，助教會在 deadline 剛過就把你的作業 clone 回來
---
(For Practice 作業)
助教會隨機把另外一位學生的作業 push 到 **review/** 目錄，請在 review deadline 之前將你的 comments 用 [markdown 格式](https://markdown.tw/) 寫到 **comment.md** 檔案內
助教之後會再把大家寫的 **comment.md** 放至被 reviewed 的同學的 **own/** 目錄底下
{"metaMigratedAt":"2023-06-14T20:15:41.095Z","metaMigratedFrom":"YAML","title":"Class Intro","breaks":true,"slideOptions":"{\"theme\":\"league\",\"transition\":\"fade\",\"slidenumber\":true}","contributors":"[{\"id\":\"ae1d234d-f143-4cee-92b5-e303abdd6d82\",\"add\":153,\"del\":153},{\"id\":\"752a44cb-2596-4186-8de2-038ab32eec6b\",\"add\":5478,\"del\":93}]"}