FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap

  • 660 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
660
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
18
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Sencha Touch + Phone Gap Loiane Groner
  • 2. Me, Myself & I •Gerente de Desenv Projetos @Citibank •8+ XP TI •Java JUG Leader •Sencha Community Leader •http://loiane.com •@loiane
  • 3. Autora Técnica Internacional
  • 4. Pq Mobile? Pq Multiplataforma? 0
  • 5. #changeBrazil
  • 6. Aplicações
  • 7. WORA: Write Once Run Anywhere
  • 8. Mobile
  • 9. Android Java BackBerry Java iOS Objective-C Palm OS C, C++, Pascal Symbian C++ Windows Phone C#
  • 10. Sencha Touch 1
  • 11. Primeiro framework Javascript para desenvolvimento de apps mobile ricas usando padrões web - HTML 5
  • 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. 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. 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. Forms
  • 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. Scrolling Scrolling Momentum/bounce physics ardware accelerated hroughout all components: Lists Carousel Pickers
  • 18. Eventos Touch Baseado em Eventos Nativos Abstraído para Performance Eventos Adicionais: - Tap - Double tap - Tap & hold - Swipe - Rotate - Drag & drop
  • 19. Data Package Models, Stores, e Proxies - Associations -Validation - Local & server storage Consumir web services - JSON/P - XML -YQL
  • 20. REST
  • 21. JSON-P
  • 22. Local Storage Web SQL (SQLite)
  • 23. CORS http://enable-cors.org/
  • 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. Gráficos Touch Charts
  • 26. Demo 1
  • 27. Tem Acesso Nativo?
  • 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. Sencha Touch não tem Acelerômetro Compass File
  • 30. Sencha Touch SDK Sencha Cmd Local WebServer Browser (safari, Chrome) Emuladores Dispositivos para testes
  • 31. $ cd /path/to/sencha-touch-2-sdk $ sencha generate app MyApp /path/to/www/
  • 32. Phone Gap 2
  • 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. A partir do Phonegap 1.5.0
  • 35. Apache Cordova •Cordova é o projeto Open Source •PhoneGap é a implementação •http://incubator.apache.org/cordova/
  • 36. O que é Phonegap / Cordova? •Chromeless webkit browser •Plataforma mobile HTML 5 (wrapper) •Acesso Nativo
  • 37. Phonegap é WORA? Write Once, Run Anywhere?
  • 38. Write Once DEBUG Anywhere
  • 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. function capturePhoto() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: destinationType.DATA_URL }); } Capturar Foto
  • 41. function capturePhotoEdit() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true, destinationType: destinationType.DATA_URL }); } Capturar Foto com Edição
  • 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. function onSuccess(heading) { alert('Heading: ' + heading.magneticHeading); }; function onError(error) { alert('CompassError: ' + error.code); }; navigator.compass.getCurrentHeading(onSuccess, onError); Compass/Bússula
  • 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. 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. 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. navigator.notification.alert( 'Alerta!', // message alertDismissed, // callback 'Titulo', // title 'Botão' // buttonName ); Notification - Alert
  • 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. // Beepa 3 vezes function playBeep() { navigator.notification.beep(3); } Notification - Beep Não funciona no iOS
  • 50. // Vibra por 2 segundos function vibrate() { navigator.notification.vibrate(2000); } Notification - Vibrar
  • 51. Demo 2
  • 52. http://nodejs.org/
  • 53. $ sudo npm install -g phonegap
  • 54. $ phonegap create hello com.example.hello HelloWorld
  • 55. $ phonegap build ios     [phonegap] detecting iOS SDK environment...     [phonegap] using the local environment     [phonegap] compiling iOS...     [phonegap] successfully compiled iOS app
  • 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. Sencha Touch + PhoneGap 3
  • 58. HTML 5 CSS 3 JS UIWebView WebView APIs JS Stores
  • 59. Workflow de Desenvolvimento
  • 60. Mock Up Desenvolvimento Testes Simulação Dispositivo Store
  • 61. M O C K U P
  • 62. Resultado
  • 63. $ sencha generate app Contatos ../Contatos
  • 64. Testes Locais
  • 65. Testes Automatizados
  • 66. http://bryntum.com
  • 67. Hora de Integrar!
  • 68. app.json "js": [ { "path": "touch/sencha-touch.js" }, { "path": "cordova-2.9.0.js" }, { "path": "app.js", "bundle": true, "update": "delta" } ],
  • 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. $ ./create ContatosIOS com.loiane ../../../ContatosIOS
  • 71. Emuladores
  • 72. R I P P L E
  • 73. Ferramentas de Debug
  • 74. iWebInspector
  • 75. Weinre
  • 76. Build
  • 77. $ sencha app build $ sencha app build native $ sencha app package run packager.json
  • 78. XCode Eclipse build.phonegap.com
  • 79. http://www.loiane.com/2013/07/usando- phonegap-build-build-automatico-para-6- plataformas-de-uma-so-vez/
  • 80. Melhores Práticas
  • 81. sencha app build
  • 82. Multiplataforma 4
  • 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. Nativo x Web 5
  • 85. Nativo Web Acesso Device Sim Parcial
  • 86. Nativo Web Acesso Device Velocidade Sim Sim ?Parcial
  • 87. Nativo Web Acesso Device Velocidade Tempo Desenvolvimento Sim Sim ? Caro Parcial Sussa
  • 88. Nativo Web Acesso Device Velocidade Tempo Desenvolvimento App Store Sim Sim ? Caro Parcial Sussa Sim Não
  • 89. Nativo Web Acesso Device Velocidade Tempo Desenvolvimento App Store Cross Platform Sim Sim ? Caro Parcial Sussa Sim Não Sim Não
  • 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. App Híbrida?
  • 92. Desenvolva Desenvolva
  • 93. Desenvolva Teste Desenvolva Teste
  • 94. Desenvolva Teste Build Desenvolva Teste Build
  • 95. Desenvolva Teste Build Desenvolva Teste Build Desenvolva Teste Build Build {Híbrido
  • 96. ?
  • 97. Our biggest mistake was betting too much on HTML5
  • 98. In your face!
  • 99. “So, when Mark Zuckerberg said HTML5 wasn't ready, we took a little offense to the comment.”
  • 100. Sussa*
  • 101. Plugins
  • 102. SQLite nativo BarCode Scanner etc https://github.com/phonegap/phonegap-plugins https://github.com/brodyspark/PhoneGap- SQLitePlugin-iOS
  • 103. Issues App Store
  • 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. http://phonegap.com/app/ http://www.sencha.com/apps/
  • 106. http://www.loiane.com/2012/03/ curso-de-sencha-touch-2-gratuito
  • 107. Códigos: https://github.com/loiane/senchatouch2-contacts https://github.com/loiane/mobileConf2013
  • 108. Obrigada! http://loiane.com @loiane
  • 109. http://loiane.com facebook.com/loianegroner @loiane https://github.com/loiane youtube.com/user/Loianeg slideshare.net/loianeg