Tutorial de configuração do ambiente Ionic + Android no Windows

Esse post vai em resposta à um pedido feito por um dev que acessou minha palestra Aplicativos híbridos com Ionic. Você também pode começar a desenvolver agora!. Ele ficou em dúvida de como montar o ambiente para desenvolver em Android.

Então, vamos direto ao que interessa.

  1. Logicamente precisamos do Ionic e o Apache Cordova, se ainda não os instalou, vamos lá.
  2. Com o Node instalado, agora vamos abrir o terminal e instalar o Ionic e o Cordova.
    • Execute o comando
      npm install -g cordova ionic.

      Instalação do Ionic e do Cordova

  3. Iniciaremos a configuração do ambiente para Android. Vamos instalar o Java JDK.
    • Acesse o link http://www.oracle.com/technetwork/java/javase/downloads/index.html, selecione JDK download, faça o download da versão compatível com seu SO (32 ou 64 bits). Veja o path de onde você instalou, será necessário no próximo passo.
    • Agora vamos criar a variável JAVA_HOME no ambiente do windows, abra a tela de sistema com as teclas “windows + pause/break” ou vá em “painel de Controle / Sistema e Segurança / Sistema”.
    • Clique em “Configurações avançadas do sistema”.
    • Selecione Variáveis de ambiente.
    • Selecione Nova variável de ambiente.
    • Na nova janela, em nome da variável coloque JAVA_HOME, e no valor coloque o caminho onde você instalou o JDK. Por exemplo, C:\Program Files\Java\jdk1.8.0_65. Dê OK.
      Configurando Variável Java Windows
    • Selecione a variável path, e clique em editar. Novamente irá abrir uma janela com os dados da variável, no campo valores da variável, vá até o final da string e adicione ;%JAVA_HOME%\bin. Não se esqueça do “;”.
      Adicionando Bin do Java nas Variáveis Ambiente
  4. Com o Java configurado, agora precisamos do Apache Ant, o responsável por fazer o build de nosso aplicativo. Faça o download no link http://ant.apache.org/bindownload.cgi.
    • Após concluído o download, extraia o diretório para a raiz de C:.
    • Mais uma vez precisamos atualizar a variável path para acrescentar o Ant. Abra as variáveis de ambiente do windows novamente.
    • Selecione Variáveis de ambiente.
    • Selecione a variável path e clique em editar.
    • Acrescente o caminho até a pasta bin do Ant, por exemplo ;C:\apache-ant-1.9.6\bin. Mais uma vez não se esqueça do “;”.
      inserindo-ant-variavel-ambiente
  5. O próximo passo é a instalação do Android SDK, a API que fornece as bibliotecas e ferramentas necessárias para build, teste e debug para Android.
    • Faça o download em http://developer.android.com/sdk/index.html#Other, selecione o .exe (Recommended).
    • Após instalado, precisamos criar a variável ANDROID_HOME, necessária para o Cordova. Mais uma vez abra as variáveis de ambiente do windows.
    • Selecione Variáveis de ambiente.
    • Clique em Nova.
    • Na nova janela em nome da variável coloque ANDROID_HOME, e no valor da variável coloque o caminho até a pasta android-sdk que você acabou de instalar, por exempo: C:\Android\android-sdk. Dê OK.
      Variável ANDROID_HOME
    • Voltando às variáveis de ambiente, selecione a variável path, e clique em editar. Na nova janela no campo valor da variável, vá até o final da string e acrescente ;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools.
    • Estamos quase lá, agora precisamos instalar os pacotes do android. Abra o arquivo SDK Manager.exe, localizado dentro da pasta android-sdk.
    • Por padrão o Tools/Android SDK Tools já está instalado. Se por algum motivo ele não estiver marcado como instalado, selecione-o. Selecione também Tools/Android SDK Platform-toolTools/SDK build-tools (uma versão acima da 22), e na API selecione a mesma versão que você selecionou no Build Tools. Marque também Extras/Google USB Driver (necessário para debug direto no dispositivo), e clique em instalar.androi-sdk-manager-panel
    • Ao final das instalações nosso ambiente está configurado.
  6. Vamos fazer o teste. Voltando ao nosso aplicativo, abra o diretório do aplicativo pelo terminal e adicione a plataforma android.
    • Execute
      ionic platform add android

      ionic-add-platform-android

  7. Vamos dar o build no nosso .apk. Execute
    ionic build android

    build-androi-ionic

    • Após finalizado o processo, o caminho do .apk gerado é exibido no terminal.
  8. Podemos também debugar o aplicativo direto no dispositivo. Plugue o dispositivo via cabo USB, certifique de ter habilitado o USB debugging, e execute
    ionic run android

    run-android

É isso aí, boa sorte e bom desenvolvimento.

19 comentários em “Tutorial de configuração do ambiente Ionic + Android no Windows”

  1. Olá Thiago, tudo bem?

    Eu tenho um app publicado e agora preciso fazer um re-skin dele, ou seja, trocar somente as cores, logos, icones e screenshots, porém vou manter os 2 apps rodando. Eu gostaria de saber como faço pra definir dinamicamente isso, utilizando os mesmos fontes?

    1. Olá Thiago, você quer que o mesmo app aparece com skins diferentes a cada vez que se abre? Se for só trocar cores por exemplo, basta você ter uma variável em localStore, ai quando rodar verifica essa variável e muda a cor do elemento por js. Para as imagens vai depender, se você está usando api precisa sincronizar qual a versão do app o usuário acessou e enviar o link para a versão correta, agora se não tem api você pode salvar o link das imagens na mesma variável e pegar o caminho de lá.

  2. Não consigo baixar os arquivos no SDK manager…

    Downloading Android SDK Platform-tools, revision 26
    Failed to create directory C:\Program Files (x86)\Android\android-sdk\temp
    Downloading Android SDK Build-tools, revision 26
    Failed to create directory C:\Program Files (x86)\Android\android-sdk\temp
    Downloading SDK Platform Android 8.0.0, API 26, revision 1
    Failed to create directory C:\Program Files (x86)\Android\android-sdk\temp
    Downloading Google USB Driver, revision 11
    Failed to create directory C:\Program Files (x86)\Android\android-sdk\temp
    Skipping ‘Android SDK Tools, revision 25.2.5’; it depends on ‘Android SDK Platform-tools, revision 26’ which was not installed.

  3. Ao configurar a variável ANDROID_HOME, quando termino de instalar o android studio, não aparece pra mim a pasta android-sdk, só vejo a pasta android-ndk.

    Como faço pra arrumar isso?

  4. Estou seguindo o tutorial e agarrei na parte de executar o teste. não entendi a parte de testar no aplicativo. Que aplicativo? Devo criar um App pelo Android Studio?

    ====>”Vamos fazer o teste. Voltando ao nosso aplicativo, abra o diretório do aplicativo pelo terminal e adicione a plataforma android.
    Execute…”<====

    Alguém consegue me ajudar?
    Obrigado!!!

  5. Boa tarde, alguém sabe o que pode ser esse erro abaixo:

    * What went wrong:
    Execution failed for task ‘:transformClassesWithDexForDebug’.
    > com.android.build.api.transform.TransformException: com.android.ide.common.process.ProcessException: java.util.concurrent.ExecutionException: com.android.dex.DexException: Multiple dex files define Landroid/support/v4/accessibilityservice/Accessi
    bilityServiceInfoCompat$AccessibilityServiceInfoVersionImpl;

    Não consigo buildar nenhuma aplicação.

  6. Bom dia!

    Muito bom o artigo, estou começando a desenvolver a pouco tempo e com esse passo a passo. deu certinho a instalação. muito obrigado

  7. Oi Tiago, tudo bom?
    Muito bom o seu post, ajuda bastante, obrigado.
    Preciso fazer uma instalação do Ionic Cordova em uma versão antiga para continuar um projeto antigo. Você consegue me ajudar neste caso? Se preferir pode me enviar por email, o que eu cadastrei aqui. Outra coisa, você não detalhou sobre o arquivo de instalação do Android SDK, é interessante instalar o mais completo? (Pacote do Android Studio).
    Agradeço antecipadamente.

    1. Obrigado Ricardo.
      Para instalar uma versão antiga do cordova basta rodar o comando com a versão que quiser
      npm install cordova@[version]

      A respeito dos pacotes do android você não precisa do mais completo.
      O básico é ter Android SDK Platform-tool, SDK build-tools, a API do android na versão que quiser(recomendado a mais atual) e o Google USB Driver.

      Abraço

  8. Faço tudo direitinho como segue o tutorial mas quando vou instalar o cordova pelo cmd como segue o comando: “npm install -g cordova ionic ”
    acaba dando uma mensagem de erro com a seguinte mensagem no final:

    “please include the following file with any support request:
    C:\Windows\system32\npm-debug.log”

    Teria como me ajudar, agradeço muito.
    Obs: Estou executando o cmd como adm e também estou com o console do nodejs também aberto como adm.
    Obrigado

Deixe uma resposta

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