Cross Platform Development und Cross Compiling mit PhoneGap

23
FOM Hochschule für Oekonomie & Management Essen Berufsbegleitender Studiengang zum Bachelor of Science 5. Semester Seminararbeit in „Content Management Systeme“ Cross Platform Development und Cross Compiling mit PhoneGap Betreuer: Prof. Jörg Muschiol Autorin: Sarah Steffen Matrikelnr.: 241593 Adresse: Wallstraße 24, 40878 Ratingen Ratingen, den 09.01.2012

description

Seminararbeit in „Content Management Systeme“ Berufsbegleitender Studiengang zum Bachelor of Science 5. Semester - Term paper for "Content Management Systeme" Bachelor of Applied Science (B.A.Sc.), Business Informatics Semester 5

Transcript of Cross Platform Development und Cross Compiling mit PhoneGap

Page 1: Cross Platform Development und Cross Compiling mit PhoneGap

FOM Hochschule für Oekonomie & Management Essen

Berufsbegleitender Studiengang zum Bachelor of Science

5. Semester

Seminararbeit in „Content Management Systeme“

Cross Platform Development und Cross

Compiling mit PhoneGap

Betreuer: Prof. Jörg Muschiol

Autorin: Sarah Steffen

Matrikelnr.: 241593

Adresse: Wallstraße 24, 40878 Ratingen

Ratingen, den 09.01.2012

Page 2: Cross Platform Development und Cross Compiling mit PhoneGap

I

Inhaltsverzeichnis

1 Abkürzungsverzeichnis .......................................................................................................... 1

2 Tabellenverzeichnis ............................................................................................................... 1

3 Abbildungsverzeichnis ........................................................................................................... 2

4 Einleitung ............................................................................................................................... 2

4.1 Problemstellung und Ziel der Arbeit .............................................................................. 2

5 Cross Platform Development ................................................................................................. 3

5.1 Das Mobile Web ............................................................................................................ 3

5.2 Mobile App-Entwicklung ................................................................................................ 5

6 PhoneGap .............................................................................................................................. 7

6.1 Hintergrundinformationen .............................................................................................. 7

6.2 Unterstützte Betriebssysteme ....................................................................................... 7

6.3 Verwendete Programmiersprachen .............................................................................. 7

6.4 Features ........................................................................................................................ 7

6.5 Konkurrenz und Alternativen ......................................................................................... 8

6.5.1 Appcelerator Titanium ............................................................................................... 8

6.5.2 Red Foundry .............................................................................................................. 8

6.5.3 rhomobile ................................................................................................................... 9

7 Cross-Compiling .................................................................................................................... 9

7.1 Definition ....................................................................................................................... 9

7.2 Beispiel: Wordpress Blog auf Android .......................................................................... 9

7.3 Ergänzung ................................................................................................................... 11

8 Fazit ..................................................................................................................................... 11

8.1 Zusammenfassung ...................................................................................................... 11

8.2 Ausblick ....................................................................................................................... 12

9 Literaturverzeichnis .............................................................................................................. 12

10 Ehrenwörtliche Erklärung ................................................................................................ 13

11 Anhang ............................................................................................................................ 14

11.1 PhoneGap Features .................................................................................................... 14

11.2 Beispiel-App im ADV und Samsung Galaxy ............................................................... 15

11.3 Quelltext index.html der Beispiel-App ......................................................................... 17

Page 3: Cross Platform Development und Cross Compiling mit PhoneGap

1 Abkürzungsverzeichnis 4.1 Problemstellung und Ziel der Arbeit

1

1 Abkürzungsverzeichnis

ADT: Android Development Tools; Sammlung von Tools zur Entwicklung von Android Apps . 10,

11

AJAX: Asynchronous JavaScript and XML; Konzept zur asynchronen Datenübertragung

zwischen Browser und Server .......................................................................................... 10

APK: Android Application Package File; ausführbare Paketdatei zum Verteilen und Installieren

von Android-Programmen bzw. Apps ............................................................................... 11

AVD: Android Virtual Device; Eclipse-gestütze Simulation eines Android-Gerätes zum Testen

von Apps ........................................................................................................................... 11

CSS: Cascading Stylesheets; deklarative Formatierungssprache für strukturierte Web-

Dokumente ............................................................................................................ 7, 8, 9, 11

EDGE: Enhanced Data Rates for GSM Evolution; Technik zur Erhöhung der

Datenübertragungsrate bei GSM Standards wie GPRS ..................................................... 3

GPRS: General Packet Radio Service; paketorientierter Dienst zur Datenübertragung in GSM-

und UMTS-Netzen .............................................................................................................. 3

HTML: Hypertext Markup Language; textbasierte Auszeichnungssprache zur Strukturierung von

Web-Dokumenten ................................................................................................. 7, 8, 9, 10

J2EE: Java Platform, Enterprise Edition; spezialisierte Plattform für die transaktionsbasierte

Ausführung von Java-Programmen .................................................................................... 5

JAR: Java Archive; Archiv-Datei, die Java-Klassen enthält ........................................................ 10

RAM: Random-Access-Memory; Arbeitsspeicher in Computern .................................................. 4

SDK: Software Development Kit; Sammlung von Entwicklungs-Tools ................................... 5, 10

UMTS: Universal Mobile Telecommunications System; Mobilfunkstandard der dritten

Generation (3G) .................................................................................................................. 3

XHTML: Extensible Hypertext Markup Language; HTML gemäß den Syntaxregeln von XML,

heutzutage Standard......................................................................................................... 10

XML: Extensible Markup Language; Auszeichnungssprache zur Darstellung hierarchisch

strukturierter Daten ........................................................................................................... 10

2 Tabellenverzeichnis

Tabelle 1: Unterschiede zwischen mobilem und Desktop-Web .................................................... 5

Tabelle 2: Smartphone-Betriebssysteme und –Sprachen (Allen, et al., 2010 S. 5) ..................... 6

Tabelle 3: Supported Features (Nitobi, 2011) ............................................................................. 14

Page 4: Cross Platform Development und Cross Compiling mit PhoneGap

