PhoneGap - Criando aplicações Android e iOS com HTML5
22 gostaram23,222 visualizações
PhoneGap permite desenvolver aplicações multiplataforma usando HTML5, CSS3 e JavaScript. Através do PhoneGap é possível acessar recursos nativos como câmera e GPS usando APIs. Aplicações hibridas oferecem acesso completo aos dispositivos móveis de forma multiplataforma e mais barata que aplicações nativas.
![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');
}](https://image.slidesharecdn.com/phonegap-criandoaplicacoesandroideioscomhtml5-130514083743-phpapp01/85/PhoneGap-Criando-aplicacoes-Android-e-iOS-com-HTML5-15-320.jpg)
PhoneGap - Criando aplicações Android e iOS com HTML5
- 1. PhoneGap: desenvolvendo aplicações multiplataforma com HTML5 Rafael Sakurai @rafaelsakurai Rodrigo Cascarrolho @rodrigocasca
- 2. Í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
- 3. HTML5 + CSS3 + JS http://www.slideshare.net/rafaelsakurai/html5-sestinfo-2012 http://www.slideshare.net/rodrigocasca/html5-novidades-adoo-e-mobile
- 4. Aplicação nativa - Acesso completo ao dispositivo. - Mais velocidade de processamento. - Menor tempo de resposta. - Loja. - Desenvolvimento caro. - Não é multi plataforma.
- 5. Aplicações web - Desenvolvimento mais barato. - Multi plataforma. - Acesso parcial ao dispositivo. - Não tem loja.
- 6. 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.
- 7. 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
- 8. "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
- 9. 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
- 10. 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.
- 12. PhoneGap API's Accelerometer Camera Capture Compass Connection Contacts Device Events File Geolocation Globalization InAppBrowser Media Notification Splashscreen Storage
- 13. PhoneGap
- 15. 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'); }
- 17. Teste APP
- 18. Teste APP
- 19. Teste APP
- 20. Teste APP
- 21. Debug Weinre
- 24. Criando a aplicação ./create ../workspace br.metodista.sestinfo2013 ExemploSestInfo script diretório pacote nome do projeto
- 29. Criando a aplicação ./create ../workspace/ios br.metodista.sestinfo2013 IOS_Exemplo script diretório pacote nome do projeto
- 30. Ambiente de desenvolvimento - iOS
- 31. Plugins