Apostila DESENVOLVIMENTO MULTIPLATAFORMA

Desenvolvimento
Multiplataforma Mobile
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 1

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.

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.

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

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.

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 aplicativo realmente 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á-

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

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.

<html>
<head>
<title>Minha Página</title>
</head>
<body>
<h1>Olá Usuário</h1>
<p>Obrigado por visitar a minha página Web.</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>.

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”/>

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

(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;

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>
<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?

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>
<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>
<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.

*{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.

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”.

Na linha 4, é exibida, através da função alert, uma mensagem ao usuário se o elemento
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>

<head>
<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.

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>

<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.

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>

</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;
}

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
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

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.

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.

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.

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

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.
3. 2.
1.
4.
Figura 5 – Ambiente após o build da aplicação.

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.

</description>
<author href="http://thiagocomputer.com.br" email="email@email.com ">
Thiago Computer
</author>
</widget>
Exemplo 15 – Arquivo config.xml
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.

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

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.

1.
2.
3.
4.
5.
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.

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.
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

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

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ário acessar 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.

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.

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.

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

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.

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.

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.

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

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

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.

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.

500
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.
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
Para criar 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.

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.
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:

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.

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]

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.

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.

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.

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.

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;

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 Cordova
Nessa 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

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="viewport" content="user-scalable=no, initial-
scale=1, maximum-scale=1, minimum-scale=1, width=device-
width">
</head>
<body>
</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!’)}

O código do arquivo index.html deve ficar como o exemplo 17.
<!DOCTYPE html>
<html>
<head>
width">
</head>
<body>
<input type=”button” onClick=”mensagem()” value=”Clique Aqui”/><br/>
</body>
</html>
Exemplo 17 – Arquivo index.html alterado
O código do arquivo javascript.js deve ficar como o exemplo 18:
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!”.

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]
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.

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:

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>
</head>
<body>
<input type="button" value="Clique Aqui" onClick="mensagem()"/>
<script type="text/javascript" src="cordova.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.
navigator.notification.alert(
'Bem Vindos',

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:
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.

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]);
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 de diá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>
</head>
<body>
<input type="button" value="Alerta" onClick="mensagem()"/><br/>
<input type=”button” value=”Confirmacão” onClick=”confirmacao()”/>
</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:
'Bem Vindos',
function(){},
'Fechar');
}
function confirmacao(){
navigator.notification.confirm(
'Deseja exibir uma mensagem?',
simResposta,
'Mensagem',
['Sim','Não','Talvez']);
}

function simResposta(numBotao){
if(numBotao==1){
'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.

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]);
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.
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>
</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()”/>
</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:

