la 02Aula02 introdução phone_gap

392 visualizações

Publicada em

Aula 02: Introdução ao PhoneGAP.

Publicada em: Educação
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
392
No SlideShare
0
A partir de incorporações
0
Número de incorporações
7
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

la 02Aula02 introdução phone_gap

  1. 1. INTRODUÇÃO AO PHONEGAP “A mente que se abre a uma nova ideia jamais voltará ao seu tamanho original” (Albert Einstein) 1
  2. 2. O QUE É? Framework que proporciona a criação de aplicações móveis com a utilização de tecnologias Web: HTML, CSS e JavaScript. 2
  3. 3. O QUE É?(2) 3
  4. 4. CARACTERÍSTICAS • É um framework livre e de código aberto (sob a Licença Apache, Versão 2.0); – Desenvolvido por Nitobi Software – Comprado pela Adobe • Permite criação de aplicações móveis híbridas; • Não gera código nativo, funciona como um empacotador, juntando o código e coloca em uma WebView na app; • Tem APIs via JavaScript que permitem acesso a recursos de hardware do dispositivo; • O desenvolvedor é livre para escolher a ferramenta na hora de construir a interface com o usuário, como jQuery Mobile ou Sencha Touch. 4
  5. 5. PLATAFORMAS SUPORTADAS • Android • Apple iOS • Bada • Symbian • Windows Phone 7 e 8 • WebOS • BlackBerry 5
  6. 6. FUNCIONALIDADES • Acelerômetro • Contatos • Arquivos • Câmera • Mídia • Geolocalização • Armazenamento • Conexão (internet) • Notificações(alerta, som e vibração) 6
  7. 7. FUNCIONALIDADES(2) Fonte: PhoneGAP Features(2014). 7
  8. 8. CONHECENDO UM POUCO MAIS • Não há necessidade de conhecer a linguagem de programação (como Java™ e Objective-C) para desenvolvimento nativo das aplicações móveis; • Teoricamente o mesmo código funcionará em todas as plataformas; • As aplicações nativas tem características especificas para acesso ao dispositivo, funcionando com melhor desempenho em relação as aplicações baseadas em tecnologias Web. 8
  9. 9. ARQUITETURA DO PHONEGAP 9
  10. 10. DESENVOLVIMENTO COM PHONEGAP • PhoneGap é somente uma biblioteca que precisa ser incluida em uma app móvel – Conjunto de arquivos JavaScript e XML • O que o PhoneGap faz? – Gera uma janela “out-of-the-browser” que executa código HTML e JavaScript – Por meio de alguns arquivos XML e JARs/DLLs permite o uso da API nativa. 10
  11. 11. COM O QUE PODEMOS DESENVOLVER? • IDEs nativas: –Eclipse, Netbeans, Xcode, Visual Studio, Android Studio, Dreamweaver, etc. • Em todos os casos é necessário a instalação do SDK do OS. 11
  12. 12. EXEMPLOS 12
  13. 13. EXEMPLO: VESTIBULAR METODISTA 13
  14. 14. QUEM USA? • Alcatel • Zynga • Microsoft • Adobe • Travelocity • Vodaphone • Wikipedia • ... 14
  15. 15. VANTAGENS DO PHONEGAP • Habilidades com HTML5, CSS and JavaScript vs. Objective-C, Java and C# • Código simples para todas as plataformas – iOS, Android, WP 7 Mango, mobile web • Usufruir da distribuição e pagamento integrado – Via App Store ou Google Play 15
  16. 16. DESVANTAGENS DO PHONEGAP • Baixo desempenho –Uso de muitos recursos gráficos, i.e. a games; –A maioria das aplicações nativas ainda é mais rápida que as web apps. 16
  17. 17. DESVANTAGENS DO PHONEGAP(2) • Falta de widgets embarcados, transições, controles padrões, etc –Seu desenvolvimento pode demorar • Especialmente se você quiser um look and feel native 17
  18. 18. CONFIGURANDO O AMBIENTE • JDK 7 • Android SDK • Apache ANT • Netbeans • Node.JS • PhoneGAP 18
  19. 19. CONFIGURANDO O ANDROID SDK 19 http://developer.android.com/sdk/index.html
  20. 20. CONFIGURANDO O APACHE ANT 20 http://ant.apache.org/
  21. 21. CONFIGURANDO O NETBEANS + ANDROID 21
  22. 22. CONFIGURANDO O NETBEANS + ANDROID 22 http://nbandroid.org/updates/updates.xml
  23. 23. CONFIGURANDO O NODE.JS 23 http://nodejs.org/
  24. 24. CONFIGURANDO O NODE.JS(2) 24
  25. 25. CONFIGURANDO O PHONEGAP 25
  26. 26. CRIANDO UM NOVO PROJETO 26
  27. 27. CRIANDO UM NOVO PROJETO(2) 27
  28. 28. IMPORTANDO PROJETO NO NETBEANS 28
  29. 29. IMPORTANDO PROJETO NO NETBEANS 29
  30. 30. EXEMPLO 01: DISPOSITIVO 30 • Criando aplicativo “Dispositivo”
  31. 31. EXEMPLO 01: DISPOSITIVO(2) 31 ... <script type="text/javascript" charset="utf-8" src=“cordova.js”></script> <script type="text/javascript" charset="utf-8"> // Wait for PhoneGap to load // document.addEventListener("deviceready", onDeviceReady, false); // PhoneGap is ready // function onDeviceReady() { var element = document.getElementById('deviceProperties'); element.innerHTML = 'Device Name: ' + device.name + '<br />' + 'Device PhoneGap: ' + device.phonegap + '<br />' + 'Device Platform: ' + device.platform + '<br />' + 'Device UUID: ' + device.uuid + '<br />' + 'Device Version: ' + device.version + '<br />'; } </script> </head> <body> <p id="deviceProperties">Loading device properties...</p> </body> ...
  32. 32. EXEMPLO 02: LISTANDO CONTATOS 32 • Criando aplicativo “ListaContatos”
  33. 33. EXEMPLO 02: LISTANDO CONTATOS(2) 33 ... <script type="text/javascript" charset="utf-8" src=“cordova.js"></script> <script type="text/javascript" charset="utf-8"> document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { var options = new ContactFindOptions(); options.filter = ""; options.multiple = true; var fields = ["displayName", "name"]; navigator.contacts.find(fields, onSuccess, onError, options); } function onSuccess(contacts) { var element = document.getElementById("infoContatos"); for (var i = 0; i < contacts.length; i++) { element.innerHTML += contacts[i].displayName+"<br/>"; } } function onError(contactError) { alert('onError!'); } </script> ...

×