Instalação do Apache Cordova e Adobe PhoneGap

Prévia do material em texto

Aplicativos Mobile 
Multiplataforma
Tema 02 – Instalação do Adobe PhoneGap e do Apache
Cordova
Bloco 1
César Torres Fernandes
Tecnologias para Aplicações Web
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.
• A centrada em plataforma.
Introdução
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.
• A CLI (Command Line Interface) fornece uma
interface comum para aplicar plug-ins em seu
aplicativo; 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.
Introdução
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, o qual
permite que você aplique plug-ins ao projeto.
• Você pode usar esta forma de desenvolvimento para
criar aplicativos de multiplataforma, mas, pela falta de
uma ferramenta de alto nível, você terá mais ciclos de
compilação separada e modificações de plug-in para
cada plataforma.
Introdução
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 de multiplataforma.
Introdução
Para cada plataforma, 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 de multiplataforma.
Introdução
Para o Android:
• Instalar o JDK 7 ou superior.
• Instalar o Android SDK ou o Android Studio
(já tem 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.
Introdução
Para o iOS:
• Ter 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
ter dispositivos reais com, no mínimo, o iOS 8.
• Para publicar, será necessário o Xcode e uma
conta de desenvolvedor paga.
Introdução
Para Windows:
• Ter 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.
• Para publicar, será necessária uma conta de
desenvolvedor paga.
Aplicativos Mobile 
Multiplataforma
Tema 02 – Instalação do Adobe PhoneGap e do Apache
Cordova
Bloco 2
César Torres Fernandes
Tecnologias para Aplicações Web
Instalação do Apache Cordova
O cordova CLI é distribuído como um pacote
do npm. Para instalar o cordova CLI, você
precisará:
• Baixar o Node.js de acordo com sua
plataforma de desenvolvimento.
• Realizar o procedimento de instalação do
Node.js.
Instalação do Apache Cordova
• 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>
Instalação do Apache Cordova
• 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>
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.
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 tem alguns recursos
adicionais sobre o PhoneGap Desktop para
construção, execução e empacotamento das
aplicações PhoneGap em múltiplas
plataformas.
Instalação do Adobe PhoneGap CLI
Para instalar o PhoneGap CLI, você precisará:
• Baixar o Node.js de acordo com sua
plataforma de desenvolvimento.
• Realizar o procedimento de instalação do
Node.js.
Instalação do Adobe PhoneGap CLI
• 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>
 No OS X:
sudo npm install -g phonegap@latest <enter>
Instalação do Adobe PhoneGap CLI
• 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>
Instalação do Adobe PhoneGap Desktop
O PhoneGap Desktop fornece uma interface
de arrastar e soltar para criar aplicações
PhoneGap, sendo uma alternativa o uso do
PhoneGap CLI.
Antes de instalar o PhoneGap Desktop,
devemos escolher o sistema operacional: Mac
OS X ou Windows.
Instalação do Adobe PhoneGap Desktop
Instalação no Windows:
• Baixe a última versão do instalador para
Windows <http://phonegap.com/products/>.
• Clique duas vezes sobre o arquivo que foi
baixado para executar o instalador. Aparecerá
a tela inicial do instalador. Clique em próximo.
• Feito isso, você verá o contrato de licença
solicitando sua confirmação. Sendo assim,
aceite o contrato de licença.
• Selecione o destino desejado para o aplicativo
(caso seja necessário), clicando em próximo.
http://phonegap.com/products/
Instalação do Adobe PhoneGap Desktop
• Selecione o local desejado para o atalho
(caso seja necessário) e clique em
próximo.
• Clique em instalar para iniciar a instalação.
• Clique em concluir para fechar o assistente
de configuração.
• Abra o aplicativo PhoneGap Desktop.
Instalação do Adobe PhoneGap Desktop
Instalação no Mac OS X:
• Baixe a última versão do instalador para Mac
OS X <http://phonegap.com/products/>.
• Clique duas vezes sobre o arquivo que foi
baixado para executar o instalador. Feito isso,
você verá o contrato de licença solicitando o
sua confirmação.
• Arraste e solte o aplicativo na pasta de
Aplicativos do seu Mac.
• Abra o aplicativo PhoneGap Desktop.
http://phonegap.com/products/
Instalação do PhoneGap Developer App
O PhoneGap Developer App é um aplicativo
móvel que funciona em dispositivos e permite
que você visualize e teste os aplicativos móveis
PhoneGap por meio das plataformas de maneira
rápida e com configuração mínima.
Ele fornece acesso aos APIs do núcleo PhoneGap,
proporcionando o acesso imediato aos recursos
nativos do dispositivo sem a necessidade de
instalar qualquer plug-in ou compilação local.
Instalação do PhoneGap Developer App
• Localize o aplicativo gratuito PhoneGap Developer
App e instale-o em seu dispositivo móvel:
 iOS
<https://itunes.apple.com/app/id843536693>.
 Android
<https://play.google.com/store/apps/details?id=co
m.adobe.phonegap.app>.
 Windows <http://www.windowsphone.com/en-
us/store/app/phonegap-developer/5c6a2d1e-4fad-
4bf8-aaf7-71380cc84fe3>.
• Toque no ícone do aplicativo PhoneGap Developer
de sua tela para abri-lo.
https://itunes.apple.com/app/id843536693
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