2014年9月15日

ASP.NET MVC - 真正的Web前端套件管理工具Bower

如果說…Scott Gu發表了Blog文章,那就代表了Azure又一堆東西要更新了…而如果是Scott Hanselman發表文章,那就代表著Microsoft這邊的Web開發又有新玩意了… ( 所以本質上,小弟本人滿討厭他們發文章的XDD )

而這次要探討的就是由Scott Hanselman發表的一篇文章,這篇文章的內文,大致上是講VS 2014將更加地符合現代前端的開發使用者,並且支援NPM、Bower、Gulp這些東西…

啥,完全沒聽過!?…其實沒聽過也是正常的,畢竟這些都屬於前端的玩意,Microsoft陣營的朋友可能都沒聽過,但對於JavaScript的神人,這些東西就等同於我們的NuGet一樣的平凡,而且每天都在用喔!!~~

所以今天來看一下Bower這個玩意…

Bower

是Twitter推出的,管理Web Package的一個工具,是的,他很像NuGet,我們可以透過Bower來進行套件的下載、相依性的管理;那大家的第一個疑問是…那和NuGet有啥兩樣!?…根據Scott的解釋是說…NuGet是Server端的套件管理工具,而Bower是前端的套件管理工具…那為什麼NuGet不能包含前端呢? ( 其實現在也有包含前端 ),Scott是說,因為目前已經有很多很棒的工具了…既然如此,那為何不用人家準備好的工具呢!??

好…基本上政治議題不是我們能關切與參與的…身為Developer,我們只要知道未來有怎樣的改變就好,所以…我們還是來看看Bower吧!!

image

首先,我們要安裝Bower之前…我們要先安裝npm…而npm則需要Node.js…所以大家可以翻翻小弟之前的文章,基本上Node.js很好安裝的;安裝完成之後,我們就擁有了npm,我們就可以輸入以下指令來安裝bower。

image

安裝完成之後,我們就可以隨處的安裝我們要的套件…,如果不知道有那些套件,可以從官網去做搜尋…

image

那接下來要怎樣安裝套件呢??大家可以參考官網的說明,基本上可以用install就可以來安裝套件,後面還可以接Git喔!!

image

那這邊,我有開了一個BowerTest的專案,我打算在這個空的專案底下裝上AngularJS;所以我就可以輸入。

bower install angular

但按下後,就遇到問題了…Orz…那是因為Bower下載需要透過Git…而且要設定PATH… ( 到這邊大家有沒有覺得其實Microsoft以前都幫我們處理得好好的,真的很幸福!? )

image

接下來,大家可以去網路上下載Git,然後再自行設定PATH,或是和小弟一樣,將很懶的個性發揮到極致…

小弟這邊的做法是去GitHub下載GitHub for Windows,這樣就有Git的指令了…但是雖然有Git的指令,但還是沒有設定PATH,而小弟也懶得去設定…所以小弟就直接打開Git Shell…

image

然後再一次,就可以了!!

image

基本上,bower會將下載來的東西放到bower_components底下…

image

大家如果看到上圖,應該會覺得,為啥AngularJS的東西那麼少…其實大家可以去AngularJS的GitHub看到,它們把所需要的東西都拆開了喔~~,如果想要一次下載全部版本,也可以去找angular-latest的這個版本。

image

自訂Package

接下來,我們可以自行定義Package,這邊指的Package有兩種涵義,一種是自己開發的Lib包成Package,放到Bower Server給大家下載;另外一種涵義則是把自行常用的東西包成一個.json檔案,到時候可以快速的一次下載;而這邊講的是後者喔。

首先,我們可以使用

bower init

這個指令,這個指令可以幫助我們建立bower.json檔案,到時候我們就可以把這個檔案Copy到其他專案快速重新下載Lib使用;過程中,會問一些小問題,後面會解釋到。

image

這邊列出了bower.json裡面用到的參數,那基本上也和建立bower.json時所問的問題差不多,相信大家比較一下大概就會清楚了,基本上,如果是自用,大概只需要填名稱,其他全部都選yes就可以了。

  • name (必填): 你的package名稱,如果未來要放到Bower Server上,公開給別人使用,則需要特別注意名稱。
  • version: 版本號。
  • main string or array: 你這個Package主要的檔案。
  • ignore array: 你希望Bower略過的檔案。
  • keywords array of string: 如果放到Bower Server上,關於你這個package的關鍵字,這有助於被容易尋找到。
  • dependencies hash: 相依的package,也可以標明版本。
  • devDependencies hash: 開發用的dependencies。
  • private boolean: 如果設為True,就可以防止被傳到Bower Server上去。

