Aplicativos Mobile Multiplataforma

Prévia do material em texto

Aplicativos Mobile Multiplataforma
W
BA
01
77
_v
1.
2
2/196
Aplicativos Mobile Multiplataforma
Autor: César Torres Fernandes
Como citar este documento: FERNANDES, César Torres. Aplicativos Mobile Multiplataforma. Valinhos, 
2016.
Sumário
Apresentação da Disciplina 03
Unidade 1: Introdução ao PhoneGap e Cordova 05
Unidade 2: Instalação PhoneGap e Cordova 28
Unidade 3: Estrutura do Projeto e Configurações 48
Unidade 4: Criando o Primeiro Aplicativo 70
2/196
Unidade 5: Funcionalidades dos Plugins 102
Unidade 6: Funcionalidades Extras 133
Unidade 7: Armazenamento Local 157
Unidade 8: Armazenamento Web 178
3/196
Apresentação da Disciplina
O desenvolvimento de aplicações web, 
ao longo dos anos, passou de simples 
páginas de conteúdo estático para sites da 
internet para aplicações muito mais ricas, 
dinâmicas e interativas, atendendo cada 
vez mais às necessidades e desejos dos 
seus usuários, sejam eles empresas sejam 
pessoas comuns. Esta transformação 
só foi possível de ser alcançada com o 
surgimento e o desenvolvimento de novas 
ferramentas, linguagens, plataformas e 
sistemas, mas também com os avanços nas 
áreas de telecomunicações e comunicação 
de dados.
Com o aparecimento dos dispositivos 
móveis, o mercado teve a necessidade de 
migrar muitas de suas aplicações ou criar 
novas aplicações para este novo ambiente, 
permitindo uma maior mobilidade de 
seus usuários. Grandes empresas, como 
Google e Apple, criaram suas lojas virtuais, 
permitindo a distribuição de aplicativos 
aos usuários de seus respectivos sistemas 
(Android e iOS). Mas e as aplicações 
web? As aplicações web não podem ser 
distribuídas e muito menos instaladas nos 
dispositivos móveis.
Felizmente, o mundo do desenvolvimento 
de aplicações mobile está se 
transformando rapidamente, e frameworks 
como PhoneGap e outros possibilitam 
a construção de aplicativos nativos 
para diversas plataformas, utilizando-
se do conhecimento e habilidades dos 
desenvolvedores web, sem a necessidade 
de se aprender novas linguagens de 
programação.
4/196
Esta disciplina tem o intuito de introduzi-
los ao estudo e desenvolvimento de 
aplicações mobile multiplataforma 
utilizando Apache Cordova e PhoneGap. 
Você verá os principais conceitos, a 
instalação, a estrutura de projeto e 
as configurações necessárias para o 
desenvolvimento de aplicações e também 
o uso das funcionalidades dos plugins e 
funcionalidades extras e o armazenamento 
local e web de dados. Prepare-se para 
desenvolver suas competências no 
desenvolvimento mobile multiplataforma.
5/196
Unidade 1
Introdução ao PhoneGap e Cordova
Objetivos
1. Compreender os aspectos históricos 
que culminaram no surgimento do 
framework PhoneGap e do Apache 
Cordova.
2. Compreender as vantagens 
e desvantagens de se utilizar 
aplicações mobile multiplataforma.
3. Compreender os principais conceitos 
relacionados ao PhoneGap e Apache 
Cordova.
Unidade 1 • Introdução ao PhoneGap e Cordova6/196
Introdução 
Durante a década de 1990 e início dos anos 
2000, vimos o aparecimento de diversas 
plataformas de desenvolvimento para 
aplicações desktop, como Windows, Mac, 
Linux/Unix e suas diversas distribuições. 
Nesta época, o desenvolvimento de 
produtos de software que fossem 
executados em todas estas plataformas era 
extremamente difícil, pois cada plataforma 
possuía características específicas de 
funcionamento. O resultado dessa 
fragmentação de plataformas forçou 
empresas a criarem soluções internas 
através da construção de estruturas em 
linguagens que permitissem um maior grau 
de abstração (por exemplo, C++) e também 
da abstração de módulos específicos do 
sistema operacional.
Com o surgimento da linguagem de 
programação orientada a objetos Java, 
criada pela empresa Sun Microsystem, o 
desenvolvimento de aplicações desktop 
e para outros ambientes tornou-se 
mais simples, pois esta linguagem é 
compilada para um formato conhecido 
como bytecode, sendo executado por 
uma máquina virtual Java, utilizando a 
estratégia de “escreva uma vez, execute em 
qualquer lugar”, promovendo, assim, uma 
independência de plataforma. 
Durante os anos 2000, com o crescente 
desenvolvimento da internet, ocorreu uma 
outra forma de fragmentação, envolvendo 
os navegadores (browsers). Neste período, 
surgiram diversos navegadores, e cada 
um possui um conjunto de características 
Unidade 1 • Introdução ao PhoneGap e Cordova7/196
próprias, que fizeram com que aplicações 
tivessem problemas aos serem executadas 
em um determinado tipo de navegador. 
Isso ocorreu, em grande parte, porque 
os fabricantes, ao desenvolverem 
seus navegadores, não seguiam as 
especificações definidas pelo World Wide 
Web Consortium (W3C). A solução adotada 
pelos desenvolvedores de aplicações 
para a web para esta fragmentação foi a 
adoção de trechos de código que verificam 
em qual navegador serão executados e, 
assim, ativam ou desativam determinadas 
funções.
Com o surgimento dos dispositivos móveis, 
ocorreu uma nova fragmentação de 
plataformas, pois os fabricantes desses 
dispositivos criaram ou se utilizaram de 
diversos tipos de sistemas operacionais, 
tentando atender às diversas necessidades 
de aplicações e tecnologias que podiam 
ser utilizadas pelos usuários. Alguns 
fabricantes criaram suas próprias lojas 
virtuais (Google e Apple, por exemplo) 
para distribuição oficial de aplicações 
desenvolvidas especificamente para as 
suas plataformas. O desenvolvimento de 
aplicações para o ambiente mobile exige o 
uso específico de linguagens, ferramentas 
e ambiente para a sua construção, não 
permitindo o desenvolvimento de uma 
aplicação multiplataforma. Se uma 
aplicação foi desenvolvida para ambiente 
Android, será executada somente em 
dispositivos que tenham como sistema 
operacional o Android. Se uma aplicação 
Unidade 1 • Introdução ao PhoneGap e Cordova8/196
em consideração pelos desenvolvedores, 
tais como: orçamento, requisitos, público-
alvo, tipo de funcionalidades, benefícios, 
limitações e estratégias de projeto. Além 
disso, temos que entender as diferenças 
entre esses tipos de desenvolvimento, suas 
vantagens e desvantagens.
1. Aplicações Web
As aplicações web são sempre acessadas 
através de um navegador (não necessita 
de instalação) e podem ser utilizadas, 
normalmente, em todos os dispositivos 
móveis, sendo necessário uma conexão 
com a internet e se adaptar ao ambiente 
para uma correta visualização. Para o 
seu desenvolvimento, faz-se necessário 
foi desenvolvida para iOS, também será 
executada somente em dispositivos com o 
sistema operacional iOS. As aplicações web 
são acessadas através dos navegadores 
instalados nesses equipamentos.
Neste momento, você pode pensar: Será 
que todas as aplicações web atendem às 
necessidades dos seus usuários em todos 
os dispositivos da mesma maneira que no 
ambiente desktop? Ou será que eu preciso 
criar aplicações nativas para atender a 
essas necessidades? Ou ainda, será que 
eu preciso criar, se for possível, aplicações 
híbridas?
As respostas a estes questionamentos 
podem ser dadas quando entendermos 
que as soluções dependem de um grande 
número de variáveis, que devem ser levadas 
Unidade 1 • Introdução ao PhoneGap e Cordova9/196
somente o uso de linguagens para 
desenvolvimento web. Infelizmente, há 
desvantagens, pois têm acesso limitado 
aos recursos de hardware, não suportam o 
modo off-line e nem o modo full screen. As 
aplicações web são desenvolvidas quando 
é preciso operar em diversas plataformas, 
quando atendem a todos os requisitos, não 
necessitam de recursos específicos das 
plataformas e devem ser disponibilizadas 
de forma rápida no mercado.
2. Aplicações Nativas
As aplicações nativas são desenvolvidas 
para serem executadas em um sistema 
operacional específico de um determinado 
dispositivo móvel e devem ser instaladas 
permitindo a utilização de todas as 
potencialidades presentes na plataforma e 
no dispositivo. Esse tipo de desenvolvimento 
causa o aumento da complexidadee dos 
custos envolvidos, pois não permite a 
reutilização de código entre plataformas. 
Dessa forma, caso seja necessário o 
desenvolvimento de uma aplicação 
multiplataforma, isso exigirá uma equipe 
formada por pessoas especializadas em 
cada uma das plataformas de destino. 
Basicamente, as aplicações nativas são 
desenvolvidas quando existem requisitos 
específicos de desempenho, usabilidade, 
quantidades elevadas de animações, 
utilização de APIs específicas dos dispositivos 
ou quando os usuários são específicos de 
uma determinada plataforma.
Unidade 1 • Introdução ao PhoneGap e Cordova10/196
3. Aplicações Híbridas
As aplicações híbridas combinam as 
características das duas abordagens 
anteriores, a nativa e a web. A parte 
nativa faz uso de APIs da plataforma 
para criar uma base entre o navegador 
e as APIs do dispositivo, permitindo 
o aproveitamento de quase todos os 
recursos disponíveis nos dispositivos mais 
modernos. Este desenvolvimento pode 
ser realizado por codificação, exigindo 
assim o encapsulamento da componente 
web, ou com o uso de frameworks, que 
simplificam o processo, exigindo apenas 
o desenvolvimento da componente 
web. Para a parte da componente web, 
exige-se somente o uso de HTML5, 
CSS3 e JavaScript, que será empacotado 
e instalado no dispositivo, fazendo 
com que pareça uma aplicação nativa. 
Esta característica permite o melhor 
aproveitamento das duas abordagens 
anteriores, permitindo a criação de 
aplicações que podem fazer uso de 
alguns recursos dos dispositivos, sendo 
desenvolvidas apenas uma vez e tendo um 
Para saber mais
A sigla API significa “Application Programming 
Interface”, que significa, em português 
“Interface de Programação de Aplicações”. É um 
conjunto de rotinas e padrões de programação 
para acesso a um aplicativo de software ou 
plataforma baseado na Web. 
Unidade 1 • Introdução ao PhoneGap e Cordova11/196
ciclo de desenvolvimento mais curto. O 
framework mais popular utilizado para este 
tipo de aplicação é o PhoneGap, do Apache 
Cordova.
4. O PhoneGap
O framework PhoneGap apareceu 
pela primeira vez no San Francisco 
iPhoneDevCamp, em agosto de 2008. Ele 
foi desenvolvido pela empresa Nitobi como 
uma forma de simplificar o processo e o 
desenvolvimento de aplicações mobile 
multiplataforma. O projeto inicial foi criado 
para permitir que uma aplicação web fosse 
reconhecida como uma aplicação nativa 
para o iPhone. Logo depois, ampliou-se 
o projeto para adicionar suporte para as 
plataformas Android e BlackBerry. Os 
desenvolvedores da Nitobi adicionaram 
suporte para novas plataformas de 
hardware e trabalharam para, mesmo 
com todos os avanços, garantir a paridade 
de funcionalidade de todas as APIs para 
todas as plataformas. Durante este 
período recebeu contribuições de diversas 
empresas, como a IBM. Em 2011, a 
empresa Nitobi doou o projeto PhoneGap 
para a Fundação Apache.
A empresa Adobe System adquiriu a 
Nitobi logo após esta ter feito a doação 
para a Fundação Apache. A Adobe incluiu 
o projeto PhoneGap (Adobe PhoneGap) 
como parte integrante de seu portfólio 
de produtos, possibilitando aos antigos 
desenvolvedores da Nitobi uma estrutura 
Unidade 1 • Introdução ao PhoneGap e Cordova12/196
de desenvolvimento muito melhor e uma 
integração com outros produtos fornecidos 
pela Adobe.
O framework PhoneGap, doado à Fundação 
Apache, foi incluído em seu portfólio de 
projetos como Apache Callback, sendo 
posteriormente renomeado para Apache 
DeviceReady e, finalmente como Apache 
Cordova. Este projeto é o que recebe 
o maior número de atualizações e de 
liberações dentro da Fundação Apache.
O framework PhoneGap mantém toda a 
compatibilidade com o Apache Cordova, 
incluindo apenas algumas funcionalidades 
extras, como, por exemplo, o PhoneGap 
Desktop, aplicativo para criar e servir 
aplicativos PhoneGap, o PhoneGap 
Developer App, aplicativo que permite 
testar sua aplicação no celular sem a 
necessidade de empacotar e instalar, e o 
PhoneGap Build, que é um serviço remoto 
que permite criar a aplicação final sem 
a infraestrutura de seu computador. Já o 
Apache Cordova, para criar a aplicação 
final, utiliza uma interface de linha de 
comando (CLI).
5. O Apache Cordova
O Apache Cordova é um framework 
open-source para o desenvolvimento 
mobile multiplataforma que permite a 
combinação de tecnologias nativas e o uso 
de tecnologias para desenvolvimento web 
padronizadas, como o HTML5, o CSS3 e o 
JavaScript. Isso permite que aplicações web 
possam realizar tarefas além do permitido 
Unidade 1 • Introdução ao PhoneGap e Cordova13/196
pelos navegadores. Para garantir essa 
característica, o Apache Cordova implementa 
um conjunto de APIs que ampliam as 
capacidades de funcionalidades nativas para 
uma aplicação web dentro de um dispositivo 
móvel.
O Apache Cordova possui os seguintes 
componentes principais: 
• Um repositório que conterá o código-
fonte da aplicação web para cada 
plataforma de destino.
• Um conjunto de APIs que 
proporcionará a uma aplicação web 
o acesso aos recursos do dispositivo 
e também de APIs que não são 
suportados pelos navegadores.
• Um conjunto de ferramentas para 
gerenciar todo o processo de 
criação de projetos de aplicativos, 
gerenciamentos de plugins e a 
construção de aplicativos nativos 
com o uso de SDKs nativos e, ainda, 
auxiliar nos testes destas aplicações 
em simuladores e emuladores de 
dispositivos móveis.
Para construir um aplicativo 
multiplataforma utilizando o Apache 
Para saber mais
a sigla SDK significa “Software Development Kit”. É 
um conjunto de ferramentas de desenvolvimento 
que permite a criação de aplicativos, frameworks e 
outros tipos de software.
Unidade 1 • Introdução ao PhoneGap e Cordova14/196
Cordova, os passos básicos que você 
realizará serão: criar um projeto de uma 
aplicação web, utilizando HTML5, CSS3 e 
JavaScript, empacotar esse projeto para 
um contêiner nativo, testar e depurar 
este aplicativo, e não sendo encontradas 
restrições em relação a qualidade, distribuir 
aos usuários através de lojas virtuais de 
aplicativos (App Stores).
Ao ser instalado em um dispositivo 
móvel, a aplicação multiplataforma será 
tratada como uma aplicação nativa. 
Quando iniciar o aplicativo, a interface 
de usuário do aplicativo será aberta e irá 
carregar a página inicial do aplicativo web, 
normalmente uma página index.html e, 
em seguida, passará o controle para a Web 
View, permitindo que o usuário interaja 
com a aplicação web, tendo a possibilidade 
de, através de links ou de código JavaScript, 
carregar outros conteúdos que estejam 
dentro dos arquivos de recursos, que foram 
empacotados juntos com a aplicação ou 
até pela rede de computadores ou internet 
que contenha uma aplicação servidora.
Uma aplicação web sendo executada 
dentro do contêiner da aplicação nativa 
funcionará de maneira igual ao ser 
executada pelo navegador do dispositivo 
Para saber mais
Uma Web View é um componente nativo utilizado 
para processar o conteúdo web, como, por 
exemplo, páginas HTML, dentro de uma janela do 
aplicativo nativo ou tela.
Unidade 1 • Introdução ao PhoneGap e Cordova15/196
móvel. Toda a lógica da aplicação 
necessária para o seu funcionamento, a 
abertura de novas páginas, a realização 
de cálculos, enviar ou recuperar dados de 
servidores web, entre outras coisas, são 
realizadas com o uso de códigos JavaScript 
incorporados dentro dos arquivos 
utilizados pela aplicação web.
Em relação à v interface do usuário, 
tudo aquilo que um desenvolvedor pode 
fazer em uma aplicação web hospedada 
em um servidor (como configuração de 
fontes, linhas, espaçamentos, coloração 
utilizando Cascading Style Sheets – CSS3 
ou diretamente nas páginas HTML) pode 
ser feito no desenvolvimento de aplicações 
multiplataforma, utilizando Apache 
Cordova.
O Apache Cordova, para permitir que uma 
aplicação web possa acessar aplicativos, 
hardware e APIs nativas, fornece um 
conjunto de APIs em JavaScript. Essas APIs 
foram implementadasem duas partes: 
uma biblioteca JavaScript que expõe as 
capacidades nativas para a aplicação 
web e o código nativo correspondente em 
execução no contêiner que implementa 
a parte da API nativa. Cada uma das 
APIs, presentes no Apache Cordova, 
tem sido dividida em plugins separados, 
permitindo o gerenciamento de plugins 
no projeto (adição e remoção) de acordo 
com as necessidades do projeto a ser 
desenvolvido. Quando uma aplicação 
possui a implementação de um recurso que 
usa uma dessas APIs do Apache Cordova, o 
Unidade 1 • Introdução ao PhoneGap e Cordova16/196
aplicativo realiza a chamada a API usando 
JavaScript. Uma camada especial dentro 
do aplicativo interpreta a chamada API do 
Apache Cordova na API nativa apropriada 
para a função específica que foi solicitada.
O Apache Cordova fornece as seguintes 
APIs:
• Accelerometer;
• BatteryStatus;
• Camera;
• Capture;
• Compass;
• Connection;
• Contacts;
• Device;
• Events;
• File;
• File Transfer;
• Geolocation;
• Globalization;
• InAppBrowser;
• Media;
• Notification;
• Splashscreen;
• Status Bar;
• Storage;
• Vibration.
Você verá mais detalhes sobre estas APIs 
quando formos tratar, especificamente, das 
funcionalidades e o seu uso em aplicações 
multiplataforma.
Unidade 1 • Introdução ao PhoneGap e Cordova17/196
Glossário
Bytecode: Forma intermediária de código, resultado da compilação de programa de 
computador escrito em linguagem Java e que é interpretada pelas Máquinas Virtuais Java.
Máquina Virtual Java: É um programa responsável por carregar, executar e gerenciar os 
aplicativos Java, convertendo os bytecodes em código executável de máquina. 
Cascading Style Sheets (CSS): É uma linguagem de folhas de estilo que propicia a separação 
entre formato e o conteúdo de um documento escrito em uma linguagem de marcação, como 
HTML e XML.
Questão
reflexão
?
para
18/196
Reflita sobre o conceito de desenvolvimento de 
aplicações híbridas e sugira uma ou mais situações em 
que este tipo de abordagem pode ser utilizado.
19/196
Considerações Finais
• Tivemos a conceituação de aplicações nativas, web e híbridas.
• Tivemos uma visão histórica do Adobe PhoneGap e Apache Cordova.
• Tivemos uma visão básica da estrutura e funcionamento das aplicações 
híbridas multiplataforma, utilizando Adobe PhoneGap e Apache Cordova.
• Tivemos uma primeira visão da quantidade de APIs que podem ser 
utilizadas em aplicações multiplataforma.
Unidade 1 • Introdução ao PhoneGap e Cordova20/196
Referências
GATOL, R.; PATEL, Y. Beginning PhoneGap: Mobile Web Framework for JavaScript and HTML5. 
Editora Apress, 2012.
LOPES, S. Aplicações Mobile Híbridas com Cordova e PhoneGap. Editora Casa do Código, 
2016. (Série Caelum).
LUNNY, A. PhoneGap Beginner’s Guide. Editora Packt Publishing, 2011.
MYER, T. Beginning PhoneGap. Editora John Wesley & Sons, 2012.
WARGO, J. M. Apache Cordova 3 Programming. Editora Addison-Wesley, 2013. (Mobile 
Programming Series).
21/196
1. O que são aplicações nativas para dispositivos móveis?
a) São aplicações especialmente concebidas para serem executadas em um sistema 
operacional de um determinado dispositivo móvel e que não necessitam ser instaladas.
b) São aplicações especialmente concebidas para serem executadas em um sistema 
operacional de um determinado dispositivo móvel e que necessitam ser instaladas.
c) São aplicações concebidas para serem executadas em mais de um sistema operacional de 
diversos dispositivos móveis e que necessitam ser instaladas.
d) São aplicações que necessitam do conhecimento de linguagens de programação web para 
serem desenvolvidas.
e) São aplicações que necessitam do conhecimento de linguagens de programação web para 
serem desenvolvidas e de linguagens específicas dos dispositivos.
Questão 1
22/196
2. O que são aplicações web para dispositivos móveis?
a) São aplicações que exigem o conhecimento de linguagens de programação como Java, 
Swift, entre outras.
b) São aplicações que exigem a sua instalação no dispositivo para serem utilizadas.
c) São aplicações que exigem o uso de frameworks específicos para desenvolvimento 
multiplataforma.
d) São aplicações que se utilizam de navegadores e devem ser instaladas no dispositivo.
e) São aplicações que se utilizam de navegadores e do acesso à Internet e podem, 
normalmente, ser utilizadas em todos os dispositivos móveis.
Questão 2
23/196
3. O que são aplicações híbridas para dispositivos móveis?
a) São aplicações que exigem um alto conhecimento de Java por parte do desenvolvedor.
b) São aplicações nativas que não necessitam de instalação no dispositivo.
c) São aplicações que combinam o desenvolvimento nativo com a tecnologia web.
d) São aplicações web que necessitam de instalação no dispositivo.
e) São aplicações que dependem do conhecimento único da linguagem de marcação XML.
Questão 3
24/196
4. Para desenvolver aplicações mobile multiplataforma, é suficiente e 
necessário conhecer quais linguagens:
a) HTML, Java, CSS.
b) HTML5, CSS3, Java.
c) HTML5, CSS3, JavaScript.
d) JavaScript, Java, Swift.
e) Java, CSS3, HTML5.
Questão 4
25/196
5. Para que servem o PhoneGap e o Apache Cordova?
a) Servem como framework para auxiliar no processo de criação de aplicações mobile 
multiplataforma.
b) Servem como framework para auxiliar no processo de criação de aplicações mobile nativas.
c) Servem como framework para o desenvolvimento de aplicações nativas que não 
necessitam de instalação no dispositivo móvel.
d) Servem como framework para o desenvolvimento de aplicações cliente-servidor.
e) Servem como framework para o desenvolvimento de aplicações desktop.
Questão 5
26/196
Gabarito
1. Resposta: B.
Todas as aplicações nativas são 
desenvolvidas para fazerem uso de todos 
os recursos de hardware e do sistema 
operacional utilizado pelo dispositivo 
móvel.
2. Resposta: E.
As aplicações web podem ser utilizadas 
pelos navegadores instalados nos 
dispositivos móveis da mesma maneira que 
seriam utilizados pelos navegadores em um 
ambiente desktop, sem a necessidade de 
instalação.
3. Resposta: C.
As aplicações híbridas possuem a 
vantagem de combinar o melhor das duas 
abordagens: desenvolvimento nativo e 
desenvolvimento web.
4. Resposta: C.
Para o desenvolvimento de aplicações 
multiplataforma, é suficiente o 
conhecimento da linguagem de marcação 
HTML5, da linguagem de folha de estilos 
CSS3 e da linguagem de programação 
interpretada JavaScript.
27/196
Gabarito
5. Resposta: A.
O Adobe PhoneGap e o Apache Cordova 
servem para auxiliar na criação de 
aplicações multiplataforma, pois 
empacotam a aplicação web, que assim 
pode ser instalada e acessar recursos como 
se fosse uma aplicação nativa
28/196
Unidade 2
Instalação PhoneGap e Cordova
Objetivos
1. Localizar e instalar o Apache Cordova.
2. Localizar e instalar o Adobe 
PhoneGap. 
3. Compreender as diferenças entre as 
plataformas.
Unidade 2 • Instalação PhoneGap e Cordova29/196
Introdução
Para realizar a instalação do Apache 
Cordova e do Adobe PhoneGap é 
necessário que você entenda que existem 
duas formas de desenvolvimento possíveis: 
a multiplataforma e a centrada em 
plataforma: 
• Multiplataforma: utilize esta forma de 
desenvolvimento quando você quiser 
construir projetos para diversas 
plataformas de uma vez, abstraindo 
muitas das funcionalidades de shell 
scripts de baixo nível, e também 
fornecer uma interface comum para 
aplicar plugins para o seu aplicativo. 
A CLI (Command Line Interface) 
copia um conjunto comum de 
recursos da Web em subdiretórios 
para cada plataforma móvel, faz 
todas as alterações de configuração 
necessárias para cada uma e executa 
scripts de criação para gerar binários 
do aplicativo;
• Centrada em plataforma: utilize 
esta forma de desenvolvimento 
quando você quiser se concentrar 
em construir um aplicativo para uma 
plataforma única e precisa ser capaz 
de modificá-lo a um nível mais baixo, 
dentro do SDK. Essa forma se baseia 
em um conjuntode shell scripts de 
baixo nível, que são adaptados para 
cada plataforma suportada e um 
utilitário Plugman separado, que 
permite que você aplique plugins 
ao projeto. Você pode usar esta 
forma de desenvolvimento para criar 
Unidade 2 • Instalação PhoneGap e Cordova30/196
aplicativos multiplataforma, mas, 
pela falta de uma ferramenta de 
alto nível, você terá mais ciclos de 
compilação separada e modificações 
de plugin para cada plataforma.
Caso tenha desenvolvido um projeto 
multiplataforma, você tem a opção de 
mudar para um desenvolvimento centrado 
na plataforma, quando precisar de maior 
controle do SDK. Importante salientar que, 
ao realizar esta mudança, não há como 
retornar à forma de desenvolvimento 
multiplataforma (CLI).
As plataformas Android, iOS e Windows 
Phone serão o foco de nosso tema por 
serem as mais utilizadas nos dispositivos 
móveis. Para cada uma dessas plataformas, 
existem necessidades específicas – de 
hardware, de software, entre outras – 
que devem ser levadas em consideração 
para a criação de um ambiente de 
desenvolvimento adequado para 
aplicações híbridas multiplataforma.
Para o Android:
• Instalar o JDK 7 ou superior.
• Instalar o Android SDK ou o Android 
Para saber mais
O utilitário Plugman é um gerenciador de 
plugin que deve ser instalado quando do 
desenvolvimento centrado em plataforma. Para 
instalar o Plugman, utilize o comando: npm install 
-g plugman <enter>.
Unidade 2 • Instalação PhoneGap e Cordova31/196
Studio (já possui o Android SDK).
• Para testar, você pode utilizar 
os emuladores de dispositivos 
disponíveis no SDK ou instalar 
emuladores de terceiros e também 
ter dispositivos reais.
• Para publicar, será necessária uma 
conta de desenvolvedor paga.
Para o iOS:
• Possuir um Mac com sistema 
operacional Mac OS X versão 10.9 ou 
superior.
• Instalar o Xcode 6.0 ou superior, que 
inclui o iOS SDK 8.
• Para testar, você pode utilizar os 
emuladores disponíveis pelo iOS 
SDK e Xcode e também possuir 
dispositivos reais com no mínimo o 
iOS 8.
• Para publicar, será necessário o Xcode 
e uma conta de desenvolvedor paga.
Para Windows:
• Possuir um computador com sistema 
operacional Windows 8 Pro, Windows 
8.1 Pro ou Windows 10 Pro, de 64 
bits e com processadores Intel com 
suporte a Hyper-V.
• Instalar o Visual Studio 2015 
ou superior com as opções de 
ferramentas e SDKs selecionadas.
• Instalar o Windows Phone 8 SDK.
• Para testar, você pode utilizar os 
emuladores presentes no Visual 
Studio e também ter dispositivos 
reais que devem ser registrados na 
Microsoft.
Unidade 2 • Instalação PhoneGap e Cordova32/196
• Para publicar, será necessária uma 
conta de desenvolvedor paga.
1. Instalação do Apache 
Cordova
O Cordova CLI é distribuído como um 
pacote do npm. Para instalar o Cordova CLI, 
você precisará:
1. Baixar o Node.js de acordo 
com a sua plataforma de 
desenvolvimento. 
2. Realizar o procedimento de 
instalação do Node.js. No final da 
instalação, você deverá ser capaz 
de invocá-lo pela linha de comando 
em um terminal. Abra um terminal e 
digite:
• No Windows, OS X e Linux:
node –v <enter> 
Para saber mais
O npm (Node Package Manager) é um repositório 
on-line para publicação de projetos de código 
aberto e também um utilitário de linha de comando 
que interage com este repositório on-line, para 
auxiliar na instalação de pacotes, gerenciamento 
de versão e gerenciamento de dependências.
Para saber mais
Node.js é uma poderosa plataforma que permite 
escrever aplicações web escaláveis utilizando 
JavaScript no lado servidor.
Unidade 2 • Instalação PhoneGap e Cordova33/196
Este comando confirmará a versão 
instalada do Node.js.
3. Instalar o Cordova CLI utilizando o 
módulo utilitário npm do Node.js. Em 
um terminal, digite:
• No Windows:
npm install –g cordova <enter>
• No OS X e Linux:
sudo npm install –g cordova <enter>
No OS X e no Linux, utiliza-se sudo para ter 
acesso a diretórios com permissão restrita. 
Caso você tenha acesso com permissão de 
gravação ao diretório de instalação, não se 
faz necessário o uso do prefixo sudo para 
executar o comando npm.
O flag –g sinaliza ao npm para instalar o 
Cordova globalmente. Caso contrário, 
ele será instalado no subdiretório node_
modules do diretório atual de trabalho.
No final da instalação, você deverá ser 
capaz de invocá-lo pela linha de comando 
em um terminal. Abra um terminal e digite:
• No Windows, OS X e Linux:
cordova <enter>
Este comando lhe mostrará uma visão geral 
dos comandos e opções que podem ser 
utilizadas pelo Cordova.
2. Instalação do Adobe 
PhoneGap
O Adobe PhoneGap, como você 
verá, disponibiliza duas formas de 
Unidade 2 • Instalação PhoneGap e Cordova34/196
desenvolvimento: uma pelo PhoneGap 
Desktop e outra pelo PhoneGap CLI.
Instalação do Adobe PhoneGap 
CLI
 O PhoneGap CLI fornece uma interface 
