iPhone Apps mit HTML, CSS und JavaScript: Ohne Objective-C und Cocoa zur eigenen App

186 Pages·2011·8.32 MB·German

by  Jonathan Stark

Ohne Objective-C und Cocoa zur eigenen App
iPhone
Apps
mit HTML, CSS & JavaScript
Jonathan Stark
O’Reilly
Deutsche Übersetzung von Ingo Dellwig

iPhone Apps mit HTML, CSS und
JavaScript
Jonathan Stark
Deutsche Übersetzung von
Ingo Dellwig
Beijing · Cambridge · Farnham · Köln · Sebastopol · Taipei · Tokyo
Die Informationen in diesem Buch wurden mit größter Sorgfalt erarbeitet. Dennoch können
Fehler nicht vollständig ausgeschlossen werden. Verlag, Autoren und Übersetzer übernehmen
keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene Fehler und
deren Folgen.
Alle Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt und sind
möglicherweise eingetragene Warenzeichen. Der Verlag richtet sich im Wesentlichen nach den
Schreibweisen der Hersteller. Das Werk einschließlich aller seiner Teile ist urheberrechtlich
geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung,
Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
Kommentare und Fragen können Sie gerne an uns richten:
O’Reilly Verlag
Balthasarstr. 81
50670 Köln
E-Mail: [email protected]
Copyright der deutschen Ausgabe:
© 2010 by O’Reilly Verlag GmbH & Co. KG
1. Auflage 2010
Die Originalausgabe erschien 2010 unter dem Titel
Building iPhone Apps with HTML, CSS, and JavaScript bei O’Reilly Media, Inc.
Die Darstellung eines Hüttensängers im Zusammenhang mit dem
Thema Mobile Webprogrammierung ist ein Warenzeichen von O’Reilly Media, Inc.
Bibliografische Information der Deutschen Nationalbibliothek
Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der
Deutschen Nationalbibliografie; detaillierte bibliografische Daten
sind im Internet über http://dnb.d-nb.de abrufbar.
Übersetzung und deutsche Bearbeitung: Ingo Dellwig, Werne
Lektorat: Christine Haite, Köln
Fachliche Unterstützung: Michael Gerth, Köln
Korrektorat: Sybille Feldmann, Düsseldorf
Satz: III-satz, www.drei-satz.de
Umschlaggestaltung: Karen Montgomery, Boston
Produktion: Andrea Miß, Köln
Belichtung, Druck und buchbinderische Verarbeitung:
Druckerei Kösel, Krugzell; www.koeselbuch.de
ISBN 978-3-89721-603-7
Dieses Buch ist auf 100% chlorfrei gebleichtem Papier gedruckt.
Für Erica – und das kleine hüpfende Böhnchen in ihrem Bauch.

