發表文章

目前顯示的是 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-Build ps 完整命令 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.js 3.引用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/lar

[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不會有作用