Wie mein Kollege Max bereits vor ein paar Tagen in seinem Blogpost berichtet hat, haben wir kürzlich unsere erste Fitbit App entwickelt und veröffentlicht. Bei der App handelt es sich um eine Erweiterung für das Home Connect Ecosystem der BSH, mit der man mit Hilfe einer Smartwatch seine Haushaltsgeräte im Smart Home steuern kann.

Besonders das Frontend einer solchen Fitbit Anwendung hat einige Eigenheiten, die ich in diesem Blogpost aufzeigen möchte.

Design auf 348x250 Pixel

Es erscheint im ersten Moment recht trivial, aber durch die geringe Auflösung von 348x250 Pixel bei der Fitbit Ionic, beziehungsweise 300x300px bei der Fitbit Versa (Lite), muss man doch etwas umdenken, wenn man gerade vom großen Bildschirm kommt. So hat man in unserem Beispiel zur Auswahl der Hausgeräte kein Menü oder eine Liste, sondern man swiped einfach nach rechts oder links. Das erscheint auf den ersten Blick nicht sehr intuitiv, aber darüber hat auch Fitbit sich schon Gedanken gemacht und stellt diverse Komponenten bereit, die in diesem Guide erklärt werden.

Components

Eine dieser Komponenten ist die oben beschriebene Panorama View, die es dem Nutzer erlaubt von rechts nach links zu swipen. Außerdem werden automatisch Pagination-Punkte angezeigt, die dem User vermitteln, durch wie viele Seiten er blättern kann und auf welcher er sich gerade befindet.

Home Connect Fitbit
Die "Panaroma View" Komponente am Beispiel der Home Connect App

Es gibt noch weitere solcher vordefinierten View-Components, wie zum Beispiel die Scroll View, bei der die View höher ist als der eigentliche Screen und der Nutzer weiter nach unten scrollen kann. Oder eine Tile List, die es ermöglicht vertikal durch eine Liste von Items zu scrollen.

Aber nicht nur für solche Views gibt es Widgets - auch für kleinere Bestandteile einer Fitbit UI. Als Beispiel sind hier Buttons oder Text Komponenten in verschiedenen Layouts und Variationen zu nennen.

SVG und Interaktion mit Javascript

Wer im oberen Absatz mal auf einen der Links geklickt hat, wird feststellen, dass die Code-Beispiele alle in einem <svg>-Tag eingebettet sind. Und tatsächlich - während man SVG aus anderen Anwendungsbereichen eher von einzelnen Icons und Animationen kennt, wird bei Fitbit die komplette UI in SVG .gui-Files beschrieben. Es lohnt sich also, sich vor der Entwicklung einer Fitbit UI mit SVG und seinen Grundprinzipien vertraut zu machen.

Glücklicherweise muss man aber nicht nur mit hardgecodeten SVG-Elementen leben. Mit Hilfe der App Logik, geschrieben in Javascript (oder in unserem Fall Typescript), kann man mit der UI interagieren, genauer gesagt mit den HTML DOM Objekten. Ein einfaches Beispiel hierfür:

<svg>
  <text id="dino">Alle Dinosaurier klatschen im Takt!</text>
</svg>

Mit Javascript verändern wir einfach den Text:

let dino = document.getElementById("dino");
dino.text = "Aber Dinosaurier haben viel zu kurze Arme!";

So kann man zur Laufzeit auf Aktionen vom User reagieren und die UI entsprechend anpassen. Doch dies hat leider so seine Tücken…

Dynamische Generierung von Inhalten

…und zwar die dynamische Generierung von Inhalten. Es lassen sich zwar bereits bestehende SVG-Elemente verändern, aber keine neuen hinzufügen. In unserem Beispiel mit den Hausgeräten war das ein echtes Problem, da wir eine unterschiedliche Anzahl an Hausgeräten anzeigen - je nachdem wie viele der User gepairt hat. Unser Workaround hierfür war, eine maximale Anzahl Hausgeräte als SVG-Elemente anzulegen, standardmäßig auszublenden und dann für jedes gepairte Hausgerät mit Hilfe von Javascript wieder einzublenden.

Es gibt allerdings schon eine Fitbit-Komponente die Elemente generiert, nämlich die Virtual Tile List. Leider hilft diese aber nur bei einem relativ speziellen Anwendungsfall.


Wir hoffen sehr, dass Fitbit sich in Zukunft noch etwas weiterentwickeln wird - momentan hat man noch das Gefühl nur ein kleinen Teil der eigentlichen SVG- und Javascript-Möglichkeiten nutzen zu können. Nichtsdestotrotz hat die Entwicklung sehr viel Spaß gemacht - und wer möchte nicht James-Bond-mäßig seiner Uhr sagen, dass sie einen Kaffee brauen soll?!