APPS MIT. PhoneGap ENTWICKELN UNIVERSELLE WEB-APPS PLATTFORMNEUTRAL PROGRAMMIEREN. EXTRA: Mit kostenlosem E-Book

Transkript

1 ralph STEYER APPS MIT PhoneGap ENTWICKELN UNIVERSELLE WEB-APPS PLATTFORMNEUTRAL PROGRAMMIEREN EXTRA: Mit kostenlosem E-Book

2 Inhalt Vorwort XI 1 Einleitung und Grundlagen Die mobile Welt Tausende von Inseln Was erwartet Sie in dem Buch? Was ist PhoneGap? Der PhoneGap-Wrapper und FFI Unterstützte Plattformen bei PhoneGap Was sollten Sie bereits wissen? Was sollten Sie haben? Die Entwicklungs-Software Die mobile Hardware und Registrierungsfragen Verschiedene Wege zum Testen Native Apps versus Web-Apps und mobile Webapplikationen Mobile Webapplikationen und mobile Webseiten versus Web-Apps Webseiten Webapplikationen RIA Besonderheiten von Web-Apps Native Apps Eine beispielhafte Vorgehensweise anhand von Android Eine Android-App mit Eclipse und dem ADT-Plug-in erzeugen Eine Android-App im Emulator ausführen Eine Android-App exportieren und auf einem mobilen Gerät ausführen Eine native App unter Windows Phone Eine native App für Windows Phone Die Ausführung im Emulator Installation und Ausführen auf einem realen Handy Eine native App für ios Download und erste Anwendung von PhoneGap Download von PhoneGap Die konkrete Bereitstellung für Projekte....54

3 VI Inhalt PhoneGap für Android einrichten Den Java-Quellcode anpassen Die Konfiguration mit XML PhoneGap für Windows Phone einrichten PhoneGap für ios einrichten Alles, was recht ist Allgemeines zu den Rechtesystemen Individuelle Rechtevergabe unter Android Rechte unter Windows Mobile Webtechnologien unter PhoneGap Die Indexseite Die Struktur der HTML-Seite Die Skript-Referenzen Style Sheets Eine Standardschablone Die eigenen Skript-Dateien Weitere Tipps Pfadangaben Bilder und andere Multimediadateien Wo bin ich und wo will ich hin? Das navigator-objekt Eigenschaften und Methoden von navigator auswerten Geolokalisierung Die verschiedenen Techniken zur Ortsbestimmung Das Objekt navigation.geolocation Die notwendigen Rechte und Plug-ins bei Geolocation Die aktuelle Position ein konkretes Beispiel mit getcurrentposition() Die Veränderung mit watchposition() beobachten Die Beobachtung beenden Ein Mashup mit Kartendiensten Wie schnell bin ich? Eine Tachometer-App Ein grafischer Tacho mit HTML5-Canvas-Objekten Wo geht es lang? Der Kompass Die möglichen Optionen Die notwendigen Rechte und Plug-ins Die Eigenschaften Ein vollständiges Kompassbeispiel Ein Kompass unter Verwendung von HTML5-Canvas-Objekten Der Beschleunigungssensor Die Methoden und Eigenschaften...129

4 Inhalt VII Die Voraussetzungen auf dem mobilen Gerät Ein vollständiges Beispiel Ein Cockpit als Abschlussbeispiel Portrait-Modus Die Datei index.html Erstellung in der Cloud & mehr GitHub Die Registrierung Übersetzung der Webquellcodes Konfiguration und Metadaten mit config.xml Grundlegende Eigenschaften Preferences Zielplattformspezifische Einstellungen Weitergehende Themen Befehlszeilenarbeit Plug-in-Entwicklung Weitere Hilfe und Information Information und Rückmeldung Das Device-Objekt Die Eigenschaften Permissions Ein Beispiel zur Anzeige relevanter Informationen Der Netzwerkstatus Permissions Ein Beispiel zur Auswertung des Netzwerkstatus Ein Muster zur Entscheidung, ob eine Netzwerkverbindung besteht Notification Permissions Methoden PhoneGap im Zusammenspiel mit ergänzenden Frameworks Verschiedene Frameworks für Web-Apps PhoneGap-Alternativen Ergänzungen von PhoneGap jquery, jquery UI und jquery Mobile Das Basisframework Download von jquery Die Einbindung von jquery in Webseiten Wie jquery grundsätzlich arbeitet Vorhandenen Code mit jquery umsetzen das navigator-objekt auswerten

