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

21,380 views
20,964 views

Published on

Published in: Technology
1 Comment
21 Likes
Statistics
Notes
  • Oi Rodrigo, tdbem? Mto boa sua apresentação além de bem didática ela tem um nível técnico mto bom. Aproveita essa oportunidade gostaria de mostrar um app que criei junto com uns amigos. A brNEWS, é um jornal agregador das últimas notícias em tempo real. Foi feito usando phonegap e está disponível para android e em breve para iOS. Vc pode fazer o download na google play play.google.com/store/apps/details?id=com.linked4. Também ver os detalhes técnicos de implementação aqui www.fausto.me/posts/page/42. Um abraço.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
21,380
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
398
Comments
1
Likes
21
Embeds 0
No embeds

No notes for 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 aodispositivo.- 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 dispositivosmóveis. Através do PhoneGap Build é possível gerar código nativosem a necessidade do ambiente de desenvolvimento de cadaplataforma.Apache Cordova é um conjunto de APIs que permite que umdesenvolvedor de aplicativos móveis acesse as funções nativas dodispositivo, 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/

×