另外上面的選項還有what types of modules  does this package expose?,表示你使用哪一種JS的modules…例如 amd、es6等等…通常沒特別的話,按下enter,略過就可以。

set currently installed components as dependencies? 是否將目前安裝的套建設為依賴。
add commonly ignored files to ignore list?: 是否添加常用忽略的文件列表。

完成之後,就可以看到,再根目錄,出現了bower.json檔案嚕。

image

將新的套件加入到bower.json裡面

另外,我想應該不會有人想要每次加入一個新的套件,就init吧…所以官網有提供以下指令,可以讓大家再加入新套件的時候,順便寫到bower.json檔案裡面去。

image

這邊,我們就加入bootstrap~。

image

完成之後,我們就可以看到,相依了bootstrap了喔!~

image

還原

最後就是要進行還原,我們這邊開了一個新的WebApplication專案;接下來,我們把bower.json拷貝過來。

image

然後輸入bower install,就會立刻還原成功了喔!!!

image

有沒有很簡單勒??…當然,官方還有一些API,大家如果有興趣的話,可以再去看一看喔!!

參考資料

2014年9月14日

TechDays 2014 - 使用 Azure Web Site 打造雲端網站 - 全方位的網站管理、佈署與監控技巧

今年的年度聚會TechDays 2014又結束了,每次TechDays結束,就意味著暑假也結束了,今年夏天又要過了,然後,到了年底,就是趕案子加班的日子了…抖抖…

今年TechDays講的主題是"使用 Azure Web Site 打造雲端網站 - 全方位的網站管理、佈署與監控技巧",那相信有很多朋友在等著錄影檔,所以這邊就先不多說廢話,先供奉上錄影檔在說嚕。

Demo影片下載

PhotoWall的Source Code

接下來,就是Sky的碎碎念與幕後花絮了,有興趣的朋友,再繼續往下看下去吧=v=

準備

如果有拿到光碟的朋友,大概也會看到下面這張圖,這張圖其實是小弟我在準備講這堂課前的手稿…( 嗯..字醜不是重點.. )

2014-09-08 23.07.04

當初規劃這堂課程的時候,心中也有很多疑問,到底要端出怎樣的菜色給大家??

其實這是一個沒有答案的問題,來上課的朋友,有些人可能完全沒碰過Azure,有些人在實務上已經用的很深入,而有些人搞不好連Azure是甚麼都不知道… ( 讓我想到那個徽章…Azure是甚麼?能吃嗎??XDD );那我在Demo的時候,到底是要把一個一個的功能去做展現,還是要把東西串起來,又或者是要從頭開始介紹Azure ??

後來小弟我決定的是,將Azure串起來進行Demo,而不是一個功能一個功能去作呈現;會選擇這個的原因,是因為希望讓台下的朋友們,感受到的是一個整個Azure的整合與應用,而非單獨一個功能一個功能。

所以後來敲定的流程,就是從一個專案的開始,從建立專案,到佈署、開發、監控與各種關於Azure Web Site的功能與使用…

當然,這也造成後續整個講課過程delay …

影片

其實如果可以,小弟我也百萬個不願意用影片Demo QQ…

如果有朋友Follow小弟的FB…其實就可以發現在TechDays前的一兩個月,就已經聽到小弟在FB狂抱怨New Portal… ( 但畢竟人家是Preview…也怨不得人家阿QQ… )

在過程中,第一個遇到的問題就是慢…New Portal的UX真的非常慢…接下來,就是不穩定因素太多…小弟我在實驗過程中所遇到的問題其實滿多的,而且也沒辦法避開… ( 常常這次ok,下次失敗… ),所以最後也只能決定放棄直接Demo,改用影片的方式…畢竟在過程中,實在是沒辦法讓大家看到一直不斷失敗的Demo阿…

所以最終決定的就是錄影片了…

中秋節

不知道大家有沒有發現,TechDays固定是星期2、3、4…然後一定是中秋節過後的那個禮拜!! ( 其實小弟也是今年聽前輩說才發現… ),而今年中秋節整整的三天放假,就努力的在錄那些影片…是的,整整三天都在錄…沒去烤啥肉 ( 電腦是快燒起來了… ),也沒看到月亮 ( 到是有看到檯燈… ),那為什麼短短的幾支影片,就需要耗掉三天!?;其實應該反過來說…就是因為會需要耗掉三天,所以才不敢當場Demo阿!!!!~

