Der Browser als App-Plattform - Mobile DevCon 2011 - Tobias Bosch

1,291 views

Published on

Dieser Vortrag diskutiert verschiedene Architekturen für mobile Anwendungen anhand eines Kundenprojekts. Dabei wurden JavaScript, HTML5, automatisierte Tests sowie PhoneGap und eine Barcode-Scanner-Bibliothek eingesetzt.

Published in: Technology, News & Politics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,291
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Der Browser als App-Plattform - Mobile DevCon 2011 - Tobias Bosch

  1. 1. Tobias Bosch Senior Consultant <br />OPITZ CONSULTING GmbH<br />München, 25.07.2011<br />Der Browser als App-Plattform<br />Design:<br /><ul><li>Das Farbschema ist im Design als „OC 2009“ hinterlegt.
  2. 2. Ebenso sind die Schriftarten als „OC 2009“ hinterlegt.
  3. 3. Die Standardfarben sind:</li></li></ul><li>
  4. 4. Agenda<br />Anwendungsfall<br />Architektur<br />JavaScript<br />Testautomatisierung<br />Browser<br />Komponenten-Bibliotheken<br />Demo<br />Design:<br /><ul><li>Das Farbschema ist im Design als „OC 2009“ hinterlegt.
  5. 5. Ebenso sind die Schriftarten als „OC 2009“ hinterlegt.
  6. 6. Die Standardfarben sind:</li></li></ul><li>Anwendungsfall<br />CC, Christian Kadluba, flickr/pokpok<br />
  7. 7. Architektur<br />Design:<br /><ul><li>Das Farbschema ist im Design als „OC 2009“ hinterlegt.
  8. 8. Ebenso sind die Schriftarten als „OC 2009“ hinterlegt.
  9. 9. Die Standardfarben sind:</li></ul>CC, Max Wesby, flickr/max_westby<br />
  10. 10. Native App<br />Device<br />Native App<br />Native App<br />Design:<br /><ul><li>Das Farbschema ist im Design als „OC 2009“ hinterlegt.
  11. 11. Ebenso sind die Schriftarten als „OC 2009“ hinterlegt.
  12. 12. Die Standardfarben sind:</li></li></ul><li>Web App<br />Native App<br />Device<br />Browser<br />Web App<br />Design:<br /><ul><li>Das Farbschema ist im Design als „OC 2009“ hinterlegt.
  13. 13. Ebenso sind die Schriftarten als „OC 2009“ hinterlegt.
  14. 14. Die Standardfarben sind:</li></li></ul><li>Hybrid App<br />Device<br />Native App<br />Native App<br />Design:<br /><ul><li>Das Farbschema ist im Design als „OC 2009“ hinterlegt.
  15. 15. Ebenso sind die Schriftarten als „OC 2009“ hinterlegt.
  16. 16. Die Standardfarben sind:</li></ul>Web App<br />Web View<br />
  17. 17. PhoneGapApplication<br />publicclassRetoure extendsDroidGap {<br /> @Override<br />publicvoidonCreate(<br /> Bundle savedInstanceState) {<br />super.onCreate(savedInstanceState);<br />this.loadUrl(<br /> "file:///android_asset/www/index.html");<br /> }<br />}<br />
  18. 18. Barcode-Scanner mit PhoneGap (1)<br />PhoneGap.exec(<br />function(scanResult) { ... },<br />function(error) { ... },<br />'BarcodeScanner', ‘scan', <br /> ALL_CODE_TYPES);<br />
  19. 19. Barcode-Scanner mit PhoneGap (2)<br />publicclassBarcodeScannerextendsPlugin{<br />publicPluginResultexecute(<br /> String action, JSONArrayargs) {<br /> ...<br />IntentintentScan = newIntent(<br />"com.google.zxing.client.android.SCAN");<br />startActivity(intentScan);<br /> ...<br />}<br />publicvoidonActivityResult(...) {<br />this.success(scanResult);<br /> }<br />
  20. 20. Barcode-Scanner mit PhoneGap (3)<br />JavaScript<br />Barcode-Scanner<br />Barcode-Plugin<br />Phonegap.exec<br />startActivity<br />onActivityResult<br />successCallback<br />
  21. 21. Multi Page Web App<br />Browser<br />Server<br />Controller<br />Backend<br />HTML-Page<br />Data<br />Design:<br /><ul><li>Das Farbschema ist im Design als „OC 2009“ hinterlegt.
  22. 22. Ebenso sind die Schriftarten als „OC 2009“ hinterlegt.
  23. 23. Die Standardfarben sind:</li></ul>UI Values<br />
  24. 24. AJAX Web App<br />Browser<br />Server<br />Change<br />AJAX-<br />Engine<br />Controller<br />Backend<br />Design:<br /><ul><li>Das Farbschema ist im Design als „OC 2009“ hinterlegt.
  25. 25. Ebenso sind die Schriftarten als „OC 2009“ hinterlegt.
  26. 26. Die Standardfarben sind:</li></ul>Data<br />Events<br />
  27. 27. Single Page Web App<br />Browser<br />Server<br />Controller<br />Backend<br />Data<br />Design:<br /><ul><li>Das Farbschema ist im Design als „OC 2009“ hinterlegt.
  28. 28. Ebenso sind die Schriftarten als „OC 2009“ hinterlegt.
  29. 29. Die Standardfarben sind:</li></li></ul><li>JavaScript<br />
  30. 30. Testautomatisierung<br />CC, Mirko Tobias Schaefer, flickr/gastev<br />
  31. 31. JavaScript-Tests<br />describe('validateBarcode', function() {<br />it('shoulddetect check digiterrors', function() {<br />expect(validateBarcode(12345671)).<br />toBeFalsy();<br /> };<br />it('shoulddetectcorrectbarcodes', function() {<br />expect(validateBarcode(12345670)).<br />toBeTruthy();<br />}<br />}<br />
  32. 32. JsTestDriver<br />© MiskoHevery, Misko.Hevery@gmail.com<br />
  33. 33. Browser<br />✔<br />✔<br />✔<br />✔<br />✔<br />GPS<br />✔<br />✔<br />✔<br />✔<br />✖<br />CSS3<br />✔<br />✖<br />✖<br />✖<br />✖<br />Date<br />Input<br />
  34. 34. Komponenten-Bibliotheken<br />CC, Rodrigo Galindez, flickr/rodrigogalindez<br />
  35. 35. Hello World<br /><script type="text/javascript"><br />    newExt.Application({<br />        launch: function() {<br />            newExt.Panel({<br />                fullscreen: true,<br />                html: 'Hello World!'<br />            });<br />        }<br />    }); <br /></script>  <br />
  36. 36. HelloWorld<br /><body><br /> <div data-role="page"><br /> <div data-role="content"><br /> <p>Helloworld</p><br /> </div><br /></div><br /></body><br />
  37. 37. DEMO<br />
  38. 38. Kontakt<br />Tobias Bosch<br />Senior Consultant<br />OPITZ CONSULTING GmbH<br />Weltenburger Straße 4 81677 MünchenTel +49 (89) 680098-0 tobias.bosch@opitz-consulting.com<br />Github/Twitter: Tigbro<br />
  39. 39. Links<br />PhoneGap: http://www.phonegap.com/<br />ZXing: http://code.google.com/p/zxing/<br />JsTestDriver: http://code.google.com/p/js-test-driver/<br />SenchaTouch: http://www.sencha.com/products/touch/<br />jQuery Mobile: http://jquerymobile.com/<br />Design:<br /><ul><li>Das Farbschema ist im Design als „OC 2009“ hinterlegt.
  40. 40. Ebenso sind die Schriftarten als „OC 2009“ hinterlegt.
  41. 41. Die Standardfarben sind:</li>

×