Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Ionic 2
Code

Introdução ao Ionic 2

by
Length:LongLanguages:

Portuguese (Português) translation by Francisco Freitas (you can also view the original English article)

Neste artigo vamos dar uma olhada no Ionic 2, a mais nova versão do framework Ionic para aplicativos mobile multi plataforma. Para iniciantes, vamos rever o que é o Ionic e para que ele é utilizado. Vamos mergulhar dentro do Ionic 2. Falaremos a você o que á de novo e como issso diferencia do Ionic 1 e ajudará você decidir se deveria usar em seu próximo projeto ou não.

O que é Ionic?

Ionic é uma framework para a construção de aplicativos híbridos utilizando HTML, CSS e JavaScript. Ele vem com um conjunto de componentes de UI e funções que você pode utilizar para criar aplicações mobile totalmente funcionais e atrativas.

Ionic é feito em cima do Cordova. Você não pode criar aplicações mobile apenas com o Ionic porque ele lida apenas com a parte de UI. Ele precisa funcionar com Angular, o qual trata a lógica de aplicação, e o Cordova, a framework de aplicação multi plataforma a qual lhe permite compilar sua aplicação dentro de um arquivo de intalação e executa-lo dentro do web view do dispositivo mobile.

Aplicativos criados com Cordova e Ionic podem executar em ambos dispositivos Android e iOS. Você pode instalar também plugins Cordova para disponibilizar funcionalidades nativas tais como acesso a câmera e trabalhar com dispositivos Bluetooth de Baixa Energia.

Para mais sobre o Cordova, confira alguns de nossos cursos e tutoriais aqui no Evanto Tuts+.

Ionic é mais do que apenas uma framework entretanto. A empresa Ionic também oferece serviços que apoiam a Framework Ionic UI incluindo o Ionic Creator, Ionic View e o Ionic Cloud.

O que há de novo no Ionic 2?

Nesta seção, vamos dar uma olhada em algumas mudanças significantes na versão 2 do Ionic e também as novas caractarísticas e ferramentas que foram introduzidas no Inioc 2.

Suporte ao Navegador

Inonic foi criado tendo e mente apenas aplicações mobile híbridas. Mas o Ionic 2 é criado pra suportar tanto aplicações web progressivas quanto aplicações Electron. Isto significa que agora você pode criar não apenas aplicações Ionic que executam no ambiente Cordova mas também aplicações web progressivas, as quais utilizam modernas funcionalidades web para entregar uma experiência do tipo aplicação para os usuários.

Você pode mirar também o no Electron, uma plataforma pra a criação de aplicações desktop multi plataforma utilizando HTML, CSS e JavaScript. Electron é muito prarecido com Cordova mas para sistemas operacionais desktop como Windows, Ubuntu ou macOS.

Angular 2 e TypeScript

Ionic 2 agora utiliza Angular 2 para template de lógica de aplicação. Isso significa que desenvolvedores terám que aprender a nova sintaxe do Angular 2 antes que possam se tornar produtivos na criação de aplicações Ionic 2. Não se preocupe, no entanto, por que os conceitos ainda são os mesmos do Angular 1. Existem també recursos como o ngMigrate o qual lhe ajudará a converter suas habilidades no Angular 1 em Angular 2.

Ao lado do Angular 2, o Ionic 2 também utiliza TypeScript. Para aqueles não familirizados, TypeScript é um super conjungo do JavaScript. Isto significa que você ainda pode utilizar a sintaxe JavaScript pura pra escrever suas aplicações. Se você quer utilizar as funcionalidades que vem co mTypeScript, tais como as sintaxes ES6 e ES7, static-typing e conclusão inteligente de código, então você pode utilizar a sintaxe específica do TypeScript. Existem plugins que você pode instalar no seu editor de texto ou IDE favoritos para colher os benefícios das funcionalidades avançadas de conclusão de código do TypeScript.

Sintaxe

