Webtechnologien zur Entwicklung von mobilen Anwendungen

Mobile Widgets – Eine Einführung
Kommentare

Mobile Widgets bieten die Möglichkeit zur plattformübergreifenden Programmierung von Anwendungen für mobile Geräte und stellen eine Alternative zur Entwicklung von nativen Applikationen, die meist speziell auf eine Platform zugeschnitten sind, dar. In diesem Artikel möchte ich Ihnen zeigen, um was es sich bei Mobile Widgets handelt, wie Sie Mobile Widgets erstellen, welche Standards es gibt und welche Tools Ihnen bei der Entwicklung zur Verfügung stehen. Der zweite Teil widmet sich dann der Praxis und zeigt, wie Sie auf Gerätefunktionen zugreifen können.

Der Markt für so genannte Smartphones und mobile Applikationen boomt, nicht zuletzt Dank des iPhones. Neben Apple buhlen viele unterschiedliche Hersteller/Plattformen zurzeit um die Gunst der Entwickler und Kunden: Google schickt Android ins Rennen, Microsoft versucht es mit Windows Phone 7, Hewlett-Packard möchte nach dem Zukauf von Palm mit WebOS punkten, Samsung startete vor kurzem bada, Intel steigt mit MeeGo in den Markt ein und BlackBerry tritt mit Web Worker an. Dazu kommen natürlich noch bestehende Plattformen wie Symbian, Java (Mobile Edition), .NET und viele weitere mehr. Um Anwendungen für die jeweiligen Plattformen zu entwickeln, werden derzeit zwei Wege favorisiert: Zum einen werden Applikation in der für die jeweilige Plattform favorisierten Sprache – für Android bspw. in Java – programmiert und anschließend für genau diese Plattform kompiliert und vertrieben; zum Anderen werden für mobile Browser optimierte Versionen von Webseiten und Webapplikationen angeboten.

Beide Herangehensweisen haben ihre Vor- und Nachteile. Für native Applikationen spricht sicherlich die bessere Performance gegenüber Webapplikationen, ein größtenteils einheitliches User Interface, die Möglichkeit, eine Applikation auch ohne aktive Netzverbindung zu verwenden – sofern nicht Daten von einem Web Service verwendet werden sollen – sowie die Möglichkeit, auf Gerätefunktionen wie GPS, Kalender, Kamera etc. zugreifen zu können. Demgegenüber steht das Problem, dass eine Applikation, entwickelt für eine Platform, nicht ohne weiteres auf einer anderen Platform lauffähig ist, sodass zusätzlich Know-how, Zeit und Geld investiert werden müssen, um eine Anwendung für mehrere Plattformen anbieten zu können. Hinzu kommt, dass man sich für den Vertrieb einer Anwendung mit den unterschiedlichen App Stores befassen muss: Anmelden beim jeweiligen Developer-Programm, Platform-APIs und weitere Dokumentation studieren, Revenue-Model sowie Terms and Conditions prüfen etc. Außerdem setzt man sich der Willkür der Store-Betreiber aus, die auch schon mal einer App den Zugang zum App Store verweigern können. Auf der anderen Seite haben Webapplikation, die mit clientseitigen Webtechnologien erstellt und für die Darstellung auf mobilen Endgeräten optimiert wurden, den Vorteil, dass sie mit einem kleinen, standardisierten Satz an Auszeichnungs- und Programmiersprachen realisiert werden können. Gleichzeitig kämpfen sie wie Webapplikationen auf dem Desktop auch mit unterschiedlichen Rendering- und JavaScript Engines und dadurch mit inkonsistenter Darstellung.

Aus Sicht von Webentwicklern wäre es schön, wenn sich die Vorteile von nativen Applikationen – einheitliche Darstellung, Offlinebenutzung, Zugriff auf Gerätefunktionen – mit den Vorteilen von Webapplikationen – bestehendes Know-how nutzen, Programmierung mit standardisierten Webtechnologien – für die Entwicklung von mobilen Anwendungen kombinieren ließen. Und genau das versuchen Mobile Widgets zu erreichen.

Mobile Widgets

