Download - Qconsp 2011
Aplicações Móveis Híbridas: usando Web e
Nativo juntos
[email protected] (@cbsanchez)[email protected] (@wlads)
1Tuesday, 22 May 2012
Agenda• Aplicações Mobile Web
• Aplicações Mobile Nativas
• Aplicações Mobile Híbridas
2Tuesday, 22 May 2012
1. Aplicações Mobile Web
3Tuesday, 22 May 2012
No início era o nativo
4Tuesday, 22 May 2012
e então Berners-Lee criou a web
Sir T
im B
erne
rs-L
ee
5Tuesday, 22 May 2012
e desde 1991
• HTML, CSS e JavaScript
• Pearl, PHP e ASP
• Java
• .NET
• Applet
6Tuesday, 22 May 2012
hoje na web
• Sistemas corporativos
• Google Docs
• e-Learning
• Twitter, Facebook, GitHub, Basecamp, Netflix...
7Tuesday, 22 May 2012
mas nós queríamos mais• WML e WMLScript
• XHTML MP
• JavaME
• Nativos
Martin Cooper8Tuesday, 22 May 2012
Fonte: Wikipedia
9Tuesday, 22 May 2012
e chega o iPhone
Steve Jobs
10Tuesday, 22 May 2012
11Tuesday, 22 May 2012
HTML + CSS + JAVASCRIPT
12Tuesday, 22 May 2012
• Chrome
• Firefox
• Safari
• IE
• Chrome Frame
ainda em desenvolvimento!
13Tuesday, 22 May 2012
• Novas API’s
• Multimídia embutido
• Uso off-line
• Depuração de erros
e o que promete?
14Tuesday, 22 May 2012
http://www.html5rocks.com/en/
http://html5demos.com/
15Tuesday, 22 May 2012
Semântica
16Tuesday, 22 May 2012
Canvas
17Tuesday, 22 May 2012
Canvas• 2D APIs
• 3D APIs (WebGL)
• Inline SVG
18Tuesday, 22 May 2012
Geolocation
19Tuesday, 22 May 2012
Storage
20Tuesday, 22 May 2012
Áudio e Vídeo
21Tuesday, 22 May 2012
CSS3• seletores, atributos, targets
• instruções
• webfonts
• linhas e colunas
• transforms e animations
22Tuesday, 22 May 2012
CSS3
23Tuesday, 22 May 2012
JavaScript• Ele sempre esteve entre nós!
• Nova API DOM (getElementBy...)
• History API
• FileSystem API
• Geolocation
24Tuesday, 22 May 2012
web mobile apps?• Afinal de contas, é HTML
• Portável
• Padrão aberto
• Porque é possível
25Tuesday, 22 May 2012
e ainda...• Device orientation
• Multi-touch
• Desenvolvimento produtivo
• Comunidade
• Separation of Concerns
26Tuesday, 22 May 2012
...e por último
27Tuesday, 22 May 2012
SoC
• html estrutura
• css view/estilo
• javascript lógica
28Tuesday, 22 May 2012
alguns (bons) exemplos• Financial Times
• Basecamp
• http://www.apple.com/webapps/
29Tuesday, 22 May 2012
Financial Times
30Tuesday, 22 May 2012
2. Aplicações Mobile Nativas
31Tuesday, 22 May 2012
Native mode (wikipedia)• The term native mode or native code is used in computing in two
related senses:
• to describe something running on a computer natively or in native mode meaning that it is running without any external support as contrasted to running in emulation (i.e. browser)
• Native operating system, native instruction set, etc., in application to a computer processor means that the corresponding item was implemented specifically for the given model of the computer or microprocessor, as opposed to emulation or compatibility mode.
32Tuesday, 22 May 2012
Conceito
• Native App:
• An application that is specifically written for a device platform.
33Tuesday, 22 May 2012
Devices• Feature-phones
• Smart-phones
• Tablets
• TV
What else?
34Tuesday, 22 May 2012
Plataformas Nativas• Plataformas e suas Linguagens de
Programação
• iOS => Objective-C, C
• Android => Java
• BlackBerry => Java
• Windows Mobile (Nokia) => .Net
35Tuesday, 22 May 2012
36Tuesday, 22 May 2012
37Tuesday, 22 May 2012
38Tuesday, 22 May 2012
39Tuesday, 22 May 2012
Android => Java + Dalvik
• Java é uma linguagem familiar para muitos desenvolvedores, muitas vezes é a primeira linguagem
• Gustav’s Moto:
“Anybody can cook”
• Android fornece uma excelente API
40Tuesday, 22 May 2012
Objective-C• Objective-C criada na decada de 90
(NeXT) e possui uma vasta API => produtos Apple
• Runtime C orientado a objetos
• Ganhou muita popularidade com o lançamento do iPhone e do iOS SDK
41Tuesday, 22 May 2012
C/C++• Diversos Devices
• Possivel desenvolver em C/C++ para iOS e Android
• Projetos Open-Source!!!
• UI???
42Tuesday, 22 May 2012
Características Apps Nativas
• Aparência Nativa (Native look & feel): impossível para Web por definição
• APIs: video, alarm clock, file access, push notification, ...
• Integração com aplicações: maps, mail, camera, youtube, gallery, agenda, ...
43Tuesday, 22 May 2012
Características Apps Nativas
• Integração com SO: concorrência, system events
• Melhor Performance e uso da Bateria
• Web engines, plugins (e.g. <video> codecs)
• Desenvolvimento: debugging
44Tuesday, 22 May 2012
Características Apps Nativas
• Uso “off-line”
• In-App Purchase: CC cadastrado + billing (e.g. High Noon)
• Tratamento de diferentes tamanhos e resoluções de tela (i.e. Android)
45Tuesday, 22 May 2012
Human Interface Guidelines
http://developer.android.com/guide/practices/ui_guidelines/index.htmlhttp://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf
Fonte:
46Tuesday, 22 May 2012
Armazenamento (off-line)
47Tuesday, 22 May 2012
Principais Características “ordenadas” para App Nativas
1. offline mode
2. uso dos recursos (+hardware) do device
3. experiência de uso
4. centralização das aplicacoes (base de potenciais usuários)
5. integração com outras apps
6. notificações (push) e recursos de sistema (e.g. alarme)
7. “monetization” das lojas (busca e faturamento)
8. performance e uso da bateria
48Tuesday, 22 May 2012
Domínio de Aplicações• GAMES
• Acesso a recursos nativos: ACCELEROMETER, CAMERA, COMPASS, CONTACTS, GEOLOCATION, NETWORK, NOTIFICATION, STORAGE
• NFC??????
Fonte: Google Images (http://goo.gl/7ZQLS)
49Tuesday, 22 May 2012
Native UI Kits• Cocoa Touch
• Android UI
!"#$%&"'(
)*&++",(
-./0+(
12&$!"#$(
50Tuesday, 22 May 2012
$$$• $32,639 for a simple app
• 2 months to create
• 2 weeks per feature = 4 features
• $8,160 per feature
Fonte: Pinch/Zoom (Seatle)
51Tuesday, 22 May 2012
App Store, Market, etc• “o um lugar" para encontrar aplicações
• modelo de revenue share
70/30
Fonte: Google Images (http://goo.gl/cKArV)
52Tuesday, 22 May 2012
Apple Store
Preço #Apps Games Total % TOTAL
Free 160.705 27,670 188,375 39.97%
$0.99 101.451 29,491 130,942 27.78%
$1.99 47.028 7,999 55,027 11.68%
79.43%
Fonte: http://148apps.biz/app-store-metrics/?mpage=appprice
53Tuesday, 22 May 2012
54Tuesday, 22 May 2012
Cases• Games: angry birds, plats vs zombies
• Facebook, Twitter
• Shazan
• Narizinho, AutoEsporte, Fibria, QuemCarnaval :D
55Tuesday, 22 May 2012
Cases• “We bet everything on Apple and iOS
and then Apple killed us by changing the rules in the middle of the game”
• Finantial Times (ft.com)
• Primeiro: Nativo
• Depois: Web
56Tuesday, 22 May 2012
Resumindo...• Web
- portabilidade- padrões abertos- simplicidade
• Nativas- integração hardware/plataforma- APIs novas- experiência + rica
57Tuesday, 22 May 2012
3. Aplicações Mobile Híbridas
58Tuesday, 22 May 2012
Conceito
• Hybrid App:
• An application using primarily web technologies inside a native container.
59Tuesday, 22 May 2012
Aplicações Híbridas• WebView
• WebKit
• JavaScript bridge
60Tuesday, 22 May 2012
WebView• Android e iOS
• Usa o WebKit como engine
61Tuesday, 22 May 2012
WebKit• Browser Engine
• Apple, Google, KDE, Nokia, RIM, Samsung entre outras
62Tuesday, 22 May 2012
JavaScript Bridge• Nativo pro WebView
• WebView pra Nativo
• Eventos do browser e JS com callback pro nativo
63Tuesday, 22 May 2012
JavaScript => Android
64Tuesday, 22 May 2012
Android => JavaScript
65Tuesday, 22 May 2012
Formas de Fazer• WebView e recursos nativos
• WebView dentro de frame nativo
• Transitando entre WebView e nativo
66Tuesday, 22 May 2012
cross-plataform frameworks• App Inventor• DroidDraw• Rhomobile• Appcelerator/Titanium• SproutCore• MonoTouch• JQuery Mobile• Jo• Sencha Touch• PhoneGap
67Tuesday, 22 May 2012
Appcelerator/Titanium
68Tuesday, 22 May 2012