Como mencionei, a sintaxe de template no Ionic 2 tem mudado significativamente, largamente por causa de sua transição de para usar o Angular 2. Você pode mesmo achar que a nova sintaxe é mais simples e concisa. Aqui estão alguns exemplos das sintaxes do Ionic 1 e Ionic 2 lado a lado:

Listening de eventos:

Utilizando um modelo:

Percorrendo um array e exibindo cada item:

Estrutura de Pastas

Se você comparar as estruturas de pastas de um projeto Ionic 1 e de um projeto Ionic 2, notará que muitas das pastas que você está considerando em um projeto Ionic 1 ainda estão no Ionic 2. Isto é por que a plataforma básica não mudou realmente - Ionic 2 ainda utiliza Cordova.  As únicas partes que mudaram são as partes que tem fazer seus arquivos fonte. Aqui uma captura de tela da estrutura de pastas de uma aplicação Ionic 1:

ionic 1 folder structure

E aqui está uma app feita com Ionic 2:

ionic 2 folder structure

Se olhar de perto, notará que agora há uma pasta src. É onde todos os arquivos fonte do projeto estão e toda vez que você faz mudanças em um arquivo no diretório, o arquivo modificado é complilado e copiado para o diretório www/build. Anteriormente, os arquivos fonte estavam todos no diretório www e você solicitaria um passo de compilação extra.

A estrutura de diretórios também está mais organizada. Se você checar o diretório src/pages, verá que cada página tem sua própia pasta, e dentro de cara uma estão os arquivos HTML, CSS e JavaScripts para cara página específica.

Anteriormente, no Ionic 1, você recebia um diretório vazio e tinha a liberdade de estruturar seu projeto da forma que quisese. Mas neste caso com a desvantagem de não lhe forçar a fazer as coisas da melhor forma. Você pode ficar lendo e ficar com uma estrura que agrupa todos os arquivos juntos, o qual poderia fazer coisas difíceis para times grandes trabalhado em aplicações complexas.

Temas

Diferente das versões anteriores do Ionic, as quais haviam apenas uma aparência simples para todas as plataformas, o Ionic 2 agora suporta três modos: Material Design, iOS e Windows. Agora o Ionic associa a aparência da plataforma que está sendo desenvolvido. Então se sua aplicação é instalada no Android, por exemplo, ela utilizará um estilo e comportamento similar ao de uma aplicação natiava pra Android.

Há suporte para tema no Ionic, apesar de que no tempo que escrevi este artigo, ele embaracava apenas o tema Light padrão. Se você quer dar um puxão no tema, pode editá o arquivo src/theme/variables.scss.

Ferramentas

O Ionic 2 vem também com novas ferramentas que darão prazer ao criar aplicações mobile. Lhe mostrarei um pouco neste seção. 

Geradores

Ionic 2 agora disponibiliza um gerador que lhe permite criar paginas e serviços para sua aplicação:

Isto criará os seguintes arquivos na sua pastas app/pages:

Cada arquivo também possui algum código padronizado nele:

Isto também serve como um guia para novos desenvolvedores de forma que eles saibam as melhores práticas para estruturar seu código. Aqui está o código TypeScript gerado que lida com a lógica da página acima:

Relatório de Erros

Ionic 2 agora vem com uma ferrameta de relatório de erros para o front-end. Isto significa que em a qualquer momento que apareça um erro dentro do seu código, o Ionic abrirá uma janela modal diretamente na pré-visualização da da própria aplicação. Isto torna realmente fácil para desenvolvedores encontrar erros logo que acontecem dentro da aplicação.

Scripts da App Ionic

Scripts de Aplicação Ionic são uma coleção pra a criar scripts para projetos Ionic. Anteriormente, Ionic utilizava o Gulp para tratar seu processo de construção;

Ionic 2 vem com alguns desses scripts para tornar mais fácil completar tarefas de desenvolvimento comuns. Isto inclui coisas como passas o código TypeScript para ES5, servindo o aplicativo para testar no navegador ou executando num dispositivo específico.

Você pode encontar os scripts padrões no arquivo package.json do projeto:

Novos Componentes

