Aula 02: Introdução ao PhoneGAP.

1. INTRODUÇÃO AO PHONEGAP
“A mente que se abre a
uma nova ideia jamais
voltará ao seu tamanho
original”
(Albert Einstein)
1

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. O QUE É?(2)
3

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. PLATAFORMAS SUPORTADAS
• Android
• Apple iOS
• Bada
• Symbian
• Windows Phone 7 e 8
• WebOS
• BlackBerry
5

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. FUNCIONALIDADES(2)
Fonte: PhoneGAP Features(2014).
7

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. ARQUITETURA DO PHONEGAP
9

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. 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. EXEMPLOS
12

13. EXEMPLO: VESTIBULAR METODISTA
13

14. QUEM USA?
• Alcatel
• Zynga
• Microsoft
• Adobe
• Travelocity
• Vodaphone
• Wikipedia
• ...
14

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. 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. 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. CONFIGURANDO O AMBIENTE
• JDK 7
• Android SDK
• Apache ANT
• Netbeans
• Node.JS
• PhoneGAP
18

19. CONFIGURANDO O ANDROID SDK
19
http://developer.android.com/sdk/index.html

20. CONFIGURANDO O APACHE ANT
20
http://ant.apache.org/

21. CONFIGURANDO O NETBEANS +
ANDROID
21

22. CONFIGURANDO O NETBEANS +
ANDROID
22
http://nbandroid.org/updates/updates.xml

23. CONFIGURANDO O NODE.JS
23
http://nodejs.org/

24. CONFIGURANDO O NODE.JS(2)
24

25. CONFIGURANDO O PHONEGAP
25

26. CRIANDO UM NOVO PROJETO
26

27. CRIANDO UM NOVO PROJETO(2)
27

28. IMPORTANDO PROJETO NO NETBEANS
28

29. IMPORTANDO PROJETO NO NETBEANS
29

30. EXEMPLO 01: DISPOSITIVO
30
• Criando aplicativo “Dispositivo”

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. EXEMPLO 02: LISTANDO CONTATOS
32
• Criando aplicativo “ListaContatos”

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