Marcus Ross ist Dipl.-Informatik-Betriebswirt und arbeitet als freier IT-Berater und Trainer mit den Schwerpunkten Datenbanken und Webportale.

Transkript

1

2 Marcus Ross ist Dipl.-Informatik-Betriebswirt und arbeitet als freier IT-Berater und Trainer mit den Schwerpunkten Datenbanken und Webportale. Seit 2010 widmet er sich außerdem dem Thema der mobilen Cross-Plattform-Entwicklung. Er ist Deutschlands erster Trainer für Titanium Mobile und beschäftigt sich seit den ersten Versionen mit PhoneGap. Heute ist Marcus Ross PhoneGap- Comitter und pflegt engen Kontakt mit dem PhoneGap-Core-Team bei Adobe. In seiner verbleibenden freien Zeit tritt er auf nationalen und internationalen Konferenzen zu mobilen und Cross-Plattform- Themen als Referent auf und schreibt regelmäßig für verschiedene Entwicklermagazine.

3 Marcus Ross PhoneGap Mobile Cross-Plattform-Entwicklung mit Apache Cordova & Co.

4 Marcus Ross Lektorat: René Schönfeldt Copy-Editing: Sandra Gottmann, Münster-Nienberge Herstellung: Frank Heidt Umschlaggestaltung: Helmut Kraus, Druck und Bindung: M.P. Media-Print Informationstechnologie GmbH, Paderborn Bibliografische Information der Deutschen Nationalbibliothek Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über abrufbar. ISBN: Buch PDF epub Auflage 2013 Copyright 2013 dpunkt.verlag GmbH Ringstraße 19 B Heidelberg Die vorliegende Publikation ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne die schriftliche Zustimmung des Verlags urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder die Verwendung in elektronischen Systemen. Es wird darauf hingewiesen, dass die im Buch verwendeten Soft- und Hardware-Bezeichnungen sowie Markennamen und Produktbezeichnungen der jeweiligen Firmen im Allgemeinen warenzeichen-, marken- oder patentrechtlichem Schutz unterliegen. Alle Angaben und Programme in diesem Buch wurden mit größter Sorgfalt kontrolliert. Weder Autor noch Verlag können jedoch für Schäden haftbar gemacht werden, die in Zusammenhang mit der Verwendung dieses Buches stehen

5 v Vorwort Für wen ist das Buch gedacht? Dieses Buch richtet sich primär an Entwickler und Webdesigner unabhängig davon, ob Sie sich beruflich mit mobiler Cross-Plattform-Entwicklung beschäftigen oder das Thema im Studium oder in Ihrer Freizeit vertiefen wollen. Wichtig ist nur, dass Sie sich etwas mit HTML, CSS und JavaScript auskennen. Möchten Sie ohne großen Aufwand eine eigene App für Smartphones entwickeln? Wollen Sie wissen, wie Sie das praktisch mit PhoneGap bzw. Apache Cordova erreichen? Dann ist dieses Buch für Sie genau die richtige Lektüre. Wie ist das Buch zu lesen? Aufgebaut ist dieses Buch folgendermaßen: Zunächst behandeln zwei einleitende Kapitel die Grundlagen der App-Entwicklung im Allgemeinen und die Cross- Plattform-Entwicklung im Speziellen. Ab Kapitel 3 wird es dann praktisch und es werden die Installation und Konfiguration der Entwicklungswerkzeuge für die verschiedenen Smartphone-Systeme vorgestellt. Suchen Sie also nach einem Weg für die Erstellung Ihrer App auf einem Windows-Phone-Gerät? Dann werden Sie dort fündig. In den Kapiteln 4 und 5 geht es dann um die PhoneGap-APIs, die den Zugriff auf die Smartphone-Hardware möglich machen. Hier sehen Sie, wie man z.b. auf die Kamera des Smartphones zugreifen kann. Dabei unterscheide ich zwei Kategorien. Die erste umfasst die meist genutzten Features, also das, was Sie als Nutzer von Applikationen mittlerweile erwarten: Kamerazugriff, GPS usw. Das finden Sie in Kapitel 4. Dann sind da aber noch die fortgeschrittenen Features. Ein Zugriff auf das Adressbuch z.b. ist nicht allen Entwicklern bekannt. War dies bisher nur den nativen Plattformentwicklern möglich, so können Sie dies auch mit JavaScript und PhoneGap bewerkstelligen. Kapitel 5 erläutert Ihnen diese und weitere fortgeschrittene Anwendungsmöglichkeiten. Danach beschäftigen wir uns mit dem Rest der PhoneGap-Welt. Themen sind dann das Testen und Debuggen (Kapitel 6), die Erweiterung des Frameworks durch Plugins (Kapitel 7) sowie der PhoneGap-Cloudservice (Kapitel 8).

