/mentor-program

從零到一：導師實驗計畫的教材

Primary LanguageHTML

程式導師實驗計畫

這是什麼

程式導師實驗計畫是一個為期四個月的計畫，要求學生全程參與（每週至少付出四十小時），希望能在結業時培養出合格的（意思就是找得到工作）的工程師。

課程目標

綜合能力

  1. 具有找資料的能力，能夠知道如何找到相關資訊
  2. 具有分析問題的能力，能夠快速定位問題
  3. 知道如何解決問題，包括但不限於拆解問題、簡化問題、轉化問題
  4. 解決問題後能夠重新歸納並整理

工具能力

  1. 後端：知道後端原理，知道什麼是資料庫、server，可以寫出簡單的網站並且自己部署
  2. 前端：知道前端原理，HTML、CSS、JavaScript，知道 Ajax 以及如何與後端串接
  3. 資安：基本資安概念，SQL Injection、XSS、CSRF

課程規則

1.每天請把自己昨天做的事情以及今天預計要做的事情貼在 slack channel，可直接複製以下範例並且更改：

*昨天*
- 完成 git 安裝
- 解 codewar 題目：Opposite number

*今天*
- 解 codewar 題目：Opposite number
- 寫作業：好多星星

2.有任何意見回饋或是課程相關問題，都可以直接私訊導師（@huli）討論，如果想要匿名反應的話，也可以填寫匿名表單

3.請在 Github 開一個 repo，把 issue 頁面當作 blog 紀錄心得，順便練習 Markdown 語法。範例

課程進行方式

每週一、四晚上九點以及週日晚上八點進行直播教學，其餘時間可利用 slack 群組隨時發問。每次教學時間約為一小時至兩小時。

週一會把這期的課程內容大概講過一遍，而學生利用週二以及週三自學並且嘗試練習題目。

週四會總結大家這兩天以來的問題一併回答，並且重新把課程內容再講過一遍（或是補完週一上不完的）。

週日幫這週課程做總結，講解作業題目以及批改作業。

課程大綱

從 2018/01/29 至 2018/05/29 ，為期四個月的課程，一共約十七週。每週的開始為禮拜一，結束為禮拜日。

第一週（01/29 ~ 02/04）：程式基礎

大致介紹整個計畫以及帶學生看過一次課程大綱，接著說明整體架構，介紹各種不同工程師職位所負責的工作內容並著重在網頁工程師的介紹。

Mindset 建立：

  1. 不要害怕問問題，每個問題都值得被提出來，你的問題可能也是其他人的問題
  2. 問問題前應該要自己查詢資料（有些很難查的直接問也可以）
  3. 你有老師讓你盡量問，反正問就對了，有錯的話我會提醒你
  4. 重點是「目的」，而不是「手段」，持續問為什麼為什麼為什麼為什麼

建置基礎環境，例如說 command line tool、git 以及 node.js。

複習程式基礎，像是變數、陣列、迴圈、判斷式以及函式（以 ES5 為例）並介紹常用內建函式如 replace, indexOf, split, map, filter, join, parseInt 以及 Math 等等。

知道如何寫簡單的 unit test，並且自己寫 test case 檢驗自己的函式。

HW1 作業連結

目標：

  • 知道程式如何執行
  • 了解寫程式的本質只是一行行的指令
  • 了解前端與後端的區別
  • 能說出從發出一個 request 到接收 response 中間發生的事
  • 了解不同載具的差異（Desktop、Mobile、Web）
  • 了解基本的 command line 指令
  • 知道 Git 在做什麼
  • 知道 add, commit, push, pull 等基本 Git 指令
  • 了解常用內建函式
  • 熟悉程式語法並解決基礎問題

第二週（02/05 ~ 02/11）：前端基礎（上）

本週將會正式進入到前端課程的領域，開始用 HTML 與 CSS 打造出基本的網頁，並且利用 media query 實現 RWD（Responsive Web Design）。

HTML 的部分就簡單帶過幾個常見的 Tag，帶到 head 的一些屬性跟設定。

主要會著重在 CSS 的部分，並且讓大家多多練習。

HW2 作業連結

目標：

  • 知道 HTML 是什麼
  • 知道 CSS 是什麼
  • 知道 inline、block 跟 inline-block 的區別
  • 知道什麼是 box model
  • 知道 position 的所有屬性及其差別
  • 知道 :hover, :before, :after
  • 知道 :nth-child
  • 熟悉 CSS selector

第三週（02/12 ~ 02/18）：停課一週

本週由於老師放假加上農曆新年，停課一週，但還是隨時開放問問題。

第四週（02/19 ~ 02/25）：前端基礎（中）

這一週將會進入到 JavaScript，讓網頁變得有互動性，並結合 <form> 做表單驗證，或是讓大家寫出簡單的網頁應用程式。

除此之外，也會在這週講 API 串接，讓大家對什麼是 API 有基本的概念，並且實作 Ajax。

HW4 作業連結