5 VIII Inhalt 8.3 Die GUI-Erstellung mit jquery Mobile Das Rollensystem und data-role Der grundsätzliche Aufbau einer mobilen Seite Eine erste App mit jquery Mobile eine Tachometer-App Verknüpfen von Seiten in jquery Mobile Schaltflächen, Toolbars, Navbars und Formularelemente Weiterentwicklung der ersten App mit jquery Mobile Das Themen-Framework und die allgemeine Gestaltung von Inhalt Eine Überarbeitung der Fliegertacho-App Support für spezielle Ereignisse in jquery Mobile jquery UI Unterstützung der Interaktion Widgets Das Themen-Framework samt ThemeRoller Wie nutzt man jquery UI grundsätzlich? Multimediafragen Zugriff auf die Kamera das navigator.camera-objekt Notwendige Freigabe und Voraussetzungen Ein Foto aufnehmen mit camera.getpicture() Ein Beispiel ein Bild aufnehmen, anzeigen und speichern Aufnahmemöglichkeiten mit Capture & Co Die Basisobjekte Notwendige Freigabe und Voraussetzungen Konkrete Aufnahmemethoden Die Optionen Erfolg und Misserfolg Konkrete Aufnahmebeispiele Audiowiedergabe und -aufnahme mit Media Notwendige Freigabe und Voraussetzungen Erzeugen von Mediaobjekten Die Parameter Methoden von Mediaobjekten Ein Mediaplayer als Beispiel Kontaktfragen Die Kontaktdatenbank Contacts und Contact Notwendige Freigabe und Voraussetzungen Die Objekte Contacts und Contact Erstellen eines Datenbankobjekts mit create() Ein Kontaktbeispiel Verwalten von Daten Speichern, Duplizieren und Löschen

6 Inhalt IX Ein Beispiel zum Speichern, Duplizieren und Löschen von Daten Das Suchen von Daten Ein Beispiel zum Suchen in der Datenbank Ran an den Speicher Zugriffe auf das Dateisystem File & Co Vorüberlegungen Notwendige Freigabe und Voraussetzungen Die Basisobjekte unter PhoneGap Objekte vom Typ File, DirectoryEntry und FileEntry FileReader und FileWriter Repräsentation des Dateisystems über FileSystem und DirectoryReader LocalFileSystem Metadata FileError Ein praktisches Beispiel Lesen und Schreiben einer Textdatei Ein Beispiel mit Informationen zum Dateisystem Eine KML-Datei erstellen Tracking für die Geolocation FileTransfer und FileUploadOptions Zugriff auf eine SQLite-Datenbank Was ist SQLite? Die SQLite-Features in PhoneGap Notwendige Freigabe und Voraussetzungen Die Methode opendatabase() Die Datenbankmethoden Ein erstes Datenbankbeispiel Die Methode executesql(), SQLResultSet und SQLResultSetRowList Die Weiterentwicklung des letzten Datenbankbeispiels Ein etwas umfangreicheres Datenbankbeispiel mit jquery Mobile Local Data Storage Die Objekte localstorage und sessionstorage Ein Beispiel zum Speichern von Daten im Local Storage Anhang Quellangaben im Internet Ein Crashkurs zu JavaScript Woher kommt JavaScript? Der gemeinsame Namensraum Elementare JavaScript-Grundstrukturen JavaScript und Objekte Das DOM-Konzept Zugriff auf Inhalte von Elementen in der Webseite...298

7 X Inhalt 12.3 Mit einer App Geld verdienen Gibt es (seriöse) Anbieter für mobile Werbekampagnen und wenn ja, welche? Rechnet sich mobile Werbung? Wie kommt Werbung in die App? Wie implementiert man allgemein mobile Bannerwerbung in die eigene App oder mobile Webseite? Wie bekomme ich Werbung in eine PhoneGap-App? Stichwortverzeichnis