Mobile Widgets sind vollwertige Clientapplikationen, die mittels Webtechnologien erstellt werden, wobei hauptsächlich HTML, CSS, JavaScript und XML zum Einsatz kommen. Ein Widget besteht aus mindestens zwei Dateien: Einer Konfigurationsdatei, die zwingend config.xml heißen muss und einer HTML-Datei, die im Regelfall index.html heißt (wobei sich dieser Name mittels Eintrag in der config.xml ändern lässt). Die Konfigurationsdatei enthält notwendige Metainformationen über das Widget, bspw. den Namen, eine Beschreibung, Informationen zum Autor, eine eindeutige ID, aber auch der Zugriff auf das Internet, das Dateisystem und APIs werden hier geregelt. Die HTML-Datei enthält das notwendige Markup, um Informationen auf dem Bildschirm darzustellen. Optional können eine beliebige Anzahl von CSS-Datei zur Gestaltung des Inhalts sowie eine beliebige Anzahl von JavaScript-Dateien für die Applikationslogik eingebunden werden. Auch Frameworks wie jQuery, MooTools oder Dojo können verwendet werden.

Ausgeführt werden Widgets auf einem mobilen Gerät von einer browserähnlichen Laufzeitumgebung (Widget Runtime), die eine eigene Rendering Engine mitbringt und sich um Darstellung des Inhalts sowie die Ausführung von JavaScript-Code kümmert. Jedes Widget wird dazu in einem eigenen Prozess ausgeführt, sodass der Absturz eines Widgets andere Widgets nicht beeinträchtigt. Unerheblich ist, welcher Browser schon auf dem jeweiligen Gerät verfügbar ist, da jedes Widget von der Widget Runtime ausgeführt, und so von der mitgelieferten Rendering Engine dargestellt wird. Das ermöglicht eine einheitliche Darstellung über alle Plattformen hinweg und erleichtert die Entwicklung, da nur genau eine Rendering Engine angepasst werden muss. Neben der Widget Runtime kümmert sich der Widget Manager auf dem Gerät um die Verwaltung von Widgets an sich, d. h., um grundlegende Dinge wie das Installieren und Löschen von Widgets, das Prüfen auf neuere Versionen eines Widgets etc.

Standards

Grundlage der Entwicklung von (Mobile) Widgets sind Webtechnologien wie HTML, CSS und XML, die allesamt vom W3C, dem World Wide Web Consortium, spezifiziert werden. Daneben spielt noch eine Reihe weiterer Spezifikationen bei der Entwicklung von Mobile Widgets eine Rolle. Diese werden innerhalb der Web Applications (WebApps) Working Group, die innerhalb des W3Cs angesiedelt ist, erarbeitet. Die Website der WebApps Working Group führt derzeit neun Spezifikationen zum Thema Widgets auf. Beispiele finden Sie im Kasten „WebApps-Working-Group-Spezifikationen (Auszug) „.

WebApps-Working-Group-Spezifikationen (Auszug)
  • Widget Packaging & Configuration: Beschreibt den Aufbau und die verfügbaren Knoten und deren Attribute, die in der Konfigurationsdatei zur Verfügung stehen; außerdem wird die Widget-Struktur sowie das Verfahren zum Paketieren eines Widgets beschrieben (siehe hierzu auch den Abschnitt „Widget Entwicklung“ in diesem Artikel).
  • The Widget Interface: Beschreibt eine Schnittstelle für den Zugriff auf Metainformationen aus der config.xml zur Laufzeit sowie ein Verfahren, um Daten persistent zu speichern und wieder auszulesen (bspw. Zugangsdaten zu einem Web Service, sodass der Benutzer nicht bei jedem Start diese Daten neu eingeben muss).
  • View-mode Media Feature: Beschreibt die unterschiedlichen Modi, in denen ein Widget ausgeführt und dargestellt werden kann.

2008 riefen China Mobile, SoftBank Mobile und Vodafone – gefolgt von Verizon Wireless Anfang 2009 – das Joint Innovation Lab (JIL) ins Leben, das unter anderem mit dem Ziel gegründet wurde, einen einheitlichen Vertriebsweg für mobile Applikationen zu schaffen. Dafür erarbeitete das JIL eigene Widget-Spezifikationen, die aber allesamt auf den bestehenden Spezifikationen des W3C basieren. Hinzugekommen ist die Spezifikation einer Schnittstelle, die den Zugriff auf Gerätefunktionen aus JavaScript heraus beschreibt, sodass es möglich ist auf GPS, Kamera oder Adressbuch des Geräts zuzugreifen. Die letzte und damit aktuellste Version dieser Spezifikation ist die JIL Widget System High Level Tech Spec v1.2.2.