但不管怎樣,其實我覺得三天放假都在搞這些,也都還好,畢竟3天對小弟來說是72小時,但如果沒準備好,當天現場出狀況,如果以500人計算,70分鐘乘上500,就不是短短的72小時了;我相信每個講師的心中想法都是一樣的,大家都背負著台下每個人的每分每秒,所以大家通常會抱怨的都是系統不穩XDD,而不會抱怨說沒辦法放假,無法過中秋=V=。

縮小架構

其實在真實上,錄出來的影片 ( 錄失敗的就不說了 ) ,成功的影片不只上面那些,大概整整快多了兩倍…當初初期的規劃,其實還有建置測試的環境;但計算時間的時候,就發現時間不夠用了,所以就把測是那塊的環境建置,全部給砍了…

PhotoWall

這個事情是發生在錄影片之前,也是畫架構圖之前臨時決定的應用程式;其實當初並沒有特別要準備一個應用程式,比較將重心放於Azure的功能面上,後來看到Ruddy師傅、黃忠成老師都準備了一些很棒的Demo,才決定做一個PhotoWall,而後來也將整個Demo串起來…

而當初預期最好的狀況是,Live建置環境,然後Live Coding,最後讓會場的大家可以直接將照片上傳到Azure上去…

image

但後來還是沒辦法成真,其中一個原因就如前面說的…New Portal有一些問題、其次就是時間上的不允許…

所以到最後,就演變成這個範例先準備好,而以這個範例為核心,用類似回顧的方式,來介紹Azure的服務,而Code的撰寫部分,就只能犧牲掉了…

投影片

雖然說砍掉了很多東西,但其實到最後,投影片也累積了97張…如果以現場70min來說,97張投影片,都快要可以變成動畫了…Orz…所以在講課前,其實就已經預測到會延誤下課了= =+。

講課過程

過程中,會緊張嗎?…其實也不是第一次講課了…而且在台上往下看,也真的只能看到第一排XDD,其餘幾乎都只看到探照燈..Orz…所以其實完全不會緊張…

但這次講課的過程中,卻有一些沒處理好的事情,舉例來說,發光碟這件事情…其實當初應該是要把光碟先放在講台前…後來忘記了…Orz…所以在傳遞的過程中也遇到一些小問題…

其次;過程中幾乎都是座著講…其實我自己是比較喜歡站著的,但就如前面說的,在看完投影片後,大概也可以預期一定會延誤下課,所以後來就變成專注於趕課…所以也沒辦法站起來好好講QQ…所以其實嚴格說起來,這次的備課,是有一點缺失的~~想給的東西太多,沒有再好好精簡的結果阿!!~

其次就是影片的撥放,到後期,我也感受到,整個影片其實是很跳動,又很快的…所以這部份也在這邊和學員說聲抱歉>"<…

下圖是剛開放進場的狀況…

2014-09-09 16.38.41

當然,在這過程中,還是要感謝上圖坐在第一排,幫忙當跑退的好友饅頭兄,真的很感謝他義無反顧地幫小弟我發光碟>"<~

後續

目前還沒拿到大家的意見回饋,但除了上面提到的缺失外,影片、Code的提供,其實也可以早一點放到投影片上面給大家拍…這樣大家就不用等著這篇文章的出現…

此外,以前有老師說過,台上一分鐘,台下十年功,其實真的一點也不錯,雖然只有短短的70min,但我相信不管是哪個老師,從頭地收集資料,然後篩選出適合大家的課程內容,再經過不知道幾次的review,調整;其實到上台前一分鐘,大家可能都還在調整投影片,為的就是能讓各位朋友有更多的收穫~~也為的是台下朋友聽完那滿足的表情~~

當然,很多東西小弟也沒做到盡善盡美,也有很多不好之處,這也請大家多多包涵了。

那最後,還是要感謝當天來聽課的朋友,與背後支持的朋友,謝謝大家!~明年TechDays見嚕~

TechDays 2014 遊記

首先,這篇不是筆記,如果要找上課筆記,那可以去全台灣最陽光的黑暗大的家裡,找到筆記喔XDD。

