如何把Qlik Sense嵌入到Web應用中

（此文章同時發表在本人微信公衆號「dotNET開發經驗談」，歡迎右邊二維碼來關注。)

題記：這是一個給初學者（尤爲對VS不熟悉的BI工程師）的入門操做嚮導。

Qlik Sense是Qlik公司推出的第二代BI產品，它的架構設計的很靈活，實現了先後端分離，因此理論上你能夠只使用Sense的後端，而徹底自定義前端展現。其實Qlik自帶的Hub就能夠看做是一個官方實現的前端。

除了架構的靈活性之外，Sense在前端部分也提供了很強的擴展和集成能力，好比能夠經過Mashup來自定義頁面，甚至能夠把報表或者可視化對象嵌入到外部Web應用程序中。Mashup本質也是一種嵌入機制，區別只是在於Mashup的頁面是由Sense服務器託管。

要在本身的Web應用（好比ASP.NET MVC應用）中嵌入Sense其實很簡單，Qlik已經爲咱們提供了一個針對Visual Studio的插件——Qlik Analytics plugin for Visual Studio（如下簡稱Qlik插件）。固然，若是你不使用Visual Studio的話，也能夠下載Qlik Explorer for Developers。由於嵌入方式主要在前端，因此嵌入的Web應用能夠是任何開發技術開發的。Qlik插件的基本功能就是讓咱們能夠瀏覽Sense中的全部元素，並把腳手架代碼添加到咱們的項目代碼中。

具體的步驟以下：

1，安裝Visual Studio 2015 Community，完成VS的安裝後，下載並安裝Qlik Analytics plugin for Visual Studio。

2，啓動Visual Studio，經過菜單「View-Other Windows-Qlik Analytics for Visual Studio」來打開插件，以下圖所示：

 

3，在Qlik插件中，點擊左上角的服務器圖標來鏈接到Sense服務器。服務器能夠是桌面版的地址（http://localhost:4848/）也能夠是本機或者遠程Sense服務器地址（http[s]://server.domain.com[:port]/[VirtualProxy]）。以下所示：

4，Qlik插件鏈接到服務器或者桌面版以後，根據不一樣的鏈接地址，顯示的內容有所不一樣。鏈接桌面版會列出qvf，而鏈接服務器會先顯示全部流，在流之下再顯示App。在每一個Sense App下面會列出其包含的書籤、字段、主可視化對象（包括篩選器和列表）、主維度、主度量、變量、工做表（Sheet）。每一個工做表下面還會列出包含的可視化對象。以下圖所示：

5，在Qlik插件中的下半部分，有Preview和Code兩個標籤頁。在選擇一個可視化對象的時候，預覽標籤頁能夠顯示這個可視化對象的靜態圖。而Code能夠爲選中對象顯示以下信息的腳手架代碼：

• html：基於div的html腳手架代碼，不是全部對象都適用
• 服務器節點：服務器鏈接信息的html腳手架代碼
• App節點：操做和導航按鈕的html腳手架代碼，包括：ClearAll、Back、Forward、DoReload
• 書籤對象節點：啓用書籤的html腳手架代碼
• 字段對象節點：字段操做的html腳手架代碼，包括：Select All、Select Alternative、Select Excluded、Select Possible、Lock、Unlock、Select、Select Match、Select Values、Clear
• 可視化對象節點：可視化對象的html腳手架代碼
• Sheet對象節點：Sheet對象的html腳手架代碼
• id：全部對象節點（不包括服務器節點、流節點和文件夾節點）的實體ID
• iframe：和html相似，只是基於iframe的代碼
• layout：具備id的對象節點的對象模型數據結構的json代碼
• properties：具備id的對象節點的對象屬性數據結構的json代碼

6，經過VS的菜單「File-New-Project」來打開新建項目的對話框，選擇Web模版中的「ASP.NET Web Application」，重命名項目名稱，好比「EmbeddedSense」，以下圖所示：

7，在上圖中點擊OK以後，會讓你選擇ASP.NET所使用的技術，選擇MVC後，點擊「Change Authentication」按鈕，並選擇「Windows Authentication」。這樣作的緣由是爲了經過Windows驗證來單點登陸Sense服務器。固然使用其餘驗證方式也能夠，只是就須要根據Sense的SSO規範來額外作驗證集成的開發。其餘不用修改，就點OK。注意，理論上選擇Web Forms或者SPA也能夠，由於嵌入的主要工做在前端，這裏僅以MVC舉例。以下圖所示：

8，建立好MVC項目以後，_Layout.cshtml文件（在Views\Shared文件夾裏面），在Qlik插件中選擇服務器節點的html代碼，拖動到「</head>」之上，保存更改。以下圖所示：

9，打開「Views\Home\Index.cshtml」文件，把三個「<div class="col-md-4">」標籤裏面的內容刪除。任意選擇三個可視化對象的html代碼，拖動到原來的三個位置中。以下圖所示：

10，按F5運行Web應用，就能夠在首頁上看到Sense的可視化對象已經嵌入到你本身開發的Web應用中了。以下圖所示：

注意：若是可視化對象不能顯示，能夠嘗試使用IE瀏覽器來查看；若是報錯，多是Qlik插件和服務器版本有兼容性問題，能夠把_Layout.cshtml中qlik.setOnError方法註釋掉。

預告：接下來我會分享如何把微軟的Power BI嵌入到你的Web應用中。