6 vi Vorwort Sie müssen das Buch allerdings nicht linear, Kapitel für Kapitel durchlesen. Je nach Ihren Vorkenntnissen können Sie Kapitel oder Abschnitte überspringen. Wer sich mit mobiler Entwicklung bereits etwas auskennt, wird Kapitel 2 sicherlich nur überfliegen. Wenn Sie sich speziell dafür interessieren, wie Sie mit PhoneGap z.b. eine Applikation für ein webos erstellen, dann werden Sie die Informationen zu anderen Betriebssystemen überspringen. Ich wünsche Ihnen nun viel Spaß beim Entdecken der Möglichkeiten, die Ihnen PhoneGap bietet. Danksagung So ein Buch schreibt sich nicht alleine. Viele Menschen haben wissentlich und unwissentlich daran mitgearbeitet. Ich danke allen, die ich auf Konferenzen, Messen oder Projekten getroffen habe und mit denen ich mich über das Thema austauschen konnte. Ohne Eure Anregungen wäre dieses Buch nicht entstanden. Ein»big thank you«geht an die Mailingsliste von dev@cordova.apache.org. Kaum war ein neues Release raus, waren schon die ersten Bugs gefunden bzw. gefixt. Aber auch meinem Lektor René Schönfeldt möchte ich»danke«sagen. Seine großartige Geduld und kreative Hilfe beim Schreiben und allen Belangen um das Buch haben mir sehr geholfen. Natürlich darf meine Frau Diana nicht fehlen. Sie hat mir immer Rückhalt gegeben und auf viel gemeinsame Zeit mit mir verzichtet, damit dieses Buch entstehen konnte. Danke für deine Unterstüzung. Marcus Ross Buchholz, Februar 2013

7 vii Geleitwort PhoneGap and Apache Cordova accelerate the current state of the web by allowing you to create web applications that web browsers are only beginning to think about. By learning how to create a cross-platform web application today, I believe you are practicing the future and making an investment in your valuable skill-set as a developer and designer. Unfortunately, the future of the web has not arrived yet and getting started with PhoneGap can be difficult and confusing. For German readers, you are in luck! This is the first book to provide a practical and comprehensive guide on getting started with PhoneGap. Marcus Ross has carefully selected exactly what you need to know and not a word more. By allowing this book to be your guide, you will be rewarded with the methodologies and technical skills required to create cross-platform web applications. As you are guided through the intricate details of a PhoneGap application, you will begin to realize that it is just web technology. At this point, our hope is that your developer and designer instincts will take over. You can leverage all of your existing knowledge and tools from web development in order to create rich crossplatform applications that run with PhoneGap today and on a web browser in the future! Michael Brooks PhoneGap and Apache Cordova core contributor February 2013

8

9 ix Inhaltsverzeichnis 1 Entwickeln mit PhoneGap Das Cross-Plattform-Problem Wozu braucht man PhoneGap? Die Architektur von PhoneGap PhoneGap oder Apache Cordova? Zusammenfassung Von der Idee zur App Von der App-Idee zur Skizze Ein Storyboard erstellen Einen ersten Prototyp entwickeln Das UI-Framework festlegen Die richtigen Tools für die Features auswählen Die App implementieren Die Entwicklungsumgebung einrichten Den App-Lifecycle berücksichtigen Eine Versionsverwaltung für den Code nutzen Die Anwendung testen lassen Die Fehler finden Die App über die Marktplätze ausliefern Apples App Store Google Play Store

10 x Inhaltsverzeichnis Microsoft Store BlackBerrys App World Samsung Hub (Bada) HP App Catalog (webos) Zusammenfassung Die Zielplattformen »myDevice«Ihre erste Cross-Plattform-App ios Die Entwicklungsumgebung installieren Die erste App für ios Der Netzwerkzugriff in ios Bilder und Icons anpassen Android Die Entwicklungsumgebung installieren Die erste Android-App Windows Phone Die Entwicklungsumgebung installieren Die erste App für Windows Phone Wenn Bilder nicht angezeigt werden Windows Phone Die Entwicklungsumgebung installieren Die erste App für Windows Phone BlackBerry Die Entwicklungsumgebung installieren Die erste App für BlackBerry Auf einem physischen Gerät installieren Verschiedene Geräte-Simulatoren nutzen webos Die Entwicklungsumgebung installieren Die erste App für webos

