dm-drogerie markt: Entwicklung eines neuen Service-Punkts auf Basis moderner Web-Technologien

In den dm-Märkten haben Kunden die Möglichkeit, über ein Service-Terminal auf verschiedene Informationen wie Produktpreise oder gesammelte Payback-Punkte zuzugreifen. Da die bisherigen Terminals noch auf sperrige PC-Hardware angewiesen und nur mit veralteten Touchscreens ausgestattet sind, wurde gemeinsam mit inovex eine flexible, zukunftssichere Lösung entwickelt.

Jeder dm-Markt ist mit einem so genannten dm-Service-Punkt ausgestattet. Über einen Touchscreen können Kunden durch Scannen von Barcodes selbstständig Preisinformationen zu Produkten erhalten, den Wert ihrer Geschenkkarte auslesen, mit Payback interagieren oder sich für den Eltern-Kind-Begleiter „glückskind“ anmelden.

Die verbreiteten Terminals basieren noch auf einem Microsoft-Windows-System mit einem großen resistiven Touchscreen. Dieser erkennt zwar die Eingabe per Fingerdruck, nicht aber Gesten wie das Wischen zum Verschieben von Inhalten.

All diese Eigenschaften stammen aus der Entstehungszeit des nun gut 10 Jahre alten Terminals. Damals State of the Art, sorgt vor allem die Verbreitung von Smartphones und Tablets mit kapazitiven Displays inzwischen für neue Ansprüche bei den Nutzern – denen die dm-Tochter Filiadata und das Systemhaus inovex mit der Entwicklung eines neuen Terminals gerecht wurden.

Zeitgemäße Hardware erfüllt die Nutzererwartung

Deshalb werden neue dm-Märkte fortan mit einem Service-Punkt ausgestattet, der statt aus einem Bildschirm aus zwei iPads besteht. Deren Touchscreen erlaubt die schnelle und intuitive Bedienung, wie Kunden sie von ihren privaten Geräten gewohnt sind. Sie sind wie bisher mit einem modernen Imager verbunden, der unterschiedliche Barcodes und QR-Codes einlesen und mit digitaler Bildanalyse auswerten kann.

Angesprochen wird der Scanner über eine serielle Schnittstelle, die dank eines Adapters und eines eigens geschriebenen Treibers vom iPad erkannt wird.

Modernste Web-Technologien sorgen für Flexibilität

Die eigentliche Herausforderung aber war die Entwicklung einer neuen Software-Architektur, die einerseits die Vorteile der neuen Hardware ausnutzt und andererseits flexibel und modular genug ist, um ohne viel Aufwand für zukünftige Anforderungen angepasst werden zu können.

Das Frontend der neuen Service-Punkte ist dreigeteilt: Es besteht aus einem nativen Container, in dem die Web Apps laufen, die wiederum als Single Page Applications (SPA) mit AngularJS umgesetzt sind. Die Kommunikation zwischen Container und App ist über eine JavaScript Bridge realisiert, die einer App zum Beispiel die Kommunikation mit dem Imager erlaubt.

Architektur
Architektur

Die Web Apps für Kunden stellen die bisherigen Funktionen „Preisinformation“, „Payback“, „glückskind“ und „Geschenkkarten“ bereit, für die Administration ist zudem eine versteckte Anwendung verfügbar. Die Single Page Applications werden jeweils nur einmal geöffnet – Inhalte können dann dynamisch nachgeladen werden. Der Zugriff auf den Enterprise Service Bus (ESB), etwa zur Abfrage von Produktpreisen, erfolgt über einen Server, der das vom ESB gesprochene SOAP-XML in JSON umwandelt.

Die Startseite, über die der Kunde auf die verschiedenen Anwendungen zugreifen kann, ist ebenfalls als SPA realisiert und ordnet die verfügbaren Apps dynamisch in einem Raster an. Dieser modulare Aufbau ermöglicht es, zukünftig neue Anwendungen zu integrieren oder bestehende Apps zu entfernen.

Die Installation von Apps und Updates erfolgt über eine Anfrage an den Konfigurationsserver. Dort kann für jedes Terminal anhand der Gerätenummer berechnet werden, welche Anwendungen in welcher Version installiert werden sollen. Ist eine App nicht installiert, wird diese vom Delivery Server heruntergeladen und in den Container integriert. Jede Anwendung liegt in einem ZIP-Format vor, das an die Open Web Apps von Mozilla angelehnt ist.

