Como Instalar Ionic 3 e Implementar num Dispositivo Android

Square

Resolvi criar este post após muitas tentativas de configuração do ambiente Ionic tanto para Mac quanto para Windows. Um dos motivos, também, de ter feito este tutorial está relacionado à falta de conteúdo sobre o Ionic Framework em português.

Instalando pré-requisitos para Mac e Windows

Antes de sair instalando o ionic é preciso ter o Node e NPM, e a maneira mais rápida de fazer isso é através do Node.js . Para ter certeza que a instalação foi bem sucedida , execute o comando npm --version  e  node --version .

Também é necessário ter o Git instalado. Você pode instalar o Git por aqui , e para verificar a instalação execute git no seu terminal.

Ionic CLI e Cordova

Se você já possui os pré-requisitos do Ionic, agora é só instalar o Ionic e Cordova executando o seguinte comando no seu terminal:

Mac –  sudo npm install -g ionic cordova 

Obs: Aqui o sudo é necessário pois o “-g ” significa que esta é uma instalação global, e por isso é necessário executar com “sudo”.

Windows –  npm install -g ionic cordova 

Obs: Assim como no Mac, o “-g ” está presente e, por isso você precisa estar executando o prompt de comando em modo Administrador.

Pronto, agora com o Ionic instalado já é possível criar seus aplicativos!

Para criar um app basta executar ionic start helloWorld blank, entrar no diretório criado com cd helloWorld e executá-lo com ionic serve.

Mas vamos ainda mais adiante, vamos configurar o ambiente para Android para testarmos os aplicativos no seu próprio dispositivo Android.

Configurando o ambiente Android

Nesta etapa iniciaremos a configuração do ambiente para Android, ou seja, o ambiente para executarmos o Ionic app no seu próprio dispositivo Android.

Instalação do JDK: 

Esta estapa é muito importante, pois tive alguns problemas com a configuração e descobri que o Ionic só aceita até a versão 8 do JDK, não instale o Java Platform (JDK) 9.

Aqui está o link para baixar a versão 8 do JDK (faça o download da versão compatível com seu SO, 32 ou 64 bits): http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 

Preste atenção no caminho de instalação do seu jdk, normalmente o path é  C:\Program Files\Java\jdk1.8.0_131 ( ou em português caso seu SO esteja assim configurado).

O próximo passo é criar a variável ambiente JAVA_HOME . Nesta variável, coloque o caminho no qual o seu JDK foi instalado.

JAVA_HOME no Windows:

Você pode configurar esta variável procurando por “variáveis ambiente” ou por linha de comando. Na janela System Properties apresentada abaixo, selecione Environment Variables e clique em “New..” para adicionar a JAVA_HOME com o seu respectivo caminho.
O próximo passo é selecionar a variável Path  e editá-la, adicionando ;%JAVA_HOME%\bin .

Configurando a variável ambiente JAVA_HOME

 

Para fazer o mesmo via terminal basta rodar esse comando:
setx JAVA_HOME "C:\Program Files\Java\jdk1.8.0_131" e adicionar a variável JAVA_HOME ao PATH com: setx PATH "%PATH%;%JAVA_HOME%\bin"

JAVA_HOME no Mac:

O procedimento no Mac é quase igual ao do Windows via terminal, basta executar export JAVA_HOME=seucaminho

Instalação do SDK:

Faça o download do Android Studio: https://developer.android.com/studio/index.html 
Após instalado é preciso criar a variável ANDROID_HOME . Este procedimento é parecido com a criação da JAVA_HOME, porém o caminho será diferente.
Por exemplo: C:\Program Files (x86)\Android\android-sdk
Na variável Path acrescente ;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools
Atualize o SDK Tools do Android Studio com o SDK Manager, basta abrir o Android Studio, clicar em File > Settings e procurar por Android SDK.
Para testar a configuração do ambiente android para o Ionic, execute:

ionic cordova platform add android
ionic cordova run android

Para executar o segundo comando, você precisa ativar o modo desenvolvedor no seu dispositivo Android.

Para ver os dispositivos conectados basta executar adb devices.

Agora você está pronto para debugar o seu Ionic app diretamente num dispositivo!

Comment

3 Replies to “Como Instalar Ionic 3 e Implementar num Dispositivo Android”

  1. Boa tarde,

    Estou com problemas quando executo o comando cordova run android.
    Requirements check failed for JDK 1.8
    [ERROR] An error occurred while running subprocess cordova.

  2. Muito obrigado por compartilhar pois o único é bem trabalhoso, mas muito bom.
    Para usar, por exemplo, o PhoneGap tudo é mais tranquilo, mas não tem os recursos do Ionic.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *