Info-Screens erwecken Kennzahlen zum Leben

Info-Screens sind überall: in Bahnhöfen, Tankstellen, Schaufenstern, Läden, am Büroempfang – die Einsatzmöglichkeiten sind schier unbegrenzt.

Bei der APP gehen täglich viele Mitarbeitende ein und aus. Besprechungen mit Kunden finden teilweise vor Ort statt und auch Schulungen geben wir wieder vermehrt in unseren Räumlichkeiten in Bern. Beste Voraussetzungen also, um die wichtigsten und tagesaktuellsten Informationen rund um die APP allen Besuchenden über einen Info-Screen zugänglich zu machen.

Der vorgestellte Prototyp entstand im Rahmen eines Hackathons am diesjährigen APP-Firmenseminar. Während zweier Arbeitstage entwickelten wir einen bunten Strauss an kreativen und innovativen Tools und Ergebnissen.

Mehr zu den Hintergründen des Hackathons sowie weitere spannende Resultate finden Sie hier.

Gesagt, getan: An unserem zweitägigen APP-Hackathon haben wir einen Info-Screen erarbeitet. Folgende Ziele und Rahmenbedingungen standen für das sechsköpfige Team im Zentrum:

• Die Informationen auf dem Bildschirm sollen auf das Zielpublikum zugeschnitten sein und einen klaren Mehrwert bieten.

• Die Informationen auf dem Bildschirm werden dynamisch von Quellen über das Netzwerk geladen und angezeigt.

• Der Bildschirm soll wartungsarm betrieben sowie einfach an- und ausgeschaltet werden können.

Die Möglichkeiten schienen unbegrenzt: Von der Präsentation neuer Mitarbeitenden über die Visualisierung von Unternehmenskennzahlen, dem Anzeigen der Mittagsmenus von umliegenden Restaurants, dem Wetter und der neuesten Kununu-Rezensionen bis hin zur Integration von Interaktion mittels kleinen Spielen und Rätseln wurde alles in Betracht gezogen.

Nachdem sich das Team auf die anzustrebenden Inhalte geeinigt hatte, stand die Entscheidung für einen Technologie-Stack (Programmierframework, -sprache etc.) im Vordergrund, denn auch hier gibt es zahlreiche Varianten. Auf Basis des vorhandenen Know-hows fiel die Entscheidung schnell: Eine Webapplikation auf einem Raspberry-Pi, die in einem Browser in Vollbild angezeigt wird.

Gearbeitet wurde in Zweiergruppen. Damit stiegen die Chancen, in zwei Tagen ein vorzeigbares Produkt herzustellen. Zudem konnte sich so jedes Teammitglied schnell viel Wissen aneignen und sich direkt einbringen.

Team Hardware

Das Team Hardware beschäftigte sich damit, den Raspberry PI soweit aufzusetzen und zu konfigurieren, dass er nach der Aktivierung der Stromversorgung automatisch aufstartet, eine Webapplikation aktiviert und diese in einem Browser im Vollbildmodus anzeigt. Die grösste Herausforderung dabei war die Einbindung in das Netzwerk der APP, so dass Daten des zentralen APP ERP abgefragt und angezeigt werden können. Nach vielen Fehlversuchen und Rückschlägen führte die Nutzung der opensource Software openfortivpn zum Erfolg.

Team Backend

Das Team Backend hatte zum Ziel, eine serverseitige Webapplikation zu entwickeln, die Daten aus diversen Quellen abfragen und aufbereiten kann, so dass diese im Anschluss im Frontend angezeigt werden können. Die Struktur der Webapplikation war simpel, es mussten nur zustandslose Endpoints aufgebaut werden – keine Sessions, keine Authentisierung etc. Viel Zeit und Nerven kostete jedoch das Formulieren der SQL-Abfragen, um aus dem zentralen ERP der APP die gewünschten Daten aufzubereiten.

Team Frontend

