FOM Hochschule für Oekonomie & Management Essen
Berufsbegleitender Studiengang zum Bachelor of Science
5. Semester
Seminar...
I
Inhaltsverzeichnis
1 Abkürzungsverzeichnis.................................................................................
1 Abkürzungsverzeichnis
4.1 Problemstellung und Ziel der Arbeit
1
1 Abkürzungsverzeichnis
ADT: Android Development Tools; ...
3 Abbildungsverzeichnis
4.1 Problemstellung und Ziel der Arbeit
2
3 Abbildungsverzeichnis
Abbildung 1: Die Beispiel-App im...
5 Cross Platform Development
5.1 Das Mobile Web
3
Die Fragestellung, wie Content Management hinsichtlich plattformübergrei...
5 Cross Platform Development
5.1 Das Mobile Web
4
zum Teil aus den oben erwähnten Gründen. Hinzu kommt, dass mobile
Nutzer...
5 Cross Platform Development
5.2 Mobile App-Entwicklung
5
are common.
Addressable Clients 3 billion mobile subscribers
wor...
5 Cross Platform Development
5.2 Mobile App-Entwicklung
6
OS Symbian
RIM
Blackberry
Apple
iPhone
Windows
Mobile
Google
And...
6 PhoneGap
6.1 Hintergrundinformationen
7
(Allen, et al., 2010 S. 5), und eben eine solche Plattform wird im Folgenden be-...
6 PhoneGap
6.5 Konkurrenz und Alternativen
8
auch für die Zukunft gesichert ist, und vor allem das Erscheinungsbild einhei...
7 Cross-Compiling
7.1 Definition
9
6.5.3 rhomobile
rhomobile war eines der ersten Frameworks für die Entwicklung mobiler A...
7 Cross-Compiling
7.2 Beispiel: Wordpress Blog auf Android
10
Zunächst wird eine möglichst aktuelle Version der Entwicklun...
8 Fazit
7.3 Ergänzung
11
Das ADT Plug-In stellt dem Entwickler die Nutzung von Android Virtual Devices
(AVD) zur Verfügung...
9 Literaturverzeichnis
8.2 Ausblick
12
Problematiken. Dennoch ist das Erreichen und Zufriedenstellen der mobilen Nutzer
es...
10 Ehrenwörtliche Erklärung
8.2 Ausblick
13
10 Ehrenwörtliche Erklärung
Hiermit versichere ich, dass die vorliegende Arbei...
11 Anhang
11.1 PhoneGap Features
14
11 Anhang
11.1 PhoneGap Features
iPhone/
iPhone3G
iPhone3GS
andnewer
Android
Blackberr...
11 Anhang
11.2 Beispiel-App im ADV und Samsung Galaxy
15
11.2 Beispiel-App im ADV und Samsung Galaxy
Abbildung 1: Die Beis...
11 Anhang
11.2 Beispiel-App im ADV und Samsung Galaxy
16
Abbildung 2: Die Beispiel-App im SAMSUNG Galaxy S I9000
11 Anhang
11.3 Quelltext index.html der Beispiel-App
17
11.3 Quelltext index.html der Beispiel-App
<?xml version="1.0" enc...
11 Anhang
11.3 Quelltext index.html der Beispiel-App
18
background: -webkit-gradient(linear, left top, left bottom, col-
o...
11 Anhang
11.3 Quelltext index.html der Beispiel-App
19
-webkit-border-radius: 6px;
border-radius: 6px;
}
div.tube {
borde...
11 Anhang
11.3 Quelltext index.html der Beispiel-App
20
a.link-title:link {
color: #fff;
}
a.link-title:visited {
color: #...
11 Anhang
11.3 Quelltext index.html der Beispiel-App
21
if (rssData !== null) {
rssData.onreadystatechange = getRSSFeeds;
...
Nächste SlideShare
Wird geladen in …5
×

Cross Platform Development und Cross Compiling mit PhoneGap

3.011 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
3.011
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
5
Aktionen
Geteilt
0
Downloads
7
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Cross Platform Development und Cross Compiling mit PhoneGap

  1. 1. 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
  2. 2. 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
  3. 3. 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
  4. 4. 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.
  5. 5. 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,
  6. 6. 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 Languages 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
  7. 7. 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:
  8. 8. 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.”
  9. 9. 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
  10. 10. 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.
  11. 11. 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.
  12. 12. 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.
  13. 13. 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
  14. 14. 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. 2010. 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.
  15. 15. 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)
  16. 16. 11 Anhang 11.1 PhoneGap Features 14 11 Anhang 11.1 PhoneGap Features iPhone/ iPhone3G iPhone3GS andnewer Android Blackberry OS4.6-4.7 Blackberry OS5.x Blackberry OS6.0+ hpWebOS Windows Phone7 Symbian Bada Accelerometer Camera Compass Contacts File Geolocation Media Network Notification (alert) Notification (sound) Storage Tabelle 3: Supported Features (Nitobi, 2011)
  17. 17. 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
  18. 18. 11 Anhang 11.2 Beispiel-App im ADV und Samsung Galaxy 16 Abbildung 2: Die Beispiel-App im SAMSUNG Galaxy S I9000
  19. 19. 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+ */
  20. 20. 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, 243, 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;
  21. 21. 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, left 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( startColor- 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; }
  22. 22. 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"); } }
  23. 23. 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>

×