目標：

  • 知道 JavaScript 是什麼
  • 知道 JavaScript 跟 Java 的關係
  • 知道 DOM 是什麼
  • 知道如何用 JavaScript 操控 DOM 物件
  • 知道什麼是 API
  • 知道什麼是 Ajax
  • 知道如何存取跨網域的資源（CORS）
  • 知道什麼是 JSON
  • 知道什麼是 JSONP 及其原理

第五週（02/26 ~ 03/04）：後端基礎（上）

前端基礎打得差不多以後，就要進入後端的課程，這次課程會以 PHP 為主要的語言，Node.js 為輔助。

這週的課程會講解 PHP 基本觀念、語法，並且教大家安裝設定 MySQL，寫出簡單的 CRUD 應用。

HW5 作業連結

目標：

  • 知道 PHP 是什麼
  • 知道前端與後端的差別
  • 知道什麼是資料庫
  • 了解基本 SQL 語法
  • 寫出基本 CRUD 應用

第六週（03/12 ~ 03/18）：後端基礎（中）

這週會延續之前的章節，打造出一個比較完整的產品，一步步把後端變得更複雜一點，並且加強會員系統、權限管理等等。

HW6 作業連結

目標：

  • 知道什麼是 Session
  • 知道什麼是 Cookie
  • 知道 Session 與 Cookie 的差別
  • 知道雜湊演算法原理以及應用
  • 知道什麼是 SQL Injection 以及如何防範
  • 知道什麼是 XSS 以及如何防範
  • 知道什麼是 CSRF 以及如何防範

第七週（03/19 ~ 03/25）：前端基礎（下）

首先帶大家串接之前自己寫出來的 API，把前端介面用 Ajax 改寫，使網頁互動性變得更高。讓大家熟悉 jQuery，把現有應用用 jQuery 改寫一次。

版面的部分則利用 Bootstrap 搭配 Bootswatch 讓介面變得美觀。利用網格系統實作 RWD。

HW7 作業連結

目標：

  • 知道 jQuery 是做什麼的
  • 知道 jQuery 與 vanilla js 的差別
  • 知道如何與自己寫的 API 串接
  • 知道什麼是 Bootstrap
  • 知道 Bootstrap 原理及如何應用
  • 知道什麼是網格系統以及如何應用在 RWD

第八週（03/26 ~ 04/01）：後端基礎（下）

有了自己的前後端程式之後，就可以開始來部署了。這週的重點會放在帶大家直接去買主機（AWS、Digital Ocean、Linode），並且了解如何連上主機。

也會讓大家購買自己的網域，理解如何將網域以及主機串連起來，讓大家可以連線到你的網站。

在這個章節也會讓大家理解後端基本架構（NAT、Load balancer、DB replication 等等）

HW8 作業連結

目標：

  • 了解後端架構
  • 知道虛擬空間、虛擬主機以及實體主機的差別
  • 知道什麼是網域
  • 知道如何設定網域以及原理
  • 知道如何用 SSH 遠端連線到自己的主機
  • 知道如何部署應用程式
  • 知道什麼是 No SQL
  • 知道什麼是 Transaction 與 lock
  • 知道資料庫的 ACID

第九週（04/02 ~ 04/08）：前端中階（上）

在被 CSS 折磨這麼久之後，終於有機會用程式化的方法來撰寫 CSS，這週將介紹幾個不同的 CSS preprocessor（LESS, SASS, Stylus），讓學生自行選擇看順眼的並且練習，把之前的 CSS 都改寫。

也會介紹到 postcss，讓 CSS 變得更簡單。

除此之外，這週也會介紹到基本的資料結構 stack 與 queue，JavaScript 的 Event Loop 機制以及 Cache 相關的說明。

HW9 作業連結

目標：

  • 了解 CSS 預處理器的目的以及原理
  • 知道 postcss 是什麼
  • 了解什麼是 Cache
  • 知道 HTTP Cache 的原理以及相關 Header
  • 知道什麼是 Stack
  • 知道什麼是 Queue
  • 知道 Event Loop 的運作方式

第十週（04/09 ~ 04/15）：前端中階（下）

這週將學習把工作自動化，利用 gulp 管理工作流程，避免繁瑣的手動操作。

也會講到 Webpack 誕生的理由以及模組化的 JavaScript 開發，讓學生理解為何需要使用 Webpack。

會需要學生做出一個簡單的 todo list。

HW10 作業連結

目標：

  • 了解 gulp 的目的以及原理
  • 了解 webpack 的目的以及原理
  • 熟悉如何使用 webpack 進行模組化開發
  • 熟悉如何使用 gulp 建構自動化工作流程
  • 能夠快速打造出基礎環境

第十一週（04/16 ~ 04/22）：後端框架（上）

這一週正式進入後端框架的領域，會帶大家上最基礎的 Express。熟悉後端框架的各個元素。

HW11 作業連結

目標：

  • 了解一般後端框架的各個元素
  • 了解 Route 以及 MVC
  • 了解什麼是 ORM

