Sencha Touch e PhoneGap: SouJava - IBM Maio 2013

1,364 views

Published on

Slides apresentados no encontro do SouJava, dia 21 de Maio de 2013 que aconteceu na IBM Brasil em São Paulo

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

No Downloads
Views
Total views
1,364
On SlideShare
0
From Embeds
0
Number of Embeds
409
Actions
Shares
0
Downloads
22
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Sencha Touch e PhoneGap: SouJava - IBM Maio 2013

  1. 1. Sencha Touch +Phone GapLoiane GronerEncontro 21 Maio 2013IBM São Paulo
  2. 2. Loiane GronerJava JUG LeaderSencha Community Leader7+ XP Java4+ XP SenchaSoftware DeveloperManager @ Citibankhttp://loiane.com@loiane
  3. 3. Autora TécnicaInternacional
  4. 4. Nativo x Web1
  5. 5. NativoWebAcessoDeviceSimParcial
  6. 6. NativoWebAcessoDeviceVelocidadeSim Sim?Parcial
  7. 7. NativoWebAcessoDeviceVelocidade TempoDesenvolvimentoSim Sim?CaroParcial Sussa
  8. 8. NativoWebAcessoDeviceVelocidade TempoDesenvolvimentoAppStoreSim Sim?CaroParcial SussaSimNão
  9. 9. NativoWebAcessoDeviceVelocidade TempoDesenvolvimentoAppStoreCrossPlatformSim Sim?CaroParcial SussaSimNão SimNão
  10. 10. NativoWebAcessoDeviceVelocidade TempoDesenvolvimentoAppStoreCrossPlatformSim Sim?CaroParcial SussaSimNão SimNãoHíbrido Sim ? Sussa* Sim Sim?Sussa*Já vamos discutirJá vamos discutir
  11. 11. AppHíbrida?
  12. 12. Desenvolva Desenvolva
  13. 13. DesenvolvaTesteDesenvolvaTeste
  14. 14. DesenvolvaTesteBuildDesenvolvaTesteBuild
  15. 15. DesenvolvaTesteBuildDesenvolvaTesteBuildDesenvolvaTesteBuild Build{Híbrido
  16. 16. ?
  17. 17. Our biggest mistakewas betting too muchon HTML5
  18. 18. In your face!
  19. 19. “So, when Mark Zuckerberg saidHTML5 wasnt ready, we took a littleoffense to the comment.”
  20. 20. Pq Mobile?PqMultiplataforma?2
  21. 21. Aplicações
  22. 22. WORA:Write OnceRun Anywhere
  23. 23. Mobile
  24. 24. Android JavaBackBerry JavaiOS Objective-CPalm OS C, C++, PascalSymbian C++Windows Phone C#
  25. 25. SenchaTouch3
  26. 26. Primeiro framework Javascript paradesenvolvimento de apps mobile ricasusando padrões web - HTML 5
  27. 27. O que tem no Sencha Touch?Componentes e LayoutsThemas e ÍconesOrientação e AnimaçãoEventos Touch e ScrollerPacote de DadosMVC
  28. 28. ComponentesLists- Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fields Toolbars & buttons HTML5- Audio-Video- GeoLocationLists- Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5- Audio- VideoComponents
  29. 29. 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});
  30. 30. Forms
  31. 31. 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!);}});
  32. 32. ScrollingScrollingMomentum/bounce physicsardware acceleratedhroughout all components:ListsCarouselPickers
  33. 33. Eventos TouchBaseado em Eventos NativosAbstraído para PerformanceEventos Adicionais:- Tap- Double tap- Tap & hold - Swipe- Rotate- Drag & drop
  34. 34. Data PackageModels, Stores, e Proxies- Associations-Validation- Local & server storageConsumir web services- JSON/P- XML-YQL
  35. 35. REST
  36. 36. JSON-P
  37. 37. Local StorageWeb SQL (SQLite)
  38. 38. CORShttp://enable-cors.org/
  39. 39. TemasUse CSS3 & SASS- Flexible themes- Highly optimizede.g.Theming$base-color: #ff6699Use CSS3 & SASS- Flexible themes- Highly optimizede.g.Theming$base-color: #ff6699CSS3 comSass e Compass
  40. 40. "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"}]
  41. 41. GráficosTouch Charts
  42. 42. Demo 1
  43. 43. Tem AcessoNativo?
  44. 44. Acesso NativoApp in PurchasesCâmeraContatos (read only)*Connection (online/offline)Device Info (nome, plataforma, uuid)GeoLocationNotifications (vibrar)OrientationPush NotificationsSencha Packager*PhoneGapEmulator
  45. 45. Sencha Touch não temAcelerômetroCompassFile
  46. 46. Phone Gap4
  47. 47. 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
  48. 48. function capturePhoto() {navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,destinationType: destinationType.DATA_URL });}Capturar Foto
  49. 49. function capturePhotoEdit() {navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20,allowEdit: true,destinationType: destinationType.DATA_URL });}Capturar Foto com Edição
  50. 50. 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
  51. 51. function onSuccess(heading) {alert(Heading: + heading.magneticHeading);};function onError(error) {alert(CompassError: + error.code);};navigator.compass.getCurrentHeading(onSuccess, onError);Compass/Bússula
  52. 52. 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
  53. 53. 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
  54. 54. 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
  55. 55. navigator.notification.alert(Alerta!, // messagealertDismissed, // callbackTitulo, // titleBotão // buttonName);Notification - Alert
  56. 56. function showConfirm() {navigator.notification.confirm(Confirmar?, // messageonConfirm, // callback to invoke with index of button pressedTitulo, // titleOK,Cancel // buttonLabels);}Notification - Confirm
  57. 57. // Beepa 3 vezesfunction playBeep() {navigator.notification.beep(3);}Notification - BeepNão funciona no iOS
  58. 58. // Vibra por 2 segundosfunction vibrate() {navigator.notification.vibrate(2000);}Notification - Vibrar
  59. 59. Demo 2
  60. 60. Sencha Touch+ PhoneGap5
  61. 61. HTML 5CSS 3JSUIWebViewWebViewAPIs JSStores
  62. 62. Workflow deDesenvolvimento
  63. 63. Mock UpDesenvolvimentoTestes SimulaçãoDispositivoStore
  64. 64. MOCKUP
  65. 65. Resultado
  66. 66. sencha generate appContatos../Contatos
  67. 67. Testes Locais
  68. 68. TestesAutomatizados
  69. 69. http://bryntum.com
  70. 70. Hora de Integrar!
  71. 71. app.json"js": [{"path": "touch/sencha-touch.js"},{"path": "cordova-2.5.0.js"},{"path": "app.js","bundle": true,"update": "delta"}],
  72. 72. 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 setoperation.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
  73. 73. ./createContatosIOScom.loiane../../../ContatosIOS
  74. 74. Demo 3
  75. 75. Emuladores
  76. 76. RIPPLE
  77. 77. Ferramentas deDebug
  78. 78. iWebInspector
  79. 79. Weinre
  80. 80. Build
  81. 81. sencha app buildsencha app build native
  82. 82. XCodeEclipsebuild.phonegap.com
  83. 83. Sussa*
  84. 84. Plugins
  85. 85. SQLite nativoBarCode Scanneretchttps://github.com/phonegap/phonegap-pluginshttps://github.com/brodyspark/PhoneGap-SQLitePlugin-iOS
  86. 86. IssuesApp Store
  87. 87. Parece umaAppPareceapp iOSdiferentewebAprenda adesenvolverpara mobile,não webAppúnicaButtons,iOS Human InterfaceDesign Guidelines Eventos Touch,não WebPinch,Zoom#failAgregador delinksApp IntuitivaHyperlink
  88. 88. Obrigada!http://loiane.com@loiane

×