Herzlich willkommen auf dem Blog der exensio GmbH

exensio ist ein unabhängiges Software-Unternehmen von erfahrenen IT Beratern und Architekten. Zu unseren Kunden zählen namhafte deutsche Großunternehmen.

exensio verbessert das Kommunikations- und Informationsmanagement von Unternehmen. Auf Basis sinnvoller und zweckmäßiger Technologien erarbeiten wir flexible und übergreifende Lösungen für webbasierte Informationssysteme. Abhängig von den Kundenanforderungen realisieren wir Web Applikationen sowie Lösungen auf Basis von Web Content Management- und Portalsystemen. Integrativ, wirtschaftlich und anwenderfreundlich!

Hier gelangen Sie zur exensio GmbH.

Mittwoch, 26. August 2015

Personalisierte Standortkarte mit JavaScript und Mapbox

In diesem Blogeintrag möchte ich kurz vorstellen, wie man mit relativ wenig Aufwand eine personalisierte Karte in eine Webanwendung integrieren kann. So kann man zum Beispiel einen Werksplan anbieten, welcher zusätzliche Informationen für Mitarbeiter und Besucher bereithält oder einen einfachen Standpland für Messen und Feste.





Um unsere Karte darzustellen verwenden wir Leafletjs als Basis. Diese open-source JavaScript Bibliothek ermöglicht eine einfache Einbindung und bietet etliche praktische Plugins. Damit man auch etwas zu sehen hat, benötigen wir zusätzlich einen Tileprovider, welcher die Kartenbilder zur Verfügung stellt. Hier greifen wir auf Mapbox zurück. Mapbox setzt auf OpenStreetMap und Leafletjs auf und bietet eine komfortable Benutzeroberfläche zum Personalisieren der Karte.

Doch zunächst stellen wir eine simple Karte auf die Beine. Dazu erstellen wir einen kostenlosen Account bei Mapbox, generieren eine neue Karte und speichern uns die Map-ID sowie den Access-Token.
Mapbox bietet eine eigene js-Bibliothek an, welche auf Leafletjs aufsetzt. Diese vereinfacht die Nutzung der Karte zusätzlich, indem alle manuell gesetzten Datenpunkte automatisch mitgeladen und nicht über ein GeoJSON oder KML eingebunden werden müssen.

Nun müssen wir nur noch mapbox.js und css in unsere Seite einbinden sowie unser map-Div definieren. Danach setzen wir die AccessToken Variable „L.mapbox.accessToken“ auf den entsprechenden Token und können über „var map = L.mapbox.map('map', ‚map-id‘);“ die Karte generieren. Erstaunlich einfach.

Hier der Code:
   
<head>
 <script src='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
 <link href='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
</head>
<body>
    <div id='map'></div>
 <script>
  L.mapbox.accessToken = 'pk.eyJ1IjoiYXNjaGVpZG1laXIiLCJhIjoiYmMzOWZmMzkzNzg0YzFiNDVjMDE2MGRkYzM1ZjAzZTgifQ.P8vJS0Dn8RO7KNjbHvpsOg';
  var map = L.mapbox.map('map', 'ascheidmeir.n748n4p0');
 </script>
</body>

Nun können wir auf Mapbox die Karte mit Markern, Linien und Flächen personalisieren und zusätzliche Informationen für den Endanwender zu Verfügung stellen. Alle gesetzten Datenpunkte werden automatisch übernommen und sollten nach kurzer Zeit in der Karte erscheinen.

Soweit so gut. Nun wollen wir die Karte noch um die Möglichkeit erweitern, unseren aktuellen Standort zu ermitteln und auf der Karte darzustellen. Auch dies ist dank eines Leaflet-Plugins erstaunlich einfach. Leaflet Locate bedient sich der HTML5 Geolocation API, welche ab IE9 und in allen modernen Browsern unterstützt wird - natürlich vorausgesetzt das Gerät, auf dem der Browser läuft, ist in der Lage seinen Standort zu bestimmen.