8 3 Download und erste Anwendung von PhoneGap Sie erfahren nun, woher Sie PhoneGap beziehen können und wie Sie das Framework in Ihren Projekten einsetzen. Oder anders ausgedrückt wir erstellen die ersten PhoneGap-Projekte, die die Basis für alle folgenden Beispiele bilden. Das müssen Sie für jede Zielplattform etwas unterschiedlich machen. Wir besprechen konkret in dem Kapitel den Weg für ios, Windows Mobile und Android, was ja unsere Referenzsysteme über das gesamte Buch sein werden. Dabei wird indirekt auch die jeweilige Entwicklungsplattform bzw. das Entwicklungs-Tool festgelegt. 3.1 Download von PhoneGap PhoneGap ist einmal eine JavaScript-Bibliothek. Aber das ist nicht alles, denn es gibt ja auch den PhoneGap-Wrapper, um dieser JavaScript-Bibliothek den Zugang zu der mobilen Hardware zu ermöglichen und die App nativ auf der jeweiligen Zielplattform zu integrieren. Auf der Webseite des PhoneGap-Projekts finden Sie in der Kategorie Download ( einen Button, über den Sie das Framework laden können (Bild 3.1). Sie erhalten nach dem Speichern eine Zip-Datei, in der sich im Wesentlichen nach dem Auspacken in einem lib-verzeichnis die spezifischen PhoneGap-Varianten für die wichtigsten mobilen Betriebssysteme befinden. Gerade die PhoneGap-Wrapper brauchen Sie gezielt für jede Zielplattform, aber auch die JavaScript-Bibliotheken sind nicht für alle Plattformen identisch. Denn das ist der Preis dessen, dass PhoneGap native Apps bereitstellen will man muss für jedes gewünschte Betriebssystem eine unterschiedliche Variante des Frameworks verwenden. Das betrifft ausdrücklich nicht (!) den eigentlichen Quellcode der Webressourcen selbst, sondern wie gesagt den PhoneGap-Wrapper und die Bibliotheken. Die Referenzversion Im Buch bildet PhoneGap in der Version 2.2 die Basis.

9 54 3 Download und erste Anwendung von PhoneGap Bild 3.1 Download-Seite des Projekts 3.2 Die konkrete Bereitstellung für Projekte Auf der Dokumentationsseite von PhoneGap ( ist unter der Rubrik Getting Started für alle unterstützten Betriebssysteme genau beschrieben, wie Sie PhoneGap einrichten (Bild 3.2). Projektcodes in diesem Kapitel Wie im letzten Kapitel gilt, dass die Beispielcodes auch in diesem Kapitel bewusst nicht zur Verfügung gestellt werden. Mit der gleichen Begründung, damit Sie das Prozedere wirklich selbst durchführen müssen. Aber auch hier sind es nur Dummy-Projekte, die wir erstellen. Ab dem nächsten Kapitel finden Sie alle konkreten PhoneGap-Listings auf der Webseite zum Buch, wenn Sie die manuelle Erstellung wirklich umgehen wollen (wovon ich aber abrate). Das jeweilige Verfahren ist leider für jede Zielplattform individuell, teils etwas aufwendig und unflexibel (etwa Android), teils aber auch recht einfach und komfortabel (beispielsweise Windows Phone). In jedem Fall ist das Verfahren aber im Grunde nicht schwer und in der Dokumentation für alle Zielplattformen so genau beschrieben, dass Sie es hinbekommen sollten.

10 3.2 Die konkrete Bereitstellung für Projekte 55 Bild 3.2 Wie richtet man PhoneGap ein? Wir werden das Verfahren wie erwähnt für ios, Windows Mobile und Android als Beispielplattform Schritt für Schritt durchspielen. Dabei soll vorausgesetzt werden, dass die notwendigen Entwicklungsumgebungen wie etwa Eclipse samt dem ADT-Plug-in und dem SDK, Xcode oder das Visual Studio entsprechend der im Buch bereits besprochenen Schritte eingerichtet wurden. Android als ausführliche Schritt-für-Schritt-Folge Für unsere drei Hauptzielplattformen werden die wesentlichen Schritte ähnlich ablaufen. Das bedeutet, dass sich viele Details überschneiden und bei ausführlicher Besprechung Redundanzen auftreten. Deshalb soll ein Zielsystem eine Art Stellvertreter für die anderen darstellen, bei dem auch die wesentlichen theoretischen Hintergründe erläutert werden Android. Für Android werden die Schritte deshalb ganz langsam und ausführlich behandelt, während im Folgenden für ios und Windows Mobile schneller vorgegangen wird. Das mache ich auch deshalb, weil die manuellen Anpassungen für Android und Eclipse am aufwendigsten sind. Unter Windows Phone und dem Visual Studio sowie ios und Xcode sind die Einrichtungsschritte weniger aufwendig. Ich empfehle deshalb, dass der Abschnitt zu Android auch von den Lesern durchgegangen wird, die für eine andere Zielplattform entwickeln wollen.

11 56 3 Download und erste Anwendung von PhoneGap PhoneGap für Android einrichten Wenn Sie unter Eclipse ein PhoneGap-Projekt für Android erstellen wollen, müssen Sie erst einmal ein neues Android-Projekt anlegen. Das finden Sie wie bereits besprochen in Eclipse unter dem Menüpunkt File / New / Other / Android. Nennen wir das Projekt PhoneGapAndroid1 und wählen als minimale Version für die Android- Version die Version Sie müssen im folgenden Dialog wieder eine Angabe zum Package- Namen machen, unter dem die Java-Klasse einsortiert wird. Den Bezeichner für das Paket (vollständig kleingeschrieben) bauen Sie wie besprochen als umgedrehten DNS-Namen Ihrer Webseite auf (ohne www), dem dann ein Namensraum für Ihre PhoneGap-Applikationen folgt. Wählen Sie als Namensraum für Ihre PhoneGap-Apps z. B. phonegap. Also könnte der gesamte Paketname de.rjs.phonegap lauten. Die restlichen Angaben im Assistenten machen Sie so, wie wir im letzten Kapitel besprochen haben (Vorgabewerte). In der Dokumentation von PhoneGap für Android-Apps wird ausdrücklich betont, dass Ihre Activity keinesfalls von einer besonderen Klasse erben darf (das ist in der Vorgabe sowieso nicht der Fall) anderenfalls kann es zu Problemen kommen. Im Wurzelverzeichnis des neu angelegten Android-Projekts erstellen Sie die neuen Verzeichnisse /libs und assets/www 1. Das können Sie etwa mit dem Kontextmenü im Package Explorer erledigen. Das Verzeichnis libs Beachten Sie, dass Sie das Verzeichnis libs in älteren Versionen von Eclipse bzw. des Android SDK manuell anlegen müssen, während es in neuen Varianten schon vorhanden sein kann. Nun kommen die heruntergeladenen Dateien von PhoneGap ins Spiel. Die JavaScript-Ressourcen Suchen Sie im lib-verzeichnis der entpackten Download-Datei von PhoneGap für Android die Datei cordova-x.x.x.js 2. Das sind unter Android 3 die notwendigen JavaScript-Ressourcen für PhoneGap. Diese Datei kopieren Sie nach den Vorgaben von PhoneGap immer in das Verzeichnis assets/www in Ihrem Android-Projekt. Sie können darin aber auch Unterverzeichnisse erstellen und die JavaScript-Datei dort hinein kopieren. Sehr oft wird bei Webseiten solch eine Unterverzeichnisstruktur für externe Ressourcen verwendet, die etwa mit lib beginnt und JavaScript-Ressourcen dort in einem weiteren Unterverzeichnis js ablegt 4.Wir wollen entsprechend dieser Logik die Projektstrukturen anlegen und ein Unterverzeichnis lib/js in assets/www verwenden. Erstellen Sie dieses und kopieren Sie diese Datei also dahin. Der gesamte Pfad zur JavaScript-Datei sollte also ab dem Wurzelverzeichnis des Projekts assets/www/lib/js/cordova-x.x.x.js lauten. 1 Das Verzeichnis assets ist schon vorhanden und darin wird das Unterverzeichnis www erstellt. 2 Die Angabe x.x.x ist durch die konkrete Versionsnummer von PhoneGap zu ersetzen. Beispielsweise lautet der Dateiname cordova js. 3 Bei anderen Zielplattformen können das andere Dateien sein (etwa unter WebOS). 4 Externe Style Sheets würden etwa unter lib/css bereitgestellt.

12 3.2 Die konkrete Bereitstellung für Projekte 57 Die Java-Ressourcen Nun finden Sie in den Download-Dateien für Android auch eine.jar-datei. Diese heißt cordova-x.x.x.jar, wobei x.x.x durch die konkrete Versionsnummer zu ersetzen ist (etwa cordova jar). Java Archive Die Abkürzung.jar steht für Java Archive. Das bezeichnet zusammengefasste und komprimierte Ressourcen unter Java. JAR-Archive basieren auf der ZIP-Technologie und dem ZLIP-Format und sind dazu binärkompatibel, obwohl sie intern zusätzlich noch einige spezielle Metainformationen beinhalten, die sie gegenüber gewöhnlichen ZIP-Dateien auszeichnen. Sie können sogar.jar-archive einfach in.zip-archive umbenennen. Die.jar-Datei, die Sie ebenso im lib-verzeichnis der entpackten Download-Datei von PhoneGap finden, kopieren Sie nach /libs. Das sind die notwendigen Java-Ressourcen von PhoneGap. Sie müssen sicherstellen, dass die neu hinzugefügten Java-Ressourcen von PhoneGap von Eclipse auch gefunden werden. Unter Umständen müssen Sie dazu manuell Pfadangaben machen. Führen Sie am besten im Package Explorer einen Rechtsklick auf den Ordner /libs aus und wählen Sie dann Build Paths / Configure Build Path... (Bild 3.3). Bild 3.3 Die Angaben zum Build Path von Eclipse