Universität Hamburg Fachbereich Informatik B A C H E L O R A R B E I T Plattformunabhängige Entwicklung mobiler Anwendungen mit Web-Technologien vorgelegt von David M. Lammerz geb. 2. Oktober 1987 in Hamburg Matrikelnummer: 6053363 eingereicht am 24. September 2012 Betreuer: Dr. Guido Gryczan, Dr. Axel Schmolitzky 1 Erklärung Hamburg, 24. September 2012 Ich versichere, dass ich die Arbeit selbstständig verfasst und keine anderen als die an- gegebenen Hilfsmittel - insbesondere keine im Quellenverzeichnis nicht benannten In- ternetquellen - benutzt habe, die Arbeit vorher nicht in einem anderen Prüfungsverfah- ren eingereicht habe und die eingereichte schriftliche Fassung der auf dem elektroni- schen Speichermedium entspricht. Ich stimme der Veröffentlichung dieser Arbeit in den Bestand der Bilbiothek des Fachbereichs Informatik in nicht digitaler Form zu. _________________________ David M. Lammerz 2 Danksagung An dieser Stelle möchte ich mich zuerst bei Dr. Guido Gryzan für die Erstbetreuung und Dr. Axel Schmolitzky für die Zweitbetreuung dieser Arbeit bedanken. Besonderer Dank gilt auch den Mitarbeitern des von dem Unternehmen C1WPS durchgeführten Delegs-Projekts und last but not least meiner Familie und Freunden für das Feedback und die Unterstützung. 3 Inhaltsverzeichnis 1 Einleitung 1 1.1 Motivation ....................................................................................................................1 1.2 Aufgabenstellung und Zielsetzung ...............................................................................2 1.3 Aufbau der Arbeit ........................................................................................................2 2 Grundlagen 4 2.1 Apps. ............................................................................................................................4 2.1.1 Begriffsklärung .....................................................................................................4 2.1.2 Anforderungen an Apps ......................................................................................5 2.1.3 Plattformen ...........................................................................................................6 2.1.4 Vertriebsmöglichkeiten .........................................................................................9 2.2 GebärdenSchrift ........................................................................................................11 2.3 Webtechnologien. .......................................................................................................12 2.3.1 HTML. ...............................................................................................................12 2.3.2 CSS ....................................................................................................................13 2.3.3 JavaScript ...........................................................................................................13 3 Plattformunabhängige Anwendungsentwicklung 14 3.1 WebApps ...................................................................................................................15 3.1.1 Responsive Design. .............................................................................................17 3.1.2 GUI-Frameworks ...............................................................................................19 3.1.3 Schnittstellen zum Gerät ...................................................................................22 3.2 Wrapper-Hybride ......................................................................................................23 3.2.1 PhoneGap/Cordova ..........................................................................................23 3.3 Interpreter-Hybride ...................................................................................................26 3.3.1 Appcelerator Titanium .......................................................................................26 4 4 Anwendungsbeispiel WebApp 28 4.1 Anforderungen und Vorgaben ...................................................................................28 4.2 Benutzte Technologien ...............................................................................................29 4.3.1 LocalStorage ......................................................................................................29 4.3.2 Mobile GWT. .....................................................................................................30 4.4 Hindernisse bei der Implementierung .......................................................................30 4.4.1 Same origin policy (SOP) ..................................................................................31 4.4.2 Performance-Optimierung ................................................................................33 4.4.3 Fehlersuche. ........................................................................................................38 4.5 Benutzertests ..............................................................................................................39 5 Zusammenfassung 40 5.1 Zusammenfassung der Möglichkeiten zur plattformunabhängigen Entwicklung von mobilen Anwendungen ....................................................................................................40 5.1.1 Kriterium: Plattformunabhängigkeit .................................................................41 5.1.2 Kriterium: Distributionswege ............................................................................42 5.1.3 Kriterium: Performance .....................................................................................42 5.1.4 Kriterium: Schnittstellen ....................................................................................42 5.1.5 Kriterium: Bedienbarkeit ...................................................................................43 5.1.6 Kriterium: Entwicklungskosten ..........................................................................43 5.1.7 Zusammenfassung und Ausblick .......................................................................44 Literaturverzeichnis 46 5 1 1 Einleitung 1.1 Motivation Mit der zunehmenden Verbreitung von Smartphones steigt das Interesse bei Entwick- lern und Firmen an mobilen Anwendungen mit dem Ziel, ihre Produkte durch eine mobile Anwendung zu verbessern und vorteilhafter zu vermarkten. Bei der Entwicklung solcher Anwendungen muss zuerst geklärt werden, für welche Plattform eine Anwen- dung entwickelt werden soll. Um einen größeren Kundenkreis auf dem stark im Wett- bewerb stehendem und sich monatlich veränderndem Smartphone-Markt zu erreichen, ist es unumgänglich, für mehrere Plattformen zu entwickeln. Jede Plattform stellt dabei eigene Anforderungen an die Entwickler. Eine Möglichkeit, diesem Problem zu begeg- nen, kann nach dem Leitsatz „Write once, run anywhere“1 die Nutzung von Web- technologien sein. Ein solcher Ansatz ist im Rahmen des Möglichen, da die aktuellen Smartphones größtenteils leistungsstarke Web-Browser2 besitzen, die mehr Schnittstellen zum Betriebssystem bieten. Ein gutes Beispiel für eine Unternehmen, die stark auf Webanwendungen setzt, ist Google mit ihren eigenen Services wie Google Text&Tabellen oder Google Mail. Diese sind nativer Software oft gleichwertig und können in Googles eigenem Betriebssystem, dem Chrome OS, solche sogar ersetzen. Ein weiteres bekanntes Beispiel ist Windows 8. Für dieses können Anwendungen neben C# auch mit HTML und JavaScript geschrie- ben werden. Diese Beispiele lassen eine Entwicklung, die den Browser als neues Betrieb- system deklariert, sichtbar werden. 1 Durch Sun Microsystem zur Veranschaulichung der Vorteile der Plattformunabhängigkeit von Java ge- prägter Ausspruch (siehe [Sun]). 2 iOS, Android und BlackBerry (drei der größten Plattformen) nutzen WebKit als HTML-Rendering-En- gine. 1 Die Entwicklung einer größeren Anwendung mit Webtechnologien begegnete mir erst- mals im Rahmen eines Industriepraktikums bei der C1WPS Ende 2011. Dort konnte ich drei Monate an der Entwicklung des Delegs-Editors3 mitwirken. Dieser Editor ist eine WYSIWYG-Webanwendung, welche es ermöglicht Dokumente in GebärdenSchrift (siehe Abschnitt 2.2 GebärdenSchrift) abzufassen und zu verwalten. Mein Interesse an Webtechnologien und der von den Nutzern geäußerte Wunsch nach einer mobilen Ver- sion motivierten mich im Rahmen der Entwicklung einer solche Anwendung das The- ma der „Plattformunabhängigen Entwicklung mobiler Anwendungen mit Web- Technologien“ zu behandeln. 1.2 Aufgabenstellung und Zielsetzung Im Rahmen dieser Arbeit werden die verschiedenen Ansätze der plattformunabhängi- gen Anwendungsentwicklung für Smartphones aufgeschlüsselt und verglichen. Als prak- tisches Beispiel wird die Entwicklung eines mobilen Wörterbuches für die Gebärden- Schrift (siehe 2.2 GebärdenSchrift) genutzt. Anhand der eigenen Erfahrungen bei der Entwicklung wird ein Vergleich der Gebrauchstauglichkeit der gängigen Konzepte zur Plattformunabhängigen Anwendungsentwicklung für mobile Plattformen mit Webtech- nologien gezogen. Darauf aufbauend wird eine Übersicht über die zukünftige Entwick- lung solcher Lösungen, als Motivation für weitere Arbeiten zu diesem Thema, gegeben. 1.3 Aufbau der Arbeit Kapitel 1 stellt die Arbeit in Grundzügen vor, dabei wird auf die Motivation, Aufgaben- stellung und Zielsetzung eingegangen. Im zweiten Kapitel werden die Grundlagen, auf denen diese Ausarbeitung aufbaut, vorgestellt. Hierfür werden der Begriff der App definiert und die heutigen Anforderun- gen an Apps beschrieben. Der Abschnitt über die verschiedenen Plattformen soll ver- deutlichen, warum das Konzept der plattformunabhängigen Anwendungsentwicklung für mobile Plattformen interessant ist. Darauf folgt eine Übersicht über die verschiede- nen Vertriebsmöglichkeiten für Apps. Der Abschnitt über die GebärdenSchrift dient zum Verständnis des späteren Abschnittes zum Anwendungsbeispiel, beschreibt die Grundlagen der GebärdenSchrift und wofür diese eingesetzt wird. Abschließend wird auf die für diese Arbeit wichtigen Webtechnologien eingegangen. 3 Zu finden unter http://www.delegs.com/delegseditor/ (geprüft 31.07.2012). 2 Das dritte Kapitel befasst sich mit einer Gegenüberstellung von WebApps, Wrapper- Hybriden und Interpreter-Hybriden. Mit der Vorstellung der Konzepte sollen die jewei- ligen Einsatzmöglichkeiten und die dem schrittweisen Annähern an die nativen Anwen- dungen zugrunde liegende Logik verdeutlicht werden. Im vierten Kapitel werden die genutzten Technologien bei der Entwicklung einer Web- App am Beispiel des GebärdenSchrift-Wörterbuchs beschrieben. Es wird genauer auf Anforderungen und Hindernisse eingegangen, die durch die Verwendung von Web- technologien auf mobilen Geräten entstehen. Im fünften und letzten Kapitel wird das durch das Anwendungsbeispiel erworbene Wis- sen auf der Basis der in den vorherigen Kapiteln erarbeiteten Informationen analysiert und ein Fazit zu den genutzten Technologien gezogen. Dafür werden Kriterien definiert anhand derer die Unterschiede der verschiedenen Technologien verdeutlicht werden. Des Weiteren werden die jeweiligen Einsatzmöglichkeiten dieser Technologien darge- legt. 3 2 2 Grundlagen Dieses Kapitel erläutert das Basiswissen, welches zum Verständnis der darauf folgenden Kapitel benötigt wird. Abschnitt 2.1 behandelt das Thema der mobilen Anwendungen oder auch Apps. Hier wird der Begriff definiert und auf die verschiedenen Plattformen und Vertriebsmöglichkeiten eingegangen. Abschnitt 2.2 beschäftigt sich mit Web- Technologien und bietet dafür einen kleinen Überblick. Der letzte Abschnitt 2.3 ist eine kurze Einführung in die GebärdenSchrift. Dieses Wissen ist notwendig, um das Anwen- dungsbeispiel zu verstehen. Den Abschluss bildet Abschnitt 2.4 mit einem Überblick ü- ber Webtechnologien, die beim Thema WebApps zur Anwendung kommen. 2.1 Apps Der Begriff App ist alles andere als eine präzise Beschreibung. Zur Klärung soll der fol- gende Abschnitt eine für diese Arbeit gültige Definition liefern. Ausserdem werden die an Apps gestellten Anforderungen bestimmt und auf die Verbreitung solcher mobilen Anwendungen eingegangen. 2.1.1 Begriffsklärung Der Begriff App ist die Kurzform für Application, (deutsch: Anwendung). Bezeichnet werden damit heutzutage meist Anwendungen, die für Smartphones entwickelt wurden. Dabei wird der Begriff größtenteils in einen Zusammenhang mit Anwendungen ge- bracht, die über Distributions-Plattformen, wie z.B. dem Apple Appstore oder Android Market, verkauft werden bzw. sich auf den entsprechenden Smartphones installieren lassen. Für diese Ausarbeitung wird eine App als eine Anwendung verstanden, welche auf mobilen Endgeräten wie Smartphones oder Tablets lauffähig ist. Eine weiter Unter- teilung wird durch die Begriffe Native App, Web-App und Hybrid-App vollzogen. Von einer native App oder auch nativen Anwendung wird dann gesprochen, wenn diese plattformabhängig ist und eine dieser Plattform eigenen Programmiersprache genutzt wird. Die Begriffe Web-App und Hybrid-App werden in Abschnitt 3 definiert und wei- tergehend beschrieben. 4 2.1.2 Anforderungen an Apps Neue Plattformen bringen oft neue Bedienkonzepte mit sich. Ein Bedienkonzept, das stark mit den heutigen Smartphones in Verbindung gebracht wird, ist der Touch (deutsch: Berührung). Dabei interagiert der Benutzer nicht mehr indirekt mit Objekten, zum Beispiel mittels einer Maus, sondern direkt mit seinen Fingern (vgl. hierzu [Ober- quelle2011]). Mit der Möglichkeit, mehrere Berührungspunkte zu erkennen und zu ver- arbeiten, entstehen neue Systeme zur Gestenerkennung. Mit dem Einzug des Multi- Touch wurde zum Beispiel das Größer- und Kleinerziehen von Bildern mit zwei Fingern und der entsprechenden Spreiz- bzw. Kneifgeste sehr beliebt und ist heutzutage auf fast jedem Smartphone als Funktionalität zu finden. Eine Änderung des Bedienkonzepts bedarf natürlich einer Anpassung der Benutzer- oberfläche. Es ist meist nicht praktikabel mit seinem Finger ein Bedienelement zu be- nutzen, welches für eine indirekte Interaktion entworfen wurde. Zu diesem Zweck gibt es von den jeweiligen Plattformen, so z.B. auch von den drei großen Plattformen iOS, Android oder Windows Phone, User Interface Guidelines4, an denen sich Entwickler orientieren können. In diesen Leitlinien wird z.B festgelegt, wie groß ein Knopf mindes- tens sein muss, um mit dem Finger bedient werden zu können oder welche Abstände zu anderen Oberflächenelementen eingehalten werden müssen. Neben den neuen Benutzeroberflächen ist die Performance – also die Leistungsfähigkeit bzw. Effizienz – ein wichtiges Kriterium bei der Entwicklung einer App. Zwar haben die heutigen Smartphones mit ihren Dual-Core-CPUs eine für ihre Größe beachtliche Re- chenleistung, doch sind Stromverbrauch, Speicherverwaltung oder Netzwerklatenzen Faktoren, die nicht vernachlässigt werden dürfen. Besonders die Netzwerklatenzen spie- len in den Mobilfunknetzen eine große Rolle. Für die Entwickler ist es wichtig, die Fak- toren möglicher Probleme im Auge zu halten und, weil hier eine direkte Bearbeitung notwendig wird, gegebenenfalls mit den zu diesem Zweck von den jeweiligen Plattfor- men angebotenen Analyse- bzw. Optimierungswerkzeugen entgegenzuwirken. Der Punkt der Optimierung im Hinblick auf die Anwendungs-Performance wird im Abschnitt 4 - Anwendungsbeispiel ausführlich behandelt. 4 Apple, Google und Microsoft bieten für ihre Plattformen jeweils eigene Interface Guide Lines an. Diese beinhalten Beispiele und Regeln für die jeweilige Plattform. Nur bei Microsoft sind diese Regeln wirklich relevant für den Zulassungsprozess zur Vertriebsplattform. 5