js來寫Chatbot (00:36)做我的side projectOK 所以我用我本身的經驗來跟大家講一下我可能會用哪些資源、用哪些工具那Node.
js我相信大家對這個都有一定得瞭解那JavaScript除了可以寫前端以外他也可以寫後端所以它其實是一個非常強大的程式語言我們在開發中都遇到一個非常重要的事情就是靠____管理 (01:03)我們現在不可能自己造車、造輪子那甚至是造原料所以基本上我們會在做開發的時候我們都會用到非常多別人做好的套件那在Node.js上面它有個工具叫做NPM然後它全名叫做Node Package
Manager那我們就直接來看一下它到底是怎麼運作的那我現在就來為大家做一個非常非常快速的Node.js的簡單介紹那其實老話重談就是安裝環境其實最簡單的步驟那通常都是上官網看一下那如果是Windows的話就是直接上Node.js的官網進行安裝就好我現在這台電腦上面已經安裝好我們來看一下它目前版本那我就Node的版本 目前的版本是10.9剛剛也有講到NPM只要裝完Node.
js之後它NPM就會隨附這是強迫贈送不過你也是必要的所以這是免費贈送那我們來看一下NPM的版本那它是6.2那我們確認完環境之後我們就可以準備來新增專案那我先建個資料夾讓我的桌面不會那麼的骯臟OK example然後再切到example裏面去那做完這些步驟之後我就開始可以開始初始化我的專案我就key指令一個叫做npm init初始化專案按下Enter之後它其實也有一步驟一步驟問例如說 你這個package名稱要叫什麼那括號後面就是就是預設如果沒有問題就直接按下EnterOK
那你版本是什麼那例如說描述 我就直接打今天日期你的entry point然後等等相關的 沒有問題的話它就會給你看一個看你這樣的結構是不是正確
沒有問題就是一樣案下Enter 沒有問題那我們就來看一下裏面到底有什麼東西你可以看的到裏面只有一個檔案叫做package.json我們來看一下雖然這其實剛剛它問我們的一大堆資訊 有沒有問我們例如說你的名子叫什麼、版本、描述、author是誰那NPM我們剛才也講到它其實是一個管理套件的工具所以例如說
我可能想用jquery我們平常可能就是去GitHub下載jquery回來放在自己的資料夾然後再輸入路徑那在這邊就不太一樣你就可以接npm install jquery那就會開始去從網絡上去下載那它還改變了哪些東西呢我們可以來看一下我們來看一下這邊他多了兩個東西一個叫做node_modules、一個是package-lock.json那我們來看一下node_modules其實他就是把jquery檔案下載回來有沒有在這邊
那package-lock他其實記錄了更詳細的一些package的相關資訊那我們現在就來做一個範例就是我用express這個http Server來透過Node.js來直接run一個hello world的網站所以那第一個步驟我就是要安裝expressnpm
install express --save那--save就是要把存在本機端那剛剛也有講就是我們不可能會閉門造車所以你可以看一下在這一行它其實總共加了48個Ppackages進來也就是說express其實depend其他47個 有沒有所以其實到現在已經不可能在自己造車了那我們剛剛看完簡單的操作以後大家應該會發現我們螢幕上有一個IDE就是說開發工具
OK那這個IDE比較奇妙的是它不是Visual Studio它叫做Visual Studio Code
OK它雖然說名字很像但是它們其實幾乎完全不一樣它是透過Electron開發的所以說它是跨平台不論是要Mac, Windows, Linux全部都支援那它也是現在GitHub上最熱門的專案那它的star, Pull
request, issue都是非常非常的活躍 (05:42)所以不用擔心說 你可能遇到問題問你怎麼辦遇到問題直接上去開issue一定會有人幫你解決、會有人回答你那如果你覺得缺少甚麼功能你可以自己做那你Pull
request給他沒有問題他會幫你merge我相信這也是一件非常有成就感的一件事情那我還是要來介紹一下Visual Studio Code它到底大概是怎麼運作怎麼使用 OK那我就跟大家介紹一下那接下我們就回到Visual
Studio Code我們來新增index.js因為我們剛剛在新增專案的時候其實有看到一個東西叫做entry point那我們剛剛是用預設就是index.
js那如果你想換別的名字就在這修改例如說是 app.js等等那我現在就把express require進來把express
new出來OK 那接下來就是做我的網頁設定例如說 app.get然後路徑是根目錄然後function有request跟response那我這個response要做的當收到這個的時候
它要做的事情就是送一個叫做Hello TechMRT那我把我的網頁設定完之後我現在就要設定我的Web server要listen哪一個port例如說 3000好了那在來的話加一個listener就是說
當其中成功listen的時候就來log一下例如說 start listen port
3000那基本上非常簡單的一段程式就這樣寫完了那沒有問題之後我們就開啓VS Code的terminal直接執行 OK你看得到它就已經開始listen port
3000我們來直接開網頁有沒有就非常簡單Hello TechMRT所以你看因為我剛剛這邊打的目錄是斜線那所以我可以再隨便多一個例如說 可能要叫Test好了那我就來重新啓動那我就直接/test其實Node.js是非常非常簡單的上手純JavaScript寫法速度也很快那我們剛剛介紹完了開發工具以後還是回到一個老問題我要怎麼學習、我怎麼上手那我還是要在這邊跟大家介紹一個微軟出的服務叫做Microsoft
Learn它是一個完全免費 而且線上的服務那在這裏面它有一堂課程就是教你如何使用Node.js搭配express來做開發那我們剛剛也看完Microsoft Learn那接下來我就不得
也不是說不得不一定要跟大家介紹一下身為一個open source的開發人員一定要知道的東西GitHub我相信大家絕對都聽過GitHub有的人可能還沒有使用不太知道怎麼使用沒有關係我現在就來跟大家講一下怎麼使用那GitHub它其實有很多功能最主要的功能它是可以拿來存放Code他透過Git的方式讓你可以去做程式碼的版控 OK除了做程式碼的版控以外你還可以開一個各人頁面針對你這個專案開一個各人頁面那還有的話就是 你可能程式都會有bug這個肯定是百分之百逃不掉的開發人員宿命就是如此
很可憐所以你一定想要去抱怨所以這個時候就是到issue OK那open source還有一個很重要的一個culture重要的文化 就是大家都可以做貢獻所以大家做貢獻的方式就是透過Pull
request那最後還是老話重談 我們都是在本機上做開發我相信本機一定滿足不了開發人員的慾望我們一定會希望把我們的服務開放給全世界人使用那我在這邊要跟大家介紹一下Azure Web App這個PasS服務是怎麼讓開發人員可以很方便的把你的網站服務搬上去我現在就來為大家介紹一下Azure
Web App但是在這邊其實就有點不一樣 OK因為Web App它除了Windows以外它其實也支援了Linux環境那我今天
現在就要跟大家介紹一下Linux環境的Web App那我現在就直接新增 Web App我們就直接給它一個名字20181019ttt
OK那我一樣resource group就選現有的那你可以看到它其實支援了OS的Windows跟Linux我是就選Linux OK那這邊簡單來講就是你要run的是Code還是要run的是Container那App Service方案那最後有一個比較重要的地方就是你要run哪一種程式語言跟他的版本它其實在上面都有你就可以自己去選擇所以像我剛剛是Node.
js所以我可能這邊就選Node.jsOK 那沒有問題我就按下建立在建立完之後其實Web App除了OS不一樣以外其它剩下的操作界面基本上就是一模一樣所以那如果有興趣的話可以回去看第4集有簡單介紹一下這個部分所以像剛剛講的
其實你可以看到完全就是一模一樣除了OS設定Linux以外剩下的真的幾乎都一模一樣當然在Linux上面有些功能可能就是還沒有所以就可能就暫時沒有辦法但是剩下的其實完全的一模一樣但是多了一個好東西就是它提供你SSH那我們剛剛也已經介紹Azure Web App那但是有個問題來了我們每次發新版本的時候都自己手動嗎你們不會覺得這個方式有點浪費時間、有點笨嗎所以我在這邊要跟大家介紹一下Azure DevOps
Services它其實提供了你CI/CD的功能而且是免費的 你不用付任何一毛錢你就可以做到免費那甚至你可能有私人專案也沒有問題 OK因為你可能有一些像可能是有些其他的服務可能是如果是私人專案可能就要付錢 OK但是Azure
DevOps Services它的收費方式是只要你的team member在5個人以下它就是完全免費 OK所以你不用擔心你要付錢部分那我們接下來就來看一下Azure
DevOps Services到底是怎麼跟GitHub之間做整合那針對Azure DevOps Services
live demo這部分我就給大家demo的部分就是build live的CI/CD我這邊已經建好一個專案叫做20181019那裏面其實什麼都沒有、都是空的它也沒有Code我要用它的功能叫做Pipelines那我就來點選一下New pipelines那當然它提供了非常非常多不同的source來源那預設就是Azure
DevOps裏面的Repos但是問題是我站在open source的角度來想我最愛的還是GitHub所以我們的Code都還是放在GitHub上面那GitHub上面 第一個它是需要你去做author的登入那去驗證你的存取權這樣它才有辦法去存取你的GitHub底下所有的Repository那我現在已經登入完了 OK那第二個的話就是要選取我要針對那個Repository去做CI那這邊就會列出我所有的當然你可以做搜尋小地方跟大家講一下
就是如果你有很多記得要點選擇Load all要不然它其實沒有列出所有的那我今天就直接用搜尋就好了還是要Load all那我選完之後 沒有問題就直接按Continue
然後它就問你你是哪一個類型的專案你可能是Android、你可能是Docker的它針對Docker container有support Python等等 Ant那也有GO
其實都有很多那我這個是ASP.NET Core所以我就直接Apply ASP.
NET Core因為我只是要跟大家demo一下CI的部分就沒人要做CD 所以就不publish了我就把publish的部分Remove掉OK 我只要做Build跟Test那其實到了這個部分的話他其實步驟都非常簡單第一個有個Triggers想要問你的是你是不是每一個comment都要去做一次Build
(15:59)所以你可以去選擇你的Branch不同Branch可以有不同的規則那或者是你的Pull request也需要那甚至是你的daily build都可以那我這邊就直接這樣選擇每一個comment都要就是continuous integration
那再回來Tasks的部分那Tasks其實這邊設定就都沒有太多需要做修改的地方那沒有問題的話就按下Save & queue那這邊有個地方要注意的是看你要把你的build環境是要放在哪個地方它提供你的這個是Windows那這個這邊就寫了Linux跟macOS那甚至有Ubuntu那我這邊就是用預設Linux Preview就直接Save那我們就可以點開來看一下結果那你就可以看得到它其實build就完成了
確定都沒有問題那你的Restore, Build甚至是Test都沒有問題 OK就是很簡單的完成了一個CI/CD的工作使用這個的好處就是如果你是private project也是沒有問題那經過剛剛的講解我相信大家對open
source的開發人員之路都有一個基本的瞭解那我也希望可以在GitHub上面繼續看到大家的貢獻 謝謝大家