phonegap - criando aplicações android e ios com html5

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 dispositivos móveis. Através do PhoneGap Build é possível gerar código nativo sem a necessidade do ambiente de desenvolvimento de cada plataforma.

Apache Cordova é um conjunto de APIs que permite que um desenvolvedor de aplicativos móveis acesse as funções nativas do

dispositivo, 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.metodist

a.vestibularmetodista

Obrigado!

Rafael Sakurai

@rafaelsakurai

Rodrigo Cascarrolho

@rodrigocasca

Referências

http://phonegap.com/

http://en.wikipedia.org/wiki/PhoneGap

http://html5hu.wordpress.com/