'Bem Vindos',
function(){},
'Fechar');
}
function confirmacao(){
navigator.notification.confirm(
'Deseja exibir uma mensagem?',
simResposta,
'Mensagem',
['Sim','Não','Talvez']);
}
function simResposta(numBotao){
if(numBotao==1){
'Mensagem Exibida',
function(){},
'Teste Mensagem',
'Fechar');
}
}
function prompt(){
navigator.notification.prompt(
'Digite o seu nome',
promptPressionado,
'Nome',
['Ok', 'Cancelar'],
'Nome');

}
function promptPressionado(resultado){
"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.

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;
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
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; apague o conteúdo e escreva o que está no exemplo 25.
<!DOCTYPE html>
<html>
<head>

width">
</head>
<body>
<input type="button" value="Capturar Imagem"
onClick="imagem()"/><br/>
<img id="idImagem"></img>
</body>
</html>
Exemplo 25 – Exemplo do arquivo index.html do projeto cameraTeste
encontra dentro da pasta www do projeto; apague todo o conteúdo e escreva o que
function imagem(){
navigator.camera.getPicture(
sucesso,
falha,
{destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA});
}
function sucesso(imagemUrl){
var image = document.getElementById('idImagem');
image.src = imagemUrl;
}

function falha(mensagem){
alert("Error: " + mensagem);
}
Exemplo 26 – Exemplo do arquivo index.js do projeto cameraTeste
Depois de criar 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:
Execute para ver o resultado com o comando abaixo:

cordova run android
Na figura 46, pode ser observado o projeto depois de executado; aperte o botão e
verifique o resultado.
Figura 46- Execução do projeto cameraTeste
Como pode ser observado na figura 47, se o botão Capturar Imagem for pressionado,
o aplicativo irá ativar a câmera; se você tirar uma foto e apertar o botão de Ok (V), a
aplicação voltará para a página anterior e exibirá abaixo do botão a imagem
fotografada.

Figura 47 – Aplicação cameraTeste em funcionamento
Persistência e Arquitetura Cordova
O Cordova fornece duas formas de armazenamento de dados.
SQLite
localStorage
Nas nossas aulas iremos estudar o SQLite. Ele é uma versão reduzida de um banco de
dados relacional e pode ser encontrado em quase todos os sistemas operacionais
móveis.
Vamos criar um exemplo: uma agenda de endereços. Com ela poderemos adicionar
um contato com seu respectivo endereço, será possível listar os contatos e por fim
deletá-los.
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 sqliteTeste

cd sqliteTeste
Depois de entrar na pasta do projeto, abra o arquivo index.html na pasta www do

projeto sqliteTeste, que está localizado em C:\Phonegap\Projetos\, no sublime;
apague o conteúdo e escreva o que está no exemplo 27.
<!DOCTYPE html>
<html>
<head>
width">
<title>SQLite Teste</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<h1>Cadastrar Contatos</h1>
<input id="nome" type="text" placeholder="Nome"/><br/>
<input id="endereco" type="text"
placeholder="Endereco"/><br/>
<input type="button" value="Adicionar"
onClick="adicionarValoresNoBanco()"/>
<input type="button" value="Atualizar"
onClick="listarValoresDoBanco()"/><br/><br/>
<span id="listaRegistro">Contatos Cadastrados</span>
<span id="contatos"></span>

</body>
</html>
Exemplo 27 – Exemplo do arquivo index.html do projeto sqliteTeste
encontra dentro da pasta www do projeto; apague todo o conteúdo e escreva o que
document.addEventListener("deviceready", inicializarBanco,
false);
var db;
var shortName = 'WebSQLite';
var version = '1.0';
var displayName = 'WebSQLite';
var maxSize = 65535;
function inicializarBanco(){
if (!window.openDatabase) {
alert('O navegador não suporta SQLite.');
return;
}
db = openDatabase(shortName, version,
displayName,maxSize);
db.transaction(function(query){
query.executeSql( 'CREATE TABLE IF NOT EXISTS
Contato(ContatoId INTEGER NOT NULL PRIMARY KEY
AUTOINCREMENT, Nome TEXT NOT NULL, Endereco TEXT NOT

NULL)',
[],nullHandler,errorHandler);
},errorHandler,successCallBack);
listarValoresDoBanco();
}
Exemplo 28 – Exemplo do arquivo index.js do projeto sqliteTeste
Examinando o código do exemplo 28, podemos perceber que:
Na linha 1, é adicionada uma chamada à função inicializarBanco, para criar o banco

assim que o device (dispositivo) terminar de executar;
Da linha 4 à linha 8, são criadas algumas variáveis com parâmetros para criar o banco;
Na linha 10, iniciamos a função inicializarBanco;
Na linha 11, verificamos se o navegador onde a aplicação está executando possui

suporte ao SQLite; caso não possua, exibimos uma mensagem ao usuário e retomamos
vazio;
Na linha 16, iniciamos a conexão com o banco e passamos os parâmetros:
shortName: nome do banco do dados
version: versão do banco de dados
displayName: nome do banco que será exibido
MaxSize: tamanho do banco de dados – o limite é 5MB

Na linha 18, com o método transaction iniciamos uma transição; esse método recebe
uma função que contém o código a ser executado no banco. Esse método recebe um
objeto SQLTransaction, que contém o método executeSQL;
Na linha 19, com o método executeSql, uma tabela contato é criada, se ainda não
existir. Essa função recebe como parâmetro:
sqlStatement: script SQL a ser executado no banco de dados
arguments: parâmetro opcional, argumentos que devem ser passados para o script
successCallback: função a ser executada se o script obtiver sucesso
errorCallback: função a ser executada se o script obtiver erro.
Para imprimir os registros, iremos adicionar no nosso código index.js a função

listarValoresDoBanco(), que será responsável por executar a consulta dos registros
existentes no banco. Adicione as funções do exemplo 29 no código index.js, abaixo do
código já criado.
function listarValoresDoBanco() {
return;
}
db.transaction(function(transaction) {
transaction.executeSql('SELECT * FROM Contato;', [],
exibirContatos ,errorHandler);
});
return;
}

function exibirContatos(transaction, result){
var contatos = document.getElementById("contatos");
var lista = '<table>';
if (result != null && result.rows != null) {
for (var i = 0; i < result.rows.length; i++) {
var row = result.rows.item(i);
lista = lista + '<tr><td>' + row.ContatoId + '</td><td>'
+ row.Nome + '</td><td>' + row.Endereco + '</td>';
lista = lista + "<td><img src='img/del.png' id='" +
row.ContatoId
+ "' onclick='apagarContato(this.id)' /></td></tr>";
}
lista = lista + "</table>";
contatos.innerHTML = lista;
}
}
Exemplo 29 - Exemplo do arquivo index.js do projeto sqliteTeste com as funções de

listar
Na linha 48, podemos observar a inserção de uma imagem. Essa imagem irá aparecer
ao lado dos contatos listados, para que você possa clicar e deletar um contato. Você
pode baixar qualquer imagem a sua escolha, de tamanho 24x24 pixels e inseri-la na
pasta img, que se encontra na pasta www do projeto.
A inserção de novos contatos também é bem simples, para isso usamos os métodos
transaction e executeSQL. Para isso, iremos adicionar no nosso código index.js a
função adicionarValoresNoBanco(), que será responsável por executar a consulta dos