Um Locate zu verwenden, müssen wir wieder nur js- und css-Dateien einbinden (entweder von rawgithub oder mapbox) und über L.control.locate({ follow: true }).addTo(map); zu unserer Karte hinzufügen. Mit follow:true aktivieren wir zusätzlich das Tracking des Nutzers.

Vollständiger Code:
   
<head>
 <script src='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
 <link href='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />

        <!-- Location -->
 <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/L.Control.Locate.min.js'></script>
 <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/L.Control.Locate.mapbox.css' rel='stylesheet' />
 <!--[if lt IE 9]>
            <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/L.Control.Locate.ie.css' rel='stylesheet' />
        <![endif]-->
 <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/css/font-awesome.min.css' rel='stylesheet' />

</head>
<body>
    <div id='map'></div>
 <script>
  L.mapbox.accessToken = 'pk.eyJ1IjoiYXNjaGVpZG1laXIiLCJhIjoiYmMzOWZmMzkzNzg0YzFiNDVjMDE2MGRkYzM1ZjAzZTgifQ.P8vJS0Dn8RO7KNjbHvpsOg';
  var map = L.mapbox.map('map', 'ascheidmeir.n748n4p0');

                L.control.locate({ follow: true }).addTo(map);
 </script>
</body>

Ich hoffe dieser Blogeintrag hat aufgezeigt, wie einfach und unkompliziert es ist, eine personalisierte Karte in Webanwendungen einzubinden, welche einen echten Mehrwert für die Nutzer bieten kann.

Dienstag, 4. August 2015

Responsive Webdesign - Layout

Das Nutzerverhalten beim Konsumieren von Webseiten hat sich in den letzten Jahren drastisch verändert. Ständig kommen neue, vor allem mobile, Endgeräte auf den Markt, welche internetfähig sind. Anwender benutzen oft mehrere Geräte für den Besuch einer Seite und erwarten auf jedem die gleichen Funktionen vorzufinden, aber optimiert auf das jeweilige Interaktionsmedium.

Will man also seine (mobilen) Nutzer nicht verlieren steht man unter Zugzwang: wie optimiere ich meine Webseite für all diese Geräte? Auch für Search Engine Optimization (SEO) spielt dies eine wichtige Rolle. Seit dem 21. April 2015 hat Google den „mobile friendly“ Tag aktiviert, welcher in das Pageranking mit eingeht.

Eine prominente Antwort auf diese Frage ist das responsive Layout. In diesem Blogeintrag möchte ich die Hintergründe etwas beleuchten und an Hand eines einfachen Beispiels ein
Responsive Layout auf die Beine stellen.

Abgrenzung

Doch wie unterscheidet sich ein responsive (reagierendes) Layout von anderen Methoden zum Darstellen von Webseiten auf mobilen Endgeräten?

Eine Variante ist die Erstellung einer separaten mobilen Webseite. Wenn der Webserver erkennt, dass ein mobiles Endgerät die Seite aufruft, wird es auf die mobile Version weitergeleitet. Der Nachteil an dieser Variante ist, das mindestens zwei Versionen derselben Webseite gepflegt werde müssen und der Seitenaufbau durch die Weiterleitung verlangsamt wird. Zudem ist die mobile Seite meistens nur für ein bestimmtes mobiles Endgerät optimiert und bietet nur eine stark vereinfachte Version der originalen Desktopansicht.

Eine weitere Variante ist das sogenannte adaptive Layout, bei dem über Breakpoints zwischen mehreren statischen Varianten gewechselt wird. Diese sind auf einzelne Viewports optimiert (meist Desktop-iPad-iPhone) und genau da liegt der Knackpunkt: In dem sich ständig wandelnden Urwald von mobilen Geräten dauert es nicht lange, bis der erste Nutzer mit einem Gerät daher kommt, für das die Seite nicht optimiert ist.