3 Abbildungsverzeichnis 4.1 Problemstellung und Ziel der Arbeit

2

3 Abbildungsverzeichnis

Abbildung 1: Die Beispiel-App im Android Virtual Device ........................................................... 15

Abbildung 2: Die Beispiel-App im SAMSUNG Galaxy S I9000................................................... 16

4 Einleitung

Die Informationstechnologie ist heutzutage sowohl aus der Wirtschaft, als auch aus

dem Privatleben nicht mehr wegzudenken. Computer, IT-Systeme allgemein, sowie

das Internet bestimmten und koordinieren den Alltag. Der Papierkrieg etwa in Bü-

ros ist zwar immer noch nicht gebannt (sondern hat seit der „digitalen Revolution“

sogar zugenommen), dennoch ist es unverzichtbar geworden, Prozesse software-

technisch abzubilden oder auch zu ersetzen.

Besonders betroffen von diesen Entwicklungen ist das Bereitstellen und Abrufen

von Informationen. Zeitungen klagen über rückläufige Verkaufszahlen und Abon-

nements, während Online-Angebote exponentiell wachsen und mehr und mehr den

Markt bestimmen. Eine weitere Entwicklung der technischen Welt spielt hierbei

eine entscheidende Rolle: Der Siegeszug der mobilen Geräte. Tablet PCs und

Smartphones werden immer populärer, stellen aber dennoch nur einen kleinen Teil

der weltweit genutzten Mobilgeräte dar. In vielen Teilen der Welt sind „herkömmli-

che“ Mobiltelefone (sog. „feature phones“) immer noch der einzige Zugang zum

Internet, wie z.B. in weiten Teilen Afrikas, in denen kaum jemand einen PC besitzt.

Somit besteht die aktuelle Herausforderung der Informationsverarbeitung und –

bereitstellung darin, die im Internet veröffentlichten Inhalte für eben solche mobilen

Geräte zu optimieren und somit möglichst viele Konsumenten zu erreichen.

4.1 Problemstellung und Ziel der Arbeit

Die hauptsächliche Nutzung des Internets besteht heutzutage darin, (multimediale)

Inhalte bereit zu stellen und abzurufen. Ob es sich dabei nun um Börsenkurse oder

Boulevardnachrichten handelt, in jedem Fall müssen die Inhalte verwaltet und für

das Web aufbereitet, also mit einer entsprechenden Darstellung verbunden wer-

den. Die alle dazugehörenden Maßnahmen umfassende Aufgabe wird als Content

Management bezeichnet, und die Software, die sie übernimmt, als Content Ma-

nagement Systeme. Diese sind sowohl kommerziell als auch Open Source, also

unter freier Lizenz, erhältlich.

Page 5: Cross Platform Development und Cross Compiling mit PhoneGap

5 Cross Platform Development 5.1 Das Mobile Web

3

Die Fragestellung, wie Content Management hinsichtlich plattformübergreifender

Veröffentlichung von Inhalten auf mobilen Endgeräten realisiert werden kann, so-

wie Lösungsansätze dazu, sind Thema dieser Seminararbeit. Als Beispiel für einen

Lösungsansatz wird das Tool PhoneGap analysiert, und mit seiner Hilfe das soge-

nannte Cross Compiling (siehe Kapitel 7) an einem Beispiel demonstriert. Es folgen

ein zusammenfassendes Fazit und ein kritischer Ausblick, in dem vom jetzigen

Stand der Praxis aus betrachtet wird, wie es im Bereich Cross Media Publishing

weitergehen könnte.

5 Cross Platform Development

5.1 Das Mobile Web

Die Applikationsentwicklung für mobile Endgeräte stellt Software-Entwickler vor

völlig neue Herausforderungen. Neben den technischen Bedingungen kann die

Begründung dafür auf die folgenden drei Ursachen zusammengefasst werden (vgl.

Frederick, et al., 2009 S. 4):

• Das Mobile Web ist völlig neu: nicht nur für herkömmliche Handys, auch für

Smartphones ist das Volumen von Datentransfer von Bedeutung. Drahtlos-

Verbindungen wie UMTS sind zur Zeit aus technischen Gründen mit einer

Volumenbegrenzung (in der Regel je nach Anbieter zwischen 200MB und

5GB im Monat) versehen, so dass jedes übertragene MB ins Gewicht fällt.

Alternativen wie GPRS/EDGE bieten aufgrund der geringen Bandbreite

kaum den nötigen Komfort zur adäquaten Nutzung des Web 2.0. Ein weite-

rer wichtiger Aspekt ist der Energieverbrauch. Anders als Heimcomputer,

die stets mit der Steckdose verbunden sind, werden Smartphones mit Akkus

betrieben, und so müssen Energiereserven wohlüberlegt eingeteilt und Akti-

vitäten abgewogen werden (z.B. telefonieren oder Musik hören, aber nicht

beides), um den Vorteil der Mobilität zu erhalten.

• Der Mobile Web User ist völlig neu: Nutzer von mobilen Endgeräten sitzen

nicht zu Hause am Schreibtisch wie Heim-PC Benutzer, sondern bewegen

sich frei, sodass der Standort plötzlich eine Rolle spielt und als Parameter

für Anwendungen genutzt werden kann. Mobile Nutzer sind auch zielgerich-

teter, da Smartphones, etc. eher für ergebnisorientierte Aufgaben - wie etwa

Navigation oder Auskunft - genutzt werden als zum ziellosen Herumsurfen,

Page 6: Cross Platform Development und Cross Compiling mit PhoneGap

5 Cross Platform Development 5.1 Das Mobile Web

4

zum Teil aus den oben erwähnten Gründen. Hinzu kommt, dass mobile

Nutzer kostenbewusster sind als Heim-PC Nutzer.

• Der Mobile Web Browser ist völlig neu: Mobile Browser haben noch keine

lange Entwicklungsgeschichte hinter sich, so wie "traditionelle" Browser, bei

denen sich eine überschaubare Anzahl an Herstellern etabliert hat. Die Viel-

falt der mobilen Browser ist enorm und ihre "Kinderkrankheiten" erfordern