registros existentes no banco. Adicione a função do exemplo 30, no código index.js,
abaixo do código já criado.
function adicionarValoresNoBanco() {
return;
}
var nome = document.getElementById('nome').value;

var endereco = document.getElementById('endereco').value;
transaction.executeSql('INSERT INTO Contato(Nome, Endereco)
VALUES (?,?)', [nome, endereco], nullHandler,errorHandler);
},errorHandler,successCallBack);
return false;
}
Exemplo 30 - Exemplo do arquivo index.js do projeto sqliteTeste com a função de
inserir
Por fim, para que a aplicação consiga deletar os contatos já existentes, iremos
adicionar no nosso código index.js a função apagarContato(dado), que será
responsável por apagar um registro existente no banco. Adicione as funções do
exemplo 31, no código index.js, abaixo do código já criado.
function apagarContato(dado){

return;
}
transaction.executeSql('DELETE FROM Contato WHERE ContatoId = ?',
[dado],successCallBack ,errorHandler);
},errorHandler,nullHandler);
return false;
}
function successCallBack() {
alert("Operação realizada com sucesso");
}
function errorHandler(error) {
alert('Código do erro: ' + error.code);
}
function nullHandler(){};
Exemplo 31 - Exemplo do arquivo index.js do projeto sqliteTeste com a função de
apagar, seccess, error e nullHandler
Antes de executar a aplicação e ver como ela funciona, é necessário alterar o conteúdo
do arquivo index.css que está na pasta css dentro da pasta www do projeto
sqliteTeste. Acesse o seu conteúdo com o sublime, apague todo o conteúdo e escreva
o código do exemplo 32.
#listaRegistro{
font-weight: bold;
}

Exemplo 32 – Código do arquivo index.css
Depois de ter alterado os arquivos index.html, index.js e index.css do projeto

sqliteTeste, é o momento de testar a aplicação. Execute os comandos abaixo no
Prompt de comando e dentro da pasta do projeto para adicionar a plataforma android
ao projeto e compilá-lo.

cordova run android
Como pode ser observado na figura 48, assim que executarmos o projeto, irá aparecer
uma mensagem de operação realizada com sucesso, confirmando que o banco foi
criado; logo depois poderemos visualizar dois campos de texto e dois botões: um para
cadastrar e outro para atualizar a lista de contatos.
Figura 48 – Projeto sqliteTeste em execução
Quando for digitado um nome e um endereço nas caixas de texto e o botão Adicionar
for clicado, as duas strings são salvas no banco e listadas logo abaixo, na parte de
Contatos Cadastrados, como pode ser visualizado na figura 49.

Figura 49 – Adicionando contato projeto sqliteTeste
3.25 Arquitetura do Cordova
Nesta seção, iremos estudar como realmente o cordova funciona. Já fizemos diversas
aplicações com ele, mas ainda não compreendemos muito bem como funciona sua
arquitetura, como funcionam realmente as WebViews e como todo o código HTML,
CSS e Javascript se integram com a WebView para formar um aplicativo nativo para
cada plataforma.
Agora iremos entender como funciona sua arquitetura, vantagens e desvantagens.
3.26 O que é uma WebView?
Um componente WebView é uma espécie de navegador sem interface que pode ser
usado pelos aplicativos para exibir páginas HTML, CSS e Javascript. Ele só renderiza a
página, mas não possui uma interface de navegador, pois não possui botões, barra de
endereço e menus.
O iOS é baseado em WebKit como no Safari. No Android, ele é baseado no Chromium,

mas apenas a partir da versão 4.4, pois em versões anteriores é baseado em WebKit

e no Windows 10, ele é baseado no EdgeHTML como Microsoft Edge e usa o Trident
do IE no Windows Phone 8.
Um Aplicativo construído em cordova é uma aplicação nativa do sistema operacional

que possui apenas uma função: executar uma WebView e renderizar o arquivo
index.html. Toda a lógica da aplicação, criada em HTML, CSS e Javascript é executada
dentro da WebView.
Resumindo, a ideia principal do cordova é empacotar toda a aplicação na WebView

nativa de cada plataforma e carregar o index.html.
Então, o que faz dela uma aplicação?
Uma WebView comum não pode acessar recursos nativos das plataformas, pois ela
possui a mesma funcionalidade de um navegador padrão. O Cordova é mais que um
navegador, ele possui uma API Javascript que integra a WebView aos recursos nativos
de cada plataforma.
Como já estudamos, cada recurso nativo é encapsulado em um plug-in diferente. As

janelas de diálogo são encapsuladas no plug-in cordova-plugin-dialogs, a câmera é
encapsulada no plug-in cordova-plugin-camera e o acesso aos contatos do aparelho é
encapsulado no plug-in cordova-plugin-contacts. Além desses plug-ins, existem vários
outros que podem ter sua sintaxe e usabilidade consultada no site do cordova. Acesse
no link: http://cordova.apache.org/docs/en/latest/.
Todos os plug-ins possuem todo o código nativo necessário para acessar os contatos
nas plataformas Android com Java, iOS, com objective-C ou Swift e C# com Windows.
Na figura 50, pode ser visualizado como o framework cordova funciona.