Zuletzt betrachten wir noch das liquid (flüssige) Layout. Hier wir der vorhandene Platz (Breite) immer proportional gleich belegt und keine Breakpoints genutzt. Dies klappt relativ, gut bis man sehr kleine Bildschirmgrößen erreicht, bei denen der Inhalt nicht mehr sinnvoll nebeneinander dargestellt werden kann.

Nun aber zurück zum responsive Layout. Im Grunde ist es eine Mischung der besten Eigenschaften aus adaptivem und liquid Layout. Es bedient sich - wie das adaptive Layout - sogenannter Media Queries um die Darstellung zu optimieren, orientiert sich dabei aber nicht an Endgeräten, sondern bricht nach den Bedürfnissen des Layouts um. Es wird also nicht auf das „mobile Menü“ umgeschaltet weil ein mobiles Endgerät erkannt wurde, sondern weil der Platz für das „normale Menü“ nicht mehr ausreicht. Im Gegensatz zum liquid Layout werden Inhalte je nach vorhandenem Platz auch umsortiert. Diese Vorzüge erkauft man sich allerdings durch eine komplexere Gestaltung, Umsetzung und Anpassung der Webseite. Auch der Aufwand in der Planungsphase mit Kunden erhöht sich, da meist keine Bilder mehr reichen, um die angestrebte Lösung zu vermitteln, sondern interaktive Prototypen benötigt werden.  Doch der initiale Mehraufwand zahlt sich am Ende aus.

Umsetzung

Anhand eines einfachen Beispiels wollen wir nun die Umsetzung eines responsive Layout unter die Lupe nehmen. Wir orientieren uns dabei an der Startseite von www.exensio.de.

Als Erstes stellt sich die Frage, welche Herangehensweise gewählt werden soll: mobile first oder desktop first? Diese Begriffe sagen im Grunde nichts anderes als: „Fange ich mit der kleinsten Ansicht an und arbeite mich zur größten vor oder andersherum?“ Hier gibt es keine definitive Regel. Der Vorteil von mobile first ist, dass man sich zunächst auf die wichtigsten Inhalte konzentriert und das Skalieren auf mehr Platz meist einfacher ist als der gegenläufige Weg. Diese Entscheidung sollte aber primär von der Zielgruppe abhängen - wenn die meisten Nutzer (oder im Fall von Webshops der meiste Umsatz) von Desktops kommen macht es durchaus Sinn mit desktop first loszulegen.
Zurück zu unserem Beispiel. Wir wollen mit der mobilen Ansicht beginnen und überlegen uns deswegen, was die für uns wichtigen Elemente auf der Startseite sind:
  • Logo
  • Menü
  • Bannergrafik
  • Willkommenstext
  • Links zu wichtigen Unterseiten
  • Newsboxen
  • Mitgliedschaften
  • Footer

Nun können wir diese Elemente optimiert für kleine Screens anordnen und davon ausgehend ein Konzept für größere Wiedergabemedien erarbeiten. Wir orientieren uns dabei nicht an vorgegebenen Größen verschiedener Geräte, sondern treffen diese Entscheidungen ausschließlich aufgrund der Usability. Wird zum Beispiel ein Textblock so breit, dass die Zeilenlänge über 100 Zeichen anwächst, ist es eine gute Idee zwei Blöcke nebeneinander darzustellen.
Hier das Konzept:



Anhand dieser Mockups können wir nun sehen, wo unser Layout Breakpoints - sprich Umbrüche in der Aufteilung der Inhalte - besitzt. Um diese umzusetzen, benötigen wir Media Queries, welche in CSS3 eingeführt wurden. Innerhalb dieser Breakpoints ist das Layout bis zu einer Maximalbreite flüssig, das heißt, die Breite der Inhalte ist prozentual von der Breite des darstellenden Mediums abhängig. So verhindern wir, dass der Nutzer horizontal scrollen muss.

