69
Aplicações Móveis Híbridas: usando Web e Nativo juntos [email protected] (@cbsanchez) [email protected] (@wlads) 1 Tuesday, 22 May 2012

Qconsp 2011

Embed Size (px)

DESCRIPTION

Palestra sobre desenvolvimento para plataformas móveis: nativos, HTML5, híbridos.

Citation preview

Page 1: Qconsp 2011

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

Nativo juntos

[email protected] (@cbsanchez)[email protected] (@wlads)

1Tuesday, 22 May 2012

Page 2: Qconsp 2011

Agenda• Aplicações Mobile Web

• Aplicações Mobile Nativas

• Aplicações Mobile Híbridas

2Tuesday, 22 May 2012

Page 3: Qconsp 2011

1. Aplicações Mobile Web

3Tuesday, 22 May 2012

Page 4: Qconsp 2011

No início era o nativo

4Tuesday, 22 May 2012

Page 5: Qconsp 2011

e então Berners-Lee criou a web

Sir T

im B

erne

rs-L

ee

5Tuesday, 22 May 2012

Page 6: Qconsp 2011

e desde 1991

• HTML, CSS e JavaScript

• Pearl, PHP e ASP

• Java

• .NET

• Applet

6Tuesday, 22 May 2012

Page 7: Qconsp 2011

hoje na web

• Sistemas corporativos

• Google Docs

• e-Learning

• Twitter, Facebook, GitHub, Basecamp, Netflix...

7Tuesday, 22 May 2012

Page 8: Qconsp 2011

mas nós queríamos mais• WML e WMLScript

• XHTML MP

• JavaME

• Nativos

Martin Cooper8Tuesday, 22 May 2012

Page 9: Qconsp 2011

Fonte: Wikipedia

9Tuesday, 22 May 2012

Page 10: Qconsp 2011

e chega o iPhone

Steve Jobs

10Tuesday, 22 May 2012

Page 11: Qconsp 2011

11Tuesday, 22 May 2012

Page 12: Qconsp 2011

HTML + CSS + JAVASCRIPT

12Tuesday, 22 May 2012

Page 13: Qconsp 2011

• Chrome

• Firefox

• Safari

• IE

• Chrome Frame

ainda em desenvolvimento!

13Tuesday, 22 May 2012

Page 14: Qconsp 2011

• Novas API’s

• Multimídia embutido

• Uso off-line

• Depuração de erros

e o que promete?

14Tuesday, 22 May 2012

Page 15: Qconsp 2011

http://www.html5rocks.com/en/

http://html5demos.com/

15Tuesday, 22 May 2012

Page 16: Qconsp 2011

Semântica

16Tuesday, 22 May 2012

Page 17: Qconsp 2011

Canvas

17Tuesday, 22 May 2012

Page 18: Qconsp 2011

Canvas• 2D APIs

• 3D APIs (WebGL)

• Inline SVG

18Tuesday, 22 May 2012

Page 19: Qconsp 2011

Geolocation

19Tuesday, 22 May 2012

Page 20: Qconsp 2011

Storage

20Tuesday, 22 May 2012

Page 21: Qconsp 2011

Áudio e Vídeo

21Tuesday, 22 May 2012

Page 22: Qconsp 2011

CSS3• seletores, atributos, targets

• instruções

• webfonts

• linhas e colunas

• transforms e animations

22Tuesday, 22 May 2012

Page 23: Qconsp 2011

CSS3

23Tuesday, 22 May 2012

Page 24: Qconsp 2011

JavaScript• Ele sempre esteve entre nós!

• Nova API DOM (getElementBy...)

• History API

• FileSystem API

• Geolocation

24Tuesday, 22 May 2012

Page 25: Qconsp 2011

web mobile apps?• Afinal de contas, é HTML

• Portável

• Padrão aberto

• Porque é possível

25Tuesday, 22 May 2012

Page 26: Qconsp 2011

e ainda...• Device orientation

• Multi-touch

• Desenvolvimento produtivo

• Comunidade

• Separation of Concerns

26Tuesday, 22 May 2012

Page 27: Qconsp 2011

...e por último

27Tuesday, 22 May 2012

Page 28: Qconsp 2011

SoC

• html estrutura

• css view/estilo

• javascript lógica

28Tuesday, 22 May 2012

Page 29: Qconsp 2011

