Configurar o Apache Cordova, também conhecido como PhoneGap, é um processo um tanto quanto trabalhoso e pode se tornar um problema para quem quer testar essa tecnologia. Veremos aqui como configurar o Cordova para compilar no emulador ou direto no dispositivo Android usando MAC OS X ou macOS (mudança de nome introduzida na décima terceira versão do SO, intitulada de macOS v10.12 “Sierra”)
Nesse processo de configuração vamos instalar as seguintes ferramentas:
- Java JDK
- Android SDK
- Apache Ant
- NodeJs
- Cordova
Instalação Java JDK
Para fazer o download do Java JDK acesse a página http://www.oracle.com/technetwork/pt/java/javase/downloads e clique na imagem abaixo:
Faça o download da última versão do JDK na linha Mac OS X. Após o Download abra o arquivo .dmg e clique duas vezes no ícone da Caixa para realizar a instalação:
Realize a instalação com todas as opções padrões. Ao final acesse o terminal e digite java -version deve ser apresentada a seguinte mensagem:
Curso
Java - Algoritmos - Parte 1
Conhecer o curso
Instalando o Android SDK
Acesse a página do SDK Android em https://developer.android.com/studio desça até a opção de baixar somente o SDK:
Na linha do Mac OS X faça o download do arquivo .zip.
Ao término do download, extraia os arquivos na pasta phonegap dentro da home do usuário, para acessar a pasta home basta usar o atalho Command + Shift + H no Finder. Deve ficar conforme abaixo:
Curso
React Native - Armazenamento e Sincronia Offline
Conhecer o curso
Configurando as variáveis de ambiente
No terminal digite o comando nano ~/.bash_profile e insira no final do arquivo as seguintes linhas:
export ANDROID_HOME=~/phonegap/android-sdk-macosx
export ANT_HOME=~/phonegap/apache-ant
Salve o arquivo com o atalho Crtl + O e saia com Crtl + X
Agora execute o comando sudo nano /etc/paths e insira no final do arquivo o seguinte conteúdo:
~/phonegap/android-sdk-macosx/platform-tools
~/phonegap/android-sdk-macosx/tools
~/phonegap/apache-ant/bin
Salve o arquivo e saia (Crtl + O e Crtl + X).
Instalando Apache Ant
Acesse a página de download do Apache Ant (http://ant.apache.org/bindownload.cgi) e baixe a última versão no formato .zip.
Após o download, extraia a pasta do Apache Ant dentro da pasta phonegap que criamos dentro do diretório home e renomeie-a para apache-ant conforme indicamos nas variáveis:
Agora, no terminal, ao executar ant -v deve ser exibida a versão instalada:
Instalação dos pacotes no Android SDK
Abra o terminal e digite o comando android para acessar o gerenciador do SDK. No gerenciador marque as seguintes ferramentas:
Vamos instalar a imagem do Android 5.1.1:
Selecione em extras o pacote Intel x86 Emulator Accelerator (HAXM Installer).
Clique no botão Install Packages, aceite os termos da licença e aguarde ele instalar todos os pacotes.
Por fim, acesse a pasta home/phonegap/android-sdk-macosx/extras/intel/Hardware_Accelerated_Execution_Manager/ e instale o arquivo IntelHAXM_X.X.X.dmg
Criando Android Virtual Device (AVD)
Com o gerenciador do SKD aberto vá no menu Tools > Manage AVDs
Clique no botão create e preencha os dados da nova tela conforme abaixo:
Essas características que definirão como o emulador Android funcionará.
Instalando o NodeJs
Acesse a página do NodeJS https://nodejs.org/ e clique na versão recomendada (botão verde da esquerda). Após o download abra o arquivo .pkg e faça a instalação de modo padrão.
Acesse o terminal e teste se o Node foi instalado corretamente executando os comandos:
node -v
npm -v
Para cada comando acima ele deve retornar a versão. Se retornar erro de comando desconhecido o Node não foi instalado corretamente.
Curso
Godot - Aprenda a criar jogos estilo "Flappy Bird", para Android e iOS
Conhecer o curso
Instalando pacote Cordova
Para realizar a instalação da última versão do Apache Cordova execute o seguinte comando no terminal:
sudo npm install -g cordova
Após a instalação o terminal será liberado novamente, então execute o comando cordova -v para verificar se ele foi instalado corretamente.
Criando o projeto
O processo para criar e compilar o projeto consiste em 3 passos básicos:
- Primeiro a criação do Projeto
- Depois a adição das plataformas usadas (Android, IOS, WP e etc)
- Por último, a compilação e execução do projeto.
Criação do projeto
Para criar o projeto usamos o seguinte comando:
cordova create NOME_PROJETO
Vamos criar o projeto olaMundo:
cordova create olaMundo
Será gerada uma pasta no local onde o comando foi executado, ela terá o nome do projeto.
Adição da Plataforma
Agora precisamos adicionar a plataforma. A sintaxe do comando de adição é:
cordova platform add NOME_PLATAFORMA
Acesse a pasta do projeto e adicione a plataforma Android:
cd olaMundo
cordova platform add android
A primeira vez que esse comando é executado ele baixa o projeto de exemplo e copia para a pasta plataforms do projeto, por isso pode ser um pouco demorado.
Compilando e executando
Agora basta mandar o Cordova rodar que ele fez todo o processo:
cordova run android
Ele compilará o projeto, iniciará o Emulador e por fim instalará o aplicativo:
Compilar no dispositivo Android
Para compilar no dispositivo Android o comando é o mesmo mostrado acima - cordova run android - o único requisito é que o dispositivo esteja ligado no USB em modo Depuração USB. Caso não saiba como colocar o Android nesse modo, basta acessar o artigo Como ativar a depuração USB no Android.
Até a próxima!
