程式導師實驗計畫第二期是一個為期四個月的計畫,要求學生全程參與(每週至少付出四十小時),希望能在結業時培養出合格的(意思就是找得到工作)的工程師。
1.根據課程規則,必須要報告每日進度,其實主要不是給我看的,是給你們自己看的,可以順便整理一下自己昨天學過哪些東西以及今天預計要學哪些東西,詳細規則請參考:程式導師實驗計畫第二期每日任務。
2.有任何意見回饋或是課程相關問題,都可以直接私訊導師(@huli)討論,但比較建議的方法是去 Lidemy 討論區開一個 Issue 來問。
3.請在 GitHub 開一個 repository,把 Issue 頁面當作 blog 紀錄心得,順便練習 Markdown 語法,可參考簡單範例或是第一期學生的心得記錄。
每週一、四晚上九點進行直播教學,其餘時間可利用 slack 群組隨時發問。每次教學時間約為一小時至兩小時。
週一上半場會講解上週的作業以及幫上週做個總結,下半場會把這週的課程內容大概講過一遍,而學生利用週二以及週三自學並且嘗試練習題目。
週四會總結大家這兩天以來的問題一併回答,並且重新把課程內容再講過一遍(或是補完週一上不完的)。
從 2018/09/03 至 2019/01/14 ,為期四個月的課程,一共約十九週。每週的開始為禮拜一,結束為禮拜日。
大致介紹整個計畫以及帶學生看過一次課程大綱,接著說明整體架構,介紹各種不同工程師職位所負責的工作內容並著重在網頁工程師的介紹。
Mindset 建立:
建置基礎環境,例如說 command line tool、Git 以及 Node.js。
複習程式基礎,像是變數、陣列、迴圈、判斷式以及函式(以 ES5 為例)。
學會如何交作業。
根據上一期的經驗,在一開始的程式基礎培養一週是不夠的,所以這一期特地多留了一週來加強程式基礎。在這一週裡面我們會延伸上一週的內容,並且多講一些有關於 ES6 的語法。
介紹常用內建函式如 replace、indexOf、split、map、filter、join、parseInt 以及 Math 等等。
也會教大家寫簡單的 unit test,並且自己寫 test case 檢驗自己的函式。
本週將會正式進入到前端課程的領域,開始用 HTML 與 CSS 打造出基本的網頁,並且利用 media query 實現簡單的 RWD(Responsive Web Design)。
HTML 的部分就簡單帶過幾個常見的 tag,帶到 head 的一些屬性跟設定,也會講到跟 SEO 有關的一些 tag(title, description, json ld...)。
主要會著重在 CSS 的部分,並且讓大家多多練習。
也可以先看一下這兩篇文章(很多地方你會看不懂,但沒關係)先培養一下對前端的感覺,等幾週過後當我們學得越來越多,再看一次會有完全不同的感受:零基礎的小明要如何成為前端工程師?、跟著小明一起搞懂技術名詞:MVC、SPA 與 SSR
這一週將會進入到 JavaScript,讓網頁變得有互動性,並結合 <form>
做表單驗證,或是讓大家寫出簡單的網頁應用程式。
除此之外,也會在這週講 API 串接,讓大家對什麼是 API 有基本的概念,並且實作 Ajax。
相關學習資源:
前端基礎打得差不多以後,就要進入後端的課程,這次課程會以 PHP 為主要的語言,Node.js 為輔助。
這週的課程會講解 PHP 基本觀念、語法,並且教大家安裝設定 MySQL,寫出簡單的 CRUD 應用。
相關學習資源:
這週會延續之前的章節,打造出一個比較完整的產品,一步步把後端變得更複雜一點,並且加強會員系統、權限管理等等。
延伸閱讀:讓我們來談談 CSRF
首先帶大家串接之前自己寫出來的 API,把前端介面用 Ajax 改寫,使網頁互動性變得更高。讓大家熟悉 jQuery,把現有應用用 jQuery 改寫一次。
版面的部分則利用 Bootstrap 搭配 Bootswatch 讓介面變得美觀。利用網格系統實作 RWD。
也會講到 Promise 與 Fetch,帶大家認識比較新的 Web API。
有了自己的前後端程式之後,就可以開始來部署了。這週的重點會放在帶大家直接去買主機(AWS、Digital Ocean、Linode),並且了解如何連上主機。
也會讓大家購買自己的網域,理解如何將網域以及主機串連起來,讓大家可以連線到你的網站。
在這個章節也會讓大家理解後端基本架構(NAT、Load balancer、DB replication 等等)
最後也會補齊跟資料庫的一些知識,像是 ACID、Transaction、View 以及 Stored procedure。
這邊有一份參考某間公司面試考題的綜合能力測驗,還滿有趣的,主要是測驗前八週的基礎,如果你前八週都 ok 的話,相信你一定能夠破關!
這週也要特別感謝 gandi 連續兩期全額贊助了學生購買網域的費用,在這邊特此感謝。
相關學習資源:
在被 CSS 折磨這麼久之後,終於有機會用程式化的方法來撰寫 CSS,這週將介紹幾個不同的 CSS preprocessor(LESS, SASS, Stylus),讓學生自行選擇看順眼的並且練習,把之前的 CSS 都改寫。
也會介紹到 postcss,讓 CSS 變得更簡單。
除此之外,這週也會介紹到基本的資料結構 stack 與 queue,JavaScript 的 Event Loop 機制以及 Cache 相關的說明。
這週的第一個重點是 CSS 預處理器,第二個重點就是 JavaScript 的一些重要基礎:什麼是 this、execution context、prototype 等等。
延伸閱讀:該來理解 JavaScript 的原型鍊了、解读ECMAScript[1]——执行环境、作用域及闭包、JS 作用域
這週將學習把工作自動化,利用 gulp 管理工作流程,避免繁瑣的手動操作。
也會講到 Webpack 誕生的理由以及模組化的 JavaScript 開發,讓學生理解為何需要使用 Webpack。
除此之外也會講到一些與 CSS 相關的優化小技巧,例如說針對圖片做優化的 CSS Sprites 或是 Data URI,或是 JavaScript 與 CSS 的 uglify、minify 等等。
最後也會用跟以往不太一樣的模式,做出一個簡單的 todo list。
這一週正式進入後端框架的領域,會帶大家上最基礎的 Express,熟悉後端框架的各個元素。
終於要進入到前端框架 React 了(雖然嚴格來說 React 並不是一個框架,但搭配其他各種 React 生態系成員,其實就算是一個框架了)。
這週會學習到 React 的基本應用以及原理,了解為什麼我們需要使用 React。
延伸閱讀:React 性能優化大挑戰:一次理解 Immutable data 跟 shouldComponentUpdate
在上一週結束之後,大家應該對 React 有了一些基本的感覺,這一週我們要繼續培養對 React 的感覺,讓大家對 React 越來越熟練。
除此之外也會教大家用 React Router 這一套 library,來實做前端的路由。
延伸閱讀:前後端分離與 SPA、跟著小明一起搞懂技術名詞:MVC、SPA 與 SSR
這是最後一週的前端課程,也是最後一週的 React 課程了。在之前的 React 課程中,我們已經慢慢熟悉 React 的思考模式,可是還有一些問題還沒解決,雖然你現在感受不太到,但是在 App 慢慢變大之後就會碰到了。
接續之前的課程,這一週會讓你的 Web App 變得更加完整,會導入一個新的東西:Redux,說明我們為什麼需要它,以及如何利用它與 redux-promise 來解決非同步的一些問題。
之前我們學過了原生的 PHP,也學了 Express 這套輕巧的 Node.js 框架,而這一週呢,要來教 PHP 的一個輕量的框架 CodeIgniter。
在教完之後,會讓大家把之前的留言板從純 PHP 用 CodeIgnier 這套框架改寫,就可以比較一下兩者之間有哪裡不一樣。
正式的課程就到這邊告一段落了,你學了前端後端與程式相關的基礎知識,接下來需要做一些作品累積經驗,因此接下來幾週都會讓同學做出屬於自己的 Final Project,建議可以與其他人合作,但也可以選擇一個人單打獨鬥。
根據第一期的經驗,其實找人合作會是比較好的選擇。
第一期學長姐的 Final Project:Coffee Beans House Online 、Sukiya 仿作
如果大家一點靈感都沒有的話,可以參考以下幾個提案(但有自己的想法當然是最好的):
既然我們這次的課程做了這麼多個留言板,不如把留言板給做到極致吧!
你可以做一個「讓大家都能申請留言板」的系統,就像是無名小站那樣,每個人都可以申請帳號,有帳號之後可以開設自己的留言板,然後可以自己選擇要不要開放訪客來留言,不開放的話就預設是只有會員可以留言。
點下去會員的帳號之後還可以看到會員個人資料,或者是直接跳到會員自己的留言板去(如果有的話)。
除此之外,如果你想走前端的話,可以試著把前端改成 SPA 試試看!
建立一個論壇系統,能有不同的板塊(討論區),例如說:
在不同板塊底下都可以發表文章,除了發表文章以外,下面也能夠有回覆。
或者是你也可以把板塊當成是 Tag 而已,在同一個頁面就可以看到所有的文章,如果你想找範例的話,可以參考:http://react-china.org/
做個簡單的購物網站,可以參考任何一家市面上的電商,例如說這個我隨便找的電商:https://www.yuyufarm.com/
重點是除了前端以外,你必須要有後台能夠讓管理者登入,並且管理商品(例如說調整價錢、上傳圖片、調整順序等等),可以先完成一個最簡單的版本,之後再慢慢加強。
可以直接參考 Twitter:https://twitter.com/?lang=zh-tw
你可以 follow 人,然後就能夠看到他的動態,也可以自己 po 動態,會出現在自己的 follower 的牆上。
總之呢,關於 Final Project,沒有靈感的話可以先從自己常用的東西開始下手,先打造出一個最簡單的版本再慢慢加強。也可以盡量去找一些第三方的 API 來串,增加自己串 API 的經驗,例如說:
請準備好以下幾個東西並且於第十九週 po 到 Slack 裡面:
Codewar 是一個程式解題平台,靠這些題目,可以訓練自己對語法的熟悉度以及維持手感,更進階的題目則是能夠訓練思考邏輯以及解題方法。
我依照難度整理出了一些題目,平常做作業卡關或是沒事做的時候,都可以解一下這些題目。
這邊列舉這堂課程用到的所有工具。