eine besondere Sensibilität der Programmierer: “Improperly formatted web

pages can have drastic effects on mobile devices, including crashing the

browser or resetting the device.” (Frederick, et al., 2009 S. 4)

Hinzu kommen die technischen Unterschiede, die unter anderem in den verfügba-

ren Ressourcen (Akkuleistung, RAM, Speicherplatz, etc.), der Bildschirmgröße und

den Herausforderungen bezüglich der Bedienung (z.B. Touchscreen-Bedienung

statt Maus und Tastatur) liegen.

Gail Rahn Frederick und Rajesh Lal haben in ihrem Buch "Beginning Smartphone

Web Development" folgende charakteristische Unterschiede des mobilen und des

Desktop-Web festgehalten (Frederick, et al., 2009 S. 6):

Mobile Web Desktop Web

Average Session Length

2-3 minutes 10-15 minutes

Minimum Screen Size 90x60 800x600

Maximum Screen Size 240x400 for popular devices Unlimited

Browser Vendors 12+ and growing Two with market share over 5%

Browser Bugs Frequent. Permanent, except for smartphones with updatable OSes.

Rare and patchable

W3C Standards Spotty. Sometimes ignored or challenged by mobile industry.

Mature and accepted

Markup L anguages WML CHTML XHTML Basic XHTML-MP XHTML HTML

XHTML, HTML

JavaScript and AJAX Not on 90% of mobile devices. Available as ECMAScript-MP and JavaScript. Document Ob-ject Model (DOM) and supported events vary. Proprietary APIs

Usually available

Page 7: Cross Platform Development und Cross Compiling mit PhoneGap

5 Cross Platform Development 5.2 Mobile App-Entwicklung

5

are common.

Addressable Clients 3 billion mobile subscribers worldwide

1 billion total notebooks, desk-tops and servers

Tabelle 1: Unterschiede zwischen mobilem und Desktop-Web

Die oben zusammengefassten Fakten stellen eine Auswahl an Punkten dar, die ein

Programmierer sich bewusst machen sollte, bevor er in die mobile App-Entwicklung

einsteigt. Im folgenden Kapitel werden die Schwerpunkte dieser Problemstellung

näher erläutert.

5.2 Mobile App-Entwicklung

Der Markt der mobilen Endgeräte unterscheidet sich von dem der Desktop PCs vor

allem dadurch, dass es hier eine deutlich größere Vielfalt an Herstellern von Be-

triebssystemen gibt. So haben sich im Bereich der Desktop PCs etwa Windows,

Mac OS und Linux durchgesetzt, im mobilen Sektor gibt es neben Android, iOS,

Symbian, Palm, Blackberry, etc. eine ganze Palette an verschiedenen Plattformen,

die für Entwickler durchaus nicht zu vernachlässigen sind. Dies liegt unter anderem

daran, dass für jeden Anwendungsbereich - sei es im Business- oder Freizeit- bzw.

Entertainmentsegment - laufend neue Systeme entwickelt werden: “Frequently, the

industry produces multiple platforms that essentially provide the same solutions for

different market segments.” (Allen, et al., 2010 S. 9)

Anwendungen für mobile Endgeräte müssen also plattformübergreifend („cross

platform“) entwickelt werden, um alle potentiellen Kunden erreichen zu können.

Entscheidend dabei sind nicht nur die unterschiedlichen technischen Gegebenhei-

ten der Zielgeräte, sondern auch die jeweils zu beachtenden Programmierkonven-

