Your SlideShare is downloading. ×
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

TDC2013: Arquitetura de apps com Sencha Touch 2

1,411

Published on

Palestra apresentada na trilha Mobile do TDC 2013 SP no dia 14 de julho de 2013.

Palestra apresentada na trilha Mobile do TDC 2013 SP no dia 14 de julho de 2013.

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

No Downloads
Views
Total Views
1,411
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
52
Comments
0
Likes
3
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. Trilha Mobile Loiane Groner http://loiane.com @loiane Arquitetura de apps com Sencha Touch 2
  • 2. Me, Myself & I •Gerente de Desenv Projetos @Citibank •8+ XP TI •Java JUG Leader •Sencha Community Leader •http://loiane.com •@loiane
  • 3. Momento Jabá packpub.com ou amazon.com
  • 4. Pq Mobile? Pq Multiplataforma? 1
  • 5. #changeBrazil
  • 6. Mobile
  • 7. Android Java BackBerry Java iOS Objective-C Palm OS C, C++, Pascal Symbian C++ Windows Phone C#
  • 8. Nativo x Web 2
  • 9. App Híbrida?
  • 10. 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
  • 11. Desenvolva Teste Build Desenvolva Teste Build Desenvolva Teste Build Build {Híbrido WORA
  • 12. Sencha Touch 3
  • 13. Primeiro framework Javascript para desenvolvimento de apps mobile ricas usando padrões web - HTML 5
  • 14. 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
  • 15. 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
  • 16. 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 });
  • 17. Forms
  • 18. 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!'); } });
  • 19. Scrolling Scrolling Momentum/bounce physics ardware accelerated hroughout all components: Lists Carousel Pickers
  • 20. Eventos Touch Baseado em Eventos Nativos Abstraído para Performance Eventos Adicionais: - Tap - Double tap - Tap & hold - Swipe - Rotate - Drag & drop
  • 21. Data Package Models, Stores, e Proxies - Associations -Validation - Local & server storage Consumir web services - JSON/P - XML -YQL
  • 22. 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
  • 23. "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" } ]
  • 24. Gráficos Touch Charts
  • 25. Nossa App 4
  • 26. Pré- Requisitos 5
  • 27. Sencha Touch SDK Sencha Cmd Local WebServer Browser (safari, Chrome) Emuladores Dispositivos para testes
  • 28. Arquitetando + Desenvolvimento 6
  • 29. Workflow de Desenvolvimento
  • 30. Mockup Arquitetura da app - MVC Estrutura UI Modelagem Dados Binding Dados - View Eventos - Controller Página Detalhe e Form Customização - Sass e Compass Testes Emulação Teste Device Produção
  • 31. M O C K U P
  • 32. cd senchaTouchSDK sencha app generate MyContacts ../TDC2013/MyContacts
  • 33. Testes Locais
  • 34. Testes Automatizados
  • 35. http://bryntum.com
  • 36. Ferramentas de Debug
  • 37. chrome dev tools
  • 38. iWebInspector
  • 39. Weinre
  • 40. Build
  • 41. sencha app build sencha app build native sencha app package run packager.json
  • 42. Tem Acesso Nativo?
  • 43. Acesso Nativo App in Purchases Câmera Contatos (read only)* Connection (online/offline) Device Info (nome, plataforma, uuid) GeoLocation Notifications (vibrar) Orientation Push Notifications
  • 44. 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
  • 45. Sencha Touch não tem Acelerômetro Compass File
  • 46. Phone Gap
  • 47. https://github.com/loiane/ senchatouch2-contacts
  • 48. Obrigada! http://loiane.com @loiane http://slideshare.com/loianeg

×