de linha de comando para criar aplicações 
PhoneGap como uma alternativa ao uso 
do PhoneGap Desktop. O PhoneGap CLI 
possui alguns recursos adicionais sobre 
o PhoneGap Desktop para construção, 
execução e empacotamento das aplicações 
PhoneGap em múltiplas plataformas.
Para instalar o PhoneGap CLI, você 
precisará:
1. Baixar o Node.js (<https://nodejs.org/
en/download/>) de acordo com a sua 
plataforma de desenvolvimento;
2. Realizar o procedimento de instalação 
do Node.js. No final da instalação, 
você deverá ser capaz de invocá-
lo pela linha de comando em um 
terminal. Abra um terminal e digite:
• No Windows e OS X:
node –v <enter> 
Este comando confirmará a versão 
instalada do Node.js.
3. Instalar o PhoneGap CLI utilizando o 
módulo utilitário npm do Node.js. Em 
um terminal, digite:
• No Windows:
npm install -g PhoneGap@latest 
<enter>
https://nodejs.org/en/download/
https://nodejs.org/en/download/
Unidade 2 • Instalação PhoneGap e Cordova35/196
• No OS X:
sudo npm install -g PhoneGap@
latest <enter>
No OS X e no Linux, utiliza-se sudo para ter 
acesso a diretórios com permissão restrita. 
Caso você tenha acesso com permissão de 
gravação ao diretório de instalação, não se 
faz necessário o uso do prefixo sudo para 
executar o comando npm.
O flag –g sinaliza ao npm para instalar o 
PhoneGap CLI globalmente. Caso contrário, 
ele será instalado no subdiretório node_
modules do diretório atual de trabalho.
No final da instalação, você deverá ser 
capaz de invocá-lo pela linha de comando 
em um terminal. Abra um terminal e digite:
• No Windows e OS X:
PhoneGap <enter>
Este comando lhe mostrará uma visão 
geral dos comandos e opções que podem 
ser utilizadas pelo PhoneGap CLI. 
Instalação do Adobe PhoneGap 
Desktop
O PhoneGap Desktop fornece uma 
interface de arrastar e soltar para criar 
aplicações PhoneGap, sendo uma 
alternativa ao uso do PhoneGap CLI.
Antes de instalar o PhoneGap Desktop, 
devemos escolher o sistema operacional: 
Mac OS X ou Windows.
Unidade 2 • Instalação PhoneGap e Cordova36/196
Instalação no Windows:
1. Baixar a última versão do instalador 
para Windows (<http://PhoneGap.
com/products/>).
2. Clicar duas vezes sobre o arquivo que 
foi baixado para executar o instalador. 
Aparecerá a tela inicial do instalador. 
Clicar em Próximo.
3. Ao realizar isso, você verá o contrato 
de licença solicitando o seu aceite. 
Aceitar o contrato de licença.
4. Selecionar o destino desejado para 
o aplicativo (caso seja necessário) e 
clicar em Próximo.
5. Selecionar o local desejado para o 
atalho (caso seja necessário) e clicar 
em Próximo.
6. Clicar em Instalar para iniciar a 
instalação.
7. Clicar em Concluir para fechar o 
assistente de configuração.
8. Abrir o aplicativo PhoneGap Desktop.
Instalação no Mac OS X:
1. Baixar a última versão do instalador 
para Mac OS X (<http://PhoneGap.
com/products/>).
2. Clicar duas vezes sobre o arquivo que 
foi baixado para executar o instalador. 
Ao realizar isso, você verá o contrato 
de licença solicitando o seu aceite. 
Aceitar o contrato de licença.
3. Arrastar e soltar o aplicativo na pasta 
deAplicativos do seu Mac.
4. Abrir o aplicativo PhoneGap Desktop.
http://PhoneGap.com/products/
http://PhoneGap.com/products/
http://PhoneGap.com/products/
http://PhoneGap.com/products/
Unidade 2 • Instalação PhoneGap e Cordova37/196
Além da instalação do PhoneGap CLI ou do 
PhoneGap Desktop, você deverá instalar o 
PhoneGap Developer App.
Instalação do PhoneGap 
Developer App
O PhoneGap Developer App é um aplicativo 
móvel que funciona em dispositivos 
e permite-lhe visualizar e testar os 
aplicativos móveis PhoneGap através das 
plataformas de maneira rápida e com 
configuração mínima. Fornece acesso às 
APIs do núcleo PhoneGap, proporcionando 
o acesso imediato aos recursos nativos do 
dispositivo sem a necessidade de instalar 
qualquer plugin ou compilação local.
1. Localizar o aplicativo gratuito 
PhoneGap Developer App e instalá-lo 
em seu dispositivo móvel.
2. Toque no ícone do aplicativo 
PhoneGap Developer de sua tela para 
abri-lo.
Unidade 2 • Instalação PhoneGap e Cordova38/196
Glossário
Sudo: É um comando que permite a usuários comuns obter privilégios de outro usuário, em 
geral do superusuário.
Shell script: É uma linguagem de script utilizada por vários sistemas operacionais, possuindo 
diversos dialetos, que dependem do interpretador de comandos utilizado. 
Command Line Interface (CLI): É uma interface do usuário para um sistema operacional ou 
para uma aplicação, que permite que você insira comandos em uma determinada linha para ser 
executada.
Questão
reflexão
?
para
39/196
Em relação à plataforma iOS, será que é possível 
desenvolver aplicações sem um computador Mac?
40/196
Considerações Finais
• Tivemos a conceituação desenvolvimento multiplataforma e 
centrado na plataforma.
• Tivemos uma visão básica dos requisitos mínimos necessários para 
desenvolver aplicações para as plataformas Android, iOS e Windows.
• Tivemos uma visão básica do processo de instalação do Apache 
Cordova.
• Tivemos uma visão básica do processo de instalação do Adobe 
PhoneGap.
Unidade 2 • Instalação PhoneGap e Cordova41/196
Referências 
ADOBE PhoneGap. Disponível em: <http://PhoneGap.com/>. Acesso em: 14 jul. 2016.
APACHE Cordova. Disponível em: <https://cordova.apache.org/>. Acesso em: 14 jul. 2016.
GATOL, R.; PATEL, Y. Beginning PhoneGap: Mobile Web Framework for JavaScript and HTML5. 
Editora Apress, 2012.
LOPES, S. Aplicações Mobile Híbridas com Cordova e PhoneGap. Editora Casa do Código, 
2016. (Série Caelum).
LUNNY, A. PhoneGap Beginner’s Guide. Editora Packt Publishing, 2011.
MYER, T. Beginning PhoneGap. Editora John Wesley & Sons, 2012.
WARGO, J. M. Apache Cordova 3 Programming. Editora Addison-Wesley, 2013. (Mobile 
Programming Series).
http://PhoneGap.com
https://cordova.apache.org/
42/196
1. O que é desenvolvimento multiplataforma?
a) É o desenvolvimento de aplicações que podem ser instaladas em diversas plataformas.
b) É o desenvolvimento de aplicações que só podem ser utilizadas em uma única plataforma.
c) É o desenvolvimento de aplicações que dependem da linguagem Java.
d) É o desenvolvimento de aplicações que dependem da linguagem Objective-C.
e) É o desenvolvimento de aplicações que dependem do Visual Studio.
Questão 1
43/196
2. O que é desenvolvimento centrado em plataforma?
Questão 2
a) É o desenvolvimento de aplicações que podem ser instaladas em diversas plataformas.
b) É o desenvolvimento de aplicações que podem ser instaladas em uma única plataforma 
específica.
c) É o desenvolvimento de aplicações que dependem da linguagem Java.
d) É o desenvolvimento de aplicações que dependem da linguagem Objective-C.
e) É o desenvolvimento de aplicações que dependem do Visual Studio.
44/196
3. Qual o ambiente integrado de desenvolvimento utilizado para 
desenvolver aplicações para a plataforma iOS?
Questão 3
a) Visual Studio.
b) Notepad++.
c) Android SDK.
d) Xcode.
e) Android Studio.
45/196
4. Para instalar o PhoneGap CLI no Windows, qual é o comando necessário?
Questão 4
a) npm -g PhoneGap@latest <enter>.
b) npm PhoneGap@latest <enter>.
c) npm install -g PhoneGap@latest <enter>.
d) install -g PhoneGap@latest <enter>.
e) npm install -g cordova@latest <enter>.
46/196
5. Para instalar o Cordova CLI no Windows, qual é o comando necessário?
Questão 5
a) install –g cordova <enter>.
b) npm –g cordova <enter>.
c) npm install –g cordova <enter>.
d) npm install –g PhoneGap <enter>.
e) npm install -g PhoneGap@latest <enter>.
47/196
Gabarito
1. Resposta: A.
É uma forma de desenvolvimento que 
possibilita a construção de projetos para 
diversas plataformas de uma vez.
2. Resposta: B.
É uma forma de desenvolvimento que 
possibilita a construção de projetos para 
uma plataforma específica.
3. Resposta: D.
O IDE oficial para desenvolvimento para 
iOS é o Xcode.
4. Resposta: C.
Este comando instala a versão mais recente 
do PhoneGap CLI.
5. Resposta: C.
Este comando instala a versão do cordova 
CLI.
48/196
Unidade 3
Estrutura do Projeto e Configurações
Objetivos
1. Compreender a instalação e 
configuração de SDKs para cada 
plataforma.
2. Compreender a estrutura de 
projeto para o desenvolvimento 
de aplicações utilizando Adobe 
PhoneGap e Apache Cordova.
3. Compreender as semelhanças e 
diferenças entre o Adobe PhoneGap e 
o Apache Cordova.
Unidade 3 • Estrutura do Projeto e Configurações49/196
Introdução
Como você pode se lembrar, no Tema 02 
– Instalação PhoneGap e Cordova, havia 
uma pequena introdução em relação 
aos requisitos de hardware e software 
necessários para a instalação do Adobe 
PhoneGap e do Apache Cordova.
Para criar e executar aplicativos usando o 
Adobe PhoneGap e/ou Apache Cordova, 
você precisará instalar SDKs para cada 
plataforma que deseja utilizar. Uma 
maneira alternativa é o uso do navegador 
(browser), que não requer qualquer 
plataforma SDK.
Para verificar se você dispõe de condições 
que satisfaçam os requisitos para a 
construção de um projeto na plataforma, 
abra um terminal e digite:
cordova requirements <enter>
Este comando confirmará se todos os 
requisitos necessários estão instalados 
para o desenvolvimento. Caso não 
tenhamos os devidos requisitos, você 
deverá seguir os próximos itens para a 
devida instalação e configuração do SDKs 
para cada plataforma, antes de pensar na 
estrutura do projeto.
1. Plataforma Android
Independentemente se você for 
desenvolver de forma centrada na 
plataforma ou de forma multiplataforma, a 
instalação do Android SDK é obrigatória.
O Android SDK pode ser instalado nos 
sistemas operacionais Linux, OS X e 
Unidade 3 • Estrutura do Projeto e Configurações50/196
Windows. Caso você esteja realizando um 
desenvolvimento centrado na plataforma, 
existe um pacote Android para o Apache 
Cordova (cordova-android) que deverá ser 
instalado em seu projeto. 
Para determinar qual versão do pacote 
cordova-android está instalado em seu 
projeto de Cordova, abra um terminal no 
diretório que contém o seu projeto e digite 
o comando:
cordova platform ls <enter>
Instalação dos requisitos
a) Kit de desenvolvimento Java (JDK): 
• Instalar o kit de desenvolvimento 
Java (JDK) 7 ou posterior.
b) Android SDK: 
• Instalar o Android SDK stand-
alone ou o Android Studio, que 
possui, dentro de seu pacote de 
instalação, o Android SDK. Esta 
última opção pode ser útil caso 
você pretenda executar e depurar 
na plataforma Android.
c) Adicionar pacotes ao SDK:
• Depois de instalar o Android SDK, 
abra o Android SDK Manager e 
verifique se estão instalados os 
seguintes itens:
• Android Platform SDK para a 
sua versão de Android.
Unidade 3 • Estrutura do Projeto e Configurações51/196
• Android SDK build-tools versão 
19.1.0 ou superior.
• Android Support Repository 
(encontrado no item “Extras”).
d) Definir as variáveis de ambiente:
Esta etapa é necessária, pois o 
Cordova CLI e o PhoneGap CLI 
fazem uso de algumas variáveis de 
ambiente para poderem funcionar 
corretamente, sendo assim, devem 
ser atualizadas as seguintesvariáveis:
• Definir a variável de ambiente 
JAVA_HOME para o local de 
instalação do JDK.
• Definir ANDROID_HOME para o 
local de instalação do Android 
SDK.
• Adicionar na variável de ambiente 
PATH o local de instalação dos 
diretórios tools e platform-tools 
presentes no Android SDK. 
As formas de definição e adição de 
variáveis de ambiente diferem nos 
sistemas operacionais Mac/Linux e 
Windows.
e) Criar um emulador Android:
• Será necessário utilizar o 
AVD Manager, para criar um 
Dispositivo Virtual Android (AVD) 
para executar o seu aplicativo 
Cordova para a plataforma 
Android.
Unidade 3 • Estrutura do Projeto e Configurações52/196
Caso você esteja em um desenvolvimento 
centrado na plataforma, será necessário 
baixar o pacote cordova-android e, para 
adicionar plugins ao seu projeto, será 
necessário o uso do utilitário Plugman.
2. Plataforma iOS
Independentemente se você for 
desenvolver de forma centrada na 
plataforma ou de forma multiplataforma, 
a instalação do iOS 8 SDK ou superior é 
obrigatória.
Para começar a desenvolver, será 
necessário um computador Mac baseado 
em Intel com sistema operacional OS X 
versão 10.9 ou superior. Para testar, você 
pode utilizar o simulador de iOS instalado 
no iOS SDK e Xcode, mas também 
precisará de um dispositivo real, para 
verificar e validar todas as características 
do aplicativo antes de submetê-lo à 
Apple App Store. O dispositivo deve ter 
no mínimo o iOS 8 instalado, que é a 
versão mínima suportada pelo Cordova 
4.0.0; neste caso, entram nesta categoria 
os seguintes dispositivos: iPhone 4S, 
iPhone 5, iPhone 5C, iPhone 5S, iPhone 6, 
iPhone 6 Plus, iPhone 6S, iPhone 6S Plus, 
iPhone SE, iPad 2, iPad 3, iPad 4, iPad Air, 
iPad Air 2, iPad Pro, iPad Mini, iPad Mini 2, 
iPad Mini 3, iPod Touch 5ª geração e iPod 
Touch 6ª geração ou superior.
Unidade 3 • Estrutura do Projeto e Configurações53/196
Instalação dos requisitos
a) Xcode:
• Existem duas maneiras de baixar o 
Xcode:
• Procurar por Xcode no Mac App 
Store, realizar o download e a 
instalação.
• Procurar na Apple Developer, 
mas exige um registro (Apple 
ID) como desenvolvedor 
Apple. Realizar o download e a 
instalação.
Uma vez instalado o Xcode, 
várias ferramentas de linha 
de comando precisam estar 
habilitadas para poder executar 
o cordova. Dessa forma, abra 
um terminal e digite:
xcode-select –install
b) Ferramentas de implantação:
• A ferramenta ios-sim permite 
executar aplicativos iOS no 
simulador iOS. Para instalar, abra 
um terminal e digite:
npm install -g ios-sim
• A ferramenta ios-deploy permite 
executar aplicativos iOS no 
dispositivo iOS pela linha de 
comando. Para instalar, abra um 
terminal e digite:
npm install -g ios-deploy
Unidade 3 • Estrutura do Projeto e Configurações54/196
Caso você esteja em um desenvolvimento 
centrado na plataforma, será necessário 
baixar o pacote cordova-ios, e para 
adicionar plugins ao seu projeto, será 
necessário o uso do utilitário Plugman.
3. Plataforma Windows
Independentemente se você for 
desenvolver de forma centrada na 
plataforma ou de forma multiplataforma, 
a instalação do SDK é obrigatória para a 
construção e implantação de aplicativos 
cordova para Windows 8.1, Windows 
Phone 8.1 e Windows 10 Universal App 
Platform. 
A configuração do ambiente para a 
construção e implantação de aplicativos 
Cordova para o Windows Phone 8 será vista 
mais à frente.
Cordova WebViews podem ser executados 
no Windows utilizando o Internet Explorer 
11 (Windows 8.1 e Windows Phone 8.1) 
Para saber mais
O Windows 10 apresentou a Universal Windows 
Platform (UWP), que evoluiu o modelo do 
Windows Runtime e levou para o núcleo 
unificado do Windows 10. Como parte do 
núcleo, o UWP agora oferece uma plataforma de 
aplicativo comum disponível em cada dispositivo 
que executa o Windows 10.
Unidade 3 • Estrutura do Projeto e Configurações55/196
como seu mecanismo de renderização, e 
podem utilizar o seu depurador para testar 
qualquer conteúdo web, desde que não 
haja a invocação de APIs Cordova.
Requisitos
a) Para desenvolver aplicativos para a 
plataforma Windows, você precisa de:
• Um computador com Windows 
8.1, 32 ou 64 bits (Home, Pro ou 
Enterprise) com 4 GB de RAM no 
mínimo, junto com Visual Studio 
2015 ou Visual Studio 2013; 
• Para os emuladores do Windows 
Phone, um Windows 8.1 64 bits 
Professional ou superior e um 
processador que suporte Client 
Hiper-V e Second Level Address 
Translation (SLAT). 
b) Para desenvolver aplicativos para 
Windows 10:
• Um computador com Windows 8.1 
ou Windows 10, 32 bits ou 64 bits, 
junto com Visual Studio 2015 ou 
superior.
http://www.microsofttranslator.com/bv.aspx?from=en&to=pt&a=http%3A%2F%2Fwww.visualstudio.com%2Fdownloads
http://www.microsofttranslator.com/bv.aspx?from=en&to=pt&a=http%3A%2F%2Fwww.visualstudio.com%2Fdownloads
http://www.microsofttranslator.com/bv.aspx?from=en&to=pt&a=http%3A%2F%2Fwww.visualstudio.com%2Fdownloads
Unidade 3 • Estrutura do Projeto e Configurações56/196
Você deverá prestar atenção às versões do 
Windows, pois aplicativos Cordova para 
Windows possuem compatibilidade da 
versão menor para a maior, não ocorrendo 
Para saber mais
O Client Hiper-V é a mesma tecnologia de 
virtualização de computador que estava 
anteriormente disponível no Windows Server, 
fornecendo os mesmos recursos de virtualização 
como o Hyper-V no Windows Server 2012.
O Second Level Address Translation (SLAT) é 
uma tecnologia de virtualização assistida por 
hardware que torna possível evitar a sobrecarga 
associada a shadow page tables controladas por 
software.
o inverso. Dessa forma, aplicativos para 
Windows 10 não podem ser executados no 
Windows 8.1, mas o contrário é possível.
Caso você tenha um computador Mac e 
queira desenvolver aplicativos cordova 
para a plataforma Windows, existem 
duas opções: executar o Windows em um 
ambiente de máquina virtual (VMWare 
Fusion, por exemplo) ou criar um dual-
boot com uma partição Windows 8.1 (Boot 
Camp, por exemplo). 
Instalação dos requisitos
a) Instalar o Visual Studio:
• Pode ser qualquer edição do 
Visual Studio, desde que seja 
correspondente ao solicitado 
Unidade 3 • Estrutura do Projeto e Configurações57/196
no item Requisitos, descrito 
anteriormente. 
• Durante a instalação, selecionar 
todas as ferramentas e SDKs para 
as plataformas de Windows de 
destino (Windows 8.1, Windows 
Phone 8.1 e Windows 10 Universal 
App Platform).
Caso você esteja em um desenvolvimento 
centrado na plataforma, será necessário 
baixar o pacote cordova-windows e 
expandi-lo em um diretório vazio. Todos os 
arquivos batch importantes estão dentro 
do diretório package\bin.
4. Plataforma Windows Phone 8
Neste item, você verá como configurar 
seu ambiente de desenvolvimento SDK 
para implantar aplicativos cordova 
para dispositivos Windows Phone 
8. Independentemente se você for 
desenvolver de forma centrada na 
plataforma ou de forma multiplataforma, 
a instalação do Windows Phone SDK é 
obrigatória.
Para a plataforma Windows Phone 8, o 
Cordova WebView baseia-se no Internet 
Explorer 10 como seu mecanismo de 
renderização, e podem utilizar o seu 
depurador para testar qualquer conteúdo 
web, desde que não haja a invocação de 
APIs Cordova.
Unidade 3 • Estrutura do Projeto e Configurações58/196
Requisitos
a) Para desenvolver aplicativos para a 
plataforma Windows, você precisa:
• De um computador com Windows 
8 Pro, 64 bits, e um processador 
que suporte virtualização (habilitar 
na configuração da BIOS) e Second 
Level Address Translation (SLAT), 
com 6,5 GB de espaço livre em 
disco, no mínimo, e 4 GB de 
RAM, no mínimo. A versão Pro é 
necessária para rodar o emulador 
de dispositivo. 
• Instalar a versão mais recente do 
Windows Phone SDK.
• Instalar o Visual Studio 2012 
Update 2, para habilitar a 
implantação através da linha de 
comando com o Windows Phone 
8.0 SDK de 8.0.
Da mesma forma que no item anterior, caso 
você tenha um computador Mac e queiradesenvolver aplicativos cordova para a 
plataforma Windows, existem duas opções: 
executar o Windows em um ambiente 
de máquina virtual (VMWare Fusion, por 
exemplo) ou criar um dual-boot com uma 
partição Windows 8.1 (Boot Camp, por 
exemplo). 
Caso você esteja em um desenvolvimento 
centrado na plataforma, será necessário 
baixar o pacote cordova-wp8 e expandi-lo 
em um diretório vazio. Todos os arquivos 
Unidade 3 • Estrutura do Projeto e Configurações59/196
batch importantes estão dentro do 
diretório package\bin. Para gerenciar a 
adição ou remoção de plugins utilizar o 
Plugman.
5. Estrutura Básica de um 
Projeto 
Basicamente a estrutura de um projeto, 
independentemente de ter sido criado pelo 
Cordova CLI, pelo PhoneGap CLI ou pelo 
PhoneGap Desktop, conterá os seguintes 
arquivos e diretórios principais:
a) Arquivo config.xml: fica sempre 
na raiz do projeto e é o arquivo de 
configurações de sua aplicação 
e permite que você personalize o 
comportamento do seu projeto.
b) Diretório \hooks: este diretório 
pode conter scripts utilizados para 
customizar comandos Cordova CLI e 
PhoneGap CLI.
c) Diretório \platforms: este diretório 
conterá todo o código-fonte e scripts 
de construção para as plataformas 
que você adicionar ao seu projeto.
d) Diretório \plugins: qualquer plugin 
adicionado será extraído ou copiado 
para este diretório.
e) Diretório \www: neste diretório 
colocamos todo o código HTML, 
CSS e JavaScript. Também incluímos 
todas as imagens e demais recursos 
estáticos.
Unidade 3 • Estrutura do Projeto e Configurações60/196
Glossário
Batch: É um arquivo em lote utilizado para automatizar tarefas por técnicos e programadores. 
Basicamente é um arquivo de script que é executado sequencialmente pelo Prompt de 
comando.
BIOS: É uma sigla para Basic Input/Output System ou Sistema Básico de Entrada e Saída, 
sendo responsável por realizar a inicialização do hardware durante o processo de boot de um 
computador baseado no IBM PC. 
Dual-boot: É um sistema que permite a escolha de um entre dois sistemas operacionais 
instalados num mesmo microcomputador ao ser ligado.
Questão
reflexão
?
para
61/196
Reflita sobre a forma de desenvolvimento centrado na 
plataforma e de desenvolvimento multiplataforma. 
Quando você deverá se preocupar com esta questão, 
durante o projeto de um aplicativo híbrido?
62/196
Considerações Finais
• Tivemos uma pequena introdução sobre a instalação e configuração para a 
plataforma Android.
• Tivemos uma pequena introdução sobre a instalação e configuração para a 
plataforma iOS.
• Tivemos uma pequena introdução sobre a instalação e configuração para a 
plataforma Windows e Windows Phone.
• Tivemos uma primeira visão da estrutura de projeto utilizada pelo Apache 
Cordova e pelo Adobe PhoneGap.
Unidade 3 • Estrutura do Projeto e Configurações63/196
Referências 
ADOBE PhoneGap. Disponível em: <http://PhoneGap.com/>. Acesso em: 14 jul. 2016.
APACHE Cordova. Disponível em: <https://cordova.apache.org/>. Acesso em: 14 jul. 2016.
GATOL, R.; PATEL, Y. Beginning PhoneGap: Mobile Web Framework for JavaScript and HTML5. 
Editora Apress, 2012.
LOPES, S. Aplicações Mobile Híbridas com Cordova e PhoneGap. Editora Casa do Código, 
2016. (Série Caelum).
LUNNY, A. PhoneGap Beginner’s Guide. Editora Packt Publishing, 2011.
MYER, T. Beginning PhoneGap. Editora John Wesley & Sons, 2012.
WARGO, J. M. Apache Cordova 3 Programming. Editora Addison-Wesley, 2013. (Mobile 
Programming Series).
http://PhoneGap.com
https://cordova.apache.org/
64/196
1. Para utilizarmos a plataforma Android, devemos obrigatoriamente 
instalar o:
a) iOS SDK.
b) Android SDK.
c) Windows Phone SDK.
d) Mac OS SDK.
e) Dalvik SDK.
Questão 1
65/196
2. Na plataforma Windows, o Cordova WebViews utiliza-se de qual 
ferramenta como mecanismo de renderização?
a) Safari.
b) Opera.
c) Internet Explorer.
d) Ariadne.
e) Java.
Questão 2
66/196
3. Para utilizarmos a plataforma Windows Phone 8, precisamos de um 
computador com sistema operacional:
a) Windows 7 Home.
b) Windows XP.
c) Windows 95.
d) Windows 8 Pro de 64 bits.
e) Windows Vista.
Questão 3
67/196
4. Na plataforma iOS, além da instalação do iOS SDK e do Xcode, também 
devemos instalar:
a) Java e Swift.
b) Java e Objective-C.
c) HTML5, CSS3, JavaScript.
d) JavaScript, Java, Swift
e) ios-sim e ios-deploy.
Questão 4
68/196
5. Para a plataforma Android, além da instalação do JDK 7 ou superior, do 
Android SDK e de alguns pacotes do Android SDK, deve-se também:
a) configurar a BIOS.
b) configurar os AVDs.
c) instalar o Node.js.
d) adicionar as variáveis de ambiente JAVA_HOME, ANDROID_HOME e editar a variável PATH, 
incluindo o caminho para a pasta tools e platform-tools presente no Android SDK.
e) adicionar as variáveis de ambiente JAVASCRIPT_HOME, ANDROID_HOME e editar a variável 
PATH, incluindo o caminho para a pasta tools e platform-tools presente no Android SDK.
Questão 5
69/196
Gabarito
1. Resposta: B.
O Android SDK é o SDK oficial para o 
desenvolvimento Android.
2. Resposta: C. 
O Cordova WebViews utiliza o Internet 
Explorer 11 (Windows 8.1 e Windows Phone 
8.1) e Internet Explorer 10 (Windows Phone 
8) como seu mecanismo de renderização e 
para testar e depurar todo código web.
3. Resposta: D.
A versão Windows 8 Pro de 64 bits é 
necessária para rodar o emulador de 
dispositivo.
4. Resposta: E.
A ferramenta ios-sim permite executar 
aplicativos iOS no simulador iOS e a 
ferramenta ios-deploy permite executar 
aplicativos iOS no dispositivo iOS pela linha 
de comando.
5. Resposta: D.
É necessário configurar estas variáveis de 
ambiente, pois o Cordova CLI e o PhoneGap 
CLI, para poderem funcionar corretamente, 
fazem uso destas variáveis.
70/196
Unidade 4
Criando o Primeiro Aplicativo
Objetivos
1. Compreender o processo e os 
comandos necessários para a criação 
de aplicativo utilizando Cordova CLI.
2. Compreender o processo e os 
comandos necessários para a criação 
de aplicativo utilizando PhoneGap 
CLI.
3. Compreender o processo necessário 
para a criação de aplicativo utilizando 
PhoneGap Desktop.
Unidade 4 • Criando o Primeiro Aplicativo71/196
Introdução
Em todo desenvolvimento de aplicações, 
alguns fatores devem ser conhecidos e 
compreendidos por todos os profissionais 
que participam do projeto. Nos projetos de 
aplicações utilizando Apache Cordova ou 
Adobe PhoneGap não é diferente.
Nesses projetos, nossas aplicações não 
são meramente um conjunto de códigos 
em HTML5, CSS3 e JavaScript, como em 
um projeto Web. Nossas aplicações devem 
ter o design, o comportamento, o acesso 
a recursos nativos e bom desempenho, 
semelhantes ao encontrado nas aplicações 
nativas de suas respectivas plataformas.
Portanto, ao pensarmos em desenvolver 
utilizando Apache Cordova ou Adobe 
PhoneGap, nossas aplicações devem seguir 
o conceito de Single Page Applications, 
ou seja, um único arquivo HTML carrega 
todo o conteúdo e todas as telas, sem 
a necessidade de navegação externa 
(para realizarmos isso, temos diversos 
frameworks, como AngularJS, Ionic, 
Backbone.js, entre outros). Utilizar 
adequadamente os diversos plugins, para 
que o usuário tenha o acesso adequado 
aos recursos nativos, ou seja, uma boa 
integração aos recursos da plataforma. Em 
relação ao desempenho, devemos atentar 
à resposta ao toque, ao uso de animações, 
ao processamento pesado de dados e ao 
conceito de Offline-First.
Unidade 4 • Criando o Primeiro Aplicativo72/196
Para saber mais
Single Page Application (SPA) é um modelo de 
desenvolvimento de aplicações Web e móvel que 
tem como ponto importante codificar menos no 
lado servidor e mais no lado cliente, ou seja, a 
aplicação estará contida toda ou quase toda no 
lado cliente sob o navegador. 
O conceito de Offline-First é utilizado quando 
temos que considerar que as conexões com a 
internet podem ser falhas ou inexistentes, e 
nosso aplicativo terá que funcionar off-line. 
Dessa maneira, escrevemos nossoaplicativo 
como se ele não tivesse conexão com a internet 
e, uma vez funcionando off-line, adicionamos 
funcionalidades de rede para que o aplicativo 
possa realizar mais quando estiver on-line.
Feito isso, podemos passar ao processo 
de construção propriamente dito, de 
nossas aplicações utilizando os comandos 
fornecidos pelo Cordova CLI, PhoneGap CLI 
ou pelo PhoneGap Desktop, dependendo 
de nossas necessidades de projeto.
1. Criando Aplicação Usando 
Cordova CLI
Neste item, você conhecerá o processo e 
os comandos necessários para criar seu 
primeiro aplicativo híbrido multiplataforma 
(HTML5, CSS3 e JavaScript) utilizando o 
Cordova CLI.
Unidade 4 • Criando o Primeiro Aplicativo73/196
A. Criar o projeto
• Abra um terminal e vá para o 
diretório onde você deseja criar seu 
projeto e manter o seu código-fonte. 
• Digite o comando: 
cordova create ola com.examplo.ola 
OlaMundo <enter>
O comando cordova create irá criar 
a estrutura de diretórios necessária 
para seu aplicativo cordova. Por 
padrão, este comando também 
gerará o esqueleto de um aplicativo 
baseado na web (Hello World) cuja 
página inicial encontra-se em \www\
index.html.
Este comando possui três 
argumentos básicos importantes:
a) Pasta da aplicação
b) Identificador – nome do pacote 
(deve ser único)
c) Título da aplicação
Todos os comandos subsequentes devem 
ser executados dentro do diretório do 
projeto, ou de todas as subpastas.
B. Adicionar plataformas
Por padrão, não existe nenhuma 
plataforma instalada; dessa forma, 
devemos adicionar suporte para todas as 
plataformas que desejamos utilizar para o 
projeto.
• No terminal, digite:
Unidade 4 • Criando o Primeiro Aplicativo74/196
cd Ola <enter>
• Adicionar as plataformas que 
você deseja. Vamos adicionar as 
plataformas “browser” e “android”. 
No terminal, digite:
cordova platform add browser –save 
<enter>
cordova platform add android –save 
<enter>
• Para verificar o seu atual conjunto de 
plataformas, digite no terminal:
cordova platform ls <enter>
Uma observação importante em relação ao 
\platforms\diretórios: não editar qualquer 
arquivo. Esses arquivos são normalmente 
sobrescritos quando solicitada a 
construção ou plugins são reinstalados. 
C. Executar o aplicativo
Pela plataforma Browser
• No terminal, digite:
cordova run browser <enter>
Este comando irá abrir uma instância 
do seu navegador Google Chrome 
e mostrará o aplicativo cordova, 
conforme a Figura 1.
Unidade 4 • Criando o Primeiro Aplicativo75/196
Figura 1 – Executando cordova no browser
Fonte: O autor.
Unidade 4 • Criando o Primeiro Aplicativo76/196
Pela plataforma Android
Para que você possa executar o seu aplicativo 
no Android, será necessário ter um emulador 
de dispositivo Android ou um dispositivo real. 
Executando pelo emulador
Para emular um dispositivo Android, utilizar o 
AVD Manager, localizado na pasta onde está 
instalado o seu Android SDK, ou utilizar um 
emulador de terceiros, como o Genymotion.
• Abra o AVD Manager (ou outra 
ferramenta) e inicie um emulador.
• No terminal, digite o comando:
cordova emulate android <enter>
Este comando irá gerar uma versão 
debug do arquivo .apk, instalá-lo e 
executá-lo dentro do dispositivo virtual 
Android, conforme a Figura 2.
Figura 2 – Executando cordova no emulador Android
Fonte: O autor.
Unidade 4 • Criando o Primeiro Aplicativo77/196
Executando pelo dispositivo real
Para utilizar um dispositivo real com 
Android, será necessário realizar duas 
operações no aparelho: habilitar a opção 
Fontes Desconhecidas, na Seção Segurança, 
e habilitar a opção Depuração de USB, na 
Seção Desenvolvedor.
• Com o dispositivo Android conectado 
ao seu computador via USB,
• No terminal, digite o comando:
cordova run android <enter>
Este comando irá gerar uma versão debug 
do arquivo .apk, instalá-lo e executá-
lo dentro do dispositivo real Android, 
conforme a Figura 3.
Figura 3 – Executando cordova no dispositivo Android
Fonte: O autor.
Unidade 4 • Criando o Primeiro Aplicativo78/196
D. Construir o Aplicativo
• No terminal, para construir para 
todas as plataformas, digite o 
comando:
cordova build <enter> 
• No terminal, para construir para 
uma plataforma específica, digite o 
comando:
cordova build android<enter> 
Por padrão, ao executar o comando cordova 
build ou cordova build <nomedaplataforma>, 
os scripts do Cordova CLI geram uma 
versão debug do arquivo .apk; sendo 
assim, este arquivo é utilizado pelo 
desenvolvedores e não pelo usuário 
final. Para gerar uma versão final de seu 
aplicativo, deve-se seguir o seguinte passo:
• No terminal, digite o comando:
cordova build android --release<enter> 
Um ponto importante a observar é que 
todos os comandos realizados para 
criar um projeto, adicionar plataformas, 
executar e construir vistos são os mesmos 
para qualquer plataforma.
2. Criando Aplicação Usando 
PhoneGap CLI
Neste item, você conhecerá o processo e 
os comandos necessários para criar seu 
primeiro aplicativo híbrido multiplataforma 
(HTML5, CSS3 e JavaScript) utilizando o 
PhoneGap CLI. Basicamente, o processo de 
criação do projeto, adição de plataformas e 
execução é semelhante ao do Cordova CLI, 
Unidade 4 • Criando o Primeiro Aplicativo79/196
tendo como principal diferença a execução 
em aparelhos reais, pois nestes aparelhos 
é necessária a instalação do PhoneGap 
Developer App, como veremos mais 
adiante.
A. Criar o projeto
• Abra um terminal e vá para o 
diretório onde você deseja criar seu 
projeto e manter o seu código-fonte. 
• Digite o comando: 
PhoneGap create ola1 com.examplo.
ola1 OlaMundo <enter>
O comando PhoneGap create irá criar 
a estrutura de diretórios necessários 
para seu aplicativo PhoneGap. Por 
padrão, este comando também 
gerará o esqueleto de um aplicativo 
baseado na web (Hello World) cuja 
página inicial encontra-se em \www\
index.html.
Este comando possui três 
argumentos básicos importantes:
a) Pasta da aplicação
b) Identificador – nome do pacote 
(deve ser único)
c) Título da aplicação
Todos os comandos subsequentes devem 
ser executados dentro do diretório do 
projeto, ou de todas as subpastas.
Unidade 4 • Criando o Primeiro Aplicativo80/196
B. Adicionar plataformas
Por padrão, não existe nenhuma 
plataforma instalada; dessa forma, 
devemos adicionar suporte para todas as 
plataformas que desejamos utilizar para o 
projeto.
• No terminal, digite:
cd Ola1 <enter>
• Adicionar as plataformas que 
você deseja. Vamos adicionar as 
plataformas “browser” e “android”. 
No terminal, digite:
PhoneGap platform add browser –save 
<enter>
PhoneGap platform add android –save 
<enter>
• Para verificar o seu atual conjunto de 
plataformas, digite no terminal:
PhoneGap platform ls <enter>
Uma observação importante em relação ao 
\platforms\diretórios: não editar qualquer 
arquivo. Esses arquivos são normalmente 
sobrescritos quando solicitada a 
construção ou plugins são reinstalados. 
C. Executar o aplicativo
Pela plataforma Browser
• No terminal, digite:
PhoneGap run browser <enter>
Este comando irá abrir uma instância 
do seu navegador Google Chrome 
e mostrará o aplicativo PhoneGap, 
conforme a Figura 4.
Unidade 4 • Criando o Primeiro Aplicativo81/196
Figura 4 – Executando PhoneGap no browser
Fonte: O autor.
Unidade 4 • Criando o Primeiro Aplicativo82/196
Pela plataforma Android
Para que você possa executar o seu aplicativo 
no Android, será necessário ter um emulador 
de dispositivo Android ou um dispositivo real. 
Executando pelo emulador
Para emular um dispositivo Android, utilizar o 
AVD Manager, localizado na pasta onde está 
instalado o seu Android SDK, ou utilizar um 
emulador de terceiros, como o Genymotion.
• Abra o AVD Manager (ou outra 
ferramenta) e inicie um emulador.
• No terminal, digite o comando:
PhoneGap emulate android <enter>
Este comando irá gerar uma versão 
debug do arquivo .apk, instalá-lo e 
executá-lo dentro do dispositivo virtual 
Android, conforme a Figura 5.
Figura5 – Executando PhoneGap no emulador Android
Fonte: O autor.
Unidade 4 • Criando o Primeiro Aplicativo83/196
Executando pelo dispositivo real
Para utilizar um dispositivo real com 
Android, será necessário realizar duas 
operações no aparelho: habilitar a opção 
Fontes Desconhecidas, na Seção Segurança, 
e habilitar a opção Depuração de USB, na 
Seção Desenvolvedor.
Para que você possa visualizar o seu 
aplicativo em um dispositivo móvel, 
primeiro deve instalar o PhoneGap 
Developer App no dispositivo, para 
que dessa forma seja possível o 
emparelhamento deste com o PhoneGap 
CLI, sem a necessidade de instalar 
plataforma SDK, registrar dispositivos ou 
compilar código. 
Isso é possível utilizando o comando 
PhoneGap serve, que inicia um pequeno 
servidor web para hospedar seu projeto e 
retorna o endereço do servidor para você 
emparelhar com o PhoneGap Developer 
App em execução no seu dispositivo móvel. 
• Verifique se o seu dispositivo e o 
computador estão na mesma rede, 
antes de continuar. 
• No diretório do projeto, digite o 
comando PhoneGap serve. Você 
receberá o endereço de servidor, 
informando que o aplicativo 
está sendo hospedado na saída 
recebida no console (por exemplo: 
192.168.1.11:3000):
Unidade 4 • Criando o Primeiro Aplicativo84/196
 PhoneGap serve
