教學實驗計畫
====

# 計劃簡介
藉由團體內的互助合作以及助教的帶領，照著計劃自主學習，試圖營造出一個適合學習的環境，大家互相切磋，互相成長。

之前跟一個也在做免費教學的前輩交換了一下心得，有句話我覺得他說得很對，免費教學這種事不可能永遠只靠你一個人，因為你總有一天會累，會有自己的事要做。

所以我們要做的，應該是營造出一個環境，營造出一個能夠培養出可以解決問題的工程師的環境，只要這個環境養起來了，之後的事情就不用擔心了。

這次不太會有我一個人對所有人講課的情況，我跟其他學員一樣，都只是這個團體的一份子，我希望這邊能夠變成一個很好的環境，一個可以自由發問，自由切磋技術的環境。

# 最終目標
如果你有這四種能力，我覺得你不管做什麼職業都可以。

1. 找資料能力，能夠知道如何找到相關資訊
2. 分析問題的能力，能夠定位問題
3. 能夠知道如何解決問題
4. 解決問題後能夠重新歸納並整理

# 從做中學
為了要能夠培養出上面那些能力，藉由且戰且走的方式邊學習特定主題邊培養相關能力，我覺得初學者可以學的主題有這些：

1. 網頁後端相關（Session, Database, Server）
2. 網頁前端相關（HTML, JavaScript, CSS, jQuery）
3. 程式解題相關（帶大家做一些 ACM 一二星題或是基本演算法資料結構）
4. 資訊安全相關（SQL Injection, CSRF, XSS）

以下我直接給大家一些方向，可以按照自己的步調去學習。當然，程式的領域超級廣，一定有一大堆主題沒有涵蓋到，但是下面技能你都掌握之後，你應該就是個合格的工程師了，剩下的你一定知道怎麼去找資源，怎麼繼續精進。

# 網頁後端能力培養

其實這一塊要培養的東西很簡單，就是知道後端到底在幹嘛，以及後端到底能做哪些事情。所以你必須對後端的環境很熟悉，你要知道怎麼架 Server，怎麼部署新的程式碼。

除此之外，你還必須懂得資料庫的操作與使用，以及後端跟前端的溝通。

### #1 在自己的電腦上成功運行 php
最簡單的就是用 XAMPP 把整個環境建好，然後隨便寫一個 hello world

### #2 實作簡單登入系統

帳號跟密碼你可以寫死在程式碼裡面沒關係，這個部分的重點是你要知道 Session 的機制為何，以及跟 Cookie 的關係是什麼。這是面試常考題。

### #3 串資料庫

後端最重要的事情之一就是跟資料庫溝通，你要知道怎麼下 SQL 語法從資料庫裡面存取資料。這邊你可以直接對資料庫下指令，或是用 PHP 去操作也行。

### #4 實作簡單留言板

就只要一個表單可以發文，有標題跟內文就行了，然後有頁面會顯示出來現在有哪些留言。留言要存到 DB 裡面去。

### #5 幫留言板加上會員系統

必須要先註冊會員並且登入才能發表留言。這邊可以跟下面資安那一塊的 SQL Injection 跟 XSS 一起學，因為滿相關的。

### #6 加上管理系統

自己的留言可以刪除，有一個頁面可以看到自己有哪些留言，以及其他人有哪些留言。

### #7 實作部落格系統

把你覺得部落格最主要的功能實現出來就好，例如說登入、發表文章、編輯文章跟刪除文章

### #8 加強部落格系統

例如說新增留言系統，或者是讓文章可以加上圖片等等的，把你覺得還不錯的功能加進去。

### #9 實作論壇系統

其實你只要能完成一個部落格系統，我覺得後端的基本能力應該都還 OK，如果你還想繼續挑戰，可以挑戰更複雜一點的論壇系統。

### #10 學習框架

挑一個 PHP 框架來學，我個人推薦 Laravel，並且比你之前自己寫的專案都改成用 Laravel 實作。

先手寫再學框架，你才知道框架幫你做掉哪些事情。

### #11 改用 nginx 當 Server