11 Inhaltsverzeichnis xi Applikationsmetadaten Mit anderen webos-versionen testen Bada Die Entwicklungsumgebung installieren Die erste Bada-App Einblick in die Bada-Projektstruktur Zusammenfassung Hardwarezugriff I häufig genutzte Features Das Gerät (Device) Ein komplettes Beispiel Der Lifecycle (Events) deviceready das Startevent pause die Applikation legt sich schlafen resume die App wacht auf online eine Verbindung mit dem Internet offline keine Verbindung mit dem Internet Die Kamera Ein kurzes Beispiel Das Options-Objekt camera.getpicture ein Foto machen Geolocation geolocation.getcurrentposition Positionsdaten auslesen geolocation.watchposition Daten automatisch aktualisieren geolocation.clearwatch Datenaktualisierung aufheben Der Kompass Ein kurzes Beispiel compass.getcurrentheading die aktuelle Richtung bestimmen compass.watchheading Richtung automatisch aktualisieren compass.clearwatch Richtungsaktualisierung aufheben Praxisbeispiel Zusammenfassung

12 xii Inhaltsverzeichnis 5 Hardwarezugriff II erweiterter Zugriff Das Adressbuch (Contacts) contacts.create neue Kontakte erstellen contacts.find Kontakte finden Der Beschleunigungssensor (Accelerometer) Ein kurzes Beispiel accelerometer.getcurrentacceleration Beschleunigungswerte erfassen accelerometer.watchacceleration Beschleunigungswerte aktualisieren accelerometer.clearwatch Datenaktualisierung beenden Praxisbeispiel Die Verbindungsqualität (Network) Ein komplettes Beispiel Die Benachrichtigung (Notification) Ein kurzes Beispiel notification.alert native Meldung ausgeben notification.confirm nativen Auswahldialog anzeigen notification.beep das Smartphone piepen lassen notification.vibrate das Smartphone vibrieren lassen Geräte-Events II (Tasten- & System-Events) batterystatus Akku-/Gerätestatus auslesen batterylow Warnung des Ladestandes batterycritical Warnung vor leerem Akku backbutton die Zurücktaste registrieren menubutton die Menütaste registrieren searchbutton die Suchtaste registrieren startcallbutton die Anruftaste registrieren endcallbutton Anruf beenden registrieren volumedownbutton die Lautstärke-Taste

13 Inhaltsverzeichnis xiii volumeupbutton Praxisbeispiel Zusammenfassung Testen & Debuggen Der Smartphone-Emulator Ripple Ripple installieren Ripple mit einer PhoneGap-Anwendung nutzen Der WebInspector WebInspector unter Windows WebInspector unter Mac OS Eine Webanwendung debuggen WeinRe für PhoneGap Installation per npm-paket WeinRe verwenden (Beispiel unter ios) Zusammenfassung Plugins einbinden Beispiel»Die Taschenlampe« Die Zutaten Das Rezept Beispiel»Barcode-Reader« Die Zutaten Das Rezept Die Barcodescanner-API Beispiel»Augmented Reality« Die Zutaten Das Rezept Fazit

14 xiv Inhaltsverzeichnis 8 PhoneGap Build der Cloudservice Erste Schritte mit dem Cloudservice Ein lokales Projekt in die Cloud bringen Anmerkungen zur Installation Fazit Stichwortverzeichnis 231