[PhoneGap] starting app server...
[PhoneGap] listening on 
192.168.1.11:3000
[PhoneGap]
[PhoneGap] ctrl-c to stop the server
[PhoneGap]
• Com o PhoneGap Developer App em 
execução no seu dispositivo móvel, 
digite o endereço do servidor na tela 
principal e toque em Conectar-se. 
Uma vez conectado, ele carrega o seu 
aplicativo na tela principal, conforme 
a Figura 6.
Figura 6 – Executando PhoneGap no dispositivo Android
Fonte: O autor.
Unidade 4 • Criando o Primeiro Aplicativo85/196
D. Construir o Aplicativo
• No terminal, para construir para 
todas as plataformas, digite o 
comando:
PhoneGap build <enter> 
• No terminal, para construir para 
uma plataforma específica, digite o 
comando:
PhoneGap build android<enter> 
Por padrão, ao executar o comando 
PhoneGap build ou PhoneGap build 
<nomedaplataforma>, os scripts do 
PhoneGap CLI geram uma versão debug 
do arquivo .apk; sendo assim, este arquivo 
é utilizado pelos desenvolvedores e não 
pelo usuário final, como já informado 
anteriormente. Para gerar uma versão final 
de seu aplicativo, deve-se seguir o seguinte 
passo:
• No terminal, digite o comando:
PhoneGap build android 
--release<enter> 
Um ponto importante a observar é que 
todos os comandos realizados para 
criar um projeto, adicionar plataformas, 
executar e construir vistos são os mesmos 
para qualquer plataforma suportada pelo 
PhoneGap CLI.
3. Criando Aplicação Usando 
PhoneGap Desktop
Com a utilização do PhoneGap Desktop, 
Unidade 4 • Criando o Primeiro Aplicativo86/196
você está pronto para criar seu primeiro 
projeto PhoneGap com a capacidade 
de executá-lo em vários dispositivos e 
sistemas operacionais em apenas algumas 
etapas.
A. Criar o projeto
A ferramenta PhoneGap Desktop inclui um 
projeto do Hello World. E com este projeto 
que iremos mostrar os passos necessários 
para criar um projeto nesta ferramenta.
• Iniciar o PhoneGap Desktop, que 
ficará conforme a Figura 7.
Figura 7 – Tela inicial do PhoneGap Desktop
Fonte: O autor.
Unidade 4 • Criando o Primeiro Aplicativo87/196
• Clicar no sinal de mais (+) e selecionar 
Criar novo projeto PhoneGap, 
conforme a Figura 8.
Figura 8 – Criar novo projeto no PhoneGap Desktop
Fonte: O autor.
Unidade 4 • Criando o Primeiro Aplicativo88/196
• Na tela que vai aparecer (Figura 
9), inserir informações sobre o seu 
projeto. Escolha o caminho, no seu 
disco rígido, onde você deseja criar 
o projeto, um nome designado e um 
identificador (opcional). Uma vez 
que as informações tenham sido 
inseridas, clicar no botão verde Create 
Project.
Figura 9 – Informações de configuração do 
novo projeto no PhoneGap Desktop
Fonte: O autor.
Unidade 4 • Criando o Primeiro Aplicativo89/196
Lembre-se que o campo ID também é 
conhecido como o identificador de pacote 
para o Android e para o iOS.
• Aparecerá uma tela (Figura 10) 
indicando que o projeto foi criado. 
Ao clicar no botão de play (verde), 
o projeto será ativado e colocado 
em execução, conforme mostra a 
Figura 11. Você verá um endereço do 
servidor.
Apenas um projeto será ativo e em 
execução a qualquer momento.
Figura 10 – Tela mostrando que o novo projeto 
no PhoneGap Desktop foi criado
Fonte: O autor.
Unidade 4 • Criando o Primeiro Aplicativo90/196
Figura 11 – Tela mostrando que o servidor está sendo executado
Fonte: O autor.
B. Executar o aplicativo
Pela plataforma Browser
• Na plataforma browser, somente pelo 
PhoneGap CLI. No terminal, dentro 
do diretório de sua aplicação, digite o 
comando:
PhoneGap run browser <enter>
Pela plataforma Android
Para utilizar um dispositivo real com 
Android, será necessário realizar duas 
operações no aparelho: habilitar a opção 
Fontes Desconhecidas, na Seção Segurança, 
e habilitar a opção Depuração de USB, na 
Seção Desenvolvedor.
Para que você possa visualizar o seu 
aplicativo em um dispositivo móvel, 
Unidade 4 • Criando o Primeiro Aplicativo91/196
primeiro deve instalar o PhoneGap 
Developer App no dispositivo. 
• Na etapa anterior, criamos um 
projeto e o colocamos em execução, 
conforme visto na Figura 11.
• Com o PhoneGap Developer App em 
execução no seu dispositivo móvel, 
digite o endereço do servidor na tela 
principal e toque em Conectar-se. 
Uma vez conectado, ele carrega o seu 
aplicativo na tela principal.
C. Construir o Aplicativo
Quando se utiliza o PhoneGap Desktop, há 
duas opções disponíveis para construir e 
empacotar as suas aplicações:
• Construir o pacote localmente 
usando o PhoneGap CLI;
ou
• Usar o Adobe PhoneGap Build.
Com isso, concluímos uma visão básica de 
como criar, executar e visualizar aplicações 
desenvolvidas pelo Cordova CLI, pelo 
PhoneGap CLI e pelo PhoneGap Desktop.
http://www.microsofttranslator.com/bv.aspx?from=en&to=pt&a=http%3A%2F%2Fbuild.phonegap.com%2F
Unidade 4 • Criando o Primeiro Aplicativo92/196
Glossário
Desempenho: Modo como o aplicativo se comporta tendo em conta sua eficiência (tempo de 
execução e recursos envolvidos).
Servidor Web: É um software responsável pela publicação de documentos, imagens e outros 
componentes que sejam acessados por um cliente através de um navegador. 
Debug: É o processo de depuração de um software, ou seja, de encontrar e reduzir defeitos num 
aplicativo de software.
Questão
reflexão
?
para
93/196
Reflita sobre o desenvolvimento de aplicações híbridas 
utilizando a ferramenta Adobe PhoneGap Desktop 
e sugira uma ou mais situações em que este tipo de 
abordagem pode ser utilizado e ser útil para projetos de 
aplicações.
94/196
Considerações Finais
• Tivemos uma visão básica dos principais comandos para criação, execução 
e visualização de aplicativos utilizando o Cordova CLI.
• Tivemos uma visão básica dos principais comandos para criação, execução 
e visualização de aplicativos utilizando o PhoneGap CLI.
• Tivemos uma visão básica dos principais comandos para criação, execução 
e visualização de aplicativos utilizando o PhoneGap Desktop.
• Tivemos uma visão de conceitos básicos e importantes que devem ser 
levados em consideração quando da construção de aplicativos móveis 
híbridos multiplataforma.
Unidade 4 • Criando o Primeiro Aplicativo95/196
Referências
ADOBE PhoneGap. Disponível em: <http://PhoneGap.com/>. Acesso em: 14 jul. 2016.
APACHE Cordova. Disponível em: <https://cordova.apache.org/>. Acesso em: 14 jul. 2016.
GATOL, R.; PATEL, Y. Beginning PhoneGap: Mobile Web Framework for JavaScript and HTML5. 
Editora Apress, 2012.
LOPES, S. Aplicações Mobile Híbridas com Cordova e PhoneGap. Editora Casa do Código, 
2016. (Série Caelum).
LUNNY, A. PhoneGap Beginner’s Guide. Editora Packt Publishing, 2011.
MYER, T. Beginning PhoneGap. Editora John Wesley & Sons, 2012.
WARGO,J. M. Apache Cordova 3 Programming. Editora Addison-Wesley, 2013. (Mobile 
Programming Series).
http://PhoneGap.com
https://cordova.apache.org/
96/196
1. Para criamos um projeto utilizando Cordova CLI, utilizamos o seguinte 
comando:
a) PhoneGap create <pasta> <identificador> <titulodaaplicação>.
b) cordova create <pasta> <identificador> <titulodaaplicação>.
c) PhoneGap run <pasta> <identificador> <titulodaaplicação>.
d) cordova run <pasta> <identificador> <titulodaaplicação>.
e) cordova platform add create <pasta> <identificador> <titulodaaplicação>.
Questão 1
97/196
2. Para executar um aplicativo utilizando PhoneGap CLI em um 
dispositivo real, devemos utilizar o comando:
a) PhoneGap run.
b) cordova run.
c) PhoneGap serve.
d) PhoneGap list.
e) PhoneGap emulate.
Questão 2
98/196
3. Uma condição necessária para que um aplicativo utilizando PhoneGap 
CLI ou PhoneGap Desktop possa executar em um dispositivo real é a de 
que este dispositivo esteja:
a) conectado ao computador por um cabo USB.
b) na mesma rede de computadores que o computador da aplicação.
c) desligado.
d) sem conexão.
e) sem cartão de memória.
Questão 3
99/196
4. Para desenvolver aplicações mobile multiplataforma utilizando 
Cordova CLI, é suficiente e necessário conhecer as linguagens:
a) HTML, Java e CSS.
b) HTML5, CSS3 e Java.
c) HTML5, CSS3 e JavaScript.
d) JavaScript, Java e Swift.
e) Java, CSS3 e HTML5.
Questão 4
100/196
5. Quando crio um projeto utilizando PhoneGap Desktop, qual é o 
comando para executá-lo na plataforma Browser?
a) PhoneGap browser.
b) cordova browser.
c) PhoneGap emulate.
d) cordova emulate.
e) PhoneGap run browser.
Questão 5
101/196
Gabarito
1. Resposta: B.
Este é o comando correto para a criação 
de projetos utilizando Cordova CLI: 
cordova create <pasta> <identificador> 
<titulodaaplicação>.
2. Resposta: C.
Este é o comando correto para a criação 
de projetos utilizando PhoneGap CLI: 
PhoneGap serve.
3. Resposta: B.
O dispositivo real deve pertencer à mesma 
rede de computadores que o computador 
da aplicação.
4. Resposta: C.
Para o desenvolvimento de aplicações 
multiplataforma utilizando Cordova CLI, é 
suficiente o conhecimento da linguagem 
de marcação HTML5, da linguagem de 
folha de estilos CSS3 e da linguagem de 
programação interpretada JavaScript.
5. Resposta: E.
Este é o comando correto para a criação 
de projetos utilizando PhoneGap CLI: 
PhoneGap run browser.
102/196
Unidade 5
Funcionalidades dos Plugins
Objetivos
1. Compreender o conceito de plugins 
no Cordova.
2. Compreender o processo instalação 
dos plugins.
3. Compreender as diferenças e 
peculiaridades dos plugins em 
relação às plataformas.
Unidade 5 • Funcionalidades dos Plugins103/196
Introdução
Plugins são parte integrante do Cordova, 
fornecem uma interface para Cordova e 
componentes nativos se comunicarem 
uns com os outros, permitindo que código 
nativo possa ser invocado utilizando 
JavaScript.
O projeto Apache Cordova mantém um 
conjunto de plugins Core (Núcleo) Plugins. 
Esses plugins fornecem ao seu aplicativo 
a capacidade de acessar os recursos 
do dispositivo, como bateria, câmera, 
contatos, etc.
Existem também vários plugins de terceiros 
que fornecem funcionalidades adicionais 
para características não necessariamente 
disponíveis em todas as plataformas.
Veremos a seguir os principais plugins do 
Apache Cordova, que também podem ser 
utilizados em projetos desenvolvidos em 
Adobe PhoneGap.
1. Plugin cordova-plugin-
battery-status
Este plugin fornece uma implementação 
de uma versão antiga da API Battery Status 
Events. Fornece três eventos para o objeto 
window: 
• batterystatus
• batterycritical
• batterylow
Unidade 5 • Funcionalidades dos Plugins104/196
Instalação 
cordova plugin add cordova-plugin-battery-
status 
Status 
Todos os eventos deste plugin devem 
retornar um objeto com as seguintes 
propriedades: 
• level: A porcentagem de carga da 
bateria (0-100) (Number);
• isPlugged: Um booleano que indica 
se o dispositivo está conectado 
(Boolean). 
Evento batterystatus: Retorna um objeto 
que contém o estado da bateria. As 
plataformas suportadas são: 
• Amazon Fire OS;
• iOS;
• Android;
• BlackBerry 10;
• Windows Phone 7 e 8;
• Windows (Windows Phone 8.1 
somente);
• Firefox OS;
• Browser (Chrome, Firefox, Opera).
Evento batterylow: Dispara quando a 
porcentagem de carga da bateria atingir 
o limite de carga baixa. Este valor limite 
é específico do dispositivo. Retorna um 
objeto que contém o estado da bateria. As 
plataformas suportadas são:
Unidade 5 • Funcionalidades dos Plugins105/196
• Amazon Fire OS;
• iOS;
• Android;
• BlackBerry 10;
• Firefox OS;
• Windows (Windows Phone 8.1 
somente);
• Browser (Chrome, Firefox, Opera).
Evento batterycritical: inicia quando a 
porcentagem de carga da bateria atingir 
o limite de carga crítica. Este valor limite 
é específico do dispositivo. Retorna um 
objeto que contém o estado da bateria. As 
plataformas suportadas são: 
• Amazon Fire OS;
• iOS;
• Android;
• BlackBerry 10;
• Firefox OS;
• Windows (Windows Phone 8.1 
somente);
• Browser (Chrome, Firefox, Opera).
2. Plugin cordova-plugin-
camera 
Este plugin define um objeto global 
navigator.camera, que fornece uma API 
para tirar fotografias e para a escolha 
de imagens da biblioteca de imagens do 
Unidade 5 • Funcionalidades dos Plugins106/196
3. Plugin cordova-plugin-
console
Este plugin define um objeto de console 
global. Embora o objeto esteja no 
escopo global, seus recursos não estarão 
disponíveis até a ocorrência do evento 
deviceready.
Instalação 
cordova plugin add cordova-plugin-console
4. Plugin cordova-plugin-
contacts
Este plugin define um objeto global 
navigator.contacts, que fornece acesso ao 
banco de dados de contatos do dispositivo. 
Embora o objeto esteja ligado ao navigator, 
sistema. Embora o objeto esteja ligado 
ao navigator, ele não está disponível até a 
ocorrência do evento deviceready.
Instalação
Requer Cordova 5.0 ou superior:
cordova plugin add cordova-plugin-camera
Versões anteriores podem ser instaladas 
usando:
cordova plugin add org.apache.cordova.
camera
Também podem ser instaladas diretamente 
do repositório:
cordova plugin add https://github.com/
apache/cordova-plugin-camera.git
Unidade 5 • Funcionalidades dos Plugins107/196
ele não está disponível até a ocorrência do 
evento deviceready.
Instalação 
Requer Cordova 5.0 ou superior:
cordova plugin add cordova-plugin-contacts
Versões anteriores podem ser instaladas 
usando:
cordova plugin add org.apache.cordova.
contacts
Também podem ser instaladas diretamente 
do repositório:
cordova plugin add https://github.com/
apache/cordova-plugin-contacts.git
5. Plugin cordova-plugin-device 
Este plugin define um objeto global device, 
que descreve o hardware e software do 
dispositivo. Embora o objeto esteja em um 
escopo global, ele não está disponível até a 
ocorrência do evento deviceready. 
Instalação 
cordova plugin add cordova-plugin-device
Propriedades
• device.cordova
• device.model
• device.platform
• device.uuid
• device.version
Unidade 5 • Funcionalidades dos Plugins108/196
Instalação 
cordova plugin add cordova-plugin-device-
motion 
Plataformas suportadas 
• Amazon Fire OS;
• Android;
• BlackBerry 10;
• Browser;
• Firefox OS;
• iOS;
• Tizen;
• Windows Phone 8;
• Windows.
• device.manufacturer
• device.isVirtual
• device.serial
6. Plugin cordova-plugin-
device-motion 
Este plugin fornece acesso ao acelerômetro 
do dispositivo. É um sensor de movimento 
que detecta a alteração de movimento em 
relação à orientação do dispositivo atual, 
em três dimensões ao longo dos eixos x, y 
e z. O acesso é através de um objeto global 
navigator.accelerometer. 
Embora o objeto esteja ligado ao navigator, 
ele não está disponível até a ocorrência do 
evento deviceready. 
Unidade 5 • Funcionalidades dos Plugins109/196
7. Plugin cordova-plugin-
device-orientation