Das Team Frontend konzentrierte sich auf die Anzeige der Daten im Webbrowser. Eine ästhetische Darstellung sowie hübsche und zweckmässige Animationen sollen für einen ansprechenden Informations-Bildschirm sorgen, der gerne angesehen wird. Die vielen Technologien, die zum einer client-seitigen Webanwendung benötigt werden, waren dabei eine grosse Herausforderung – insbesondere, weil die Zeit am Hackathon (naturgemäss) sehr beschränkt ist.

Die Aufteilung war ein geschickter Schachzug, das Resultat kann sich im wahrsten Sinne sehen lassen:

Der Bildschirm zeigt die neuesten APP-Kundenreferenzen, die neuesten Projekte, Bilder aus dem Personalmarketing und die Wetterprognosen. Dabei ist die Anzeige zeitgesteuert. Clou für die Ungeduldigen: durch Drücken eines grossen roten Buttons kann zur nächsten Anzeige «geblättert» werden.

Nanos gigantum humeris insidentes - wie in jedem Software-Projekt steht auch das Team des Info-Screens als «Zwerge auf den Schultern von Riesen». Im Folgenden eine (unvollständige) Liste der Technologien und Frameworks, die eingesetzt wurden:

Raspberry PI

Ein vollwertiger Computer auf einer einzelnen Platine. Klein, günstig (~CHF 50) und mit einem geringen Energiebedarf ist er vielseitig einsetzbar. Per HDMI verbunden mit einem Display stellt er das Herzstück des Info-Screens dar.

Debian

Eine von zahlreichen Linux-Distributionen. Mit Raspbian steht eine für den Raspberry Pi optimierte Variante zur Verfügung. Das Betriebssystem stellt die Basis dar, damit die Webapplikation laufen kann (Netzwerk, Speicherzugriffe etc.)

Flask

Mit Flask, einem Framework auf Basis der Programmiersprache Python, können simple, aber auch komplexe Webapplikationen mit einer hohen Last gebaut werden. Beim Info-Screen ist Flask für die Abfrage und Aufbereitung der Informationen zuständig. Für verschiedene «Widgets» wurde jeweils ein eigener Endpoint umgesetzt. Dies ermöglicht eine modulare Erweiterung des Systems.

MySQL

Das frei verfügbare Datenbanksystem MySQL gehört heute zur Firma Oracle und ist weit verbreitet. Mit MariaDB gibt es von Oracle unabhängige, aber kompatible Forks. Der Info-Screen benötigt keine Datenbank – er ist aber von Daten des zentralen ERP der APP abhängig, die mittels SQL abgefragt werden können. Damit war am Hackathon auch MySQL ein Thema.

HTML und CSS

Um HTML und CSS kommt niemand herum, der sich mit Webapplikationen beschäftigt. Es sind die zentralen Technologien zur Gestaltung von Inhalten für den Webbrowser. HTML für die Struktur, CSS für das Styling – beides zentral für die Anzeige auf dem Info-Screen.

Javascript und alpine.js

Mittels Javascript, einer Scriptsprache die (vorwiegend) im Browser ausgeführt wird, kann einer Webseite Leben eingehaucht werden. Alpine.js wiederum, ein reaktives Javascript-Framework, ermöglicht das einfache Anzeigen von dynamischen Inhalten auf einer Webseite. Und genau dieses Anzeigen von dynamischen Inhalten ist beim Info-Screen gefragt – denn das neu Laden und Rendern einer Webseite wäre optisch störend und würde den sanften und kontrollierten Übergang von Informationen verunmöglichen.

Git

Mit der freien Versionsverwaltungssoftware Git kann in Teams gemeinsam aber verteilt an einem Softwareprojekt (einer Codebasis) gearbeitet werden. Nach einer kurzen Einführung konnten die Teammitglieder problemlos an einem Bestandteil des Info-Screens arbeiten und ihre Resultate im Anschluss mit denen der Kolleg:innen zusammenführen.

Möchten Sie mehr über dieses spannende Thema erfahren und sind selber an einem Info-Screen interessiert? Oder haben Sie selbst eine innovative Idee, die im Rahmen eines Design Thinking Workshops umgesetzt werden könnte? Wir freuen uns auf Ihre Kontaktaufnahme.