TechDays已經是每年必定參加的年度大拜拜了…從2010年開始,小弟就每年固定參加,到今年,也正式邁入第四年!!而為了參加TechDays,每次到新的工作環境,面試的時候,必定都會問面試官…"請問貴公司,每年是否可以去參加三天的TechDays??",而好家在的是,現在我們公司連問都不用問,是全公司都被"強迫"參加XDDD,我們都笑稱這是公司年度的員工旅遊阿~~( 老實說,這種員工旅遊還不賴說~~ )

Day – 1

第一天一樣起個早,不過從去年開始,因為整個搬到台北來了,所以不用像以前一樣,還要搭很早的高鐵北上~~而在前往會場的路上,其實就陸陸續續看到很像要去參加大會的Developer!!( 有聞到同類的感覺~ )

2014-09-09 08.41.32

每年必拍的看板,目前已經累積到四張看板照片了XDD,這次Study4.TW一樣有參加喔!!

2014-09-09 08.43.53

這是我們的攤位,但今年小弟實在是非常忙碌,所以這攤位到最後就變成了大家的休息區…沒有和twMVC或是背後有超級金主的SQL PASS有豐富的準備…這是我們社群今年要檢討的… ( SQL PASS還有$$可以請工讀生耶.>"<. )

2014-09-09 09.05.43

每年必定參加的KeyNote,今年TechDays也邁入了第20年,而這場,也是塞滿最多人的一場,當時小弟到會場的時候,連位置都找不到了…(哭)

2014-09-09 09.31.43

Eric老大的酷照;當然,重點不是老大他,而是那閃亮的蘋果!!,與其說他在展示跨平台應用,不知為何,更感覺他在Show他的Apple = =…

不過不管怎麼說,以前這種大會,一定只能出現IE、不能出現Apple的條文,現在也逐漸改變了,MS逐漸地走向Open,而Eric老大這邊拿出Apple Demo的意味就不是那麼的單純而是深遠了~

2014-09-09 09.56.09

此外,這次還有請到國外的研發部門來講課,他要Demo的是海量數據的分析。

2014-09-09 10.56.05

他們實作了全球最複雜的倫敦地鐵海量分析,透過這個分析,可以分析出,在哪個時間點,那些電梯、硬體,可能會出現故障!!

2014-09-09 10.59.04

Dev Team、IT Team結束之後,是Office的Team…從排場也可以看出,哪個Team是有賺錢的…Orz…這次Office Team竟然請到了邰智源…果然明星一出場,氣勢,場子的感覺就變了,變得很熱鬧。

2014-09-09 11.30.53

基本上,第一天早上都待在大會堂,下午開始,小弟就準備自己的課程,所以就沒拍照片了…過程中,偷偷的去偵查王寧疆老師的Application Insights ( 因為小弟也有上到… ),然後看黃忠成老師將MVC掛在PI上面… ( 但因為要準備,沒辦法認真地聽… )。

最後一場,就是小弟自己的場次了,以下是進場的照片~~

2014-09-09 16.38.41

講完之後,第一天就結束了~~

Day - 2

進入第二天,又起了一個超級早…因為第二天的第一堂就要去擔任Kent的助手…所以7:30以前就已經到會場討論了…

以下是第二天第一堂的進場畫面… ( 小弟我也只有空拍進場畫面阿XDDD ),然後就開始擔任助手了~~

2014-09-10 08.29.37

結束之後,終於比較有閒,可以到處去晃晃,首站當然是MVP攤位,這是每年都會出現的MVP簽名板;也順便推廣一下,年底有大型的比賽與活動喔,有興趣的朋友到時候可以關注一下…( 絕對不是MVP Group推出了啥Online Game喔.. )

SONY DSC

今年MVP攤位很特別的準備了充電講座,讓主舞台之外,外場還有由專業的MVP來講一些深入的技術。

SONY DSC

這場是由昏睡領域的克拉克前輩,帶來架構上的議題,可惜這次沒有投影機,不然應該會更棒。

SONY DSC

克拉克前輩很認真地講解中,雖然克拉克前輩都說,他講課台下都會睡一片,所以才叫昏睡領域,但實際上,很棒啊!! 大家都很認真地再聽說…

SONY DSC

這時候小弟我也順便偷拍,第二天最後一堂要講課的18王爺XDD,他準備的超認真的,完全無視( 沒發現到 ),我再偷拍他 = =+…

SONY DSC

後來我同事(紫色衣服那位.)也跑進來聽,但沒位置了,所以我就把我的位置讓給他,跑去到處晃晃… ( 絕對不是我不想聽克拉克前輩上課喔!! )

SONY DSC

後來在外面遇到保哥~果然,講課拿他作梗的事情,被他發現了XDDDD,所以這邊補上一張他的照片,來感謝他一下… ( 四年後,又可以拿來做梗XDD )

SONY DSC

後續就顧著攤位,還有去聽Bill叔的課程,但畢竟手機開發的經驗不足,所以整場就沒閒暇可以拍照…( 其實有偷偷的睡著一下…Orz… )

最後一場,18王爺的課程,講的是Cordava,也就是原本的PhoneGap拉出來的東東,可以透過撰寫HTML、JS,來讓你的應用程式跨不同的平台!!

2014-09-10 16.59.23

當然,免不了的Hello World還是要的XDD

2014-09-10 17.13.41

就這樣,第二天結束嚕!!~

Day - 3

第三天的第一場,就跑去贊助Demo哥的網站開發技巧;喔,對了,請大家忘記Demo的中文名子喔~

2014-09-11 08.36.26

Demo流暢的Demo (好繞舌),果然贏得滿堂彩,根據內線情報指出,還有人在會場講說,學到超多東西呢!!

2014-09-11 08.59.55

當然,Demo哥絕對不會忘記置入式行銷的 (菸)… 不過如果書的內容不好,還置入式行銷就不好了,但實際上,這本書真的很值得買~~

2014-09-11 09.51.10

第二場是Dino的場次,講SignalR!!,去年Dino也是負責SignalR喔~

2014-09-11 10.19.20

Dino一開始講,就整場鴉雀無聲…Dino完全Live Coding…把小弟的完全影片Demo打假的XDD。

2014-09-11 10.37.54

早上結束之後,中午休息,就到三樓晃晃,這次三樓的攤位還滿熱鬧的,有送各種不同的徽章,還有可以客製化徽章喔!!

另外Azure Girl養成計畫不知道是誰提的…但不知道為何,看到這幾個字,就讓我想到Franma = =…

SONY DSC

比較酷的是,趕上時尚潮流,這次TechDays竟然搬出了霜淇淋機器…

SONY DSC

會場中,也捕獲了野生Aska XDDD。

SONY DSC

除此之外…msdn攤位,也有很多精美的海報可以拿喔~~

SONY DSC

今年天瓏又搬出了10kg抽獎,這又讓我想到以前的IE 9 Party…

SONY DSC

晃啊晃,後來聽說Bibibi來了,所以又晃回MVP攤位,這時候Bibibi已經在講課了…

SONY DSC

就如FB大家所說的,從來沒看過認真的Bibibi…而他留下的名言就是…除了技術以外,還有很多事情值得去做~~

SONY DSC

結束了中間的行程後,下午繼續支持朋友的場次,這場是Bruce的場次喔!!

2014-09-11 13.28.55

因為他躲在角落,所以只能遠遠的再拍一張…

2014-09-11 14.05.44

老實說,我也好幾年沒寫Web Forms了,沒想到Web Forms現在變化那麼大!!!而Bruce也提到,ASP.NET vNext目前與Web Forms無緣阿…

2014-09-11 14.34.05

聽完之後,又回到攤位顧攤…直到最後一場,由Ruddy師傅與Franma攜手合作的黃金場次。

2014-09-11 16.38.00

祖師爺級就是不同…無論是深度、換場、內容,都無懈可擊阿… ( 記得,想看筆記的話去找陽光的黑大XDD )

2014-09-11 17.07.32

那基本上,聽完這場,三天的TechDays也進入了尾聲…

後記

現在隨著時代的進步,網路上影片、資訊也越來越充足;那到底還要不要花錢去聽TechDay?,老實說,我是覺得還是值得的,雖然價格不低,住在台北以外的朋友可能還要花費住宿,車錢,請假費用…也或許後續可以從網路上看到影片等等…

但只有真的去過後,就會發現,這種成長,並不只是技術上的成長,還有心靈上的成長,會場中,你可以看到不同的技術人員,不同的高手在會場上穿梭,而與那些高手討論交流的過程,跟本不是看影片就可以得到的,所以,如果資金上許可,還是建議大家可以實際的去晃晃,相信會有不同的收穫喔!!

最後,大家明年見嚕!!