Upload
rafael-sakurai
View
16.525
Download
5
Embed Size (px)
DESCRIPTION
Apresentação realizada na SESTINFO 2013 da Universidade Metodista de São Paulo.
Citation preview
PhoneGap: desenvolvendo aplicações multiplataforma
com HTML5 Rafael Sakurai @rafaelsakurai
Rodrigo Cascarrolho @rodrigocasca
Í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
HTML5 + CSS3 + JS
http://www.slideshare.net/rafaelsakurai/html5-sestinfo-2012 http://www.slideshare.net/rodrigocasca/html5-novidades-adoo-e-mobile
Aplicação nativa - Acesso completo ao dispositivo. - Mais velocidade de processamento. - Menor tempo de resposta. - Loja.
- Desenvolvimento caro. - Não é multi plataforma.
Aplicações web - Desenvolvimento mais barato. - Multi plataforma.
- Acesso parcial ao dispositivo. - Não tem loja.
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.
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
"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
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
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.
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
Ripple
Teste APP
Teste APP
Teste APP
Teste APP
Debug
Weinre
Estrutura do PhoneGap
Exemplo app com Android
Criando a aplicação
./create ../workspace
br.metodista.sestinfo2013 ExemploSestInfo
script
diretório pacote
nome do projeto
Ambiente de desenvolvimento
Exemplo com câmera
Exemplo com câmera
Exemplo app com iPhone
Criando a aplicação
./create ../workspace/ios
br.metodista.sestinfo2013 IOS_Exemplo
script
diretório 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
Referências
http://phonegap.com/ http://en.wikipedia.org/wiki/PhoneGap http://html5hu.wordpress.com/