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 Steyer Apps mit PhoneGap entwickeln CHV Newsletterhinweis Computer Bleiben Sie auf dem Laufenden! Der Hanser Computerbuch-Newsletter informiert Sie regelmäßig über neue Bücher und Termine aus den verschiedenen Bereichen der IT. Profitieren Sie auch von Gewinnspielen und exklusiven Leseproben. Gleich anmelden unter

3

4 Ralph Steyer Apps mit PhoneGap entwickeln Universelle Web-Apps plattformneutral programmieren

5 Der Autor: Ralph Steyer, Bodenheim Kontakt: Alle in diesem Buch enthaltenen Informationen, Verfahren und Darstellungen wurden nach bestem Wissen zusammengestellt und mit Sorgfalt getestet. Dennoch sind Fehler nicht ganz auszuschließen. Aus diesem Grund sind die im vorliegenden Buch enthaltenen Informationen mit keiner Verpflichtung oder Garantie irgendeiner Art verbunden. Autor und Verlag übernehmen infolgedessen keine juristische Verantwortung und werden keine daraus folgende oder sonstige Haftung übernehmen, die auf irgendeine Art aus der Benutzung dieser Informationen oder Teilen davon entsteht. Ebenso übernehmen Autor und Verlag keine Gewähr dafür, dass beschriebene Verfahren usw. frei von Schutzrechten Dritter sind. Die Wiedergabe von Gebrauchsnamen, Handelsnamen, Warenbezeichnungen usw. in diesem Buch berechtigt deshalb auch ohne besondere Kennzeichnung nicht zu der Annahme, dass solche Namen im Sinne der Warenzeichen- und Markenschutz-Gesetzgebung als frei zu betrachten wären und daher von jedermann benutzt werden dürften. Bibliografische Information der Deutschen Nationalbibliothek: Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über abrufbar. Dieses Werk ist urheberrechtlich geschützt. Alle Rechte, auch die der Übersetzung, des Nachdruckes und der Vervielfältigung des Buches, oder Teilen daraus, vorbehalten. Kein Teil des Werkes darf ohne schriftliche Genehmigung des Verlages in irgendeiner Form (Fotokopie, Mikrofilm oder ein anderes Verfahren) auch nicht für Zwecke der Unterrichtsgestaltung reproduziert oder unter Verwendung elektronischer Systeme verarbeitet, vervielfältigt oder verbreitet werden Carl Hanser Verlag München, Lektorat: Brigitte Bauer-Schiewek Copy editing: Petra Kienle, Fürsenfeldbruck Herstellung: Irene Weilhart Layout: Manuela Treindl, Fürth Umschlagdesign: Marc Müller-Bremer, München Umschlagrealisation: Stephan Rönigk Druck und Bindung: Kösel, Krugzell Ausstattung patentrechtlich geschützt. Kösel FD 351, Patent-Nr Printed in Germany Print-ISBN: E-Book-ISBN:

6 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

7 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

8 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

9 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

10 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

11 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

12 Vorwort Während ich hier sitze und am Vorwort zu diesem PhoneGap-Buch feile, bin ich via einer USB-Tethering-App und meinem mobile WLAN-Hotspot über mein Smartphone online. Dabei sitze ich am Waldrand unter einem Sonnenschirm im Garten mit meinem Notebook. Ganz selbstverständlich. Noch vor wenigen Jahren saß ich beim Schreiben eines Buchs da ebenso oft (zumindest wenn es warm und schön war), aber offline. Wenn ich online sein wollte oder musste, musste ich ins Büro oder zumindest in die Nähe von meinem festen WLAN-Router gehen. Warum erzähle ich Ihnen das? Ich will Sie neidisch machen auf meine schönen Arbeitsbedingungen ;-). Aber im Ernst wie bei vielen Leuten ist mein Smartphone mittlerweile ein Schweizer Taschenmesser des täglichen Lebens. Der Nutzen liegt weit über der einfachen Telefonie. Von der Verwaltung meiner Kontakte, Notizen und Termine über die Wiedergabe von Musik und Videos zur Informationsbeschaffung jeder Art samt Onlinegeschäften, Navigationsmöglichkeiten, der ständig verfügbaren Kamera bis hin zu kleinen praktischen Tools wie einer Taschenlampen-App, eines Kompasses oder einer Wasserwaage reichen die Anwendungen. Und die diversen Spiele sind nicht zu vergessen. Nun muss ich aber zugeben, dass ich noch nicht sonderlich lange die Organisation der täglichen Anforderungen meines Lebens solchen mobilen Geräten übertragen habe. Denn eigentlich bin ich technisch konservativ. Ich springe fast nie einfach auf einen Trend auf, nur weil er neu ist. Ehrlich gesagt muss ich eingestehen, dass häufig der Spruch Was der Bauer nicht kennt, frisst er nicht! auch für mich gelten könnte. Ich bin jedoch lernfähig. Nur muss ich immer erst von dem Nutzen einer neuen Sache überzeugt sein und vor allen Dingen, dass das Neue auch gut und sinnvoll ist. Entweder überzeugt mich irgendjemand anderes davon oder ich bekehre mich selbst. Letzteres dauert meist länger, ist aber der Regelfall. Wenn ich dann aber von einer Neuentdeckung überzeugt bin, dann beschäftige ich mich richtig mit einer Sache und vertrete deren Vorteile später auch konsequent. Oft sogar ganz entgegen meines Standpunkts, den ich vor der Konvertierung vertreten habe. Ein paar Situationen belegen das ganz gut. Während meines Mathematik-Studiums war ich beispielsweise sicher, dass ich nie Programmierknecht werden wollte. Die Informatiker hatten sich an der Uni zu Beginn meines Studiums gerade als eigenständiger Fachbereich von uns Mathematikern abgespalten und wir wollten nicht mit so etwas schmutzig Praktischem wie Programmierung und Computertechnik in einen Topf geworfen werden. Und außerdem habe ich mich sowieso mehr für Physik 1 interessiert und dieses Fach parallel zu Mathematik studiert. 1 Ich bin ganz begeistert bei gewissen Features von PhoneGap wie dem Zugriff auf Beschleunigungssensoren oder die Navigation, bei denen ich einige verschüttete Physikkenntnisse wieder hervorkramen und zum Besten geben kann ;-).

