Hoje, irei mostrar como estar fazendo a instalação completa para uso do plataforma Ionic e Cordova para uso no android.
APRESENTAÇÃO
O IONIC é uma biblioteca de desenvolvimento para aplicações mobile, que integra os frameworks Cordova e Angular. O Ionic, por meio do framework Angular, permite a criação de interfaces dinâmicas, orientadas por módulos e componentes. O Ionic disponibiliza uma agilidade no desenvolvimento front-end, com tags pré-definidas em HTML - semelhantes ao Bootstrap. Ele conta com linguagens e recursos em Typescript e SASS (Syntactically Awesome Style Sheets), linguagem de estilo que possui facilidades a mais que o tão conhecido CSS.
PRÉ-REQUISITOS
É preferível que você possua o programa Visual Studio Code como editor padrão, para que seja garantido que os passos irão funcionar, assim como funcionou para mim. :)
INSTALAÇÃO DO NODE.JS
Para começarmos com as instalações, primeiro é necessário ter instalado o ambiente de execução Node.JS, devido a necessidade de instalação de dependências utilizando NPM. O download pode ser feito pelo link abaixo:
Recomenda-se fazer a instalação da versão LTS, por ser mais estável que a Current. Clicando em Other Downloads, é possível buscar outras especificações que desejar.
Tela de instalação do Node.JS
Após o download do instalador, faça o famoso processo "next, next, next..." prestando atenção ao concordar com termos de contrato e localidade das pastas do software. Após finalizar, verifique a existência dos programas em seu CMD ou console de preferência; digite node -v e em seguida npm -v, deverá aparecer as informações das versões dos dois programas:
Agora, chegou a grande hora de instalar todas as dependências necessárias para usufruir da plataforma IONIC e Cordova.
INSTALAÇÃO DO IONIC
Ainda uitilando seu console, digite o seguinte código: npm install @ionic/cli --global, irá ser realizada a instalação da última versão do IONIC. Após o processo ser finalizado, confira novamente a versão com ionic -v.
INSTALAÇÃO DO CORDOVA
Agora, para a instalação do Cordova, iremos fazer um processo muito semelhante a instalação do IONIC. Digite o código npm install cordova --global, e, após finalizar o proceso, teste novamente a versão com cordova -v. Simples, não? Vamos prosseguir!
INSTALAÇÃO DO JDK-8
A partir daqui as coisas podem ficar um pouco mais complexas. Como temos a necessidade de nos utilizarmos de ferramentas android de desenvolvimento, necessitamos de instalar a versão 1.8 do JDK (Java Development Kit).
ATENÇÃO: NECESSÁRIO QUE SEJA EXATAMENTE A VERSÃO 1.8.X, CONFIRA O LINK ABAIXO E ENCONTRE SEU SISTEMA OPERACIONAL PARA REALIZAR O DOWNLOAD.
No meu caso, o sistema operacional que possuo é o Windows 64 bits, portanto, instalei a opção grifada.
Após, execute java -version em seu console para checar se o processo ocorreu bem. Execute também javac para checar se há retorno de informação.
ATENÇÃO: EM CASO DE VERSÕES MAIS ANTIGAS OARA WINDOWS, CONFIRA O LINK ABAIXO COM EXEMPLOS DE CONFIGURAÇÃO DO JDK:
INSTALAÇÃO DO SDK ANDROID
Para nossa próxima etapa, instale a plataforma Android Studio, mas tenha calma! Não será necessário utilizá-la diretamente, para o festejo de sua máquina, apenas necessitamos de seu SDK Android. Um dos motivos de não estar fazendo um tutorial para IOS, se dá pelo fato de sua plataforma ser paga, o que não é muito acessível para muitas pessoas que ainda estão estudando e desbravando o mundo da programação.
Instale pelo link:
Após a instalação da plataforma e finalizado o installer, abra seu Android Studio.
Em um tempo, depois de ter feito instalações complementares para a IDE, você irá se deparar com uma tela parecida com essa de baixo, clique na engrenagem (Configure) e em SDK Manager.
Na seção SDK Plataforms, tenha certeza de que a versão Android 11.0 (R) e 8.0 (Oreo) estão checadas, se não estiverem, faça esse processo e clique em "Apply" e será realizada outra instalação.
Agora, vá para a seção SDK Tools e tenha novamente a certeza que todos os itens da imagem abaixo estão checados, se não estiverem, realize o mesmo processo de checar, aplicar e instalar.
Ufa... vamos agora para a penúltima etapa para a instalação da plataforma, a configuração das variáveis de ambiente.
CONFIGURAÇÃO DAS VARIÁVEIS DE AMBIENTE
Como penúltima etapa, é necessário que criemos variáveis de ambiente para que seja possível emular nossas aplicações pelo Cordova. Para você que não tem muita ideia de como realizar esse processo, no windows, abra seu gerenciador de arquivos, botão direito em "Este Computador", propriedades, Configurações avançadas do sistema e, enfim, variáveis de ambiente...
DEFININDO AS VARIÁVEIS
Agora, retorne para seu Android Studio e copie o caminho de seu SDK, localizado no campo superior da aba "SDK Manager".
No meu caso, ela foi criada na minha pasta Documents, mas pode ser que a sua esteja lozalizada em AppData
Agora, vá para a janela das variáveis, clique em "Novo...", nas variáveis de sistema e digite: ANDROID_SDK_ROOT no título, cole o seu path no valor da variável e clique em OK.
Feito isso, procure pela variável de sistema "Path", selecione-a e clique em editar; Após, adicione em "Novo", as variáveis de ambiente
%ANDROID_SDK_ROOT%\platform-tools e
%ANDROID_SDK_ROOT%\tools, dessa forma:
Clique em OK em toda a parte que você o ver, se não o trabalho terá sido em vão ksksks
Vamos agora para nossa última etapa, instalação do Gradle.
INSTALAÇÃO DO GRADLE
O gradle será necessário para que seja feita a compilação de nosso projeto em seja lá qual for nosso device android. Para fazer a instalação, vá ao site
https://gradle.org/install/ e instale a versão binária, clicando em "Binary-only" (role um pouco a página para baixo).
Descompacte o arquivo na raiz C:\ e copie o caminho para a pasta bin, dentro de sua pasta Gradle.
Também cheque a versão do Gradle com o comando gradle -v, em seu console
Vá novamente às suas variáveis de ambiente e, novamente na variável "Path", clique em novo e cole o caminho até a pasta bin de sua pasta gradle.
Pronto! Tudo certo, espero que o artigo tenha o ajudado com suas necessidades e esclarecido suas dúvidas, nos vemos em uma próxima oportunidade :D
(Não esqueça de clicar em OK quando finalizar o processo de criação das variáveis de ambiente e d sistemas)
Comentários
Postar um comentário