INTRODUÇÃO AO PHONEGAP 
“A mente que se abre a 
uma nova ideia jamais 
voltará ao seu tamanho 
original” 
(Albert Einstein...
O QUE É? 
Framework que proporciona a criação de aplicações 
móveis com a utilização de tecnologias Web: HTML, 
CSS e Java...
O QUE É?(2) 
3
CARACTERÍSTICAS 
• É um framework livre e de código aberto (sob a Licença 
Apache, Versão 2.0); 
– Desenvolvido por Nitobi...
PLATAFORMAS SUPORTADAS 
• Android 
• Apple iOS 
• Bada 
• Symbian 
• Windows Phone 7 e 8 
• WebOS 
• BlackBerry 
5
FUNCIONALIDADES 
• Acelerômetro 
• Contatos 
• Arquivos 
• Câmera 
• Mídia 
• Geolocalização 
• Armazenamento 
• Conexão (...
FUNCIONALIDADES(2) 
Fonte: PhoneGAP Features(2014). 
7
CONHECENDO UM POUCO MAIS 
• Não há necessidade de conhecer a linguagem de 
programação (como Java™ e Objective-C) para 
de...
ARQUITETURA DO PHONEGAP 
9
DESENVOLVIMENTO COM PHONEGAP 
• PhoneGap é somente uma biblioteca que precisa 
ser incluida em uma app móvel 
– Conjunto d...
COM O QUE PODEMOS 
DESENVOLVER? 
• IDEs nativas: 
–Eclipse, Netbeans, Xcode, Visual 
Studio, Android Studio, 
Dreamweaver,...
EXEMPLOS 
12
EXEMPLO: VESTIBULAR METODISTA 
13
QUEM USA? 
• Alcatel 
• Zynga 
• Microsoft 
• Adobe 
• Travelocity 
• Vodaphone 
• Wikipedia 
• ... 
14
VANTAGENS DO PHONEGAP 
• Habilidades com HTML5, CSS and JavaScript 
vs. Objective-C, Java and C# 
• Código simples para to...
DESVANTAGENS DO PHONEGAP 
• Baixo desempenho 
–Uso de muitos recursos gráficos, i.e. a 
games; 
–A maioria das aplicações ...
DESVANTAGENS DO PHONEGAP(2) 
• Falta de widgets embarcados, 
transições, controles padrões, etc 
–Seu desenvolvimento pode...
CONFIGURANDO O AMBIENTE 
• JDK 7 
• Android SDK 
• Apache ANT 
• Netbeans 
• Node.JS 
• PhoneGAP 
18
CONFIGURANDO O ANDROID SDK 
19 
http://developer.android.com/sdk/index.html
CONFIGURANDO O APACHE ANT 
20 
http://ant.apache.org/
CONFIGURANDO O NETBEANS + 
ANDROID 
21
CONFIGURANDO O NETBEANS + 
ANDROID 
22 
http://nbandroid.org/updates/updates.xml
CONFIGURANDO O NODE.JS 
23 
http://nodejs.org/
CONFIGURANDO O NODE.JS(2) 
24
CONFIGURANDO O PHONEGAP 
25
CRIANDO UM NOVO PROJETO 
26
CRIANDO UM NOVO PROJETO(2) 
27
IMPORTANDO PROJETO NO NETBEANS 
28
IMPORTANDO PROJETO NO NETBEANS 
29
EXEMPLO 01: DISPOSITIVO 
30 
• Criando aplicativo “Dispositivo”
EXEMPLO 01: DISPOSITIVO(2) 
31 
... 
<script type="text/javascript" charset="utf-8" src=“cordova.js”></script> 
<script ty...
EXEMPLO 02: LISTANDO CONTATOS 
32 
• Criando aplicativo “ListaContatos”
EXEMPLO 02: LISTANDO CONTATOS(2) 
33 
... 
<script type="text/javascript" charset="utf-8" src=“cordova.js"></script> 
<scr...
Próximos SlideShares
Carregando em…5
×

la 02Aula02 introdução phone_gap

410 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
410
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> ...

×