Fangen wir mit dem HTML an. Alle Bereiche sind vorhanden, beinhalten aber nur Platzhalter-Inhalt, da es uns in diesem Blogeintrag rein um das Layout geht.

   
<div class="page">
  <header>
    <div class="logo">Logo</div>
    <nav class="main">Hauptnavigation</nav>
    <div class="banner">Banner</div>
  </header>
  <main>
    <div class="main-content">
      <section class="welcome-text">
        <h1>Willkommen</h1>
      </section>
      <article class="loesungen">
        <h2>Lösungen</h2>
        <div class="loesung-1">1</div>
        <div class="loesung-2">2</div>
        <div class="loesung-3">3</div>
        <div class="loesung-4">4</div>
      </article>
      <article class="aktuelles">Aktuelles</article>
      <article class="blog">Blog</article>
      <article class="tweets">Tweets</article>
    </div>
    <aside>
      <nav class="side">Sidenav</nav>
    </aside>
    <article class="mitgliedschaften">Mitgliedschaften</article>
    <footer>Footer</footer>
  </main>
</div>

Das Ganze wollen wir nun mit CSS zum Leben erwecken. Getreu unserem Motto mobile first zunächst einmal das CSS für mobile Endgeräte:

/*
 * Fonts
 */
@import url(http://fonts.googleapis.com/css?family=Montserrat:700);
* {
  box-sizing: border-box;
}
/*
 * Base styling.
 */
body {
  font-size: 24px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #75042F;
  text-align: center;
}
h1 {
  font-size: 1em;
  margin: 0;
}
h2 {
  font-size: 1em;
  margin: 0;
}
.page {
  border-left: 5px solid #75042F;
  max-width: 960px;
  margin: 0 auto;
}
.logo,
nav.main,
.banner,
aside,
article.mitgliedschaften,
footer,
section.welcome-text,
.main-content article {
  vertical-align: middle;
  background-color: #8d8d8d;
  border: 5px solid white;
  border-top: none;
}

Dies sieht noch alles recht langweilig aus. Im Grunde müssen wir für kleine Bildschirme, neben dem grundlegenden Styling, nichts machen. Alle Bereiche sind als Block-Elemente definiert, welche von selbst je eine eigene Zeile einnehmen und sich auf die gesamte Breite ausdehnen.
Soweit so gut. Nun müssen wir uns um unseren ersten Breakpoint kümmern. Nehmen wir an ab 650px Breite werden die kleineren Boxen zu sehr gezerrt und wir wollen diese umbrechen. Dazu bedienen wir uns der Media Query Anweisung @media (min-width: 650px). Alle Anweisungen innerhalb dieses Blocks treten erst ab einer Mindestbreite von 650px in Kraft und überschreiben die bisherige Anordnung des Inhalts.

Nun stellt sich die Frage, wie wir eigentlich bewerkstelligen wollen, dass mehrere Inhaltsblöcke nebeneinander dargestellt werden. Hier gibt es einige Kandidaten, jeder mit seinen eigenen Vor- und Nachteilen:
  • Float
  • Inline-Block
  • Display table
  • Flex
  • Grid

Float: 

Zum Zeitpunkt des Blogeintrags der Quasi-Standard und wird in allen aktuell verwendeten Browsern unterstützt. Es existieren einige Bugs, welche jedoch gut dokumentiert sind. Nachteile sind unter anderem: der Zwang zum clearen (bei jedem Breakpoint), keine Möglichkeit des vertikalen Zentrierens, keine gleichen Höhen der Blöcke, Abhängigkeit von der Reihenfolge im Quellcode.

Inline-Block:

Diese brauchen nicht gecleart und können vertikal zentriert werden. Allerdings zerstört der Weißraum ggf. das Layout wenn kein Workaround genutzt wird.
Weitere Nachteile: keine gleichen Höhen der Blöcke, Abhängigkeit von der Reihenfolge im Quellcode.

Display table:

Tabellen für Layouts?! Das geht doch nicht! Doch das geht mit display: table, so kann ein Block-Element das Verhalten einer Tabelle annehmen, ohne im Quellcode als solche definiert zu sein. Bei Bedarf kann einfach wieder zum ursprünglichen Verhalten display: block zurückgewechselt werden. Nützlich ist dies, wenn gleichzeitig vertikale Zentrierung und gleiche Höhen benötigt werden. Dies erkauft man sich durch etliche zusätzliche Wrapper-divs und einigen weiteren unangenehmen Nebeneffekten (z.B. überlaufende Zellen). Auch ist mir kein Weg bekannt mehrere Breakpoints mit display: table abzudecken (z.B. vierspaltig zu zweispaltig zu einspaltig).

Flex:

Das Allheilmittel? Nun nicht ganz, aber ein entscheidender Schritt in die richtige Richtung. Vertikale Zentrierung, gleiche Höhen, Quellcode unabhängige Platzierung und Füllen des vorhandenen Platzes ohne diesen genau zu kennen - um nur einige der Vorteile zu nennen. Die Syntax ist dafür leider nicht einsteigerfreundlich und es müssen noch diverse Vendorprefixes benutzt werden. Das größte Manko zur Zeit ist allerdings noch, dass flex erst ab IE10 unterstützt wird. Wenn dies kein Problem darstellt, vereinfacht diese Technik das Layouten im Web extrem.

Dennoch ist flex eigentlich nicht für Layouts komplexer Seiten gedacht. Da flex sich immer dem vorhandenen Platz anpasst, kann dies bei langsamen Verbindungen und entsprechen langen Seitenladezeiten zu unschönen Verzerrungen führen, wie in folgendem Artikel demonstriert.
Es ist gedacht für kleinere Bereiche auf großen Seiten - also dem Microlayout.

Grid:

Grid hingegen ist das zukünftige Mittel für das Makrolayout. Einziges Problem: bisher wird es ausschließlich von IE 10 unterstütz. Dennoch, die Spezifikation ist vielversprechend und sobald die Browserunterstützung gewährleistet ist, stehen die Chancen sehr gut, dass Grid in Verbindung mit Flex der Layoutstandard im Web wird.

Auf jsfiddle ist ein Vergleich der Layoutmethoden zu finden.

Da wir leider nicht in die Zukunft reisen können begnügen wir uns in unserem Beispiel mit float, um unser Layout zu vervollständigen. Zunächst wollen wir ab 650px die Lösungs-Boxen in ein 2x2 Raster umbrechen, sowie Aktuelles und Blog nebeneinander positionieren.

/*
 * Responsive Layout
 */
@media (min-width: 650px) {
  .loesungen div,
  .aktuelles,
  .blog {
    float: left;
    width: 50%;
  }
  .loesung-3 {
    clear: both;
  }
  .loesungen:after,
  .blog:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
  }
  .tweets,
  .aktueles {
    clear: both;
  }
}

