Continuando nossa jornada sobre o Ionic Creator, vamos agora exportar o app que fizemos na ferramenta, para podermos editar o código e gerar o instalador para o Android (.apk).
Se você não tem i-d-e-i-a do que é Ionic, muito menos Ionic Creator, comece por aqui!
No Ionic Creator, no canto direito superior, nós temos 3 (três) botões interessantes:
o botão de Temas e SCSS, o botão de exportação e o botão de compartilhamento.
Nesta opção temos duas abas. Na aba de temas, podemos modificar as cores e fontes utilizadas no projeto, tanto para o cabeçalho, menu ou para as opções de cores padrão que a ferramenta exibe para botões, por exemplo.
Na aba de SCSS podemos escrever código SCSS (que é uma forma mais produtiva de escrever CSS, similar ao SASS) para sobrescrever/reescrever os estilos já definidos pelo Ionic.
Assim como eu fiz no post Ionic Creator – Crie através de interface, você pode precisar compartilhar o app que está prototipando com mais alguém. Nesta opção podemos compartilhar através de link, e-mail e até SMS.
Na versão gratuita temos duas formas de exportar um projeto do Ionic Creator. Uma bem simples é baixar o ZIP do app, e colocar na pasta WWW de onde estamos desenvolvendo o app.
Mas a forma que vamos utilizar é outra, onde o próprio Ionic se dá o trabalho de colocar os arquivos na pasta correta que é através da CLI.
Abra então o prompt de comando e navegue até a pasta onde vamos criar o app.
Depois digite o comando:
ionic start imc-felizardo creator:[sua-id]
Essa ID muda de acordo com projeto e conta, então, verifique o seu pra inserir corretamente no comando.
Após digitar o comando, o Ionic vai baixar os arquivos necessários pra que seu app funcione, então, vai depender da sua velocidade de internet.
Vamos ver se funcionou…você lembra como faz pra rodar um app no Ionic?
Primeiro entre na pasta do projeto, que no caso é imc-felizardo, e depois digite o comando:
ionic serve
APK é Android Package, que é um arquivo compilado, usado de forma paralela a Google Play para instalar programas no Android (agora sim hein!).
Prefere aprender em vídeo?
Se você já usa sua máquina para desenvolver, é provável que alguns dos requisitos pra gerar o .apk você já tenha instalado no seu computador.
Atenção aqui! A instalação deve ser feita na pasta geral do sistema e não do usuário do sitema.
Depois de instalar o SDK Manager, execute e instale a API do Android. Você pode instalar a que quiser, mas no momento recomendo pelo menos a instalação da API 22 do Android.
Se você já instalou IDEs de desenvolvimento, sabe que vez ou outra precisamos alterar algumas variáveis do ambiente, e agora não será diferente.
Vamos em: Painel de Controle >> Sistema >> Configurações avançadas do sistema >> Avançado >> Variáveis de ambiente
Suas variáveis devem ser algo como:
PATH (usuario)
C:\Users\codificar\AppData\Roaming\npm
PATH (sistema)
C:\ProgramData\Oracle\Java\javapath;%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;%SYSTEMROOT%\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Skype\Phone\;C:\Program Files\nodejs\;C:\Program Files (x86)\Windows Kits\8.1\Windows Performance Toolkit\
O que você deve adicionar:
A variável ANDROID_HOME
C:\Program Files (x86)\Android\android-sdk
Adicionar no final da variável PATH (usuario)
;%ANDROID_HOME%\plataform-tools;%ANDROID_HOME%\tools
Depois de tudo isso feito (eu sei que você demorou um pouco porque sua internet não ajudou a baixar os SDKs) vamos voltar ao prompt e em fim criar o .apk.
De volta ao prompt digite:
ionic platform add android
E depois:
ionic build android
Pra encontrar o arquivo, vá até a pasta do seu projeto depois em platforms >> android >> build >> outputs >> apk >> android-debug.apk!
Esse é o instalador do seu app. Basta enviá-lo para algum celular android e instalar!
Achou fácil?! Difícil? Deixa sua opinião nos comentários ou na minha página do Facebook!
[wpdevart_like_box profile_id=”514623068560386″ connections=”show” width=”300″ height=”200″ header=”small” cover_photo=”show” locale=”pt_BR”]
Foi mês de carnaval, e fazendo essa curadoria eu sempre fico pensativo em quanta coisa…
Comecei o ano de 2026 decidido a ler mais, estudar mais, ser mais focado. Desde…
Ganhei esse livro alguns natais atrás, comecei a ler 2 ou 3 vezes e parei.…
Toda vez que começa um novo ano eu fico pensativo sobre o quão genial é…
E é provavelmente o melhor romance que eu já li. Inclusive eu só descobri -…
Eu acredito muito no poder dos livros, e agora que já faz 5 anos que…
View Comments
Muito bem explicado excelente tutorial
me ajudou bastante para um trabalçho da faculdade
Eu que agradeço pelo comentário Rodrigo!
Após realizar todos os parâmetros de variáveis tenho q ir até minha pasta do projeto e digitar “ionic platform add android” e “ionic build android”?? Não entendi em qual momento gero um o apk do meu projeto. Quer puder ajudar agradeço.
É isso mesmo Rafael. Dentro do diretório do projeto você faz esses comandos. Depois do comando build, ele vai gerar o .apk
Bacana, vou realizar um teste agora mesmo, Vlw sucesso.
(yn)
fiz tudo isso e não gerou nada
Você criou seu app em qual versão do Ionic? Aparece algum erro no console, quando você executa os comandos?
Apareceu alguma mensagem de erro no console quando você executou os comandos?
Mas o Java SDK ja já estava instalado a muito tempo em minha máquina
Pode ter tido alguma alteração. Qual foi a mensagem de erro que apareceu?
Fiz tudo isso mas não tem essa pagina dita no final oque faço ?
Qual página final?
ola amigo esse ID AI QUAL SERIA?
O ID foi gerado usando o Ionic Creator. Chegou a ver o post anterior?
http://www.andrefelizardo.com.br/blog/ionic-creator-crie-atraves-de-interface/
JAVA_NOME. Você criou alguma varíavel de ambiente com esse nome?
Fala André! Na parte final da explicação, quando eu usei o comando ionic platform add android, recebi uma mensagem dizendo que mudou para ionic cordova platform add android. Mudou somente isso! Ahh! o ionic build android também mudou para ionic cordova build android.
Valeu @bernardpiccoli:disqus
Precisando de posts do novo Ionic.
"√ Creating directory .imc-felizardo - done!
> git clone creator:e15ccecda1b1 imc-felizardo --progress
'git' n�o � reconhecido como um comando interno
ou externo, um programa oper�vel ou um arquivo em lotes.
[ERROR] Command not found: git"
Aparece esse erro acima.. alguem pode ajudar??
Você precisa ter o Git instalado, é uma dependência.
https://git-scm.com/downloads
Vlw