Figura 50 – Framework Cordova
Como pode ser visualizado na figura 50, a aplicação cordova encapsula todo o código
HTML, CSS e Javascript, na WebView nativa da plataforma e os plug-ins que estiverem
sendo usados na aplicação. Os plug-ins são ativados a partir da API javascript, que faz
essa comunicação entre a WebView e os plug-ins e que acabam se comunicando com
o sistema operacional de forma nativa.
3.27 Estrutura de um Projeto Cordova
Já trabalhamos bastante com o projeto cordova e conhecemos a sua arquitetura de

pastas. No entanto, na lista abaixo está a explicação da funcionalidade de cada pasta
de um projeto cordova.
www – pasta onde deve ficar todo o seu código HTML, CSS, Javascript, além das
imagens.
config.xml – é o arquivo de configuração do cordova, deve ficar na pasta raiz do
projeto.
platforms – pasta onde ficam os arquivos dos projetos nativos de cada plataforma.
platforms/android: possui uma cópia da pasta www e um projeto completo em Android

Studio.
plugins – pasta onde estão instalados os plug-ins do aplicativo.
hooks – pasta que pode incluir scripts que podem ser usados pelos nossos aplicativos.
Geralmente acessamos mais a pasta www, pois contém todo o nosso código da
aplicação e editamos o arquivo config.xml para alterar algumas configurações, como
ícone e tela de splash.
3.28 Criar Projeto Final
Nesta seção, iremos desenvolver o aplicativo do projeto final da disciplina.

Para nosso projeto final, será desenvolvida uma aplicação de bloco de anotações.
Iremos usar o framework Cordova, as Linguagens HTML, CSS e Javascript, a biblioteca
JQuery Mobile e o SQLite para armazenar as anotações. O aplicativo terá as
funcionalidades de criar, alterar, listar e remover as anotações.
3.29 JQuery Mobile
O JQuery Mobile é uma biblioteca que utiliza a linguagem javascript para criação de
aplicações mobile web.
A biblioteca deixa uma página HTML com cara de aplicativo mobile, pois ela fornece
uma estrutura de temas que permite definir o estilo do seu aplicativo. Também é

possível criar os seus próprios temas, com o aplicativo ThemeRoller, disponível no link:
http://themeroller.jquerymobile.com/.
Todos os componentes do JQuery UI estão disponíveis para ajudar no

desenvolvimento do aplicativo: páginas, diálogos, barras de ferramentas, formulários,
caixas de texto, botões, entre outros. Além disso, o JQuery Mobile foi criado a partir
do JQuery, portanto, é possível acessar recursos como manipulação de evento,
comunicação com servidor usando Ajax, imagem para página e efeitos de animação.
Uma página JQuery Mobile possui a sua estrutura dividida em três seções: cabeçalho,
conteúdo e rodapé. Veja a seguir no exemplo 33.
<div data-role="page" id="page1">


<div data-role="header">
<h1>HEADER</h1>
</div>

<div data-role="content">
<p>
CONTENT AREA
</p>
</div>

<div data-role="footer">
<h1>FOOTER</h1>
</div>
</div>
Exemplo 33 – estrutura página JQuery Mobile

Na seção de cabeçalho é criada uma barra de ferramentas no topo da página,
frequentemente usada para logotipo, texto de título e botões de procura. Na seção de
conteúdo é definido o - como o próprio nome já diz - conteúdo da página, como textos,
imagens, botões e formulários. Por fim, na seção de rodapé é criada uma barra de
ferramentas no fim da página, geralmente utilizada para visualização de fim de
navegação.
Vamos criar nosso projeto final. Para isso, abra o Prompt de comando e digite o
comando abaixo:
cd C:\Phonegap\Projetos
Esse comando dará acesso à pasta Projetos. Depois de acessar a pasta, crie um novo
projeto Cordova com o comando:
cordova create Projeto_Final
cd Projeto_Final
Depois de entrar na pasta do projeto, abra o arquivo index.html na pasta www do

projeto sqliteTeste, que está localizado em C:\Phonegap\Projetos\, no sublime;
apague o conteúdo e escreva o que está no exemplo 34.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Anotação</title>
<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-
1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-
1.1.0.min.js"></script>
</head>
<body>
<script src="js/index.js"></script>
<script src="js/controller.js"></script>
<script src="js/model.js"></script>
<div data-role="page" id="lista">
<div data-role="header" data-theme="a">
<h1>Anotações</h1>
<a href="criarAnotacao.html" data-icon="plus" data-
theme="b">Criar</a>
</div>
<ul id="listaAnotacoes" data-role="listview" >
</ul>
</div>
</div>
</body>
</html>
Exemplo 34 – Página index.html do projeto final
A linha 7 está adicionada à chamada de arquivo css, que contém o estilo para os temas
do JQuery Mobile;

Na linha 10 incluímos o JQuery, já que o JQuery Mobile usa o mesmo para funcionar;
Na linha 11 adicionamos o script do JQuery Mobile;
Na linha 13 está adicionado o script referente às funcionalidades do Phonegap;
Nas linhas 16, 17 e 18 estão os arquivos que vão conter os códigos javascript da nossa
aplicação:
index.js – estão os códigos e funções mais gerais do nosso sistema.
controller.js – estão os códigos e funções que manipulam a lógica da nossa aplicação

e se comunicam diretamente com o HTML.
model.js – estão os códigos e funções referentes ao acesso do banco de dados.
Crie os três arquivos na pasta js, que está na pasta www do projeto.
Na linha 19, começa a estrutura do JQuery Mobile:
Ela possui um atributo data-role, que serve para verificar qual é a função da div, que
nesse caso será o contêiner principal, pois contém o valor “page” e o atributo id que
identifica a tag.
Entre as linhas 20 e 24, está definida a div que indica ao JQuery o cabeçalho da nossa
aplicação;
Entre as linhas 25 e 29, está definida a div que indica ao Jquery o conteúdo da página
e uma lista onde serão colocadas as anotações.

Depois que a página inicial da nossa aplicação foi implementada, é necessário criar
uma página de criar uma anotação. Observando o código do exemplo 34 é possível
observar na linha 22 qual o valor do atributo href da tag <a>, uma página HTML
chamada criarAnotação.html. Crie uma nova página HTML na pasta www do projeto e
nomeie-a criarAnotação.html. Escreva o código do exemplo 35 dentro dela.
<div data-role="page" id="criarAnotacao">

<div data-role="header" data-theme="a">
<a href="#lista" data-direction="reverse" data-icon="back" data-
theme="b">Voltar</a>
<h1>Criar Anotação</h1>
</div>
<label for="conteudo">Texto:</label>
<textarea name="conteudo" id="conteudo" ></textarea>
<button onclick="gravarAnotacao()" data-role="button" data-
theme="d">Gravar Anotação</button>
</div>
</div>
Exemplo 35 – Página criarAnotacao.html do Projeto Final.
Como podemos visualizar no exemplo 35, o documento contém uma estrutura básica
do JQuery Mobile. No entanto, não possui a estrutura básica do HTML, como as tags
<html>, <head> e <body>. Isso é possível porque o JQuery Mobile carrega as
páginas usando a tecnologia AJAX, mantendo assim a estrutura HTML da página
principal. O conteúdo que vai alterando a cada interação é a da tag <div>, com
atributo data-hole de valor page.

Na linha 3 está um link com ícone de botão para voltar à página;

Da linha 7 à 12 está o conteúdo da página, uma área de texto para o usuário digitar
o texto da anotação e um botão que chama a função gravaAnotação(), que salva a
anotação no banco.
3.30 Criando conexão com o banco de dados
Para criar e se conectar com o banco de dados, escreva o código do exemplo 36, no
arquivo model.js.
var db;
var shortName = 'Anotacao';
var version = '1.0';
var displayName = 'Anotacao';
var maxSize = 65535;
function inicializarBanco(){
alert('O Navegator não possui suporte a SQL');
return;
}
db = openDatabase(shortName, version, displayName,maxSize);
db.transaction(function(tx){
tx.executeSql( 'CREATE TABLE IF NOT EXISTS Anotacoes(id INTEGER NOT
NULL PRIMARY KEY AUTOINCREMENT, conteudo TEXT NOT NULL, published
DATE)',
[],function(){},errorHandler);
},errorHandler,function(){});
}
Exemplo 36 – Criando conexão com o banco de dados

Da linha 1 à 5 estão as variáveis com os valores das configurações do banco de dados.
db: banco de dados;
shortName: no banco de dados;
version: versão do banco de dados;
displayName: nome do banco de dados que será exibido;
maxSize: tamanho do banco de dados. O tamanho máximo é 5MB.
Na linha 7 é verificado se o navegador possui suporte ao SQL.
Na linha 11 usamos as variáveis para abrir a conexão com o banco de dados.
Da linha 12 à 17 criamos a tabela Anotações, caso ela não exista.
Banco: Anotação
Tabela: Anotações
Campo: id, inteiro, chave primária, autoincremento;
Campo: conteúdo, texto não nulo;
Campo: published, data.
3.31 Criar e gravar no banco uma anotação
Para gravar uma anotação no banco de dados, é necessária a função

gravarAnotacao(). Abra o arquivo controller.js e insira o código do exemplo 37.
function gravarAnotacao(){
anotacao = new Object();
anotacao.conteudo = document.getElementById('conteudo').value;

anotacao.published = new Date();
gravarNoBanco(anotacao);
}
Exemplo 37 – Função gravarAnotacao do projeto final
Observando o exemplo 37, é possível visualizar que um objeto anotação é criado. No

seu atributo conteúdo é atribuído o valor do elemento com o id “conteúdo”; no seu
atributo published é atribuída data e hora do sistema e depois esse objeto é passado
por parâmetro para uma função gravarNoBanco(anotacao), que irá realizar a inserção
do objeto anotação no baco de dados. O código da função gravarNoBanco(anotacao)
pode ser visualizado no exemplo 38.
function gravarNoBanco(anotacao) {
inicializarBanco();
transaction.executeSql('INSERT INTO Anotacoes(conteudo, published)
VALUES (?,?)',
[anotacao.conteudo, anotacao.published], function(){},
errorHandler);
},errorHandler,successCallBackInserir);
}
function successCallBackInserir(){
alert("Anotação inserida no banco com sucesso!");
VoltarIndex();
}
function errorHandler(error){
alert('Código do erro: ' + error.code);
}

Exemplo 38 – Função gravar no banco projeto final
É importante que as funções do exemplo 38 sejam adicionadas no arquivo model.js

do projeto.
Na linha 1 a função gravarNoBanco recebe o objeto anotação;
Na linha 2 é inicializada a conexão com o banco; se o banco não existir, um novo

banco é criado; senão, ele usa o banco existente.
Da linha 3 à 8 é realizada a inserção da anotação no banco.
Os valores dos atributos do objeto anotação são adicionados na tabela anotações do

banco de dados. Se tudo ocorrer de forma correta, é chamada a função
successCallBackInserir(), senão é chamada a função errorHandler();
Da linha 11 à 13 é possível observar que se a função successCallBackInserir() for

chamada, a aplicação exibe uma mensagem na tela e chama a função voltarPagina(),
que redireciona a aplicação para a página index.html. O código da função
voltarPagina() pode ser observado no exemplo 39.
Adicione o código do exemplo 39, no arquivo index.js do projeto.
function voltarPagina(){
location.href="index.html";
}
Exemplo 39 – Função voltarPagina() projeto final.

3.32 Listando Anotações
Para realizar a consulta das anotações no banco de dados, é necessário implementar

o código da função do exemplo 40.
function listaDeValores() {
inicializarBanco();
transaction.executeSql('SELECT * FROM Anotacoes;', [],
mostrarRegistros ,errorHandler);
});
return;
}
Exemplo 40 – Consultar anotações no banco de dados
Esse código deve ser inserido no arquivo model.js.

Na linha 2 é inicializado o banco de dados;
Da linha 3 à 6 é realizada uma pesquisa no banco, buscando por todas as anotações
já inseridas. Se tudo ocorrer de forma correta, a função mostrarRegistros é chamada;
senão, a função errorHandle é chamada.
A função mostrarRegistros deve ser inserida dentro do arquivo controller.js e seu

código pode ser visualizado no exemplo 41.
function mostrarRegistros(transaction, result){
var listaAnotacoes = document.getElementById("listaAnotacoes");
var lista = '';
if (result != null && result.rows != null) {
for (var i = 0; i < result.rows.length; i++) {
var row = result.rows.item(i);
lista = lista + '<li class="ui-btn ui-btn-icon-right ui-li-

has-arrow ui-li ui-li-has-thumb ui-btn-up-c">';
lista = lista + '<div class="ui-btn-inner ui-li"><div
class="ui-btn-text">';
lista = lista + '<a class="ui-link-inherit"
href="visualizarAnotacao.html?id=' + row.id + '">';
lista = lista + '<h4 class="ui-li-heading">' + row.conteudo
+ '</h4>';
lista = lista + '<p class="ui-li-desc">' + row.published +
'</p>';
lista = lista + '</a></div></div></li>';
}
listaAnotacoes.innerHTML = lista;
}
}
Exemplo 41 – Função mostrar registros do projeto final
Na linha 2 a referência de listaAnotacoes é armazenada em uma variável;
Na linha 3 a lista de anotação é criada com uma string vazia;
Na linha 4 é verificado se existem anotações no banco. Se existirem, ele irá criar a lista
de anotações; senão, não será listado nada.
Na linha 5 a estrutura de repetição for vai iterar sobre todos os registros;
Na linha 6 é criada para cada registro uma linha da lista;
Na linha 19 a lista criada com a quantidade de anotações do banco é incluída no HTML

do arquivo index.html.

Quando o usuário clicar sobre uma anotação na lista, é necessário exibir todos os
detalhes dela. Para isso, é preciso criar um arquivo chamado visualizarAnotacao.html
no projeto. Crie o arquivo visualizarAnotacao.html dentro da pasta www do projeto e
escreva o código do exemplo 42.
<div data-role="page" id="visualizarAnotacao">

