Phonegap Teil1: Features und Möglichkeiten


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:

Hinterlasse eine Antwort

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  1. Guten Tag,

    im Rahmen meines Praktikums erarbeite ich eine Mobile Anwendung mit jQuery/jQuery Mobile und versuche zurzeit die nativen Funktionen eines Smartphones mit Phonegap anzusteuern. Mit Hilfe der Dokumentation von PhoneGap habe ich den versuch gestartet, die Kamera aufzurufen. War ohne dass jQuery eingebunden war kein Problem, doch sobald jQuery mit im Spiel ist funktioniert dieser Aufruf nicht mehr.

    Also bin ich beim Suchen im Netz auf diesen Artikel gestoßen, welcher recht interessant ist. Deshalb die Frage: Was genau ist mit einem Plugin bei der Nutzung nativer Funktionen gemeint? Laut vielen Artikel muss man da nur die Dokumentation von PhoneGap beachten und bräuchte kein Plugin. Muss man was bestimmtes beachten, beim Benutzen von PhoneGap funktionen? Muss man die für jQuery besonders “verpacken” damit die Funktionen gehen? Bei mir heisst es immer sobal jQuery eingebunden ist, dass die funktion xy(); nicht gefunden werden kann.

    Grüße

    Emjay