Inhalt
Vorwort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . IX
1 Los geht’s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Web-Apps im Vergleich zu nativen Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Crashkurs in Webprogrammierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2 Einfaches iPhone-Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Erste Schritte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Die iPhone-CSS hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
iPhone-Look-and-Feel hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Elementares Verhalten mit jQuery hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . 25
Was Sie gelernt haben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
3 Fortgeschrittenes iPhone-Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Ein wenig Ajax hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Verkehrspolizist . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Ein paar Extras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Ihr eigener Zurück-Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Ein Icon für den Home-Bildschirm hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . 49
Vollbildmodus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Was Sie gelernt haben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
4 Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Mit ein wenig Hilfe von unserem Freund . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Zur Hauptseite gleiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Das Daten-Bedienfeld hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Das Datum-Bedienfeld hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Das Neuer Eintrag-Bedienfeld hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
| VII
Das Einstellungen-Bedienfeld . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Alles zusammenfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
jQTouch anpassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Was Sie gelernt haben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
5 Clientseitige Datenspeicherung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
localStorage und sessionStorage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Clientseitige Datenbank . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Was Sie gelernt haben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
6 Der Weg zur Offline-App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Die Grundlagen des Offline Application Cache . . . . . . . . . . . . . . . . . . . . . . . . 95
Online-Whitelist und Fallback-Optionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Eine dynamische Manifestdatei erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Fehlerbehebung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Was Sie gelernt haben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
7 Der Weg zur nativen App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Einführung in PhoneGap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Die App auf dem iPhone installieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Das iPhone per JavaScript kontrollieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Was Sie gelernt haben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
8 Wie Sie Ihre App nach iTunes übertragen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Ein iPhone Distribution Provisioning Profile erstellen . . . . . . . . . . . . . . . . . . . 158
Das iPhone Distribution Provisioning Profile installieren . . . . . . . . . . . . . . . . 160
Das Projekt umbenennen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Die Programm-Binärdatei vorbereiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Die App einreichen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Während Sie warten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Weiterführende Informationsquellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
VIII | Inhalt
Vorwort
Wie Millionen von Menschen habe auch ich mich sofort in mein iPhone verliebt.
Anfangs waren Webanwendungen (Web-Apps) die einzige Chance, individuelle Pro-
gramme auf das Gerät zu bekommen, was für mich in Ordnung ging, da ich ja Webent-
wickler bin. Als Monate später der App Store angekündigt wurde, war ich total aufgeregt.
Ich rannte los und kaufte jedes Buch über Objective-C, das mir in die Finger kam. Da
einige meiner Web-Apps schon recht bekannt waren, plante ich, diese als native Anwen-
dungen (Apps) neu zu schreiben, sie in den App Store zu stellen und auf einem riesigen,
galoppierenden Geldhaufen in den Sonnenuntergang zu reiten.
Die Desillusionierung folgte auf dem Fuße. Ich fand es schwierig, Objective-C zu lernen,
und ich wurde durch die Tatsache, dass die Sprache außerhalb der Mac-Programmierung
wenig nützlich ist, zusätzlich demotiviert. Xcode und der Interface Builder waren zwar
sehr professionell, aber sie waren nicht meine normale Entwicklungsumgebung, und ich
fand es schwer, mich an sie zu gewöhnen. Ich war von den ganzen Ringen, durch die ich
springen musste, nur um meine App und das iPhone für Tests vorzubereiten, extrem
genervt. Der Prozess für die Veröffentlichung der Anwendung im App Store war sogar
noch komplizierter. Nachdem ich ein oder zwei Wochen mit diesen Variablen gekämpft
hatte, fragte ich mich, warum ich mir diesen ganzen Ärger überhaupt antat. Immerhin
waren meine Apps bereits weltweit verfügbar – warum sollte ich also unbedingt im App
Store sein?
Darüber hinaus kann Apple Apps ablehnen – und macht es auch. Das ist sicherlich ihr
gutes Recht, und vielleicht haben sie gute Gründe dafür. Allerdings sieht es von außen
betrachtet sehr unberechenbar und willkürlich aus. Versuchen Sie einmal, sich hier hin-
einzuversetzen (das basiert übrigens auf einer wahren Geschichte): Sie haben etwa 100
Stunden damit verbracht, Objective-C zu lernen. In weiteren 100 Stunden haben Sie eine
native iPhone App geschrieben. Nehmen wir an, Ihre App ist bereit für die Premiere, und
Sie haben erfolgreich die Herausforderungen des Einreichungsprozesses für den App
Store gemeistert. Was passiert dann?
Sie warten. Und warten. Und warten noch etwas länger. Wir reden über Wochen und
manchmal auch Monate. Schließlich bekommen Sie eine Rückantwort. Und … Ihre
Vorwort | IX
Anwendung wurde abgelehnt. Was nun? Sie haben trotz des ganzen Aufwands nichts in
der Hand.
Aber warten Sie, es kann noch schlimmer kommen. Angenommen, Sie bekommen Ihre
App genehmigt. Hunderte oder vielleicht sogar Tausende von Menschen laden die
Anwendung herunter. Sie haben zwar noch kein Geld bekommen, sind aber auf Wolke
sieben. Dann trudeln die ersten Fehlermeldungen ein. Sie finden und beheben den Fehler
binnen Minuten, reichen die App erneut bei iTunes ein und warten auf Apples Prüfung
der Änderung. Und warten. Und warten noch etwas länger. Verärgerte Kunden geben
Ihnen haarsträubende Bewertungen im App Store. Die Verkäufe brechen ein. Und Sie
warten immer noch. Sie denken darüber nach, den verärgerten Kunden das Geld zurück-
zuerstatten, aber die Möglichkeit gibt es im App Store nicht. Sie sind also dazu ver-
dammt, herumzusitzen und Ihre Bewertung abstürzen zu sehen, obwohl der Fehler
bereits vor Tagen oder Wochen behoben wurde.
Sicher. Diese Geschichte beruht auf den Erfahrungen eines einzelnen Entwicklers. Viel-
leicht ist es ein Extrem, und die aktuellen Zahlen widerlegen meine These. Das Problem
bleibt allerdings bestehen: Wir Entwickler haben keinen Zugriff auf Apples Daten oder
die Details des Überprüfungsprozesses im App Store. Bis sich das ändert, ist das Erstellen
einer nativen App mit Objective-C ein riskanter Plan.
Glücklicherweise gibt es eine Alternative. Sie können Webanwendungen bauen, indem
Sie frei verfügbare, standardisierte Webtechnologien einsetzen, sie als Web-App veröf-
fentlichen und von echten Anwendern unter Volllast testen lassen. Wenn Sie absolut
startklar sind, können Sie die Software PhoneGap verwenden, um Ihre Webanwendung
in eine native iPhone App zu konvertieren und sie an den App Store zu senden. Sollte sie
ultimativ abgelehnt werden, ist das Projekt nicht tot, denn Sie können immer noch die
Web-App anbieten. Wenn sie genehmigt wird, umso besser! Sie können dann anfangen,
die App mit Funktionen zu erweitern, die die grandiosen Hardwarefunktionen des
Geräts nutzen. Das klingt wie das Beste aus beiden Welten, oder?
Wer sollte dieses Buch lesen?
Ich gehe davon aus, dass Sie grundlegende Erfahrungen im Lesen und Schreiben von
HTML, CSS und JavaScript (insbesondere jQuery) haben. In den Kapiteln 5 und 6 werde
ich einige grundlegende SQL-Quelltexte verwenden, eine flüchtige Kenntnis von SQL
wäre also hilfreich, ist aber nicht zwingend erforderlich.
Was brauchen Sie, um mit diesem Buch zu arbeiten?
Dieses Buch wird das iPhone SDK vermeiden, wo immer es geht. Alles was Sie brauchen,
um bei der großen Mehrheit der Beispiele mitzukommen, ist ein Texteditor und die aktu-
ellste Version von Safari (oder noch besser WebKit, das eine innovativere Version von
X | Vorwort