#1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck...

#1Martin Möllenbeck

Phonegap/CordovaPlattformü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: [email protected], 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. Hybride

Anwendungen


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).



• 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“>)



• 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


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.



• 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


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)



• 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



• 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.


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


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!!

#31

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.



• 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.



• 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)



(Android-Emulator und Chrome Browser)

#38

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“

#45

Demo

Unterstützung für den Zugriff auf die Geräte-Hardware



• 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.



• 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: [email protected]

#1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck...

Documents

Transcript of #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck...