apostila DESENVOLVIMENTO MULTIPLATAFORMA

Prévia do material em texto

DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 1 
 
 
Desenvolvimento 
Multiplataforma Mobile 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 2 
Desenvolvimento Multiplataforma Mobile 
 
1. Introdução ao Desenvolvimento Multiplataforma 
 
1.1 Introdução 
 
Com o passar dos anos, o desenvolvimento de aplicativos mobile está crescendo 
consideravelmente. Esse aumento é devido ao progressivo aumento nas vendas de 
smartphones e aos investimentos que as grandes empresas têm realizado nesse setor. 
Essa notícia também é importante para o mercado de trabalho na área de 
desenvolvimento de aplicativos móveis, que vem oferecendo cada vez mais 
oportunidades para os desenvolvedores independentes. 
 
No entanto, se formos analisar de uma forma mais abrangente, construir aplicativos 
móveis requer uma decisão muito importante, que é: Qual plataforma escolher para 
começar o desenvolvimento da aplicação? 
 
Atualmente existem diversas plataformas de desenvolvimento para o ambiente mobile, 
são elas: 
 
O Android, uma das plataformas mais utilizadas em smartphones no mundo, 
desenvolvida e mantida pela Google. Para desenvolver aplicativos nativos para ela, é 
necessário que o desenvolvedor possua experiência na linguagem Java e utilize a sua 
SDK (Standart Development Kit), ou Android SDK, para auxiliar no desenvolvimento 
das aplicações. 
 
O iOS, muito utilizado, principalmente nas classes sociais mais altas, desenvolvida e 
mantida pela Apple. Para desenvolver aplicativos nativos para essa plataforma, o 
desenvolvedor precisa de uma experiência com as linguagens Objective-C ou Swift e 
com o ambiente de desenvolvimento do Xcode, para auxiliar na construção das 
aplicações. 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 3 
O Windows Phone, uma plataforma em fase de crescimento que vem ganhando 
adeptos a cada dia. Para desenvolver aplicativos nativos para essa plataforma é 
necessário conhecimento da linguagem C# e do ambinete de desenvolvimento do 
windows e visual studio, para auxiliar na implementação das aplicações. 
 
É importante destacar que existem outras plataformas no mercado, como a Blackberry, 
o Firefox OS e o Ubuntu, mas possuem uma faixa bem menor do mercado de 
aplicações mobile. Outra coisa que precisamos enfatizar é que cada plataforma possui 
a sua suíte de desenvolvimento, onde estão integradas as linguagens e ferramentas 
de implementação. 
 
No próximo tópico da seção, iremos compreender como construir aplicações híbridas, 
ou seja, construir aplicativos móveis com uma linguagem em comum para todas as 
plataformas e depois compilar esse código, gerando um aplicativo para cada 
plataforma a partir do mesmo código-fonte. 
 
1.2 Aplicações Híbridas 
 
Como foi explanado, para o desenvolvimento de um aplicativo móvel nativo nos dias 
de hoje, é necessário um conhecimento em várias linguagens de programação e 
ferramentas de desenvolvimento. Mas, com isso, surgem alguns questionamentos 
importantes: e se não tivermos uma equipe de desenvolvimento multidiciplinar? se 
quisermos construir o nosso aplicativo para todas as plataformas, será necessário 
desenvolver um aplicativo para cada uma delas? 
 
Para responder esses questionamentos, entra a ideia de Aplicações Híbridas. Com esse 
tipo de aplicações é possível criar aplicativos multiplataformas. Nos dias de hoje, 
existem dois frameworks que ajudam bastante nesse tipo de desenvolvimento, são 
eles: o Cordova/Phonegap e o Xamarim. 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 4 
Com o Cordova/Phonegap é possível criar aplicativos com a linguagem HTML 5/ CSS 
e Javascript e torná-lo nativo de qualquer plataforma citada anteriormente. Já com o 
Xamarim, o desenvolvimento se dá a partir da linguagem C#, mas o aplicativo também 
se torna nativo a qualquer plataforma. 
 
Nesta disciplina será estudado o Cordova/Phonegap. Esse framework open-source de 
desenvolvimento móvel, encapsula o código escrito em HTML 5/ CSS e Javascript em 
uma casca nativa que executa um navegador e a partir de uma API javascript tem 
acesso aos recursos nativos do dispositivo. Essa janela de navegador nativo que irá 
executar o código HTML é chamada de WebView. Uma WebView pode ser facilmente 
criada pelos códigos nativos Android, iOS e Windows Phone como um componente. 
Esse tipo de aplicativo é chamado de híbrido, por ser desenvolvido em linguagem Web 
e compilado para qualquer plataforma. 
 
É importante destacar que o papel mais importante no momento da compilação do 
aplicativo, é do Phonegap/Cordova, pois a aplicação executada sobre a WebView do 
dispositivo e o acesso aos recursos nativos estão limitados ao poder da API. Para 
alguns sistemas como Android e iOS, a API consegue acessar quase todos os recursos 
nativos, mas para outros, como Windows Phone e Symbian, o acesso ainda é limitado. 
 
No proximo tópico da seção, iremos entender qual a diferença entre o Phonegap e o 
Cordova e por que vamos utilizar mais o cordova durante as nossas aulas. 
 
1.3 O Cordova e o Phonegap 
 
O framework Cordova e o Phonegap são essencialmente a mesma coisa. Basicamente, 
o Phonegap é uma distribuição proprietária do Cordova. 
 
Para tentar melhorar e facilitar o desenvolvimento de aplicações mobile, em 2009 a 
empresa Nitobi criou o Phonegap, um framework open source que utiliza padrões web 
para criar aplicações móveis. Com ele é possível desenvolver um aplicativo utilizando 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 5 
os padrões web e, depois de finalizado, compilar o código para a plataforma mobile 
de preferência. 
 
Isso revolucionou a maneira de desenvolver aplicativos móveis. Observando isso, a 
Adobe comprou a empresa Nitobi em 2011. Nessa época a adobe estava investindo 
pesado para tentar lançar a velha tecnologia Flash como ambiente de desenvolvimento 
multiplataforma mobile, mas o projeto depois de compilado ficava muito pesado e eles 
não conseguiram ganhar mercado, vendo no Phonegap uma grande oportunidade de 
alavancar essa parte de desenvolvimento mobile da empresa. 
 
Mesmo comprando a Nitobi, a Adobe doou todo o código do projeto do Phonegap para 
a Apache Fondation, mantendo dessa forma o código do framework em uma 
comunidade de desenvolvimento ativa e facilitando, assim, o processo de melhoria do 
produto, deixando que outras empresas pudessem contribuir para o projeto. 
 
Por motivo de direitos autorais e interesse da Adobe pelo nome comercial que o 
Phonegap já havia ganho, o projeto ganhou o nome de Apache Cordova. 
 
Com tudo isso, o Phonegap passou a ser apenas uma distribuição do projeto Apache 
Cordova. E o principal produto referente ao Phonegap passou a ser o Adobe build e o 
Adobe App que abordaremos nas próximas aulas. 
 
Durante o nosso curso iremos abordar o Apache Cordova diretamente, pois como o 
Phonegap é uma distribuição do Cordova, as novidades, como novos plug-ins e 
funcionalidades tendem a ser inseridas primeiro no Apache Cordova. 
 
No próximo tópico, iremos abordar um pouco mais as diferenças entre aplicativo nativo 
e aplicativo híbrido. 
 
 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 6 
1.4 Entendendo Aplicativo Nativo e Aplicativo Híbrido 
 
Começaremos esse tópico com um questionamento: É melhor criar aplicativos nativos 
ou híbridoos com Cordova? 
 
A resposta é: depende do aplicativo que se deseja desenvolver. Por exemplo, um 
aplicativo híbrido bem construído se integra à plataforma da mesma forma que um 
nativo. Então, do ponto de vista do usuário, não há muita diferença. No entanto, 
algumas coisas devem ser observadas e uma delas é a performance. 
 
Se o aplicativorealmente exigir bastante processamento do dispositivo, como Jogos 
3D, aplicações que precisem de multithreading, aplicativos que executem serviços em 
background, é importante escrever todo o código em linguagem e ferramentas nativas 
para cada plataforma. Entretanto, boa parte dos aplicativos não se encaixa nessas 
categorias, então híbrido é o suficiente. 
 
Outra coisa que precisamos considerar quando formos construir um aplicativo é o custo 
de desenvolvimento. Com Cordova, um único código serve todas as plataformas e não 
é necessário ter equipes específicas desenvolvendo com a linguagem Java no Android, 
a linguagem Objective-C ou Swift no iOS e C# no Windows Phone. 
 
Mas se você estiver em uma empresa grande e possuir recursos para ter uma equipe 
de desenvolvimento para cada plataforma, com certeza é melhor manter dessa forma, 
pois a API do Cordova nos dá acesso a muitos recursos nativos; no entanto, a API 
nativa é que possui todas as possibilidades à disposição. 
 
Então, antes de começar a implementar, é importante planejar e decidir qual será o 
aplicativo criado: se ele for utilizar muito processamento do dispositivo ou recursos 
nativos exclusivos de cada plataforma, é melhor desenvolver em linguagem nativa; no 
entanto, se o aplicativo não for usar essas características e você quiser disponibilizá-
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 7 
lo para todas as plataformas de forma rápida e barata é melhor utilizar o Phonegap 
Cordova. 
 
Na próxima seção iremos revisar um pouco das tecnologias Web, como HTML 5/ CSS 
e Javascript, além das bibliotecas JQuery e JQuery Mobile, afim de facilitar o 
entendimento das demais aulas. 
 
2. Revisão – Linguagens da Web 
 
As três principais tecnologias que utilizaremos para desenvolver aplicativos web são 
HTML, CSS e Javascript. Nesta seção revisaremos essas tecnologias para garantir que 
não pairem dúvidas quando avançarmos no material. 
 
