QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

2,126 views
2,087 views

Published on

P

Published in: Technology, Design
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
2,126
On SlideShare
0
From Embeds
0
Number of Embeds
44
Actions
Shares
0
Downloads
56
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

  1. 1. Sencha Touch 2: Mobile MultiplataformaLoiane Gronerww.loiane.com@loiane
  2. 2. Loiane GronerEvangelista Java e SenchaAutora internacionalGerente de Projetoshttp://loiane.com@loiane
  3. 3. Antes de começar...
  4. 4. Novidades HTML 5•Melhor Semântica•Offline Storate•Acesso ao Device•Melhor Conectividade•Multimedia•Acesso Gráficos nativos•Melhor Performance•CSS3
  5. 5. Melhor Semântica•Mais tags HTML•Microdata•Microformats
  6. 6. Offline Storate•App Cache•Local storage•Session storage•Web database
  7. 7. Acesso ao Device•GeoLocalização•Acelerômetro•Input Audio/Câmera•Compass (iOS 5)
  8. 8. Melhor Conectividade•Web Sockets nativos
  9. 9. Multimedia•Audio•Video
  10. 10. Acesso Gráficos nativos•SVG, Canvas, VML•Animações 3D com CSS•WebGL
  11. 11. Melhor Performance•Webwork •Threaded JavaScript•XHR2 •Blob •Checked data •Requests cross domain
  12. 12. CSS3•Layouts melhores e maisrápidos•Trasições nativas •aceleração de hardware 3D•Gradientes•Formato Web Open Font
  13. 13. PQ?
  14. 14. Escolha HTML 5 se:•Desenvolver app comnúmero pessoas limitadas•App para mobile devices•Deploy apps sem limitaçãode app stores•App tem que ser acessívelem qualquer lugar•Quer usar skills existentes(HTML, CSS, JS)
  15. 15. Tecnologias
  16. 16. O que éSencha Touch?
  17. 17. Primeiro framework Javascript paradesenvolvimento de apps mobile ricas usando padrões web
  18. 18. O que tem no Sencha Touch?Componentes e LayoutsThemas e ÍconesOrientação e AnimaçãoEventos Touch e ScrollerPacote de DadosMVC
  19. 19. ComponentesLists- Nested, Grouped, SortableCarouselPickerOverlaySlider ComponentsForms & fields Toolbars & buttons HTML5- Audio Lists- Video - Nested, Grouped, Sortable- GeoLocationCarousel Picker Overlay Slider Forms & fields Toolbars & buttons HTML5 - Audio - Video
  20. 20. Forms
  21. 21. ScrollingScrollingMomentum/bounce physics ardware accelerated hroughout all components: Lists Carousel Pickers
  22. 22. Eventos TouchBaseado em Eventos NativosAbstraído para PerformanceEventos Adicionais:- Tap- Double tap- Tap & hold - Swipe- Rotate- Drag & drop
  23. 23. Data PackageModels, Stores, e Proxies- Associations- Validation- Local & server storageConsumir web services- JSON/P- XML- YQL
  24. 24. Temas Theming Use CSS3 & SASS Use CSS3 & SASS - Flexible themes - Flexible themes CSS3 com - Highly optimized - Highly optimizedSass e Compass e.g. e.g. $base-color: #ff6699 $base-color:
  25. 25. Plataformas
  26. 26. iOS
  27. 27. Android
  28. 28. Roadmap: Windows Phone
  29. 29. Webkit
  30. 30. Charts
  31. 31. Acesso Nativo
  32. 32. CâmeraExt.device.Camera.capture({ source: camera, destination: file, success: function(url) { //mostra foto em um widget the Imagem: Ext.create(Ext.Img, { src: url, fullscreen: true }); }});
  33. 33. GeolocationExt.device.Geolocation.getCurrentPosition({ success: function(position) { console.log(position.coords); }, failure: function() { console.log(something went wrong!); }});
  34. 34. Ext.device.Geolocation.watchPosition({ frequency: 3000, // Update every 3 seconds callback: function(position) { console.log(Position updated!, position.coords); }, failure: function() { console.log(something went wrong!); }});
  35. 35. NotificationExt.device.Notification.show({ title: One Button, message: This is a simple notification with onebutton.});Ext.device.notification.vibrate();
  36. 36. Push - iOSExt.device.Push.register({ type: Ext.device.Push.ALERT|Ext.device.Push.BADGE|Ext.device.Push.SOUND, success: function(token) { console.log(# Push notification registration successful:); console.log( token: + token); }, failure: function(error) { console.log(# Push notification registration unsuccessful:); console.log( error: + error); }, received: function(notifications) { console.log(# Push notification received:); console.log( + JSON.stringify(notifications)); }});
  37. 37. OrientaçãoExt.device.Orientation.on({ scope: this, orientationchange: function(e) { console.log(Alpha: , e.alpha); console.log(Beta: , e.beta); console.log(Gamma: , e.gamma); }});
  38. 38. Offline appif (Ext.device.Connection.isOnline()) { Ext.Msg.alert(You are currently connected via + Ext.device.Connection.getType());} else { Ext.Msg.alert(You are not currently connected);}
  39. 39. Sencha Touch 2 + ExtJS 4
  40. 40. . .Views Views . Controllers Models Stores json Proxies json Servidor
  41. 41. Testes
  42. 42. JasminePhantomJS JSLint
  43. 43. Free
  44. 44. Continuous Integration + Suporte Paga = US$ 499
  45. 45. Show me the code! Exemplo app nativa iOS e Android em 5 minutos
  46. 46. Demos apps existentes
  47. 47. Curso Gratuito ExtJS 4 Sencha Touch 2http://loiane.com
  48. 48. Obrigada!Loiane Gronerww.loiane.com@loiane

×