Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014
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
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
Einführung Native Anwendung vs. Mobile Web-Anwendung vs Einführung Native Anwendung vs. Mobile Web-Anwendung vs. Hybride Anwendungen
Native Anwendung vs. Mobile Web-Anwendung vs. Hybride Anwendungen (1) 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).
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“>)
Native Anwendung vs. Mobile Web-Anwendung vs. Hybride Anwendungen (3) 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
Einführung Architektur und Konzept von Phonegap/Cordova
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.
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
Architektur und Konzept von Phonegap/Cordova (3)
Einführung Installation von Cordova
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.
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
Einführung Die wichtigsten Befehle für Cordova AUSDRUCKEN!!!
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
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.
Einführung Einfache Cordova Anwendung
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)
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“
Einfache Cordova Anwendung Demo Einfache Cordova Anwendung
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
Einführung Überblick Entwicklungsumgebungen
Ü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
Einführung Testen im Emulator
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.
Durch Eingabe von (im Terminal/cmd.exe): Testen im Emulator (2) Durch Eingabe von (im Terminal/cmd.exe): >> cordova run android --emulator ... und ein wenig mehr Geduld.
Demo Testen um Emulator
Einführung Testen auf Geräten
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!!
Demo Testen auf dem Geräte
Einführung Debuggen auf dem Emulator oder dem Gerät
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.
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: URL aufrufen: http://debug.phonegap.com Eindeutigen Namen vergeben. Script in die Anwendung einfügen (direkt nach cordova.js in der „index.html“). URL in einem WebKit-Browser aufrufen Chrome oder Safari.
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.
Debuggen auf dem Emulator oder dem Geräte (2) (iOS-Emulator und Safari)
Debuggen auf dem Emulator oder dem Gerät (3) (Android-Emulator und Chrome Browser)
Debuggen auf dem Emulator oder dem Gerät Demo Debuggen auf dem Emulator oder dem Gerät
Einführung Erweiterungen in PhoneGap/Cordova
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
Einführung Unterstützung für den Zugriff auf die Geräte-Hardware
Unterstützung für den Zugriff auf die Geräte-Hardware
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“
Unterstützung für den Zugriff auf die Geräte-Hardware (2)
Unterstützung für den Zugriff auf die Geräte-Hardware Demo Unterstützung für den Zugriff auf die Geräte-Hardware
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.
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.
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