Qlik Sense - Mashup Integration mit Drupal CMS auf qvheroes.com
Die Themen Integration und Mashup sind eine der großen Stärken von Qlik Sense. Wir haben unsere Webseite qvheroes.com genutzt, um zu demonstrieren wie man interaktive Qlik Sense Analysen direkt in die eigene Webseite einbauen kann.
Meistens sind Integrationen von Dashboards und Analysen lediglich via HTML und <IFRAME> gelöst; ein <IFRAME> ist jedoch bloß ein unabhängiger "Reiter" der sich innerhalb der eigentlichen Webseite öffnet. Diese <IFRAME> Integrationen haben keine Möglichkeiten auf die Darstellung (den DOM-Tree) der "aufrufenden" Webseite zuzugreifen um diese bei Bedarf zu ändern.
Warum möchte ich, dass meine Analysen mit der Webseite interagieren? Es wäre doch hilfreiche, wenn ein Filter auf meinem Dashboard sich direkt auf die dargestellten Werte meiner Webseite auswirken würde. Sei es nun meine Börsen-Webseite, mein Online-Banking oder ein Online Auto-Konfigurator.
Für unseren Blog-Aggregator qvheroes.com haben wir genau das gemacht, und Qlik Sense direkt in den DOM-Tree der Seite eingebaut:
Der obere Teil der Webseite zeigt einige Analysen zu den gesammelten "Blogs" an. Die Darstellungen sind Qlik Sense Elemente, die wir mit der Mashup API in das Drupal CMS unserer Webseite eingebaut haben.
Weiter unten befinden sich die Liste der Blogeinträge auf qvheroes.com, sortiert nach Datum.
Wie man in dem Video unterhalb sehen kann, interagiert nun Qlik Sense mit der Webseite. Filtere ich auf spezifische Blogs - etwa heldendaten.net - werden mir auch nur noch die Beiträge dieser Quelle angezeigt. Die Buttons "Clear All", "Back" und "Forward" sind hingegen Teile von Drupal, die in Qlik Sense Filter verändern.
Mit QlikView waren derartige Integrationen meist mühsam, vor allem aufgrund der Same Origin Policy die alle modernen Browser implementiert haben, und Integrationen mit dem AJAX-Client erschwert haben. Da Qlik Sense für die Kommunikation auf Websockets setzt, fällt dieses Problem weg:
- Die Qlik Sense Applikation wird über den Hub gebaut, und ist auch direkt auf unserer demo.heldendaten.net QlikSense Umgebung verfügbar. Die einzelnen Darstellungen wurden mittels Qlik Sense Workbench aus der Applikation "herausgeholt" und auf qvheroes.com eingebunden.
- Der "Kleber" der die beiden Welten - Qlik Sense und Drupal - zusammenhält sind dann einige Javascript-Libraries (JQuery, JQuery UI, require.js,gridstack.js) und bloß ca. 150 Zeilen customized Code! Falls jemand die Code-Details interessieren: einfach melden!
Meistens sind Integrationen von Dashboards und Analysen lediglich via HTML und <IFRAME> gelöst; ein <IFRAME> ist jedoch bloß ein unabhängiger "Reiter" der sich innerhalb der eigentlichen Webseite öffnet. Diese <IFRAME> Integrationen haben keine Möglichkeiten auf die Darstellung (den DOM-Tree) der "aufrufenden" Webseite zuzugreifen um diese bei Bedarf zu ändern.
Warum möchte ich, dass meine Analysen mit der Webseite interagieren? Es wäre doch hilfreiche, wenn ein Filter auf meinem Dashboard sich direkt auf die dargestellten Werte meiner Webseite auswirken würde. Sei es nun meine Börsen-Webseite, mein Online-Banking oder ein Online Auto-Konfigurator.
Für unseren Blog-Aggregator qvheroes.com haben wir genau das gemacht, und Qlik Sense direkt in den DOM-Tree der Seite eingebaut:
Der obere Teil der Webseite zeigt einige Analysen zu den gesammelten "Blogs" an. Die Darstellungen sind Qlik Sense Elemente, die wir mit der Mashup API in das Drupal CMS unserer Webseite eingebaut haben.
Weiter unten befinden sich die Liste der Blogeinträge auf qvheroes.com, sortiert nach Datum.
Wie man in dem Video unterhalb sehen kann, interagiert nun Qlik Sense mit der Webseite. Filtere ich auf spezifische Blogs - etwa heldendaten.net - werden mir auch nur noch die Beiträge dieser Quelle angezeigt. Die Buttons "Clear All", "Back" und "Forward" sind hingegen Teile von Drupal, die in Qlik Sense Filter verändern.
Technische Notizen
Mit QlikView waren derartige Integrationen meist mühsam, vor allem aufgrund der Same Origin Policy die alle modernen Browser implementiert haben, und Integrationen mit dem AJAX-Client erschwert haben. Da Qlik Sense für die Kommunikation auf Websockets setzt, fällt dieses Problem weg:
- qvheroes.com ist bei einem amerikanischen Webhoster gehostet
- unsere Qlik Sense Umgebung läuft - wie hier beschrieben - auf einer Amazon Maschine und ist eigentlich über http://demo.heldendaten.net:8080/hub/ erreichbar
- man kann im Qlik Proxy mehrere Domains whitelisten mit denen die Websocket Kommunikation erlaubt wird. Bei uns sieht das folgendermaßen aus:
 |
| Qlik Sense QMC Virtual Proxy Settings |
- Die Qlik Sense Applikation wird über den Hub gebaut, und ist auch direkt auf unserer demo.heldendaten.net QlikSense Umgebung verfügbar. Die einzelnen Darstellungen wurden mittels Qlik Sense Workbench aus der Applikation "herausgeholt" und auf qvheroes.com eingebunden.
- Der "Kleber" der die beiden Welten - Qlik Sense und Drupal - zusammenhält sind dann einige Javascript-Libraries (JQuery, JQuery UI, require.js,gridstack.js) und bloß ca. 150 Zeilen customized Code! Falls jemand die Code-Details interessieren: einfach melden!