2.1 Introdução ao HTML 
 
As páginas visualizadas na Web são apenas documentos de texto. Esses textos são 
encapsulados em tags HTML ou linguagem de marcação, que informam ao seu 
navegador sobre a estrutura do documento. Com essas informações, o navegador 
pode formatar e exibir as informações da sua página web. 
Pode ser observado no trecho da página web mostrado no exemplo 1, a seguir, que 
na primeira linha, a tag <h1> encapsula o texto “Olá usuário”. É importante observar 
que existe uma tag de abertura e uma tag de fechamento. A tag de fechamento possui 
uma barra (/) como segundo caractere, enquanto a de abertura não tem. 
 
Abertura: <nome_tag> 
Fechamento: </nome_tag> 
 
<h1>Olá Usuário</h1> 
<p>Obrigado por visitar a minha página Web.</p> 
<p>Espero que goste.</p> 
Exemplo 1 – Trecho documento HTML 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 8 
 
As tags podem ser classificadas como simples ou compostas. As tags simples não 
possuem uma tag para fechamento, já a tag composta necessita de uma tag de 
abertura e fechamento. 
 
Exemplo tag simples: <hr/> (cria uma linha horizontal) 
Exemplo tag composta: <p></p> 
 
Também é possível colocar tags HTML dentro de outras tags HTML. É possível observar 
a seguir, no exemplo 2, a tag de lista não ordenada <ul> que contém três itens de 
lista <li>. No navegador, essa composição cria uma lista não ordenada com cada item 
na sua própria linha. Quando uma tag está dentro de outra, as internas são chamadas 
de elementos filhos da tag mãe, que é quem encapsula essa tag. Com isso, as tags 
<li> são filhas de <ul>. 
 
<ul> 
 <li>Maçã</li> 
 <li>Laranja</li> 
 <li>Kiwi</li> 
</ul> 
 
Exemplo 2 – Lista não ordenada em HTML 
 
Um documento HTML possui duas seções: o cabeçalho e o corpo. O corpo é onde se 
coloca todo o conteúdo que será exibido ao usuário; já o cabeçalho possui informações 
de configuração da página, invisíveis para o usuário. 
 
O corpo e o cabeçalho da página web são encapsulados em uma tag <html>. É 
possível observar no seguinte exemplo 3 que os exemplos mostrados anteriormente 
agora estão no contexto apropriado de um documento HTML. Na parte do cabeçalho 
<head>, apenas tem a tag <title>, que define o título da página. 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 9 
 
<html> 
<head> 
 <title>Minha Página</title> 
</head> 
<body> 
 <h1>Olá Usuário</h1> 
 <p>Obrigado por visitar a minha página Web.</p> 
 <p>Espero que goste.</p> 
 <ul> 
 <li>Maçã</li> 
 <li>Laranja</li> 
 <li>Kiwi</li> 
 </ul> 
</body> 
</html> 
 
Exemplo 3 – Documento HTML 
 
Também é importante destacar que as tags podem possuir atributos. Esses atributos 
podem ser definidos como as propriedades de uma tag (elemento). 
 
O HTML possui diversas tags, e cada uma delas possui o seu significado e a sua 
funcionalidade para a inserção de um novo elemento na página web. É possível 
visualizar na lista abaixo algumas dessas tags e as suas funcionalidades. 
 
Cabeçalhos: servem para iniciar seções dentro de um documento HTML, distintos do 
restante do texto, identificando o início de um tópico. Existem seis tamanhos a serem 
utilizados <h1>, <h2>, <h3>, <h4>, <h5>, <h6> e todos eles devem ser fechados 
por suas tags de fechamento, </h1>, ..., </h6>. 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 10 
Parágrafos (<p></p>): Demarca o início e o fim de um parágrafo. Pode-se também 
utilizar o alinhamento de textos através do atributo align (atributo que alinha o 
elemento à esquerda, à direita, no centro ou justificado). 
 
Pula Linha (<br/>): Essa tag quebra uma linha, porém não encerra o parágrafo. Essa 
é uma tag simples, ou seja, não existe tag de fechamento </br>. 
 
Tags para criar efeitos no texto: 
Negrito (<b></b>) 
Itálico (<i></i>) 
Sublinhado (<u></u>) 
Tachado (<s></s>) 
Aumentar a fonte (<big></big>) 
Diminuir fonte (<small></small>) 
Criação de Listas 
Listas Ordenadas (<ol></ol>) 
Listas Não Ordenadas (<ul></ul>) 
Itens das listas (<li></li>) 
 
Criação de formulários: 
Os elementos que compõem um formulário são encapsulados dentro das tag composta 
<form></form> 
 
Esses elementos podem ser: caixa de texto, botões, radio buttons, check box. Todos 
eles podem ser criados a partir da tag simples <input/>. O que define cada elemento 
é o atributo type. 
 
<input type=”nome_elemento”/> 
Ex. <input type=”button”/>, <input type=”text”/> 
 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 11 
Inserção de Imagens 
Para inserir imagens no documento HTML, utiliza-se a tag simples <img/> e os 
atributos: src define o local onde a imagem se encontra, width determina a largura da 
imagem em pixels, height determina a altura da imagem em pixels. 
Ex. <img src=”nome_imagem.jpg”/> 
 
Inserção de links 
Os links em páginas HTML servem para ligar conteúdos, para que sua página seja 
dinamizada, possibilitando a navegação. 
 
A tag utilizada para a criação de links é <a></a> com o atributo href: serve para 
indicar a página a ser carregada. 
 
Conforme explanado, no HTML existem várias tags para definição de conteúdo. Além 
das tags citadas, existem várias outras que iremos estudar durante o nosso curso para 
que possamos criar aplicativos com mais funcionalidades. 
No próximo tópico vamos revisar um pouco do CSS (Cascading Style Sheet), também 
conhecido como folha de estilo. Com ele é possível estilizar os elementos do 
documento HTML. 
 
2.2 Introdução ao CSS 
 
Conforme foi revisado no tópico de Introdução ao HTML, os navegadores apresentam 
determinados elementos com estilos distintos (por exemplo,os Cabeçalhos são 
grandes e em negrito, parágrafos são seguidos por uma linha em branco, as imagens 
inseridas sempre são centralizadas ao atributo align, e assim por diante). 
 
Para atribuir estilos mais avançados nos elementos da página HTML, é necessário 
utilizar o CSS, ou folha de estilo em cascata. O CSS é uma linguagem de folhas de 
estilo usada para definir a apresentação visual de um documento HTML. Pode-se usá-
lo para definir propriedades simples como a cor de um texto, seu tamanho e estilo 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 12 
(negrito, itálico etc.), ou propriedade complexas, como layout da página, sua 
opacidade e muito mais. 
 
Pode ser observada no exemplo 4, a seguir, uma regra CSS que informa ao navegador 
para exibir qualquer texto encapsulado no elemento body a ser da cor vermelha. Neste 
exemplo, é importante destacar que body é o seletor (especifica o que foi afetado pela 
regra). A declaração possui um conjunto de propriedade e seus valores. Sendo neste 
exemplo color a propriedade e red o valor da propriedade color. 
 
body {color : red} 
Exemplo 4 - Uma regra CSS 
 
As propriedades em CSS são predefinidas, o que significa que você não pode 
simplesmente inventá-las. Cada propriedade espera receber um valor apropriado e 
podem existir diversos valores para uma determinada propriedade. 
 