Zu guter Letzt noch unser zweiter Breakpoint ab 960px. Hier soll zusätzlich zu den Änderungen nach dem ersten Breakpoint das Seitenmenü neben den Inhalt gestellt werden und die Seite soll nicht weiter in die Breite wachsen. Stattdessen setzen wir die Seitenbreite fix und Zentrieren den Inhalt im Browserfenster.

/*
 * Responsive Layout
 */
@media (min-width: 650px) {
 //see above
}
@media (min-width: 960px) {
  .main-content {
    float: left;
    width: 75%;
  }
  aside {
    float: right;
    width: 25%;
  }
  aside:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
  }
  .mitgliedschaften {
    clear: both;
  }
}

Auf jsfiddle kann das interaktive Ergebnis sowie der Quellcode begutachtet werden.

Nun haben wir ein einfaches aber solides Grundgerüst, welches mit echten Inhalten gefüllt werden kann. Gegebenenfalls ist weitere Arbeit innerhalb eines Containers nötig - vor allem das Hauptmenü muss potenziell für Mobil und Desktop angepasst werden - aber das Layout steht.

Dies ist der erste Schritt, um eine Webseite optimiert auf allen Endgeräten darstellen zu können. Vor allem für mobile Geräte bedarf es aber noch weiterer Anpassungen im Bereich der Usability und User Experience. Dies würde aber den Rahmen dieses Blogeintrages sprengen. Ich hoffe dieser Einblick in Responsive Layouts hat Ihnen gefallen und der ein oder andere konnte noch etwas dabei lernen.