Componentes são os blocos de construção e UI no Ionic. Exemplos incluem botões, cartões, listas e campos de texto. Muitos dos novos componentes tem sido adicionados ao Ionic 2 e nesta seção vamos dar uma olhada em alguns deles.

Slides

Se você quer que sua aplicação tenha um guia para usuários iniciantes, o componente Slides torna fácil de criar um. Este componente lhe permite criar layouts baseados em páginas os quais o usuário pode deslizar para ler tudo sobre sua aplicação.

Folhas de Ação

Folhas de Ação são menus que deslizam para cima a partir do fundo da tela. Uma folha de ação é mostrada na camada de topo da tela, de forma que para descartá-lo você tem que clicar no espaço em branco ou escolher uma opção do menu. Isto é normalmente utilizado para confirmações tais quando você exclui um arquivo no seu dispositivo iOS.

Segmentos

Segmentos são como tabs. Eles são usados para agrupar conteúdo relacionado juntos de forma que o usuário apenas veja o conteúdo do segmento selecionado. Segmentos são mais usados com listas para filtrar itens relacionados.

Toast

Toasts são a versão sutil de alertas. Eles são geralmente usadas para informar ao usuário que algo tem acontecido no qual requer alguma ação do usuário. Eles frequentemente exibem no topo ou fundo das páginas de forma que não interfira no conteúdo sendo exibido. Eles também desaparacem depois de um número específico de tempo.

Barra de Ferramantas

Uma Barra de Ferramentas é utilizada como um recipiente para informações e ações que estão localizadas no cabeçalho ou rodapé da aplicação. Por exemplo, o título da tela atual, botões, campos de busca e segmentos estão frequentemente contidos em uma barra de ferramentas.

DateTime

O componente DateTime é utilizado para mostrar a UI para mostrar datas e tempos. A UI é similar a uma gerada utilizando o elemento datetime-local, a única diferença é que este componente vem com uma API JavaScript fácil de usar. Anteriormente, Ionic não tinha um componente para trabalhar com datas e tempos. Você tinha que usar tanto o date picker nativo do navegador ou instalar um plugin.

Botões Flutuantes

Botões de Ação Flutuantes (FABs) são botões que estão fixos em uma área específica da tela. Se você tem utilizado o aplicativo do Gmail, o botão para compor uma nova mensagem é um botão de ação flutuante. Eles não são limitados a uma única ação por que eles podem expandir para exibir outros botões flutuantes quando tocados.

Para mais informação a respeito dos novos componentes, verifique a documentação nos componentes.

Novos Recursos e Melhorias

Ionic 2 também está empacotado com novas funcionalidades e aprimoramentos. Estes são principalmente devido à sua transição para Angular 2 e TypeScript. 

API de Animações Web

Um benefício de mudar para o Angular 2 é o novo sistema de animações do Angular, feito no topo da API de Animações Web. Note que a API de Animações Web não é suportada por todos os navegadores - isso por que você precisa usar Crosswalk para instalar um navegador compatível ao longo de sua aplicação.  A única desvantagem disto é que ele fará a instalação maior. Outra opção é utilizar um polyfill.

Performance

Aplicações criadas com Ionic 2 são mais rápidas do que aquelas criados com Ionic 1. Aqui está o porquê:

  • Angular 2: a manipulação do DOM e o desempenho do JavaScript tem melhorado muito no Angular 2. Você pode verificar esta tabela se você quer aprender sobre as especificações. Outro benefício que vem com o Angular 2 é a compilação antes do tempo - templates são pré compilados ustilizando uma ferramenta de construção ao invés de serem compilados assim que a aplicação executa no browser. Isso faz a aplicação inicializar mais rápido por que não há mais necessidade de compilar os templates na execução.
  • Deslocamento Nativo: Ionic não utiliza mais o deslizamento do JavaScript. Ao invés, agora usa o deslizamento nativo para WebViews suportados. Ele também agora está habilitado para todas as plataformas (como o oposto de ser suportado apenas para Android no Ionic 1). Ao lado do deslizamento nativo, há também o Virtual Scroll, o qual permite o deslizamento em uma vasta lista de itens com pouco desempenho comprometido. Estas duas mudanças adicionam um desempenho de rolagem mais suave.
  •  Web Workers: Web Workers lhe permite executar scripts no plano de fundo isolado da thread que executa a página web. Ionic 2 implementa web workers pelo seu componente ion-img. Utilizando este componente ao invés do elemento img padrão permite você delegar as requisições HTTP para buscar as imagens para um web worker. Isto faz o carregamento de imagens mais rápido, especialmente dentro de longas listas. O componente ion-img também lida com carregamento lento, o qual irá requisitar e renderizar apenas quando a imagem se tornar visível na viewport.  

