發表文章

目前顯示的是 2015的文章

[AngularJs] 使用ng-repeat-start實作巢狀table

圖片
目前AngularJs的程式,若要呈現表列資訊時,最常使用的是ng-repeat來render table。而在某些需求下,要在每一列的下方再呈現子項目的列表
如下圖:


預設<tr>使用ng-repeat時,一定要有</tr>的結尾元素,所以不能在<tr ng-repeat>..內再插入一個<tr ng-repeat>,會無法取得父層的資訊,而大部份使用的解法是,在<tr>的外層使用<tbody>即可以達到此需求。


[Debug] 自訂視覺化偵錯

圖片
在偵錯時期,VisualStudio內建針對string、xml、DataSet提供了視覺化偵錯,例:文字視覺化檢視、XML視覺化檢視..等



目前在偵錯時,最常用的是要查看List<T>內,每個item的屬性,由於沒有視覺化偵錯,所以須一個一個打開來檢視,這樣的偵錯,多點幾個就要翻桌了...。


[TFS] 使用Exploratory Testing 擴充套件回報bug

圖片
昨天去台北參加2015 Microsoft DevOps Day,看講師demo一個在chrome回報bug給TFS的套件,使用起來很方便,可以直接錄製步驟、擷圖、圈重點,並直接將內容放入bug內。今天上班後,馬上安裝來試試。

安裝 Exploratory Testing 連結:https://chrome.google.com/webstore/detail/exploratory-testing-previ/gnldpbnocfnlkkicnaplmkaphfdnlplb


Jenkins 3 –部署問題排除

圖片
文章開始前先列一下,目前方案下的專案及組態
n個Library專案及2個Web專案。組態區份為: Debug、 Release、QAS、STA、PRD。前兩個是Vs預設,後面3個是根據發佈的環境命名 遇到的問題
     前一篇文章介紹的發行,使用的是MsBuild來建置方案檔.sln。透過發行Profile檔,先建置後再作發行。 這樣的方式,在建置方案後,預設會找出方案下所有的Web專案來發行。依照上述方案架構與組態,會遇幾個問題如下:
第一個Web專案發行後,第2個Web專案會找不到發行Profile檔。ps:我只想發行一個Web專案,第二個專案沒有發行Profile。若建置改成使用特定的專案,例如:只建置A Web。這在建置時,會遇到非預設組態(QAS、STA、PRD),找不到的錯誤,因為其他相依的Library專案,並沒有這些設定,在VS加入時,預設建置設定只加入當時選擇的專案及方案,如下圖 WebApp有QAS,但底下的Library沒有。

Jenkins 2 -基本建置與部署

圖片
前一篇將環境搞定後,開始來作建置與部署的工作。

新增建置工作加入一個建置工作



設定工作組態-指定原始檔管理
User Name /Password 需使用前VSO 的Secondary User Name



設定工作組態-加入建置

加入執行Windows批次指令,執行nuget.exe還原
ps:nuget.exe 已先下載至安裝目錄。

%JENKINS_HOME% : 安裝目錄C:\Program Files (x86)\Jenkins
"%WORKSPACE%   : 工作位置 例:C:\Program Files (x86)\Jenkins\workspace\My-VSO-Daily-Buildps

完整命令

cd %JENKINS_HOME%
nuget.exe restore "%WORKSPACE%\BuildLab.sln"

加入Build a Visual Studio project or solution using MSBuild
使用MsBuild建置成功後,透過發行檔Profile,發行到主機上


完整命令:/t:Rebuild /property:PublishProfile=WebDeploy;DeployOnBuild=true;username=xxx;password=xxxx;AllowUntrustedCertificate=true 測試建置 設定完後,選單左方可以執行[馬上建置],並在Console看到即時的輸出結果


參考來源http://ithelp.ithome.com.tw/question/10109773
http://www.codeproject.com/Articles/878203/Integrate-Jenkins-with-MSBuild-and-NuGet
http://www.dotblogs.com.tw/supershowwei/category/11733.aspx?Show=All

Jenkins 1 - 基本環境設定

圖片
前兩天去MOPCON 2015上課,談到CI Server,大部份都使用Jenkins。這兩天玩了一下,順便將目前的專案導入,將放在VSO的原始檔,作自動化建置及部署。關於Jenkins 網路有很多文章,這裡不作多介紹,本篇只針對目前用到的功能、設定及問題排除作記錄。

建置環境Window Server 2012 R2 Visual Studio 2015 : 建置、編譯、部署,此部份雖可以個別安裝,但實測後,遇到不少問題,所以乾脆將開發工具裝上。 版本控制 : Visual Studio Online Jenkins : https://jenkins-ci.org/ 下載Window版本,裝完後,預設會執行port 8080首頁 管理外掛程式

