PhoneGap - criando aplicações Android e iOS com HTML5

24.808 visualizações

Publicada em

Apresentação realizada na SESTINFO 2013 da Universidade Metodista de São Paulo.

Publicada em: Tecnologia
1 comentário
22 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
24.808
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2.410
Ações
Compartilhamentos
0
Downloads
403
Comentários
1
Gostaram
22
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

PhoneGap - criando aplicações Android e iOS com HTML5

  1. 1. PhoneGap: desenvolvendoaplicações multiplataformacom HTML5Rafael Sakurai@rafaelsakuraiRodrigo Cascarrolho@rodrigocasca
  2. 2. Índice•  HTML5•  Aplicação nativa•  Aplicação web•  Aplicação hibrida•  PhoneGap•  Desenvolvendo com PhoneGap•  Exemplo de aplicação Android e iOS•  Aplicações criadas com PhoneGap
  3. 3. HTML5 + CSS3 + JShttp://www.slideshare.net/rafaelsakurai/html5-sestinfo-2012http://www.slideshare.net/rodrigocasca/html5-novidades-adoo-e-mobile
  4. 4. Aplicação nativa- Acesso completo ao dispositivo.- Mais velocidade deprocessamento.- Menor tempo de resposta.- Loja.- Desenvolvimento caro.- Não é multi plataforma.
  5. 5. Aplicações web- Desenvolvimento mais barato.- Multi plataforma.- Acesso parcial ao dispositivo.- Não tem loja.
  6. 6. Aplicações hibridasKENT BECK - Multiple Mobiles (http://martinfowler.com/articles/multiMobile/ -slide 24)- Acesso a todas as opçõesdo dispositivo.- Loja.- Desenvolvimento maisbarato.- Multi plataforma.
  7. 7. Aplicações hibridas"Aplicações hibridas que oferecem umbalanceamento entre aplicações web HTML5e aplicações nativas serão usadas em maisde 50% das aplicações móveis até 2016".Gartner, 2013, http://www.gartner.com/newsroom/id/2429815Desenvolvimento Testes
  8. 8. "O PhoneGap é um framework gratuito e opensource que permite a criação de aplicaçõesmóveis usando APIs padronizadas da web"www.phonegap.com
  9. 9. PhoneGap - História2008: início - Nitobi Software2008: suporte a iPhone, Android e Blackberry 42009: suporte a Symbian e webOS2011: suporte a Windows Phone 72011: Adobe adquire a Nitobi Software2011: Código mantido pela Apache Software FoundationNovo nome : Cordova2012:PhoneGap Build
  10. 10. PhoneGap  é  a  ponte  entre  as  aplicações  web  e  os  disposi6vos  móveis.  Através  do  PhoneGap  Build  é  possível  gerar  código  na6vo  sem  a  necessidade  do  ambiente  de  desenvolvimento  de  cada  plataforma.  Apache  Cordova  é  um  conjunto  de  APIs  que  permite  que  um  desenvolvedor  de  aplica6vos  móveis  acesse  as  funções  na6vas  do  disposi6vo,  como  a  câmera  ou  o  acelerômetro,  através  do  JavaScript.  
  11. 11. PhoneGap / Cordova
  12. 12. PhoneGap APIsAccelerometer Camera CaptureCompass Connection ContactsDevice Events FileGeolocation Globalization InAppBrowserMedia Notification SplashscreenStorage
  13. 13. PhoneGap
  14. 14. API de contatofunction onDeviceReady() {var filtro = document.getElementById("idnome").value;console.log("Filtro:::::: " + filtro);var options = new ContactFindOptions();options.filter=filtro;options.multiple=true;var fields = ["displayName", "name"];navigator.contacts.find(fields, onSuccess, onError, options);}function onSuccess(contacts) {var lista = document.getElementById("idlista");ista.innerHTML = "";console.log("Qde::::" + contacts.length);for (var i=0; i<contacts.length; i++) {$("#idlista").prepend(<li data-role="itens">+contacts[i].displayName+</li>);console.log("Display Name = " + contacts[i].displayName);}$("#idlista").listview(refresh);}
  15. 15. Emulandor PhoneGapRipple  
  16. 16. Teste APP
  17. 17. Teste APP
  18. 18. Teste APP
  19. 19. Teste APP
  20. 20. DebugWeinre  
  21. 21. Estrutura do PhoneGap
  22. 22. Exemplo app comAndroid
  23. 23. Criando a aplicação./create../workspacebr.metodista.sestinfo2013ExemploSestInfoscriptdiretório pacotenome doprojeto
  24. 24. Ambiente de desenvolvimento
  25. 25. Exemplo com câmera
  26. 26. Exemplo com câmera
  27. 27. Exemplo app comiPhone
  28. 28. Criando a aplicação./create../workspace/iosbr.metodista.sestinfo2013IOS_Exemploscriptdiretório pacotenome doprojeto
  29. 29. Ambiente de desenvolvimento - iOS
  30. 30. Plugins
  31. 31. Vestibular Metodistahttps://play.google.com/store/apps/details?id=br.metodista.vestibularmetodista
  32. 32. Obrigado!Rafael Sakurai@rafaelsakuraiRodrigo Cascarrolho@rodrigocasca
  33. 33. Referênciashttp://phonegap.com/http://en.wikipedia.org/wiki/PhoneGaphttp://html5hu.wordpress.com/

×