Quellen:

https://de.wikipedia.org/wiki/Responsive_Webdesign
http://blog.karenmenezes.com/2014/apr/13/floats-inline-block-or-display-table-or-flexbox/
http://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/
https://css-tricks.com/snippets/css/complete-guide-grid/

Dienstag, 21. Juli 2015

Qlik Sense Desktop stellt nicht alle Geo-Daten auf einer Karte dar

Hier eine kurze Information, falls man bei der Darstellung nicht die erwarteten Werte - die aber eine Pivot-Tabelle enthält - auf der Landkarte wiederfindet. Ich hatte aktuell das Problem und dachte zunächst, dass es an der falschen Berechnung der Geo-Koordinaten mithilfe von »GeoMakePoint(latitude,longitude) as Location« liegt. Mir ist schließlich die Notiz »Zurzeit wird nur ein beschränkter Datensatz angezeigt« aufgefallen. Eine Internet-Recherche ergab letztlich, dass die Karte bei Qlik Sense maximal 1000 Daten-Punkte [1] darstellen kann.


Links

[1] https://community.qlik.com/thread/170133

Mittwoch, 15. Juli 2015

Datenanalyse mit Qlik Sense Desktop statt Excel

In diesem Blog-Post möchte ich kurz aufzeigen, welche Möglichkeiten es mit dem kostenlos herunterzuladenden Qlik Sense Desktop gibt [1]. Als Beispiel wurden die Neuanmeldungen einer Webseite (bspw. Shop) analysiert und in welchen Regionen diese stattgefunden haben. Hierzu wurden die Daten auf einer Karte visualisert.

Import

Hierzu in der Dropdown-Box den Datenmanager aufrufen. An dieser Stelle können Excel-, CSV-Dateien geladen bzw. auf eine Datenbank per ODBC zugriffen werden. Man sollte hier überlegen, ob man besser gleich bspw. ein Python-Skript für das Laden der Daten in Form einer CSV-Datei benutzt. Qlik Sense bietet auch ETL-Funktionen an, jedoch hat man nicht so viele Freiheitsgrade. So habe ich beispielsweise die Latitude (Breitengrad) und Longitude (Längengrad der Geo-Koordinaten) innerhalb des Python-Skripts angereichert und Qlik Sense innerhalb des CSV-Files zur Verfpgung gestellt. Ich habe (siehe Bild unten) dann nur noch die Befehle Year, Month, Day, Dual (Berechnung Quartal) und GeoMakePoint für die Kartendarstellung angewendet. Das Lade-Script von Qlik Sense kann über die Drop-Box Dateneditor aufgerufen werden.

Drop-Down-Box
Datenmanager
Dateneditor

Analyse

Die Analysen heißen Apps bei Qlik Sense und werden mithilfe des entsprechenden Menüs gewählt bzw. initial erzeugt. Es stehen dem Analysten Balken-, Kreis-, Kombi-, Linien- und Punktdiagramme zur Verfügung. Des Weiteren gibt es auch noch eine Baumkarte (Treemap), Karte (Map), KPI, etc. Als Tabelle kann der User eine einfache oder eine Pivot-Tabelle benutzen. Bei der Pivot-Tabelle ist anzumerken, dass die Dimensionen per Drag-and-drop mühelos verschoben werden können. Dies stellt ein mächtiges Werkzeug bei der Auswertung dar. Weiterhin finde ich die Möglichkeit, Daten auf einer Landkarte zu visualisieren, ausgesprochen gelungen umgesetzt.