<div data-role="header">
<h1>Visualizar</h1>
<a href="#lista" data-direction="reverse" data-role="button"
data-theme="b" data-icon="back">Voltar</a>
<a id="teste" href="#lista" onClick="apagarAnotacao()" data-
icon="delete" data-theme="b">Deletar</a>
</div>
<div data-role="content" >
<div id="detalhesAnotacao"></div>
</div>
</div>
Exemplo 42 – Página visualizarAnotacao.html do projeto
Na linha 1 é iniciado o JQuery Mobile da página, que é inicializado com o id

visualizarAnotacao.
Entre as linhas 2 e 8, são criados no cabeçalho do JQuery Mobile da página dois botões,
um para voltar e o outro para deletar a anotação. Também é inserido o texto Visualizar.
Da linha 9 à 10, é criado no conteúdo do JQuery Mobile da página um elemento onde

serão colocados os detalhes da anotação.

Depois de criar a página, é necessário criar as funções javascript que irão realizar toda
essa interação da visualização com o usuário.
No arquivo model.js adicione o código do exemplo 43, para que seja possível visualizar
os detalhes da anotação.
function visualizarAnotacao(id){
transaction.executeSql('SELECT * FROM Anotacoes WHERE id = ?', [id],
mostrarAnotacao ,errorHandler);
});
}
Exemplo 43 – Código para visualizar anotação do projeto final
Na linha 4 é possível observar que, se tudo der certo na consulta SQL para consultar
uma anotação a partir do seu id no banco, será chamada a função mostrarAnotacao.
A função mostrarAnotacao deve ser inserida no arquivo controller.js. O seu código

pode ser visualizado no exemplo 44.
function mostrarAnotacao(transaction, result) {

var anotacao = '<strong>ID: </strong>' + result.rows.item(0).id + "<br/>";
anotacao = anotacao + '<strong>Conteudo: </strong>' +
result.rows.item(0).conteudo + "<br/>";
anotacao = anotacao + '<strong>Data Criação: </strong>' +
result.rows.item(0).published + "<br/>";
var detalhesAnotacao = document.getElementById("detalhesAnotacao");

detalhesAnotacao.innerHTML = anotacao;
}
Exemplo 44 – Código da função mostrarAnotacao do projeto final
Como pode ser visualizado no exemplo 44, a função recebe como parâmetro o
resultado da transação com o banco de dados e monta o HTML para exibir os dados
ao usuário.
Outra funcionalidade que é necessário criar é listar as anotações toda vez que a
aplicação estiver na página de index.html ou voltar para ela. Para isso, escreva o
código do exemplo 45 no arquivo de controller.js.
$(document).on("pageshow", function(){
var url = $("#visualizarAnotacao").attr("data-url");
if (_GET("id", url) != null)
visualizarAnotacao(_GET("id", url));
else
listaDeValores();
});
Exemplo 45 – Código para listar anotação na página principal
Note que na linha 3 do exemplo 45 é possível visualizar a função _GET que retira a
string “id” da tag com o id “visualizarAnotacao”, para que no momento em que o
usuário clique na anotação a aplicação possa redirecionar para suas propriedades. Para
criar a função _GET, adicione o código do exemplo 46 no arquivo index.js.
function _GET(nome, urlEntrada){

if (urlEntrada != null) {
urlEntrada = urlEntrada.slice(43);
var url = urlEntrada.replace("?", "");
var itens = url.split("&");

for(n in itens){
if(itens[n].match(nome) ){
return decodeURIComponent(itens[n].replace(nome+"=", ""));
}
}
return null;
}
}
Exemplo 46 – Código da função _GET para retirar o id da tag
Antes de testar a nossa aplicação, é necessário criar a última interação do usuário com
a aplicação: a remoção de uma anotação. O exemplo 47 possui o código para deletar
uma anotação. Esse código deve ser escrito dentro do arquivo model.js.
function apagarAnotacao(){
var url = $("#visualizarAnotacao").attr("data-url");
var id = _GET("id", url);
return;
}
transaction.executeSql('DELETE FROM Anotacoes WHERE id = ?', [id],
successCallBackDeletar ,errorHandler);
},errorHandler,nullHandler);
listaDeValores();
return false;
}
function successCallBackDeletar(){

alert("Anotação deletada do banco com sucesso!");
voltarPagina();
}
function nullHandler(){};
Exemplo 47 – Funções que auxiliam da remoção de uma anotação
Observando o exemplo 47, é possível verificar:

Nas linhas 1 a 14 está toda a lógica de apagar uma anotação, desde a obtenção do id
à consulta no banco de dados. Também é importante observar que a função _GET é
utilizada para obter o id da tag HTML.
Com todo o código finalizado, agora é necessário adicionar a plataforma ao projeto

final. Acesse o Prompt de comando e entre na pasta de Projetos, onde encontra-se o
projeto final, depois execute o comando abaixo:
Por fim, execute o projeto e emule no Android, a partir do comando:

cordova run android
Na figura 51, pode ser visualizada a tela inicial da aplicação.

