Explicação do Phonegap

1. Aluno: Carlos Rodrigo
Professora: Camila Taumaturgo

2. Roteiro
• Introdução;
• Aplicação nativa e web;
• Aplicação hibrida ;
• PhoneGap ;
• Funcionamento e arquitetura do PhoneGap ;
• PhoneGap Build;

4. Introdução
• Aplicação Mobile
– Abreviado por APP, é um software desenvolvido
para ser instalado em um dispositivo móvel. Este
aplicativo pode ser instalado no dispositivo,
baixando pelo usuário através de uma loja on-line,
tais como Google Play, App Store ou Windows
Phone Store ou em plataformas gratuitas na Web.

5. • - Acesso completo ao dispositivo.
• - Mais velocidade de processamento.
• - Menor tempo de resposta.
• - Loja.
• - Desenvolvimento caro.
• - Não é multi plataforma.
Aplicação nativa
• - Desenvolvimento mais barato.
• - Multi plataforma.
• - Acesso parcial ao dispositivo.
• - Não tem loja.
Aplicações web

6. Aplicações hibridas
• - Acesso a todas as opções do
dispositivo.
• - Loja.
• - Desenvolvimento mais barato.
• - Multi plataforma.
"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".

7. “O PhoneGap é um framework gratuito e
open source que permite a criação de
aplicações móveis usando APIs
padronizadas da web.”

10. PhoneGap API's
Accelerometer Camera Capture
Compass Connection Contacts
Device Events File
Geolocation Globalization InAppBrowser
Media Notification Splashscreen
Storage

13. 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');
}

14. Ripple
Emulandor PhoneGap

15. PhoneGap Build
https://build.phonegap.com/
Escolher para qual arquivo quer importar.
É um ambiente na nuvem feito pela a Adobe (também dona
do Phonegap) para facilitar ainda mais a vida dos
programadores

16. Visão Geral do Site

17. Click: Sign up for a new account

18. +new app

19. Opções disponíveis para
esse APP

20. ATIVIDADE P/ CASA
• Desenvolva um aplicativo simulando
uma pequena Agenda de contatos,
contendo HTML, CSS e JavaScript.
• Prazo: 10 dias a partir de Amanhã.

21. Referência
• PHONEGAP. Disponível em: <http://phonegap.com/>. Acesso em: 21
jan. 2015.
• PHONEGAP BUILD. Disponível em: <https://build.phonegap.com />.
Acesso em: 21 jan. 2015.
• WIKIPÉDIA, a Enciclopédia Livre. PhoneGap. Disponível em:
<http://en.wikipedia.org/wiki/PhoneGap>. Acesso em: 21 jan. 2015.
• PHONEGAP tutorial. Elaborado por Rafael Yanagui. Disponível em:
<http://www.nanoincub.com.br/blog/tutoriais/tutorial-de-phonegap-
iniciando-um-projeto>. Acesso em: 21 jan. 2015.
• PHONEGAP - Criando aplicações multiplataforma com HTML5.
Elaborado por Rodrigo Cascarrolho. Disponível em:
<http://pt.slideshare.net/rodrigocasca/phonegap-criando-aplicacoes-
android-e-ios-com-html5>. Acesso em: 21 jan. 2015.