phonegap - criando aplicações android e ios com html5
TRANSCRIPT
![Page 1: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/1.jpg)
PhoneGap: desenvolvendo
aplicações multiplataforma
com HTML5 Rafael Sakurai
@rafaelsakurai
Rodrigo Cascarrolho
@rodrigocasca
![Page 2: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/2.jpg)
Í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
![Page 3: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/3.jpg)
HTML5 + CSS3 + JS
http://www.slideshare.net/rafaelsakurai/html5-sestinfo-2012
http://www.slideshare.net/rodrigocasca/html5-novidades-adoo-e-mobile
![Page 4: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/4.jpg)
Aplicação nativa - Acesso completo ao dispositivo.
- Mais velocidade de
processamento.
- Menor tempo de resposta.
- Loja.
- Desenvolvimento caro.
- Não é multi plataforma.
![Page 5: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/5.jpg)
Aplicações web - Desenvolvimento mais barato.
- Multi plataforma.
- Acesso parcial ao
dispositivo.
- Não tem loja.
![Page 6: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/6.jpg)
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.
![Page 7: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/7.jpg)
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
![Page 8: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/8.jpg)
"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
![Page 9: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/9.jpg)
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
![Page 10: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/10.jpg)
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.
![Page 11: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/11.jpg)
PhoneGap / Cordova
![Page 12: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/12.jpg)
PhoneGap API's
Accelerometer Camera Capture
Compass Connection Contacts
Device Events File
Geolocation Globalization InAppBrowser
Media Notification Splashscreen
Storage
![Page 13: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/13.jpg)
PhoneGap
![Page 14: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/14.jpg)
![Page 15: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/15.jpg)
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');
}
![Page 16: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/16.jpg)
Emulandor PhoneGap
Ripple
![Page 17: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/17.jpg)
Teste APP
![Page 18: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/18.jpg)
Teste APP
![Page 19: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/19.jpg)
Teste APP
![Page 20: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/20.jpg)
Teste APP
![Page 21: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/21.jpg)
Debug
Weinre
![Page 22: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/22.jpg)
Estrutura do PhoneGap
![Page 23: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/23.jpg)
Exemplo app com
Android
![Page 24: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/24.jpg)
Criando a aplicação
./create
../workspace
br.metodista.sestinfo2013
ExemploSestInfo
script
diretório pacote
nome do projeto
![Page 25: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/25.jpg)
Ambiente de desenvolvimento
![Page 26: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/26.jpg)
Exemplo com câmera
![Page 27: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/27.jpg)
Exemplo com câmera
![Page 28: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/28.jpg)
Exemplo app com
iPhone
![Page 29: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/29.jpg)
Criando a aplicação
./create
../workspace/ios
br.metodista.sestinfo2013
IOS_Exemplo
script
diretório pacote
nome do projeto
![Page 30: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/30.jpg)
Ambiente de desenvolvimento - iOS
![Page 31: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/31.jpg)
Plugins
![Page 32: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/32.jpg)
![Page 33: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/33.jpg)
Vestibular Metodista https://play.google.com/store/apps/details?id=br.metodist
a.vestibularmetodista
![Page 34: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/34.jpg)
Obrigado!
Rafael Sakurai
@rafaelsakurai
Rodrigo Cascarrolho
@rodrigocasca
![Page 35: PhoneGap - Criando aplicações Android e iOS com HTML5](https://reader031.vdocuments.com.br/reader031/viewer/2022020115/55581461d8b42a25588b4590/html5/thumbnails/35.jpg)
Referências
http://phonegap.com/
http://en.wikipedia.org/wiki/PhoneGap
http://html5hu.wordpress.com/