SlideShare ist ein Scribd-Unternehmen logo
Ein	
  Code	
  =	
  iOS,	
  Android,	
  BB,	
  
                     WP7	
  
               Marcus	
  Ross	
  
             (Trainer/Berater)	
  
              @zahlenhelfer	
  
Agenda

•  Das Problem

•  Die Lösung (3 Teile)
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!“	
  
Lösung (3 Teile)

•  X-Plattform UI -> jQueryMobile

•  ein Sourcecode -> JavaScript

•  native App -> Apache Cordova
jQueryMobile

•  Touch-Optimiertes Framework für eine
   Vielzahl von Geräten/Browsern

•  Eigenes UI-Paradigma, nicht nativ!

•  Leicht, da mit HTML5 Attributen
   („data-xxx“)
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/
...das kommt raus.
jQueryMobile UI

      <div	
  data-­‐role="fieldcontain“>	
  
      	
  	
  	
  	
  <label	
  for="name">Text	
  Input:</label>	
  
      	
  	
  	
  	
  <input	
  	
  type="text"	
  	
  
                                 	
  name="name“	
  
                                 	
  id="name“	
  
                                 	
  value=""	
  />	
  
      	
  </div>	
  	
  
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
Lösung (3 Teile)

•  X-Plattform UI -> jQueryMobile

•  Ein Sourcecode -> JavaScript

•  native App -> Apache Cordova
Logik mit JavaScript

•    Client-Site-Rendering (Templates)
•    Seitenlogik (Routing/Hyperlinks/Forms)
•    Filter (Datenfilter)
•    Kommunikation mit Servern (XHR)

oder auch kompakt
•  Single Page Apps
MVC/MVR´s

•    Backbone.js
•    AngularJS
•    Ember.js
•    und noch viele mehr!

Aber welches nehme ich nun?
Die Rettung



•  Projekt für MVx-Frameworks
•  ToDo-Liste wurde implementiert

•  http://addyosmani.github.com/todomvc/
Lösung (3 Teile)

•  X-Plattform UI -> jQueryMobile

•  Ein Sourcecode -> JavaScript / HTML5

•  native App -> Apache Cordova
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	
  
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!
Architektur
Apache Cordova

•  Unterstützt	
  die	
  PlaHormen:	
  
Zugriff per API

Accelerometer	
     Events	
  
Camera	
            File	
  
Capture	
           Geolocaion	
  
Compass	
           Media	
  
Connecion	
         Noificaion	
  
Contacts	
          Storage	
  
Device	
            *Plugins	
  
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>!
...!
...das kommt raus.
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>!
...!
Cordova 101 (iOS)

•  Project	
  erstellen	
  
   $ ./create
          /path/to/HDCCordovaProject
          de.zhapps.hdc2012
          HDC2012Project
   	
  
Aber Debugging?

•  hmp://debug.phonegap.com	
  

•  npm	
  -­‐g	
  install	
  weinre	
  

•  Plugin	
  	
  
       hmps://github.com/phonegap/phonegap-­‐plugins	
  
	
  
Plugins 1/2

•  Zugriff	
  auf	
  Hardware	
  /	
  Funkionen	
  

•  Zentral	
  zu	
  erreichen	
  unter:	
  
   hmps://github.com/phonegap/phonegap-­‐plugins.git	
  
Plugins 2/2

-­‐  Barcodescanner	
  (iOS,android,BB)	
  

-­‐  Push-­‐Noificaion	
  (iOS,	
  android)	
  

-­‐  AugmentedReality	
  durch	
  WikiTude	
  
     (iOS,android)	
  
ja, aber Plattform XYZ?...

•  Build	
  von	
  Projekten	
  auch	
  per	
  Cloud	
  
   hmp://build.phonegap.com	
  
Mehr Info bitte...

•  Dokumentaion	
  der	
  API	
  unter:	
  
   hmp://docs.phonegap.com	
  

•  auch	
  in	
  Deutsch	
  durch	
  
   den	
  Referenten	
  J	
  
FAQ

•  Performance!?	
  -­‐>	
  Ja,	
  aber...	
  

•  jQueryMobile	
  
    –  $.mobile.ajaxEnabled	
  =	
  false;	
  
    –  $.mobile.linkBindingEnabled	
  =	
  false;	
  
	
  
•  Nutzen	
  von	
  MVC	
  -­‐>	
  manchmal	
  muss	
  es	
  sein!	
  
	
  
•  Datenbankproblem	
  -­‐>	
  WebSQL/Storage	
  
Fazit

•  Apache	
  Cordova	
  stellt	
  eine	
  Lösung	
  dar	
  
•  Erweiterbar	
  durch	
  Plugins	
  
