Guia de Programação Mobile e Framework Ionic

Conceitos de Programação Mobile

Atualmente, no desenvolvimento de aplicações mobile, temos três tipos principais de desenvolvimento: Nativo, Híbrido e PWA.

Desenvolvimento Nativo: É muito difícil encontrar o desenvolvimento de uma solução que agregue apenas uma plataforma (a menos que seja estratégico). Os programadores precisam ter proficiência em cada uma das linguagens e precisam manter dois desenvolvimentos paralelos da mesma solução.

Desenvolvimento Híbrido: Um único desenvolvimento para várias plataformas. O desenvolvedor deve possuir proficiência em algum tipo de desenvolvimento web. Desvantagens: Entretanto, aplicações híbridas normalmente têm mais problemas de compatibilidade, principalmente em relação aos componentes.

PWA (Progressive Web Apps): Aplicações Web Progressivas. Nada mais são do que aplicações web que se tornam um app. Basta acessar um site com esse mecanismo pelo navegador do seu celular e adicioná-lo à sua tela inicial.

• Vantagens: O usuário não precisa baixar o aplicativo; é responsivo; existem tecnologias para manter a aplicação offline; é seguro.
• Desvantagens: Problemas de compatibilidade; limitações em notificações push da web.

O que é o Ionic?

O Ionic é uma biblioteca que ajuda a escrever apps híbridos usando tecnologias como HTML, CSS e JavaScript.

Por que o Ionic é tão atraente para o mercado?

Antigamente, era uma "venda casada" entre Ionic e TypeScript. Agora, seu novo conceito permite trabalhar com React, JavaScript puro, Angular, TypeScript e qualquer outro framework. Ele utiliza um hardware mais leve, é mais flexível para a maioria dos times existentes em uma empresa, possui uma documentação considerada excelente entre muitos desenvolvedores e é fácil de capacitar.

Ionic 1 vs. Ionic 2 e 3 vs. Ionic 4

O Ionic 1 foi criado utilizando como base o AngularJS. Naquele tempo, seu layout inspirava-se muito no framework Bootstrap e ainda não possuía todos os componentes nativos.

Com o tempo, o Angular evoluiu muito seu framework e passou a utilizar TypeScript (propriedade da Microsoft) em vez de JavaScript. A estrutura de código e do projeto mudou bastante.

O Ionic acompanhou essas mudanças e lançou as versões 2 e 3. Nessas versões, criou-se o suporte ao PWA e ao Electron (aplicações desktop que utilizam recursos mobile).

Ionic Versão 4

Assim, a nova versão do Ionic ganhou suporte aos Web Components (containers web), o que possibilitou a flexibilidade de utilizar o Ionic com outros frameworks.

Ionic Grid

Diferentemente da lógica do Bootstrap, no Ionic não existe a limitação de 12 espaços por grid, porém ele pode ser usado dessa forma também. Existem várias formas de garantir a responsividade entre dispositivos.

• Interpolação: A interpolação é o caminho mais rápido de mostrar na tela o valor de uma variável ou atributo. Ex: {{nome}}.
• Property Bindings: Utilizamos as property bindings quando queremos passar o valor de um atributo HTML dinamicamente. A maneira mais comum de utilizarmos esse recurso é inserirmos colchetes [ ] no início e no fim do nome do atributo HTML.
• Events Bindings: Podemos também realizar o binding em eventos. Para isso, utilizamos os parênteses ( ) no início e no final do nome do evento.

Pilha de Páginas (Stack of Pages)

Conceito utilizado para navegar entre as páginas.

Funcionamento:

• Inserindo uma nova página na pilha;
• A página atual é a que foi incluída por último;
• Removendo a página atual para retornar à anterior.