Aplicações Móveis Híbridas: usando Web e

Nativo juntos

cristiano@lab360.com.br (@cbsanchez)wladimir@lab360.com.br (@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

• Flipboard

• 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

cristiano@lab360.com.br@cbsanchez

wladimir@lab360.com.br@wlads

@lab_360

69Tuesday, 22 May 2012