•  OpenSource,	
  daher	
  keine	
  SLA´s	
  

•  Webdeveloper	
  können	
  nun	
  auch	
  Apps!	
  
Danke

Habt	
  Ihr	
  noch	
  Fragen?	
  
	
  
Alternaiv	
  auch	
  gerne	
  unter:	
  
-­‐  @zahlenhelfer	
  
-­‐  marcus.ross@zahlenhelfer.de	
  

Weitere ähnliche Inhalte

Was ist angesagt?

Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from Scratch
Stefan Fröhlich
 
WordPress Multisite
WordPress MultisiteWordPress Multisite
WordPress Multisite
Walter Ebert
 
Fix & fertig: Best Practises für "XPages-Migranten"
Fix & fertig: Best Practises für "XPages-Migranten"Fix & fertig: Best Practises für "XPages-Migranten"
Fix & fertig: Best Practises für "XPages-Migranten"
Oliver Busse
 
Webapplikationen mit Node.js
Webapplikationen mit Node.jsWebapplikationen mit Node.js
Webapplikationen mit Node.js
Sebastian Springer
 
OSMC 2014: Icinga Web 2 kann mehr | Thomas Gelf
OSMC 2014: Icinga Web 2 kann mehr | Thomas GelfOSMC 2014: Icinga Web 2 kann mehr | Thomas Gelf
OSMC 2014: Icinga Web 2 kann mehr | Thomas Gelf
NETWAYS
 
Workshop Vue js
Workshop Vue jsWorkshop Vue js
Workshop Vue js
Hendrik Lösch
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
kkramhoeft
 
Websemantik: Die nächsten Schritte
Websemantik: Die nächsten SchritteWebsemantik: Die nächsten Schritte
Websemantik: Die nächsten Schritte
Michael Jendryschik
 
PrettyFaces: RESTful URLs für JSF
PrettyFaces: RESTful URLs für JSFPrettyFaces: RESTful URLs für JSF
PrettyFaces: RESTful URLs für JSF
Christian Kaltepoth
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsUlrich Schmidt
 
WP-CLI - Das Kommandozeilen Interface für Wordpress
WP-CLI - Das Kommandozeilen Interface für WordpressWP-CLI - Das Kommandozeilen Interface für Wordpress
WP-CLI - Das Kommandozeilen Interface für Wordpress
frankstaude
 
Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Taugt AngularJS wirklich was? Erfahrungsbericht und AusblickTaugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Philipp Burgmer
 
JsUnconf 2014
JsUnconf 2014JsUnconf 2014
JsUnconf 2014
emrox
 
1&1 Frontend Workshop II
1&1 Frontend Workshop II1&1 Frontend Workshop II
1&1 Frontend Workshop II
Nico Steiner
 
Webpack
WebpackWebpack
Wie Software-Generatoren die Welt verändern können - Herbstcampus12
Wie Software-Generatoren die Welt verändern können - Herbstcampus12Wie Software-Generatoren die Welt verändern können - Herbstcampus12
Wie Software-Generatoren die Welt verändern können - Herbstcampus12Stephan Hochdörfer
 
Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007
jan_mindmatters
 
Nooku, Molajo & Co - Joomla! Distributionen. Oder Forks.
Nooku, Molajo & Co - Joomla! Distributionen. Oder Forks.Nooku, Molajo & Co - Joomla! Distributionen. Oder Forks.
Nooku, Molajo & Co - Joomla! Distributionen. Oder Forks.
David Jardin
 

Was ist angesagt? (19)

Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from Scratch
 
WordPress Multisite
WordPress MultisiteWordPress Multisite
WordPress Multisite
 
Fix & fertig: Best Practises für "XPages-Migranten"
Fix & fertig: Best Practises für "XPages-Migranten"Fix & fertig: Best Practises für "XPages-Migranten"
Fix & fertig: Best Practises für "XPages-Migranten"
 
Webapplikationen mit Node.js
Webapplikationen mit Node.jsWebapplikationen mit Node.js
Webapplikationen mit Node.js
 
OSMC 2014: Icinga Web 2 kann mehr | Thomas Gelf
OSMC 2014: Icinga Web 2 kann mehr | Thomas GelfOSMC 2014: Icinga Web 2 kann mehr | Thomas Gelf
OSMC 2014: Icinga Web 2 kann mehr | Thomas Gelf
 
Workshop Vue js
Workshop Vue jsWorkshop Vue js
Workshop Vue js
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
Websemantik: Die nächsten Schritte
Websemantik: Die nächsten SchritteWebsemantik: Die nächsten Schritte
Websemantik: Die nächsten Schritte
 
PrettyFaces: RESTful URLs für JSF
PrettyFaces: RESTful URLs für JSFPrettyFaces: RESTful URLs für JSF
PrettyFaces: RESTful URLs für JSF
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
 