15 1 1 Entwickeln mit PhoneGap 1.1 Das Cross-Plattform-Problem Bevor ich mit Ihnen in die praktische Entwicklung einsteige, möchte ich Ihnen von einem kurzen Gespräch berichten, das sich vor einiger Zeit in der IT-Abteilung eines mittelständischen Unternehmens abspielte. Geschäftsführer:»Wir brauchen eine App.«IT-Leiter:»Wow, ja gerne, welche Plattform?«Geschäftsführer:»Wieso Plattform mobil!«it-leiter:»ja, aber: Windows Phone, ios, Android, BlackBerry, oder...?«geschäftsführer:»na alle! Oder nicht?«it-leiter:»o.k. Ich glaube, da haben wir ein Problem!«Sie sehen, Anspruch und Wirklichkeit können sehr stark auseinanderliegen. Welcher IT-Leiter oder Entwickler möchte schon für eine einzelne App mehrere Entwicklungsprojekte für diverse mobile Plattformen auf die Beine stellen? Und welcher Geschäftsführer möchte das bezahlen? Für dieses Problem bietet PhoneGap eine Lösung. 1.2 Wozu braucht man PhoneGap? Die Zeiten von Apples App Store als Marktführer sind vorbei. Android hat als Plattform aufgeholt und der Kampf um Platz 3 im App-Markt ist noch nicht entschieden. Eines ist dabei aber sicher: Wer mobile Anwendungen nicht für eine abgegrenzte Kundschaft mit Mobilgeräten des gleichen Betriebssystems entwickelt, der hat mit einer Vielzahl von Zielplattformen zu tun. Er muss seine Apps so entwickeln, dass Kunden möglichst vieler Plattformen etwas damit anfangen können. Für jede interessante Zielplattform eine proprietäre App zu entwickeln, kommt in der Regel nicht in Frage. Zu groß ist der Aufwand für mehrere parallele Entwicklungen in sehr unterschiedlichen Sprachen (siehe Tab. 1 1). Insbesondere für

16 2 1 Entwickeln mit PhoneGap Einzelentwickler und kleinere Firmen ist dies keine Option. Und selbst große Unternehmen möchten sich kaum mehrere Entwickler-Teams für ein einzelnes Produkt leisten. Plattform ios Android BlackBerry Windows Phone Nokia Entwicklungssprache Objective-C Java (Dalvik VM) Java/C++ C#, VB.NET, JavaScript C++, Flash Tab. 1 1 Einige wichtige Smartphone-Systeme und ihre Programmiersprachen Hier kommen die sogenannten Web-Apps ins Spiel. Dies sind mobile Anwendungen, die auf Basis von HTML5, CSS3 und JavaScript erstellt werden und auf allen Smartphones laufen im jeweiligen Webbrowser. Leider bietet sich diese Lösung nur bedingt an. Web-Apps werden Sie nämlich in keinen virtuellen Store der Smartphone-Anbieter einstellen können, da dort ja nur native Apps für die jeweilige Plattform angeboten und verkauft werden können, z.b. ios-apps im Apple Store. Die Kunden suchen aber hauptsächlich in den App Stores nach Anwendungen für ihre Smartphones. PhoneGap bietet hier eine Lösung: Sie erstellen mittels HTML5, CSS und Java- Script eine Web-App und nutzen PhoneGap dann als Packetierer, um die Web-App für die jeweilige Zielplattform in eine native App umzuwandeln. Nach dem Verpacken in eine ios-anwendung erhalten Sie z.b. eine ipa-datei, die Sie an Apple schicken können. Ähnlich funktionert es auf allen anderen Plattformen. Mittlerweile müssen Sie bei diesem Vorgehen nicht mal mehr auf den Hardwarezugriff (Kamera, GPS, andere Sensoren) auf den Smartphones verzichten. PhoneGap unterstützt Sie dabei durch eine eigene API. Damit Sie ein Gefühl dafür bekommen, mit welchen Mitteln all dies umgesetzt wird, folgt nun ein Überblick über die Architektur von PhoneGap. 1.3 Die Architektur von PhoneGap Vereinfacht kann man PhoneGaps Arbeitsweise so erklären: Es ruft den Webbrowser einer Smartphone-Plattform auf und lässt die zuvor entwickelte Web- App darin ablaufen. Dabei unterdrückt PhoneGap alles, was an den Browser erinnert, also den Browserrahmen und alle Bedienelemente wie Internetadresszeile oder Menüs. Auf den ersten Blick haben wir es also nur mit einem Browser im Vollbildmodus zu tun, darin verpackt die mobile Applikation. Damit Sie aber auch Zugriff auf die Hardware der Zielplattform bekommen, wird in den anzuzeigenden HTML-Seiten eine JavaScript-Bibliothek geladen. Der