tionen. Diese beginnen bei der zu nutzenden Programmiersprache (z.B. Java, Ob-

jective C, C#); weiter geht es mit speziellen APIs für die mobile Entwicklung, z.B.

steht das umfangreiche J2EE-Paket nicht zur mobilen Entwicklung zur Verfügung:

“Besides the different languages, the software development kits (SDKs) and para-

digms for developing applications are different across each platform.” (Allen, et al.,

2010 S. 5). Es ergeben sich also Einschränkungen, die der Programmierer beach-

ten und kompensieren muss.

Die Programmiersprachen zur App-Entwicklung unter den wichtigsten mobilen Be-

triebssystemen sind im Folgenden aufgeführt:

Page 8: Cross Platform Development und Cross Compiling mit PhoneGap

5 Cross Platform Development 5.2 Mobile App-Entwicklung

6

OS Symbian RIM Blackberry

Apple iPhone

Windows Mobile

Google Android

Palm webOS

Language C++ Java Objective-C C# Java JavaScript

Tabelle 2: Smartphone-Betriebssysteme und –Sprachen (Allen, et al., 2010 S. 5)

Anders als bei der Entwicklung im PC-Segment hat der Entwickler nicht viel Frei-

heit bei der Wahl der Programmiersprache, sondern ist fest an die vom Betriebs-

system vorgegebene gebunden, wenn er sich nicht einschränken will: “While it is

possible to develop using other languages, typically there are drawbacks or limitati-

ons in doing so.” (Allen, et al., 2010 S. 5)

In der Welt der Desktop Computer gibt es die Unterscheidung zwischen Desktop-

Anwendungen und browserbasierten Anwendungen. Bei mobilen Geräten gibt es

analog dazu die Unterscheidung zwischen Web Apps und nativen Apps, die wie

folgt zu definieren ist:

• Eine Web App ist nicht auf dem Smartphone installiert, nicht im Android

Market, App Store, etc. verfügbar und nicht in Java bzw. einer Sprache die-

ser Familie geschrieben. (vgl. Stark, 2010 S. 1)

• Native Apps sind auf dem Gerät installiert. Sie haben Zugriff auf die Hard-

ware, sind in Java, C#, etc. geschrieben und im Android Market, App Store

o.ä. erhältlich. (vgl. Stark, 2010 S. 2)

Eine Web App ist also prinzipiell nichts anderes als eine im Browser geöffnete

Webseite, während native Apps Zugriff auf die Hardware gewähren, was dem Ent-

wickler erlaubt, die Vorteile eines Smartphones gegenüber eines PCs, wie Touch-

screen, Kamera, Positionsbestimmung, usw. voll auszuschöpfen. Leider sind native

Apps aus den zuvor erwähnten Gründen weitaus schwieriger zu entwickeln als

Web Apps, doch es gibt auch Kombinationsmöglichkeiten, die eine angemessene

Lösung darstellen können. So ist es durchaus üblich, die Applikation als Web App

zu gestalten und dann in ein natives Browser-Objekt (UIWebView control) einzubet-

ten, um so die Vorteile der nativen App abzugreifen, sich aber auf die simplere

Entwicklung einer Web App beschränken zu können. Im Folgenden werden einige

Tools diskutiert, die unter anderem dies ermöglichen.

Wie weiter oben erwähnt, hat die Entwicklung mobiler Apps viele Eigenheiten, die

es zu bewältigen gilt. “Where such dramatic challenges exist in developing across

multiple platforms, it is natural for third party cross-platform frameworks to emerge.”

Page 9: Cross Platform Development und Cross Compiling mit PhoneGap

6 PhoneGap 6.1 Hintergrundinformationen

7

(Allen, et al., 2010 S. 5), und eben eine solche Plattform wird im Folgenden be-

trachtet.

6 PhoneGap

6.1 Hintergrundinformationen

PhoneGap ist ein Open Source Projekt und somit privat, kommerziell, sowie in

Kombination beider Anwendungsfälle nutzbar. Ursprünglich entwickelt wurde das

PhoneGap Framework von der Firma Nitobi, die vor kurzem von Adobe aufgekauft

wurde. Allerdings umfasst die Community, die PhoneGap weiterentwickelt und das

Projekt stetig erweitert, inzwischen etliche Kollaborateure, darunter unter anderem

IBM, RIM und Microsoft. Die Community ist offen und transparent und hat das Pro-

jekt PhoneGap im Oktober 2011 der Apache Software Foundation beigesteuert,

sodass die zukünftige Entwicklung als Apache Projekt und unter der Apache Licen-

se, Version 2.0, stattfinden kann. (vgl. Nitobi, 2011)

6.2 Unterstützte Betriebssysteme

Mit PhoneGap lassen sich Apps für folgende mobile Betriebssysteme entwickeln:

Apple iOS, Google Android, Windows Phone 7, Blackberry OS, hp WebOS, Symbi-

an und Bada (Nitobi, 2011).

6.3 Verwendete Programmiersprachen

PhoneGap nutzt leichtgewichtige, web-orientierte Skript- und Markup-Sprachen;

konkret HTML, CSS, und JavaScript. Aktuell sind dies die Versionen HTML5 und

CSS3, welche beide bei weitem noch nicht in vielen Browsern unterstützt werden,

aber bereits jetzt wichtige Standards setzen. Der Entwickler muss sich somit nicht

mit "schwergewichtigen" Sprachen und Frameworks wie PHP, Java / JSF und ASP

/ .NET auseinandersetzen.

6.4 Features

Das Besondere an PhoneGap ist, dass es sich komplett auf offene, etablierte

Standards (HTML, JavaScript und CSS) stützt und PhoneGap Apps somit ebenso

Standard-konform sind; das bedeutet, dass ihre Funktionsfähigkeit in Browsern

Page 10: Cross Platform Development und Cross Compiling mit PhoneGap

6 PhoneGap 6.5 Konkurrenz und Alternativen

8

auch für die Zukunft gesichert ist, und vor allem das Erscheinungsbild einheitlich

ist: “By actually using Web UI controls, the implementation of the user interface can

be created with a single source that renders and behaves appropriately across plat-

forms.” (Allen, et al., 2010 S. 10)

Prinzipiell ist es somit eine Web-Plattform, und es schlägt die Brücke zwischen na-

tiven Apps und Web-Formaten mittels JavaScript ("PhoneGap is a web platform

that exposes native mobile device apis and data to JavaScript." (Nitobi, 2011)).

6.5 Konkurrenz und Alternativen

Natürlich ist PhoneGap nicht das einzige Tool zur mobilen App-Entwicklung auf

dem Markt, auch hier hat sich eine gewisse Vielfalt entwickelt. Im Folgenden wer-

den drei größere Konkurrenten von PhoneGap vorgestellt:

6.5.1 Appcelerator Titanium

Titanium von Appcelerator ist der bekannteste und am weitesten verbreitete Kon-

kurrent von PhoneGap. Wie dieses ist es ein Open Source Projekt und bietet dem

Nutzer die Möglichkeit, Apps mit Web-Sprachen wie Javascript, HTML, CSS, Py-

thon, Ruby, und PHP zu entwickeln (vgl. Appcelerator, 2011). Im Grunde ist die

Funktionalität sehr ähnlich, und die Entscheidung für eines der beiden Tools hängt

bei komplexeren Projekten von deren genauen Anforderungen ab; bei einfachen

Projekten besteht kein relevanter Unterschied.

6.5.2 Red Foundry

Red Foundry ist keine Open Source Lösung, sondern ein kommerzielles Produkt,

bietet aber neben verschiedenen Preisstufen auch ein (eingeschränktes) kostenlo-

ses Modell an. Während es laut der Hersteller-Website auch möglich sein soll,

Apps ohne Code und nur mit Klicks zu erstellen, bietet Red Foundry viele entwick-

lungsbegleitende Services an, wie z.B. einen Online App-Builder, umfangreiche

App Analytics, Push Notification, etc. (vgl. Red Foundry, 2011) – die meisten aller-

dings nur in den kostenpflichtigen Modellen. Obwohl es sich um ein sehr umfang-

reiches und kraftvolles Tool handelt, welches für kommerzielle Projekte durchaus

geeignet ist, kann es preislich natürlich nicht mit den Open Source Lösungen mit-

halten. Hier entscheidet sich die Wahl des Tools also an den vorhandenen finanzi-

ellen Mitteln, bzw. am Bedarf der vielen Extras die Red Foundry zu bieten hat, wel-

che allerdings wohl nur bei großen Projekten sinnvoll sind.

Page 11: Cross Platform Development und Cross Compiling mit PhoneGap

7 Cross-Compiling 7.1 Definition

9

6.5.3 rhomobile

rhomobile war eines der ersten Frameworks für die Entwicklung mobiler Applikatio-

nen und ist ein Open Source Projekt. Es dient zur Entwicklung nativer Apps und

bietet sogar einen Service (RhoHub) zur mobilen Entwicklung in der Cloud (vgl.

Rhomobile, 2011). Für ambitionierte und größere Projekte, die eine echte native

App erfordern, ist rhomobile also geeigneter als Frameworks wie PhoneGap oder

Titanium, die lediglich die Entwicklung von in native Browser-Controls eingebette-

ten Web-Inhalten ermöglichen.

7 Cross-Compiling

7.1 Definition

Ein Cross-Compiler erzeugt Code bzw. ausführbare Dateien für andere Plattformen

als die, auf der er selbst ausgeführt wird. Sinnvoll ist der Einsatz von Cross-

Compilern etwa bei Geräten, auf denen das Kompilieren selbst nicht möglich ist

(z.B. Mikrochips); aber eben auch im Bereich des Mobile Computing, denn kaum

ein Entwickler wird direkt auf einem Smartphone programmieren – aus technischen

und aus ergonomischen Gründen.

Im Prinzip ist Cross-Compiling also die Kernfunktion von PhoneGap, welches diese

mithilfe von Java und JavaScript realisiert. Der Entwickler erstellt eigentlich nur

noch HTML-Inhalte (ggf. zusätzlich mit JavaScript und CSS), während PhoneGap

diese im Hintergrund in eine App einbettet, die auf der Compiler-fremden Plattform

– in diesem Fall Android – installiert werden kann.

7.2 Beispiel: Wordpress Blog auf Android

Für den praktischen Teil der Analyse des Tools PhoneGap soll eine Android App

entwickelt werden, die dem User einen schnellen Überblick über die neusten Posts

eines Wordpress-Blogs verschafft. Als Beispiel wurde der eigene Blog des Autors

(http://twenty-flight-rock.co.uk/) gewählt, die App soll jedoch für Wordpress-Blogs

generell funktionieren. Zielplattform für die Beispiel-App ist Android 2.2, da hierfür

am ehesten ein reales Testgerät zur Verfügung stand.

Der Get Started Guide der PhoneGap Homepage bietet einen guten Ansatzpunkt

für das Projekt, eine "Hello World"-App steht schon nach wenigen Schritten und

ebenso wenigen Minuten.

Page 12: Cross Platform Development und Cross Compiling mit PhoneGap

7 Cross-Compiling 7.2 Beispiel: Wordpress Blog auf Android

10

Zunächst wird eine möglichst aktuelle Version der Entwicklungsumgebung Eclipse

benötigt (die Entwicklung ist auch ohne Eclipse möglich, mit Eclipse ist es jedoch

komfortabler), mindestens Version 3.4; im Folgenden wird die aktuelle Version E-

clipse Indigo verwendet. Eclipse muss nun durch das Android Development Tools

(ADT) Plug-In erweitert werden, ebenso ist eine Installation des Android Software

Development Kit (SDK) nötig, beides ist ohne viel Aufwand und detaillierte Kennt-

nisse schnell erledigt.

Es folgt die Installation von PhoneGap selbst. Im Projekt wird die aktuelle Version

1.3.0 verwendet. Das Archiv enthält sieben Ordner für die jeweiligen Plattformen;

der Inhalt des Android-Ordners besteht im Wesentlichen aus einer JAR- und einer

JavaScript-Datei, die manuell in das Projektverzeichnis kopiert werden müssen (die

JAR-Datei in den Ordner /libs und die JS-Datei in den Ordner assets/www/, welcher

die Web-Ressourcen des Projekts enthält). Es folgen einige Anpassungen an der

Projekt-Datei AndroidManifest.xml sowie der Hauptklasse der Applikation (in die-

sem Fall nicht Main.java sondern App.java) um aus dem Standard Android-Projekt

ein PhoneGap-Projekt zu machen. Mehr ist nicht nötig, um die Cross Compiling

Funktion von PhoneGap zu nutzen.

Durch die Installation des ADT Plug-Ins kann in Eclipse ein Projekt vom Typ Andro-

id Projekt erstellt werden, welches bereits eine index.html Datei im Verzeichnis as-

sets/www/ enthält, die den Startpunkt beim späteren Aufrufen der App bildet. Der

PhoneGap Get Started Guide fährt nun mit dem Einfügen von HTML-Quelltext zum

Anzeigen von "Hello World" fort, stattdessen soll aber der Inhalt des Blogs ange-

zeigt werden. Dazu wird der von Wordpress automatisch generierte RSS Feed

(http://twenty-flight-rock.co.uk/feed/) genutzt, der mit JavaScript über ein AJAX-

Request ausgelesen und in ein DIV innerhalb der index.html geschrieben wird (als

Basis dazu wurde ein AJAX-Script genutzt, das auf http://www.daniweb.com/web-

development/javascript-dhtml-ajax/threads/192183 gepostet wurde. Dieses Script

wurde für die Zwecke der App modifziert.). Da die Funktion, die den Inhalt des

Feeds in den Quelltext schreibt, die Funktion getElementsByTagName nutzt, um

durch die XML-Struktur zu navigieren und Inhalte auszulesen, kann so prinzipiell

jede XML- oder XHTML-Seite ausgelesen werden, es muss also nicht zwingend ein

RSS Feed sein. Um zu gewährleisten, dass die App für jeden Blog funktioniert, der

RSS Feeds unterstützt, ist es an dieser Stelle jedoch sinnvoller eben darauf zu-

rückzugreifen. Steht kein Feed zur Verfügung, muss der Quelltext der App indivi-

duell auf die auszulesende Webseite angepasst werden.

Page 13: Cross Platform Development und Cross Compiling mit PhoneGap

8 Fazit 7.3 Ergänzung

11

Das ADT Plug-In stellt dem Entwickler die Nutzung von Android Virtual Devices

(AVD) zur Verfügung, in denen Apps getestet werden können. Es können ver-

schiedene Android Versionen und Geräte-Typen (sowohl Smartphones als Tablets)

simuliert werden, Systemparameter und Hardware-Eigenschaften wie Bildschirm-

auflösung oder Arbeitsspeicher können ebenso festgelegt werden. Für die Ausfüh-

rung auf einem realen Android Gerät kann das Projekt in Eclipse als ausführbare

.apk-Datei exportiert werden. Dazu wird es mit dem Keystore (ein Depot von Si-

cherheitszertifikaten) debug.keystore signiert, da es sich nur um eine Testanwen-

dung und nicht um ein kommerzielles Projekt für den Android Market handelt.

Die Ausgabe der Wordpress-Blog-App (nach Hinzufügen einiger CSS Formatierun-

gen) im AVD ist in Abbildung 1 zu sehen, die ausgeführte . apk-Datei im Smartpho-

ne Samsung Galaxy S I9000 in Abbildung 2; der Quelltext dazu ist im Anhang ver-

merkt.

7.3 Ergänzung

Diese Beispiel-App ist angesichts des geringen Projektumfangs recht oberflächlich.

Es werden lediglich bereits veröffentlichte Inhalte aus dem Web gezogen und um-

formatiert, was angesichts des gesteckten Ziels durchaus ausreichend ist. In die-

sem Fall wäre eine reine Web-App, deren Inhalte direkt auf dem Server mobil-

gerecht formatiert werden, sinnvoller (da es sich hier jedoch nur um ein methodi-

sches Beispiel handelt, kann darüber hinweggesehen werden). Im Fall von Word-

press gibt es eine ganze Reihe an Plug-Ins, die eine mobil-gerechte Form der Blog-

Ausgabe ermöglichen. Allgemeiner formuliert wäre die naheliegendste Alternative

zur Umformatierung bestehender Inhalte mit PhoneGap die Nutzung von direkt im

das Content Management angebotenen Tools.

8 Fazit

8.1 Zusammenfassung

Der kurze Ausflug in die Welt der mobilen App-Entwicklung hat gezeigt, dass eine

oberflächliche und funktional durchaus ausreichende Lösung hinsichtlich Cross

Media Publishing schnell zusammengestellt ist. Ganzheitliche und umfassendere

Ansätze allerdings erfordern verglichen mit entsprechenden Desktop-Applikationen

einen erheblich höheren Aufwand und stellen den Programmierer vor komplexe

Page 14: Cross Platform Development und Cross Compiling mit PhoneGap

9 Literaturverzeichnis 8.2 Ausblick

12

Problematiken. Dennoch ist das Erreichen und Zufriedenstellen der mobilen Nutzer

essentiell im Schritthalten mit der technischen Entwicklung, denn "Wer nicht mit der

Zeit geht, geht mit der Zeit" (F. Schiller). Unternehmen, vor allem jedoch Informati-

onsdienste sowie Anbieter medialer Online-Inhalte, sollten sich also definitiv der

Herausforderung stellen, ihren Kunden bzw. Nutzern diese Inhalte in einer dem

technischen Stand der Zeit entsprechenden Form darzubieten.

8.2 Ausblick

In Zukunft wird das mobile Web sicherlich weiter an Bedeutung im Alltag wie in der

Business-Welt gewinnen und es werden weitere interessante Entwicklungen statt-

finden. Allgemein betrachtet wird wahrscheinlich vor allem die Vielfalt an internetfä-

higen Endgeräten und auch an Darstellungsformaten steigen, wodurch das Pro-

zessfeld des Cross Media Publishing zunehmend ins Mittelfeld des Bereiches Con-

tent Management rücken wird. Ausgehend vom Prinzip der Trennung von Inhalt

und Darstellung scheint der Trend weiter in Richtung der Aufspaltung und Differen-

zierung der Darstellung in verschiedene Ausgabeformen zu gehen, um eben dieser

Vielfalt gerecht zu werden.

9 Literaturverzeichnis

Allen, Sarah, Graupera, Vidal and Lundrigan, Lee. 2 010. Pro Smartphone Cross-Platform

Development: IPhone, Blackberry, Windows Mobile and Android Development and

Distribution. New York : Apress, 2010. ISBN: 1430228687.

Appcelerator. 2011. Appcelerator Titanium. http://www.appcelerator.com/. [Online]

Appcelerator Inc., 2011. [Cited: 12 26, 2011.]

Frederick, Gail Rahn and Lal, Rajesh. 2009. Beginning Smartphone Web Development:

Building Javascript, CSS, HTML and Ajax-Based Applications for IPhone, Android, Palm

Pre, Blackberry, Windows Mobile and Nokia S60. New York : Apress, 2009. ISBN:

143022620X.

Nitobi. 2011. PhoneGap. http://www.phonegap.com. [Online] Adobe Systems Inc., 2011. [Cited:

12 25, 2011.]

Red Foundry. 2011. Red Foundry. http://www.redfoundry.com/. [Online] Red Foundry Inc.,

2011. [Cited: 12 26, 2011.]

Rhomobile, Inc. 2011. Rhomobile. http://rhomobile.com/. [Online] Motorola Solutions, 2011.

[Cited: 12 26, 2011.]

Stark, Jonathan. 2010. Building Android Apps with HTML, CSS, and JavaScript. Sebastopol,

CA : O'Reilly Media, 2010. ISBN: 1449383262.

Page 15: Cross Platform Development und Cross Compiling mit PhoneGap

10 Ehrenwörtliche Erklärung 8.2 Ausblick

13

10 Ehrenwörtliche Erklärung

Hiermit versichere ich, dass die vorliegende Arbeit von mir selbstständig und ohne

unerlaubte Hilfe angefertigt worden ist, insbesondere dass ich alle Stellen, die wört-

lich oder annähernd wörtlich aus Veröffentlichungen entnommen sind, durch Zitate

als solche gekennzeichnet habe. Ich versichere auch, dass die von mir eingereich-

te schriftliche Version mit der digitalen Version übereinstimmt. Weiterhin erkläre

ich, dass die Arbeit in gleicher oder ähnlicher Form noch keiner anderen Prüfungs-

behörde vorgelegen hat. Ich erkläre mich damit nicht einverstanden, dass die Ar-

beit der Öffentlichkeit zugänglich gemacht wird. Ich erkläre mich damit einverstan-

den, dass die Digitalversion dieser Arbeit zwecks Plagiatsprüfung auf die Server

externer Anbieter hoch geladen werden darf. Die Plagiatsprüfung stellt keine Zur-

verfügungstellung für die Öffentlichkeit dar.

Ratingen, den 09.01.2012

(Ort, Datum) (Eigenhändige Unterschrift)

Page 16: Cross Platform Development und Cross Compiling mit PhoneGap

11 Anhang 11.1 PhoneGap Features

14

11 Anhang

11.1 PhoneGap Features

iPho

ne /

iPho

ne 3

G

iPho

ne 3

GS

an

d ne

wer

And

roid

Bla

ckbe

rry

OS

4.6

-4.7

Bla

ckbe

rry

OS

5.x

Bla

ckbe

rry

OS

6.0

+

hp W

ebO

S

Win

dow

s P

hone

7

Sym

bian

Bad

a

Accelerometer ���� ���� ���� ���� ���� ���� ���� ���� ���� ����

Camera ���� ���� ���� ���� ���� ���� ���� ���� ���� ����

Compass ���� ���� ���� ���� ���� ���� ���� ���� ���� ����

Contacts ���� ���� ���� ���� ���� ���� ���� ���� ���� ����

File ���� ���� ���� ���� ���� ���� ���� ���� ���� ����

Geolocation ���� ���� ���� ���� ���� ���� ���� ���� ���� ����

Media ���� ���� ���� ���� ���� ���� ���� ���� ���� ����

Network ���� ���� ���� ���� ���� ���� ���� ���� ���� ����

Notification (alert)

���� ���� ���� ���� ���� ���� ���� ���� ���� ����

Notification (sound)

���� ���� ���� ���� ���� ���� ���� ���� ���� ����

Storage ���� ���� ���� ���� ���� ���� ���� ���� ���� ����

Tabelle 3: Supported Features (Nitobi, 2011)

Page 17: Cross Platform Development und Cross Compiling mit PhoneGap

11 Anhang 11.2 Beispiel-App im ADV und Samsung Galaxy

15

11.2 Beispiel-App im ADV und Samsung Galaxy

Abbildung 1: Die Beispiel-App im Android Virtual Device

Page 18: Cross Platform Development und Cross Compiling mit PhoneGap

11 Anhang 11.2 Beispiel-App im ADV und Samsung Galaxy

16

Abbildung 2: Die Beispiel-App im SAMSUNG Galaxy S I9000

Page 19: Cross Platform Development und Cross Compiling mit PhoneGap

11 Anhang 11.3 Quelltext index.html der Beispiel-App

17

11.3 Quelltext index.html der Beispiel-App

<?xml version ="1.0" encoding ="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict. dtd"> <html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="en" lang ="en" > <head> <meta http-equiv ="X-UA-Compatible" content ="IE=EmulateIE7" /> <meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> <meta http-equiv ="Content-Script-Type" content ="text/javascript" /> <meta http-equiv ="Content-Style-Type" content ="text/css" /> <title> Test Page </title> <style type ="text/css" > html,body { background-color : black ; border : none ; color : white ; font-family : "Trebuchet MS", Trebuchet, Verdana, Sans-Serif ; height : auto ; min-height : 380px ; min-width : 240px ; text-align : center ; vertical-align : baseline ; width : auto ; -moz-border-radius : 6px ; -khtml-border-radius : 6px ; -webkit-border-radius : 6px ; border-radius : 6px ; } input label { display : block ; } input { margin-top : .200em ; } h2 { border-bottom : 1px solid #708090 ; border-top : 1px solid #708090 ; font-family : "Trebuchet MS", Trebuchet, Verdana, Sans-Serif ; font-size : 12pt ; text-shadow : 2px 1px 3px #333333 ; line-height : 2ex ; margin-top : 3em; min-height : 2ex ; padding : 1em; white-space : nowrap ; -moz-border-radius : 6px ; -khtml-border-radius : 6px ; -webkit-border-radius : 6px ; border-radius : 6px ; line-height : 2ex ; background : rgb(184, 225, 252) ; /* Old browsers */ background : -moz-linear-gradient(top, rgba(184, 225, 252, 1) 0% , rgba(169, 210, 243, 1) 10%, rgba(144, 186, 228, 1 ) 25%, rgba(144, 188, 234, 1) 37%, rgba(144, 191, 240, 1 ) 50%, rgba(107, 168, 229, 1) 51%, rgba(162, 218, 245, 1 ) 83%, rgba(189, 243, 253, 1) 100% ) ; /* FF3.6+ */

Page 20: Cross Platform Development und Cross Compiling mit PhoneGap

11 Anhang 11.3 Quelltext index.html der Beispiel-App

18

background : -webkit-gradient(linear, left top, left bottom, col -or-stop(0%, rgba(184, 225, 252, 1) ), color-stop(10%, rgba(169, 210, 24 3, 1) ), color-stop(25%, rgba(144, 186, 228, 1) ), color-stop(37%, rgba(144, 188, 234, 1) ), color-stop(50%, rgba(144, 191, 240, 1) ), color-stop(51%, rgba(107, 168, 229, 1) ), color-stop(83%, rgba(162, 218, 245, 1) ), color-stop(100%, rgba(189, 243, 253, 1) ) ) ; /* Chrome,Safari4+ */ background : -webkit-linear-gradient(top, rgba(184, 225, 252, 1) 0%, rgba(169, 210, 243, 1) 10%, rgba(144, 186, 228, 1 ) 25%, rgba(144, 188, 234, 1) 37%, rgba(144, 191, 240, 1 ) 50%, rgba(107, 168, 229, 1) 51%, rgba(162, 218, 245, 1 ) 83%, rgba(189, 243, 253, 1) 100% ) ; /* Chrome10+,Safari5.1+ */ background : -o-linear-gradient(top, rgba(184, 225, 252, 1) 0%, rgba(169, 210, 243, 1) 10%, rgba(144, 186, 228, 1 ) 25%, rgba(144, 188, 234, 1) 37%, rgba(144, 191, 240, 1 ) 50%, rgba(107, 168, 229, 1) 51%, rgba(162, 218, 245, 1 ) 83%, rgba(189, 243, 253, 1) 100% ) ; /* Opera 11.10+ */ background : -ms-linear-gradient(top, rgba(184, 225, 252, 1) 0%, rgba(169, 210, 243, 1) 10%, rgba(144, 186, 228, 1 ) 25%, rgba(144, 188, 234, 1) 37%, rgba(144, 191, 240, 1 ) 50%, rgba(107, 168, 229, 1) 51%, rgba(162, 218, 245, 1 ) 83%, rgba(189, 243, 253, 1) 100% ) ; /* IE10+ */ background : linear-gradient(top, rgba(184, 225, 252, 1) 0%, rgba(169, 210, 243, 1) 10%, rgba(144, 186, 228, 1 ) 25%, rgba(144, 188, 234, 1) 37%, rgba(144, 191, 240, 1 ) 50%, rgba(107, 168, 229, 1) 51%, rgba(162, 218, 245, 1 ) 83%, rgba(189, 243, 253, 1) 100% ) ; /* W3C */ filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd', GradientType=0 ) ; /* IE6-9 */ } a:link { color : #9ad ; text-decoration : none ; } a:visited { color : #9ad ; text-decoration : none ; } a:active ,a :hover { color : #9ad ; text-decoration : underline ; } div { border : none ; margin : 0%; padding : 0%; } div#main { margin : 0% auto ; text-align : left ; height : 90%; width : 98%; -moz-border-radius : 6px ; -khtml-border-radius : 6px ;

Page 21: Cross Platform Development und Cross Compiling mit PhoneGap

11 Anhang 11.3 Quelltext index.html der Beispiel-App

19

-webkit-border-radius : 6px ; border-radius : 6px ; } div.tube { border : 2px solid #ccc ; margin : 1% auto 1% auto ; padding : 1.200em ; -moz-border-radius : 6px ; -khtml-border-radius : 6px ; -webkit-border-radius : 6px ; border-radius : 6px ; } div#blog-header { -moz-border-radius : 6px ; -khtml-border-radius : 6px ; -webkit-border-radius : 6px ; border-radius : 6px ; background-color : #535252 ; background-image : url(http://twenty-flight-rock.co.uk/graphics/header_app.jpg) ; } h2#blog-title { margin : auto ; text-align : center ; font : bold 13pt 'Trebuchet MS', Trebuchet, Verdana, Sans- serif ; letter-spacing : 0.2em ; text-transform : uppercase ; text-shadow : 4px 3px 5px #333 ; border : 0px none ; border-bottom : 2px solid #2f2f2f ; background : -moz-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100% ); /* FF3.6+ */ background: -webkit-gradient(linear, left top, lef t bottom, col-or-stop(0%, rgba(0, 0 , 0, 0.65) ), color-stop(100%, rgba(0, 0, 0, 0) ) ) ; /* Chrome,Safari4+ */ background : -webkit-linear-gradient(top, rgba(0, 0, 0, 0.65) 0% , rgba(0, 0, 0, 0) 100% ) ; /* Chrome10+,Safari5.1+ */ background : -o-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100% ) ; /* Opera 11.10+ */ background : -ms-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100% ) ; /* IE10+ */ background : linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100% ) ; /* W3C */ filter : progid:DXImageTransform.Microsoft.gradient( startC olor-str='#a6000000', endColorstr='#00000000', GradientType=0 ) ; /* IE6-9 */ } div#blog-description { -moz-border-radius : 6px ; -khtml-border-radius : 6px ; -webkit-border-radius : 6px ; border-radius : 6px ; font-size : 10pt ; padding : 10px ; background-color : #535252 ; border-top : 1px solid #535252 ; }

Page 22: Cross Platform Development und Cross Compiling mit PhoneGap

11 Anhang 11.3 Quelltext index.html der Beispiel-App

20

a. link-title:link { color : #fff ; } a. link-title:visited { color : #fff ; } a. link-title:active, a. link-title:hover { color : #fff ; } </style> <script type ="text/javascript" > var loadRSSFeeds, getRSSFeeds; var rssData; getRSSFeeds = function() { if ((rssData.readyState === 4) || (rssData.readyState === "complete" )) { div = ((document.getElementById) ? document .getElementById( "content" ) : docu-ment.all.content); feeds = rssDa-ta.responseXML.getElementsByTagName( "rss" )[0]; tnodes = "" ; tnodes += "<div id='blog-header'><h2 id='blog-title'>" + feeds.getElementsByTagName( "title" )[0].childNodes[0].nodeValue + "</h2>\n" ; tnodes += "<div id='blog-description'>" + feeds.getElementsByTagName( "description" )[0].childNodes[0].nodeValue + "</div></div><br />\n" ; tnodes += "Latest posts:" ; for ( var x = 1; x < 10; x++) { tnodes += "<a class='link-title' href='" +feeds.getElementsByTagName( "link" )[x].childNodes[0].nodeValue+"'><h2>" + feeds.getElementsByTagName( "title" )[x].childNodes[0].nodeValue + "</h2></a>\n" ; tnodes += "<div>" + feeds.getElementsByTagName( "description" )[x].childNodes[0].nodeValue + "<br /></div>\n" ; } div.innerHTML = tnodes; } }; rssData = null; if (window.XMLHttpRequest) { rssData = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { rssData = new ActiveXObject( "Microsoft.XMLHTTP" ); } catch (e) { rssData = new ActiveXObject( "Msxml2.XMLHTTP" ); } }

Page 23: Cross Platform Development und Cross Compiling mit PhoneGap

11 Anhang 11.3 Quelltext index.html der Beispiel-App

21

if (rssData !== null) { rssData.onreadystatechange = getRSSFeeds; rssData.open( "GET" , "http://twenty-flight-rock.co.uk/feed/" , true); rssData.send( null); } else { alert( "\nYour browser does not support AJAX Request!" ); } </script> </head> <body> <div id ="main" > <div class ="tube" > <div id ="content" ></div> </div> </div> </body> </html>