FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap

834 views
794 views

Published on

Palestra apresentada no CONENCO e SECS 2013 - Faesa - em Vitória - ES no dia 20 de setembro de 2013.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
834
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap

  1. 1. Sencha Touch + Phone Gap Loiane Groner
  2. 2. Me, Myself & I •Gerente de Desenv Projetos @Citibank •8+ XP TI •Java JUG Leader •Sencha Community Leader •http://loiane.com •@loiane
  3. 3. Autora Técnica Internacional
  4. 4. Pq Mobile? Pq Multiplataforma? 0
  5. 5. #changeBrazil
  6. 6. Aplicações
  7. 7. WORA: Write Once Run Anywhere
  8. 8. Mobile
  9. 9. Android Java BackBerry Java iOS Objective-C Palm OS C, C++, Pascal Symbian C++ Windows Phone C#
  10. 10. Sencha Touch 1
  11. 11. Primeiro framework Javascript para desenvolvimento de apps mobile ricas usando padrões web - HTML 5
  12. 12. O que tem no Sencha Touch? Componentes e Layouts Themas e Ícones Orientação e Animação Eventos Touch e Scroller Pacote de Dados MVC
  13. 13. Componentes Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars & buttons HTML5 - Audio -Video - GeoLocation Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars & buttons HTML5 - Audio - Video Components
  14. 14. Ext.define('Contact', { extend: 'Ext.data.Model', config: { fields: ['firstName', 'lastName'] } }); var store = Ext.create('Ext.data.Store', { model: 'Contact', sorters: 'lastName', grouper: { groupFn: function(record) { return record.get('lastName')[0]; } }, data: [ { firstName: 'Tommy', lastName: 'Maintz' }, { firstName: 'Rob', lastName: 'Dougan' }, { firstName: 'Ed', lastName: 'Spencer' }, { firstName: 'Jamie', lastName: 'Avins' }, { firstName: 'Aaron', lastName: 'Conran' }, { firstName: 'Dave', lastName: 'Kaneda' }, { firstName: 'Jacky', lastName: 'Nguyen' }, { firstName: 'Abraham', lastName: 'Elias' }, { firstName: 'Jay', lastName: 'Robinson'}, { firstName: 'Nigel', lastName: 'White' }, { firstName: 'Don', lastName: 'Griffin' }, { firstName: 'Nico', lastName: 'Ferrero' }, { firstName: 'Jason', lastName: 'Johnston'} ] }); Ext.create('Ext.List', { fullscreen: true, itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>', store: store, grouped: true });
  15. 15. Forms
  16. 16. Ext.create('Ext.form.Panel', { fullscreen: true, items: [ { xtype: 'textfield', name: 'name', label: 'Name' }, { xtype: 'emailfield', name: 'email', label: 'Email' }, { xtype: 'passwordfield', name: 'password', label: 'Password' } ] }); form.submit({ url: 'url/to/submit/to', method: 'POST', success: function() { alert('form submitted successfully!'); } });
  17. 17. Scrolling Scrolling Momentum/bounce physics ardware accelerated hroughout all components: Lists Carousel Pickers
  18. 18. Eventos Touch Baseado em Eventos Nativos Abstraído para Performance Eventos Adicionais: - Tap - Double tap - Tap & hold - Swipe - Rotate - Drag & drop
  19. 19. Data Package Models, Stores, e Proxies - Associations -Validation - Local & server storage Consumir web services - JSON/P - XML -YQL
  20. 20. REST
  21. 21. JSON-P
  22. 22. Local Storage Web SQL (SQLite)
  23. 23. CORS http://enable-cors.org/
  24. 24. Temas Use CSS3 & SASS - Flexible themes - Highly optimized e.g. Theming $base-color: #ff6699 Use CSS3 & SASS - Flexible themes - Highly optimized e.g. Theming $base-color: #ff6699 CSS3 com Sass e Compass
  25. 25. Gráficos Touch Charts
  26. 26. Demo 1
  27. 27. Tem Acesso Nativo?
  28. 28. Acesso Nativo App in Purchases Câmera Contatos (read only)* Connection (online/offline) Device Info (nome, plataforma, uuid) GeoLocation Notifications (vibrar) Orientation Push Notifications Sencha Packager* PhoneGap Emulator
  29. 29. Sencha Touch não tem Acelerômetro Compass File
  30. 30. Sencha Touch SDK Sencha Cmd Local WebServer Browser (safari, Chrome) Emuladores Dispositivos para testes
  31. 31. $ cd /path/to/sencha-touch-2-sdk $ sencha generate app MyApp /path/to/www/
  32. 32. Phone Gap 2
  33. 33. •2008: início •2008:suporte a iPhone, Android e Blackberry 4 •2009: suporte a Symbian e webOS •2011: suporte a Windows Phone 7 •2011: Projeto sob Apache - novo nome
  34. 34. A partir do Phonegap 1.5.0
  35. 35. Apache Cordova •Cordova é o projeto Open Source •PhoneGap é a implementação •http://incubator.apache.org/cordova/
  36. 36. O que é Phonegap / Cordova? •Chromeless webkit browser •Plataforma mobile HTML 5 (wrapper) •Acesso Nativo
  37. 37. Phonegap é WORA? Write Once, Run Anywhere?
  38. 38. Write Once DEBUG Anywhere
  39. 39. function onSuccess(acceleration) {     alert('Acceleration X: ' + acceleration.x + 'n' +           'Acceleration Y: ' + acceleration.y + 'n' +           'Acceleration Z: ' + acceleration.z + 'n' +           'Timestamp: '      + acceleration.timestamp + 'n'); }; function onError() {     alert('onError!'); }; navigator.accelerometer.getCurrentAcceleration(onSuccess, onError); Acceleration
  40. 40. function capturePhoto() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: destinationType.DATA_URL }); } Capturar Foto
  41. 41. function capturePhotoEdit() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true, destinationType: destinationType.DATA_URL }); } Capturar Foto com Edição
  42. 42. function getPhoto(source) { navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, destinationType: destinationType.FILE_URI, sourceType: source }); } <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Biblioteca</button><br> <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">Album de Fotos</button> Busca Foto do Dispositivo
  43. 43. function onSuccess(heading) { alert('Heading: ' + heading.magneticHeading); }; function onError(error) { alert('CompassError: ' + error.code); }; navigator.compass.getCurrentHeading(onSuccess, onError); Compass/Bússula
  44. 44. function checkConnection() { var networkState = navigator.connection.type; var states = {}; states[Connection.UNKNOWN] = 'Unknown connection'; states[Connection.ETHERNET] = 'Ethernet connection'; states[Connection.WIFI] = 'WiFi connection'; states[Connection.CELL_2G] = 'Cell 2G connection'; states[Connection.CELL_3G] = 'Cell 3G connection'; states[Connection.CELL_4G] = 'Cell 4G connection'; states[Connection.NONE] = 'No network connection'; alert('Connection type: ' + states[networkState]); } checkConnection(); Conexão
  45. 45. function onDeviceReady() { var element = document.getElementById('deviceProperties'); element.innerHTML = 'Device Name: ' + device.name + '<br />' + 'Device Cordova: ' + device.cordova + '<br />' + 'Device Platform: ' + device.platform + '<br />' + 'Device UUID: ' + device.uuid + '<br />' + 'Device Model: ' + device.model + '<br />' + 'Device Version: ' + device.version + '<br />'; } Propriedades do Dispositivo
  46. 46. var ref = window.open('http://loiane.com', '_blank', 'location=yes'); ref.addEventListener('loadstart', function() { alert('start: ' + event.url); }); ref.addEventListener('loadstop', function() { alert('stop: ' + event.url); }); ref.addEventListener('exit', function() { alert(event.type); }); In App Browser
  47. 47. navigator.notification.alert( 'Alerta!', // message alertDismissed, // callback 'Titulo', // title 'Botão' // buttonName ); Notification - Alert
  48. 48. function showConfirm() { navigator.notification.confirm( 'Confirmar?', // message onConfirm, // callback to invoke with index of button pressed 'Titulo', // title 'OK,Cancel' // buttonLabels ); } Notification - Confirm
  49. 49. // Beepa 3 vezes function playBeep() { navigator.notification.beep(3); } Notification - Beep Não funciona no iOS
  50. 50. // Vibra por 2 segundos function vibrate() { navigator.notification.vibrate(2000); } Notification - Vibrar
  51. 51. Demo 2
  52. 52. http://nodejs.org/
  53. 53. $ sudo npm install -g phonegap
  54. 54. $ phonegap create hello com.example.hello HelloWorld
  55. 55. $ phonegap build ios     [phonegap] detecting iOS SDK environment...     [phonegap] using the local environment     [phonegap] compiling iOS...     [phonegap] successfully compiled iOS app
  56. 56. $ phonegap run android     [phonegap] detecting Android SDK environment...     [phonegap] using the local environment     [phonegap] compiling Android...     [phonegap] successfully compiled Android app     [phonegap] trying to install app onto device     [phonegap] no device was found     [phonegap] trying to install app onto emulator     [phonegap] successfully installed onto emulator
  57. 57. Sencha Touch + PhoneGap 3
  58. 58. HTML 5 CSS 3 JS UIWebView WebView APIs JS Stores
  59. 59. Workflow de Desenvolvimento
  60. 60. Mock Up Desenvolvimento Testes Simulação Dispositivo Store
  61. 61. M O C K U P
  62. 62. Resultado
  63. 63. $ sencha generate app Contatos ../Contatos
  64. 64. Testes Locais
  65. 65. Testes Automatizados
  66. 66. http://bryntum.com
  67. 67. Hora de Integrar!
  68. 68. app.json "js": [ { "path": "touch/sencha-touch.js" }, { "path": "cordova-2.9.0.js" }, { "path": "app.js", "bundle": true, "update": "delta" } ],
  69. 69. navigator.contacts.find( ! fields, ! function(deviceContacts) { ! //loop over deviceContacts and create Contact model instances ! var contacts = []; ! for (var i = 0; i < deviceContacts.length; i++) { ! var deviceContact = deviceContacts[ i ]; ! ! ! ! ! console.log(deviceContact); ! ! ! ! ! var phone = deviceContact.phoneNumbers[0]; ! ! ! ! ! if (phone){ ! ! ! ! ! ! phone = phone.value; ! ! ! ! ! } else{ ! ! ! ! ! ! phone = ""; ! ! ! ! ! } ! ! ! ! ! console.log("phone " + phone); ! var contact = Ext.create('MyContacts.model.Contact',{ ! id: deviceContact.id, ! givenName: deviceContact.name.givenName, ! familyName: deviceContact.name.familyName, ! phoneNumber: phone, ! birthday: new Date(deviceContact.birthday), ! notes: deviceContact.note ! }); ! contact.deviceContact = deviceContact; ! contacts.push(contact); ! } ! //return model instances in a result set operation.setResultSet( ! Ext.create('Ext.data.ResultSet', { ! records: contacts, ! total : contacts.length }) ); ! //announce success ! operation.setSuccessful(); ! operation.setCompleted(); console.log('operation complete'); ! //finish with callback ! if (typeof callback == "function") { ! callback.call(scope || thisProxy, operation); ! } ! }, MyContacts.proxy.ContactsProxy
  70. 70. $ ./create ContatosIOS com.loiane ../../../ContatosIOS
  71. 71. Emuladores
  72. 72. R I P P L E
  73. 73. Ferramentas de Debug
  74. 74. iWebInspector
  75. 75. Weinre
  76. 76. Build
  77. 77. $ sencha app build $ sencha app build native $ sencha app package run packager.json
  78. 78. XCode Eclipse build.phonegap.com
  79. 79. http://www.loiane.com/2013/07/usando- phonegap-build-build-automatico-para-6- plataformas-de-uma-so-vez/
  80. 80. Melhores Práticas
  81. 81. sencha app build
  82. 82. Multiplataforma 4
  83. 83. "css": [ { "path": "../../resources/css/base.css", "update": "delta" }, { "path": "resources/css/sencha-touch.css", "platform": ['chrome', 'safari', 'ios'], "update": "delta" }, { "path": "resources/css/android.css", "platform": ['android'], "update": "delta" }, { "path": "resources/css/bb.css", "platform": ['blackberry'], "update": "delta" }, { "path": "resources/css/wp.css", "platform": ['ie10'], "update": "delta" } ]
  84. 84. Nativo x Web 5
  85. 85. Nativo Web Acesso Device Sim Parcial
  86. 86. Nativo Web Acesso Device Velocidade Sim Sim ?Parcial
  87. 87. Nativo Web Acesso Device Velocidade Tempo Desenvolvimento Sim Sim ? Caro Parcial Sussa
  88. 88. Nativo Web Acesso Device Velocidade Tempo Desenvolvimento App Store Sim Sim ? Caro Parcial Sussa Sim Não
  89. 89. Nativo Web Acesso Device Velocidade Tempo Desenvolvimento App Store Cross Platform Sim Sim ? Caro Parcial Sussa Sim Não Sim Não
  90. 90. Nativo Web Acesso Device Velocidade Tempo Desenvolvimento App Store Cross Platform Sim Sim ? Caro Parcial Sussa Sim Não Sim Não Híbrido Sim ? Sussa* Sim Sim ? Sussa* Já vamos discutir Já vamos discutir
  91. 91. App Híbrida?
  92. 92. Desenvolva Desenvolva
  93. 93. Desenvolva Teste Desenvolva Teste
  94. 94. Desenvolva Teste Build Desenvolva Teste Build
  95. 95. Desenvolva Teste Build Desenvolva Teste Build Desenvolva Teste Build Build {Híbrido
  96. 96. ?
  97. 97. Our biggest mistake was betting too much on HTML5
  98. 98. In your face!
  99. 99. “So, when Mark Zuckerberg said HTML5 wasn't ready, we took a little offense to the comment.”
  100. 100. Sussa*
  101. 101. Plugins
  102. 102. SQLite nativo BarCode Scanner etc https://github.com/phonegap/phonegap-plugins https://github.com/brodyspark/PhoneGap- SQLitePlugin-iOS
  103. 103. Issues App Store
  104. 104. Parece uma App Parece app iOS diferente web Aprenda a desenvolver para mobile, não web App únicaButtons, iOS Human Interface Design Guidelines Eventos Touch, não Web Pinch, Zoom #fail Agregador de links App Intuitiva Hyperlink
  105. 105. http://phonegap.com/app/ http://www.sencha.com/apps/
  106. 106. http://www.loiane.com/2012/03/ curso-de-sencha-touch-2-gratuito
  107. 107. Códigos: https://github.com/loiane/senchatouch2-contacts https://github.com/loiane/mobileConf2013
  108. 108. Obrigada! http://loiane.com @loiane
  109. 109. http://loiane.com facebook.com/loianegroner @loiane https://github.com/loiane youtube.com/user/Loianeg slideshare.net/loianeg

×