PhoneGap/Cordova - Plattformübergreifende mobile
Download
Report
Transcript PhoneGap/Cordova - Plattformübergreifende mobile
Phonegap/Cordova
Plattformübergreifende mobile Anwendungen
Martin Möllenbeck
Softwareentwickler, Softwarearchitekt, Trainer, Autor
Version
– 03.04.2014
Martin4.3
Möllenbeck
#1
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: [email protected], 0208 – 309952-0
Martin Möllenbeck
#2
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
Martin Möllenbeck
#3
Einführung
Native Anwendung vs. Mobile Web-Anwendung vs. Hybride
Anwendungen
Martin Möllenbeck
#4
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 MobilePlattform.
– Hohe Entwicklungszeit, da der Grad an Wiederverwendung gering
ist.
– Ohne Netzwerk zu verwenden ( hängt vom Anwendungsfall ab).
Martin Möllenbeck
#5
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 HardwareEigenschaften 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“>)
Martin Möllenbeck
#6
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
Martin Möllenbeck
#7
Einführung
Architektur und Konzept von Phonegap/Cordova
Martin Möllenbeck
#8
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.
Martin Möllenbeck
#9
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
Martin Möllenbeck
#10
Architektur und Konzept von Phonegap/Cordova (3)
Martin Möllenbeck
#11
Einführung
Installation von Cordova
Martin Möllenbeck
#12
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.
Martin Möllenbeck
#13
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
Martin Möllenbeck
#14
Einführung
Die wichtigsten Befehle für Cordova
AUSDRUCKEN!!!
Martin Möllenbeck
#15
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
Martin Möllenbeck
#16
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.
Martin Möllenbeck
#17
Einführung
Einfache Cordova Anwendung
Martin Möllenbeck
#18
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)
Martin Möllenbeck
#19
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“
Martin Möllenbeck
#20
Demo
Einfache Cordova Anwendung
#21
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
Martin Möllenbeck
#22
Einführung
Überblick Entwicklungsumgebungen
Martin Möllenbeck
#23
Ü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
Martin Möllenbeck
#24
Einführung
Testen im Emulator
Martin Möllenbeck
#25
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.
Martin Möllenbeck
#26
Testen im Emulator (2)
• Durch Eingabe von (im
Terminal/cmd.exe):
>> cordova run android --emulator
• ... und ein wenig mehr
Geduld.
Martin Möllenbeck
#27
Demo
Testen um Emulator
#28
Einführung
Testen auf Geräten
Martin Möllenbeck
#29
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 „BuildNummer“ 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!!
Martin Möllenbeck
#30
Demo
Testen auf dem Geräte
#31
Einführung
Debuggen auf dem Emulator oder dem Gerät
Martin Möllenbeck
#32
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.
Martin Möllenbeck
#33
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.com
2. 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.
Martin Möllenbeck
#34
Debuggen auf dem Emulator oder dem Gerät (3)
• Weitere Techniken für das Debugging von Apps:
– https://github.com/phonegap/phonegap/wiki/Debugging-inPhoneGap
• 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/schulun
g/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.
Martin Möllenbeck
#35
Debuggen auf dem Emulator oder dem Geräte (2)
(iOS-Emulator und Safari)
Martin Möllenbeck
#36
Debuggen auf dem Emulator oder dem Gerät (3)
(Android-Emulator und Chrome Browser)
Martin Möllenbeck
#37
Demo
Debuggen auf dem Emulator oder dem Gerät
#38
Einführung
Erweiterungen in PhoneGap/Cordova
Martin Möllenbeck
#39
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.htm
l#Contributing%20Plugins
Martin Möllenbeck
#40
Einführung
Unterstützung für den Zugriff auf die Geräte-Hardware
Martin Möllenbeck
#41
Unterstützung für den Zugriff auf die Geräte-Hardware
Martin Möllenbeck
#42
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“
Martin Möllenbeck
#43
Unterstützung für den Zugriff auf die Geräte-Hardware (2)
Martin Möllenbeck
#44
Demo
Unterstützung für den Zugriff auf die Geräte-Hardware
#45
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.
Martin Möllenbeck
#46
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.
Martin Möllenbeck
#47
Wie geht es weiter? Fragen???
• Und es geht weiter
– PhoneGap mit Angular.js
– Beispiel für Offline-First-Ansatz
• Fragen? Jetzt oder später:
[email protected]
Martin Möllenbeck
#48