Aprenda a instalar o Cordova com Android no macOS

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

Curso PhoneGap - Apache Cordova Mobile Framework

Conhecer o curso

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 Android - Criação de aplicativos para SmartWatch com o Android Wear

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 com Firebase Firestore

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

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!