O documento discute o desenvolvimento de aplicativos móveis híbridos com HTML5. Apresenta as vantagens de se usar uma abordagem multiplataforma e discute frameworks como PhoneGap, jQuery Mobile e Sencha Touch que permitem a criação de aplicativos híbridos com uma única base de código para vários sistemas móveis.

1. Desenvolvimento híbrido de
apps mobile com HTML5
Loiane Groner
http://loiane.com

2. Me, Myself & I
•Gerente de Desenv Projetos e Sencha coach @Citibank
•8+ XP TI
•Java JUG Leader
•Sencha Community Leader
•http://loiane.com
•@loiane

3. packpub.com ou
amazon.com

4. Porque
Mobile?

7. 2005

8. 2013

10. #changeBrazil

11. Porque Multiplataforma?

19. App Nativa

20. App Nativa
Lógica
de negó
cio
Web Server
tp://
ht
Java/
PHP/
Ruby/C#
App Nativa
Arquivos Banco de
Imagens/
Dados
Documentos
UI e de
Dispositivo
uta gica
xec
e
) ló
ma cio
lgu egó
(a
n
Backend

22. $99 anuais
$25
$0
$19 - $99 anuais

23. Você precisa aprender…

24. Boa Sorte!

27. Acesso
Device
Nativo
Performance
Tempo
Desenvolvimento
App
Store
Cross
Platform
Sim
Sim
Caro
Sim
Não
Web
Parcial
Sim*
Ótimo
Não
Sim
Cliente
Parcial
Sim*
Ótimo
Não
Sim
Híbrido
Sim
Sim*
Ótimo*
Sim
Sim*

28. Acesso
Device
Nativo
Performance
Tempo
Desenvolvimento
App
Store
Cross
Platform
Sim
Sim
Caro
Sim
Não
Web
Parcial
Sim*
Ótimo
Não
Sim
Cliente
Parcial
Sim*
Ótimo
Não
Sim
Híbrido
Sim
Sim*
Ótimo*
Sim
Sim*
Interpretado Não é o foco da palestra

29. joApp
Wink Toolkit

30. joApp
Wink Toolkit

32. Web App

33. Server Side Web
Execut
a UI e
Lógica
de negó
cio
Web Server
tp://
ht
Java/
PHP/
Ruby/C#
Web Browser
Arquivos Banco de
Imagens/
Dados
Documentos
Dispositivo
um
nas dor
Ape riza
de
ren
Backend

38. •
Tem o JQuery como base

39. •
Tem o JQuery como base
•
Estrutura Multi-Page

40. •
Tem o JQuery como base
•
Estrutura Multi-Page
•
Sintaxe Simples

41. •
Tem o JQuery como base
•
Estrutura Multi-Page
•
Sintaxe Simples
•
Suporte a Temas

42. •
Tem o JQuery como base
•
Estrutura Multi-Page
•
Sintaxe Simples
•
Suporte a Temas
•
Web Page App

44. • JQuery
(jquery.com)
• JQuery
Mobile (jquerymobile.com)
• Editor
de texto (o de sua preferência!)
• WebServer
• Browser
(Apache/Xampp, IIS, etc)
(o de sua preferência!)
• Emuladores
Phone 8)
• Aparelhos
(Android, iOS, Blackberry, Windows
para testes!*

45. http://jquerymobile.com/demos/1.2.0/docs/about/getting-started.html

49. •
Primeiro Framework HTML5 Mobile do Mercado!

50. •
Primeiro Framework HTML5 Mobile do Mercado!
•
Estrutura Single-Page app

51. •
Primeiro Framework HTML5 Mobile do Mercado!
•
Estrutura Single-Page app
•
Curva de aprendizado não tão simples

52. •
Primeiro Framework HTML5 Mobile do Mercado!
•
Estrutura Single-Page app
•
Curva de aprendizado não tão simples
•
MVC

53. •
Primeiro Framework HTML5 Mobile do Mercado!
•
Estrutura Single-Page app
•
Curva de aprendizado não tão simples
•
MVC
•
Suporte a Temas (Sass e Compass)

54. •
Primeiro Framework HTML5 Mobile do Mercado!
•
Estrutura Single-Page app
•
Curva de aprendizado não tão simples
•
MVC
•
Suporte a Temas (Sass e Compass)
•
Web Page App , Client Side App, Hybrid App

56. • Sencha Touch
• Sencha
• Editor
SDK (sencha.com)
Cmd (sencha.com)
de texto (o de sua preferência!)
• WebServer
• Browser
(Apache/Xampp, IIS, etc)
(Safari, Chrome, IE 10)
• Emuladores
Phone 8)
• Aparelhos
(Android, iOS, Blackberry, Windows
para testes!*

57. $ cd /path/to/sencha-touch-2-sdk
$ sencha generate app MyApp /path/to/www/myapp

63. App Client Side Nativa

64. sencha app package run
<configFile.json>

66. Client Side Web
Web Browser
JavaScript
Arquivos
Imagens/
Documentos
Lógica
de negó
cio
Web Server
ttp:/
h
/
Banco
de Dados
caching
UI e de
Dispositivo
uta gica
xec
e
) ló
ma cio
lgu egó
(a
n
Java/
PHP/
Ruby/C#
Arquivos Banco de
Imagens/
Dados
Documentos
Backend

67. App Híbrida

68. Porque Híbrido?

69. E vos declaro
Apps Mobile Híbridas

70. PhoneGap

73. App Híbrida
App Nativa
Código Nativo
Interpretador
Lógica
de negó
cio
Web Server
/
ttp:/
h
Java/
PHP/
Ruby/C#
://
tp
ht
Ponte
JavaScript
UI e de
Dispositivo
uta gica
xec
e
) ló
ma cio
lgu egó
(a
n
Arquivos Banco de
Imagens/
Dados
Documentos
Backend

77. http://nodejs.org/

78. $ sudo npm install -g phonegap

79. $ phonegap create hello com.example.hello HelloWorld

80. $ phonegap build ios
[phonegap] detecting iOS SDK environment...
[phonegap] using the local environment
[phonegap] compiling iOS...
[phonegap] successfully compiled iOS app

81. $ phonegap run android
[phonegap] detecting Android SDK environment...
[phonegap] using the local environment
[phonegap] compiling Android...
[phonegap] successfully compiled Android app
[phonegap] trying to install app onto device
[phonegap] no device was found
[phonegap] trying to install app onto emulator
[phonegap] successfully installed onto emulator

84. Desenvolva
Desenvolva
Híbrido
Teste
Teste
Build
Build
{
Desenvolva
Build
Teste
Build

85. +

87. http://www.sencha.com/apps/
http://phonegap.com/app/

90. Build
Otimizado
Agrega Valor!

91. http://browserdiet.com/

92. Demo

95. Threads

96. #FAIL

98. <div id="jogador">

99. http://phonegap.com/app/fruit-salad/

100. http://loiane.com
facebook.com/loianegroner
@loiane
https://github.com/loiane
youtube.com/user/Loianeg

102. Obrigada!
http://loiane.com