Projetando	
  Mobile
PhoneGAP	
  
!
By	
  Igor	
  Portela
04/04/14 ‹#›
POR	
  QUE	
  MOBILE?
Quem sou eu?
• Especialista em Mobilidade e Sistemas Embarcados –
Estácio de Sá
• Certi...
Números	
  Gerais
	
  	
  
• 73%	
  não	
  saem	
  de	
  casa	
  sem	
  seus	
  dispositivos	
  móveis.	
  
!
• 27	
  milh...
04/04/14 ‹#›
86%
Comunicação
61%	
  
manter-­‐se
informado
92%
Entretenimento
Usam redes sociais
(atualizam status, verifi...
O	
  Uso	
  de	
  Aplicativos
	
  	
  
• 14	
  aplicativos	
  em	
  média	
  instalados	
  no	
  smartphone.	
  
!
• 6	
  ...
Mobilidade	
  possibilita:	
  Interações
!604/04/14
“…
88%	
  usam	
  
smartphones	
  
quando	
  	
  
…”
15%
Ouvem
Música
...
Mobilidade	
  possibilita:	
  Interações
	
  	
  
• 45%	
  pesquisaram	
  no	
  smartphone	
  e	
  depois	
  compraram	
  ...
Mobilidade	
  possibilita:	
  VENDAS
	
  	
  
• 4%	
  viram	
  ao	
  usar	
  mecanismos	
  de	
  pesquisas.	
  
!
• 42%	
 ...
!904/04/14
“…Ou	
  seja!	
  MOBILE	
  
É…”
!1004/04/14
“…Ou	
  seja!	
  MOBILE	
  
É…”
Pensando	
  mobile
Contexto	
  mobile	
  é	
  totalmente	
  diferente	
  do	
  contexto	
  desktop…	
  por	
  isso	
  
dev...
Pensando	
  mobile
!1204/04/14
Desktop
Pensando	
  mobile
!1304/04/14
Desktop
Pensando	
  mobile
!1404/04/14
Desktop
Pensando	
  mobile
!1504/04/14
Desktop
Pensando	
  mobile
!1604/04/14
Desktop
Pensando	
  mobile
!1704/04/14
Desktop
Pensando	
  mobile
!1804/04/14
Desktop
Pensando	
  mobile
!1904/04/14
Desktop
Pensando	
  mobile
!2004/04/14
Desktop
Pensando	
  mobile
!2104/04/14
Desktop
Pensando	
  mobile
!2204/04/14
Desktop
Pensando	
  mobile
!2304/04/14
Mobile
Pensando	
  mobile
!2404/04/14
Mobile
Pensando	
  mobile
!2504/04/14
Mobile
Pensando	
  mobile
!2604/04/14
Mobile
Pensando	
  mobile
!2704/04/14
Mobile
Pensando	
  mobile
!2804/04/14
Mobile
Pensando	
  mobile
• Espaço	
  menor	
  que	
  do	
  desktop…	
  
!
• Isso	
  é	
  um	
  ponto	
  positivo	
  ao	
  desenv...
04/04/14 ‹#›
OK!	
  VAMOS	
  AO	
  PROJETO	
  MOBILE!	
  :D
04/04/14 ‹#›
1
Pesquisa,	
  
Pesquisa,	
  
Pesquisa!
Tipos	
  de	
  Pesquisas
• Benchmarking	
  
!
• Questionários	
  
!
• Entrevistas	
  
!
• Pesquisa	
  de	
  opinião
04/04/...
Tipos	
  de	
  Pesquisas:	
  Benchmarking
!3304/04/14
04/04/14 ‹#›
2
Concepção
Concepção
• Momento	
  VIAGEM!	
  
!
• Brainstorms	
  
!
• Uso	
  e	
  análises	
  de	
  produtos	
  semelhantes	
  
!
• D...
Concepção
• Momento	
  VIAGEM!	
  
!
• Brainstorms	
  
!
• Uso	
  e	
  análises	
  de	
  produtos	
  semelhantes	
  
!
• D...
Concepção
• Momento	
  VIAGEM!	
  
!
• Brainstorms	
  
!
• Uso	
  e	
  análises	
  de	
  produtos	
  semelhantes	
  
!
• D...
Concepção
!3804/04/14
04/04/14 ‹#›
3	
  
Arquitetura	
  da	
  
Informação
Arquitetura	
  da	
  Informação
• Desenvolver	
  as	
  melhores	
  navegações	
  e	
  interações	
  para	
  usuários	
  de...
Arquitetura	
  da	
  Informação
Guidelines	
  existentes:

• Android	
  	
  

http://developer.android.com/design/index.ht...
Arquitetura	
  da	
  Informação
!4204/04/14
Arquitetura	
  da	
  Informação
!4304/04/14
Arquitetura	
  da	
  Informação
!4404/04/14
04/04/14 ‹#›
4
Design
Visual
Design	
  Visual:	
  Processo
!4604/04/14
Diagrama:	
  Jesse	
  James	
  Garrett
Design	
  Visual:	
  Processo
!4704/04/14
Design	
  Visual:	
  Processo
• Painel	
  visual:	
  Conceito
04/04/14 !48
Design	
  Visual:	
  Processo
• Painel	
  visual:	
  Público	
  Alvo
04/04/14 !49
Design	
  Visual:	
  Processo
• Pesquisa	
  de	
  referências	
  visuais
04/04/14 !50
Design	
  Visual:	
  Processo
!5104/04/14
Forma
Design	
  Visual:	
  Processo
!5204/04/14
Forma Cor
Design	
  Visual:	
  Processo
!5304/04/14
Forma Cor Tipografia
Design	
  Visual:	
  Processo
!5404/04/14
?
!55
Design	
  Visual
!56
Design	
  Visual:	
  Processo
Forma
!57
Design	
  Visual:	
  Processo
Forma
Simbólico
• Ícones
!58
Design	
  Visual:	
  Processo
Forma
Simbólico
Físico
• Ícones
• Área	
  de	
  toque
!59
Design	
  Visual:	
  Processo
Cor
!60
Design	
  Visual:	
  Processo
Contraste
Cor
!61
Design	
  Visual:	
  Processo
Contraste
Feedback
Cor
!62
Design	
  Visual:	
  Processo
Tipografia
!63
Design	
  Visual:	
  Processo
Legibilidade
Tipografia
!64
Design	
  Visual:	
  Processo
Legibilidade
Hierarquia
Tipografia
Design	
  Visual:	
  Resoluções
• IOS:	
  iPhone
!65
iPhones	
  4	
  e	
  4s	
  640	
  px	
  x	
  960	
  px iPhones	
  5:	...
Design	
  Visual:	
  Resoluções
• Android
!66
!67
Design	
  Visual
“	
  Um	
  objetivo	
  geral	
  do	
  design	
  de	
  interação	
  
é	
  desenvolver	
  sistemas	
  i...
04/04/14 ‹#›
5	
  
Implementação
Implementação
• Planejar	
  seu	
  cronograma,	
  pois	
  além	
  do	
  desenvolvimento	
  e	
  testes,	
  seu	
  
aplicat...
Nativo	
  vs	
  HTML5
• É	
  um	
  assunto	
  polêmico!!!	
  
!
• As	
  duas	
  abordagens	
  tem	
  pontos	
  positivos	
...
!71
Nativo	
  vs	
  HTML5:	
  Custo
Nativo
HTML5
!72
App	
  Nativo	
  vs	
  HTML5
Nativo HTML5
Custo X
Nativo	
  vs	
  HTML5:	
  Performance
Consegue	
  aproveitar	
  ao	
  máximo	
  os	
  recursos	
  do	
  hardware
!73
Nativ...
!74
App	
  Nativo	
  vs	
  HTML5
Nativo HTML5
Custo X
Performance X
!75
Nativo	
  vs	
  HTML5:	
  Tempo	
  de	
  Desenvolvimento
Nativo
HTML5
!76
App	
  Nativo	
  vs	
  HTML5
Nativo HTML5
Custo X
Performance X
Tempo	
  de	
  Desenvolvimento X
!77
Nativo	
  vs	
  HTML5:	
  Divulgação
Nativo
HTML5
!78
App	
  Nativo	
  vs	
  HTML5
Nativo HTML5
Custo X
Performance X
Tempo	
  de	
  Desenvolvimento X
Divulgação	
  (App	
 ...
04/04/14 ‹#›
OK…

ENTÃO	
  EU	
  FAÇO	
  UM	
  APLICATIVO	
  NATIVO	
  OU	
  EM	
  HTML5???
A	
  resposta	
  é:
• Não	
  existe	
  resposta	
  certa!	
  
!
• Existe	
  o	
  bom	
  senso	
  
!
• Escolher	
  a	
  tec...
Exemplo	
  1
Eu	
  preciso	
  de	
  um	
  aplicativo	
  que:	
  
!
• Liste	
  todos	
  os	
  eventos	
  da	
  Campus	
  Pa...
Exemplo	
  2:	
  
Eu	
  preciso	
  de	
  um	
  aplicativo	
  que:	
  
!
• O	
  usuário	
  possa	
  tirar	
  uma	
  foto	
 ...
!83
Final	
  do	
  Final
“…	
  Testar	
  uma	
  versão	
  
beta	
  com	
  os	
  usuários	
  
	
  em	
  pontencial	
  
…”
“...
!84
Quer saber mais?
!
!
Então lá vai… vamos começar
com PhoneGap!
O	
  que	
  é	
  PhoneGap?
PhoneGap é uma soluções de código aberto
para a construção de aplicativos móveis multi-
platafo...
Um	
  pouco	
  da	
  história…	
  
Iniciado por Nitobi Software; 	

Adobe adquire Nitobi em 2011; 	

PhoneGap foi doado a ...
Apache	
  Cordova	
  e	
  PhoneGap
PhoneGap é uma distribuição do
Apache Cordova 	

Apache Cordova é o motor que
move o Ph...
Por	
  quê	
  o	
  phonegap?
!88
Por	
  quê	
  o	
  phonegap?
!
Problema: muitas plataformas, aparelhos e
lojas de aplicativos.
!
Solução: utilizar o desen...
Plataformas?
!90
Mais…
!91
PhoneGap é uma ponte entre o browser e
as APIs disponíveis no aparelho. Permite
acesso a recursos que normalment...
Recursos
!92
Arquitetura
!93
Arquitetura
!94
Mãos	
  à	
  obra
Veja	
  se	
  está	
  na	
  sua	
  máquina:	
  
!
•Eclipse	
  
•Android	
  SDK	
  
•PhoneGap
!95
• Baixe	
  o	
  Phonegap2.9.0	
  
!
• Download	
  no	
  link	
  http:	
  //phonegap.com/install/
!96
Mãos	
  à	
  obra
!97
Mãos	
  à	
  obra
!98
Mãos	
  à	
  obra
!99
Mãos	
  à	
  obra
• Estrutura	
  do	
  projeto
!100
Mãos	
  à	
  obra
!101
Mãos	
  à	
  obra
Mãos	
  à	
  obra
!103
Mãos	
  à	
  obra
!104
Mãos	
  à	
  obra
!105
DeviceReady
!106
DeviceReady
!107
Eventos
!108
Eventos
Upcoming SlideShare
Loading in …5
×

Projetando Mobile - PhoneGap

679 views

Published on

Aula na Universidade Estácio de Sá => Pós-graduação em Mobilidade e Sistemas Embarcados - 2014

Published in: Devices & Hardware
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
679
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
28
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Projetando Mobile - PhoneGap

  1. 1. Projetando  Mobile PhoneGAP   ! By  Igor  Portela
  2. 2. 04/04/14 ‹#› POR  QUE  MOBILE? Quem sou eu? • Especialista em Mobilidade e Sistemas Embarcados – Estácio de Sá • Certificado LPIC1 (Linux Professional Institute Certified), • CLA (Novell Certified Linux Administrator), • Novell Datacenter Technical Specialist. • CEO e fundador da Wake Up Digital. • Palestrante IEEE e Google I/O Extend • Curador do Startup Genome João Pessoa • Organizador de dois Startups Weekends
  3. 3. Números  Gerais     • 73%  não  saem  de  casa  sem  seus  dispositivos  móveis.   ! • 27  milhões  de  Brasileiros  tem  smartphones.   ! • 42%  usam  internet  em  seus  smartphones  pelo  menos  1x  ao  dia…   Destes  59%  para  acessar  redes  sociais,  57%  para  acessar  emails  e  55%   mecanismos  de  pesquisas.   ! • 27%  disseram  preferir  ficar  sem  TV  do  que  seu  celular.   ! • 50%  pesquisam  em  seus  smartphones  todos  os  dias…  destes  48%   procura  informações  sobre  produtos,  29%  restaurantes,  pubs  e  bares   e  28%  viagens. 04/04/14
  4. 4. 04/04/14 ‹#› 86% Comunicação 61%   manter-­‐se informado 92% Entretenimento Usam redes sociais (atualizam status, verificam mensagem, visitam páginas de amigos) 72% 71% E-mails (enviaram ou receberam) Leram notícias em jornais, portais e revistas. 57% 21% Analisaram websites, blogs e fóruns. Navegaram na internet 79% 71% Ouviram música 46% Assistiram vídeos (Youtube) 39% Usaram jogos Dados:  Our  Mobile  Planet  by  Google
  5. 5. O  Uso  de  Aplicativos     • 14  aplicativos  em  média  instalados  no  smartphone.   ! • 6  aplicativos  usados  nos  últimos  30  dias.   ! • 2  aplicativos  pagos  instalados  em  média.   ! • 88%  dos  usuários  acessam  Redes  Sociais  via  apps.   ! • 50%  pesquisam  em  seus  smartphones  todos  os  dias…  destes  48%   procura  informações  sobre  produtos,  29%  restaurantes,  pubs  e  bares   e  28%  viagens. 04/04/14 !5Dados:  Our  Mobile  Planet  by  Google
  6. 6. Mobilidade  possibilita:  Interações !604/04/14 “… 88%  usam   smartphones   quando     …” 15% Ouvem Música 46% Assistem TV 55% Usam a Internet 26% Leem revistas ou jornais 15% Leem livros 29% Assistem a filmes 18% Jogam videogames Dados:  Our  Mobile  Planet  by  Google
  7. 7. Mobilidade  possibilita:  Interações     • 45%  pesquisaram  no  smartphone  e  depois  compraram  pelo   computador.   ! • 30%  pesquisaram  no  smartphone  e  depois  compraram  em  lojas   físicas.   ! • 31%  dos  usuários  de  smartphones  compraram  produto  ou  serviço  em   seus  aparelhos.   ! • 54%  desses  compradores  fizeram  uma  compra  no  mês  passado. 04/04/14 !7Dados:  Our  Mobile  Planet  by  Google
  8. 8. Mobilidade  possibilita:  VENDAS     • 4%  viram  ao  usar  mecanismos  de  pesquisas.   ! • 42%  viram  em  um  website.   ! • 31%  viram  em  um  aplicativo.   ! • 25%  viram  ao  assistir  um  vídeo.   ! • 24%  em  um  web  site  para  vídeos.   ! • 16%  em  um  website  varejista. Onde  os  anúncios  para  celular  são  mais  notados 04/04/14 !8Dados:  Our  Mobile  Planet  by  Google
  9. 9. !904/04/14 “…Ou  seja!  MOBILE   É…”
  10. 10. !1004/04/14 “…Ou  seja!  MOBILE   É…”
  11. 11. Pensando  mobile Contexto  mobile  é  totalmente  diferente  do  contexto  desktop…  por  isso   devemos  pensar  diferente  também!   ! No  mundo  mobile  (devido  à  limitações)  todos  somos  daltônicos  e   sofremos  mal  de  Parkinson.   ! Atentar  a:     Interferências  de  pessoas,  sons,  visuais,  etc;     Tempo  dedicado  àquela  interação;     Culturas  diferentes  dos  diversos  usuários;     Devices  e  sistemas  operacionais  diferentes. 04/04/14 !11
  12. 12. Pensando  mobile !1204/04/14 Desktop
  13. 13. Pensando  mobile !1304/04/14 Desktop
  14. 14. Pensando  mobile !1404/04/14 Desktop
  15. 15. Pensando  mobile !1504/04/14 Desktop
  16. 16. Pensando  mobile !1604/04/14 Desktop
  17. 17. Pensando  mobile !1704/04/14 Desktop
  18. 18. Pensando  mobile !1804/04/14 Desktop
  19. 19. Pensando  mobile !1904/04/14 Desktop
  20. 20. Pensando  mobile !2004/04/14 Desktop
  21. 21. Pensando  mobile !2104/04/14 Desktop
  22. 22. Pensando  mobile !2204/04/14 Desktop
  23. 23. Pensando  mobile !2304/04/14 Mobile
  24. 24. Pensando  mobile !2404/04/14 Mobile
  25. 25. Pensando  mobile !2504/04/14 Mobile
  26. 26. Pensando  mobile !2604/04/14 Mobile
  27. 27. Pensando  mobile !2704/04/14 Mobile
  28. 28. Pensando  mobile !2804/04/14 Mobile
  29. 29. Pensando  mobile • Espaço  menor  que  do  desktop…   ! • Isso  é  um  ponto  positivo  ao  desenvolver  um  projeto  de  Design  para   mobile.   ! • Pouco  espaço  força  priorizar  o  que  é  mais  importante  no  conteúdo   que  deve  ser  exibido,  solucionando  de  uma  forma  mais  rápida  o   “problema”.   ! • Ao  desenvolver  para  mobile,  menos  é  mais! 04/04/14 !29
  30. 30. 04/04/14 ‹#› OK!  VAMOS  AO  PROJETO  MOBILE!  :D
  31. 31. 04/04/14 ‹#› 1 Pesquisa,   Pesquisa,   Pesquisa!
  32. 32. Tipos  de  Pesquisas • Benchmarking   ! • Questionários   ! • Entrevistas   ! • Pesquisa  de  opinião 04/04/14 !32
  33. 33. Tipos  de  Pesquisas:  Benchmarking !3304/04/14
  34. 34. 04/04/14 ‹#› 2 Concepção
  35. 35. Concepção • Momento  VIAGEM!   ! • Brainstorms   ! • Uso  e  análises  de  produtos  semelhantes   ! • Definição  do  que  vai  ter  de  conteúdo,  informação  e  funcionalidades. 04/04/14 !35
  36. 36. Concepção • Momento  VIAGEM!   ! • Brainstorms   ! • Uso  e  análises  de  produtos  semelhantes   ! • Definição  do  que  vai  ter  de  conteúdo,  informação  e  funcionalidades. 04/04/14 !36
  37. 37. Concepção • Momento  VIAGEM!   ! • Brainstorms   ! • Uso  e  análises  de  produtos  semelhantes   ! • Definição  do  que  vai  ter  de  conteúdo,  informação  e  funcionalidades. 04/04/14 !37
  38. 38. Concepção !3804/04/14
  39. 39. 04/04/14 ‹#› 3   Arquitetura  da   Informação
  40. 40. Arquitetura  da  Informação • Desenvolver  as  melhores  navegações  e  interações  para  usuários  de   dispositivos  móveis.   ! • Priorizar  as  informações  e  conteúdo,  organizando-­‐os  de  maneira  clara   e  de  fácil  compreensão.   ! • Pensar  nas  plataformas  e  guidelines  existentes.   ! • Desenvolver  protótipos  navegáveis  para  visualização  das  navegações.   ! • Testar,  testar  e  testar  em  protótipo  (teste  de  usabilidade  em   protótipo,  grupo  de  foco,  etc). 04/04/14 !40
  41. 41. Arquitetura  da  Informação Guidelines  existentes:
 • Android    
 http://developer.android.com/design/index.html   ! • IOS
 http://developer.apple.com/library/ios/#documentation/ userexperience/conceptual/mobilehig/Introduction/ Introduction.html   ! • Windows  Phone
 http://msdn.microsoft.com/en-­‐us/library/windowsphone/design 04/04/14 !41
  42. 42. Arquitetura  da  Informação !4204/04/14
  43. 43. Arquitetura  da  Informação !4304/04/14
  44. 44. Arquitetura  da  Informação !4404/04/14
  45. 45. 04/04/14 ‹#› 4 Design Visual
  46. 46. Design  Visual:  Processo !4604/04/14 Diagrama:  Jesse  James  Garrett
  47. 47. Design  Visual:  Processo !4704/04/14
  48. 48. Design  Visual:  Processo • Painel  visual:  Conceito 04/04/14 !48
  49. 49. Design  Visual:  Processo • Painel  visual:  Público  Alvo 04/04/14 !49
  50. 50. Design  Visual:  Processo • Pesquisa  de  referências  visuais 04/04/14 !50
  51. 51. Design  Visual:  Processo !5104/04/14 Forma
  52. 52. Design  Visual:  Processo !5204/04/14 Forma Cor
  53. 53. Design  Visual:  Processo !5304/04/14 Forma Cor Tipografia
  54. 54. Design  Visual:  Processo !5404/04/14 ?
  55. 55. !55 Design  Visual
  56. 56. !56 Design  Visual:  Processo Forma
  57. 57. !57 Design  Visual:  Processo Forma Simbólico • Ícones
  58. 58. !58 Design  Visual:  Processo Forma Simbólico Físico • Ícones • Área  de  toque
  59. 59. !59 Design  Visual:  Processo Cor
  60. 60. !60 Design  Visual:  Processo Contraste Cor
  61. 61. !61 Design  Visual:  Processo Contraste Feedback Cor
  62. 62. !62 Design  Visual:  Processo Tipografia
  63. 63. !63 Design  Visual:  Processo Legibilidade Tipografia
  64. 64. !64 Design  Visual:  Processo Legibilidade Hierarquia Tipografia
  65. 65. Design  Visual:  Resoluções • IOS:  iPhone !65 iPhones  4  e  4s  640  px  x  960  px iPhones  5:  640  px  x  1136  px
  66. 66. Design  Visual:  Resoluções • Android !66
  67. 67. !67 Design  Visual “  Um  objetivo  geral  do  design  de  interação   é  desenvolver  sistemas  interativos  que   provoquem  respostas  positivas  por  parte   dos  usuários,  como  sentir-­‐se  à  vontade,   confortável  e  apreciar  a  experiência  de   estar  utilizando  tais  sistemas.  ” Preece.  Design  de  interação:  Além  da  interação  homem-­‐computador
  68. 68. 04/04/14 ‹#› 5   Implementação
  69. 69. Implementação • Planejar  seu  cronograma,  pois  além  do  desenvolvimento  e  testes,  seu   aplicativo  passará  por  revisão  nas  App  Stores  (  Apple  Store,  Google   Play,  Windows  Store)  e  estará  sujeita  a  reprovação   ! • Definir  qual  é  a  tecnologia  que  será  utilizada  para  o  desenvolvimento   do  aplicativo.  Nativo  vs.  HTML5   !69
  70. 70. Nativo  vs  HTML5 • É  um  assunto  polêmico!!!   ! • As  duas  abordagens  tem  pontos  positivos  e  negativos   ! • Vamos  ver  algumas  comparações !70
  71. 71. !71 Nativo  vs  HTML5:  Custo Nativo HTML5
  72. 72. !72 App  Nativo  vs  HTML5 Nativo HTML5 Custo X
  73. 73. Nativo  vs  HTML5:  Performance Consegue  aproveitar  ao  máximo  os  recursos  do  hardware !73 Nativo HTML5 Acesso  a  recursos  é  limitado  pela  capacidade  de  processamento  do   Browser/Web  View
  74. 74. !74 App  Nativo  vs  HTML5 Nativo HTML5 Custo X Performance X
  75. 75. !75 Nativo  vs  HTML5:  Tempo  de  Desenvolvimento Nativo HTML5
  76. 76. !76 App  Nativo  vs  HTML5 Nativo HTML5 Custo X Performance X Tempo  de  Desenvolvimento X
  77. 77. !77 Nativo  vs  HTML5:  Divulgação Nativo HTML5
  78. 78. !78 App  Nativo  vs  HTML5 Nativo HTML5 Custo X Performance X Tempo  de  Desenvolvimento X Divulgação  (App  Store) X
  79. 79. 04/04/14 ‹#› OK…
 ENTÃO  EU  FAÇO  UM  APLICATIVO  NATIVO  OU  EM  HTML5???
  80. 80. A  resposta  é: • Não  existe  resposta  certa!   ! • Existe  o  bom  senso   ! • Escolher  a  tecnologia  que  melhor  atenda  sua  necessidade,  esta  é  a   resposta  correta !80
  81. 81. Exemplo  1 Eu  preciso  de  um  aplicativo  que:   ! • Liste  todos  os  eventos  da  Campus  Party   ! • Exiba  as  informações  de  todos  os  palestrantes,  como  foto  e  descrição   ! • Mostre  as  perguntas  frequentes    sobre  o  evento   ! • Exiba  um  mapa  do  evento  e  acampamento !81
  82. 82. Exemplo  2:   Eu  preciso  de  um  aplicativo  que:   ! • O  usuário  possa  tirar  uma  foto  com  o  dispositivo     ! • Processe  a  imagem  para  aplicar  diversos  filtros  na  foto   ! • O  usuário  tenha  a  possibilidade  de  compartilhar  essa  foto  por  redes   sociais  ou  bluetooth !82
  83. 83. !83 Final  do  Final “…  Testar  uma  versão   beta  com  os  usuários    em  pontencial   …” “…  Corrigir  eventuais  bugs   …” “…  Fazer  atualizações   para  adicionar  novas   funcionalidades  …”
  84. 84. !84 Quer saber mais? ! ! Então lá vai… vamos começar com PhoneGap!
  85. 85. O  que  é  PhoneGap? PhoneGap é uma soluções de código aberto para a construção de aplicativos móveis multi- plataformas com tecnologias web padrão como HTML, JavaScript e CSS !85
  86. 86. Um  pouco  da  história…   Iniciado por Nitobi Software; Adobe adquire Nitobi em 2011; PhoneGap foi doado a Fundação Apache Software; Inicialmente chamado Apache Callback; Depois renomeado para Apache Cordova; http://cordova.apache.org/ !86
  87. 87. Apache  Cordova  e  PhoneGap PhoneGap é uma distribuição do Apache Cordova Apache Cordova é o motor que move o PhoneGap PhoneGap poderá possuir outras 
 ferramentas da Adobe que não seriam apropriadas ao Projeto Apache ○ PhoneGap Build !87
  88. 88. Por  quê  o  phonegap? !88
  89. 89. Por  quê  o  phonegap? ! Problema: muitas plataformas, aparelhos e lojas de aplicativos. ! Solução: utilizar o desenvolvimento web • Multi plataforma; • Padrões abertos; • Código aberto. !89
  90. 90. Plataformas? !90
  91. 91. Mais… !91 PhoneGap é uma ponte entre o browser e as APIs disponíveis no aparelho. Permite acesso a recursos que normalmente não são acessíveis para o browser sozinho.
  92. 92. Recursos !92
  93. 93. Arquitetura !93
  94. 94. Arquitetura !94
  95. 95. Mãos  à  obra Veja  se  está  na  sua  máquina:   ! •Eclipse   •Android  SDK   •PhoneGap !95
  96. 96. • Baixe  o  Phonegap2.9.0   ! • Download  no  link  http:  //phonegap.com/install/ !96 Mãos  à  obra
  97. 97. !97 Mãos  à  obra
  98. 98. !98 Mãos  à  obra
  99. 99. !99 Mãos  à  obra
  100. 100. • Estrutura  do  projeto !100 Mãos  à  obra
  101. 101. !101 Mãos  à  obra
  102. 102. Mãos  à  obra
  103. 103. !103 Mãos  à  obra
  104. 104. !104 Mãos  à  obra
  105. 105. !105 DeviceReady
  106. 106. !106 DeviceReady
  107. 107. !107 Eventos
  108. 108. !108 Eventos

×