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.
- Logicamente 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.
*Não sabe o que é Node e NPM, acesse http://nodebr.com/o-que-e-a-npm-do-nodejs/
- Com o Node instalado, agora vamos abrir o terminal e instalar o Ionic e o Cordova.
- 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.
- 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 “;”.
- 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 “;”.
- 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.
- 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.
- Ao final das instalações nosso ambiente está configurado.
- Vamos fazer o teste. Voltando ao nosso aplicativo, abra o diretório do aplicativo pelo terminal e adicione a plataforma android.
- Vamos dar o build no nosso .apk. Execute
ionic build android
- Após finalizado o processo, o caminho do .apk gerado é exibido no terminal.
- 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
É isso aí, boa sorte e bom desenvolvimento.
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?
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á.
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.
Olá Sabino, desculpe a demora, estava de férias.
Pela mensagem
Failed to create directory
Não seria erro de permissão no seu sistema?
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?
Olá Felipe desculpe a demora, estava de férias.
Confirme se você instalou o android studio mesmo.
Existe o Android NDK https://developer.android.com/ndk/index.html
E o Android Studio https://developer.android.com/studio/index.html
Você não precisa instalar o android studio, somente o SDK resolve.
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!!!
Olá Lucas, desculpe a demora, estava de férias.
Para fazer o teste você precisa ter o aplicativo que você está desenvolvendo.
Já começou a desenvolver algum app?
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.
Consegui rodar no dipositivo seguindo a instrução.
Muito bom, obrigado.
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
Que bom que ajudou.
Boa sorte aí.
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.
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
ótimo artigo, muito bem explicado.
Muito obrigado e parabéns!!
Obrigado Rafael
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
Você já tem o ionic instalado?
Tente rodar
ionic -v
Muito obrigado, vai me ajudar a começar.