Fábrica de Código

Nesse artigo eu vou mostrar como preparar seu ambiente de desenvolvimento para você criar apps usando o Ionic.
Eu não vou mostrar detalhadamente como instalar cada software pois a instalação é igual a de qualquer outro software.

Node.js e npm

Para instalar o Ionic no seu PC, você precisa apenas do Node.js e do npm, porem para fazer o build do app para Android ou iOS você vai precisa de mais coisas que serão exibidas mais abaixo nesse tutorial. O npm é automaticamente instalado ao instalar o Node.js. A versão recomendada do Node.js que você deve instalar no seu PC é a LTS.

Efetuar download do Node.js

Git

O Git é uma ferramenta de versionamento de código altamente recomendada. A instalação não é obrigatória, mas eu recomendo para você não perca mais seu código fonte.

Efetuar o download do Git

Instalando o Ionic

Depois de ter instalado o Node.js, o próximo passo é abrir o terminal do Windows ou Mac e rodar o comando abaixo:

npm install -g ionic

O -g significa que você vai instalar o Ionic de maneira global, ou
seja, todo projeto que você criar com o Ionic vai usar a mesma versão
instalada.

Visual Studio Code

O Visual Studo Code ou VSCode é o melhor editor de texto/ide para você criar seus apps com Ionic. A instalação dele é muito simples e ele possui vários complementos que podem ser instalados e facilitar seu dia a dia.

Efetuar download do VSCode

Ionic Extension Pack

O Ionic Extension Pack é um agrupamento de complementos do VSCode que você pode instalar no VSCode que vai facilitar sua vida durante do desenvolvimento.

Para instalar é muito simples, é só seguir os passos abaixo

  1. Abra o VSCode
  2. Vá até a aba Extensões
  3. Digite “Ionic Extension Pack”
  4. Clique em cima da opção “Install”

Instalando o Cordova

O Cordova é uma das maneiras de fazer o build nativo de um app Ionic para Android o iOS. E para instalar é muito simples, basta rodar o comando abaixo no terminal do Windows ou Mac

npm install -g cordova

Para saber qual foi a versão que você instalou, basta rodar o comando abaixo:

cordova -v

Android Setup

Para fazer o build de um app Ionic para a versão Android é necessário instalar os softwares abaixo:

Efetuar download do Java SE Development Kit

Efetuar download do Android Studio

Configurando o Android SDK

Depois de instalar os softwares acima é hora de configurar a Android SDK. Para isso você vai abrir o Android Studio e seguir os passos abaixo.

  1. Clique em Configure e depois em SDK Manager
  2. Uma nova tela vai abir e nela você vai marcar alguns pacotes para ser instalado conforme explicado abaixo.

Aba SDK Platform

Nessa aba você vai escolher qual SDK do Android você vai instalar. Para fazer essa escolha é necessário saber qual versão do Cordova você instalou na sua maquina, ou seja, se você instalou a versão 7 do Cordova, você precisa instalar a SDK Platform de API Level entre 19 – 27. Para saber mais, no site do cordova tem uma tabela simples e você pode acessar clicando aqui.

Bom aqui eu tenho a versão 7 do Cordova e marquei a opção Android 8.1 (Oreo) conforme imagem abaixo.

Aba SDK Tools

Nessa aba você vai marcar a opção Android Support Repository

Depois de marcar os pacotes é só clicar em OK, aceitar as licenças e aguardar a instalação.

iOS Setup

Para fazer o build de um app Ionic para a versão iOS é necessário instalar o software abaixo:

Xcode

O xcode é a IDE para criar apps nativos para o iOS, ela inclui a SDK do iOS e as linhas de comando.
O download é gratuito e você precisa apenas de um MAC e uma conta da Apple.

Configurando um time de desenvolvimento

Todo app iOS precisa ter seu código assinado, até em ambiente de desenvolvimento. O Xcode já facilita sua vida fazendo essa assinatura automática. Para configurar é só seguir os passos abaixo:

  1. Abra o Xcode e navegue pelas opções Xcode > Preferencias > Contas
  2. Na tela que abrir você precisa preencher com sua conta da Apple

Emuladores

Particularmente eu não gosto de emuladores, eu acho eles lentos e pesados rodando no meu PC. Uma alternativa que funciona muito bem pra mim é rodar o app direto no celular.

Mas se você preferir usar um emulador, vou te passar duas opções:

  1. Criar um emulador a partir do Android Studio ou XCode
  2. Usar o Genymotion

O Genymotion é um dos melhores emuladores para Android que eu conheço e você pode usar ele gratuitamente se o uso for estritamente pessoal.

Para fazer o download da versão pessoal é só clicar aqui e depois seguir os passos da instalação.

Conclusão

Preparar o seu ambiente de desenvolvimento é muito simples, porem você precisa ter atenção durante o processo para não esquecer nada.

Um outro detalhe é que você sempre deve buscar novas ferramentas que vão facilitar seu dia a dia durante o desenvolvimento.

Você conhece alguma ferramenta legal que poderia ser adicionada nesse post? deixa aí nos comentários!