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/