Nessa aula vamos abordar de forma teórica e um pouco prática sobre o IONIC, após estudar esse material o aluno deve ter um bom entendimento do que é o IONIC, seu funcionamento e sua relação com tudo que foi estudado até o momento. A partir de agora e até o final do curso vamos falar apenas do IONIC para desenvolvimento mobile, todo conhecimento até agora adquirido será útil.

O que é o IONIC?

O IONIC é um framework para desenvolvimento de aplicações híbridas web/mobile. Como aplicações híbridas, temos o reuso de tecnologias de outras plataformas para o desenvolvimento.

A vantagem de uma tecnologia híbrida está no reaproveitamento de código entre o que antes seria feito por linguagens específicas de cada plataforma. Exemplos de plataforma são:

• Desktop – Windows.
• Desktop – Linux.
• Web.
• Mobile – Android.
• Mobile – IOS.

O IONIC foca no desenvolvimento para Android e IOS.

A tarefa do IONIC é reaproveitar as ferramentas web para que uma mesma base de código seja usada em aplicativos Android e IOS. Detalhes das plataformas são abstraídos do desenvolvedor, no entanto, para situações específicas, o IONIC disponibiliza formas de acessar API’s internas de cada plataforma.

É tarefa do IONIC também permitir que o desenvolvedor acesse recursos do dispositivo como o GPS e o acelerômetro, além de disponibilizar uma forma de transformar o que seria um aplicativo web em um instalável que pode ser disponibilizado nas diferentes lojas de aplicativos das duas plataformas.

Como o IONIC funciona?

Em alto nível, o IONIC vai usar um recurso chamado native shell. O native shell pode ser visto como um aplicativo nativo de cada plataforma, ele irá ser instalado como qualquer outro app, mas irá inicializar um navegador web embutido que irá então rodar a parte visual, sendo esse navegador web a parte onde o desenvolvedor irá interagir a maior parte do tempo. O uso do navegador fica escondido do usuário final que enxerga um aplicativo em tela cheia.

Plugins são usados para fazer uma tradução dos recursos nativos do app e disponibilizá-los como recursos na linguagem Javascript.

• Componentes – Web componentes reutilizáveis que tem aparência mobile e se passam por componentes “nativos”.
• Estilo Adaptativo – A estilização dos componentes é trocada conforme a plataforma, dando um visual mais parecido com o que é esperado de cada plataforma. Essa adaptação é muito boa, embora não seja perfeita.
• Navegação – A navegação em um aplicativo mobile geralmente não é linear como em um aplicativo web. Por exemplo, o usuário pode fazer uma navegação por tabs onde ele pode ir e voltar a qualquer um dos itens. O IONIC permite que esse tipo de navegação paralela ocorra. Para aplicativos angular eles recomendam o uso do roteamento nativo do angular, já estudado.
• Acesso nativo – Projetos como Capacitor e Cordova fornecem ao IONIC acesso nativo a recursos das plataformas.
• Temas – O IONIC permite a customização dos seus estilos através de temas, por ser baseado em CSS, esse recurso é bem útil para permitir que seu aplicativo siga a identidade visual da empresa.