Começando com Ionic 3

Ionic é um framework para criar aplicativos mobile híbridos através de linguagens web (HTML, CSS e JS). Você pode aprender mais sobre o conceito do Ionic Framework aqui. Atualmente estamos no Ionic 3 (3.9.2 para ser exato), e o desenvolvimento do framework vem evoluindo bastante desde o lançamento do Ionic 2 que continuou utilizando o Angular, o que tem tornado o desenvolvimento com Ionic 3 ainda mais robusto, pois o Angular + Typescript tem evoluído muito em performance e outros.

• Instalando o Ionic 3
• Criando projeto
• Rodando o projeto

Instalando o Ionic 3

Os aplicativos Ionic são desenvolvidos sempre principalmente utilizando a CLI (Command Line Interface). Então precisamos começar com a instalação do Node.js e do npm. É bem provável que você já tenha instalado, então abra o seu terminal e rode os comandos npm –version e node –version só para garantir que estão instalados corretamente. Se algum dos comandos falhar instale-os novamente (download npm e Node.js).

Prefere aprender em vídeo?

Node e npm instalados, partimos para a instalação da CLI do Ionic e do Cordova com o seguinte comando:

npm install -g ionic cordova

No Windows é bom que você abra o terminal como administrador, já no Mac/Linux pode ser que você precise usar o sudo, vai depender da sua configuração de permissão.

Para conferir se realmente instalou, você pode rodar o comando ionic e verá informações parecidas com essa aqui:

Criando projeto

Como você pode ter reparado na imagem acima, o comando para criar o projeto é ionic start nomeDoProjeto. Porém, digite apenas ionic start:

1 – A CLI vai pedir o nome do projeto. Digite sem espaços e assentos, algo como: comecando-ionic3

2 – A CLI do Ionic 3 tem uma coisa que eu particularmente gostaria até que o Angular copiasse. Que é trazer boilerplates para criar seu projeto. Além do blank, tabs e sidemenu que já existiam nas versões anteriores as opções de projetos já completos e funcionais como a opção super são sensacionais, pois você pode aprender as boas práticas para desenvolver com melhor qualidade. Nas primeiras versões do Angular a partir da 2 eu tive até algumas dificuldades acabei inclusive criando um boilerplate pro Angular. Como exemplo, escolhe um dos mais completos (super, conference, tutorial, aws).

Rodando o projeto

Tudo instalado rodar o projeto é bem tranquilo, basta digitar o comando:

ionic serve

Como parâmetros adicionais, você pode rodar ionic serve –lab para verificar como está ficando a aplicação no Android, iOS e Windows Phone ao mesmo tempo. Mas cá entre nós, se você usa Windows Phone deixa aqui embaixo um comentário, porque é raridade 😛

É interessante demais ver como o mesmo código, roda visualmente diferente em cada plataforma, ícones, botões tudo fica como o usuário já está acostumado em seus próprio celular. Essa é a mágica dos aplicativos mobile híbridos.

Estou reescrevendo meu app Seja Grato em Ionic 3, e portanto mais conteúdo vindo por aí. Alguma sugestão ou alguma pergunta? Deixa aí nos comentários!