Native Anwendungen und App Stores - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 364

Um Ihnen einen kleinen Eindruck zu vermitteln, wie Sie eine PhoneGap-App erstel-
len, passen Sie im Folgenden die »Shake it like a Polaroid Picture«-App aus Kapitel 6,
»Ablesen des Bewegungssensors mit JavaScript«, so an, dass statt des Flickr-Bildes ein
Foto verwendet wird, das Sie mit der Kamera Ihres Smartphones aufgenommen
haben. Wir zeigen Ihnen, wie Sie PhoneGap in die WebApp implementieren und
diese wiederum mit PhoneGap Build in diverse native App-Formate konvertieren -
und auf Ihrem Smartphone installieren.
Kostenpflichtige Developer Accounts
Damit Sie die App auf Ihrem iOS-Endgerät testen können, brauchen Sie einen gülti-
gen Apple Developer Account (99 €/Jahr). Wenn Sie auf Android testen, so müssen
Sie nur einen kostenpflichtigen Account erwerben, wenn Sie Ihre App in Googles
App Store namens Google Play vertreiben möchten.
9.1.3 »Shake it like a Polaroid picture« - die native Version
Die gute Nachricht ist, dass die Anpassung der WebApp sehr einfach ist. Sie werden in
kürzester Zeit den Code fertig haben, denn den größten Teil der Arbeit (das Interface,
die Animation des Polaroids) haben Sie bereits erledigt. Im Endeffekt ändert sich jetzt
nur die Quelle des Bildes. Es wird nicht mehr aus Flickr geladen, sondern eben das
verwendet, was Sie gerade aufgenommen haben. Kopieren Sie dazu zunächst den
gesamten Ordner der »Shake it like a Polaroid picture«-App, und öffnen Sie die
index.html . Als Erstes sollten Sie jQuery fest in das Projekt einbinden, das heißt, nicht
von den jQuery-Servern laden, sondern im Ordner javascripts ablegen. Folgenden
Code platzieren Sie im head -Bereich:
<script src="javascript/jquery.min.js" type="text/javascript"></script>
Die aktuelle jQuery-Bibliothek können Sie von http://jquery.com herunterladen. Als
Nächstes folgt die JavaScript-Bibliothek von PhoneGap, welche die Kommunikation
zwischen dem nativen Teil der App und dem WebApp-Teil herstellt. Setzen Sie auch
diese im head -Bereich ein.
<script src="PhoneGap.js" type="text/javascript" charset="utf-8"></script>
Die JavaScript-Datei PhoneGap.js wird automatisch später vom Framework hinzuge-
fügt. Daher müssen Sie die Datei nicht extra herunterladen.
Sie passen nun die Funktion neuespolaroid() an. Wie Sie sich sicher erinnern können,
laden Sie hier das neue Bild aus Flickr. Sie können einige Teil der Funktion wieder ver-
wenden, löschen Sie daher nur die folgenden Zeilen: