This document discusses building mobile apps with Sencha Touch 2, an open source JavaScript framework. It introduces Sencha Touch components for building interfaces, models and stores for managing data, themes for styling, and tools for testing and building apps. It also compares native, web-based and hybrid mobile development approaches, and explains how to access device capabilities when using Sencha Touch.

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

9. #changeBrazil

10. Mobile

11. Android Java
BackBerry Java
iOS Objective-C
Palm OS C, C++, Pascal
Symbian C++
Windows Phone C#

12. Nativo x Web
2

14. App
Híbrida?

16. 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

17. Desenvolva
Teste
Build
Desenvolva
Teste
Build
Desenvolva
Teste
Build Build
{Híbrido
WORA

18. Sencha
Touch
3

19. Primeiro framework Javascript para
desenvolvimento de apps mobile ricas
usando padrões web - HTML 5

20. 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

21. 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

22. 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
});

23. Forms

24. 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!');
}
});

25. Scrolling
Scrolling
Momentum/bounce physics
ardware accelerated
hroughout all components:
Lists
Carousel
Pickers

26. Eventos Touch
Baseado em Eventos Nativos
Abstraído para Performance
Eventos Adicionais:
- Tap
- Double tap
- Tap & hold - Swipe
- Rotate
- Drag & drop

27. Data Package
Models, Stores, e Proxies
- Associations
-Validation
- Local & server storage
Consumir web services
- JSON/P
- XML
-YQL

28. 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

31. "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"
}
]

32. Gráficos
Touch Charts

33. Nossa App
4

34. Pré-
Requisitos
5

35. Sencha Touch SDK
Sencha Cmd
Local WebServer
Browser (safari, Chrome)
Emuladores
Dispositivos para testes

36. Arquitetando
+ Desenvolvimento
6

37. Workflow de
Desenvolvimento

38. 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

39. M
O
C
K
U
P

41. cd senchaTouchSDK
sencha app generate
MyContacts
../TDC2013/MyContacts

43. Testes Locais

44. Testes
Automatizados

45. http://bryntum.com

46. Ferramentas de
Debug

47. chrome dev tools

48. iWebInspector

49. Weinre

51. Build

52. sencha app build
sencha app build native
sencha app package run
packager.json

54. Tem Acesso
Nativo?

55. Acesso Nativo
App in Purchases
Câmera
Contatos (read only)*
Connection (online/offline)
Device Info (nome, plataforma, uuid)
GeoLocation
Notifications (vibrar)
Orientation
Push Notifications

56. 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

57. Sencha Touch não tem
Acelerômetro
Compass
File

58. Phone Gap

59. https://github.com/loiane/
senchatouch2-contacts

60. Obrigada!
http://loiane.com
@loiane
http://slideshare.com/loianeg