MIT3 Cross-Platform- Development · Cordova vs. PhoneGap Setzt auf Cordova auf Kommerzielle...
Transcript of MIT3 Cross-Platform- Development · Cordova vs. PhoneGap Setzt auf Cordova auf Kommerzielle...
![Page 1: MIT3 Cross-Platform- Development · Cordova vs. PhoneGap Setzt auf Cordova auf Kommerzielle Services Marke von Adobe gekauft Open Source Kern Plugin-Ökosystem Verwaltungs-Scripte](https://reader033.fdocument.pub/reader033/viewer/2022043013/5facd73c7dcb3349c97eac55/html5/thumbnails/1.jpg)
MIT3MIT3Cross-Platform-Cross-Platform-DevelopmentDevelopment
MIT3MIT3Cross-Platform-Cross-Platform-DevelopmentDevelopment
Claudius Coenen
![Page 2: MIT3 Cross-Platform- Development · Cordova vs. PhoneGap Setzt auf Cordova auf Kommerzielle Services Marke von Adobe gekauft Open Source Kern Plugin-Ökosystem Verwaltungs-Scripte](https://reader033.fdocument.pub/reader033/viewer/2022043013/5facd73c7dcb3349c97eac55/html5/thumbnails/2.jpg)
BUT... WHY?
![Page 3: MIT3 Cross-Platform- Development · Cordova vs. PhoneGap Setzt auf Cordova auf Kommerzielle Services Marke von Adobe gekauft Open Source Kern Plugin-Ökosystem Verwaltungs-Scripte](https://reader033.fdocument.pub/reader033/viewer/2022043013/5facd73c7dcb3349c97eac55/html5/thumbnails/3.jpg)
Marktanteile Mobil-Plattformen
84,7%
11,7%2,5%
AndroidiOSWindows PhoneBlackberryAndere
echt wenig
Neu-Verkauf Q2/2014,siehe heise.de/-2293237
![Page 4: MIT3 Cross-Platform- Development · Cordova vs. PhoneGap Setzt auf Cordova auf Kommerzielle Services Marke von Adobe gekauft Open Source Kern Plugin-Ökosystem Verwaltungs-Scripte](https://reader033.fdocument.pub/reader033/viewer/2022043013/5facd73c7dcb3349c97eac55/html5/thumbnails/4.jpg)
Andere Entwicklungsmöglichkeiten
Cordova/PhoneGap (HTML; iOS, Android, WP, …) Xamarin Platform (C#; iOS, Android + Windows Phone) RubyMotion (Ruby; iOS + Android) Appcelerator Titanium (HTML; iOS, Android, WP, …) RhoMobile (Ruby+HTML ; iOS, Android, WP) … weitere
![Page 5: MIT3 Cross-Platform- Development · Cordova vs. PhoneGap Setzt auf Cordova auf Kommerzielle Services Marke von Adobe gekauft Open Source Kern Plugin-Ökosystem Verwaltungs-Scripte](https://reader033.fdocument.pub/reader033/viewer/2022043013/5facd73c7dcb3349c97eac55/html5/thumbnails/5.jpg)
Cordova vs. PhoneGap
Setzt auf Cordova auf Kommerzielle Services Marke von Adobe gekauft
Open Source Kern Plugin-Ökosystem Verwaltungs-Scripte Projekt der Apache Foundation
![Page 6: MIT3 Cross-Platform- Development · Cordova vs. PhoneGap Setzt auf Cordova auf Kommerzielle Services Marke von Adobe gekauft Open Source Kern Plugin-Ökosystem Verwaltungs-Scripte](https://reader033.fdocument.pub/reader033/viewer/2022043013/5facd73c7dcb3349c97eac55/html5/thumbnails/6.jpg)
Cordova Arbeitsweise
Jede Plattform hat eine Browser-Komponente(„WebView“ o.ä.)
Diese füllt den gesamten Bildschirm und lädt eure HTML-Seite
Cordova vermittelt zwischen geräteunabhängigen JS-Code und der geräteabhängigen nativen API
Ermöglicht Zugriff auf Hardware oder Daten, die sonst nicht erreichbar wären
Erweiterbar mit Plugins Keine Vorgabe, wie ihr mit HTML umzugehen habt
![Page 7: MIT3 Cross-Platform- Development · Cordova vs. PhoneGap Setzt auf Cordova auf Kommerzielle Services Marke von Adobe gekauft Open Source Kern Plugin-Ökosystem Verwaltungs-Scripte](https://reader033.fdocument.pub/reader033/viewer/2022043013/5facd73c7dcb3349c97eac55/html5/thumbnails/7.jpg)
JavaScript-Aufruf JS Nativ
Betriebs-system
Cordova
„Middleware“
Euer Code
Eure App
![Page 8: MIT3 Cross-Platform- Development · Cordova vs. PhoneGap Setzt auf Cordova auf Kommerzielle Services Marke von Adobe gekauft Open Source Kern Plugin-Ökosystem Verwaltungs-Scripte](https://reader033.fdocument.pub/reader033/viewer/2022043013/5facd73c7dcb3349c97eac55/html5/thumbnails/8.jpg)
JavaScript-Aufruf JS Nativ
Cordova
JavaScript-Aufruf JS Nativ
Cordova
Bleibt gleich Plattformabhängig
![Page 9: MIT3 Cross-Platform- Development · Cordova vs. PhoneGap Setzt auf Cordova auf Kommerzielle Services Marke von Adobe gekauft Open Source Kern Plugin-Ökosystem Verwaltungs-Scripte](https://reader033.fdocument.pub/reader033/viewer/2022043013/5facd73c7dcb3349c97eac55/html5/thumbnails/9.jpg)
Voraussetzungen (als Entwickler)
Entwicklungsumgebung für das Zielsystem(z.B. Xcode oder Android SDK+Java SDK)
Node.js(führt die cordova-Scripte aus)
npm(gehört zu node, Paketverwaltung)
cordova Git
Folgerung: Auch mitCordova kann man unter Windows nicht für iOS entwickeln!
![Page 10: MIT3 Cross-Platform- Development · Cordova vs. PhoneGap Setzt auf Cordova auf Kommerzielle Services Marke von Adobe gekauft Open Source Kern Plugin-Ökosystem Verwaltungs-Scripte](https://reader033.fdocument.pub/reader033/viewer/2022043013/5facd73c7dcb3349c97eac55/html5/thumbnails/10.jpg)
Projekt anlegen
Befehl (für die Kommandozeile / das Terminal)cordova create $ordner $identifier $name
z.B.cordova create todo de.claudiuscoenen.todo Tooodoo
Ergebnis:
Pro-Tipp: hier nur Buchstaben, Zahlen und Punkte
![Page 11: MIT3 Cross-Platform- Development · Cordova vs. PhoneGap Setzt auf Cordova auf Kommerzielle Services Marke von Adobe gekauft Open Source Kern Plugin-Ökosystem Verwaltungs-Scripte](https://reader033.fdocument.pub/reader033/viewer/2022043013/5facd73c7dcb3349c97eac55/html5/thumbnails/11.jpg)
Ordner, den wir gerade erstellt haben
Hier entwickelt ihr eure Anwendung(tobt euch aus!)
Cordova verwaltet diese Ordner
Nicht abgebildet: in „todo“ liegteine config.xml, die viele Über-greifende Einstellungen enthält
![Page 12: MIT3 Cross-Platform- Development · Cordova vs. PhoneGap Setzt auf Cordova auf Kommerzielle Services Marke von Adobe gekauft Open Source Kern Plugin-Ökosystem Verwaltungs-Scripte](https://reader033.fdocument.pub/reader033/viewer/2022043013/5facd73c7dcb3349c97eac55/html5/thumbnails/12.jpg)
Und jetzt?
Erstmal eine Plattform festlegen (oder auch mehrere)cordova platform add android (bzw. ios)
Sinnvoll: Console-Plugin (erleichtert debugging)cordova plugin add org.apache.cordova.console
Ausprobieren!cordova run androidbzw.cordova run ios
![Page 13: MIT3 Cross-Platform- Development · Cordova vs. PhoneGap Setzt auf Cordova auf Kommerzielle Services Marke von Adobe gekauft Open Source Kern Plugin-Ökosystem Verwaltungs-Scripte](https://reader033.fdocument.pub/reader033/viewer/2022043013/5facd73c7dcb3349c97eac55/html5/thumbnails/13.jpg)
Android Tipps
Console.log (und ähnliche Ausgaben) landen in logcatadb logcat -s CordovaLog
Für den „finalen“ build braucht ihr ALLE folgenden Tools im Pfad:java, ant, zipalign, keytool, adb, node, npm, cordova
![Page 14: MIT3 Cross-Platform- Development · Cordova vs. PhoneGap Setzt auf Cordova auf Kommerzielle Services Marke von Adobe gekauft Open Source Kern Plugin-Ökosystem Verwaltungs-Scripte](https://reader033.fdocument.pub/reader033/viewer/2022043013/5facd73c7dcb3349c97eac55/html5/thumbnails/14.jpg)
General Tips
Mit Chrome (android) oder Safari (iOS) kann man laufende Apps inspecten/debuggen:● Chrome: Adresse chrome://inspect/ aufrufen, Gerät auswählen● Safari: Einmalig In den Einstellungen
den Haken „Entwickler“-Menu setzen,Danach jederzeit einfach app aus dem Menü wählen.
![Page 15: MIT3 Cross-Platform- Development · Cordova vs. PhoneGap Setzt auf Cordova auf Kommerzielle Services Marke von Adobe gekauft Open Source Kern Plugin-Ökosystem Verwaltungs-Scripte](https://reader033.fdocument.pub/reader033/viewer/2022043013/5facd73c7dcb3349c97eac55/html5/thumbnails/15.jpg)
Weiterführendes
Cordova Dokumentationhttp://cordova.apache.org/docs/en/4.0.0/
Plugin Directory (Achtung! Vieles veraltet, ungepflegt oder kaputt)http://plugins.cordova.io/