Auf dem Mobile World Congress im Februar 2010 verkündeten 24 der größten Telekommunikationsanbieter – darunter die Deutsche Telekom und Vodafone – die Gründung der Wholesale Applications Community (WAC). Die Ziele von JIL und WAC sind sehr ähnlich, was dazu geführt hat, dass sich diese beiden Konsortien im Oktober 2010 unter dem Dach der WAC zusammengeschlossen haben. Auf Grund der Tatsache, dass die WAC-Spezifikationen noch nicht fertiggestellt sind, wird zurzeit die letzte Version der JIL-Spezifikation zur Überbrückung als WAC v1.0 weitergeführt. Das erklärt auch, warum in der WAC-Spezifikation noch Verweise zur JIL vorhanden sind und auch der Namespace zur Einbindung der Schnittstelle zum Zugriff auf Gerätefunktionen nicht angepasst wurde.

Widget Entwicklung und Deployment

Die Einstiegshürden in die Programmierung von Mobile Widgets sind relativ gering, es reicht ein einfacher Texteditor – bspw. Notepad, vi oder TextMate – und die Möglichkeit, ZIP-Dateien zu erstellen. Natürlich kann auch eine bestehende Entwicklungsumgebung (IDE) weiter verwendet werden. Außerdem steht dem Entwickler eine Reihe von Tools zur Verfügung, um die Entwicklung zu vereinfachen. So stellt die JIL einen SDK auf Basis von Eclipse zur Verfügung, der die Eclipse-typischen Editor-Funktionen wie Syntax-Highlighting, Codevervollständigung usw. enthält. Hinzu kommen ein Assistent zur unkomplizierten Erstellung neuer Widget-Projekte sowie ein Emulator auf Android-Basis. Auch von Vodafone gibt es einen Widget SDK, der zwar keinen Editor, dafür aber ein Tool zur Erstellung und Konfiguration von Widget-Projekten sowie zum Paketieren und Verteilen von Widgets beinhaltet. Zum Testen von Widgets bietet sich der Ripple Mobile Environment Emulator an, der das Debuggen von Widgets im Desktopbrowser ermöglicht. Wer noch keine Widget Runtime auf seinem Mobilgerät installiert hat, kann sich diese bspw. auf der Seite von Vodafone kostenlos herunterladen. Derzeit stehen dort Laufzeitumgebungen für Symbian-S60-v3- und v5-Geräte sowie für Android zum Download bereit.

Wie bereits oben beschrieben, besteht ein Widget aus einer Konfigurationsdatei namens config.xml (Listing 1), sowie aus mindestens einer HTML-Datei (Listing 2) und optionalen CSS- und JavaScript-Dateien. Zur Generierung eines Widgets aus diesen Dateien ist nun kein Kompilierungsvorgang notwendig, und auch separate Bibliotheken werden nicht benötigt. Es reicht, den übergeordneten Ordner, der alle zu einem Widget-Projekt gehörigen Dateien beinhaltet, zu „zippen“ und die Dateiendung anschließend von .zip in .wgt umzubenennen.

Die Verteilung von Widgets zu Testzwecken ist ebenfalls sehr einfach: Mittels USB oder Bluetooth lässt sich das Widget auf ein Gerät transferieren und dort installieren – sofern eine Widget Runtime vorhanden ist. Eine weitere Möglichkeit besteht darin, das Widget auf einen (lokalen) Webserver zu laden und von dort mit dem Mobilgerät herunterzuladen. Soll das Widget nach abgeschlossener Testphase dann für Kunden bereitgestellt werden, bietet sich ein Widget Store an, wie er beispielsweise von Vodafone betrieben wird. Mehr Informationen hierzu finden sich hier und hier.

HelloWorldA short demo widget

  
    Hello World

Hello World

Ausblick

Mobile Widgets stellen eine einfache Möglichkeit für Webentwickler dar, ihr bisheriges Know-how für die Entwicklung von Applikationen für mobile Endgeräte zu nutzen. Doch nicht nur dort erlangen Widgets eine immer größere Beliebtheit. Auch auf dem Desktop – bspw. Apples Dashboard, Microsofts Gadgets oder innerhalb des Opera-Browsers – findet sich eine immer größere Auswahl. Verwendung finden Widgets mittlerweile auch abseits des Computers: Hersteller von Fernsehgeräten – bspw. Samsung – entdecken zurzeit die Möglichkeiten der Mini-Applikationen fürs TV.

Stefan Kolb arbeitet als Softwareentwickler bei der Indiginox GmbH (www.indiginox.com), wo er sich mit Projekten rund ums mobile Web sowie mit verschiedenen mobilen Plattformen beschäftigt. Sein Blog findet sich auf blog.stefankolb.de.
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -