#1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck...
-
Upload
berthold-schnell -
Category
Documents
-
view
106 -
download
2
Transcript of #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck...
![Page 1: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/1.jpg)
#1Martin Möllenbeck
Phonegap/CordovaPlattformübergreifende mobile
Anwendungen
Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor
Version 4.3 – 03.04.2014
![Page 2: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/2.jpg)
#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: [email protected], 0208 –
309952-0
![Page 3: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/3.jpg)
#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
![Page 4: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/4.jpg)
#4Martin Möllenbeck
Einführung Native Anwendung vs. Mobile Web-Anwendung vs. Hybride
Anwendungen
![Page 5: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/5.jpg)
#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).
![Page 6: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/6.jpg)
#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“>)
![Page 7: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/7.jpg)
#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
![Page 8: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/8.jpg)
#8Martin Möllenbeck
Einführung Architektur und Konzept von Phonegap/Cordova
![Page 9: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/9.jpg)
#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.
![Page 10: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/10.jpg)
#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
![Page 11: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/11.jpg)
#11Martin Möllenbeck
Architektur und Konzept von Phonegap/Cordova (3)
![Page 12: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/12.jpg)
#12Martin Möllenbeck
Einführung Installation von Cordova
![Page 13: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/13.jpg)
#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.
![Page 14: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/14.jpg)
#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
![Page 15: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/15.jpg)
#15Martin Möllenbeck
Einführung Die wichtigsten Befehle für Cordova
AUSDRUCKEN!!!
![Page 16: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/16.jpg)
#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
![Page 17: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/17.jpg)
#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.
![Page 18: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/18.jpg)
#18Martin Möllenbeck
Einführung Einfache Cordova Anwendung
![Page 19: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/19.jpg)
#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)
![Page 20: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/20.jpg)
#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“
![Page 21: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/21.jpg)
#21
Demo
Einfache Cordova Anwendung
![Page 22: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/22.jpg)
#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
![Page 23: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/23.jpg)
#23Martin Möllenbeck
Einführung Überblick Entwicklungsumgebungen
![Page 24: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/24.jpg)
#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
![Page 25: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/25.jpg)
#25Martin Möllenbeck
Einführung Testen im Emulator
![Page 26: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/26.jpg)
#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.
![Page 27: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/27.jpg)
#27Martin Möllenbeck
Testen im Emulator (2)
• Durch Eingabe von (im Terminal/cmd.exe):
>> cordova run android --emulator
• ... und ein wenig mehr Geduld.
![Page 28: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/28.jpg)
#28
Demo
Testen um Emulator
![Page 29: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/29.jpg)
#29Martin Möllenbeck
Einführung Testen auf Geräten
![Page 30: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/30.jpg)
#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!!
![Page 31: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/31.jpg)
#31
Demo
Testen auf dem Geräte
![Page 32: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/32.jpg)
#32Martin Möllenbeck
Einführung Debuggen auf dem Emulator oder dem Gerät
![Page 33: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/33.jpg)
#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.
![Page 34: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/34.jpg)
#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.
![Page 35: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/35.jpg)
#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.
![Page 36: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/36.jpg)
#36Martin Möllenbeck
Debuggen auf dem Emulator oder dem Geräte (2)
(iOS-Emulator und Safari)
![Page 37: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/37.jpg)
#37Martin Möllenbeck
Debuggen auf dem Emulator oder dem Gerät (3)
(Android-Emulator und Chrome Browser)
![Page 38: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/38.jpg)
#38
Demo
Debuggen auf dem Emulator oder dem Gerät
![Page 39: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/39.jpg)
#39Martin Möllenbeck
Einführung Erweiterungen in PhoneGap/Cordova
![Page 40: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/40.jpg)
#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
![Page 41: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/41.jpg)
#41Martin Möllenbeck
Einführung Unterstützung für den Zugriff auf die Geräte-Hardware
![Page 42: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/42.jpg)
#42Martin Möllenbeck
Unterstützung für den Zugriff auf die Geräte-Hardware
![Page 43: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/43.jpg)
#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“
![Page 44: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/44.jpg)
#44Martin Möllenbeck
Unterstützung für den Zugriff auf die Geräte-Hardware (2)
![Page 45: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/45.jpg)
#45
Demo
Unterstützung für den Zugriff auf die Geräte-Hardware
![Page 46: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/46.jpg)
#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.
![Page 47: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/47.jpg)
#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.
![Page 48: #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.](https://reader036.fdokument.com/reader036/viewer/2022062512/55204d7d49795902118cd7c1/html5/thumbnails/48.jpg)
#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: [email protected]