Aplicativos Mobile Multiplataforma

Prévia do material em texto

Aplicativos Mobile Multiplataforma
W
BA
01
77
_v
1.
0
2/215
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 04
Unidade 1: Introdução ao PhoneGap e Cordova 06
Assista a suas aulas 24
Unidade 2: Instalação PhoneGap e Cordova 32
Assista a suas aulas 48
Unidade 3: Estrutura do Projeto e Configurações 55
Assista a suas aulas 72
Unidade 4: Criando o Primeiro Aplicativo 79
Assista a suas aulas 108
2/215
3/2153
Unidade 5: Funcionalidades dos Plugins 115
Assista a suas aulas 140
Unidade 6: Funcionalidades Extras 147
Assista a suas aulas 165
Unidade 7: Armazenamento Local 172
Assista a suas aulas 189
Unidade 8: Armazenamento Web 196
Assista a suas aulas 208
Sumário
Aplicativos Mobile Multiplataforma
Autor: César Torres Fernandes
Como citar este documento: FERNANDES, César Torres. Aplicativos Mobile Multiplataforma. Valinhos, 
2016.
4/215
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.
5/215
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.
6/215
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 Cordova7/215
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 Cordova8/215
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 Cordova9/215
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 
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.
Link
O sistema operacional Android é utilizado em 
mais de 1 bilhão de smartphones e tablets. 
Cada versão do Android recebe o nome de uma 
sobremesa. Disponível em: <https://www.
android.com/intl/pt-BR_br/history/>. Acesso 
em: 10 jul. 
Link
O sistema operacional móvel iOS é o mais 
avançado do mundo e é a base do iPhone, iPad 
e iPod touch. Ele vem com um conjunto de 
apps e recursos para você fazer as tarefas mais 
comuns de um jeito intuitivo, simples e divertido. 
Disponível em: <http://www.apple.com/br/
ios/>. Acesso em: 10 jul. 2016.
https://www.android.com/intl/pt-BR_br/history
https://www.android.com/intl/pt-BR_br/history
http://www.apple.com/br/ios
http://www.apple.com/br/ios
Unidade 1 • Introdução ao PhoneGap e Cordova10/215
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 
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çõesWeb
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 
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.
Unidade 1 • Introdução ao PhoneGap e Cordova11/215
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 
complexidade e 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.
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 Cordova12/215
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 
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 
Unidade 1 • Introdução ao PhoneGap e Cordova13/215
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.
Link
A missão da Apache Software Foundation (ASF) 
é fornecer software para o bem público. Faz isso 
por meio da prestação de serviços e suporte para 
muitas comunidades de projeto de software 
que optam por se juntar à ASF. Disponível em: 
<http://www.apache.org/foundation/>. 
Acesso em: 11 jul. 2016.
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 
http://www.apache.org/foundation
Unidade 1 • Introdução ao PhoneGap e Cordova14/215
de produtos, possibilitando aos antigos 
desenvolvedores da Nitobi uma estrutura 
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 
Unidade 1 • Introdução ao PhoneGap e Cordova15/215
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 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 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 Cordova16/215
Para construir um aplicativo 
multiplataforma utilizando o Apache 
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 possibilidadede, 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.
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 Cordova17/215
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 
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 implementadas em 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 
Unidade 1 • Introdução ao PhoneGap e Cordova18/215
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 
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.
Unidade 1 • Introdução ao PhoneGap e Cordova19/215
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 Cordova20/215
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
21/215
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.
22/215
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 Cordova23/215
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).
24/215
Assista a suas aulas
Aula 1 - Tema: Introdução ao phonegap / 
cordova - Bloco I
Disponível em: <http://fast.player.liquidplatform.com/
pApiv2/embed/dbd3957c747affd3be431606233e0f1d/
27f4a991d7e7047d05e32608b588e0d5>.
Aula 1 - Tema: Introdução ao phonegap / cordova 
- Bloco II
Disponível em: <http://fast.player.liquidplatform.com/
pApiv2/embed/dbd3957c747affd3be431606233e0f-
1d/1668bceeab6bab1a4c4f092c9efd556c>.
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/27f4a991d7e7047d05e32608b588e0d5
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/27f4a991d7e7047d05e32608b588e0d5
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/27f4a991d7e7047d05e32608b588e0d5
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/1668bceeab6bab1a4c4f092c9efd556c
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/1668bceeab6bab1a4c4f092c9efd556c
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/1668bceeab6bab1a4c4f092c9efd556c
25/215
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
26/215
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
27/215
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
28/215
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
29/215
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 noprocesso 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
30/215
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.
31/215
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
32/215
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 Cordova33/215
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 conjunto de 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 Cordova34/215
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 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 Cordova35/215
Para o Android:
• Instalar o JDK 7 ou superior.
• Instalar o Android SDK ou o Android 
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.
Link
O Android Studio é a IDE oficial para a 
plataforma Android. Disponível em: <https://
www.android.com/intl/pt-BR_br/history/>. 
Acesso em: 11 jul. 2016.
https://www.android.com/intl/pt-BR_br/history/
https://www.android.com/intl/pt-BR_br/history/
Unidade 2 • Instalação PhoneGap e Cordova36/215
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.
Link
O Xcode é a IDE para a plataforma iOS. Disponível 
em: <https://developer.apple.com/xcode/
ide/>. Acesso em: 12 jul. 2016.
• Para testar, você pode utilizar os 
emuladores presentes no Visual 
Studio e também ter dispositivos 
reais que devem ser registrados na 
Microsoft.
• Para publicar, será necessária uma 
conta de desenvolvedor paga.
Link
O Visual Studio é um ambiente de 
desenvolvimento integrado para a criação de 
aplicativos para Windows, Android e iOS, de 
aplicativos Web e serviços de nuvem. Disponível 
em: <https://www.visualstudio.com/>. 
Acesso em: 12 jul. 2016.
https://developer.apple.com/xcode/ide/
https://developer.apple.com/xcode/ide/
https://www.visualstudio.com
Unidade 2 • Instalação PhoneGap e Cordova37/215
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 (<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, OS X e Linux:
node –v <enter> 
Este comando confirmará a versão 
instalada do Node.js.
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.
https://nodejs.org/en/download
https://nodejs.org/en/download
Unidade 2 • Instalação PhoneGap e Cordova38/215
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 
desenvolvimento: uma pelo PhoneGap 
Desktop e outra pelo PhoneGap CLI.
Unidade 2 • Instalação PhoneGap e Cordova39/215
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 Cordova40/215
• 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 Cordova41/215
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.
http://PhoneGap.com/products/
http://PhoneGap.com/products/
http://PhoneGap.com/products/
http://PhoneGap.com/products/
Unidade 2 • Instalação PhoneGap e Cordova42/215
3. Arrastar e soltar o aplicativo na pasta 
de Aplicativos do seu Mac.
4. Abrir o aplicativo PhoneGap 
Desktop.
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:
• iOS (<https://itunes.apple.com/
app/id843536693>).
• Android (<https://play.google.
com/store/apps/details?id=com.
adobe.PhoneGap.app>).
• Windows (<http://www.
windowsphone.com/en-
us/store/app/PhoneGap-
developer/5c6a2d1e-4fad-4bf8-
aaf7-71380cc84fe3>).
https://itunes.apple.com/app/id843536693
https://itunes.apple.com/app/id843536693
https://play.google.com/store/apps/details?id=com.adobe.PhoneGap.app
https://play.google.com/store/apps/details?id=com.adobe.PhoneGap.app
https://play.google.com/store/apps/details?id=com.adobe.PhoneGap.app
http://www.windowsphone.com/en-us/store/app/PhoneGap-developer/5c6a2d1e-4fad-4bf8-aaf7-71380cc84fe3
http://www.windowsphone.com/en-us/store/app/PhoneGap-developer/5c6a2d1e-4fad-4bf8-aaf7-71380cc84fe3
http://www.windowsphone.com/en-us/store/app/PhoneGap-developer/5c6a2d1e-4fad-4bf8-aaf7-71380cc84fe3
http://www.windowsphone.com/en-us/store/app/PhoneGap-developer/5c6a2d1e-4fad-4bf8-aaf7-71380cc84fe3
http://www.windowsphone.com/en-us/store/app/PhoneGap-developer/5c6a2d1e-4fad-4bf8-aaf7-71380cc84fe3
Unidade 2 • Instalação PhoneGap e Cordova43/215
2. Toque no ícone do aplicativo 
PhoneGap Developer de sua tela para 
abri-lo.
Unidade 2 • Instalação PhoneGap e Cordova44/215
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
45/215
Em relação à plataforma iOS, será que é possível 
desenvolver aplicações sem um computador Mac?
46/215
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 Cordova47/215
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/
48/215
Assista a suas aulas
Aula 2 - Tema: Instalação phonegap / cordova | 
Bloco I
Disponível em: <http://fast.player.liquidplatform.com/
pApiv2/embed/dbd3957c747affd3be431606233e0f1d/
0372c7f280e20ba8558e9c4498a957a8>.
Aula 2 - Tema: Instalação phonegap / cordova | 
Bloco II
Disponível em: <http://fast.player.liquidplatform.com/
pApiv2/embed/dbd3957c747affd3be431606233e0f1d/
eb5410b25de89b8e34bbb76e92106787>.
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/0372c7f280e20ba8558e9c4498a957a8
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/0372c7f280e20ba8558e9c4498a957a8http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/0372c7f280e20ba8558e9c4498a957a8
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/eb5410b25de89b8e34bbb76e92106787
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/eb5410b25de89b8e34bbb76e92106787
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/eb5410b25de89b8e34bbb76e92106787
49/215
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
50/215
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.
51/215
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.
52/215
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>.
53/215
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>.
54/215
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.
55/215
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ções56/215
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ções57/215
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ções58/215
• 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 seguintes variá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ções59/215
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 
Link
O Android Virtual Device Manager (AVD 
Manager) permite definir as características de 
um dispositivo (Android phone, tablet, Android 
Wear ou Android TV) que deseja simular no 
emulador Android. O AVD Manager auxiliar na 
criação e no gerenciamento de AVDs. Disponível 
em: <https://developer.android.com/studio/
run/managing-avds.html>. Acesso em: 14 jul. 
2016.
https://developer.android.com/studio/run/managing-avds.html
https://developer.android.com/studio/run/managing-avds.html
Unidade 3 • Estrutura do Projeto e Configurações60/215
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, iPadPro, iPad Mini, iPad Mini 2, iPad Mini 
3, iPod Touch 5ª geração e iPod Touch 6ª 
geração ou superior.
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:
Unidade 3 • Estrutura do Projeto e Configurações61/215
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
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. 
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ções62/215
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) 
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ções63/215
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). 
Link
VMware Fusion 8 é a maneira mais fácil, mais 
rápida e confiável para executar aplicativos 
Windows em um Mac sem reinicializar. Disponível 
em: <http://www.vmware.com/products/
fusion.html>. Acesso em: 15 jul. 2016.
http://www.vmware.com/products/fusion.html
http://www.vmware.com/products/fusion.html
Unidade 3 • Estrutura do Projeto e Configurações64/215
Instalação dos requisitos
a) Instalar o Visual Studio:
• Pode ser qualquer edição do 
Visual Studio, desde que seja 
correspondente ao solicitado 
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 
Link
O Boot Camp auxilia na instalação do Microsoft 
Windows no Mac. Disponível em: <https://
support.apple.com/pt-br/HT201468>. 
Acesso em: 15 jul. 2016.
https://support.apple.com/pt-br/HT201468
https://support.apple.com/pt-br/HT201468
Unidade 3 • Estrutura do Projeto e Configurações65/215
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.
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 queira 
Unidade 3 • Estrutura do Projeto e Configurações66/215
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). 
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 
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.
Unidade 3 • Estrutura do Projeto e Configurações67/215
c) Diretório \platforms: este diretório 
conterá todo o código-fontee 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ções68/215
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
69/215
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?
70/215
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ções71/215
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/
72/215
Assista a suas aulas
Aula 3 - Tema: Estrutura do projeto e configu-
rações | Bloco I
Disponível em: <http://fast.player.liquidplatform.com/
pApiv2/embed/dbd3957c747affd3be431606233e0f1d/
f665b3f5f5d4e55071e505ef953f49e3>.
Aula 3 - Tema: Estrutura do projeto e configura-
ções | Bloco II
Disponível em: <http://fast.player.liquidplatform.com/pA-
piv2/embed/dbd3957c747affd3be431606233e0f1d/a7ea-
4c232ad8f1853094153e40970965>.
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/f665b3f5f5d4e55071e505ef953f49e3
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/f665b3f5f5d4e55071e505ef953f49e3
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/f665b3f5f5d4e55071e505ef953f49e3
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/a7ea4c232ad8f1853094153e40970965
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/a7ea4c232ad8f1853094153e40970965
http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/a7ea4c232ad8f1853094153e40970965
73/215
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
74/215
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
75/215
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
76/215
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
77/215
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
78/215
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.
79/215
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 Aplicativo80/215
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 Aplicativo81/215
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. 
Link
O AngularJS é um framework JavaScript open-
source mantido pelo Google, que auxilia na 
execução de Single Page Applications. Disponível 
em: <https://angularjs.org/>. Acesso em: 16 
jul. 2016.
Link
O Ionic é, ao mesmo tempo, um framework CSS e 
uma bibliotecade componentes de interface de 
usuário em JavaScript. Disponível em: <http://
ionicframework.com/>. Acesso em: 16 jul. 
O Backbone.js é um framework Javascript que 
fornece componentes para melhorar a estrutura 
de aplicações web (Models, Collections, Views, 
e formas nativas de interagir com backends 
RESTful e JSON). Disponível em: <http://
backbonejs.org/>. Acesso em: 16 jul. 2016.
https://angularjs.org
http://ionicframework.com/
http://ionicframework.com/
http://backbonejs.org/
http://backbonejs.org/
Unidade 4 • Criando o Primeiro Aplicativo82/215
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.
Para saber mais
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 nosso aplicativo 
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.
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.
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>
Unidade 4 • Criando o Primeiro Aplicativo83/215
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:
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>
Unidade 4 • Criando o Primeiro Aplicativo84/215
• 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 Aplicativo85/215
Figura 1 – Executando cordova no browser
Fonte: O autor.
Unidade 4 • Criando o Primeiro Aplicativo86/215
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.
Unidade 4 • Criando o Primeiro Aplicativo87/215
Figura 2 – Executando cordova no emulador Android
Fonte: O autor.
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.
Unidade 4 • Criando o Primeiro Aplicativo88/215
Figura 3 – Executando cordova no dispositivo Android
Fonte: O autor.
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:
Unidade 4 • Criando o Primeiro Aplicativo89/215
• 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, 
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 
Unidade 4 • Criando o Primeiro Aplicativo90/215
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:
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>
Unidade 4 • Criando o Primeiro Aplicativo91/215
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 aplicativoPhoneGap, 
conforme a Figura 4.
Unidade 4 • Criando o Primeiro Aplicativo92/215
Figura 4 – Executando PhoneGap no browser
Fonte: O autor.
Unidade 4 • Criando o Primeiro Aplicativo93/215
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.
Unidade 4 • Criando o Primeiro Aplicativo94/215
Figura 5 – Executando PhoneGap no emulador Android
Fonte: O autor.
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. 
Unidade 4 • Criando o Primeiro Aplicativo95/215
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):
• 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.
Unidade 4 • Criando o Primeiro Aplicativo96/215
Figura 6 – Executando PhoneGap no dispositivo Android
Fonte: O autor.
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 
Unidade 4 • Criando o Primeiro Aplicativo97/215
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, 
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.
Unidade 4 • Criando o Primeiro Aplicativo98/215
• 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 Aplicativo99/215
• 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 Aplicativo100/215
• 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 Aplicativo101/215
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 Aplicativo102/215
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.
Unidade 4 • Criando o Primeiro Aplicativo103/215
Para que você possa visualizar o seu 
aplicativo em um dispositivo móvel, 
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 Aplicativo104/215
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
105/215
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.
106/215
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