No exemplo 5 que veremos a seguir podem ser observadas algumas das propriedades 
mais comuns do CSS. As propriedades que armazenam cores podem receber esses 
valores pré-definidos, como red, green, gray, ou usando uma notação de código 
hexadecimal do HTML, que usa uma (#) cerquilha no início e três pares de dígitos 
hexadecimais (0-F), representando da esquerda para direita os valores vermelho, 
verde e azul (cor verde #00FF00). Para propriedades que recebem medidas, os valores 
atribuídos são 10px, 75% ou 1em. 
 
body{ 
 color:red; 
 background-color: #808080; //cinza 
 font-size: 12px; 
 font-style: italic; 
 font-weight: bold; 
 font-family: Arial; 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 13 
Exemplo 5 – Exemplo declaração CSS 
 
No CSS os seletores mais comuns são: o seletor universal representado por um (*), o 
seletor de classe representado por um (.), o seletor de id representado por (#) e o 
seletor de tag representado pelo (nome_tag). No Exemplo 6 pode ser visualizados 
todos eles. 
 
*{color: red} 
li {font-style: italic} 
.classe1{font-style: italic; font-size: 10px} 
#idP{background-color: yellow} 
 
<h1 class=”classe1”>Olá Usuário</h1> 
<p id=”idP”>Obrigado por visitar a minha página Web.</p> 
<p>Espero que goste.</p> 
<ul> 
 <li class=”classe1”>Maçã</li> 
 <li>Laranja</li> 
 <li>Kiwi</li> 
</ul> 
 
Exemplo 6 – Exemplo de seletores CSS 
 
No exemplo 6 acima, podemos verificar que o seletor (*) irá alterar toda a estética dos 
elementos da página HTML, modificando as cores para vermelho. O seletor (li) irá 
alterar apenas os elementos <li> da lista não-ordenada, para o estilo de fonte italic. 
O seletor (.) irá alterar a estética do elemento que estiver com o atributo class para o 
estilo de fonte italic e tamanho de fonte 10 pixels. Por fim, a estética da tag que estiver 
com o atributo idP será alterada pelo seletor (#) para uma cor de fundo amarela. 
Observando todos esses seletores é possível pensar no seguinte questionamento: e se 
tivermos mais de um seletor para um mesmo elemento? 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 14 
Essa pergunta pode ser respondida através do conceito de hierarquia de seletores. O 
seletor com mais importância para o CSS é o id, depois vem o de classe, o de elemento 
e por fim, e não menos importante, o seletor universal. 
 
Para aplicar as regras CSS, é necessário criar uma folha de estilo e referenciá-la dentro 
do documento HTML. No exemplo 7, a seguir, é possível observar o encapsulamento 
da tag link com o atributo href, que irá referenciar o arquivo do documento CSS, que 
neste caso é efeitosVisuais.css. 
 
<html> 
<head> 
 <title>Minha Página</title> 
 <link rel=”stylesheet” href=”efeitosVisuais.css” type=”text/css”/> 
</head> 
<body> 
<h1 class=”classe1”>Olá Usuário</h1> 
<p id=”idP”>Obrigado por visitar a minha página Web.</p> 
<p>Espero que goste.</p> 
<ul> 
 <li class=”classe1”>Maçã</li> 
 <li>Laranja</li> 
 <li>Kiwi</li> 
</ul> 
</body> 
16. </html> 
 
Exemplo 7 – Inserindo folha de estilo no documento HTML 
 
O exemplo 8 mostra o conteúdo de efeitosVisuais.css. Este arquivo deve ser salvo no 
mesmo local/pasta do arquivo HTML. 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 15 
*{color: red} 
li {font-style: italic} 
.classe1{font-style: italic; font-size: 10px} 
#idP{background-color: yellow} 
 
Exemplo 8 – Uma folha de estilo simples 
 
Vimos nesta seção alguns dos principais fundamentos do CSS. É importante que você 
pesquise mais um pouco e se aprofunde mais no assunto. 
Na próxima seção, vamos estudar um pouco da linguagem Javascript e observar como 
ela fornece um pouco de dinâmica para sites estáticos que apenas possuem o código 
HTML. 
 
2.3 Introdução ao Javascript 
 
Até este ponto do nosso estudo, sabemos estruturar documentos HTML e modificar a 
estrutura visual com CSS. Agora vamos aprender a realizar tarefas na web, deixando 
a interação com o usuário de forma mais dinâmica. 
 
O Javascript é uma linguagem de script que pode ser adicionada a uma página HTML. 
Uma página com essa linguagem se torna mais interativa para o usuário, pois é 
possível verificar os valores digitados em formulários web para garantir a sua 
validação, verificar o clique do botão, criar animações de elementos nos navegadores, 
esconder ou mostrar informações ao usuário de acordo com o que ele clica, enviar 
mensagens para um servidor web para executar alterações no banco de dados sem 
atualizar a página atual e muito mais. 
 
Como qualquer linguagem, o Javascript possui varáveis, arrays (arranjo), objetos, 
operadores e todas as estruturas de controle, como estruturas condicionais simples e 
compostas e estruturas de repetição. No exemplo 9 é possível visualizar alguns 
conceitos básicos da linguagem. 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 16 
 
var comidas = [“arroz”, “feijão”, “macarrão”]; 
for(var i = 0; i < comidas.length; i++){ 
if(comidas[i] == “macarrão”) { 
 alert(comidas[i] + “ é massa”); 
}else{ 
 alert(comidas[i] + “ não é massa”); 
} 
} 
 
Exemplo 9 – Sintaxe básica javascript 
 
Observando o exemplo 9 é possível visualizar alguns detalhes da programação em 
javascript: 
 
Na linha 1, pode-se visualizar a declaração de array (arranjo) de objetos do tipo string. 
O javascript é uma linguagem fracamente tipada, ou seja, para declarar uma variável 
você não precisa definir o seu tipo. É importante também lembrar que o uso de ponto 
e vírgula “;” no javascript é opcional. Veja abaixo o exemplo de declaração de 
variáveis. 
[var] nome [= valor]; : o que estiver entre colchetes é opcional no momento da 
declaração. Exemplo de declarações var nome, var idade = 20, peso = 80.5; 
 
Na linha 2, observamos um laço for que inicializa uma variável com identificador i com 
o valor 0; a saída do laço ocorre quando i chegar ao valor do tamanho do array, ou 
seja, a quantidade de elementos do vetor. 
 
Na linha 3, é verificado a cada interação do for se o elemento atual do array é igual a 
string “macarrão”. 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 17 
Na linha 4, é exibida, através da função alert, uma mensagem ao usuário se oelemento 
atual do array for igual a “macarrão”. 
 
Na linha 6, é exibida, através da função alert, uma mensagem ao usuário se o elemento 
atual do array não for igual a “macarrão”. 
 
É importante destacar alguns pontos da sintaxe javascript: 
 
A palavra var é opcional na declaração de variáveis; 
O ponto e vírgula (;) é opcional no final de cada instrução; 
Blocos de códigos ficam entre chaves ({}); 
O array começa do índice 0; 
Para concatenar duas strings, utiliza-se o operador “+”. 
 
Para criar uma maior dinâmica com o usuário, precisamos manipular o DOM 
(Document Object Model) do HTML através do javascript. O HTML DOM é um padrão 
para recuperação, alteração, adição ou remoção de elementos HTML e suas 
propriedades. 
 
Sobre o DOM: 
Todos os elementos são representados como uma estrutura de árvore na memória; 
O documento inteiro é um nó; 
Cada elemento HTML é um nó; 
O texto dos elementos HTML são nós; 
Cada atributo do HTML é um atributo de um nó; 
Comentários são nós de comentário. 
 
O exemplo 10 exibe um pequeno trecho de código Javascript, no qual o mesmo altera 
um texto da página quando o usuário clica no botão. 
 
<html> 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 18 
 <head> 
 <title>Minha Página</title> 
 <script type=”text/javascript” charset=”utf-8”> 
 function helloWorld(){ 
 document.getElementById(“idElemento”).innerHTML = 
 “Hello World”; 
 } 
 </script> 
 </head> 
 <body> 
 <h1 id=”idElemento”></h1><br/> 
 <input type=”button” onClick=”helloWorld()”/> 
 </body> 
</html> 
Exemplo 10 – Manipulando onClick simples 
 
Observando o exemplo 10, é possível visualizar: 
Linha 4, criação de um bloco de script no cabeçalho do documento; 
 
Linha 5, definição de uma função javascript helloWorld() dentro do bloco de script; 
 
Linha 6, uma instrução javascript que acessa o DOM do HTML a partir do comando 
document, e com a função getElementById(“id”) tem acesso ao elemento do Id que 
está sendo passado como parâmetro. O comando innerHTML atribui ao texto do 
elemento pego o valor da string “Hello World”; 
 
Linha 9, final do bloco script; 
 
Linha 13, criação de um botão no HTML a partir da tag <input/> e definição do evento 
onClick, que executará a função helloWorld quando o botão for clicado. 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 19 
Com uma breve explicação do funcionamento da linguagem javascript terminamos 
esse tópico de seção e no próximo falaremos sobre uma biblioteca que usa a linguagem 
javascript facilitando o desenvolvimento, chamada JQuery. 
 
2.4 Introdução ao JQuery 
 
Antigamente o desenvolvimento de websites não possuía muitas bibliotecas que 
facilitassem o desenvolvimento da aplicação. Toda a dinâmica e interação com usuário 
tinha que ser feita usando a linguagem javascript pura. 
 
No entanto, hoje em dia temos muitas bibliotecas que facilitam o desenvolvimento 
web. Entre elas estão JQuery, Angular JS, Prototype, o Mootools e muito mais. 
 
Nesse tópico de seção, e durante nossos projetos de aplicações de aplicativos, será 
apresentada a biblioteca JQuery. Então, vamos abordar um pouco alguns conceitos 
dessa biblioteca. 
 
Usar JQuery durante o desenvolvimento web possui algumas vantagens, entre elas 
estão: diminuição da quantidade de códigos gerados pela linguagem javascript, 
tornando o código mais compacto e fácil de ler; compatibilidade e portabilidade do seu 
código entre diversos navegadores, pois antigamente diferentes navegadores tinham 
diferentes suportes a javascript, o que poderia gerar vários erros na execução de 
código entre vários navegadores (Internet Explorer 6, Safari, Firefox). O JQuery já tem 
funções prontas que tratam essa compatibilidade para você. 
 
Para exemplificar o funcionamento do JQuery, vamos replicar a lógica do código do 
exemplo 10, para criarmos o exemplo 11 com a biblioteca JQuery. 
 
<html> 
 <head> 
 <title>Minha Página</title> 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 20 
 <script type=”text/javascript” src=”jquery.js”></script> 
 <script type=”text/javascript” charset=”utf-8”> 
 function helloWorld(){ 
 $(“#idElemento”).text(“Hello World”); 
 
 } 
 </script> 
 </head> 
 <body> 
 <h1 id=”idElemento”></h1><br/> 
 <input type=”button” onClick=”helloWorld()”/> 
 </body> 
</html> 
 
Exemplo 11 – Manipulando com JQuery 
 
A linha 4 inclui a biblioteca jquery.js. Usando o atributo src da tag <script>, ela usa o 
caminho relativo, o que significa que o arquivo fica na mesma pasta (diretório) da 
página que a está usando. No entanto, vários domínios deixam-na disponível para você 
acessá-la a partir de url, um deles é o da google. 
 
Na linha 7, pode ser visualizado que a quantidade de código para acessar o elemento 
no DOM diminui bastante. A partir de agora, usamos o cifrão ($) seguido de parênteses 
$() para definir qual elemento acessar a partir do id passado por parâmetro. E ao invés 
de usarmos o innerHTML, usamos a função text() para atribuir o texto ao elemento. 
 
Com essa pequena descrição do funcionamento da biblioteca JQuery, encerramos a 
segunda seção, na qual revisamos algumas das principais tecnologias usadas no 
desenvolvimento web. 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 21 
No próximo tópico de seção, iremos criar a tela principal de um aplicativo para um 
diário eletrônico. 
 
2.5 Criando Tela Principal de um Aplicativo – Diário 
 
Como explicado anteriormente, o Phonegap/Cordova utiliza linguagem HTML, CSS e 
Javscript para desenvolvimento de aplicativos multiplataformas. Como pode ser visto 
no exemplo 12, a seguir, a cor de background do aplicativo é um ciano e um texto 
com o nome “Diário” está no centro da tela. Se o usuário clicar no nome, uma 
mensagem é exibida informando que o aplicativo está em construção. 
 
O código da aplicação está dividido em três arquivos e pode ser visualizado nos 
exemplos 12, 13 e 14; o primeiro é o código HTML, com nome de arquivo index.html; 
o segundo é o código em CSS, com nome de arquivo index.css; e o último, o arquivo 
javascript chamado de index.js. 
 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8"/> 
 <meta name="format-detection" content="telephone=no"> 
 <meta name="viewport" content="user-scalable=no, initial-scale=1, 
 maximum-scale=1, minimum-scale=1, width=device-width"> 
 <link rel="stylesheet" type="text/css" href="css/index.css"> 
 <title>Hello World</title> 
</head> 
<body> 
 <div id="idDiario"> 
 <h1 onClick="mensagem()">Diário</h1> 
 </div> 
 <script type="text/javascript" src="js/index.js"></script> 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 22 
 </body> 
</html> 
 
Exemplo 12 – Arquivo index.html 
 
Informações importantes do código do exemplo 12: 
Nas linhas 5 e 6 podemos visualizar algumas configurações na tag meta do Phonegap. 
Algumas configurações são colocadas no head do HTML e outras são colocadas em 
um arquivo XML que será explicado depois. 
 
Na linha 8, é possível observar o código de inclusão de um arquivo CSS, chamado 
index.css. 
 
Na linha 15, observamos o include de um arquivo javascript, chamado index.js; nesse 
arquivo está a tarefa que será executada quando o usuário clicar na string “Diário”, já 
que esta possui o evento onClick. 
 
#idDiario 
{ 
 font-family: Arial;font-size: 16; 
 position: absolute; 
 left: 50%; 
 top: 50%; 
 margin-left: -50px; 
 margin-top: -23px; 
} 
 
body{ 
 background-color: #00ffff; 
} 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 23 
Exemplo 13 – Arquivo index.css 
 
Informações importantes do exemplo 13: 
Na linha 1 podemos observar a definição de uma regra CSS que possui o seletor de id, 
no qual o id chamado é “idDiario”, que se refere a string “Diário” que está contida na 
tag <h1>. 
 
Entre as linhas 2 e 10 está toda a configuração estética da string “Diário” no HTML. 
Na linha 12 podemos observar a definição de uma regra CSS que possui o seletor de 
elemento, no qual o elemento escolhido é o body. 
 
Na linha 13, atribuímos a cor ciano na cor de background da página HTML. 
function mensagem(){ 
 alert("O Aplicativo está em construção"); 
} 
 
Exemplo 14 – Arquivo index.js 
 
Informações importantes do exemplo 14: 
 
Na linha 1 está a definição da função mensagem que será chamada quando a string 
“Diário” for clicada. 
 
Na linha 2 está a definição da função alert(), que exibirá a mensagem “O Aplicativo 
está em construção”, quando a função for ativada. 
 
Na próxima seção, iremos entender como funcionam alguns serviços do Phonegap 
criados pela adobe. São eles: Phonegap build e Phonegap App. 
 
3. Phonegap 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 24 
Nesta seção, será estudada a tecnologia Phonegap e como ela pode facilitar o 
desenvolvimento de aplicativos mobile multiplataforma. Iremos compreender o 
funcionamento de alguns de seus serviços, como o Phonegap build e o Phonegap App. 
 
Nesta apostila vamos estudar o Apache Cordova para criar nossos aplicativos. Já foi 
explicado que o Phonegap é uma distribuição do Cordova. O Cordova possui uma 
comunidade ativa de desenvolvedores; com isso, as novidades tendem a sair 
primeiramente para esse framework. 
 
Como nesta seção será estudado o Phonegap, precisamos conhecer alguns dos seus 
serviços, que ajudam no desenvolvimento da aplicação, principalmente na sua fase 
inicial. Esses serviços são: 
 
Phonegap Desktop: Aplicativo Desktop básico para criar e servir aplicativos 
Phonegap. 
 
Phonegap Developer App: Aplicativo mobile que possibilita o teste de aplicativos 
no celular sem precisar instalar a aplicação. 
 
Phonegap Build: Serviço remoto, que permite a criação de aplicativos remotamente 
(nuvem), sem precisar da infraestrutura na máquina. 
 
Agora vamos estudar cada um deles. 
 
3.1 Phonegap Build 
 
Quando começarmos a desenvolver nosso aplicativo em Cordova, você irá perceber 
que uma das grandes dificuldades é configurar o ambiente de desenvolvimento, pois 
cada plataforma possui as suas particularidades. 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 25 
A aplicação pode ser desenvolvida em qualquer plataforma, pois utilizaremos HTML5, 
CSS e Javascript para implementação do aplicativo, mas para compilá-la é necessário 
seguir as regras de cada plataforma. 
 
As três principais plataformas de desenvolvimento são: Android, iOS e Windows Phone. 
Quando a aplicação for compilada, é necessário gerar um aplicativo nativo para cada 
uma delas. Por exemplo, se o aplicativo for para o Android, precisamos gerar um 
instalável (.apk), para isso será necessário o Android SDK. Para o iOS é necessário ter 
uma Mac baseado no chip Intel Xcode. Para o Windows Phone é necessário o Windows 
7, 8 ou 10 e o Visual Studio. Assim, os requisitos variam para cada plataforma. 
 
Nesse contexto entra o Phonegap Build. Este é um serviço da Adobe na nuvem, que 
converte uma aplicação criada em HTML, CSS e Javascript em um aplicativo nativo, ou 
seja, ele é um compilador na nuvem. O serviço possui toda a infraestrutura de Android, 
iOS, e Windows Phone instalada para você. Essa explicação pode ser visualizada na 
figura 1, onde as aplicações criadas em HTML5, CSS e Javascript passam pelo 
Phonegap build e sai a aplicação nativa da plataforma. 
 
 
Figura 1 – Processo de compilação do Phonegap Build 
 
Como pode ser visualizado na Figura 2, o Phonegap build pode ser acessado no site 
https://build.phonegp.com. 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 26 
 
Figura 2 – Página Principal Adobe Phonegap Build 
 
3.2 Adobe Phonegap Build 
 
É um serviço pago. Mas possui um acesso gratuito com algumas restrições. Se você já 
possuir a assinatura creative cloud da Adobe, terá acesso ao plano máximo do build; 
senão, é necessário pagar uma quantia de 10 dólares por mês. No plano gratuito, 
possuímos quase todas as vantagens do plano pago, no entanto, só podemos criar um 
aplicativo privado e todos os aplicativos têm um tamanho máximo. Na figura 3, 
podemos visualizar o plano mensal e as vantagens e desvantagens entre os planos 
pago e gratuito. 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 27 
 
Figura 3 – Tabela de preços e vantagens do adobe Phonegap Build 
 
Podemos observar, na figura 3, que a diferença maior entre o plano gratuito e os 
outros é que neste plano só podemos possuir um aplicativo privado, criar aplicativos 
com no máximo 50mb de tamanho e não podemos fazer o upload de plug-ins no 
Phonegap Build. Iremos estudar os plug-ins no Phonegap mais adiante. 
 
Na figura 4, pode ser visualizado o ambiente de aplicativos privados do Phonegap 
Build. A diferença entre aplicativo público e privado é que no público é necessário que 
o código da sua aplicação esteja no github (um sistema de compartilhamento de 
código), com isso sua aplicação será de código aberto e todos poderão partilhar desse 
código. Já na aplicação privada, você pode fazer o upload de uma aplicação criada em 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 28 
HTML, CSS e Javascript a partir de um arquivo compactado (.zip), que esteja na sua 
máquina, dessa forma não é necessário compartilhar o código. 
 
 
Figura 4 – Ambiente principal Adobe Phonegap 
 
Depois de realizar o upload, clique para fazer o build, ele lhe direcionará para uma tela 
de configurações do aplicativo; nessa janela coloque o nome a descrição do aplicativo 
e clique em gerar aplicativo, ele irá demorar um pouco e irá lhe direcionar para uma 
janela para realizar o download da aplicação recém-criada. 
 
Na figura 5, pode ser observada a janela após o build ser criado. Nela podemos 
observar no canto inferior esquerdo as plataformas em que podemos realizar o 
download. Também é possível fazer o download do aplicativo a partir do QRCode. 
 
 
Figura 5 – Ambiente após o build da aplicação. 
1. 
2. 3. 
4. 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 29 
 
Informações importantes da página, referentes a cada número de vermelho: 
 
Está disponível o download dos aplicativos gerados para cada plataforma. 
 
Está o QRCode para realização do download do aplicativo. Selecione a plataforma e 
leia o QRCode. 
 
Estão algumas informações sobre a configuração do aplicativo. 
 
É possível atualizar o código e passar o xml de configuração do aplicativo. 
 
É importante destacar que a plataforma mais amigável para realizarmos nossos testes 
é o Android, pois podemos gerar seu código de forma simples e instalar em qualquer 
dispositivo, sem burocracia. 
 
3.3 Configurando o Phonegap Build 
 
Podemos realizar algumas configurações no nosso aplicativo, a partir de um código 
xml. Nessas configurações podemos alterar o nome, o ícone, a descrição e o autor do 
aplicativo. Esse código pode ser visualizado no exemplo 15. 
<?xml version="1.0" encoding="UTF-8"?> 
<widget xmlns="http://www.w3.org/ns/widgets"xmlns:gap="http://phonegap.com/ns/1.0" 
id="org.thiagocomputer.diario" 
version="1.0.0"> 
<name> 
 Diário 
</name> 
<description> 
 Meu Diário. 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 30 
</description> 
<author href="http://thiagocomputer.com.br" email="email@email.com "> 
 Thiago Computer 
</author> 
</widget> 
Exemplo 15 – Arquivo config.xml 
 
Informações importantes do exemplo 15: 
 
Da linha 2 à 4, são definidos o id e as configurações de xmlns do arquivo xml, 
lembrando que o id deve ser único e será criado a partir de uma url que não precisa 
ser real (não estar em funcionamento). 
 
Na linha 7 definimos o nome da aplicação entre as tags name. 
 
Na linha 10 definimos a descrição da aplicação entre as tags description. 
 
Na linha 12 definimos os dados do desenvolvedor do aplicativo, na tag author. 
 
Para testarmos, vamos criar dentro da pasta onde estão os códigos de HTML, CSS e 
Javascript do nosso projeto, e criamos o arquivo xml config.xml, colando todo o código 
do exemplo acima dentro dele. 
 
Com o arquivo XML criado dentro da pasta do projeto, basta recriar o arquivo ZIP da 
aplicação e realizar o update da build no Adobe Phonegap Build. Na figura 6, pode ser 
visualizado onde podemos realizar o update no serviço da Adobe. 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 31 
 
Figura 6 – Update build do aplicativo 
 
Para trocar o ícone e a tela de splash do aplicativo, é necessário colocar no config.xml 
as tags <icon/> e <gap:splash/>. 
 
A tag <icon/> irá adicionar um ícone na aplicação. O ícone deve ser um arquivo PNG, 
com o tamanho dependendo do dispositivo. Exemplo: <icon src=”icon.png”/>, o 
atributo src define o caminho relativo no arquivo PNG. 
 
A tag <gap:splash/> irá adicionar uma tela de splash na aplicação. A tela de splash é 
também um PNG e pode possuir vários tamanhos, dependendo da resolução do 
aparelho. Se a plataforma for Android podemos usar um arquivo de 720x1280. 
Exemplo: <gap:splash src=”splash.png”/> 
 
Neste tópico de seção, compreendemos que o serviço Adobe Phonegap Build é 
importante para criarmos nossa aplicação e compilá-la para qualquer plataforma. Na 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 32 
próxima seção iremos entender como instalar o Adobe Phonegap APP e o Adobe 
Phonegap Desktop para testar a aplicação antes de compilá-la para o código nativo do 
dispositivo destino. 
 
3.4 Phonegap APP 
 
Na fase inicial do projeto, é muito grande a quantidade de testes realizados com o 
aplicativo. Pensando nesses testes, o Adobe criou um serviço chamado Adobe 
Phonegap APP. Imagine como seria inviável se toda vez que fosse necessário atualizar 
um aplicativo e testá-lo, uma nova compilação (build) fosse preciso. 
 
O Phonegap APP você instala no aparelho e faz o link através da rede com o projeto 
em sua máquina. Ele puxa a versão mais recente do código e abre no aplicativo, como 
se fosse o App final. Com isso, você instala o App uma vez no aparelho e sempre que 
atualizar na máquina, realiza acesso ao código de forma remota. 
 
3.5 Phonegap Desktop APP 
 
O Phonegap Desktop APP é uma aplicação desktop que permite a criação de um 
projeto Phonegap. Ela é bem simples e cria toda a estrutura de um projeto Phonegap. 
Para fazer o download da aplicação acesse o link: http://phonegap.com/getstarted/ 
 
Depois de instalar a aplicação, execute-a e clique no botão “+” para criar um novo 
projeto, informe o local onde o projeto será salvo, o nome do projeto e seu id. O passo 
a passo da criação do projeto pode ser visualizado na figura 7. 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 33 
 
Figura 7 – Tela de criação de projetos Phonegap Desktop 
 
De acordo com a figura 7 e os números em vermelho: 
 
 Botão para criar um novo projeto 
 Local (Pasta) onde o projeto será criado 
 Nome do Projeto 
 ID do projeto 
 
Depois que o projeto for criado, ele gera um endereço que aparece embaixo da janela 
– um IP na porta 3000. Esse endereço deve ser anotado, pois vamos usá-lo no Adobe 
Phonegap App, no aparelho para executar o aplicativo remotamente. Na figura 8, pode 
ser visualizada a tela do projeto criado e com o endereço dele criado na rede. 
 
1. 
2. 
3. 
4. 
5. 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 34 
 
Figura 8 – Tela de manutenção dos projetos criados 
 
3.6 Organização de um projeto Phonegap 
 
Abra a pasta onde você mandou criar o projeto e veja o seu conteúdo. Você verá que 
possui várias subpastas: cordova, hooks, platforms, plug-ins, www e um arquivo 
config.xml. Mais adiante no nosso estudo, estas pastas serão estudadas com mais 
detalhe. 
 
No momento precisamos saber que todo o nosso código está na pasta www. Todo o 
nosso código HTML, CSS e Javascript criado deve ser colocado dentro dessa pasta. 
Veja que dentro dela já tem um arquivo index.html e subpastas contendo o código 
javascript e css. 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 35 
Pegue todos os arquivos criados no nosso diário e jogue dentro dessa pasta. 
 
3.7 Adobe Phonegap App Developer 
 
Depois de ter criado o projeto no Phonegap Desktop é necessário instalar o aplicativo 
do Phonegap App Developer. Ele está disponível para qualquer plataforma Android, 
iOS e Windows Phone e pode ser encontrado nas lojas oficiais de cada sistema. 
 
Depois de ter feito o download e realizado a instalação do aplicativo, é só apertar o 
botão Conect, passando o IP e a porta fornecida pelo Adobe Phonegap Desktop. Ele 
vai realizar o download do código e carregar no browser do aparelho. Ótimo para 
testar rapidamente. Esse passo a passo pode ser visualizado na figura 9. 
 
 
Figura 9 – Tela de conexão e aplicação executando 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 36 
Podem ser observadas na figura 9 duas imagens: a imagem 1 retrata o aplicativo e 
como você deve se conectar com a aplicação que está no computador. É importante 
ressaltar que a aplicação do celular e o computador devem estar na mesma rede. Já 
na imagem 2, pode ser visualizada a aplicação executando no browser do celular. 
 
Nesta seção, foi compreendido como funcionam os serviços da Adobe que auxiliam no 
desenvolvimento de um aplicativo Phonegap. Foi estudado o Adobe Phonegap Build, 
o Adobe Phonegap Desktop e o Adobe Phonegap App. Mesmo estudando todos esses 
serviços, pode ser visualizado que não temos ainda um ambiente de desenvolvimento 
na nossa máquina e se quisermos realmente desenvolver aplicativos profissionais, 
precisaremos de alguns recursos que esses serviços não nos proporcionam, como 
acesso a uma depuração mais detalhada do código e os plug-ins que nos vão dar 
acesso a elementos nativos do dispositivo, como câmera e microfone. 
 
3.8 Criando Ambiente de Desenvolvimento no PC 
 
Nesta seção, iremos configurar o nosso ambiente de desenvolvimento local. 
Durante nosso curso vamos trabalhar com o framework Cordova e a plataforma 
Android. 
 
O código do aplicativo pode ser implementado em um bloco de notas. No entanto, sua 
compilação deve ser realizada para a plataforma final do desenvolvimento. 
Para compilar o projeto em nossa máquina iremos precisar das ferramentas listadas 
abaixo: 
 
Plataforma Java Development Kit (JDK) 
Android SDK 
Apache Ant 
NodeJs 
Apache Cordova 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 37 
 
3.9 Instalação da Plataforma Java 
 
Como vamos utilizar a JDK do Android para ativar o seu emulador e testar as nossas 
aplicações, precisamos instalar a JDK no nosso computador. Para baixá-la é 
necessárioacessar o site da Oracle 
http://www.oracle.com/technetwork/java/javase/downloads/index.html e clicar em 
Java Plataform, como pode ser visualizado na figura 10 a seguir. 
 
 
Figura 10 – Página de download do Java Platform 
 
Como pode ser observado na figura 11, depois de ter clicado em Java Platform, aceite 
os termos e baixe a versão que corresponda ao seu sistema operacional. 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 38 
 
Figura 11 – Página de escolha do Java Platform 
 
Realize o download e instale a JDK no seu computador. 
 
3.10 Criando e configurando as variáveis de ambiente 
 
Após a instalação da JDK, é preciso configurar as variáveis de ambiente do 
computador. Acesse a janela de configuração do sistema. Vá até o menu iniciar, clique 
com o botão direito do mouse sobre Computador->Propriedades para exibir a janela 
de configurações do sistema. 
 
Como observado na figura 12, quando a janela abrir, clique na opção Configurações 
avançadas do sistema para abrir a janela de propriedades do sistema. 
 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 39 
Figura 12 – Janela configurações do sistema 
 
Assim que a janela de propriedades do sistema abrir, clique no botão Variáveis do 
Ambiente, figura 13. 
 
 
Figura 13 – Janela Propriedades do sistema 
 
Na janela de variáveis de ambiente, clique no primeiro botão novo, do módulo 
Variáveis de usuário para %Username% (nome usuário), figura 14. 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 40 
 
Figura 14 – Configurando variáveis de Ambiente 
 
Depois de clicar no botão novo, irá abrir a caixa de diálogo Nova Variável de Usuário. 
Nessa caixa de diálogo adicione a variável JAVA_PATH, figura 15. 
 
Nome da variável: JAVA_PATH 
Valor da Variável: C:\Program Files\Java\jdk1.8.0_92 (Esse valor pode variar de acordo 
com a versão do JDK) 
 
 
 
Figura 15 – Configurando variável JAVA_PATH 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 41 
Depois de adicionar as informações em Nome da variável e Valor da variável, clique 
em Ok. 
 
Da mesma forma que criamos a variável JAVA_PATH, crie as demais variáveis. 
 
Variável PATH 
Nome da Variável: PATH 
Valor da Variável: C:\Program 
Files\Java\jdk1.8.0_92\bin;C:\Users\Thiago\AppData\Roaming\npm 
Variável CLASSPATH 
Nome da Variável: CLASSPATH 
Valor da Variável: .;JAVA_PATH 
Variável JAVA_HOME 
Nome da Variável: JAVA_HOME 
Valor da Variável: C:\Program Files\Java\jdk1.8.0_92 
Variável ANT_HOME 
Nome da Variável: ANT_HOME 
Valor da Variável: C:\Android\apache-ant 
Variável ANDROID_HOME 
Nome da Variável: ANDROID_HOME 
Valor da Variável: C:\Android\sdk 
 
Agora é necessário editar a variável Path do segundo botão novo, do módulo de 
Variáveis do sistema, figura 16. 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 42 
 
Figura 16 – Editando variável Path 
 
Procure pela variável Path, selecione e clique o botão editar. 
 
É importante perceber que essa variável já possui conteúdo. Não apague o conteúdo 
já existente, apenas posicione o cursor na última posição do texto e adicione a seguinte 
informação: 
 
;C:\Android\sdk\platform tools;C:\Android\sdk\tools;C:\Android\apache-ant\bin 
 
Clique em Ok para salvar as configurações. 
 
3.11 Instalando o Android SDK 
 
Para realizar o download do Android SDK, acesse o link: 
https://developer.android.com/studio/index.html e selecione a opção download 
options, figura 17. 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 43 
 
Figura 17 – Página inicial android studio 
 
Você será direcionado para as opções de download. Baixe a versão Zip do Command 
Line tools, figura 18. 
 
 
Figura 18 – Opção de download Android sdk tools 
 
Depois de realizar o download, extraia o conteúdo do arquivo baixado dentro da pasta 
C:\Android\sdk, como pode ser visualizado na figura 19. É importante que o conteúdo 
seja extraído nessa pasta, pois fizemos referência a ela nas variáveis de ambiente 
como ANDROID_HOME. 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 44 
 
Figura 19 – Local extrair arquivos baixados 
 
3.12 Configurando o Android SDK Manager 
 
Próximo passo que devemos realizar é configurar o Android SDK Manager. Depois de 
extrair os arquivos, clique duas vezes no SDK Manager.exe para executá-lo. Ele 
permite gerenciar as várias versões disponíveis no SDK do Android e nele estão listadas 
todas as versões disponíveis, como pode ser visualizado na figura 20 
 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 45 
Figura 20 – Janela Android SDK Manager 
 
Como pode ser observado na figura 21, primeiro é necessário selecionar os pacotes 
de ferramentas básicas. 
 
 
Figura 21 – Pacote de ferramentas básicas do Android 
 
Para compilar o projeto, o Cordova utiliza a versão do Android 5.1.1 (API 22) do SDK. 
Então, é de extrema importância que o emulador seja criado nessa versão. Com isso, 
selecione a versão 5.1.1 (API 22) e os pacotes, SDK Platform, ARM EABI v7a System 
Image, Intel x86 Atom System Image, como pode ser observado na figura 22. 
 
 
Figura 22 – Seleção da versão do Android e pacotes 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 46 
Na parte de Extras, selecione as opções de Android Suport Repository, Google USB 
Driver e Intel x86 Emulator Accelerator (HAXM installer), como pode ser visualizado 
na figura 23. 
 
 
Figura 23 – Seleção dos pacotes extras 
 
Como pode ser observado na figura 24, clique em Install x Packages, para instalar 
todos os pacotes selecionados. 
 
 
Figura 24 – Botão de instalação de pacotes. 
 
Por fim, aceite as licenças clicando em Accept Licence e depois em Install, como pode 
ser visualizado na figura 25. 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 47 
 
Figura 25 – Aceitando licenças e Instalando os pacotes 
 
3.13 Criando um Virtual Device 
 
Depois que a instalação dos pacotes terminar, selecione o menu e escolha a opção 
TOOL->AVD Manager, para exibir a janela Android Virtual Device Manager. 
Depois clique em create, para criar o emulador, como pode ser observado na figura 
26. 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 48 
 
Figura 26 – criação do emulador 
 
Configuração do Emulador: 
AVD Name: AVD 
Device: Nexus 4 (4.7”, 768 x 1280:xhdpi) 
Target: Android 5.1.1 – API Level 22 
CPU ABI: ARM (armeabi-v7a) 
 
Para tornar a emulação mais rápida você pode verificar se o seu processador possui 
suporte à tecnologia HAXM, para isso é só realizar o download e instalar o utilitário da 
intel https://downloadcenter.intel.com/download/7838 e verificar se as opções 
Intel(R) Virtualization Technology e Intel VT-x with Extended Page Tables estão 
marcadas com yes, na aba CPU Technologies. 
 
Se tiver suporte a esta tecnologia, realize o download HAXM for Windows nesse link: 
https://software.intel.com/en-us/android/articles/intel-hardware-accelerated-
execution-manager-end-user-license-agreement e instale na sua máquina. 
Depois selecione a opção: CPU ABI: Intel Atom x86 
Keyboard: checkbox selecionado. 
500 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 49 
Back Câmera: Emulated. 
 
Depois de configurar o emulador, clique em ok e selecione o emulador recém-criado 
na lista de AVD e clique no botão start, como pode ser visualizado na figura 27. 
 
 
Figura 27 – Lista de AVD 
 
Aguarde um momento para o emulador ser carregado; se não apresentar nenhum 
erro, a instalação ocorreu de forma correta. 
 
3.14 Instalando o Apache Ant 
 
Paracriar projetos com o Phonegap/Cordova, é necessário realizar o download do 
Apache-ant; para isso, acesse o link: http://ant.apache.org/bindownload.cgi e faça o 
download do arquivo apache ant zip, como pode ser visualizado na figura 28. 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 50 
 
Figura 28 – Download Apache Ant 
 
Depois de realizar o download, extraia o conteúdo do arquivo para a pasta C:\Android 
e renomeie a pasta para apache-ant, pois a variável de sistema Path e HOME_ANT 
foram configuradas para esse caminho. A configuração final da pasta Android pode ser 
observada na figura 29. 
 
 
Figura 29 – Configuração final pasta Android. 
 
 
3.15 Instalando o NodeJs 
 
As versões mais recentes do Phonegap/Cordova, mais especificamente depois da 
terceira, devem ser instaladas a partir do gerenciador de pacotes npm do NodeJs. Para 
realizar o download do NodeJs, acesse o link: https://nodejs.org/en/, como pode ser 
visualizado na figura 30. Durante a criação dessa apostila, estamos usando a versão 
v4.4.5 LTS. 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 51 
 
 
Figura 30 – Download NodeJs 
 
Após o download, realize a instalação com as configurações padrão. 
 
3.16 Instalando o Cordova 
 
A instalação do Phonegap/Cordova é feita através do gerenciador de pacotes NodeJs. 
Acesse o Prompt de comando do Windows (através do atalho tecla Windows + r e 
digite cmd). 
 
No prompt execute o comando abaixo: 
 
npm install –g cordova 
 
Assim que a instalação terminar, o Prompt ficará de acordo com a figura 31 abaixo: 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 52 
 
Figura 31 – Fim da instalação do Cordova 
 
Dessa forma terminamos toda a instalação do nosso ambiente de desenvolvimento. 
Na próxima seção vamos criar nossa primeira aplicação. 
 
Criando uma Aplicação com Cordova e Configuração nas Demais Plataformas 
 
Nesta seção iremos começar a desenvolver nossos aplicativos. 
 
3.17 Criando um Projeto Android com Cordova 
 
Primeiramente, precisamos criar uma estrutura de pastas para salvar os nossos 
projetos. Crie a seguinte estrutura C:\Phonegap\Projetos. Ou seja, crie no disco rígido 
C:\ a pasta Phonegap e dentro dela crie a pasta Projetos. 
 
Agora execute novamente o Prompt de comando. Ele pode ser executado a partir do 
atalho (tecla Windows + r e digitar cmd) ou o menu iniciar no Windows 8.1, pesquisar 
por cmd, como pode ser visualizado na figura 32. 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 53 
 
Figura 32 – Atalho Windows r e Pesquisar Windows 8.1 
 
Depois de executar o Prompt de comando, digite: 
 
cd C:\Phonegap\Projetos 
 
Assim que você digitar esse comando no Prompt, aperte Enter. Se tudo der certo, o 
caminho do Prompt estará como a imagem da figura 33. 
 
 
Figura 33 – Acessando pasta dos projetos Phonegap 
 
Para criar um projeto Phonegap/Cordova, esteja na pasta C:\Phonegap\Projetos que 
acabamos de criar e digite o comando abaixo: 
 
cordova create [nome_do_projeto] 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 54 
Para exemplificar, vamos criar o projeto hello_world. 
 
cordova create hello_world 
 
Se tudo estiver correto, a mensagem que pode ser visualizada na figura 34 será 
exibida. 
 
 
Figura 34 – criando projeto cordova 
 
Entre na pasta do projeto com o comando abaixo: 
 
cd hello_world 
 
Adicione a plataforma de desenvolvimento ao projeto com o comando abaixo, no nosso 
caso será o Android: 
 
cordova platform add android 
 
No momento que a plataforma for adicionada ao projeto, o cordova realiza o download 
do código-fonte da plataforma para o computador e depois copia para pasta platform 
do projeto, como pode ser observado na figura 35. 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 55 
 
Figura 35 – Adicionando plataforma Android ao projeto 
 
Para compilar o projeto e ver sua execução no Emulador Android, execute o comando 
abaixo: 
 
cordova run android 
 
No momento em que o comando for executado, o projeto começa a ser compilado. Se 
for a primeira vez que o projeto está sendo executado, o processo é um pouco 
demorado, pois o cordova precisa baixar uma série de arquivos. 
 
Espere o emulador carregar e, se tudo der certo, você verá a página padrão do projeto 
Apache Cordova, como pode ser visualizado na figura 36. 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 56 
 
Figura 36 – Tela padrão do projeto Apache Cordova 
 
Depois que criamos o nosso primeiro projeto, é importante verificar a organização de 
pastas do projeto criado. Ele está localizado na pasta Projeto que criamos 
anteriormente. 
 
Como pode ser visualizado na figura 37, é criada a mesma arquitetura de pasta que 
foi criada quando criamos nosso projeto Phonegap com o Adobe Phonegap Desktop. 
Só que agora podemos manipular toda a arquitetura de uma maneira mais 
independente. 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 57 
 
Figura 37 – Arquitetura de pastas do projeto hello_world cordova. 
 
Você pode testar o projeto com o Adobe Phonegap Desktop e o Adobe Phonegap App, 
como pode ser observado na figura 38. 
 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 58 
Figura 38 – Executando projeto hello_world no Adobe Phonegap Desktop 
 
Como explanado anteriormente nosso código pode ser criado em um editor de texto. 
No entanto, é melhor criá-lo utilizado uma ferramenta que forneça recursos que 
ajudem no desenvolvimento. Com isso, podemos utilizar o Editor Sublime. Seu 
download pode ser encontrado no link: http://www.sublimetext.com/2. 
 
Depois de realizar o download do arquivo, instale no computador com as configurações 
padrão. 
 
3.18 Configurações do Cordova nas demais plataformas 
 
No desenvolvimento com o framework Cordova, cada plataforma terá as suas 
exigências. Basicamente precisamos configurá-lo para as seguintes tarefas: 
desenvolver, emular, testar no aparelho e publicar. 
 
A plataforma Android é a mais genérica e amigável de todas, está disponível para 
Windows, Mac e Linux. Podemos dividir as quatro tarefas no Android, com a lista 
abaixo: 
 
 Desenvolvimento: Android SDK; 
 Emuladores: Seu emulador já está no SDK do Android; 
 Teste em aparelho: pode ser testado em qualquer aparelho com essa 
plataforma; 
 Publicar: é necessária uma conta de desenvolvedor, 25 dólares uma vez, para 
criá-la; 
 
Para desenvolver na plataforma Windows Phone é necessário o Windows 8.1 ou o 10, 
na versão Pro 64bits. Suas etapas são divididas na lista abaixo: 
 
Desenvolvimento: Visual Studio ou Visual Studio Express; 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 59 
Emuladores: Seu emulador já está no Visual Studio, e são necessários processadores 
modernos para executar; 
 
Teste em aparelho: É necessário registrar o aparelho no SDK e instalar o aplicativo 
pelo desktop; 
 
Publicar: é necessária uma conta de desenvolvedor, 19 dólares o ano, para criá-la e 
mantê-la. 
 
Para desenvolver na plataforma iOS, é necessário ter um Mac. Suas etapas são 
divididas na lista abaixo: 
 
Desenvolvimento: Xcode; 
 
Emuladores: Seu emulador já está integrado no Xcode; 
 
Teste em aparelho: a partir do Xcode 7, já pode testar direto no aparelho; 
 
Publicar: exige Xcode e uma conta de desenvolvedor que custa 99 dólares anuais; 
 
Durante nossas aulas vamos testar nossas aplicações no Android. Mas é importante 
destacar que, como estamos criando aplicativos multiplataforma, qualquer ambiente 
pode desenvolvê-los. 
 
3.19 Plug-ins CordovaNessa seção, estudaremos alguns dos plug-ins que o Cordova fornece para dar acesso 
a alguns recursos nativos dos dispositivos. 
 
Antes de estudar como os plug-ins funcionam no Cordova, vamos revisar como é a 
estrutura básica do arquivo index.html, criado pelo projeto do Cordova. Se você for na 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 60 
pasta do projeto hello_world que foi criada anteriormente e entrar na pasta www, verá 
que lá está o arquivo index.html. Abra-o e deixe igual ao exemplo 16 a seguir: 
 
<!DOCTYPE html> 
<html> 
<head> 
 <meta name="format-detection" content="telephone=no"> 
 <meta name="viewport" content="user-scalable=no, initial- 
 scale=1, maximum-scale=1, minimum-scale=1, width=device- 
 width"> 
 <title>Hello World</title> 
</head> 
<body> 
 <script type="text/javascript" src="js/index.js"></script> 
</body> 
</html> 
 
Exemplo 16 – Configuração inicial index.html 
 
A partir do código do exemplo 16, serão criados todos os nossos exemplos de 
aplicações. O que fizemos foi tirar o que não é necessário no momento, deixando 
assim o código mais limpo e fácil de entender. 
 
Para testar a aplicação com alguma funcionalidade, siga os passos da lista abaixo: 
 
Crie dentro da tag body um botão com o código abaixo: 
 
<input type=”button” onClick=”mensagem()” value=”Clique Aqui”/> 
Apague todo o código do arquivo index.js, que está na pasta js dentro da pasta www, 
e adicione o código javascript abaixo: 
function mensagem(){alert(‘Hello World!’)} 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 61 
 
O código do arquivo index.html deve ficar como o exemplo 17. 
 
<!DOCTYPE html> 
<html> 
<head> 
 <meta name="format-detection" content="telephone=no"> 
 <meta name="viewport" content="user-scalable=no, initial- 
 scale=1, maximum-scale=1, minimum-scale=1, width=device- 
 width"> 
 <title>Hello World</title> 
</head> 
<body> 
 <input type=”button” onClick=”mensagem()” value=”Clique Aqui”/><br/> 
 <script type="text/javascript" src="js/index.js"></script> 
</body> 
</html> 
 
Exemplo 17 – Arquivo index.html alterado 
 
O código do arquivo javascript.js deve ficar como o exemplo 18: 
 
function mensagem(){ 
 alert(‘Hello World!’); 
} 
 
Exemplo 18 – Arquivo javascript.js alterado 
 
Como pode ser observado na figura 39, assim que o projeto for executado, você 
visualizará a tela da aplicação com um botão; se você clicar no botão, irá aparecer a 
mensagem, “Hello World!”. 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 62 
 
 
 
 Figura 39 – Projeto exibindo mensagem 
 
 
3.20 Cordova Plug-in 
 
O Cordova plug-in é um recurso do framework que gerencia os plug-ins que serão 
usados no projeto. 
 
Um plug-in fornece o acesso a um recurso nativo do dispositivo, seja esse recurso uma 
câmera, a lista de contatos, o microfone, o acelerômetro, o gravador, o controle de 
mídia e muito mais. 
 
A sintaxe para adicionar um plug-in é: 
cordova plugin add [nome_do_plugin] 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 63 
 
Por exemplo, o plug-in para dar acesso ao recurso de câmera a um projeto é: 
cordova plugin add codova-plugin-camera 
 
Como visualizado na figura 40, esse comando irá adicionar o recurso de câmera ao 
projeto. É de extrema importância que você esteja dentro da pasta do projeto para 
adicionar os plug-ins. 
 
 
Figura 40 – Adicionando plug-in de câmera ao projeto 
 
Com o comando a seguir, é possível listar todos os plug-ins instalados no projeto. 
Também é importante estar dentro da pasta do projeto para listá-los. 
cordova plugin ls 
 
Para desinstalar um plug-in do projeto, temos a sintaxe: 
cordova plugin rm [nome-do-plugin] 
 
Depois de entender o que é um plug-in e como é o seu funcionamento básico, vamos 
estudar alguns plug-ins do Cordova. 
 
O primeiro plug-in estudado será o cordova-plugin-dialogs. Com esse plug-in é possível 
criar caixas de diálogo para que o aplicativo interaja com o usuário. 
 
 
 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 64 
Existem cinco tipos de notificação: 
 notification.alert 
 notification.confirm 
 notification.prompt 
 notification.beep 
 notification.vibrate 
 
3.21 Alert 
 
A notificação Alert exibe uma caixa de diálogo simples, sua sintaxe é: 
navigator.notification.alert(message, alertCallBack, [title], [buttonName]); 
 
message: a mensagem a ser exibida ao usuário; 
 
alertCallBack: A função executada quando o usuário clica no botão da caixa de diálogo; 
 
title: Título da caixa de diálogo, essa opção é opcional, sendo o padrão o texto “Alert”; 
 
buttonName: nome para exibir no botão, essa opção é opcional, o padrão é “Ok”. 
 
Vamos criar um exemplo. Para isso, crie um novo projeto na pasta 
C:\Phonegap\Projetos. A partir do Prompt de comando acesse esse local e execute na 
pasta Projetos o comando abaixo: 
 
cordova create notificaoTeste 
 
Entre na pasta com o comando: 
 
cd notificacaoTeste 
 
E adicione o plug-in, com o comando: 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 65 
cordova plugin add cordova-plugin-dialogs 
 
Depois de criar o projeto e adicionar o plug-in, abra o arquivo index.html na pasta 
www do projeto notificacaoTeste que está localizado em C:\Phonegap\Projetos\, no 
sublime e apague o conteúdo e escreva o que está no exemplo 19. 
 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"/> 
 <meta name="format-detection" content="telephone=no"> 
 <meta name="viewport" content="user-scalable=no, initial-scale=1, 
 maximum-scale=1, minimum-scale=1, width=device-width"> 
 <title>Hello World</title> 
</head> 
<body> 
 <input type="button" value="Clique Aqui" onClick="mensagem()"/> 
 <script type="text/javascript" src="cordova.js"></script> 
 <script type="text/javascript" src="js/index.js"></script> 
</body> 
</html> 
 
Exemplo 19 – Exemplo com plugin dialogs index.html 
 
Também é necessário acessar o arquivo index.js, que está dentro da pasta js, que se 
localiza dentro da pasta www do projeto; apague todo o conteúdo e escreva o que 
está no exemplo 20. 
 
function mensagem(){ 
 navigator.notification.alert( 
 'Bem Vindos', 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 66 
 function(){}, 
 'Primeiro Programa', 
 'Fechar'); 
} 
 
Exemplo 20 – Exemplo do arquivo index.js do projeto notificacaoTeste 
 
Depois de alterar o index.html e o index.js, é necessário, a partir do Prompt de 
comando, adicionar a plataforma Android ao projeto. Execute o comando abaixo: 
cordova platform add android 
 
Por fim, execute o comando abaixo para ver a execução da aplicação no simulador: 
 
cordova run android 
 
 
Na figura 41, pode ser observado o projeto depois de executado, aperte o botão e 
verifique o resultado. 
 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 67 
Figura 41 – Projeto em execução 
 
3.22 Confirm 
 
A janela de diálogo confirm se assemelha muito com o Alert; entretanto, o usuário 
agora poderá dar um feedback se aceita ou não a mensagem que a janela está 
exibindo. Esse feedback pode ser passado a partir de um ou mais botões. Sua sintaxe 
é: 
 
navigator.notification.confirm(message, confirmCallback, [title], [buttonLabels]); 
 
message: a mensagem a ser exibida ao usuário; 
 
confirmCallback: A função executada quando o usuário clica em algum botão da caixa 
de diálogo. O método receberá como parâmetro o índice do botão selecionado; 
 
title: Título da caixa dediálogo, essa opção é opcional, sendo o padrão Confirm; 
 
buttonName: os nomes para exibir nos botões a serem exibidos, separados por vírgula, 
essa opção é opcional, o padrão é “Ok, Cancel”. 
 
Vamos criar um exemplo. No código do exemplo 19, referente ao arquivo index.html 
do projeto notificacaoTeste, adicione mais um botão. O código deverá ficar de acordo 
com o exemplo 21, a seguir: 
 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"/> 
 <meta name="format-detection" content="telephone=no"> 
 <meta name="viewport" content="user-scalable=no, initial-scale=1, 
 maximum-scale=1, minimum-scale=1, width=device-width"> 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 68 
 <title>Hello World</title> 
</head> 
<body> 
 <input type="button" value="Alerta" onClick="mensagem()"/><br/> 
 <input type=”button” value=”Confirmacão” onClick=”confirmacao()”/> 
 <script type="text/javascript" src="cordova.js"></script> 
 <script type="text/javascript" src="js/index.js"></script> 
</body> 
</html> 
 
Exemplo 21 – Exemplo da janela de diálogo confirmação 
 
Também é necessário adicionar mais uma função no exemplo 20, esse código é 
referente ao arquivo index.js, do projeto notificaoTeste. Adicione mais duas funções, 
confirmação() e respostaSim(numBotao). O código deverá ficar de acordo com o 
exemplo 22, seguinte: 
 
function mensagem(){ 
 navigator.notification.alert( 
 'Bem Vindos', 
 function(){}, 
 'Primeiro Programa', 
 'Fechar'); 
} 
function confirmacao(){ 
 navigator.notification.confirm( 
 'Deseja exibir uma mensagem?', 
 simResposta, 
 'Mensagem', 
 ['Sim','Não','Talvez']); 
} 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 69 
function simResposta(numBotao){ 
 if(numBotao==1){ 
 navigator.notification.alert( 
 'Mensagem Exibida', 
 function(){}, 
 'Teste Mensagem', 
 'Fechar'); 
 } 
} 
Exemplo 22 – Exemplo do arquivo index.js com a função confirmação 
Ao executarmos novamente o projeto, será visualizada a imagem da figura 42. 
 
 
Figura 42 – Adicionando botão confirmação no projeto 
 
Se o botão Confirmação for clicado, aparecerá uma caixa de diálogo; e se o botão Sim 
for clicado, aparecerá outra caixa de diálogo, como pode ser visualizado na figura 43. 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 70 
 
Figura 43 – Projeto com o botão confirm em execução 
 
3.23 Prompt 
 
A janela de diálogo Prompt, possui uma caixa de texto, permitindo que o usuário insira 
uma string. Sua sintaxe é: 
 
navigator.notification.prompt(message, promptCallBack, [title], [buttonLabels], 
[defaultText]); 
 
message: a mensagem a ser exibida ao usuário; 
 
confirmCallback: A função executada quando o usuário clica no botão; 
 
title: Título da caixa de diálogo, essa opção é opcional, sendo o padrão Prompt; 
 
buttonName: os nomes para exibir nos botões a serem exibidos, separados por vírgula, 
essa opção é opcional, o padrão é “Ok, Cancel”; 
 
DefaultText: Texto padrão para ser exibido na caixa de texto quando ela estiver vazia. 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 71 
 
Vamos criar um exemplo. No código do exemplo 21, referente ao arquivo index.html 
do projeto notificacaoTeste, adicione mais um botão. O código deverá ficar de acordo 
com o exemplo 23, a seguir: 
 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"/> 
 <meta name="format-detection" content="telephone=no"> 
 <meta name="viewport" content="user-scalable=no, initial-scale=1, 
 maximum-scale=1, minimum-scale=1, width=device-width"> 
 <title>Hello World</title> 
</head> 
<body> 
 <input type="button" value="Alerta" onClick="mensagem()"/><br/> 
 <input type=”button” value=”Confirmacão” 
 onClick=”confirmacao()”/><br/> 
 <input type=”button” value=”Prompt” onClick=”prompt()”/> 
 <script type="text/javascript" src="cordova.js"></script> 
 <script type="text/javascript" src="js/index.js"></script> 
</body> 
</html> 
 
Exemplo 23 – Exemplo da janela de diálogo prompt 
 
Também é necessário adicionar mais uma função no exemplo 22; esse código é 
referente ao arquivo index.js, do projeto notificaoTeste. Adicione mais duas funções 
prompt() e promptPressionado(resultado), o código deverá ficar de acordo com o 
exemplo 24, a seguir: 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 72 
function mensagem(){ 
 navigator.notification.alert( 
 'Bem Vindos', 
 function(){}, 
 'Primeiro Programa', 
 'Fechar'); 
} 
function confirmacao(){ 
 navigator.notification.confirm( 
 'Deseja exibir uma mensagem?', 
 simResposta, 
 'Mensagem', 
 ['Sim','Não','Talvez']); 
} 
 
function simResposta(numBotao){ 
 if(numBotao==1){ 
 navigator.notification.alert( 
 'Mensagem Exibida', 
 function(){}, 
 'Teste Mensagem', 
 'Fechar'); 
 } 
} 
function prompt(){ 
 navigator.notification.prompt( 
 'Digite o seu nome', 
 promptPressionado, 
 'Nome', 
 ['Ok', 'Cancelar'], 
 'Nome'); 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 73 
} 
 
function promptPressionado(resultado){ 
 navigator.notification.alert( 
 "Você digitou o texto: " + resultado.input1, 
 function(){}, 
 'Mensagem', 
 'Fechar'); 
} 
 
Exemplo 24 – Exemplo do arquivo index.js com a função prompt 
 
Ao executarmos novamente o projeto, será visualizada a imagem da figura 44. 
 
 
Figura 44 – Adicionando botão prompt no projeto 
 
Se o botão Prompt for clicado, aparecerá uma caixa de diálogo, e se a string “Nome” 
for digitada no campo de texto e o botão Ok for clicado, aparecerá outra caixa de 
diálogo. Como pode ser visualizado na figura 45. 
 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 74 
 
Figura 45 – Projeto com o botão prompt em execução 
 
3.24 Câmera 
 
Para ter acesso nativo à câmera do dispositivo, o Cordova disponibiliza o plug-in 
cordova-plugin-camera. Com ele, é possível capturar imagens através da classe 
Camera e do método getPicture. 
 
Sua sintaxe é: 
 
navigator.camera.getPicture(cameraSuccess, cameraError, [cameraOptions]); 
 
cameraSuccess: função a ser executada se a captura de imagem ocorrer com sucesso; 
 
cameraError: função a ser executada se ocorre um erro com a câmera; 
 
cameraOptions: é um parâmetro opcional que pode ser passado para customizar a 
captura da imagem; 
 
quality: qualidade da imagem; 
 
destinationType: o tipo de retorno da imagem, que pode ser DATA_URL para retornar 
uma imagem encodada em base64, e FILE_URL que retorna o caminho da imagem; 
 
 
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 75 
sourceType: fonte da imagem; 
 
PHOTOLIBRARY: para biblioteca de imagens 
 
CAMERA: para a câmera 
 
SAVEDPHOTOALBUM: para ser de algum álbum. 
 
Vamos criar um exemplo. Para isso, crie um novo projeto na pasta 
C:\Phonegap\Projetos. A partir do Prompt de comando, acesse esse local e execute 
na pasta Projetos o comando: 
 
cordova create cameraTeste 
 
Entre na pasta com o comando: 
 
cd cameraTeste 
 
E adicione o plug-in, com o comando: 
 
cordova plugin add cordova-plugin-camera 
 
Depois de criar o projeto e adicionar o plug-in, abra o arquivo index.html na pasta 
www do projeto cameraTeste, que está localizado em C:\Phonegap\Projetos\, no 
sublime;