alguns (bons) exemplos• Financial Times

• Basecamp

• http://www.apple.com/webapps/

29Tuesday, 22 May 2012

Page 30: Qconsp 2011

Financial Times

30Tuesday, 22 May 2012

Page 31: Qconsp 2011

2. Aplicações Mobile Nativas

31Tuesday, 22 May 2012

Page 32: Qconsp 2011

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

Page 33: Qconsp 2011

Conceito

• Native App:

• An application that is specifically written for a device platform.

33Tuesday, 22 May 2012

Page 34: Qconsp 2011

Devices• Feature-phones

• Smart-phones

• Tablets

• TV

What else?

34Tuesday, 22 May 2012

Page 35: Qconsp 2011

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

Page 36: Qconsp 2011

36Tuesday, 22 May 2012

Page 37: Qconsp 2011

37Tuesday, 22 May 2012

Page 38: Qconsp 2011

38Tuesday, 22 May 2012

Page 39: Qconsp 2011

39Tuesday, 22 May 2012

Page 40: Qconsp 2011

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

Page 41: Qconsp 2011

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

Page 42: Qconsp 2011

C/C++• Diversos Devices

• Possivel desenvolver em C/C++ para iOS e Android

• Projetos Open-Source!!!

• UI???

42Tuesday, 22 May 2012

Page 43: Qconsp 2011

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

Page 44: Qconsp 2011

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

Page 45: Qconsp 2011

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

Page 46: Qconsp 2011

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

Page 47: Qconsp 2011

Armazenamento (off-line)

47Tuesday, 22 May 2012

Page 48: Qconsp 2011

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

Page 49: Qconsp 2011

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

Page 50: Qconsp 2011

Native UI Kits• Cocoa Touch

• Android UI

!"#$%&"'(

)*&++",(

-./0+(

12&$!"#$(

50Tuesday, 22 May 2012

Page 51: Qconsp 2011

$$$• $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

Page 52: Qconsp 2011

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

Page 53: Qconsp 2011

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

Page 54: Qconsp 2011

54Tuesday, 22 May 2012

Page 55: Qconsp 2011

Cases• Games: angry birds, plats vs zombies

• Facebook, Twitter

• Shazan

• Flipboard

• Narizinho, AutoEsporte, Fibria, QuemCarnaval :D

55Tuesday, 22 May 2012

Page 56: Qconsp 2011

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

Page 57: Qconsp 2011

Resumindo...• Web

- portabilidade- padrões abertos- simplicidade

• Nativas- integração hardware/plataforma- APIs novas- experiência + rica

57Tuesday, 22 May 2012

Page 58: Qconsp 2011

3. Aplicações Mobile Híbridas

58Tuesday, 22 May 2012

Page 59: Qconsp 2011

Conceito

• Hybrid App:

• An application using primarily web technologies inside a native container.

59Tuesday, 22 May 2012

Page 60: Qconsp 2011

Aplicações Híbridas• WebView

• WebKit

• JavaScript bridge

60Tuesday, 22 May 2012

Page 61: Qconsp 2011

WebView• Android e iOS

• Usa o WebKit como engine

61Tuesday, 22 May 2012

Page 62: Qconsp 2011

WebKit• Browser Engine

• Apple, Google, KDE, Nokia, RIM, Samsung entre outras

62Tuesday, 22 May 2012

Page 63: Qconsp 2011

JavaScript Bridge• Nativo pro WebView

• WebView pra Nativo

• Eventos do browser e JS com callback pro nativo

63Tuesday, 22 May 2012

Page 64: Qconsp 2011

JavaScript => Android

64Tuesday, 22 May 2012

Page 65: Qconsp 2011

Android => JavaScript

65Tuesday, 22 May 2012

Page 66: Qconsp 2011

Formas de Fazer• WebView e recursos nativos

• WebView dentro de frame nativo

• Transitando entre WebView e nativo

66Tuesday, 22 May 2012

Page 67: Qconsp 2011

cross-plataform frameworks• App Inventor• DroidDraw• Rhomobile• Appcelerator/Titanium• SproutCore• MonoTouch• JQuery Mobile• Jo• Sencha Touch• PhoneGap

67Tuesday, 22 May 2012

Page 68: Qconsp 2011

Appcelerator/Titanium

68Tuesday, 22 May 2012