WP-CLI - Das Kommandozeilen Interface für Wordpress
WP-CLI - Das Kommandozeilen Interface für WordpressWP-CLI - Das Kommandozeilen Interface für Wordpress
WP-CLI - Das Kommandozeilen Interface für Wordpress
 
Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Taugt AngularJS wirklich was? Erfahrungsbericht und AusblickTaugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
Taugt AngularJS wirklich was? Erfahrungsbericht und Ausblick
 
JsUnconf 2014
JsUnconf 2014JsUnconf 2014
JsUnconf 2014
 
1&1 Frontend Workshop II
1&1 Frontend Workshop II1&1 Frontend Workshop II
1&1 Frontend Workshop II
 
Webpack
WebpackWebpack
Webpack
 
PHP Sucks?!
PHP Sucks?!PHP Sucks?!
PHP Sucks?!
 
Wie Software-Generatoren die Welt verändern können - Herbstcampus12
Wie Software-Generatoren die Welt verändern können - Herbstcampus12Wie Software-Generatoren die Welt verändern können - Herbstcampus12
Wie Software-Generatoren die Welt verändern können - Herbstcampus12
 
Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007
 
Nooku, Molajo & Co - Joomla! Distributionen. Oder Forks.
Nooku, Molajo & Co - Joomla! Distributionen. Oder Forks.Nooku, Molajo & Co - Joomla! Distributionen. Oder Forks.
Nooku, Molajo & Co - Joomla! Distributionen. Oder Forks.
 

Andere mochten auch

Eine Website in einer Stunde mit TYPO3 bauen, Gernot Ploiner
Eine Website in einer Stunde mit TYPO3 bauen, Gernot PloinerEine Website in einer Stunde mit TYPO3 bauen, Gernot Ploiner
Eine Website in einer Stunde mit TYPO3 bauen, Gernot PloinerDeveloperConference
 
Cinematica
CinematicaCinematica
Leichtgewichtige API-Dokumentation – Ein Paradoxon?
Leichtgewichtige API-Dokumentation – Ein Paradoxon?Leichtgewichtige API-Dokumentation – Ein Paradoxon?
Leichtgewichtige API-Dokumentation – Ein Paradoxon?
DeveloperConference
 
Eine Website in einer Stunde mit TYPO3 bauen
Eine Website in einer Stunde mit TYPO3 bauenEine Website in einer Stunde mit TYPO3 bauen
Eine Website in einer Stunde mit TYPO3 bauen
DeveloperConference
 
Keynote: O PHP, Where Art Thou?
Keynote: O PHP, Where Art Thou?Keynote: O PHP, Where Art Thou?
Keynote: O PHP, Where Art Thou?
DeveloperConference
 
Dr. Florian Krause - Der Kunde im Fokus: Personalisierte Aussteuerung von Inh...
Dr. Florian Krause - Der Kunde im Fokus: Personalisierte Aussteuerung von Inh...Dr. Florian Krause - Der Kunde im Fokus: Personalisierte Aussteuerung von Inh...
Dr. Florian Krause - Der Kunde im Fokus: Personalisierte Aussteuerung von Inh...
AboutYouGmbH
 
ABOUT YOU komm an Bord
ABOUT YOU komm an BordABOUT YOU komm an Bord
ABOUT YOU komm an Bord
AboutYouGmbH
 
Survival of the fittest - Alexander Jäger
Survival of the fittest - Alexander JägerSurvival of the fittest - Alexander Jäger
Survival of the fittest - Alexander JägerDeveloperConference
 

Andere mochten auch (9)

Eine Website in einer Stunde mit TYPO3 bauen, Gernot Ploiner
Eine Website in einer Stunde mit TYPO3 bauen, Gernot PloinerEine Website in einer Stunde mit TYPO3 bauen, Gernot Ploiner
Eine Website in einer Stunde mit TYPO3 bauen, Gernot Ploiner
 
Cinematica
CinematicaCinematica
Cinematica
 
Leichtgewichtige API-Dokumentation – Ein Paradoxon?
Leichtgewichtige API-Dokumentation – Ein Paradoxon?Leichtgewichtige API-Dokumentation – Ein Paradoxon?
Leichtgewichtige API-Dokumentation – Ein Paradoxon?
 
Ruby on Rails
Ruby on RailsRuby on Rails
Ruby on Rails
 
Eine Website in einer Stunde mit TYPO3 bauen
Eine Website in einer Stunde mit TYPO3 bauenEine Website in einer Stunde mit TYPO3 bauen
Eine Website in einer Stunde mit TYPO3 bauen
 
