PhoneGap: desenvolvendo

aplicaes multiplataforma
com HTML5
Rafael Sakurai
@rafaelsakurai
Rodrigo Cascarrolho
@rodrigocasca
ndice
HTML5
Aplicao nativa
Aplicao web
Aplicao hibrida
PhoneGap
Desenvolvendo com PhoneGap
Exemplo de aplicao Android e iOS
Aplicaes criadas com PhoneGap
HTML5 + CSS3 + JS
http://www.slideshare.net/rafaelsakurai/html5-sestinfo-2012
http://www.slideshare.net/rodrigocasca/html5-novidades-adoo-e-mobile
Aplicao nativa
- Acesso completo ao dispositivo.
- Mais velocidade de
processamento.
- Menor tempo de resposta.
- Loja.
- Desenvolvimento caro.
- No multi plataforma.
Aplicaes web
- Desenvolvimento mais barato.
- Multi plataforma.

- Acesso parcial ao dispositivo.
- No tem loja.
Aplicaes hibridas
KENT BECK - Multiple Mobiles (http://martinfowler.com/articles/multiMobile/ -
slide 24)
- Acesso a todas as opes
do dispositivo.
- Loja.
- Desenvolvimento mais
barato.
- Multi plataforma.
Aplicaes hibridas
"Aplicaes hibridas que oferecem um
balanceamento entre aplicaes web HTML5
e aplicaes nativas sero usadas em mais
de 50% das aplicaes mveis at 2016".
Gartner, 2013, http://www.gartner.com/newsroom/id/2429815
Desenvolvimento Testes
"O PhoneGap um framework gratuito e open
source que permite a criao de aplicaes
mveis usando APIs padronizadas da web"
www.phonegap.com
PhoneGap - Histria
2008: incio - 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: Cdigo mantido pela Apache Software Foundation
Novo nome : Cordova
2012:PhoneGap Build
!"#$%&'( * ' (#$+% %$+,% '- '(./0'12%- 3%4 % #- 5/-(#-/67#-
897%/-: ;+,'7*- 5# !"#$%&'( <=/.5 * (#-->7%. ?%,', 095/?# $'67#
-%8 ' $%0%--/5'5% 5# '84/%$+% 5% 5%-%$7#.7/8%$+# 5% 0'5'
(.'+'@#,8':
;('0"% A#,5#7' * =8 0#$B=$+# 5% ;!C- D=% (%,8/+% D=% =8
5%-%$7#.7%5#, 5% '(./0'67#- 897%/- '0%--% '- @=$12%- $'67'- 5#
5/-(#-/67#E 0#8# ' 0F8%,' #= # '0%.%,G8%+,#E '+,'7*- 5# H'7'I0,/(+:
PhoneGap / Cordova
PhoneGap API's
Accelerometer Camera Capture
Compass Connection Contacts
Device Events File
Geolocation Globalization InAppBrowser
Media Notification Splashscreen
Storage
PhoneGap
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');
}
Emulandor PhoneGap
!"##$%
Teste APP
Teste APP
Teste APP
Teste APP
Debug
'%"()%
Estrutura do PhoneGap
Exemplo app com
Android
Criando a aplicao


./create
../workspace
br.metodista.sestinfo2013
ExemploSestInfo
script
diretrio
pacote
nome do
projeto
Ambiente de desenvolvimento
Exemplo com cmera
Exemplo com cmera
Exemplo app com
iPhone
Criando a aplicao


./create
../workspace/ios
br.metodista.sestinfo2013
IOS_Exemplo
script
diretrio
pacote
nome do
projeto
Ambiente de desenvolvimento - iOS
Plugins
Vestibular Metodista
https://play.google.com/store/apps/details?
id=br.metodista.vestibularmetodista
Obrigado!
Rafael Sakurai
@rafaelsakurai
Rodrigo Cascarrolho
@rodrigocasca
Referncias
http://phonegap.com/
http://en.wikipedia.org/wiki/PhoneGap
http://html5hu.wordpress.com/