加入MSBuild Plugin

加入Team Foundation Server Plug-in

工作排程器將參數傳給PowerShell

圖片
測試機上的工作排程,會定期去執行一支PowerShell的命令檔,目前有一需求,要從排程上,將參數傳給PowerShell去使用。相關作法如下在power shell 先宣告一個變數,本例將變數先顯示出來
param($url="")
$url
測試Power Shell傳入參數,進入命令提示字元,切換到Power Shell目錄 C:\Windows\System32\WindowsPowerShell\v1.0
透過-command將參數指給url : powershell.exe –command “d:\par.ps1 –url kim”

測試結果輸出:kim
將參數加到排程上
參考來源https://dmitrysotnikov.wordpress.com/2011/02/03/how-to-schedule-a-powershell-script/

使用IIS作為Proxy轉向Jenkins

圖片
在Window主機上裝了Jenkins,預設port 8080,而DNS指定的port與防火牆只有開放80,若想讓Jenkins在外部也可以連的話,IIS有相關套件可以將domain name rewrite到指定的url 例:jenkins.kimx.info 轉往 localhost:8080

必要安裝URL Rewrite Application Request Routing 這2個套件可以透過Web Plaform Installer安裝

隱藏Public Method沒有註解的警告

圖片
專案若將匯出XML的功能打開Public 方法若沒有註解,會出現警告。雖然不會影響功能,但看到程式碼有個綠色毛毛虫在那兒,總覺得心裡怪怪的...

Web API HelpPage 加入說明

圖片
新增Web專案時,若範本選的是Web API,預設會幫我們建立一個HelpPage的Area


進入首頁後,點上方API連結

解決Razor Intellisense無法使用的錯誤

圖片
今早打開Visual Studio 2015時,出現了載入某個元件的錯誤提示。本想說不去理它,應該下次再重開就好了,但之打開MVC View編輯時,出現了如下錯誤。雖然建置沒問題,但所有的Intellsense提示完全失效....。



ActiveLog.xml

解決方法 清空ComponentModelCache目錄內的檔案
C:\Users\[username]\AppData\Local\Microsoft\VisualStudio\14.0\ComponentModelCache

參考來源https://hanskindberg.wordpress.com/2014/02/27/visual-studio-clear-cache/

使用Azure Power Shell 變更資料庫服務層和效能層級

圖片
目前的專案有一需求是在資料匯入時,將服務層級提高來加快匯入的速度,待完畢後再降回來,避免資源(金錢)的浪費。趁此K了一下最近剛入手的
Azure教戰手札,並撰寫一支Power Shell Script來玩玩。

前置工作 第一次使用PowerShell,需設定ExecutionPolicy: Set-ExecutionPolicy -ExecutionPolicy RemoteSigned
ps:此動作要使用Administrator執行
先確定是否已安裝Azure Power Shell


ps:安裝後,需要重新開機,否則會出現找不指令錯誤

使用Visual Studio Online新的建置系統發佈到Azure

圖片
這幾天在Survery Visual Studio Online CI相關技術,看到一篇文章介紹VSO全新的建置系統 。試玩一下,將VSO的專案發佈成Pacakge並發行到Azure,感覺還不錯用,將目前使用的功能記錄起來。

VSO專案先建立Azure Service

切換到Services Tab加入Service輸入Azure的訂閱資訊,若找不到,也可以從上圖紅框的”publishsettings xml file”下載取得。

[MVC] Razor Views使用預先編譯加快第一次的執行速度

圖片
在發行網站後,每個View被第一次執行時,會進行第一次編譯的動作,並將編譯後的相關檔案複製到”Temporary ASP.NET Files”內(一堆.compiled的檔案)。此為預設的發行選項,好處是隨時可以修改View,不用透過VisualStudio再發行一次,壞處是每次修改及發行後的第一個執行會很慢。上述所說的好處,我想在正式環境上,幾乎也沒什麼機會去作這件事,所以可以不用考慮。

使用預先編譯
發行時使用預先編譯選項,將所有的View都預先編譯好,在第一次執行時,速度會明顯快很多。另一好處是順便會幫你檢查View是否有錯誤,例如:ViewModel已移除的屬性,但View在設計時期,無法知道。
如下圖的發行設定,並將"Allow precomplied site to be update” 移除勾選。


[AngaulrJs] 解決ng-animate引起的效能問題

圖片
前陣子將AngularJs從1.3.18升上1.4.4後,遇到若ng-repeat的資料數目超過約500個時,在第一次繋結很快,但在取得資料再重新繫結時,會有很明顯的效能問題,整個畫面會卡住約5秒。如下sample。
See the Pen ng-animate-slowly-1 by kimxinfo (@kimxinfo) on CodePen.
降回1.3.18測試後,並不會有此問題........。暗...升上來,豈有再降回的道理,立馬使用chrome profile來錄製,看是慢在哪一段。經測試後,發現慢的js是angular-animate.js 。