Pivot-Tabelle unten / Treemap rechts oben

Kartendarstellung mit Filter auf rechter Seite

Tipp

Die Angaben zu Längen- und Breitengrad müssen ein Komma und keinen Punkt enthalten, so wie diese Angaben ("53,53811330000001";"7,944259100000001"). Falls ein Punkt verwendet wird, liefert die Qlik Sense Funktion GeoMakePoint() keine Ergebnisse.

Fazit

Für die Auswertung von Daten stellt Qlik Sense mächtige Funktionen zur Verfügung, ohne Programmieren zu müssen. Für die Aufbereitung der Daten scheint mir ein extern erstelltes Skript sinnvoller zu sein. Dies gilt insbesonders wenn man die Daten mit der Latitude und Longitude zur Kartendarstellung anreichern will.

Links

[1] http://www.qlik.com/de/explore/products/sense/desktop

Freitag, 10. Juli 2015

Logstash Grok Muster online für den Elasticsearch (ELK) Stack prüfen

In diesem Posting geht es um die online Überprüfung von Mustern für den Logstash Filter Grok.

Einführung

Mit dem ELK Stack [1], bestehend aus Elasticsearch, Logstash und Kibana, lassen sich Logdateien prima analysieren. Logstash verwendet dafür unter anderem den Filter Grok [2], ein Tool das bei der Analyse von unstrukturiertem Text hilfreich ist. Dem Filter wird dabei der zu analysierende Text (message) übergeben. Grok wendet auf die message eine zuvor definierte Folge von Grok Mustern an. Falls die message und die Folge von Mustern übereinstimmen, also falls beide matchen, gibt der Filter den zu jedem Muster gefundenen Wert in strukturierter Weise zurück.

Passt das Muster?

Bei einer message kann es sich dabei um einzelne Zeilen einer Logdatei handeln oder z. B. auch um Ausgaben einer SQL-Abfrage einer Datenbank. Die message kann auch mehrzeilig sein. Die Schwierigkeit beim Grok Filter besteht darin, eine zur jeweiligen message passende Folge von Grok Mustern zu finden. Logstash enthält bereits standardmässig eine große Anzahl von Grok Mustern, die beliebig kombiniert und erweitert werden können. Zuerst betrachtet man den zu analysierenden unstrukturierten Text und überlegt sich, welche Grok Muster darauf anzuwenden sein könnten. Unser Beispieltext stammt von einer SQL-Abfrage:
id:123,datumAbruf:2015-07-07 10:30:00,shopName:myShop,shopUrl:http://www.myshop.de,artikelIdentifikation:123-de

Bei der ersten Betrachtung der message fällt auf, die einzelnen Werte sind durch ein Komma getrennt. Außerdem scheint es sich um Key-Value-Paare zu handeln. Unsere Folge von Grok Mustern könnte also wie folgt aussehen:
id:%{NUMBER:id:int},datumAbruf:%{TIMESTAMP_ISO8601:datumAbruf},shopName:%{USERNAME:shopName},shopUrl:%{URI:shopUrl},artikelIdentifikation:%{GREEDYDATA:artikelIdentifikation}

Möchte man testen, ob die gefundene Folge von Grok Mustern auf die message anwendbar ist, so kann man dafür Logstash im agent Modus starten. Der Grok Filter wird dabei in der Konfigurationsdatei logstash.conf angegeben:
sudo -u logstash /opt/logstash/bin/logstash agent --verbose -f /etc/logstash/conf.d/logstash.conf

