Your SlideShare is downloading. ×
PhoneGap - criando aplicações Android e iOS com HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

17,566
views

Published on

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

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

Published in: Technology

0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
17,566
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
235
Comments
0
Likes
11
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. PhoneGap: desenvolvendoaplicações multiplataformacom HTML5Rafael Sakurai@rafaelsakuraiRodrigo Cascarrolho@rodrigocasca
  • 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. HTML5 + CSS3 + JShttp://www.slideshare.net/rafaelsakurai/html5-sestinfo-2012http://www.slideshare.net/rodrigocasca/html5-novidades-adoo-e-mobile
  • 4. Aplicação nativa- Acesso completo ao dispositivo.- Mais velocidade deprocessamento.- Menor tempo de resposta.- Loja.- Desenvolvimento caro.- Não é multi plataforma.
  • 5. Aplicações web- Desenvolvimento mais barato.- Multi plataforma.- Acesso parcial ao dispositivo.- Não tem loja.
  • 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. 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. "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. 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. 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. PhoneGap / Cordova
  • 12. PhoneGap APIsAccelerometer Camera CaptureCompass Connection ContactsDevice Events FileGeolocation Globalization InAppBrowserMedia Notification SplashscreenStorage
  • 13. PhoneGap
  • 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. Emulandor PhoneGapRipple  
  • 16. Teste APP
  • 17. Teste APP
  • 18. Teste APP
  • 19. Teste APP
  • 20. DebugWeinre  
  • 21. Estrutura do PhoneGap
  • 22. Exemplo app comAndroid
  • 23. Criando a aplicação./create../workspacebr.metodista.sestinfo2013ExemploSestInfoscriptdiretório pacotenome doprojeto
  • 24. Ambiente de desenvolvimento
  • 25. Exemplo com câmera
  • 26. Exemplo com câmera
  • 27. Exemplo app comiPhone
  • 28. Criando a aplicação./create../workspace/iosbr.metodista.sestinfo2013IOS_Exemploscriptdiretório pacotenome doprojeto
  • 29. Ambiente de desenvolvimento - iOS
  • 30. Plugins
  • 31. Vestibular Metodistahttps://play.google.com/store/apps/details?id=br.metodista.vestibularmetodista
  • 32. Obrigado!Rafael Sakurai@rafaelsakuraiRodrigo Cascarrolho@rodrigocasca
  • 33. Referênciashttp://phonegap.com/http://en.wikipedia.org/wiki/PhoneGaphttp://html5hu.wordpress.com/