Tiago Porto

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

Tiago Porto

Esse post vai em resposta à um pedido feito por um desenvolvedor em adição a minha palestra Aplicativos híbridos com Ionic. Você também pode começar a desenvolver agora!. A dúvida era, como montar o ambiente para desenvolver em Android no Windows.

Então, vamos direto ao que interessa.

  1. Precisamos do Ionic e o Apache Cordova, se ainda não os instalou, vamos lá.

    • Ambos são pacotes do Node e para isso precisamos do Node instalado. Faça o download em https://nodejs.org/en/download.
    • Na instalação é necessário o NPM, não o remova. Nodejs setup screen

    Não sabe o que é Node e NPM, Leia O que é a NPM do Node.js.

  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

    Ionic install and ionic getting started page on background

  3. Iniciaremos a configuração do ambiente para Android. Vamos instalar o Java JDK.

    • Acesse, Java Downloads, 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. Windows Edit System Var Path
    • 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 ;. Adding new system var

  4. Com o Java configurado, agora precisamos do Apache Ant, o responsável pelo build. Faça o download em Ant Download.

    • 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 ;. System var edit modal

  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 Android SDK, 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, 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. System var edit modal
    • 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-tool, Tools/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. Android 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 Android platform

  7. Vamos fazer o build no nosso .apk.

    • Execute
    ionic build android

    Ionic build Android

    • 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í, bom desenvolvimento.