Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

#1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014.

Ähnliche Präsentationen


Präsentation zum Thema: "#1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014."—  Präsentation transkript:

1 #1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 –

2 #2 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) –Kontakt: 0208 –

3 #3 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

4 #4 Einführung Native Anwendung vs. Mobile Web-Anwendung vs. Hybride Anwendungen

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

6 #6 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 )

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

8 #8 Einführung Architektur und Konzept von Phonegap/Cordova

9 #9 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.

10 #10 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

11 #11 Architektur und Konzept von Phonegap/Cordova (3)

12 #12 Einführung Installation von Cordova

13 #13 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.

14 #14 Installation von Cordova (2) Installation am Beispiel Android unter Windows: –Installation Java JDK 6 oder 7: JAVA_HOME setzen PATH um %JAVA_HOME% erweitern –Installation Android SDK ADT Bundle laden: PATH erweitern: –D:\AndroidDev\android-sdk\platform-tools;D:\AndroidDev\android-sdk\tools –Ant (Make für Java) laden und installieren: Download: ANT_HOME setzen PATH um ANT_HOME erweitern –Node.js installieren: Download: NODE und NPM in PATH aufnehmen –PhoneGap/Cordova installieren: npm install –g cordova

15 #15 Einführung Die wichtigsten Befehle für Cordova AUSDRUCKEN!!!

16 #16 Die wichtigsten Befehle für Cordova (1) Anwendung erstellen: –Befehl: cordova create –Beispiel: corodva create 01_HelloWorld de.meineurl.helloworld HelloWorld Plattform zum Projekt hinzufügen: –Befehl: corova platform add –Beispiel: cordova platform add android Plattform anzeigen lassen: –Befehl: cordova platform list Plugin zum Projekt hinzfügen: –Befehl: cordova plugin add –Beispiel: cordova plugin add org.apache.cordova.battery-status Installierte Plugins anzeigen –Befehl: cordova plugin list App erstellen: –Befehl: cordova build –Beispiel: cordova build android

17 #17 Die wichtigsten Befehle für Cordova (2) App im Emulator ausführen: –Befehl: cordova run --emulator –Beispiel: cordova run android --emulator App auf dem Gerät ausführen: –Befehl: cordova run --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.

18 #18 Einführung Einfache Cordova Anwendung

19 #19 Einfach Cordova Anwendung (1) Erstellen der Anwendung HelloWorld –cordova create –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)

20 #20 Einfach Cordova Anwendung (2) Um die Anwendung verwenden zu können, ist die entsprechende Zielplattform hinzuzufügen: –cordova platform add –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 #21 Demo Einfache Cordova Anwendung

22 #22 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 inder Datei config.xml festgelegt config.xml: –Konfiguration der Anwendung

23 #23 Einführung Überblick Entwicklungsumgebungen

24 #24 Ü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

25 #25 Einführung Testen im Emulator

26 #26 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.

27 #27 Testen im Emulator (2) Durch Eingabe von (im Terminal/cmd.exe): >> cordova run android --emulator... und ein wenig mehr Geduld.

28 #28 Demo Testen um Emulator

29 #29 Einführung Testen auf Geräten

30 #30 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: Durch Eingabe von (im Terminal/cmd.exe): –cordova run android --device... und deutlich weniger Geduld als beim Emulator!!

31 #31 Demo Testen auf dem Geräte

32 #32 Einführung Debuggen auf dem Emulator oder dem Gerät

33 #33 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.

34 #34 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: 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.

35 #35 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/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.

36 #36 Debuggen auf dem Emulator oder dem Geräte (2) (iOS-Emulator und Safari)

37 #37 Debuggen auf dem Emulator oder dem Gerät (3) ( Android-Emulator und Chrome Browser)

38 #38 Demo Debuggen auf dem Emulator oder dem Gerät

39 #39 Einführung Erweiterungen in PhoneGap/Cordova

40 #40 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

41 #41 Einführung Unterstützung für den Zugriff auf die Geräte-Hardware

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

43 #43 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

44 #44 Unterstützung für den Zugriff auf die Geräte-Hardware (2)

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

46 #46 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.

47 #47 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.

48 #48 Wie geht es weiter? Fragen??? Und es geht weiter –PhoneGap mit Angular.js –Beispiel für Offline-First-Ansatz Fragen? Jetzt oder später:


Herunterladen ppt "#1 Phonegap/Cordova Plattformübergreifende mobile Anwendungen Martin Möllenbeck Softwareentwickler, Softwarearchitekt, Trainer, Autor Version 4.3 – 03.04.2014."

Ähnliche Präsentationen


Google-Anzeigen