Post on 06-Apr-2015
#1Martin Möllenbeck
Phonegap/CordovaPlattformübergreifende mobile
Anwendungen
Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor
Version 4.3 – 03.04.2014
#2Martin Möllenbeck
Referentenvorstellung
• Martin Möllenbeck– Gründer und Geschäftsführer von 5Minds– Senior-Softwarearchitekt und Berater– passionierter Geek und Autor– mit Focus auf Web- und Mobile-Techniken unterstützt
von .NET, Node.js und PhoneGap unter Anwendung agiler Entwicklung
– Stolzer Papa und Fan von Texel – „Done is better than perfect“ (Motto)– Twitter: @moellenbeck– Kontakt: martin.moellenbeck@5Minds.de, 0208 –
309952-0
#3Martin Möllenbeck
Agenda
• Einführung– Native Anwendung vs. Mobile Web-Anwendung vs. Hybride Anwendungen– Architektur und Konzept von Phonegap/Cordova– Installation von Cordova– Die wichtigsten Befehle für Cordova– Einfache Cordova-Anwendung– Überblick über die Entwicklungsumgebungen– Testen mit dem Emulator– Testen auf den Gerät– Debuggen auf dem Emulator oder dem Gerät– Erweiterungen in PhoneGap/Cordova
• Unterstützung für den Zugriff auf die Geräte-Hardware• Unterstützung für den Zugriff auf Geräte-Eigenschaften
#4Martin Möllenbeck
Einführung Native Anwendung vs. Mobile Web-Anwendung vs. Hybride
Anwendungen
#5Martin Möllenbeck
Native Anwendung vs. Mobile Web-Anwendung vs. Hybride Anwendungen (1)
• Native Anwendung– Installiert über einen „Apps-Store“ (Google Play, Apples App
Store).– Kann auf Hardware und alle Geräte-Funktionen zugreifen.– Maximale Geschwindigkeit, da für jede Plattform individuell
und optimiert entwickelt.– Unterschiedliche Programmiersprache und Framework je
Mobile-Plattform.– Hohe Entwicklungszeit, da der Grad an Wiederverwendung
gering ist.– Ohne Netzwerk zu verwenden ( hängt vom
Anwendungsfall ab).
#6Martin Möllenbeck
Native Anwendung vs. Mobile Web-Anwendung vs. Hybride Anwendungen (2)
• Mobile Web-Anwendungen– HTML, JavaScript und CSS– Verwendung durch Aufruf eine URL– Kann, je nach Geräte und Browser auf einige Hardware-
Eigenschaften zugreifen ( Geolocation, Kamera), entspricht HTML5-Spezifikation und soweit in den entsprechenden Browsern umgesetzt.
– (kein) lokaler Speicher vorhanden ( HTML5, heute ohne übergreifenden Standard, Web SQL-Database bzw. Indexed DB)
– Nicht Offline zu verwenden (Ausnahmen: HTML5 Spezifikation zum ApplicationCache <html manifest=„*.appcache“>)
#7Martin Möllenbeck
Native Anwendung vs. Mobile Web-Anwendung vs. Hybride Anwendungen (3)
• Hybride Anwendungen– Teilweise native Anwendung teilweise Webanwendung– Installation über „App-Stores“– Kann auf die Hardware und die meisten Gerätefunktionen
zugreifen– Ohne Netzwerk zu verwenden ( hängt vom
Anwendungsfall ab)– Die Entwicklung kann überwiegend mit JavaScript, HTML
und CSS erfolgen– Kann mittels Plugins um native Anwendungsteile ergänzt
werden– Entwickler einer Anwendung für (alle) mobilen Plattformen
Cordova/PhoneGap
#8Martin Möllenbeck
Einführung Architektur und Konzept von Phonegap/Cordova
#9Martin Möllenbeck
Architektur und Konzept von Phonegap/Cordova (1)
• PhoneGap/Cordova ist:– Ein Framework zur Entwicklung hybrider Anwendungen.– Cordova: Ist das OpenSource-Projekt unter Führung der Apache-Foundation
(http://cordova.apache.org).– PhoneGap: Ist der Produkt von Adobe (http://phonegap.com) und
kompatible zu Cordova– Ein Webbrowser-Instanz ohne Windows-Rahmen, der mit der maximalen
Größe dargestellt wird.– Zusätzlich stellt Cordova eine API zur Verfügung um auf native Funktionen
des mobilen Gerätes zuzugreifen.– Die Anwendung wird mittels JavaScript, HTML und CSS erstellt. Somit stellt
sich für den Entwickler die Programmierung so dar, als wenn er eine Webanwendung erstellen würde.
#10Martin Möllenbeck
Architektur und Konzept von Phonegap/Cordova (2)
• PhoneGap/Cordova ist:– Cordova stellt quasi eine Brücke zwischen der Web-Anwendung und dem
Betriebssystem dar.– Die fertigen Anwendungen werden dann als spezifisches Binary über das
Eco-System veröffentlicht.• IPA: Für iOS-Anwendungen• APK: Für Android-Anwendungen • XAP: Für Windows Phone 8 Anwendungen
#11Martin Möllenbeck
Architektur und Konzept von Phonegap/Cordova (3)
#12Martin Möllenbeck
Einführung Installation von Cordova
#13Martin Möllenbeck
Installation von Cordova (1)
• Für jede Plattform muss die entsprechende Entwicklungsumgebung installiert werden.– Für Android: Java JDK, Ant, Android ADT (SDK, Eclipse+ADT)– Für iOS: Xcode unter MacOS X– Für Windows Phone 8: Visual Studio (Pro oder größer) und
SDK/Emulator– Weiter unterstützte Plattformen:
• Amazon Fire OS• Blackberry 10• Firefox OS• Ubuntu• Windows 8• Tizen
• Alternative kann man auch „Adobe PhoneGap Build“ verwenden.– Unterstützte Plattformen: iOS, Android, Windows Phone,
Blackberry, WebOS– Für 1 privates Projekt bzw. OpenSource-Projekte kostenfrei.
#14Martin Möllenbeck
Installation von Cordova (2)
• Installation am Beispiel „Android“ unter Windows:– Installation Java JDK 6 oder 7:
• http://www.oracle.com/technetwork/java/javase/downloads/index.html• JAVA_HOME setzen• PATH um %JAVA_HOME% erweitern
– Installation Android SDK• ADT Bundle laden: http://developer.android.com/sdk/index.html• PATH erweitern:
– D:\AndroidDev\android-sdk\platform-tools;D:\AndroidDev\android-sdk\tools– Ant (Make für Java) laden und installieren:
• Download: http://ant.apache.org/bindownload.cgi• ANT_HOME setzen• PATH um ANT_HOME erweitern
– Node.js installieren:• Download: http://www.nodejs.com• NODE und NPM in PATH aufnehmen
– PhoneGap/Cordova installieren:• npm install –g cordova
#15Martin Möllenbeck
Einführung Die wichtigsten Befehle für Cordova
AUSDRUCKEN!!!
#16Martin Möllenbeck
Die wichtigsten Befehle für Cordova (1)
• Anwendung erstellen:– Befehl: cordova create <Verzeichnis> <eindeutige.app.id> <Name des Anwendung>– Beispiel: corodva create 01_HelloWorld de.meineurl.helloworld HelloWorld
• Plattform zum Projekt hinzufügen:– Befehl: corova platform add <Platform-Kürzel>– Beispiel: cordova platform add android
• Plattform anzeigen lassen:– Befehl: cordova platform list
• Plugin zum Projekt hinzfügen:– Befehl: cordova plugin add <Id des Plugin>– Beispiel: cordova plugin add org.apache.cordova.battery-status
• Installierte Plugins anzeigen– Befehl: cordova plugin list
• App erstellen:– Befehl: cordova build <Plattform-ID>– Beispiel: cordova build android
#17Martin Möllenbeck
Die wichtigsten Befehle für Cordova (2)
• App im Emulator ausführen:– Befehl: cordova run <Plattform-ID> --emulator– Beispiel: cordova run android --emulator
• App auf dem Gerät ausführen:– Befehl: cordova run <Plattform-ID> --device– Beispiel: cordova run android --device
Hinweis: • Alles was zwischen den spitzen Klammern steht, muss ohne <> mit eigenen Werten
ersetzt werden.• Bei allen Angaben sollte auf Unterstriche, Leerzeichen, Zahlen und Sonderzeichen
verzichtet werden.
#18Martin Möllenbeck
Einführung Einfache Cordova Anwendung
#19Martin Möllenbeck
Einfach Cordova Anwendung (1)
• Erstellen der Anwendung „HelloWorld“– cordova create <Verzeichnis> <AppId> <AppName>– cordova create HelloWorld de.fiveminds.helloword HelloWorld
• Verzeichnisstruktur– .cordova: Interne Konfiguration von cordova (u.a. Template für die
Anwendung und Versionsnummer) – hooks: Hier können Scripte erstellt werden, die bei Kommandos von
Cordova ausgeführt werden, z.B. für Build-Server.– merges: Werden für das Erzeugen der Anwendung benötigt– platforms: Hier werden die installieren plattformspezifischen Projekte
automatisch erstellt.– plugins: Hier werden die installieren Plugins für Cordova installieren und
konfiguriert.– www: Hier befindet sich die eigentliche Anwendung, die mit Javascript,
HTML5 und CSS entwickelt wird.– config.xml: Konfiguration der Anwendung (z.B. Namen, Copyright,
Berechtigungen, Zugriff auf Netzwerk-Dienste)
#20Martin Möllenbeck
Einfach Cordova Anwendung (2)
• Um die Anwendung verwenden zu können, ist die entsprechende Zielplattform hinzuzufügen:– cordova platform add <platform-id>– cordova platform add android– Mögliche Werte sind (cordova platform list):
• Android: android• iOS (nur auf Mac): ios• Blackberry: blackberry10• Firefox OS: firefoxos• Windows Phone 7 (nur Windows): wp7• Windows Phone 8 (nur Windows): wp8• Windows 8 (nur Windows): windows8
– Kommandozeile: „cordova platform list“
#21
Demo
Einfache Cordova Anwendung
#22Martin Möllenbeck
Einfach Cordova Anwendung (2)
• www/css/index.js:– Einfach CSS-Stylesheet-Datei
• www/img/logo.png:– Logo
• www/js/index.js:– Einsprungpunkt der Anwendung
• www/index.html:– Start-Seite, wird durch
<content src="index.html" /> inder Datei config.xml festgelegt
• config.xml: – Konfiguration der Anwendung
#23Martin Möllenbeck
Einführung Überblick Entwicklungsumgebungen
#24Martin Möllenbeck
Überblick Entwicklungsumgebung
• In der Regel reicht ein einfacher Texteditor aus.– Nur Syntax-Hervorhebung– Kein (oder nur eingeschränktes) IntelliSense
• WebStorm von JetBrains– Kosten ca. 55 EUR
• Alle Entwicklungsumgebungen unterstützen kein integriertes Debugging– Hilfe für Android: Chrome Developer Tools (Demo)
• Entwickelt wird auf dem PC.• Getestet und „debugged“ wird auf:
– Emulator– Geräte
#25Martin Möllenbeck
Einführung Testen im Emulator
#26Martin Möllenbeck
Testen im Emulator (1)
• Zuerst Eclipse starten.• Dann einen einen
Emulator erstellen.• Menü:
– Window Android Virtual Device Manager
– Einstellungen:• Name: Wahlfrei• Target:
– API Level 19 = Android 4.4.x
• CPU/ABI:– Intel hat eine höhere
Performanz unter OSX aber einen Bug
– ARM ist etwas langsamer.
#27Martin Möllenbeck
Testen im Emulator (2)
• Durch Eingabe von (im Terminal/cmd.exe):
>> cordova run android --emulator
• ... und ein wenig mehr Geduld.
#28
Demo
Testen um Emulator
#29Martin Möllenbeck
Einführung Testen auf Geräten
#30Martin Möllenbeck
Testen auf dem Geräte
• Geräte muss: – per USB an PC angeschlossen sein.– zur Entwicklung vorbereitet sein:
• Bei Android 4.4.x– „Einstellung“ „Über das Telefon“ 7 mal auf „Build-
Nummer“ tippen– „Entwickleroptionen“ „USB-Debugging aktivieren“
• Andere Android-Versionen: http://developer.android.com/tools/device.html
• Durch Eingabe von (im Terminal/cmd.exe):– cordova run android --device
• ... und deutlich weniger Geduld als beim Emulator!!
#31
Demo
Testen auf dem Geräte
#32Martin Möllenbeck
Einführung Debuggen auf dem Emulator oder dem Gerät
#33Martin Möllenbeck
Debuggen auf dem Emulator oder dem Gerät (1)
• Für iOS:– Verwenden von Safari.
• Anwendung auf dem Emulator starten.• Safari starten.• Menü-Eintrag „Entwickler“ „iPhone Simulator“
„index.html“• Für Android:
– Verwenden von Chrome.• Anwendung auf dem Emulator oder dem Gerät starten.• Den Chrome-Browser starten.• In Adresszeile „chrome://inspect/# “ eintragen.• „Discover USB devices“ anhaken.• Developer-Console mit „inspect“ starten.
#34Martin Möllenbeck
Debuggen auf dem Emulator oder dem Gerät (2)
• Phonegap Debug Server– http://debug.phonegap.com (basiert auf weinre WEb
INspector Remote)• Es muss eine Internet-Verbindung existieren• Notwendige Schritte:
1. URL aufrufen: http://debug.phonegap.com2. Eindeutigen Namen vergeben.3. Script in die Anwendung einfügen (direkt nach
cordova.js in der „index.html“).4. URL in einem WebKit-Browser aufrufen Chrome
oder Safari.
#35Martin Möllenbeck
Debuggen auf dem Emulator oder dem Gerät (3)
• Weitere Techniken für das Debugging von Apps:– https://github.com/phonegap/phonegap/wiki/Debugging-in-
PhoneGap• Debuggen von Apps, die unter iOS direkt beim Start
einen Fehler verursachen:– cordova run ios --emulator– Nachdem der „Build“-Prozess durchgelaufen ist, wird
folgende ähnlich Ausgabe ausgegeben:• ... ios-sim[...] stderrPath:
/Users/moellenbeck/Dropbox/_dev/phonegap/schulung/06_jQueryUI/platforms/ios/cordova/console.log
• In diese Datei gibt es Hinweise auf Fehler, falls ein Plugin nicht geladen wurde oder ähnlich Fehler aufgetreten sind.
#36Martin Möllenbeck
Debuggen auf dem Emulator oder dem Geräte (2)
(iOS-Emulator und Safari)
#37Martin Möllenbeck
Debuggen auf dem Emulator oder dem Gerät (3)
(Android-Emulator und Chrome Browser)
#38
Demo
Debuggen auf dem Emulator oder dem Gerät
#39Martin Möllenbeck
Einführung Erweiterungen in PhoneGap/Cordova
#40Martin Möllenbeck
Erweiterungen in PhoneGap/Cordova
• Seid Version 3.x ist PhoneGap/Cordova in einen Kern und Erweiterungen aufgeteilt worden.– Vorteile:
• Weniger Speicherbedarf auf den Geräten.• Höhere Geschwindigkeit beim Starten der Anwendung.• Unabhängige Weiterentwicklung durch weniger Abhängigkeiten.
• Ein Übersicht aller Plugins (auch von Drittlieferanten) sind unter „https://build.phonegap.com/plugins “ zu finden (Auszug):– Popup-Hinweise (Toast): Hinweise für den Benutzer, die automatisch
geschlossen werden.– Barcode-Scanner: Plugin zum Scannen von Barcodes.
• Es ist gibt auch die Möglichkeit eigene Plugins zu erstellen:– http://docs.build.phonegap.com/en_US/3.3.0/
developer_contributing_plugins.md.html#Contributing%20Plugins
#41Martin Möllenbeck
Einführung Unterstützung für den Zugriff auf die Geräte-Hardware
#42Martin Möllenbeck
Unterstützung für den Zugriff auf die Geräte-Hardware
#43Martin Möllenbeck
Unterstützung für den Zugriff auf die Geräte-Hardware (1)
• Folgende Erweiterungen werden durch PhoneGap zur Verfügung gestellt:– Battery Status (org.apache.cordova.battery-status):
• Events für den Ladestatus, kritischer Ladestatus, Geringer Ladestatus
– Device (org.apache.cordova.device):• Zugriff auf: Cordova-Version, Gerätename, OS-Version
etc.– Device Motion (org.apache.cordova.device-motion):
• Zugriff auf den Beschleunigungsmesser des Gerätes– Device Orientation (org.apache.cordova.device-
orientation):• Zugriff auf den Gerätekompass
– Network Information (org.apache.cordova.network-information):• Zugriff auf die aktuelle Netzwerkverbindung und Events
für „online“ und „offline“
#44Martin Möllenbeck
Unterstützung für den Zugriff auf die Geräte-Hardware (2)
#45
Demo
Unterstützung für den Zugriff auf die Geräte-Hardware
#46Martin Möllenbeck
Unterstützung für den Zugriff auf die Geräte-Hardware (1)
• Folgende Erweiterungen werden durch PhoneGap zur Verfügung gestellt:– Camera (org.apache.cordova.camera):
• Zugriff auf die Kamera und die Foto-Bibliothek.– Console (org.apache.cordova.console):
• Ausgabe von Nachrichten auf der Standardausgabe console.log() Print debugger ;-).
– Contacts (org.apache.cordova.contacts):• Zugriff aus das Adressbuch, anlegen neuer Kontakte.
– Dialogs (org.apache.cordova.dialogs):• Verwendung von Systemnachrichten: Bestätigungs- und
Hinweisdialoge.– File (org.apache.cordova.file):
• Zugriff auf das Dateisystem HTML5 kompatible.– File Transfer (org.apache.cordova.file-transfer):
• Dateien auf einem Server hoch- bzw. herunterladen.– Geolocation (org.apache.cordova.geolocation):
• Positionsbestimmung über GPS, WIFI, GSM/CDMA etc.
#47Martin Möllenbeck
Unterstützung für den Zugriff auf die Geräte-Hardware (2)
• Folgende Erweiterungen werden durch PhoneGap zur Verfügung gestellt:– Globalization (org.apache.cordova.globalization):
• Zugriff auf die Internationalisierungseinstellung.– In-App Browser (org.apache.cordova.inappbrowser):
• Öffnen eines neuen Browser-Fensters um z.B. Oauth-Autorisierung durchzuführen (Facebook und Co).
– Media (org.apache.cordova.media):• Abspielen und aufnehmen von Audio-Dateien.
– Media Capture (org.apache.cordova.media-capture):• Aufnahme von Video-, Bildern- und Audio-Dateien.
– Splashscreen (org.apache.cordova.splashscreen):• Anzeigen eines Startbildschirms während die Anwendung
startet.– Vibration (org.apache.cordova.vibration):
• Geräte vibrieren lassen.
#48Martin Möllenbeck
Wie geht es weiter? Fragen???
• Und es geht weiter– PhoneGap mit Angular.js– Beispiel für Offline-First-Ansatz
• Fragen? Jetzt oder später: Martin.Moellenbeck@5Minds.de