17 1.3 Die Architektur von PhoneGap 3 Browser fängt dabei gewisse Events ab, die dann in native Aufrufe der jeweiligen Plattform überführt werden. Damit ist auch der Zugriff auf die Hardware möglich. Abb. 1 1 Die Architektur von PhoneGap Etwas genauer beschrieben, verhält es sich wie folgt: PhoneGap besteht aus zwei wesentlichen Bausteinen. Der erste Baustein ist eine Bibliothek namens cordova.js (die JavaScript Engine), mit der Ihre HTML/CSS/JavaScript-Webapplikation arbeitet. Diese Bibliothek wird in der Webapplikation eingebunden und stellt ihr eine API für plattformunabhängige Zugriffe auf Smartphones zur Verfügung. Die JavaScript-Bibliothek interagiert dann mit dem zweiten Baustein von Phone- Gap, der sogenannten Native Engine. Diese Engine existiert in verschiedenen Implementierungen, jeweils eine pro mobiler Zielplattform, und ermöglicht die Abfragen an die Sensoren für das jeweilige Betriebssystem. Wenn die vorhandenen Zugriffe auf die Hardware per Native Engine nicht ausreichen, gibt es die Möglichkeit, sie durch eigene Plugins zu erweitern. Mit diesem Konzept können zusätzliche Zugriffe auf die Hardware entwickelt werden. Dabei gilt für jedes Plugin: Es wird sowohl eine JavaScript-Datei als auch eine plattformabhängige Klasse benötigt. Die JavaScript-Datei stellt den Aufruf der Funktionalität in PhoneGap dar. Damit das jeweilige Smartphone-System diesen Aufruf umsetzen kann, wird noch eine Implementierung des Plugins in der Native Engine benötigt. Daher muss der JavaScript-Layer nur einmal geschrieben werden. Der native Layer in den zu unterstützenden Plattformen ist aber jeweils separat. Wie einfach die Nutzung von Plugins ist, erfahren Sie in Kapitel 7. Nachdem nun die Architektur und das Wirken von PhoneGap erklärt sind, möchte ich noch auf den Doppelnamen eingehen.

18 4 1 Entwickeln mit PhoneGap 1.4 PhoneGap oder Apache Cordova? Wenn Sie vor diesem Buch schon etwas über PhoneGap gelesen haben, werden Sie wahrscheinlich auch der Bezeichnung»Apache Cordova«begegnet sein. Man könnte etwas vereinfacht sagen, dass Apache Cordova der neue Name von PhoneGap ist. Und man könnte hinzufügen, dass er sich bisher nicht wirklich durchgesetzt hat, denn in Artikeln und Konferenzvorträgen und auch auf Buchtiteln liest man nach wie vor:»phonegap«. Wie es zu diesem Nebeneinander von»phonegap«und»apache Cordova«kam und warum wir damit weiterhin leben müssen, möchte ich im Folgenden erläutern. Lassen Sie mich dazu kurz die Geschichte dieser Software erzählen. Die Firma Nitobi wurde 1998 in Vancouver, Kanada, gegründet. An ihrem Anfang standen rund 15 Personen, die sehr früh die Mächtigkeit von JavaScript erkannten und schon vor dem iphone an Ideen arbeiteten, um das mobile Web voranzubringen. Ihr Ziel war es, die Einfachheit der Webapplikationsentwicklung mit mobilen Geräten zu verbinden. Das Projekt, das sie dazu ins Leben riefen, nannten sie PhoneGap. Am Anfang tat PhoneGap nicht mehr, als Webseiten, die in einem lokalen Ordner lagen, auf mobilen Geräten anzuzeigen. Damit konnten Webentwickler plötzlich einfache Apps erstellen (z.b. Eventkalender, Produktinfos, Anleitungen). Nachdem PhoneGap als sogenannter Packager gestartet war, fehlte aber noch ein wichtiges Feature: der Zugriff auf die Hardware der Geräte. Es musste möglich sein, eine Kamera zu nutzen oder auch Audiodaten aufzuzeichnen. Damit wurde eine Domäne betreten, die bisher nativ geschriebene Programme vorbehalten war. Mit dieser Anforderung entstand der zweite Teil von PhoneGap der Hardwarezugriff mittels API. Der Wunsch nach immer mehr Erweiterungen mündete schließlich in einer Plugin-Struktur. Diese gibt dem Entwickler die Möglichkeit, selber Funktionen von nativen Plattformen hinzuzufügen. Mehr dazu werden Sie in Kapitel 7 zum Einsatz von Plugins erfahren. Von dem ersten Prototyp, der auf dem iphonedevcamp in San Francisco entwickelt wurde, bis zur Version 1.0 vergingen nicht einmal drei Jahre. Dabei verfolgte Nitobi immer das Ziel, PhoneGap als Open-Source-Software zu entwickeln. Hersteller wie BlackBerry oder Microsoft beteiligten sich und stellten Arbeitskraft für das Projekt zur Verfügung. Wie schnell sich das Projekt bis zur Version 1.0 entwickelte, zeigt die folgende Tabelle:

19 1.4 PhoneGap oder Apache Cordova? 5 Datum August 2008 Event Tab. 1 2 Die Geschichte von PhoneGap bis zur Version 1.0 iphonedevcamp, San Francisco Unterstützung von Android Unterstützung von BlackBerry PhoneGap 0.6.0, erste stabile API-Version April 2009 Gewinner der Web 2.0 Expo LaunchPad PhoneGap 0.7.2, Android und iphone API sind gleich Unterstützung von Windows Mobile Unterstützung des Nokia WRT (S60) PhoneGap , wird von Apple für den App Store freigegeben. November 2009 Auf der Konferenz InfoWorld wird PhoneGap als»top emerging enterprise technology«in der Kategorie "cross-platform mobile app development" ausgezeichnet Sony Ericsson integriert PhoneGap in das»websdk« Support für Palm hinzugefügt Symbian fügt PhoneGap den Web Extensions der Symbian^3-Plattform hinzu PhoneGap 1.0.0rc1 freigegeben PhoneGap-Tag in Portland, Oregon, Start-Party der Version 1.0 Am 3. Oktober 2011 sorgte dann ein Blogpost von Nitobi für Aufregung in der Open-Source-Community, hier ein Auszug:»...Adobe Announces Agreement to Acquire Nitobi, Creator of PhoneGap Open Source HTML5 Mobile App Platform, Accelerates Adobe s HTML5 and Web Standards Strategy...«Adobe hatte also Nitobi gekauft, vermutlich mit dem Ziel, es als Ersatz für Flash in seinen Produkten zu verwenden. Mit diesem Kauf kam sofort die Befürchtung auf, dass PhoneGap keine Open-Source-Zukunft mehr haben würde. Adobe stellte aber schnell klar, dass PhoneGap weiterhin Open Source bleiben solle und übergab den Code an die Apache Software Foundation. Die Foundation überführte PhoneGap dann in ein Incubator-Projekt und änderte den Namen zunächst in Apache Callback und mit der Version 1.4 dann in Apache Cordova. Heute ist Apache Cordova ein sogenanntes Top Level Project der Apache Foundation.

20 6 1 Entwickeln mit PhoneGap Adobe arbeitet allerdings weiterhin am Projekt mit eigenen Entwicklern mit und gibt neuen Code an das Cordova-Projekt. Gleichzeitig verwendet Adobe den alten Namen PhoneGap für eigene Aktivitäten weiter. So trägt Adobes Cloudbasierter Buildservice den Namen»PhoneGap Build«. Außerdem betreibt Adobe weiterhin die Website und bietet dort Dokumentation, Beispiele und das Framework selbst an. Wenn Sie PhoneGap dort herunterladen, erhalten Sie ein Apache-Cordova-Paket oder wenn Sie es so nennen wollen: eine Distribution mit allen Plattformen. Auf der Apache-Seite dagegen, muss man die Plattformen einzeln herunterladen. Sie können sich also zur besseren Unterscheidung merken, dass Apache Cordova die Codebasis des Projekts ist und PhoneGap eine Distribution von Adobe. In diesem Buch wird im Folgenden hauptsächlich der populärere Name»PhoneGap«verwendet und nicht die in der Regel genauso korrekte Bezeichnung»Apache Cordova«. Aber Achtung: Manchmal ist»phonegap«wirklich die einzig korrekte Wahl, nämlich dann, wenn es um die Adobe-eigenen Aktivitäten geht, z.b. bei»phonegap Build«. Und manchmal muss es wiederum eindeutig»cordova«heißen etwa bei einigen Dateien und Verzeichnissen (cordova js, Cordova.plist) und API-Aufrufen (device.cordova), denen Sie auch im Verlauf dieses Buches begegnen werden. Mit dem Namenswechsel bzw. dem Nebeneinander der beiden Namen haben das Projekt und die Entwickler sicherlich noch einige Zeit zu kämpfen. Wichtiger als diese Unklarheit ist aber: Das Projekt ist weiterhin Open Source und wird es unter der Federführung der Apache Software Foundation auch bleiben. Abb. 1 2 Die Apache-Cordova-Webseite

21 1.4 PhoneGap oder Apache Cordova? 7 Abb. 1 3 Die PhoneGap-Website

22 8 1 Entwickeln mit PhoneGap 1.5 Zusammenfassung Jetzt kennen Sie die Geschichte von PhoneGap bzw. Apache Cordova sowie deren Aufbau und Arbeitsweise. Sie haben gelernt, dass Web-Apps eine Möglichkeit sind, um eine mobile Anwendung auf verschiedenen Zielplattformen laufen zu lassen. Sie wissen jetzt aber auch, dass es Web-Apps beim Verkauf über App Stores und beim Hardwarezugriff nicht mit nativen Apps aufnehmen können. Dafür ist PhoneGap bzw. Apache Cordova als Brückentechnologie gedacht. Wir halten also fest: PhoneGap ist eine Software, die es ermöglicht, HTML-Code nebst JavaScript auf verschiedenen Smartphone-Plattformen als native App auszuführen. Zudem kann man per Java- Script auf Gerätefeatures zugreifen. Aber: PhoneGap ist nicht dazu gedacht, dass es das UI der Zielplattform widerspiegelt. Es hat also nicht das Look-and-Feel des jeweiligen Betriebssystems. Es ist auch zu beachten, dass durch das Ausführen auf dem lokalen Browser nicht die gleiche Performance wie bei einer nativen App zu erwarten ist. Sie wissen nun, dass PhoneGap/Apache Cordova keine Oberflächen der Plattformen nachahmen will. Daher ist Ihnen dort die Wahl überlassen, selber eine Lösung zu entwickeln oder ein UI-HTML-Framework zu nutzen. Eine kleine Auswahl der bekanntesten Vertreter werde ich Ihnen in Abschnitt an die Hand geben (jquery Mobile, Sencha Touch, iui, BBUi) Jetzt wünsche Ich Ihnen viel Spaß beim Entwickeln Ihrer App-Ideen mit PhoneGap/Apache Cordova. Im nächsten Kapitel gibt es zunächst einen Überblick über die verschiedenen Phasen der App-Entwicklung. Im Anschluss beginnen wir in Kapitel 3 mit der praktischen Arbeit und widmen uns der Installation und Konfiguration der Entwicklungstools.

23 9 2 Von der Idee zur App Bevor es mit der App-Entwicklung und dem Einsetzen von PhoneGap richtig losgeht, möchte ich an dieser Stelle einen kurzen Überblick zur Konzeption von Apps geben. Wenn Sie bereits Erfahrung mit der Erstellung und Durchführung von mobilen Anwendungen haben, können Sie dieses Kapitel gerne überspringen. Allerdings werden Sie hier auch die Anwendungsbereiche von PhoneGap kennenlernen. Dabei sehen Sie die möglichen Unterstützungspunkte, die PhoneGap bietet, aber auch das, was PhoneGap nicht leisten kann bzw. nicht die Aufgabe von PhoneGap ist. Hierbei geht es um das Vorgehen, wie eine App entwickelt wird. Damit müssen Sie einige Aufgaben an andere Bibliotheken delegieren oder diese selbst implementieren. Damit Sie eine bessere Vorstellung haben, welche Schritte von der Idee bis zum App Store nötig sind, ist dieses Kapitel gedacht. Wir gehen bei der folgenden Betrachtung davon aus, dass Sie bereits festgelegt haben, dass es eine Cross-Plattform-App werden soll. Lassen Sie uns also bei der Idee zu einer neuen App anfangen und diese dann alle Entwicklungsschritte bis in den App Store durchlaufen. 2.1 Von der App-Idee zur Skizze Natürlich beginnt alles mit einer Idee zu einer App. Damit diese auch umsetzbar ist, sollten Sie immer bedenken:»eine App sollte meistens nur eine Sache tun, diese aber richtig gut!«bevor Sie also eine App in der Art eines Schweizer Taschenmessers ersinnen, überlegen Sie sich lieber genau, wann und wie Ihre Anwendung dem Benutzer einen konkreten Nutzen bietet. Die Beschreibung solcher Szenarien und dessen, was unsere App dabei leistet, nennt man auch Use-Cases. In unserem Beispiel wollen wir eine Einkaufsliste als App erstellen. Die folgenden zwei Use-Cases soll die geplante App erfüllen: Artikel für den nächsten Einkauf erfassen Gekaufte Artikel mit Preis im Archiv anzeigen

24 10 2 Von der Idee zur App Natürlich könnte das jede Notizzettel-App auch leisten, aber unsere App unterstützt den Einkaufsprozess besonders gut. Es sind nicht viele Anwendungsfälle, aber wenn diese schnell und effizient ausgeführt werden, ist das ein Nutzen für den Anwender. Wie schon erwähnt, die Use-Cases könnten auch mit einer einfachen To-do-Liste erzielt werden, aber für den schnellen Umgang hat die App spezielle Features. Unsere App soll nämlich folgende Eigenschaften haben: verfügbar als Cross-Plattform-Anwendung auch ohne Netz nutzbar (offline) bietet eine Synchronisation der Daten mit der Cloud, damit auch auf anderen Plattformen nutzbar kann GPS-Daten der To-dos erfassen kann Artikel-Barcodes scannen Nun kennen Sie unsere Idee, und wir haben das Featureset dazu abgesteckt. Natürlich können Sie anstatt Use-Cases auch andere Möglichkeiten wie User Stories oder Ähnliches nutzen. Denken Sie aber immer daran, die Hauptaufgaben zu beschreiben. Jetzt schauen Sie sich in den virtuellen Marktplätzen der verschiedenen Anbieter um, ob solch eine Anwendung schon existiert. Eine kurze Prüfung ergab, dass eine Einkaufsliste mit diesen Möglichkeiten noch eine gute Chance im Markt hat. Daher gehen wir nun über zur nächsten Phase, dem sogenannten Storyboard. 2.2 Ein Storyboard erstellen Bevor es mit dem Programmieren losgeht, wird ein kleines Storyboard erstellt. Damit können Sie sehr schnell erste Oberflächen und Klickpfade festlegen. Sie finden solche Storyboards auch unter dem Begriff Scribbles oder Mock-ups. Dabei geht es aber immer um das Gleiche: das Skizzieren der App-Oberfläche und damit das Übertragen der Idee in eine reale Form. Im Storyboard werden die durchzuführenden Tätigkeiten erstmals auf eine Benutzeroberfläche umgesetzt. Sie entscheiden dabei, wo Listen oder Knöpfe gesetzt werden, aber auch, welche Ansichten welche Elemente enthalten. Dabei legen Sie nicht unbedingt Wert darauf, dass der Knopf oder die Liste wie ein iosoder Android-Knopf aussieht. Es geht erst einmal nur darum, dass er überhaupt existiert und einen Platz hat. Für diesen Arbeitsschritt stehen Softwaretools wie Balsamiq Mockups 1 oder auch Photoshop zur Verfügung. Selbst ein einfaches DIN-A5-Blatt und ein Bleistift können für diesen Arbeitsschritt ausreichen. Es geht im Wesentlichen darum, dass Sie damit visualisieren, wie viele Ansichten (Views) es gibt und wie diese genutzt werden können. 1.

25 2.3 Einen ersten Prototyp entwickeln 11 Abb. 2 1 Zwei Views aus einem Storyboard mit Balsamiq Mockups Für diesen Schritt ist PhoneGap nicht gedacht und bietet auch keinerlei Tool zur Unterstützung. 2.3 Einen ersten Prototyp entwickeln Gehen wir davon aus, dass sich nach der Idee und dem ersten Mockup der Wille, eine App zu entwickeln, weiter verfestigt hat. Dann erstellen Sie nun am besten einen Prototyp. Das Mock-up hat zwar durchaus Prototypcharakter, aber es ist nun einmal keine Anwendung auf einem Smartphone. Es ist schon erstaunlich, wie schnell man bei einer echten Umsetzung auf Bedienungsprobleme oder fehlende UI-Komponenten stößt. Da es eine Cross-Plattform- Anwendung werden soll, gibt es hier die Vorgabe, HTML zu nutzen. PhoneGap verpackt ja HTML-Dateien in eine native Anwendung für Ihr Smartphone. Daher nutzen Sie bereits jetzt schon für unseren Prototypen HTML. Damit können Sie das gewünschte App-Gerüst nach dieser Phase weiter verwenden. Eventuelle statische Verlinkungen oder Datenquellen können dann in der Implementierungsphase durch Code dynamisiert werden. Ein Prototyp gibt Ihnen Feedback, ob die gewünschten Elemente und Abläufe vom Mock-up auch in der Praxis funktionieren. Bei einem Prototyp sind bereits viele Fragen zu klären, die über die App-Struktur und die zu nutzenden Tools Aufschluss geben, angefangen bei der Oberfläche.