之前看過1.4.4 的 release note ,想說不是針對ng-animate作了很多bug修正及改善。怎麼會引起效能問題..........重點是,我沒有使用它在ng-repeat上丫....。

[Chrome Extension] YAHOO Dictionary Search

圖片
個人最常用的翻譯工具之一"Google Translate",在chrome安裝相關套件後,可以在網頁選取文字後,按右鍵,前往Google Translate 作翻譯,如下圖。



而我另一常用的翻譯工具"奇摩字典",在商店想找類似的功能,但找不到相關的套件,索性自己寫一個來玩玩。
使用方式

[Sql Server] 當 SQL Server 發生 Deadlock 時,自動發送 Email

圖片
同事分享一篇文章,關於資料庫發生DeadLock時,如何通知管理者。不過內容很簡略,摸了一陣子才搞起來。

Step by Step
1.啟用目標資料庫(本例使用AdventureWorks2014)與msdb的Service Broker。 執行語法前需先將SQL Server Agent停用,等執行後再打開

2.建立DeadlockEvents資料表、排程及通知 此部份引用msdn範例

POC-實作Web與Window應用程式互動

圖片
今天同事提到Spotify,有個很酷的登入功能,在桌面應用程式登入後,再到網頁作登入的動作,會自動登入。登出,再登入,也都不用輸入帳號密碼。但若桌面程式關閉後,Web要登入就要輸入帳密。
  雖不知它實作的機制是如何,但停不住好奇心的我們,花了些時間朝著Web與Window互動的方法去尋找類似的作法。找了幾篇後,在CodeProject剛好有篇文章,介紹到使用 HttpListener讓Desktop與Browser溝通,在瞭解相關作法後,實作了一個類似的Spotify的登入機制。
  如下示意圖,使用者電腦的Desktop應用程式,使用HttpListener在本機Host一個port為60999。瀏覽器透過對localhost:60999Request,會取到目前的登入者作登入。

[AngularJs] 解決UI Bootstrap bindHtmlUnsafe is now deprecated.

圖片
將專案的AngularJS UI Bootstrap 從0.13.0 升上到0.13.3後,在使用typeahead的時候,瀏覽器的console會出現警告訊息 如下圖,提示bindHtmlUnsave已不推薦使用。此問題是我的typeahead有使用自訂的template,而template的內容使用到bind-html-unsafe作html的繫結此行程式我是參考ui-bootstrap 在Github的原始碼,來作比對的highlight用。本想說它既然警告了此用法,那它應該也有修改成正確的寫法才對。但....答案是沒有..解決方法1.將bind-htmjl-unsave 改成ng-bind-html。改完後,引用模組"ngSanitize"。2.加入angular-sanitize.js3.引用ngSanitize參考來源https://docs.angularjs.org/api/ngSanitize

[Window 10] 關閉Windows Defender的即時防護

圖片
最近剛裝完Window 10,想將Windows Defender停用,來增進筆電的效能。最簡單的動作,就是直接將介面打開,將即時防護關掉。但關掉後三不五時會提醒你安全性警告,且重開機後又會自動打開。本想到服務去停用它,但停用功能是鎖住的….WTF。針對此,找到國外有一篇文章介紹到,如何停用"即時防護",相關步驟如下

透過ChangeMonitor實作多個網站同步快取

圖片
目前公司有一個網站執行在Azure上,並將經常讀取的共用資料快取在記憶內。初期網站的負戴量還沒那麼大時,在快取資料上不會有什麼問題,但之後若成長到一定的程度時,網站勢必要作擴展,此時會造成快取的資料在多個Instance是不同步的。針對此找了幾個解決方案
Azure Redis Cache:最多人使用,也是官方推薦使用,效能快,可以輕易作到多網站之間的快取共享。關於Redis更多請參考
ps這適合較大的WebFarm使用,若你的擴展不會很多台的話,可以考慮使用第3個方法。 Database Cache 在Nuget有一套件Ovicus.Caching實作了ObjectCache(.Net4.0新的快取類別請參考),將資料快取在資料庫內。這樣也可以達到多個網站的共享快取,但在效能會比軙慢了點,尤其在大量的快取存取下更明顯。 透過ChangeMonitor監控快取:此方案有別於上述兩個,不作共享快取,只作單機快取。透過監控的機制,在資料變更時,通知所有網站清除本身的In-Memory快取,再作資料的重新取得。

[AngularJs] Protractor-Page Object 實作

