Mit Phonegap kann man Webanwendungen mit HTML5, CSS und Javascript bauen als mobile Webanwendung und gleichzeitig eine native App für den App-Store und den Androide Market. Phonegap ist Open Source und wird von der Apache Cooperation und Adobe unterstützt. Auch eine Mischung aus mobiler Anwendung als Webseite und nativer App im Store ist möglich. Die große Frage ist, wo sind die Grenzen von Phonegap, was ist nicht möglich? Welche Features und Möglichkeiten bietet Phonegap im Vergleich zu einer nativen App.
Systemvorraussetzung nach Zielplattform
iOS: MAC ab OS X 10.6
Android und HP WebOS: alle 3 (=Windows, Mac, Linux)
Symbian: alle 3, aber der Simulator läuft nur unter Windows
Blackberry: Windows, Mac, aber der Simulator läuft nur unter Windows
Windows 7 Phone: Mac ab OS X 10.5 🙂
Benötigt man für eine iPhone-Anwendung mit Phonegap eine MAC?
Ja, um die Anwendung zu generieren und in den App Store zu stellen, wird das iOS SDK bzw. Android SDK benötigt. Eine langsame Alternative ist ein virtuelles MAC OS X mit VMWare. Android lässt sich sowohl unter Windows, MAC und Linux programmieren und testen.
Geeignete Javascript Frameworks
- iWebKit, sorgt für den iPhone Look der Oberflächen und Bedienelemente
- jQuery Mobile, dynamischer, einfaches eigenes Layouting, mehr Effekte und Animationen, z.B. iPhone PageFlip, aber Performance Probleme auf manchen Android Phones bei Animationen
- jQTouch, ein jQuery mobile Plugin, welches weniger Systeme unterstützt u.a. kein Windows Mobile/Phone, Symbian, Blackberry
- Sencha Touch, expert, erweiterte Touch-Events, Animationen, sehr schwierig zu erlernen und zu debuggen da komplett auf Javascript basierend
- ein Vergleich aller Frameworks findet sich hier
Canvas in Webapps
- können für die Darstellungen von sich zeitlich ändernden Daten (z.B. ein Chart) oder Bilder (z.B. Webcam) benutzt werden, die sich per Ajax aktualisieren ohne Reload der Seite
- Diagramm lassen sich bspw. mit dem jQuery Plugin Flott zeichnen und müssten um eine Ajax-Redraw Funktion erweitert werden , um zeitlich dynamisch dargestellt werden zu können
Wie können dynamische Inhalte in die App von einem Webservice eingebunden werden?
Mit Hilfe von Javascript kann ein Ajax-Request bei Bedarf ausgeführt werden und die Antwort mit Javascript in das bestehende HTML eingebaut werden.
Features und Möglichkeiten von HTML5
- Geo-Location API sehr gut über HTML5 abgedeckt
- Web Storage, dauerhafte Speicherung von Daten auf Clientseite bis 5MByte
- Web SQL Database clientseitige Speicherung mit relationaler Datenbank in SQL
- Offline Web Applications: Beim ersten Aufruf werden alle Dateien der Webseite heruntergeladen, die im Manifest File definiert sind. Das Manifest befindet sich auf dem Server und wird immer auf Änderungen überprüft, die bei bestehender Internetverbindung abgeglichen werden.
Features und Möglichkeiten von Phonegap
- alle HTML5 Features
- verkaufen der Apps über die Stores, dabei muss beachtet werden, dass Apple Apps ablehnt, die keine Gerätfunktionen benutzt, also auch als Webseite betrieben werden könnte. Es sollte also zumindest die Kamera oder ähnliches verwendet werden.
- Funktionen wie GPS, Accelerometer, Nummern wählen, vibrieren, Bildergalerie, Kamera, Kontakte, Netzwerkstatus und Kompass
Unterschiede Phonegap und Titanium
- Phonegap: Anwendung läuft in einem unsichtbaren Browserfenster, das HTML-Grundgerüst wird nicht umgewandelt
- Titanium wandelt das HTML-Grundgerüst um in nativen Code, so wird z.B: eine richtige Tableview generiert und keine HTML-Table benutzt
- Titaniumentwicklung ist sehr Javascript-lastig
- Titanium funktioniert nur für Android und iOS, kein Windows Phone, Symbian, Palm oder Blackberry
Ist es möglich mit Phonegap auch native Funktionen zu nutzen?
Ja, per Plugin können diese in Objective-C oder Java eingebaut werden, wenn nötig und per Javascript gestartet werden incl. Callback Funktion!
Testen Sie auf Android als Demo Apps:
Phonegap: PhoneGap Showcase, PhoneGap API und jQuery Mobile
Titanium: Demo
weiter zu Phonegap Teil2: Installation für Android unter Eclipse Windows 7
weiter zu Phonegap Teil3: Basics und das erste Programm
Nach dem Buch:
