Client:
Münchner Konzern

Hersteller von Haushaltsgeräten

Project Information:
Topic
| Smart Home App für die Fitbit Smartwatch Technology | TypeScript / JavaScript

Challenge

Anfang 2019 kam unser Kunde mit einer spannenden Idee auf uns zu: Lasst uns eine Smart Home App für die Fitbit Smartwatch bauen! Das Ziel: User können ihre Haushaltsgeräte wie Kaffee-, Waschmaschinen oder Öfen von ihrem Handgelenk aus überwachen und steuern. Sechs Wochen später waren wir stolz auf einen erfolgreichen Launch.


Solution

Damit Kunden mit ihren Haushaltsgeräten interagieren können, nutzen wir die offizielle Smart Home API des Herstellers. Desweiteren setzen wir darauf, dass der User eine aktive Internetverbindung durch sein Smartphone hat. Von dort übertragen wir die benötigten Daten auf die Uhr. Alle Aktionen, die der User auf der Uhr ausführt, nehmen den umgekehrten Weg über das Smartphone.

Aufgrund der gleichwertigen Komplexität von Front- und Backend Development bei der App-Entwicklung werden diese beiden Teile im Folgenden getrennt behandelt.      

Backend Solution

Development Infrastructure is Key
Das Fitbit CLI stellt eine gute Basis zur lokalen Entwicklung bereit und unterstützt auch die lokale Ausführung direkt auf der Uhr oder im Simulator. Damit ist die Entwicklungsumgebung von der Web IDE unabhängig. Ein weiterer Aspekt ist nicht nur die Unterstützung von JavaScript, sondern auch von TypeScript - und das ohne zusätzliches Build-Setup.

Mit dem Simulator von Fitbit können Apps lokal und ohne Gerät ausgeführt werden ohne das Build-Deploy-Zyklen auf der Uhr viel Zeit in Anspruch nehmen.      

Frontend Solution

Durch die geringe Auflösung von 348x250px bei der Fitbit Ionic, beziehungsweise 300x300px bei der Fitbit Versa (Lite), muss man doch etwas umdenken. So hat man in unserem Beispiel zur Auswahl der Hausgeräte kein Menü oder eine Liste.

Die UI-Library von Fitbit enthält viele hilfreiche vordefinierte Widgets und auch Animationen. Dennoch mussten zusätzliche Elemente manuell animiert werden. Zum Beispiel ein sekündlich, manuell gezeichnetes Rechteck für den Fortschrittsbalken, da die Interpolation der Animationen sonst zu einem Flackern geführt hätte. Weder in diesem Fall noch bei einer UI-Größe mit über 100 einzelnen Elementen wurden dabei Performance-Einbußen festgestellt.

Während man SVG (Scalable Vector Graphics) aus anderen Anwendungsbereichen eher von einzelnen Icons und Animationen kennt, wird bei Fitbit die komplette UI in SVG .gui-Files beschrieben. Mit Hilfe der App Logik, geschrieben in JavaScript (oder in unserem Fall TypeScript), kann man mit der UI interagieren, genauer gesagt mit den SVG DOM Objekten.

Eine kleine Hürde war 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 eine echte Herausforderung, da wir eine unterschiedliche Anzahl an Gerä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.



Benefits

Die Handhabung der Smart Home Geräte wurde dadurch erheblich vereinfacht. Wer wollte nicht schon immer den Backofen, die Kaffeemaschine oder die Waschmaschine über seine Uhr steuern?