圖片
一開始在撰寫測試腳本並不會去考慮reuse這件事,但隨著測試腳本開始變多、變複雜時,就會看到要測同一支程式,但相同的語法散落在不同的腳本。例:a-spec.js與b-spec.js有一大段是輸入表單值的部份。幸好根據此問題,在網路有蠻多篇介紹使用Page Object Pattern的撰寫方式來解決。本文會介紹如何在Visual Studio 2013 如何實作此Pattern。
開發工具設定 Visual Studio的TypeScript Module System需要設定為CommonJs,此為NodeJs載入模組設定

[Power Shell] 透過排程執行 Protractor測試

圖片
這兩天寫完了Protractor測試後,在本機執行沒問題後,將執行語法作成一個.bat檔後,放到測試主機Window Server 2012的排程工作執行。但一直無法出現測試畫面 (但手動執行.bat ok),本還以為是Window 2012後不支援.bat的排程執行=.=,後來查到是要設為"登入時才執行"。

[AngularJs] Protractor實用套件整理

圖片
這陣子在Survery前端e2e測試的一些撰寫方式及輔助套件,將一些實用的記錄下來,以便日後查詢。
開發及測試環境使用NodeJS作測試 Visual Studio 2013+TypeScript撰寫測試Script Visual Studio 套件新增一個Web 空專案
安裝protractor的TypeScript套件 angular-protractor: browser、element、by.model、by.binding 等語法支援 jasmine : BDD測試Script,例: descript( """) it(“’….”)
NodeJS套件執行NodeJs Commad,並切換到專案目錄,執行npm init 初始化package.json,過程會要你輸入相關資訊,按照預設值可以一路按enter,此檔案會建立專案資訊及記錄相依套件 。

npm init

安裝測試套件protractor

npm install -g protractor更新webdriver

webdriver-manager update安裝jasmine-reporters,此套件可以幫助你將測試結果輸出到目錄

npm install jasmine-reporters --save-dev 建立Protractor 組態設定protractor 參考jasmine-reporters 參考



撰寫測試程式 1.直接引用官方範例,在spec目錄下新增caculator-spec.ts的TypeScript檔案



2.執行測試

protractor protractor-conf.js
執行後會啟用chrome瀏覽到測試網頁,並輸入1跟2後送出,再驗證結果是否相符



3.測試結果



輸出到目錄的xml檔案



範例下載:Github

相關參考
http://ramonvictor.github.io/protractor/slides/#/

https://angular.github.io/protractor/#/tutorial

https://github.com/larrymyers/jasmine-reporters

[Entity Framework ] EDMX更新預存程式回傳欄位

圖片
目前使用EntityFramwork 是透過EF Designer幫我們從資料庫產生预存程序的Mode

問題     若已產生的預存程式Model,若有增加欄位,想要自動將Model更新的話,在目前的作法都會將Model手動刪除在加入一次,會這樣作是因為在EF Designer 的功能[從資料庫更新] 都無法成功,如下圖,有更新視窗,但按更新後,Model還是舊的。雖然手動的方式刪除的方式不會太麻煩,但每次刪除,再加入時在版本控管的簽出簽入會有無法繫結的時候。


[Report] 設計報表的備忘錄

圖片
很久一段時間沒有開發報表了,再度接觸Report 2008有種很生疏的感覺,一時之間要找想要的功能,還找不到.............。記錄一下,避免再度迷路。1.報表資料視窗

[AngularJs] 清除html快取

圖片
預設Angular會在使用者瀏覽網頁時,在Route的導頁機制下,會將第一次取到的html下來暫存在Client端,這樣使用者在第二次在瀏覽相同的網址時,就不會向後端的Serve再r取一次html。除非使用者自行重整,或從Route最原始Url進入 例:Index#/ 將#/移除,從Index進入,則快取就會清空。

問題   目前程式中有一功能,會根據挑選的條件而Render不同的html到Client,而該功能作完後要立即導到另一網頁呈現內容。此時該網頁會因前一次的瀏覽而無法向Server取最新的html。根據此問題若Render html的方式是在Client作,是不會有此問題,但基於某些必要的原因,所以需在Server Render Html。

[AngularJs] 重新解析事件

圖片
目前的專案在列表資料的呈現都使用一個共用的MVC Grid,可以搭配後端的IQueryable完成分頁、過濾等功能,根據上述,在前端html的呈現是jquery.Ajax叫用Server端,來Render html到前端。但在Ajax重新Render Html到前端時,Angular的事件會失效

原因 
第一次載入時Angular會依據目前html作繫結,但透過jQuery的Ajax載入另一份html時,則此份html並未繫結angular的事件,如下的Ajax

載回來的部份html,此時若點button,ng-click不會有作用