以前可能都用 Apache，現在可以試試看 nginx

### #12 熟悉 Sever 環境與部署

去 Digital Ocean, Linode 或是 AWS 上面租一個最便宜的主機，試著把 code 丟到上面並且跑起來。

你要會用 ssh 遠端連線主機，並且下 command line 操作。

除此之外，你應該還要學會買 Domain 以及設定 DNS，把 Domain 指到你的主機去。

# 網頁前端能力培養

雖然說前端框架有很多，但我認為身為一個後端工程師，只要會基本的 HTML/CSS/JavaScript 頂多再加個 jQuery 就差不多了。

### #1 HTML 與 CSS
基本上大概會用就好了，這個我相信大家一定 OK

### #2 JavaScript
可以先學習原生 JavaScript，不依靠任何 Library，知道如何透過 JS 去操控 DOM 物件

### #3 jQuery
知道怎麼使用 jQuery 做一些簡單的效果

### #4 Bootstrap
其實在工作的時候，可能比較多時候都會直接透過現有框架去刻網頁，所以多少要知道知道一下 Bootstrap 在幹嘛

### #5 手刻 RWD
如果你想要跟精進 CSS 的話，就不能依靠框架了，試著自己寫出自適應的網頁吧！

[這一份 Check List](https://www.ptt.cc/bbs/Soft_Job/M.1481277610.A.AFE.html) 我覺得還不錯，可以檢視一下自己有哪些還不會的，就去那邊補足。

### #6 Ajax

知道如何跟 Server 交換資料。

如果你能夠把上面的都做到，那身為後端絕對沒問題。雖然說是後端，但其實在比較小的公司裡，絕對都會接觸到前端的部分，只是前端沒有那麼要求就是了。

如果你想更精進前端或是往前端工程師走，可以參考下面的。

### #7 整合上面的能力

可以直接參考我之前的：[從新手到中手：前端工程加強班
](https://github.com/aszx87410/frontend-intermediate-course)

### #8 挑一個順眼的框架學

走到這一步，終於可以來學一下框架了，熱門的 React, Vue, Angular 可以自己挑一個喜歡的來學

### #9 做出作品

你可以模仿現有的網站，例如說 Twitter, Twitch, Gmail 等等你日常生活中在使用的網站，試著寫出差不多的版型跟實作差不多的功能。

身為一個 Junior 的前端工程師，我覺得到這邊就很足夠了。等你進到業界工作之後，你會發現還有一大堆東西要學，但那是之後的事了。

# 資訊安全能力培養
資安其實是很重要的一塊，你如果網站出現那種最基本的漏洞，可以說是犯了大錯。不過在框架盛行的年代，其實框架都幫你把那些東西修掉了，不要亂用的話應該是不會出事。

但儘管如此，你還是必須理解那些攻擊手法的原理。

針對一些經典的安全問題，你應該要回答得出來以下問題（以 XSS 來舉例）：

1. 什麼是 XSS？
2. 原理是什麼？請舉出一個 XSS 攻擊的案例
3. 如何防禦？

### #1 十大安全問題
可以參考：[Top issues on OWASP](http://blog.techbridge.cc/2017/05/07/owasp/)

### #2 SQL Injection
請自己寫出一個可以被 SQL Injection 的程式，並且自己攻擊自己試試看。

### #3 XSS
同上，請自己試著模擬 XSS，另外要注意的是 XSS 有幾個不同的形式，你可以每一種都試試看

### #4 CSRF

可以參考：[讓我們來談談 CSRF
](http://blog.techbridge.cc/2017/02/25/csrf-introduction/)

### #5 儲存密碼
請去了解正確的儲存密碼方式為何，以及為什麼要這樣存。總之絕對不會是存明碼就對了。

一個正常的網站，是不會知道使用者的密碼是什麼的。

### #6 其他

其實我覺得上面那幾點了解的話，跟 Web 有關的安全知識其實就 ok 了，但畢竟學海無涯，如果你還想知道更多的話，可以自己 Google 更多的相關議題。這方面我也只知道皮毛，所以沒辦法給予更多幫助。

###

# 程式解題能力培養

這個分類就是在訓練你如何把腦中的想法轉換成程式碼，有一點像是在解數學問題，但又不太一樣。在練習的時候有一個重點，那就是：「絕對不要先查答案」。因為解題最寶貴的就是你思考的那段時光，一看了解答，你就不會思考了。

你一定要自己先想破頭，想了一兩天發現還是想不出來之後才去求救，你可以在 slack 裡面發問，指出你現在卡住的地方，如果真的還是不行，再去看解答。

還有一個很重要的點：先求有，再求好。你可以先寫一個超級慢的版本，再慢慢把它變快，至少你知道你可以解出這個問題，只是效率不夠高而已。

在這個部分，我建議大家去 [ZeroJudge](https://zerojudge.tw/)，他是一個滿適合初學者的解題系統，可以註冊帳號並且研究一下怎麼使用。如果你慣用的程式語言他不支援，那你就挑一個它支援的語言去學吧！

### #1 完成 Hello World
其實就讓大家熟悉這個環境，熟悉一下要怎麼輸出結果以及整個解題過程到底是怎麼運作的。

### #2 完成簡易加法
可以熟悉如何讀取輸入並且輸出解答，這題通過之後基本的架構應該差不多

### #3 把基礎題庫都寫一寫
如果碰到不會的可以跳過先寫下一題，不一定要執著按照順序解，或是也可以先挑通過率比較高的題目開始培養手感。

### #4 開始寫 ACM 一星題
ACM 的正式名稱是 UVa，他們有自己的解題系統，但方便起見，很多題目你在 ZeroJudge 上面也找得到。

[這邊](http://luckycat.kshs.kh.edu.tw/)有中文翻譯，你可以選擇難度一的題目開始練習，把題號拿去 ZeroJudge 上面搜尋應該就找得到同樣的題目。

其實我覺得以日常寫程式來說，你把一星題跟上面那些寫一寫，其實就差不多了。但如果你想更進一步的話，可以繼續往下做

### #5 開始寫其他 ACM 題目
例如說二星三星之類的，但難度我記得比一星高上挺多的

### #6 寫一些高中資訊競賽的題目
讓你們看看高中生比賽的時候都比些什麼，也可以從國中組的開始寫起，難度會簡單很多。或是校內賽也會簡單一些。

如果你可以撐到這個時候，代表你可能也寫出興趣來了。

### #7 開始學習資料結構與演算法
這邊就是真的資工系在念的東西了，有兩份我非常推薦的資源：

1. [演算法筆記](http://www.csie.ntnu.edu.tw/~u91029/)
2. [初學者寫給初學者的演算法教學](http://alrightchiu.github.io/SecondRound/)

如果你需要書籍，有幾本書應該還不錯：

1. [打下好基礎：程式設計與演算法競賽入門經典
](http://www.books.com.tw/products/0010650143)
2. [培養與鍛鍊程式設計的邏輯腦：程式設計大賽的解題策略基礎入門](http://www.books.com.tw/products/0010705139)
3. [培養與鍛鍊程式設計的邏輯腦：世界級程式設計大賽的知識、心得與解題分享](http://www.books.com.tw/products/0010616945?loc=P_asv_001)
4. [啊哈！圖解演算法必學基礎](http://www.books.com.tw/products/0010656544?loc=P_asv_002)

### #8 去修任何一門大學的演算法課程
Coursera 上面一大堆，台灣也有相關的開放式課程，如果你真的想要把這塊基礎打得很紮實，就去選一門課認真修完吧！

如果你能把上面全部都做好做滿，一般的面試應該是不會碰到什麼問題了，若是你還想繼續往下深造，其實到這個地步，你應該就會知道下一步應該怎麼走了，就不需要我了。

# 總結

上面大概列了一些方向跟資源，如果我有想到其他的我會再補上。如果有任何錯誤也麻煩跟我講一下，感謝大家。

總之大家就按照上面給的點自己學習吧，有問題都可以在 slack 裡面提問，你要從四個分類哪一個開始都可以，也可以同時進行，祝大家學習愉快！