Die bestehenden Terminals müssen aufgrund der Neuentwicklung übrigens nicht komplett ausgetauscht werden: Die Kapselung der verschiedenen Service-Angebote ermöglicht es, auch für die alten Windows-Systeme einen Container zu schreiben, in dem die einzelnen Web Apps laufen. So müssen nicht zwei verschiedene App-Versionen parallel gepflegt werden und der Nutzer erhält auf jedem Terminal dasselbe User Interface.

Inzwischen wurden die neuen Web Apps deutschlandweit ausgerollt und sind sowohl auf iOS- als auch Windows-Terminals erfolgreich im Einsatz. 

Wie kontrolliert man über 1.800 Service-Punkte?

Um den störungsfreien Betrieb der Service-Punkte in über 1.800 dm-Märkten zu überwachen, wurde eine robuste Logging-Infrastruktur entwickelt. So senden jeder Container und jede Web App (über die Bridge) in regelmäßigen Abständen eine Nachricht an den Logging Server. Eine Logging-Nachricht ist ein JSON-Objekt mit individuellen Parametern sowie einer ID, die vom Server einer bestimmten Statusmeldung zugeordnet wird. Um im Störungsfall – etwa bei Abbruch der Internetverbindung – keine Logs zu verlieren, werden diese lokal gesammelt und in Schüben versandt.

Der Logging Server speichert eingegangene Meldungen in einer Redis-In-Memory-Datenbank, wo sie von Logstash gesammelt und mit Kibana/Elasticsearch verarbeitet werden. Über das Kibana Dashboard lassen sich die Ereignisse einsehen, sodass im Bedarfsfall zeitnah reagiert werden kann. 

Zusammenfassung

Durch die partnerschaftliche Zusammenarbeit von Filiadata und inovex konnte ein neuer, verbesserter Service-Punkt entwickelt werden. Dieser ist durch seine dynamische Architektur mit vorhandener Hardware rückwärtskompatibel, durch die Verwendung moderner Web-Technologien aber auch auf zukünftige Einsatzzwecke vorbereitet. 

Kerntechnologien:


Frontend

  • JavaScript
  • HTML
  • CSS/LESS
  • AngularJS

iOS Container

  • Objective-C
  • Imager-Treiber in C

Server

  • Java
  • Spring
  • Redis
  • Elastic-Stack
  • MySQL

Sie haben Fragen oder möchten zu diesem Thema beraten werden?

Dann rufen Sie uns an unter +49 (0)721 619 021-0 oder schreiben Sie uns eine E-Mail. Wir freuen uns auf Ihre Nachricht!

Weitere Themen:

Tobias Joch

Ich freue mich auf Ihre Nachricht!

Tobias Joch

Head of Application Development

inovex Blog

Tech-Artikel im inovex Blog

Unsere Mitarbeiter schreiben regelmäßig Fachbeiträge in unserem Blog. Aktuelle Themen: Redis, Elasticsearch, Docker, Angular 2, Project Tango uvm.

Zum inovex Blog

Organisation

Research & Development bei inovex

Im „inovex Lab“ kümmern wir uns systematisch um die Früherkennung, Erprobung und Bewertung neuer Technologien, IT-Trends und Anwendungsmöglichkeiten in allen Themenfeldern der Digitalen Transformation.

Mehr lesen

inovex Content Pool

Aktuelle Vorträge, Whitepaper, Fachartikel & Videos

Hier geht's zum Content Pool

Über uns

Unsere Technologie-Partner

Wir kooperieren mit Partnern, die unseren Kunden einen echten Mehrwert bieten: Cloudera, Elastic, Hortonworks, Liferay, MapR, Microsoft, Red Hat, Quobyte und UID.

Mehr Infos

Arbeiten bei inovex

inovexperts erzählen ...

Was es konkret im Alltag bedeutet, bei inovex als "inovexpert" zu arbeiten, erklären die Kolleginnen und Kollegen in unseren inovexpert-Videos. Wir wünschen Ihnen viel Spaß beim Ansehen!

Jetzt inovexperts-Videos ansehen