FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap

  • 1,165 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
1,165
On Slideshare
1,165
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