Keynote: O PHP, Where Art Thou?
Keynote: O PHP, Where Art Thou?Keynote: O PHP, Where Art Thou?
Keynote: O PHP, Where Art Thou?
 
Dr. Florian Krause - Der Kunde im Fokus: Personalisierte Aussteuerung von Inh...
Dr. Florian Krause - Der Kunde im Fokus: Personalisierte Aussteuerung von Inh...Dr. Florian Krause - Der Kunde im Fokus: Personalisierte Aussteuerung von Inh...
Dr. Florian Krause - Der Kunde im Fokus: Personalisierte Aussteuerung von Inh...
 
ABOUT YOU komm an Bord
ABOUT YOU komm an BordABOUT YOU komm an Bord
ABOUT YOU komm an Bord
 
Survival of the fittest - Alexander Jäger
Survival of the fittest - Alexander JägerSurvival of the fittest - Alexander Jäger
Survival of the fittest - Alexander Jäger
 

Ähnlich wie Hdc2012 cordova-präsi

German: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptGerman: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit Javascript
Ralf Schwoebel
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft AG
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
Stefan Kolb
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Dominik Helleberg
 
Backend-Services mit Rust
Backend-Services mit RustBackend-Services mit Rust
Backend-Services mit Rust
Jens Siebert
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
Jonathan Weiß
 
Mit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & AndroidMit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & Android
Björn Wibben
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
Indiginox
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Gregor Biswanger
 
Microservices mit Rust
Microservices mit RustMicroservices mit Rust
Microservices mit Rust
Jens Siebert
 
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT Group
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Benjamin Schmid
 
Frontend Development für Backend Developer
Frontend Development für Backend DeveloperFrontend Development für Backend Developer
Frontend Development für Backend Developer
Christoph Hautzinger
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenMayflower GmbH
 
Einführung in die webOS Programmierung
Einführung in die webOS ProgrammierungEinführung in die webOS Programmierung
Einführung in die webOS Programmierung
Markus Leutwyler
 
Rhomobile
RhomobileRhomobile
RhomobileJan Ow
 
Node.js
Node.jsNode.js
Android Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickelnAndroid Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickeln
André Krämer
 

Ähnlich wie Hdc2012 cordova-präsi (20)

German: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptGerman: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit Javascript
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011
 
Backend-Services mit Rust
Backend-Services mit RustBackend-Services mit Rust
Backend-Services mit Rust
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
Mit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & AndroidMit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & Android
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
Microservices mit Rust
Microservices mit RustMicroservices mit Rust
Microservices mit Rust
 
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
 
Frontend Development für Backend Developer
Frontend Development für Backend DeveloperFrontend Development für Backend Developer
Frontend Development für Backend Developer
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 
Einführung in die webOS Programmierung
Einführung in die webOS ProgrammierungEinführung in die webOS Programmierung
Einführung in die webOS Programmierung
 
GWT
GWTGWT
GWT
 
Rhomobile
RhomobileRhomobile
Rhomobile
 
Node.js
Node.jsNode.js
Node.js
 
Android Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickelnAndroid Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickeln
 
Node.js für Webapplikationen
Node.js für WebapplikationenNode.js für Webapplikationen
Node.js für Webapplikationen
 

Hdc2012 cordova-präsi

  • 1. Ein  Code  =  iOS,  Android,  BB,   WP7   Marcus  Ross   (Trainer/Berater)   @zahlenhelfer  
  • 2. Agenda •  Das Problem •  Die Lösung (3 Teile)
  • 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
  • 5. jQueryMobile •  Touch-Optimiertes Framework für eine Vielzahl von Geräten/Browsern •  Eigenes UI-Paradigma, nicht nativ! •  Leicht, da mit HTML5 Attributen („data-xxx“)
  • 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/
  • 14.
  • 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!
  • 19. Apache Cordova •  Unterstützt  die  PlaHormen:  
  • 20. Zugriff per API Accelerometer   Events   Camera   File   Capture   Geolocaion   Compass   Media   Connecion   Noificaion   Contacts   Storage   Device   *Plugins  
  • 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  
  • 25. Aber Debugging? •  hmp://debug.phonegap.com   •  npm  -­‐g  install  weinre   •  Plugin     hmps://github.com/phonegap/phonegap-­‐plugins    
  • 26. Plugins 1/2 •  Zugriff  auf  Hardware  /  Funkionen   •  Zentral  zu  erreichen  unter:   hmps://github.com/phonegap/phonegap-­‐plugins.git  
  • 27. Plugins 2/2 -­‐  Barcodescanner  (iOS,android,BB)   -­‐  Push-­‐Noificaion  (iOS,  android)   -­‐  AugmentedReality  durch  WikiTude   (iOS,android)  
  • 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