Weitere ähnliche Inhalte Ähnlich wie Hdc2012 cordova-präsi (20) Hdc2012 cordova-präsi1. Ein
Code
=
iOS,
Android,
BB,
WP7
Marcus
Ross
(Trainer/Berater)
@zahlenhelfer
3. Das
Problem
• Chef:
„Wir
brauchen
eine
App“
• IT:
„Wow,
ja
gerne,
welche
PlaHorm?“
• Chef:
„Wieso
PlaHorm
–
Mobil!“
• IT:
„Ja,
aber
WP7,
iOS,
android,
BB?“
• Chef:
„Na
alle!
Oder
nicht?“
• IT:
„OK
–
Problem!“
4. Lösung (3 Teile)
• X-Plattform UI -> jQueryMobile
• ein Sourcecode -> JavaScript
• native App -> Apache Cordova
6. jQueryMobile Bspl.
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/
jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Hallo HDC 2012</h1>
</div>
<div data-role="content">
<p>Apache Cordova Track</p>
</div>
</div>
</body>
http://jsfiddle.net/Lwryv/
8. jQueryMobile UI
<div
data-‐role="fieldcontain“>
<label
for="name">Text
Input:</label>
<input
type="text"
name="name“
id="name“
value=""
/>
</div>
9. Alternativen?
• iUi (iPhone-Mimikri)
http://www.iui-js.org/
• Bbui.js (Blackberry-Mimikri)
http://www.github.com/blackberry/bbUi.js
• SenchaTouch (Touch-Framework)
http://www.sencha.com
10. Lösung (3 Teile)
• X-Plattform UI -> jQueryMobile
• Ein Sourcecode -> JavaScript
• native App -> Apache Cordova
11. Logik mit JavaScript
• Client-Site-Rendering (Templates)
• Seitenlogik (Routing/Hyperlinks/Forms)
• Filter (Datenfilter)
• Kommunikation mit Servern (XHR)
oder auch kompakt
• Single Page Apps
12. MVC/MVR´s
• Backbone.js
• AngularJS
• Ember.js
• und noch viele mehr!
Aber welches nehme ich nun?
13. Die Rettung
• Projekt für MVx-Frameworks
• ToDo-Liste wurde implementiert
• http://addyosmani.github.com/todomvc/
15. Lösung (3 Teile)
• X-Plattform UI -> jQueryMobile
• Ein Sourcecode -> JavaScript / HTML5
• native App -> Apache Cordova
16. Kurzer Abriss der Geschichte
• PhoneGap
erstellt
durch
die
Firma
Nitobi
• Nach
Release
V1.0
kauf
durch
Adobe
• Übertragung
des
IP
an
die
ASF
• Jetzt
ist
es
Apache
Cordova
17. Mind the (Phone)Gap – 60 Sek.
• Was macht Apache Cordova?
Packager/JS-Bridge!
• www-‐Verzeichnis
für
HTML5
/
JS
/
CSS3
• Was ist der Tick?
native WebView!
21. Einfach mal machen...
...!
<script type="text/javascript" charset="utf-8“>!
!
document.addEventListener("deviceready", onDeviceReady, false);!
!!
function onDeviceReady() {!
var element = document.getElementById('deviceEigenschaften');!
! !'Geräte Name: ' + device.name + '<br />' + !
! !'Geräte Cordova: ' + device.cordova + '<br />' + !
! !'Geräte Platform: ' + device.platform!
}!
</script>!
...!
23. oder auch...
...!
<script type="text/javascript" charset="utf-8“>!
!
document.addEventListener("deviceready", onDeviceReady, false);!
!!
function onDeviceReady() {!
var element = document.getElementById('deviceEigenschaften');!
! !'Geräte Name: ' + device.name + '<br />' + !
! !'Geräte Cordova: ' + device.cordova + '<br />' + !
! !'Geräte Platform: ' + device.platform!
}!
</script>!
...!
24. Cordova 101 (iOS)
• Project
erstellen
$ ./create
/path/to/HDCCordovaProject
de.zhapps.hdc2012
HDC2012Project
26. Plugins 1/2
• Zugriff
auf
Hardware
/
Funkionen
• Zentral
zu
erreichen
unter:
hmps://github.com/phonegap/phonegap-‐plugins.git
28. ja, aber Plattform XYZ?...
• Build
von
Projekten
auch
per
Cloud
hmp://build.phonegap.com
29. Mehr Info bitte...
• Dokumentaion
der
API
unter:
hmp://docs.phonegap.com
• auch
in
Deutsch
durch
den
Referenten
J
30. FAQ
• Performance!?
-‐>
Ja,
aber...
• jQueryMobile
– $.mobile.ajaxEnabled
=
false;
– $.mobile.linkBindingEnabled
=
false;
• Nutzen
von
MVC
-‐>
manchmal
muss
es
sein!
• Datenbankproblem
-‐>
WebSQL/Storage
31. Fazit
• Apache
Cordova
stellt
eine
Lösung
dar
• Erweiterbar
durch
Plugins
• OpenSource,
daher
keine
SLA´s
• Webdeveloper
können
nun
auch
Apps!
32. Danke
Habt
Ihr
noch
Fragen?
Alternaiv
auch
gerne
unter:
-‐ @zahlenhelfer
-‐ marcus.ross@zahlenhelfer.de