13 XII Vorwort Als ich dann mit dem Studium fertig war, stand ich mit meinem Diplom in Mathematik da. Und was gab es für Mathematiker für Jobangebote? Hauptsächlich als Programmierer. Aber als ich dann als Programmierer bei einer Versicherung angefangen hatte, bin ich dem Reiz dieser ehemals verachteten Welt erlegen. Sowohl was den Status eines Programmierers in der Firma anging 2, aber vor allen Dingen der spannenden Tätigkeit, dem Erschaffen von Dingen (wenn auch nur Programmen) und den logischen Denkweisen. Nun haben wir bei der Versicherung in meiner Abteilung anfangs prozedural mit Turbo Pascal programmiert. Das Ziel waren DOS-Programme für den Außendienst und unsere Vertriebspartner in Banken und Agenturen. Nach einiger Zeit sollten wir jedoch an einem objektorientierten Projekt arbeiten. Die OOP (objektorientierte Programmierung) kam zu dem Zeitpunkt als Hype auf. Aber diese objektorientierte Programmierung war für mich wieder so eine Neuerung, an die ich anfangs gar nicht heran wollte. Mir war der Nutzen zu dem Zeitpunkt einfach nicht klar. Vor allen Dingen, da wir in der Versicherung mit C/C++ einen hybriden Zugang zu dieser Welt gewählt hatten und man die objektorientierte Denkweise damit wunderbar umgehen konnte (und immer noch kann). Aber als ich 1996 mittlerweile selbstständig als Freelancer Java programmieren wollte, musste ich mich richtig auf Objektorientierung einlassen und nach einiger Zeit wurde ich zum überzeugten Vertreter der OOP. Als dann der Hype um Handys aufkam und jeder sich damit wichtigmachen wollte, war meine Aussage: So etwas brauche ich nicht! Ich brauche nicht zu betonen, dass mich irgendwann auch Handys überzeugt haben. Und als alle Welt von mobilem Internet geschwärmt hat... Soziale Netzwerke, Blogs, etc. alles habe ich erst einmal betrachtet, um es erst dann zu nutzen, wenn ich den Sinn und die Vorteile verstanden habe. Es scheint in meinem Leben immer so zu sein, dass ich bei einem Zug erst einmal schaue, wohin er fährt und ob er nicht gleich beim Verlassen des Bahnhofs entgleist. Aber wenn er abgeht, dann springe ich auf den letzten Wagen auf und arbeite mich sehr oft sogar bis zur Lok vor. Seltsamerweise klappt das dann meist. Was nun die Programmierung von Apps angeht, ist hier die Situation aber etwas anders. Wie angedeutet, liegen meine Wurzeln in der Desktop-Programmierung mit klassischen Sprachen, aber auch vor allen Dingen in Java und zum Teil C# bzw..net. Mein zweites Standbein, mit dem ich seit etwa 1996 hauptsächlich gearbeitet und programmiert habe, sind Webtechnologien. Nun bot Java schon sehr früh die Möglichkeit zur Entwicklung von mobilen Applikationen die sogenannten MIDlets. Und mit denen habe ich mich beschäftigt, bevor der eigentliche Boom der mobilen Apps und mobilen Endgeräte begonnen hat. Die Erstellung von Apps ist sozusagen eine der wenigen technischen Entwicklungen, in denen ich zu früh dran war. Denn wie Sie vielleicht wissen, ist der MIDlet-Zug entgleist. Oder anders ausgedrückt MIDlets und die frühen mobilen programmierbaren Geräte wurden nicht gerade ein Erfolg. Von daher war ich dann wieder vorsichtig, als die aktuellen Apps und mobilen Geräte gehypt wurden. Aber immer am Puls, denn mit Java sowie C# hatte ich die Programmiergrundlagen seit Jahren bereit. Als dann zusätzlich Webtechnologien immer mehr als Basis für Apps und mobile Seiten bzw. Applikationen propagiert wurden, fügte sich im mobilen Bereich zusammen, was ich bereits über die Jahre in allen möglichen Umfeldern genutzt hatte. 2 Jeans und Turnschuhe konnten sich bei einer Versicherung als Geschäftskleidung nur Lagerarbeiter und Programmierer leisten.

14 Vorwort XIII Und ich bin von der Verwendung von Webtechnologien im mobilen Umfeld überzeugt, obwohl ich auch native Android-Apps mit Java oder Apps für Windows Phone mit C# erstelle. Nur der Einsatz von HTML5, CSS3 und JavaScript erlaubt die Erstellung universell verwendbarer Web-Apps für Android, Apple, Windows Phone und andere mobile Plattformen. Und mit PhoneGap können Sie auch die speziellen Features mobiler Endgeräte ausnutzen. Sie können etwa auf GPS-Empfänger, die Orientierung, die Kamera, Datenbanken etc. direkt aus JavaScript heraus zugreifen, ohne spezielle native Programmiertechniken lernen zu müssen. Ich zeige Ihnen in diesem Buch, wie das geht. Ihr Ralph Steyer

15