Viele Devices, so auch der E.ON-Aura-Controller, verwenden eine Schnittstelle namens REST, um Zustandsdaten zu übermitteln. Mit ein wenig Bastelei lesen Sie diese auch über Ihr Smartphone aus.
Das Kürzel REST-API steht für Representational State Transfer Application Programming Interface. Frei übersetzt beschreibt das eine Programmschnittstelle, die eine Teilmenge der in einem Programm vorhandenen Daten liefert – was üblicherweise vollkommen genügt.
REST dient eigentlich zur Datenübertragung zwischen Programmen von Maschine zu Maschine. Mithilfe eines REST-Clients lassen sich die übertragenen Daten aber auch als Mensch meist gut lesen.
In diesem Artikel verwenden wir den Advanced REST Client. Er steht als Erweiterung für den Chrome-Browser kostenfrei in Googles Chrome Webstore zur Installation bereit [1]. Zur Datenübertragung kommt das HTTP-Protokoll zum Einsatz. Besitzen Sie keine E.ON Aura, sehen Sie sich einmal in Ihrem lokalen Netzwerk um: Auch viele andere Geräte stellen ihren Betriebsstatus als REST-Service bereit.
Aura was?
Bei E.ON Aura handelt es sich um eine komplette Solaranlage, die aus unterschiedlichen Komponenten besteht, die das Unternehmen für jeden Kunden individuell zusammenstellt. Mit einem Solarrechner lässt sich vor dem Kauf der Anlage der zu erwartende Ertrag errechnen. Wenn Sie mehr über die E.ON Aura erfahren möchten, besuchen Sie die Homepage des Herstellers [2].
Die REST-API
Um eine Vorstellung davon zu bekommen, wie ein REST-Call funktioniert, starten Sie den REST-Client und setzen einen Call auf die URL des Aura-Controllers ab. Dessen IP-Adresse ermitteln Sie am einfachsten mit einem Blick in die Daten des Routers. Der Gerätenamen des Controllers beginnt mit android_, danach folgt eine Art Seriennummer. Die URL für das Absetzen der Abfrage lautet:
http://IP-Adresse/rest/kiwigrid/wizard/devices
Klappt alles wie gewünscht, sehen Sie die Daten des Controllers in Ihrem REST-Client (Abbildung 1). Ein solcher REST-Call lässt sich auch an jede beliebige andere Datenquelle stellen. Zu Testzwecken gibt es im Internet einige freie Services. Ein einfaches Beispiel finden Sie unter der URL https://api.predic8.de/shop/products/; sie liefert als Antwort eine Liste von Obstsorten zurück.
Abbildung 1: Die Antwort des Aura-Controllers auf die Anfrage des REST-Clients in Google Chrome.
Aber kommen wir zurück zum Aura-Controller. Wie Sie sehen, ist die Datenstruktur hierarchisch aufgebaut. Der erste Knoten heißt results; direkt darunter befindet sich ein Array mit durchnummerierten Einträgen (items), das alle in der Anlage verbauten Geräte enthält.
Um die genauen Pfade zu den einzelnen Werten Ihrer Anlage zu finden, müssen Sie nachsehen, welches Gerät welche Nummer besitzt. Die Namen der Werte bleiben immer gleich. Es kommt aber vor, dass sie nicht in demselben Item wie in den folgenden Beispielprogrammen stehen. Die Browser-Suche hilft hier ungemein, um die Positionen der einzelnen Werte in der Datenstruktur zu finden.
Projekt-Setup
Dieser Workshop baut auf dem React-Native-Artikel “Zugriff von außen” aus der RPG-Ausgabe 10/2019 auf [3]. Er beschreibt, welche Tools Sie benötigen, um mit React Native Programme zu erstellen. Dieses Projekt basiert auf dem tab-Workflow. Er enthält eine Menge interessanter Beispiele und verwendet die react-navigation-Bibliothek.
Um das neue Projekt zu erstellen, verwenden Sie das Kommando expo init aura_monitor. Um es zu starten, wechseln Sie dann in den neu erstellten Ordner und tippen in der Konsole cd aura_monitor npm start. Nun können Sie wie gewohnt den QR-Code mit Ihrer Expo-App fotografieren und mit der Entwicklung starten.
Gehen wir nun auf einige interessante Teile der App ein. Stylesheets behandelt React Native nicht wie CSS-Dateien unter HTML, sondern wie Programmcode. Daher findet sich in allen Beispielprogrammen das Stylesheet am Ende der Javascript-Datei. Für kleine Projekte mag das angehen. Möchte man aber eine größere App mit einem einheitlichen Erscheinungsbild erstellen, ist es sinnvoll, alle Styles in einer Datei zu bündeln. Diese lässt sich dann in alle Programme der Applikation importieren. Somit verwenden Sie überall die gleichen Styles.
Unsere Beispielapplikation importiert die Styles mit dem relativen Pfad. Je nach Position der Javascript-Datei müssen Sie die Styles aus einem anderen Pfad importieren. Die Dateiendung dürfen Sie beim Import nicht mit angeben, stattdessen tippen Sie import styles from '../styles';. Listing 1 zeigt das Stylesheet aus unserem Beispielprogramm.
