dm-drogerie markt Development of New Self-Service Offerings Based on Modern Web Technologies

Every dm-drogerie markt store is equipped with what is known as a “dm self-service point” (an in-store self-service terminal/interactive kiosk). Here, customers can use touchscreens to scan barcodes to obtain product pricing information, check the balance of their gift certificates, interact with the Payback rewards programme, or register for the company’s “glückskind” parent and child club.

The old-style terminals were based on Microsoft Windows, and featured a large, resistive touchscreen. This type of touchscreen registers finger presses, but not gestures like swiping to drag content.

All these features were left over from the time when the terminals, which are now a good ten years old, were developed. Back then, they were state of the art, but now the widespread use of smartphones and tablets with capacitive displays has resulted in new customer demands which had to be taken into account by the dm subsidiary Filiadata and inovex as they developed the new terminals.

Contemporary Hardware Fulfils User Expectations

All new dm-drogerie markt stores will henceforth be equipped with self-service terminals which comprise two iPads instead of a single screen. The iPad touchscreens enable the same rapid, intuitive operation customers are used to from their own devices. Like the old terminals, the new ones are linked to a modern imager which can read different barcodes and QR codes and evaluate them using digital image analysis.

A serial interface facilitates communication with the scanner, while an adapter and a proprietary driver allow it to be recognised by the iPad.

The Latest Web Technologies Ensure Flexibility

The real challenge, however, lay in the development of a new software architecture. On the one hand, this architecture needed to maximise the benefits of the new hardware. On the other, it had to be flexible and modular enough to accommodate future requirements with little modification.

The new “self-service points” have a three-layer frontend comprising a native container for the web apps. These are implemented as Single Page Applications (SPA) using AngularJS. The container and apps communicate with each other via a JavaScript bridge, a feature which also enables apps to communicate with the imager.

Architecture

The web apps for customer use provide the same functions as the old terminals, including pricing information, Payback rewards information, glückskind programme access, and gift cards. There is also a hidden app for administrative use. The Single Page Applications are only opened once each, with content being dynamically loaded after the fact. Access to the Enterprise Service Bus (ESB) for querying product prices, for example, takes place via a server which converts the ESB SOAP-XML output into JSON.

The home screen which customers use to access the various apps is also realised as an SPA in which the available apps are organised in a dynamic grid. This modular structure allows both the future integration of new apps and the removal of existing ones.

Apps and updates are installed by querying the configuration server. There, each terminal’s device number is used to determine which version of which app should be installed. If an app is not installed, it is downloaded from the Delivery Server and integrated into the container. Each app uses a zip format based on Mozilla’s Open Web Apps.

The new development did not, however, require the old terminals to be completely replaced. Instead, the encapsulation of the various service offerings enabled a container to be created for the old Windows systems, allowing the individual web apps to run inside. This eliminated the need for maintaining two different app versions in parallel, while allowing users to experience the same interface on every terminal.

The new web apps have now been rolled out throughout Germany and are successfully being deployed on both iOS and Windows terminals.

How Do You Control More Than 1,800 Self-Service Points?

To ensure uninterrupted operation of the service points in more than 1,800 dm-drogerie markt stores, a robust logging infrastructure was developed. Every container and every web app uses the bridge to regularly send a message to the logging server. A logging message is a JSON object with device-specific parameters and an ID which is assigned to a specific status notification by the server. To prevent logs being lost during an outage – such as an interruption in Internet connection – they are collected locally and submitted in batches.

The logging server stores incoming messages in a Redis in-memory database, where they are collected by logstash and processed using Kibana/Elasticsearch. The Kibana Dashboard displays all the events, allowing swift action to be taken when needed.

Summary

The collaborative partnership between Filiadata and inovex made it possible to develop a new and improved self-service point. Its dynamic architecture makes it backwards compatible with the company’s existing hardware, while its use of modern web technologies ensures its compatibility with future applications.