Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Loading in …3
×
1 of 35

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

22

Share

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

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

  1. 1. PhoneGap: desenvolvendo aplicações multiplataforma com HTML5 Rafael Sakurai @rafaelsakurai Rodrigo 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 + JS http://www.slideshare.net/rafaelsakurai/html5-sestinfo-2012 http://www.slideshare.net/rodrigocasca/html5-novidades-adoo-e-mobile
  4. 4. Aplicação nativa - Acesso completo ao dispositivo. - Mais velocidade de processamento. - 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 hibridas KENT BECK - Multiple Mobiles (http://martinfowler.com/articles/multiMobile/ - slide 24) - Acesso a todas as opções do dispositivo. - Loja. - Desenvolvimento mais barato. - Multi plataforma.
  7. 7. Aplicações hibridas "Aplicações hibridas que oferecem um balanceamento entre aplicações web HTML5 e aplicações nativas serão usadas em mais de 50% das aplicações móveis até 2016". Gartner, 2013, http://www.gartner.com/newsroom/id/2429815 Desenvolvimento Testes
  8. 8. "O PhoneGap é um framework gratuito e open source que permite a criação de aplicações móveis usando APIs padronizadas da web" www.phonegap.com
  9. 9. PhoneGap - História 2008: início - Nitobi Software 2008: suporte a iPhone, Android e Blackberry 4 2009: suporte a Symbian e webOS 2011: suporte a Windows Phone 7 2011: Adobe adquire a Nitobi Software 2011: Código mantido pela Apache Software Foundation Novo nome : Cordova 2012: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 API's Accelerometer Camera Capture Compass Connection Contacts Device Events File Geolocation Globalization InAppBrowser Media Notification Splashscreen Storage
  13. 13. PhoneGap
  14. 14. API de contato function 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 PhoneGap Ripple  
  16. 16. Teste APP
  17. 17. Teste APP
  18. 18. Teste APP
  19. 19. Teste APP
  20. 20. Debug Weinre  
  21. 21. Estrutura do PhoneGap
  22. 22. Exemplo app com Android
  23. 23. Criando a aplicação ./create ../workspace br.metodista.sestinfo2013 ExemploSestInfo script diretório pacote nome do projeto
  24. 24. Ambiente de desenvolvimento
  25. 25. Exemplo com câmera
  26. 26. Exemplo com câmera
  27. 27. Exemplo app com iPhone
  28. 28. Criando a aplicação ./create ../workspace/ios br.metodista.sestinfo2013 IOS_Exemplo script diretório pacote nome do projeto
  29. 29. Ambiente de desenvolvimento - iOS
  30. 30. Plugins
  31. 31. Vestibular Metodista https://play.google.com/store/apps/details? id=br.metodista.vestibularmetodista
  32. 32. Obrigado! Rafael Sakurai @rafaelsakurai Rodrigo Cascarrolho @rodrigocasca
  33. 33. Referências http://phonegap.com/ http://en.wikipedia.org/wiki/PhoneGap http://html5hu.wordpress.com/

×