Spirit Android App mit HTML5

HTML5 ist ein sehr spannendes Thema! Wie ihr gleich sehen werdet, nicht nur im Web und für Internetseiten, sondern auch im Bereich des Mobile Computings. Mit HTML5 können im Handumdrehen neue mobile Applikationen erstellt werden, die auch einiges drauf haben. Um eine Android App mit den Mitteln von HTML5 zu schreiben wird nur etwas Java benötigt. Die App baut ihr direkt mit HTML und *ganz wichtig* JavaScript.

Nähere Informationen zum Umfeld von Spirit und dieser App, sowie App-Screenshots findet ihr auf der Seite SpiritHtml5App.

Zur Entwicklung wird ein laufendes Android SDK benötigt, entsprechende Informationen dazu findet ihr hier.

Der gesamte Quellcode der SpiritHtml5App ist auf GitHub zu finden.

Dann gehts auch schon los:


1. Android Activity
Die Activity ist der Kern einer Android App. Da unsere App ja aus HTML5 besteht, benötigen wir also einen Browser. Daher erzeugt die onCreate-Methode einen WebView. Wir aktivieren dann JavaScript und auch den DomStorage, damit wir auch Daten im Browser speichern können. Als nächstes wird ein WebChromeClient erzeugt und danach die URL unserer eigentlichen App aufgerufen.



Diese paar Zeilen im Java reichen völlig aus, damit unsere App starten und die nötigen Funktionen nutzen kann.

2. Die eigentliche App
Ab jetzt geschieht alles im Ordner /assets/www. Hier erstellen wir eine index.html, die den HTML5 DOCTYPE erhält und auch eine entsprechende Struktur. Als Nächstes müssen ein paar Bibliotheken importiert werden, die uns das Leben viiiiieeel leichter machen! Dann sollte das Ganze ungefähr so aussehen:



Die Datei textile.js wird nur benötigt, weil die einzelnen Meldungen eine Textileformatierung haben.
Nun folgt - unter Verwendung von jQuery Mobile - die Erstellung der "Webseite":



jQuery Mobile nutzt das mit HTML5 neu eingeführte data-* Attribut um Elemente zu kennzeichnen und Einstellungen zu tätigen. Wie ihr seht, gibt es einen Update Button, der die JS-Funktion getNews() aufruft. Diese wird auch als onload-Event mit anderem Parameter aufgerufen.



Damit sind wir auch schon beim Herzen dieser App angelangt, den 2 JavaScript-Funktionen getNews() und renderNews(). Letztere Funktion wird im Folgenden nicht weiter betrachtet, da sie wirklich nur die Meldungen mit HTML formatiert. Interessant ist in dieser Methode nur die genutzte jQuery Funktion $.each und das Auslösen des Triggers create, damit die Seite von jQuery Mobile neu gerendert wird und die Darstellung wieder passt.

So nun zurück zu getNews(). Diese Funktion prüft als Erstes, ob die localStorage API von HTML5 verfügbar ist. Wenn ja, holt sie die gespeicherten Daten aus dem Storage.



Danach wird geprüft, ob die Daten explizit live abgerufen (durch Drücken des Update-Buttons) oder aus dem Storage genommen werden sollen. Der Abruf der Meldungen vom Server wurde mit jQuery und deren $.ajax() Funktion realisiert.



In beiden Fällen wird renderNews() mit dem Rendern der Daten beauftragt.
So, das wars auch schon. Nun haben wir eine App, die mittels JavaScript Daten aus dem Netz holt und diese mithilfe der HTML5 localStorage API lokal speichert.

Zusammenfassend vielleicht hier noch mal die nötigen Aufrufe für die localStorage API.

Zum Prüfen ob die API zur Verfügung steht:

Mittels dem Key die Daten aus dem Storage holen:

Und zum Schluss, die Daten als JSON-String im localStorage-Objekt speichern:



Danke fürs Lesen und viel Spaß mit der App (oder eurer eigenen)!