Figura 51 – Tela inicial aplicação final
É possível visualizar na figura 51, que a aplicação possui um campo de cabeçalho que
inclui o nome Anotação e um botão para criar novas anotações. O campo de corpo
ainda não possui nenhuma anotação listada.
Se o botão for clicado, a aplicação irá direcionar o usuário para a tela que pode ser
visualizada na figura 52.
Figura 52 – Tela de criação de uma nova anotação

Na figura 52 pode ser visualizada a tela que serve para criar novas anotações. É
possível observar um campo de cabeçalho que possui um texto Criar Anotação e um
botão Voltar, que volta para página inicial. Também é possível observar o campo do
corpo da página, que possui um campo de texto para o usuário digitar a anotação e o
botão Gravar Anotação.
Se alguma anotação for digitada e o botão for clicado, a aplicação voltará para a página
inicial e listará as anotações inseridas, como pode ser visualizado na figura 53.
Figura 53 – Tela inicial com anotações listadas
Clicando no item da lista, o aplicativo irá direcionar o usuário para a página de detalhes
da anotação, que pode ser analisada na figura 54.
Figura 54 – Tela de detalhes da anotação

É possível observar no exemplo 54, que a página de detalhes de uma anotação possui
um botão Voltar, que redirecionará a aplicação para a página inicial da aplicação, um
título com texto Visualizar e um botão Deletar, que se for clicado irá deletar a anotação
que está sendo lida.
BIBLIOGRAFIA
GHATOL, R.; PATEL, Y. Beginning PhoneGap. New York: Apress Media, 2012.
GIFFORD, Matt. PhoneGap mobile application development cookbook. Packt Publishing
Ltda, 2012.
LOPES, Sérgio. Aplicações mobile híbridas com Cordova e Phonegap. Vila
Mariana: Casa do Código, 2016.
WARGO, John M. Apache Cordova API Cookbook. Pearson Education, 2014.

Apostila DESENVOLVIMENTO MULTIPLATAFORMA

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apostila DESENVOLVIMENTO MULTIPLATAFORMA

Enviado por

Direitos autorais:

Formatos disponíveis

Desenvolvimento

DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 1

1. Introdução ao Desenvolvimento Multiplataforma

Com o passar dos anos, o desenvolvimento de aplicativos mobile está crescendo

No entanto, se formos analisar de uma forma mais abrangente, construir aplicativos

Atualmente existem diversas plataformas de desenvolvimento para o ambiente mobile,

O Android, uma das plataformas mais utilizadas em smartphones no mundo,

DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 2

É importante destacar que existem outras plataformas no mercado, como a Blackberry,

No próximo tópico da seção, iremos compreender como construir aplicações híbridas,

1.2 Aplicações Híbridas

DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 3

Nesta disciplina será estudado o Cordova/Phonegap. Esse framework open-source de

É importante destacar que o papel mais importante no momento da compilação do

No proximo tópico da seção, iremos entender qual a diferença entre o Phonegap e o

1.3 O Cordova e o Phonegap

O framework Cordova e o Phonegap são essencialmente a mesma coisa. Basicamente,

Para tentar melhorar e facilitar o desenvolvimento de aplicações mobile, em 2009 a

DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 4

Isso revolucionou a maneira de desenvolver aplicativos móveis. Observando isso, a

DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 5

Começaremos esse tópico com um questionamento: É melhor criar aplicativos nativos

A resposta é: depende do aplicativo que se deseja desenvolver. Por exemplo, um

Se o aplicativo realmente exigir bastante processamento do dispositivo, como Jogos

Então, antes de começar a implementar, é importante planejar e decidir qual será o

DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 6

2. Revisão – Linguagens da Web

2.1 Introdução ao HTML

DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 7

Exemplo tag simples: <hr/> (cria uma linha horizontal)

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

O corpo e o cabeçalho da página web são encapsulados em uma tag <html>. É

DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 8

Exemplo 3 – Documento HTML

Cabeçalhos: servem para iniciar seções dentro de um documento HTML, distintos do

DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 9

Tags para criar efeitos no texto:

DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 10

2.2 Introdução ao CSS

Conforme foi revisado no tópico de Introdução ao HTML, os navegadores apresentam

DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 11

body {color : red}

DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 12

<h1 class=”classe1”>Olá Usuário</h1>

Exemplo 6 – Exemplo de seletores CSS

DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 13

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

DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 14

Exemplo 8 – Uma folha de estilo simples

2.3 Introdução ao Javascript

Como qualquer linguagem, o Javascript possui varáveis, arrays (arranjo), objetos,

DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 15

Exemplo 9 – Sintaxe básica javascript

Observando o exemplo 9 é possível visualizar alguns detalhes da programação em

Na linha 1, pode-se visualizar a declaração de array (arranjo) de objetos do tipo string.

Na linha 3, é verificado a cada interação do for se o elemento atual do array é igual a

DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 16

Na linha 6, é exibida, através da função alert, uma mensagem ao usuário se o elemento

É importante destacar alguns pontos da sintaxe javascript:

A palavra var é opcional na declaração de variáveis;