第十二週（04/23 ~ 04/29）：前端框架（上）

終於要進入到前端框架 React 了（雖然嚴格來說 React 並不是一個框架，但搭配其他各種 React 生態系成員，其實就算是一個框架了）。

這週會學習到 React 的基本應用以及原理，了解為什麼我們需要使用 React。

HW12 作業連結

目標：

  • 了解 React 的目的以及原理
  • 了解我們為什麼需要 React
  • 了解 React 跟之前使用 jQuery 的區別
  • 了解 state 跟 props 的不同
  • 學習以元件的角度去看整個 App

第十三週（04/30 ~ 05/06）：前端框架（下）

接續之前的 React，這一週會讓你的 Web App 變得更加完整，導入 React Router、Redux 以及 Redux Observable。

HW13 作業連結

目標：

  • 了解 Redux 的目的以及原理
  • 了解我們為什麼需要 Redux
  • 了解 React Router 的目的
  • 知道什麼是 Single Page Application
  • 了解現在的前端與以往的差別

第十四週（05/07 ~ 05/13）：後端框架（下）

之前我們學過了原生的 PHP，也學了 Express 這套輕巧的 Node.js 框架，而這一週呢，原本是預計教 Laravel，但這套框架光是設定環境就有點麻煩，於是決定改教比較輕量的 CodeIgniter。

別擔心，在 CodeIgniter 裡面也可以學到許多 Web 框架的概念。當你覺得這套上手之後，可以自己再去嘗試看看 Laravel。

HW14 作業連結

目標：

  • 學過兩套不同語言的框架之後，要發現其中的異同
  • 理解為什麼會需要框架
  • 體驗純 PHP 跟有框架的差別在哪裡

第十五週（05/14 ~ 05/20）：Final Project

接下來幾週都會讓同學自己做出屬於自己的 Final Project，可以與其他人合作，也可以選擇一個人單打獨鬥。

在之後也都還是會有課程，主要會幫大家補齊一些基礎，例如說：

  1. 常數與變數的區別
  2. 在程式裡的 heap 與 stack
  3. JavaScript 的變數提升
  4. JavaScript 的 this
  5. JavaScript 的原型鍊
  6. IIFE
  7. 閉包 closure
  8. 事件冒泡
  9. Promise
  10. 基本資料結構與演算法
  11. 各種排序法以及 Big O
  12. 各種進位制

可參考實作項目：

留言板

既然我們這次的課程做了這麼多個留言板，不如把留言板給做到極致吧！

你可以做一個「讓大家都能申請留言板」的系統，就像是無名小站那樣，每個人都可以申請帳號，有帳號之後可以開設自己的留言板，然後可以自己選擇要不要開放訪客來留言，不開放的話就預設是只有會員可以留言。

點下去會員的帳號之後還可以看到會員個人資料，或者是直接跳到會員自己的留言板去（如果有的話）。

除此之外，如果你想走前端的話，可以試著把前端改成 SPA 試試看！

論壇系統

建立一個論壇系統，能有不同的板塊（討論區），例如說：

  1. 閒聊
  2. 購物
  3. 程式相關主題

在不同板塊底下都可以發表文章，除了發表文章以外，下面也能夠有回覆。

或者是你也可以把板塊當成是 Tag 而已，在同一個頁面就可以看到所有的文章，如果你想找範例的話，可以參考：http://react-china.org/

購物網站

做個簡單的購物網站，可以參考任何一家市面上的電商，例如說這個我隨便找的電商：https://www.yuyufarm.com/

重點是除了前端以外，你必須要有後台能夠讓管理者登入，並且管理商品（例如說調整價錢、上傳圖片、調整順序等等），可以先完成一個最簡單的版本，之後再慢慢加強。

社交網站

可以直接參考 Twitter：https://twitter.com/?lang=zh-tw

你可以 follow 人，然後就能夠看到他的動態，也可以自己 po 動態，會出現在自己的 follower 的牆上。

總之呢，關於 Final Project，沒有靈感的話可以先從自己常用的東西開始下手，先打造出一個最簡單的版本再慢慢加強。也可以盡量去找一些第三方的 API 來串，增加自己串 API 的經驗，例如說：

  1. Firebase
  2. Google Map API
  3. Google Login, Facebook Login
  4. 金流

第十六週（05/21 ~ 05/27）：Final Project

第十七週（05/28 ~ 06/03）：Final Project Demo

作品展示。

自我練習

Codewar 是一個程式解題平台，靠這些題目，可以訓練自己對語法的熟悉度以及維持手感，更進階的題目則是能夠訓練思考邏輯以及解題方法。

我依照難度整理出了一些題目，平常做作業卡關或是沒事做的時候，都可以解一下這些題目。

Codewar 題目列表

Tech Stack

這邊列舉這堂課程用到的所有工具。

  1. 課程直播：Youtube
  2. 群組聊天：Slack
  3. 交作業：Github + Github Classroom + Travis CI 自動批改
  4. 練習題目：Codewar