Ionic Native

Ionic Native é o equivalente do ngCordova para Ionic 2. Ambos atuam como arcabouços para os plugins Cordova para implementar funcionalidade nativa (ex. Câmera, Geolocalização). Você pode também usar o Ionic Native na sua aplicação Ionic 1 se quiser. A principal diferença é que o Ionic Native lhe permite escrever seu códgo utilizando funcionalidades do ES6 e sintaxe TypeScript. Isto torna mais fácil de trabalhar com Ionic 2 desde que ele já use TypeScript por padrão. Aqui está um expemplo de como implementar o plugin de Câmera do Cordova no ngCordova.

E aqui está como isto é feito utilizando o Ionic Native:

Documentação

A documentação tem melhorado muito. Eu especialmente gosto do fato de que agora existem diferentes pré visualizações para cada componente em cada plataforma.  Isto dá aos desenvolvedores uma boa ideia de como suas aplicação deveriam parecer. Tudo isso sem o desenvolvedor escrever uma única linha de código!

Você Deve Usar o Ionic 2?

Na época que escrevi este artibo, o Ionic 2 tinha sido lançado. Isto significa que está pronto para ser usado para produção de aplicativos. Considerando todas as funcionalidades, ferramentas e benefícios que vem com o Angular 2 e TypeScript, a única coisa que irá lhe impedir de usar o Ionic 2 é a situação do seu projeto.

Se você está iniciando um novo projeto, você ainda pode usar o Ionic 1 se você e seus colegas são familiares apenas com o Angular 1 e seu projeto precisa ser concluído o quanto antes. Mas se tiver dado tempo o suficiente para o projeto, você deveria considerar utilizar o Ionic 2. Haverá uma pequena curva de aprendizado e você também encontrará alguns incidentes por que não é uma batalha testada como no Ionic 1, mas vale a pena todo o esforço por causa dos novos recursos e melhorias do Ionic 2.

Se você já iniciou seu projeto atual com o Ionic1, provavelmente irá querer espiar com o Ionic 1 e evitar uma maior sobrescrita. Não se preocupe demais sobre suporte, melhoramentos e ajuste de bugs para o Ionic 1 - os desenvolvedores Ionic tem comitado para apoiar o Ionic 1 por um longo tempo. Por quanto tempo ainda não se sabe. No mínimo, ele vai ser apoiado por um par de anos depois da versão estável do Ionic 2  ser lançada. Mas preciamos ter em mente também que o Ionic é um projeto open-source com mais de 200 contribuidores. Assim, enquanto as pessoas continuarem a usá-lo, podemos sempre esperar alguma forma de apoio da comunidade.

Conclusão

É isso! Neste artigo você aprendeu tudo sobre o Ionic 2. Especificamente, você aprendeu sobre significantes diferenças entre o Ionic 2 e seus predecessores. Também demos uma olhada nas novas funcionalidades adicionadas ao Ionic 2 e se você deveria usá-lo para seus projetos futuros ou não. Em um tutorial futuro, nós vamos colocar este conhecimento em prática criando uma aplicação Ionic 2. Fique ligado!

Se você quer aprender mais sobre o Ionic 2, certifique-se de verificar os seguintes recursos:

E obrigado, temos um curso aprofundado de Ionic 2 que você pode acompanhar, aqui mesmo no Evanto Tuts+! 

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.