[ Cordova ] 如何在Cordova Apps 使用Application Insights功能

開發好的Mobile APP 及Web Site應用程式,上線後想知道使用者如何使用,想知道有沒有發生錯誤,以往都得靠開發者到處藏Log,不旦無法全面記錄更是件很麻煩的事情。現在Application Insights 可以針對Mobile APP ,Web Site應用程式偵測問題及追蹤使用者使用行為的一項服務機制(目前是預覽版)。現在以Cordova撰寫而成的APP,也可以借用Application Insights 來為您的APP加入追蹤監控的服務,並於Azure上隨時可以看到相關資訊,做為改善APP的參考依據。

由於Cordova APP專案是以JavaScript為技術基礎而成的Mobile APP,所以在使用Application Insights上,我們選擇的是"JavaScript Web 應用程式的 Application Insights"SDK來實作。

首先先到Azure portal 上新增一個Application Insights,請注意這裡指Azure portal是新的Azure portal,網址是https://portal.azure.com/。建立時應用程式類型選擇其它,目前預覽版所在區域只有美國中部,未來正式GA後應該有其它區域可以選擇。

接著我們建立一個簡單的Cordova範例APP,然後透過Plugin加入相機功能,而頁面上則加入一顆按鈕用來觸發照相功能,同時加入一個img元素,用來把拍起來的照片顯示在頁面上。

再來就是要加入Application Insights了,首先在專案上按右鍵選擇已連接的服務,會看到Application Insights,但同時你也會發現到它告訴你這個專案類型不支援Application Insights服務。

沒關係,轉個彎我們可以透過官方提供的Plugin來處理,在MSOpenTech的GitHub上提供了Application Insights for Cordova 的Plugin (https://github.com/MSOpenTech/cordova-plugin-ms-appinsights ),並且同時支援了Android / iOS / Windows三個平台。所以我們只要在專案的config檔介面,利用自訂外掛程式,選擇Git方式把它加進來就可以。

接著就是要把我們在Azure建立的Application Insights服務跟我們的Cordova APP做個連結設定,這樣才可以把追蹤收集到的資料往Azure上丟。首先一樣到Azure portal開啟我們一開始建立的Application Insights服務,然後在設定 -> 屬性 -> 檢測金鑰,把這串Key記錄下來。

然後回到Cordova APP以xml方式開啟Config檔案,找到cordova-plugin-ms-appinsights設定標籤,並在INSTRUMENTATION_KEY的參數上把檢測金鑰的Key值填入。

此外由於安全性的限制,所以必須在page的meta裡加入允許https的外部連結設定,才能把資料利用Xhttprequset往我們的Application Insights服務端送回去。

相關前置作業設定完成之後,接著就是動手開始在頁面上加入想要追蹤的事件了,舉例來說,我想要追蹤每個頁面使用者瀏覽的情況,那麼我們可以在每一個html頁面裡加入以下JavaScript程式碼。

當使用者有進到這個頁面時,就會把記錄往Application Insights服務端送回去,因此在Application Insights裡,就可以收集到相關的資料數據,像是頁面檔案名稱,載入執行時間等等。

又或著想追蹤某個事件及記錄例外錯誤資訊,用來追蹤使用者行為,或監視效能,也可以這麼做,以我們的照相APP來看,可以在照相事件及發生錯誤的程式碼區段加入以下JavaScript程式碼。在appInsights.trackEvent所給的第一個參數是你自訂的名稱,當資料送回Application Insights時會依這個名稱做群組收集起來。

回到Application Insights點選自訂事件數方塊磚,即可以看到已收集到的事件資料。

雖然Application Insights仍然需要開發人員動手寫些程式碼,才能達到追蹤及收集資料的效果,但其程式碼其實很簡單,只要呼叫相對應的API函式即可,並且後端的資料記錄也不需要開發人員自行建立資料庫去記錄,一切都交由Application Insights服務來幫你完成,因此其方便性跟完整性會比自行設計手動刻Log記錄來的更加有效益,不管是現有的或是新開發的Web Site/Mobile App,只需要幾個步驟就可以快速為您的應用程式加入一套完整的追蹤記錄機制,非常推荐大家使用看看。

Ref :

https://azure.microsoft.com/zh-tw/documentation/articles/app-insights-javascript/

https://azure.microsoft.com/zh-tw/documentation/articles/app-insights-get-started/

https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md

https://azure.microsoft.com/zh-cn/documentation/services/application-insights/

 

若本文對您有所幫助,歡迎轉貼,但請在加註【轉貼】及來源出處,並在附上本篇的超連結,感恩您的配合囉。

By No.18