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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // create a webView | |
| WebView webView = (WebView)findViewById(R.id.webView); | |
| // enable some settings | |
| WebSettings settings = webView.getSettings(); | |
| settings.setJavaScriptEnabled(true); | |
| settings.setDomStorageEnabled(true); | |
| // use the WebChromeClient | |
| webView.setWebChromeClient(new WebChromeClient()); | |
| // load the html files | |
| webView.loadUrl("file:///android_asset/www/index.html"); |
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:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Spirit HTML5 App</title> | |
| <meta charset="utf-8"/> | |
| <!-- Import the libraries --> | |
| <link rel="stylesheet" href="jquery.mobile.min.css" /> | |
| <script src="jquery.min.js"></script> | |
| <script src="jquery.mobile.min.js"></script> | |
| <script src="textile.js"></script> | |
| </head> | |
| <body> | |
| <!-- content goes here --> | |
| </body> | |
| </html> |
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":
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div data-role="page" data-theme="b"> | |
| <button data-role="button" data-icon="refresh" | |
| onclick="getNews(true);" data-theme="b">Update!</button> | |
| <div data-role="content" id="content"></div><!-- /content --> | |
| </div><!-- /page --> |
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // if the page ist loaded call getNews() | |
| $(document).ready(function(){ | |
| getNews(); | |
| }); |
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // check if localStorage is available | |
| if(typeof localStorage !== 'undefined'){ | |
| // get the saved data if it's available | |
| var localNewsJSON = localStorage.getItem('SpiritNews'); | |
| } |
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // check if there is data from the localStorage and | |
| // whether the data must be fetched live | |
| if(localNewsJSON && !live){ | |
| // call renderNews with the data from the localStorage | |
| renderNews(JSON.parse(localNewsJSON)); | |
| }else{ | |
| // fetch the news from the REST interface of the news plattform | |
| $.ajax({ | |
| url: "http://spirit.fh-schmalkalden.de/news", | |
| dataType: 'json', | |
| success: function (data){ | |
| // save the data to the localStorage | |
| localStorage.setItem('SpiritNews', JSON.stringify(data)); | |
| // call renderNews with the fetched data | |
| renderNews(data); | |
| }, | |
| error: function(jqXHR, textStatus, errorThrown){ | |
| // hide the loading animation | |
| $.mobile.hidePageLoadingMsg(); | |
| alert("Konnte keine Verbindung zum Server herstellen!"); | |
| }}); | |
| } |
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:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| if(typeof localStorage !== 'undefined') |
Mittels dem Key die Daten aus dem Storage holen:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var localNewsJSON = localStorage.getItem('SpiritNews'); |
Und zum Schluss, die Daten als JSON-String im localStorage-Objekt speichern:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| localStorage.setItem('SpiritNews', JSON.stringify(data)); |
Danke fürs Lesen und viel Spaß mit der App (oder eurer eigenen)!
Keine Kommentare:
Kommentar veröffentlichen