Mobile Web Teil 1 - WRT
Posted Juni 14th, 2009 by bishoph
Ich habe ja vor einigen Tagen angekündigt, das ich hier über Ansätze schreibe, wie man webbasierte Anwendungen auf einem mobilen Endgerät entwickeln kann. Das Ziel ist es, am Ende eine Anwendung zu haben, die nahezu alle marktrelevanten (neuen) Endgeräte abdeckt. Dabei sollte die verwendete Technologie möglichst identisch und der Aufwand gering sein. Mal schauen wie weit wir damit kommen.
Als ersten Kandidaten habe ich mit die Web Runtime Widgets (WRT) ausgesucht. Die nachfolgenden Beispiele beziehen auf Endgeräte mit Touch Screen, bei denen als Basis die S60 5th Edition dient.
Nach aktuellem Stand basieren die folgenden Endgeräte auf der S60 5th Edition:
* Nokia 5800 XpressMusic
* Nokia N97
* Samsung i8910 Omnia HD
* Sony Ericsson Satio
Um ein Widgets zu erstellen benötigt man HTML, CSS und JavaScript Kenntnisse. Widgets lassen sich auf den Endgeräten installieren und bieten Zugriff auf bestimmte Systemressourcen.
Es gibt diverse Entwicklungstools und ich habe mich für Aptana Studio entschieden da diese Plattform auch iPhone Entwicklung ermöglicht. Leider wird derzeitig nur Windows und kein Linux unterstützt, eine Linux Version ist angekündigt.
Zu Installation und Basics von Aptana Studio möchte ich eigentlich nichts sagen, denn da gibt es gute Ressourcen im Web.
Einführung
In Aptana Studio kann man einfach ein existierendes Widget importieren oder ein neues erstellen. Widgets enden mit der Dateiendung ".wgz", allerdings sind Widgets einfache Zip-Archive. Man kann diese Archive also selber erzeugen und man benötigt Aptana Studio nicht unbedingt. Innerhalb der IDE kann man hilfreicher weise direkt das Ergebnis anschauen, die Auflösung/Endgerät und einfache Events auslösen. Es ist auch möglich JavaScript zu debuggen.
Damit das Endgerät oder ein Emulator ein Widget installieren und ausführen kann, werden bestimmte Informationen benötigt, also z.B. wie das Widget heißt, was die Startseite ist. Diese Informationen stehen in der Datei "info.plist". Damit die Anwendung auch richtig gut aussieht und identifiziert werden kann ist es empfehlenswert ein "Icon.png" zu erzeugen und mit dem Widget auszuliefern. Ach ja, die von mir eingesetzt Version von Aptana Studio verlangt das die Startseite mit ".html" endet. Einige Beispiel-Widgets arbeiten allerdings mit ".xhtml" was zu einer Fehlermeldung führt. Ein einfaches umbenennen und ändern in der "info.plist" eliminiert die Fehlermeldung.
Installation auf dem Endgerät
Auf einem Endgerät läßt sich ein Widget installieren indem man es auf das Endgerät kopiert und dann "öffnet", oder indem man das Widget per Browser lädt. Bei dieser Methode ist zu beachten das der korrekte Mime-Type gesetzt wird und zwar "application/x-nokia-widget". Ist der Mime-Type anders, so wird das Widget auf das Endgerät gespeichert und man kann es durch ein "öffnen" installieren.
API
Bei WRT gibt es fast auf alle systemrelevante Informationen und Dienste Zugriff:
* Netzwerksignalstärke
* Batterieladezustand
* Netzwerkzustand
* Zugriffe auf Kalender
* Zugriff auf die Inbox
* Zugriff auf Kontakte
* Zugriff auf GPS Informationen
Limitierungen
Leider wird der Canvas von WRT (derzeitig?) nicht unterstützt.
Erste Schritte
Meine erste, sehr einfache, Anwendung habe ich auf der Basis der RouteWidget Example verwendet. Die Anwendung hat einen Button, der beim Starten die aktuelle Zeit speichert, in ein lesbares Format konvertiert (die Funktion war vorhanden) und den Wert ausgibt. Also sehr überschaubar. Die Anwendung läuft, da es eine einfache Webseite mit ein wenig CSS und Javascript ist in aktuellen Browsern. Nachdem erzeugen der "WGZ"-Datei kann das Widget auf einem kompatiblen Endgerät installiert werden und steht ab diesem Zeitpunkt offline zur Verfügung.
Emulator, Kompatibilität und die Resultate
Die zweite Anwendung sollte schon etwas mehr können. Location Based Services und die damit einhergehende Abfrage von Geo-Koordinaten sollten es sein. Außerdem wollte ich auf einem Framework aufbauen welches eine bekannte Bedienbarkeit garantiert und sich um die Darstellung kümmert. Gefunden habe ich iui. Die Abfrage von GPS Koordinaten war schnell umgesetzt und auch eine Darstellung der aktuellen Position mittels Google Maps war schnell umgesetzt. Sowohl in Aptana Studio, als auch im Emulator läuft die Anwendung gut. Sobald das ganze allerdings auf dem Endgerät installiert ist kommt schnell die Ernüchterung. Zu langsam und zäh. Zum Glück bietet Google eine API zur Darstellung der aktuellen Position aufgrund eines Bildes. Auch bei dieser Umsetzung läuft das Widget im Emulator. Die GUI auf Basis von iui funktionierte im Emulator ebenfalls einwandfrei. Nach der Installation auf dem Endgerät musste ich feststellen, das ein Klick auf den "Zurück"-Knopf, der automatisch oben recht eingeblendet wird, keine Wirkung zeigt. Ein Debugging ist ein solch einem Falle recht schwierig, aber ich habe eine Lösung gefunden. Anfangs wurde die Map nicht angezeigt, aber auch dieses Problem ist behoben (man muss teilweise nur einmal auf + oder - klicken!).
Das Ergebnis von WRT hinterlässt bei mir gemischte Gefühle, denn insgesamt halte ich den Ansatz per JavaScript Anwendungen zu erstellen und diese auf dem Endgerät verfügbar zu machen für sehr gelungen. Allerdings gilt scheinbar wieder einmal die Devise: Write once, debug anywhere und nichts ist so einfach wie es auf den ersten Blick scheint. Der Emulator sollte zeigen was den Endbenutzer später wirklich erwartet. Der Entwickler sollte frühzeitig unterstützt werden. Nicht erst bei der Auslieferung und Installation auf dem Endgerät. Hier gibt es noch Nachholbedarf. Ansonsten ist aber der Zugriff auf native Systeminformationen so einfach wie selten zuvor und einfache Anwendungen wie eine Stoppuhr lassen sich in wenigen Minuten erstellen.
Die beiden WRT-Widgets stehen beide zum download, zum testen und ausprobieren zur Verfügung. Gerne nehme ich auch Anregungen (und natürlich Bugfixes) entgegen ;-)
Widget Download
* Stopwatch
* GeoLocationClient
Wie geht es weiter
In den kommenden Teilen werde ich versuche die aktuellen Probleme zu lösen. Dann geht es weiter mit der Unterstützung von Android und WinMob. Geplant sind außerdem der Palm Pre, das iPhone und Blackberry. Aber wie eingangs schon gesagt: Mal schauen wie weit wir mit diesem Ansatz kommen.
Als ersten Kandidaten habe ich mit die Web Runtime Widgets (WRT) ausgesucht. Die nachfolgenden Beispiele beziehen auf Endgeräte mit Touch Screen, bei denen als Basis die S60 5th Edition dient.
Nach aktuellem Stand basieren die folgenden Endgeräte auf der S60 5th Edition:
* Nokia 5800 XpressMusic
* Nokia N97
* Samsung i8910 Omnia HD
* Sony Ericsson Satio
Um ein Widgets zu erstellen benötigt man HTML, CSS und JavaScript Kenntnisse. Widgets lassen sich auf den Endgeräten installieren und bieten Zugriff auf bestimmte Systemressourcen.
Es gibt diverse Entwicklungstools und ich habe mich für Aptana Studio entschieden da diese Plattform auch iPhone Entwicklung ermöglicht. Leider wird derzeitig nur Windows und kein Linux unterstützt, eine Linux Version ist angekündigt.
Zu Installation und Basics von Aptana Studio möchte ich eigentlich nichts sagen, denn da gibt es gute Ressourcen im Web.
Einführung
In Aptana Studio kann man einfach ein existierendes Widget importieren oder ein neues erstellen. Widgets enden mit der Dateiendung ".wgz", allerdings sind Widgets einfache Zip-Archive. Man kann diese Archive also selber erzeugen und man benötigt Aptana Studio nicht unbedingt. Innerhalb der IDE kann man hilfreicher weise direkt das Ergebnis anschauen, die Auflösung/Endgerät und einfache Events auslösen. Es ist auch möglich JavaScript zu debuggen.
Damit das Endgerät oder ein Emulator ein Widget installieren und ausführen kann, werden bestimmte Informationen benötigt, also z.B. wie das Widget heißt, was die Startseite ist. Diese Informationen stehen in der Datei "info.plist". Damit die Anwendung auch richtig gut aussieht und identifiziert werden kann ist es empfehlenswert ein "Icon.png" zu erzeugen und mit dem Widget auszuliefern. Ach ja, die von mir eingesetzt Version von Aptana Studio verlangt das die Startseite mit ".html" endet. Einige Beispiel-Widgets arbeiten allerdings mit ".xhtml" was zu einer Fehlermeldung führt. Ein einfaches umbenennen und ändern in der "info.plist" eliminiert die Fehlermeldung.
Installation auf dem Endgerät
Auf einem Endgerät läßt sich ein Widget installieren indem man es auf das Endgerät kopiert und dann "öffnet", oder indem man das Widget per Browser lädt. Bei dieser Methode ist zu beachten das der korrekte Mime-Type gesetzt wird und zwar "application/x-nokia-widget". Ist der Mime-Type anders, so wird das Widget auf das Endgerät gespeichert und man kann es durch ein "öffnen" installieren.
API
Bei WRT gibt es fast auf alle systemrelevante Informationen und Dienste Zugriff:
* Netzwerksignalstärke
* Batterieladezustand
* Netzwerkzustand
* Zugriffe auf Kalender
* Zugriff auf die Inbox
* Zugriff auf Kontakte
* Zugriff auf GPS Informationen
Limitierungen
Leider wird der Canvas von WRT (derzeitig?) nicht unterstützt.
Erste Schritte
Meine erste, sehr einfache, Anwendung habe ich auf der Basis der RouteWidget Example verwendet. Die Anwendung hat einen Button, der beim Starten die aktuelle Zeit speichert, in ein lesbares Format konvertiert (die Funktion war vorhanden) und den Wert ausgibt. Also sehr überschaubar. Die Anwendung läuft, da es eine einfache Webseite mit ein wenig CSS und Javascript ist in aktuellen Browsern. Nachdem erzeugen der "WGZ"-Datei kann das Widget auf einem kompatiblen Endgerät installiert werden und steht ab diesem Zeitpunkt offline zur Verfügung.
Emulator, Kompatibilität und die Resultate
Die zweite Anwendung sollte schon etwas mehr können. Location Based Services und die damit einhergehende Abfrage von Geo-Koordinaten sollten es sein. Außerdem wollte ich auf einem Framework aufbauen welches eine bekannte Bedienbarkeit garantiert und sich um die Darstellung kümmert. Gefunden habe ich iui. Die Abfrage von GPS Koordinaten war schnell umgesetzt und auch eine Darstellung der aktuellen Position mittels Google Maps war schnell umgesetzt. Sowohl in Aptana Studio, als auch im Emulator läuft die Anwendung gut. Sobald das ganze allerdings auf dem Endgerät installiert ist kommt schnell die Ernüchterung. Zu langsam und zäh. Zum Glück bietet Google eine API zur Darstellung der aktuellen Position aufgrund eines Bildes. Auch bei dieser Umsetzung läuft das Widget im Emulator. Die GUI auf Basis von iui funktionierte im Emulator ebenfalls einwandfrei. Nach der Installation auf dem Endgerät musste ich feststellen, das ein Klick auf den "Zurück"-Knopf, der automatisch oben recht eingeblendet wird, keine Wirkung zeigt. Ein Debugging ist ein solch einem Falle recht schwierig, aber ich habe eine Lösung gefunden. Anfangs wurde die Map nicht angezeigt, aber auch dieses Problem ist behoben (man muss teilweise nur einmal auf + oder - klicken!).
Das Ergebnis von WRT hinterlässt bei mir gemischte Gefühle, denn insgesamt halte ich den Ansatz per JavaScript Anwendungen zu erstellen und diese auf dem Endgerät verfügbar zu machen für sehr gelungen. Allerdings gilt scheinbar wieder einmal die Devise: Write once, debug anywhere und nichts ist so einfach wie es auf den ersten Blick scheint. Der Emulator sollte zeigen was den Endbenutzer später wirklich erwartet. Der Entwickler sollte frühzeitig unterstützt werden. Nicht erst bei der Auslieferung und Installation auf dem Endgerät. Hier gibt es noch Nachholbedarf. Ansonsten ist aber der Zugriff auf native Systeminformationen so einfach wie selten zuvor und einfache Anwendungen wie eine Stoppuhr lassen sich in wenigen Minuten erstellen.
Die beiden WRT-Widgets stehen beide zum download, zum testen und ausprobieren zur Verfügung. Gerne nehme ich auch Anregungen (und natürlich Bugfixes) entgegen ;-)
Widget Download
* Stopwatch
* GeoLocationClient
Wie geht es weiter
In den kommenden Teilen werde ich versuche die aktuellen Probleme zu lösen. Dann geht es weiter mit der Unterstützung von Android und WinMob. Geplant sind außerdem der Palm Pre, das iPhone und Blackberry. Aber wie eingangs schon gesagt: Mal schauen wie weit wir mit diesem Ansatz kommen.
Kommentare
vgf yg ujhk guyk
vgf yg ujhk guyk
Nokia 5530 XpressMusic
Das Nokia 5530 XpressMusic basiert ebenfalls auf S60v5