Falls die Grok Muster Folge nicht auf die Nachricht anwendbar ist, fügt logstash den Typ _grokparsefailure hinzu. Dieses Vorgehen ist langwierig, denn bei jedem Versuch muss zuerst Logstash gestartet werden, was einige Sekunden in Anspruch nimmt. Viel besser geeignet ist die Matcher Funktion [3] von Grok Constructor. Dabei handelt es sich um eine Art online Logstash. Die Webseite bietet ein Textfeld, in das man den unstrukturierten Text eingibt. Darunter kann man die zu testende Grok Muster Folge eingeben und danach die Logstash Bibliotheken definieren, die für die Analyse verwendet werden sollen.
Matcher mit Nachricht und Folge von Grok Mustern
Die Überprüfung der Grok Muster Folge wird gestartet durch Klick auf den Go!-Knopf. Die Seite präsentiert das Ergebnis der Überprüfung am unteren Ende.
Ergebnis der Grok Überprüfung

Weitere Funktionen

Neben Matcher bietet die Seite noch zwei weitere Funktionen. Mit Incremental Construction steht eine Art Assistent zur Verfügung, der Schritt für Schritt durch den zu analysierenden Text führt und Vorschläge für mögliche Grok Muster Folgen macht. Der Assistent funktioniert gut und vereinfacht das Finden von passenden Grok Muster Folgen. Allerdings stößt man schnell an die Grenzen der Funktion, wenn man z. B. mit Freitext zu tun hat. Die folgende Grok Muster Folge wurde mit der Incremental Construction Funktion ermittelt:
id:%{BASE10NUM:id},datumAbruf:%{TIMESTAMP_ISO8601:datumAbruf},shopName:%{HOST:shopName},shopUrl:%{URI:shopUrl},artikelIdentifikation:%{GREEDYDATA:artikelIdentifikation}

Diese Folge von Mustern ist zwar auf unseren Beispieltext anwendbar. Sobald aber beispielsweise der Shop-Name ein Leerzeichen enthält ("Mein Shop"), schlägt das Matching fehl. Musterfolgen, die mit der Incremental Construction Funktion ermittelt wurden, dienen zwar als guter Anhaltspunkt, müssen aber nachkontrolliert werden.

Die zweite Funktion der Seite heißt Automatic Construction und generiert nach dem Prinzip der Permutation alle möglichen Musterfolgen. Das (auf die Top 200 Folgen eingeschränkte) Ergebnis ist allerdings nicht wirklich für die weitere Verwendung geeignet.

Fazit

Mit der Matcher Funktion der Webseite Grok Constructor lässt sich schnell und einfach eine Folge von Grok Mustern finden und überprüfen, ob sie auf einen Beispieltext anwendbar ist.

Links

[1] ELK Stack
[2] Grok
[3] Matcher

Java Forum Stuttgart 2015

Gestern fand dass 18. Java Forum Stuttgart statt und wir waren auch wieder dabei. Dieses Mal zu dritt, aber ohne Vortrag wie in 2013 (Vortrag in 2013: Enterprise 2.0 Portale mit Grails. Geht das?).

Spannende Vorträge

Das Themenfeld war bunt gemischt und so war bei sieben parallel ablaufenden Tracks für jeden Geschmack ein Vortrag vorhanden.
Ich persönlich fand besonders die Vorträge "Java als Integrationslösung in einer gewachsenen Anwendungslandschaft" und "Hack that website!" sehr unterhaltsam und lehrreich. Vor allem die Vorstellung der Tool-Sammlung in "Hack that website!" in Form der Linux-Distribution Kali Linux blieb mir in Erinnerung. Anschaulich wurde gezeigt, wie einfach es mit den entsprechenden Tools mittlerweile ist, Sicherheitslücken in Webseiten automatisch aufzuspüren und auch gleich auszunutzen. So wurde beispielsweise in wenigen Sekunden über eine SQL-Injection-Lücke die Benutzer-Tabelle der dahinterliegenden MySQL-Datenbank exportiert; den integrierten Abgleich der gehashten Passwörter mit einer Datenbank von MD5 Hashes gab's inklusive. Das Fazit waren Benutzerdaten mit Klartextpasswörtern in unter einer Minute.

Meinen Kollegen hatten es zudem die Möglichkeiten im SmartHome-Sektor und die Vorstellung von Vert.x angetan.

JFS 2015: Ein gelungener Tag im schönen Stuttgart