PhoneGap permite desenvolver aplicações multiplataforma usando HTML5, CSS3 e JavaScript. Ele fornece APIs que dão acesso a recursos de dispositivos móveis como câmera e GPS. Aplicações híbridas desenvolvidas com PhoneGap oferecem acesso completo aos dispositivos e são multiplataforma a um custo menor que aplicações nativas.

1. PhoneGap: desenvolvendo
aplicações multiplataforma
com HTML5
Rafael Sakurai
@rafaelsakurai
Rodrigo 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 + JS
http://www.slideshare.net/rafaelsakurai/html5-sestinfo-2012
http://www.slideshare.net/rodrigocasca/html5-novidades-adoo-e-mobile

4. Aplicação nativa
- Acesso completo ao dispositivo.
- Mais velocidade de
processamento.
- 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 hibridas
KENT BECK - Multiple Mobiles (http://martinfowler.com/articles/multiMobile/ -
slide 24)
- Acesso a todas as opções
do dispositivo.
- Loja.
- Desenvolvimento mais
barato.
- Multi plataforma.

7. Aplicações hibridas
"Aplicações hibridas que oferecem um
balanceamento entre aplicações web HTML5
e aplicações nativas serão usadas em mais
de 50% das aplicações móveis até 2016".
Gartner, 2013, http://www.gartner.com/newsroom/id/2429815
Desenvolvimento Testes

8. "O PhoneGap é um framework gratuito e open
source que permite a criação de aplicações
móveis usando APIs padronizadas da web"
www.phonegap.com

9. PhoneGap - História
2008: início - Nitobi Software
2008: suporte a iPhone, Android e Blackberry 4
2009: suporte a Symbian e webOS
2011: suporte a Windows Phone 7
2011: Adobe adquire a Nitobi Software
2011: Código mantido pela Apache Software Foundation
Novo nome : Cordova
2012: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 API's
Accelerometer Camera Capture
Compass Connection Contacts
Device Events File
Geolocation Globalization InAppBrowser
Media Notification Splashscreen
Storage

13. PhoneGap

15. API de contato
function 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');
}

16. Emulandor PhoneGap
Ripple

17. Teste APP

18. Teste APP

19. Teste APP

20. Teste APP

21. Debug
Weinre

22. Estrutura do PhoneGap

23. Exemplo app com
Android

24. Criando a aplicação
./create
../workspace
br.metodista.sestinfo2013
ExemploSestInfo
script
diretório pacote
nome do
projeto

25. Ambiente de desenvolvimento

26. Exemplo com câmera

27. Exemplo com câmera

28. Exemplo app com
iPhone

29. Criando a aplicação
./create
../workspace/ios
br.metodista.sestinfo2013
IOS_Exemplo
script
diretório pacote
nome do
projeto

30. Ambiente de desenvolvimento - iOS

31. Plugins

33. Vestibular Metodista
https://play.google.com/store/apps/details?
id=br.metodista.vestibularmetodista

34. Obrigado!
Rafael Sakurai
@rafaelsakurai
Rodrigo Cascarrolho
@rodrigocasca

35. Referências
http://phonegap.com/
http://en.wikipedia.org/wiki/PhoneGap
http://html5hu.wordpress.com/