├── case.md ├── case ├── README.md ├── case1.md ├── case2.md ├── case3.md ├── case6.md ├── case4.md ├── case5.md └── case7.md ├── prepare.md ├── SUMMARY.md ├── beginning.md ├── README.md └── LICENSE /case.md: -------------------------------------------------------------------------------- 1 | # 實際案例 2 | 3 | -------------------------------------------------------------------------------- /case/README.md: -------------------------------------------------------------------------------- 1 | # 實際案例分享 2 | -------------------------------------------------------------------------------- /prepare.md: -------------------------------------------------------------------------------- 1 | # 事前準備 2 | 3 | 事前先寄信給丁丁大，詢問一些注意事項之類的 4 | 接著就開始打要po在ptt上的文章以及一些規則 5 | 有許多內容都直接 fork 丁丁大的，真是前人種樹後人乘涼 6 | 之後就po文等收信了 7 | 8 | 若是也有心想要做這件事情的，可以提供你幾個可以參考的資訊 9 | 1. 有工作經驗，不然別人問你與職場相關的你會無法回答 10 | 2. 對各個領域（前端、後端、移動端）都不會太陌生，至少要知道基本 11 | 3. 知道本科系在幹嘛，因為許多人也會問說本科跟非本科差在哪 12 | 4. 有耐心，一次收到十幾封信每封都要回信敲時間可不是開玩笑的 13 | 14 | 大概就是這幾點 -------------------------------------------------------------------------------- /SUMMARY.md: -------------------------------------------------------------------------------- 1 | # Summary 2 | 3 | * [Introduction](README.md) 4 | * [緣起](beginning.md) 5 | * [事前準備](prepare.md) 6 | * [實際案例](case.md) 7 | * [資策會出身前端工程師](case/case1.md) 8 | * [政大商科自由譯者](case/case2.md) 9 | * [四大工科大二學生](case/case3.md) 10 | * [財務會計](case/case4.md) 11 | * [資管碩畢](case/case5.md) 12 | * [政大俄文畢業](case/case6.md) 13 | * [新鮮人工程師](case/case7.md) 14 | 15 | -------------------------------------------------------------------------------- /beginning.md: -------------------------------------------------------------------------------- 1 | # 緣起 2 | 3 | 有天在ptt `Soft_Job`版我看到了一篇文章 4 | [[情報] 免費程式入門教學(高雄)](https://www.ptt.cc/bbs/Soft_Job/M.1445658439.A.7DE.html) 5 | 內容大意是他希望能帶領一些外行人能夠更快速的入門寫程式 6 | 於是願意在高雄提供免費的程式入門教學，任何人都可以報名 7 | 8 | 我第一次看到的時候就覺得能這樣做很厲害，畢竟這要付出許多時間與精力 9 | 當初就有想說自己要不要也在台北開一場，但只是想想便作罷 10 | 一個半月後，再次看到丁丁大的發文，發現原來已經過一個半月了 11 | 經過這些日子的磨練，我覺得我對一些事情的掌握度已經提昇了 12 | 再加上自己這陣子其實下班之後沒什麼事情，於是多出許多空閒時間 13 | 最後終於下定決心做這件事 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 台北免費程式教學心得分享 2 | 3 | [gitbook - 台北免費程式教學心得分享](https://aszx87410.gitbooks.io/programming-tutorial-review/content/) 4 | 5 | 可以先看我po在ptt的 [[情報] 免費程式入門教學(台北)](https://www.ptt.cc/bbs/Soft_Job/M.1445780425.A.9C6.html) 6 | 大意就是，我願意在台北提供幾乎免費（請一頓晚餐就好）的程式入門教學 7 | 不限身分及資格，只要你覺得你對寫程式有興趣都可以報名 8 | 無論是前端、後端還是Mobile，我都略懂略懂，所以可以大概教一些基礎 9 | 10 | 其實我也是因為受到其他人的啟發，才決定做這件事情（可參考原文或是緣起），在決定要做這件事之前有先寫信詢問一下相關注意事項，丁丁大給了我一些實用的建議。 11 | 12 | 文章po出以後迴響不錯，陸陸續續收到十幾封信，各個的背景都不一樣。 13 | 在開始之前，我就想說如果真的做了，我一定要寫下一些記錄 14 | 第一是可以幫自己做個記錄 15 | 第二是假設以後也有人想要做同樣的事情，這邊就有許多寶貴的資源可以參考，畢竟這些都是我的真實經歷 16 | 第三是我會把每個來諮詢的人都問題與我的回答都放在這裡，若是我有哪些地方有講錯的話，大家可以直接糾正我 17 | 18 | 19 | 這本書分成四個章節 20 | 21 | 1. 緣起 22 | 2. 事前準備 23 | 3. 實際案例 24 | 4. 心得分享 25 | 26 | 希望這篇能夠幫助到也想一起發起免費入門程式教學，但懷疑自己能力不足、或是想知道更多細節的人。 27 | 28 | 29 | ## Contributing 30 | 如果你對於我所講解的內容有所疑惑，或是有更好的解答，又或是覺得我講錯了，歡迎直接開issue針對裡面的內容討論。 31 | 感謝幫忙~ 32 | 33 | 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 aszx87410 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /case/case1.md: -------------------------------------------------------------------------------- 1 | # 1. 資策會出身前端工程師 2 | 3 | ## 背景介紹 4 | 資策會出身，上了半年的課，課程時間是週一到週五，朝九晚五，感覺可以學到滿多東西的。上課內容前後端都包，後端是C#，前後端比重大概一比一。 5 | 6 | 結業之後到台北找工作，目前算是專做前端，一開始是負責換一些圖，現在則是debug、新增一些小功能，用的是jQuery比較多。 7 | 8 | ## 疑問與回答 9 | ### RWD 10 | 我心目中的RWD就是用css去動態調整一些寬高比例之類的，但因為他們公司的RWD有極大部分仰賴javascript，難怪他會覺得奇怪，我也覺得奇怪... 11 | 不知道是真的這樣，還是這家公司比較奇特？ 12 | 13 | ### jQuery事件概念 14 | 令人困擾的 function(e)的e到底是什麼？window.event又是什麼？後來我就解釋說那個e是因為除了事件本身，要帶一些額外資訊，像是click的事件，如果你要抓他是點擊哪個位置怎麼辦？又沒有一個單獨一個事件可以做這件事情，所以一起算在點擊裡面，而這個e就會包含其他一堆有的沒有的數字，可以自己log出來看看，就會比較了解。 15 | 16 | window可以想成是你的整個畫面、整個瀏覽器，所以一些範圍比較大的東西都跟window有關，順便有提到全域變數就是會依附在window上面 17 | 18 | ### 基本程式概念複習 19 | 變數、判斷式、迴圈、函式 20 | 21 | ### 新技術討論 22 | sass/scss/less的差異以及起源 23 | 我解釋說css在以前不被注重，一直到現在越來越被當成是一回事，現在寫scss其實就跟寫程式沒什麼兩樣，能夠幫助我們更快的寫出好的css。sass跟scss的差異在於大括號，還有scss跟css相容。less我就不熟了。 24 | 25 | Single Page Application 26 | 我有稍微講了一下backbone, angular, ember這三套都是在做差不多的事情，就是把前端的網頁變成跟一個桌面軟體、一個app差不多，所以前端也會有mvc，前端也會有router要去管理 27 | 28 | 29 | ## 相關資源 30 | 1. [Learn to Code HTML & CSS](http://learn.shayhowe.com/html-css/) 31 | 2. [高雄前端社群 -前端資源懶人包](https://docs.google.com/document/d/13nK_XY9u5uIleTpSCw88lMupzgCSwXd6j6je44eLhMQ/edit?pli=1) 32 | 3. [學習html與css](http://marksheet.io/) 33 | 4. [前端工程——基础篇](https://github.com/fouber/blog/issues/10) 34 | 5. [CSS 最核心的几个概念](http://www.jianshu.com/p/3a18fcd9fcda) 35 | 6. [为JavaScript程序员准备的10本免费书籍](http://info.9iphp.com/10-free-javascript-books-for-beginners/) 36 | 37 | -------------------------------------------------------------------------------- /case/case2.md: -------------------------------------------------------------------------------- 1 | # 2. 政大商科自由譯者 2 | 3 | ## 背景介紹 4 | 四大商科畢業，英文能力極佳，目前當自由譯者，以接案、翻譯為主要收入來源。想要幫自己開拓新的技能或是創業，覺得程式這一塊會是未來趨勢，因此想知道一些程式相關的背景 5 | 6 | ## 疑問 7 | ### 各式各樣名詞解釋 8 | 這邊直接先丟講解全盤的觀念，包括各個程式語言之間的差異與應用的領域。 9 | 10 | 像是手機應用程式就分兩塊（自動忽略Windows phone XD），iOS就是Objective C跟Swift，Android就是Java，近期也會有用javascript之類的寫出手機程式，這是native跟hybrid的區別。 11 | 12 | Ruby是一個程式語言，Rails是一個框架，搭配在一起之後就可以寫網頁，因為提倡的概念：「慣例優於配置」，所以減少許多開發流程，因為很多東西都在背後被做掉了。而現在又講究快速開發，因此Rails就爆紅了，到現在還是很紅。總之rails就是快速開發很厲害。 13 | 14 | Python跟ruby很像，兩個只需要會一個就好，而python+django其實就跟ruby+rails是差不多的東西，但是rails的資源應該會比較多。 15 | 16 | php也是後端語言，搭配一個叫做laravel的框架是目前最夯的寫法，而laravel許多概念都與rails相同，所以php+laravel就跟ruby+rails差異不大，許多共通的概念。 17 | 18 | node.js則是近期興起的一個東西，主要是因為可以讓javascript脫離瀏覽器，脫離之後就可以做許多事情，現在甚至可以做到跨平台，可以寫桌面應用、app、後端、前端，甚至連硬體有些也可以用javascript做出一些功能。javascript跟java沒什麼關係。 19 | 20 | Java跟C++就算是比較「中規中矩」的語言，所以才會被本科系拿來當做初學語言，因為可以了解一些計算機的基礎概念。 21 | 22 | 網頁分成前端跟後端，前端是html, css, javascript，後端則是看你選擇什麼語言而定。前端就是你看的到的，後端就是背後處理商業邏輯之類的。 23 | 24 | ### 工作機會 25 | 在我看來，後端最多機會的就是php跟rails，這兩個職缺隨便找都有 26 | 27 | ### 工作需要會的技能 28 | 我直接開alphacamp跟inside上面的職缺跟課程內容會學到的東西給他們看，然後講解各個名詞大概是什麼，要找工作大概需要會什麼。 29 | 30 | ### 非本科與本科系的差異 31 | 大致講解資工系必修在學些什麼，像是計算機概論、程式語言、計算機組織、演算法與資料結構、線性代數、作業系統等等 32 | 33 | ### 學習方向與資源 34 | 以工作為導向的學習，最直接的方法就是：上網找職缺需要的工作內容。 35 | 然後再依據這一份內容自己訂定學習計畫，把上面提到的都弄懂了，也差不多可以開始找工作了。 36 | 37 | 像是這個case英文能力極佳，很推薦國外的開放式課程，像是cs50據說就很棒（我自己是沒上過），英文能力好的話資源多超多，國外教學文章一定比中文的多，所以想學什麼就學什麼。 38 | 39 | 40 | ### 資源整理 41 | 1. https://zh-tw.coursera.org/ 42 | 2. https://cs50.harvard.edu/ -------------------------------------------------------------------------------- /case/case3.md: -------------------------------------------------------------------------------- 1 | # 3. 四大工科大二學生 2 | 3 | ## 背景介紹 4 | 大二學生，之前修 python 的課以後就對寫程式很有興趣，那堂課高分過關。 5 | 之後打算修一些資工、電機系的課。 6 | 7 | ## 疑問 8 | ### 資工系的課在修什麼 9 | 我依據我自己的經驗以及修過的課，給了他一些方向 10 | 11 | 1. 計算機組織與組合語言（台大資工） 12 | 計算機組織就是更深一點的計算機概論，把之前講到的那些東西都講得更深更難，例如說 cache 就是跟你講有什麼L1, L2 然後是怎樣做到的，採取的方法是怎樣，或是跟作業系統、編譯器也有講到一點，因為課程名稱有組合語言，所以作業很多都是寫組語，用 online judge 的方式，就是把程式碼在網站上submit，系統就會跟你說對或是錯、用了多少時間，還可以看排名，十分有趣。 13 | 14 | 2. 計算機組織與結構（台大資管） 15 | 其實課程內容跟資工的那門課很像，但這門課比較多是在講一些理論的東西，實作部分比較少，也是有組合語言的作業，但只有一兩次而已，其他都是在講計算機組織的東西。 16 | 17 | 3. 演算法與資料結構 18 | 這部分我自己沒修過，但因為高中的時候比過程式競賽所以略懂略懂，我只跟他說修這門課你人生應該會很精彩。 19 | 20 | ### 機器學習 21 | 這部分其實我也不是很懂，我只大概講了一個「推薦系統」的 case，例如說在資料庫裡面你發現大部份人買A的時候也會買B，你就可以推測說買A的人應該也會喜歡B，因此推薦B給買A的人。 22 | 23 | 不過這背後有更多更多的數學模型跟統計相關知識需要學習，我完全不懂所以也無法多講。 24 | 25 | ### 組合語言 26 | 與起講解什麼是組合語言，不如直接拿組合語言的程式碼給他看，於是我就讓他看一段我以前寫的組合語言的code，稍微解釋一下`mov`, `cmp`, `jeq`這些指令所代表的意義，還是很簡單地講述暫存器的概念，就把它當成是記憶體的一塊位置就好。 27 | 28 | 這邊也有稍微提到逆向工程，把原本的執行檔反組譯成組合語言，再去trace code最後分析出一些資訊。例如說常見的破解版軟體、序號產生器之類的原理。 29 | 30 | 像是序號產生器就是反組譯驗證序號的那一塊程式碼，理解以後根據規則寫出可以符合規則的序號產生器。（這邊其實我也不是很熟，如果有講錯的話麻煩大家糾正） 31 | 32 | ### 指標 pointer 33 | 我提到在C裡面有一種東西叫做「指標」，通常初學者在這邊會死一半以上。 34 | 35 | 我們一般的變數所存的資訊是「值」，指標這種特別的變數，所存的資訊是「記憶體位置」。要理解這個概念就必須知道說你宣告一個變數，背後的行為是什麼。 36 | 37 | `int a = 50;` 38 | 背後就是系統分配給`a`這個變數一個記憶體位置`0x66`（舉例用），並且在裡面放入`50`這個值。 39 | 40 | 在C裡面，用`&`取出一個變數的記憶體位置，所以你`printf("%d", &a)`會是`0x66`。 41 | 42 | 接著指標登場了，我們用`int *ptr`，前面加個`*`表示說`ptr`是一個指標，接著`ptr = &a`，讓`ptr`「指向」`a`的記憶體位置，也就是`0x66`。 43 | 44 | 然後我們讓`*ptr = 30`，指標前面加個`*`代表取值的意思，所以`0x66`這塊記憶體的值會等於`30`，最後`printf("%d", a)`，就會出現30。 45 | 46 | 我還講了指標跟陣列的關係以及`function pointer`，這邊有興趣的可以自己去查詢。而且我也不是很會，所以無法講太多XD 47 | 48 | ### 推銷mac時間 49 | 他問我說：你覺得mac怎麼樣？ 50 | 然後我就講一堆mac的好處，順便跟他說如果你不用mac，也要會基本的 linux，反正你遲早要碰到的。 51 | 52 | 稍微跟他介紹ubuntu作業系統。 53 | 54 | ### 遊戲 unity 55 | 他問我說想做遊戲的話呢？ 56 | 我說現在幾乎都是用一套叫做unity的遊戲引擎在做，第一是因為跨平台，第二是因為他把許多「輪子」都做好了，你不必自己重複造輪子。 57 | 58 | ### 職涯規劃 59 | 他說他第一志願是鼎鼎大名的群暉，我跟他說那你把資工系必修的那些資料結構、演算法、計算機組織與結構、作業系統跟C都練熟，就差不多了。 60 | 61 | 62 | ## 相關資源 63 | 1. [C - Function Pointer](http://godleon.blogspot.tw/2008/01/c-function-pointer-function-pointer.html) 64 | 2. [Function Pointer：(指向函數的指標)](http://computer-learning-note.blogspot.tw/2013/08/pointer-to-functionaka-function-pointer.html) 65 | 3. [演算法筆記](http://www.csie.ntnu.edu.tw/~u91029/) 66 | 4. [語言技術：C 語言](http://openhome.cc/Gossip/CGossip/) -------------------------------------------------------------------------------- /case/case6.md: -------------------------------------------------------------------------------- 1 | # 政大俄文畢業 2 | 3 | ## 背景 4 | 政大俄文畢業，之後發現自己對數理與邏輯類的東西不排斥，想踏入前端工程師的領域。 5 | 6 | ## 疑問 7 | 8 | ### 該用什麼寫網頁？寫完怎麼跑？ 9 | 其實網頁（html檔）就跟一般的文字檔差不多，只是有著固定的格式而已，所以你把這個檔案拿去放到記事本裡面也可以開，這邊推薦一個文字編輯軟體：[sublime](http://www.sublimetext.com/) 10 | 11 | 開啟的話，把檔案丟到瀏覽器上面就可以開了 12 | 13 | ### html, css基本教學 14 | html就是一個網頁的結構、內容，css就是外觀、裝飾 15 | 16 | ``` html 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | ``` 25 | 26 | 上面這是一個很基本的html架構，最外面用`html`標籤包起來，`head`裡面放一些資訊，`body`裡面才是你真的網頁的東西（使用者看到的東西）。 27 | 28 | 其實html就是用許多標籤來表示出有結構的內容，若是覺得html不太直覺，可以先參考以下例子： 29 | 30 | ``` xml 31 | 32 | 33 | peter 34 | peter@gmail.com 35 | 1234 36 | 37 | 38 | 39 | nick 40 | nick@qq.com 41 | 2222 42 | 43 | 44 | ``` 45 | 儘管我沒有解釋上面這段是什麼，但是從那些`標籤`跟`內容`就可以猜測出這份文件大概是在做什麼，就是會員的一些資料等等。 46 | 47 | html也是一樣，差別在於`標籤`的種類不太一樣而已。 48 | 49 | 這邊簡單介紹了一些html的元素，像是`div`, `span`, `a`, `ul` 50 | 51 | css的話就是對元素裝扮，弄成自己想要的樣子 52 | 那要怎麼知道對哪一個元素？就是靠我們的`選擇器` 53 | 54 | ``` css 55 | #intro{ 56 | color: red; 57 | } 58 | 59 | .block{ 60 | color: yellow; 61 | } 62 | ``` 63 | 64 | 前面加上`#`表示你要選擇的是id，`.`代表class 65 | 66 | 這邊就講一些html跟css的基礎跟需要注意的事項，這邊我就不再贅述 67 | 有興趣的可以自己去找教學來看 68 | 69 | ### 很多「框架」是在做什麼？例如說現在很紅的React是什麼？ 70 | 71 | 72 | 我們在寫程式的時候，不太可能每次都「自己造輪子」，我們會傾向拿一些現有的資源、別人已經幫你開發好的功能，再以「這個東西」為基礎，開發出我們想要的功能。「這個功能」就是所謂的框架，它已經幫你完成部分功能，並且跟你說：「html應該放這邊喔！」、「js程式碼應該這樣寫喔！」，定義好一些規則，你就照著那些規則下去開發。 73 | 74 | 那其實很多框架的目標跟可以做的事情都是一樣的，只是看你選擇哪一套框架而已。每一套框架都有各自的「規範」還有定義需要遵守。 75 | 76 | ### 新創公司的好與壞 77 | 好處就是組織結構扁平、溝通流暢、風氣可能會比較開放 78 | 壞處就是薪資待遇可能不會很好，公司有倒掉的風險 79 | 80 | 至於選公司可以從面試的時候問一些問題更了解 81 | 1. 若是錄取以後會負責的項目 82 | 2. 公司目前在用的技術有哪些 83 | 3. 公司的流動率高不高 84 | 4. 目前專案進行的模式為何 85 | 86 | 公司環境也是滿重要的一點，選一個自己覺得舒適的辦公室也是很重要的事 87 | 88 | 89 | ## 資源整理 90 | 91 | 1. [Learn to Code HTML & CSS](http://learn.shayhowe.com/html-css/) 92 | 2. [高雄前端社群 -前端資源懶人包](https://docs.google.com/document/d/13nK_XY9u5uIleTpSCw88lMupzgCSwXd6j6je44eLhMQ/edit?pli=1) 93 | 3. [學習html與css](http://marksheet.io/) 94 | 4. [javascript教學簡報](https://drive.google.com/folderview?id=0B-a_eyF__oG6b2owS2ltQ21pX2M&usp=drive_web) 95 | 5. [Sublime Text 全程指南](http://zh.lucida.me/blog/sublime-text-complete-guide/) 96 | 6. [我的 Coding 學習計畫：一天一個，用 180 天架 180 個網站！](http://buzzorange.com/techorange/2013/08/01/i-am-making-one-website-a-day-for-180-days/) 97 | -------------------------------------------------------------------------------- /case/case4.md: -------------------------------------------------------------------------------- 1 | # 4. 財務會計 2 | 3 | ## 背景介紹 4 | 剛畢業一兩年，在某間公司當財務會計，平日很忙，只有假日才有空學一些新東西，覺得寫程式好像不錯所以突然想學，但是不知道從何開始。 5 | 6 | ## 疑問 7 | ### 前端工程師與後端工程師差別 8 | 前端就是你看得到的那些畫面，後端就是你看不到的、背後的商業邏輯。 9 | 舉例來說，你去Google看到的搜尋畫面，就是前端工程師的範疇，當你點下「搜尋」以後，要怎麼做到「搜尋」這件事情，就是後端工程師要去思考的了。 10 | 11 | ### 自學coding如何開始？該如何找資源？ 12 | 他說他有用過[codecademy](https://www.codecademy.com/)，我也推薦這個網站與其他的教學網站，接著帶他看了一遍這上面的課程，稍微解釋每一個類別是什麼： 13 | 14 | 1. html, css, javascript 15 | 這些都是拿來寫網頁的（我們先忽略javascript與node.js，避免一次吸收太多會混亂），html就是網站的「內容、骨架」，css就是網頁的「外觀、衣服」，所以一個網站的美觀與否通常都是由css決定的，只要換css就可以幫網頁換一件衣服，會有不同的風格。 16 | javascript是在網頁上面寫程式碼，例如說你要跳一個視窗、做一個跑馬燈效果，就是他來負責。 17 | 18 | 2. jQuery 19 | 一個js的`library`，函式庫，就是假如你原本用js寫要十行的程式碼，jQuery幫你包裝好以後，現在只樣兩行就能達成同樣功能。 20 | 21 | 3. php 22 | 後端的程式語言，處理一些商業邏輯之類的行為。 23 | 假設妳現在有一個「商品介紹」的頁面，那就是html可以搞定的，但是你今天若是要加上「購物車」的功能，就必須有後端伺服器。 24 | 25 | 4. python, ruby 26 | 這邊我不太知道怎麼介紹腳本語言，所以我簡單帶過，然後講一下ruby搭配rails可以快速開發網站。 27 | 28 | 5. rails 29 | 就是ruby的一套framework，這邊我也不太知道怎麼描述「框架」這個概念，所以我說：「框架跟程式庫有點像，一樣是事先幫你包裝好許多東西，你只要照著規則走，就可以事半功倍，因為很多事情框架都幫你做好了」 30 | 31 | 6. API 32 | 簡單來說就是提供給別人的程式接口，像是現在許多網站可以用臉書登入，你可以想成是臉書提供了一個「API」，一個可以讓其他工程師使用的接口，工程師把自己的網站接上這個接口之後，就可以跟臉書所提供的登入功能互通，於是就可以用臉書登入了。 33 | 34 | 7. angular 35 | js的framework，跟前端有關的。這邊我簡單帶過而已。 36 | 37 | 8. command line 38 | 在 windows 底下叫做「命令提示字元」，mac 底下叫做「終端機」，可以用指令完成許多操作，例如說簡單的讀寫檔案、新建資料夾都可以，工程師必備的技能之一。 39 | 40 | 9. sql 41 | 這跟資料庫有關，有後端的網站一定需要資料庫來儲存資料，那要怎麼查詢裡面的資料呢？這個時候就有一套已經規定好的語法格式，會有一些指令可以使用，例如說「我要帳號是aaa的會員的姓名、信箱」，翻成指令可能就是`select name, email from members where username='aaa'` 42 | 43 | 10. java 44 | 這邊我也簡單帶過，就說Java可以寫桌面應用、Android跟web後端 45 | 46 | 11. git 47 | 版本控制的軟體，程式開發的時候版本控制很重要，或是可以先簡單想成「備份檔案」。 48 | 假設今天一個網站要改版，但是要怕改版之後會爛掉，那當然要先備份起來，以往的作法可能是複製一份放在其他地方然後改檔名，但是自從`git`出現以後，它提供了更方便的指令來做版本控管這件事情。 49 | 50 | ### 如果想要有自己的作品，該使用哪個平臺？ 51 | github，大家都把自己的作品放在上面給大家看 52 | 53 | ### 如何想轉職，怎麼選擇好的軟體公司？ 54 | 1. 看工作內容 55 | 2. 看公司福利 56 | 3. 看面試時候的公司環境 57 | 4. 上網查詢公司相關資訊 58 | 59 | ### 程式跟數學的關係？ 60 | 有些程式不需要數學，例如說今天你要寫一個很簡單的購物車，你需要會數學嗎？不用！ 61 | 但是今天如果你想加一個「推薦系統」，就像是「你可能也會喜歡、其他人也瀏覽過...」的這種功能，你就需要數學了。因為背後都是一些數學模式在做這些事情。 62 | 63 | 或是講聲音辨識跟影像辨識好了，背後就是一堆數學模型跟公式，你要怎麼把聲音轉化成數字？要怎麼把背景雜訊去掉（降噪）？要怎麼從一段音檔裡面提取出一段特徵值？要怎麼跟其他的音檔做比較？這背後都是一堆數學。 64 | 65 | ## 相關資源 66 | 1. [codecademy](https://www.codecademy.com/) 67 | 2. [codes school](https://www.codeschool.com/) 68 | 3. [tut+](http://tutsplus.com/) 69 | 1. [Learn to Code HTML & CSS](http://learn.shayhowe.com/html-css/) 70 | 2. [高雄前端社群 -前端資源懶人包](https://docs.google.com/document/d/13nK_XY9u5uIleTpSCw88lMupzgCSwXd6j6je44eLhMQ/edit?pli=1) 71 | 3. [學習html與css](http://marksheet.io/) -------------------------------------------------------------------------------- /case/case5.md: -------------------------------------------------------------------------------- 1 | # 5. 資管碩畢 2 | ## 背景介紹 3 | 資管所畢業，但因為是管理組所以對程式沒那麼熟悉，最近工作上會用到php，所以想要了解php相關的東西。有寫過asp。 4 | 5 | ## 疑問 6 | 7 | ### php簡單介紹 8 | 因為有學過asp，所以php這邊的簡單介紹還滿順利的，基本上php跟asp都是在做同一件事情。會需要asp跟php是因為，我們需要一些「動態」的東西，例如說使用者登入以後都會有個歡迎頁面，「XXX，你好！」，如果我們純粹只用html，是沒有辦法達成這樣的功能的，因為html是靜態的，輸出的內容永遠都一樣。這個時候我們就會需要php，動態針對不同的使用者輸出不同的內容。 9 | 10 | ``` php 11 | 15 | ``` 16 | 17 | ### php流程控制、迴圈 18 | 其實與c#大同小異，最大差別在於「型態」 19 | 20 | c#屬於`靜態型別`的語言，你在宣告變數的時候需要指定型態；而php屬於`動態型別`，不需要指定型態就可以使用。 21 | 22 | 要特別小心的是在做整數跟字串相加的時候有可能會出現問題。php屬於`弱型別`，所以會自動做型別轉換。 23 | 24 | ps. 這邊發現我當時有點小講錯，把靜態動態與強弱弄混了，可參考[Static Typing, Dynamic Typing, Strong Typing, Weak Typing](http://swaywang.blogspot.tw/2013/04/static-typing-static-typetype.html) 25 | 26 | 至於流程控制、迴圈的程式碼都跟其他的差不多 27 | ``` php 28 | if($score>=60){ 29 | //pass 30 | }else{ 31 | //fail 32 | } 33 | 34 | for($i=0;$i<10;$i++){ 35 | //... 36 | } 37 | ``` 38 | 39 | ### php函式、陣列 40 | 其實也都大同小異，但php的陣列比起c#較為自由 41 | index可以用字串來當，也不用事先指定大笑 42 | ``` php 43 | $arr = array(); 44 | $arr[0] = 10; 45 | $arr["hello"] = "world"; 46 | ``` 47 | 48 | 函式的話因為滿像的所以就沒講了 49 | 50 | ### 如何與資料庫連結？ 51 | 一般在使用資料庫你會到一個後台去下指令，然後就會有結果跑出來。 52 | 在php裡面，有提供內建的函式去做這件事情。 53 | 1. 你把要查詢的query給php 54 | 2. php幫你拿去資料庫執行 55 | 3. php幫你把結果拿回來 56 | 4. 你在php裡面對這些結果做事情 57 | 58 | ```php 59 | //資料庫位置 60 | $db_server = "localhost"; 61 | 62 | //資料庫名稱 63 | $db_name = "course"; 64 | 65 | //資料庫管理者帳號 66 | $db_user = "username"; 67 | 68 | //資料庫管理者密碼 69 | $db_passwd = "password"; 70 | $mysqli = new mysqli($db_server, $db_user, $db_passwd,$db_name); 71 | 72 | //對資料庫連線 73 | if(!$mysqli){ 74 | die("Connection error: " . mysqli_connect_errno()); 75 | }else{ 76 | $mysqli->select_db($db_name); 77 | $mysqli->set_charset("utf8"); 78 | } 79 | 80 | //下指令 81 | $sql="select id from users where username=? and password=?"; 82 | $stmt = $mysqli->prepare($sql); 83 | $stmt->bind_param("ss",$username,$password); 84 | $stmt->execute(); 85 | $stmt->bind_result($id); 86 | if($stmt->fetch()){ 87 | // 有資料 88 | 89 | }else{ 90 | //沒資料 91 | } 92 | $stmt->close(); 93 | ``` 94 | ### session的觀念 95 | 由於`http`的連線是沒有狀態的，所以server要怎麼知道現在的request跟上一個request是同一個人？或是說，在你登入之後，server要怎麼知道你已經登入了？這個時候就要靠session這個東西。 96 | 97 | session可以儲存一些資訊，每次在發送request的時候就會帶著這段資訊一起到伺服器去，例如說今天你登入以後，server給你一張通行證，可能是一段看起來很像亂碼的英文加數字，你每次都帶著這通行證，server就知道說你是同一個人了。 98 | 99 | ### 簡單資訊安全觀念講解 100 | 第一個講到的是SQL injection，因為它的書上的教學所用的sql語法是用字串串接的方式，所以有可能會有一些資安上的疑慮，比方說你的程式碼原本是這樣： 101 | ```php 102 | //輸入帳號：peter 103 | //密碼：a123 104 | 105 | $sql = 106 | "select id from users where username = '" + $user + "' and password = '" + $pwd + "'"; 107 | 108 | //會變成 109 | select id from users where username = 'peter' and password = 'a123' 110 | ``` 111 | 112 | 那如果有人輸入一段很奇怪的帳號：`' or 1=1--` 113 | ```sql 114 | select id from users where username = ''or 1=1--' and password = 'a123' 115 | ``` 116 | 117 | 由於`--`是註解的意思，所以後面的語法會被忽略 118 | `or 1=1`永遠成立，所以這個敘述永遠都會查到東西，也就是永遠都可以登入成功！ 119 | 120 | 所以在php請愛用`mysqli`系列指令或是其他安全的作法。 121 | 122 | ### git是什麼？ 123 | git是一個版本控制的程式，假如說我今天有個專案要加一個新功能，可是我怕程式碼改壞，這個時候通常都會先備份，以往作法可能是新開一個資料夾，複製一份，改壞的時候弄回去就好。 124 | 125 | 但是git出現以後就成為了工程師愛用的程式，可以很方便的完成多人協做開發跟版本控制這幾件事情。 126 | 127 | github是一個放git repo的平台。但不只程式碼，其實你想放什麼都可以。 128 | 129 | 130 | 131 | ## 相關資源 132 | 1. [codeschool](https://www.codeschool.com/) 133 | 2. [codecademy](https://www.codecademy.com/) 134 | 3. [台大新創企業媒合](http://ntuea.ntu.edu.tw/wearesomatch/) 135 | 4. [連猴子都能懂的git入門指南](https://backlogtool.com/git-guide/tw/) 136 | 137 | 138 | -------------------------------------------------------------------------------- /case/case7.md: -------------------------------------------------------------------------------- 1 | # 新鮮人工程師 2 | 3 | ## 背景 4 | 剛畢業，之前寫過php，找工作則是找到寫asp.net的，所以現在在公司是寫vb.net，對node.js有興趣 5 | 6 | ## 疑問 7 | 8 | ### exports與module.exports的區別 9 | 可以參考這篇：[exports 和 module.exports 的区别](https://cnodejs.org/topic/5231a630101e574521e45ef8) 10 | 11 | 我這邊快速講一下，先看下面這個例子 12 | ``` javascript 13 | var a = {name: "peter"}; 14 | var b = a; 15 | 16 | console.log(a); // peter 17 | console.log(b); // peter 18 | 19 | b.name = 'nick'; 20 | console.log(a); // nick 21 | console.log(b); // nick 22 | /* 23 | b = a 這行是說「b存的內容是a所指向的記憶體位置」 24 | 所以當b的值變了以後，a也會跟著變 25 | 因為他們是同一塊記憶體位置 26 | */ 27 | 28 | b = {name: "good"}; 29 | console.log(a); //nick 30 | console.log(b); //good 31 | 32 | /* 33 | 現在把b指到一塊新的記憶體去，所以b改變了 34 | a依然維持原樣 35 | */ 36 | ``` 37 | 38 | 那其實上面提到的那些，你可以看成這樣 39 | ``` javascript 40 | module.exports = {}; 41 | exports = module.exports; 42 | ``` 43 | 44 | 其實這就跟上面的`a`跟`b`的例子是一樣的，也就是說，`exports`是指向`module.exports`，但要注意的是，實際上導出的是`module.exports` 45 | 46 | 所以你可以 47 | ``` javascript 48 | 49 | //方法1 50 | exports.name = "nick"; 51 | 52 | //方法2 53 | module.exports.name = "nick"; 54 | 55 | //這兩個方法其實是一樣的 56 | 57 | //或是你可以 58 | module.exports = { 59 | name: "nick" 60 | } 61 | ``` 62 | 63 | 但是你不可以 64 | ``` javascript 65 | exports = { 66 | name: "nick" 67 | } 68 | ``` 69 | 上面這例子就像一開始那個`b = {name: "good"}`一樣，你會把`exports`重新分配一塊記憶體並且指向，而原本的`module.exports`依然是`{}`，所以不會導出任何東西。 70 | 71 | ### express基本操作 72 | 我覺得沒什麼比看code更能快速了解一個架構，所以直接帶著看[ntucourse.info](https://github.com/ntu-infoplat/ntucourse.info)這個project，基本上就是分成：`views`, `models`, `service`, `routes`這幾塊。 73 | 74 | ### Promise 75 | 以往在javascript裡面進行非同步操作的時候可能會碰到幾個問題，例如說`callback hell` 76 | 77 | ``` javascript 78 | getUser(function(users){ 79 | getFriend(users[0].id, function(friend){ 80 | getPost(friend.id, function(post){ 81 | console.log(post); 82 | }) 83 | }) 84 | }) 85 | ``` 86 | 87 | 那自從我們有了`Promise`以後，可以變這樣 88 | ``` javascript 89 | getUser().then(function(users){ 90 | return getFriend(users[0].id); 91 | }).then(function(friend){ 92 | return getPost(friend.id); 93 | }).then(function(post){ 94 | console.log(post) 95 | }); 96 | ``` 97 | 98 | 就把原本的層層結構壓平了，你只要一直`.then`就好 99 | 但事實上這樣子的寫法依舊有些問題，而且也不是很好看 100 | 於是到了`es7`，目前有一項功能叫做`async/await` 101 | 102 | ```javascript 103 | async function getData(){ 104 | var users = await getUser(); 105 | var friend = await getFriend(users[0].id); 106 | var post = await getPost(friend.id); 107 | console.log(post); 108 | } 109 | ``` 110 | 111 | 是不是很棒！ 112 | 根本就是當做同步的程式碼來寫，只是前面多了一個`await`而已 113 | 可以這樣寫其實是因為ES6多一個東西叫做`generator` 114 | 想知道更多可以參考我之前寫過的：[[Javascript] Promise, generator, async與ES6](http://huli.logdown.com/posts/292655-javascript-promise-generator-async-es6) 115 | 116 | ### 其他framework 117 | 介紹了一下nodejs除了`express`以外還有`sails.js`，那這套其實就跟`rails`很像，就像是php有`laravel`一樣，這三套其實我覺得概念都滿相同的。 118 | 119 | ### React and React Native 120 | 就大概提一下React的基本概念，很多小元件組成一個大元件 121 | React Native可以用React的概念來寫native的mobile app 122 | 有興趣可以自己參考一些資料 123 | 124 | ## 資源整理 125 | 1. [nodejs包教不包會](https://github.com/alsotang/node-lessons) 126 | 2. [node入門](http://www.nodebeginner.org/index-zh-tw.html) 127 | 3. [七天學會nodejs](https://nqdeng.github.io/7-days-nodejs/) 128 | 4. [给 JavaScript 初心者的 ES2015 实战](http://gank.io/post/564151c1f1df1210001c9161) 129 | 5. [React Native 帶來的跨平台 mobile app 開發典範轉移](https://speakerdeck.com/coodoo/react-native-dai-lai-de-kua-ping-tai-mobile-app-kai-fa-dian-fan-zhuan-yi) 130 | 6. [ECMAScript 6入门](http://es6.ruanyifeng.com/) 131 | 7. [深入浅出ES6](http://www.infoq.com/cn/articles/es6-in-depth-an-introduction) --------------------------------------------------------------------------------