Ionic Framework

Aplicativos mobile com o AngularJS e Ionic

Introdução

Os desenvolvedores web vem a cada dia mais se tornando desenvolvedores mobile. Isso vem acontecendo graças ao surgimento de tecnologias de desenvolvimento de aplicativos mobile hí­bridos, onde o desenvolvedor consegue utilizar as mesmas tecnologias já conhecidas por ele na web para criar aplicativos que rodem em múltiplas plataformas. Não necessitando aprender as linguagens nativas das plataformas mobile.

Atualmente existem várias tecnologias para desenvolvimento mobile onde o aplicativo é portado para diversas plataformas, como o Titanium, o PhoneGap, o Xamarin, o Delphi XE7, etc.

O Ionic Framework é uma dessas tecnologias e vem ganhando destaque nos últimos meses. O Ionic é um framework front-end open source que utiliza o poder do HTML5 e do AngularJS para entregar uma experiência de usuário fluí­da e um rápido desenvolvimento.

Os aplicativos Ionic são baseados no Cordova, logo, os utilitários do Cordova podem ser usados para build, deploy e testes dos aplicativos.

Por que o Ionic?

"Mas por que usar o Ionic se eu posso utilizar o Onsen UI ou o fazer tudo do zero em cima do Cordova?". Existem algumas caracteríticas do Ionic que vão ajudar a responder essa questão:

  1. O Ionic trabalha muito bem com o AngularJS. Os componentes de interface do Ionic são diretivas do AngularJS. Além disso o Ionic utiliza o UI-Router para gerenciar as rotas e estados das views. Ao utilizar o Ionic você pode manter múltiplos históricos de navegação dentro de seu aplicativo, permitindo que você crie aplicativos com navegação não linear.
  2. Todo o CSS é gerado a partir do SASS e foi projetado para ser sobrescrito, tornando-o mais fácil para desenvolvedores personalizarem seus aplicativos. O CSS do Ionic é independente da camada de JavaScript, permitindo uma maior liberdade no desenvolvimento. Ele utiliza um sistema de grids baseado no Flexbox do CSS3, onde é possível criar layouts com qualquer quantidade de colunas e, inclusive, alinhar o conteúdo verticalmente dentro das colunas.
  3. Ele utiliza o Gulp para automatização de tarefas, como compilar o código SASS em CSS.
  4. O framework é obcecado por performance, com uma interface rápida e consistente. Ele utiliza recursos de aceleração de hardware e busca manipular minimamente o DOM.
  5. Não possui depedência do jQuery, embora você possa adicioná-lo caso queira.
  6. Por ser um framework front-end, é possí­vel utilizar os navegadores para o desenvolvimento. Fazendo bom uso das ferramentas de debug presentes nos navegadores é possí­vel desenvolver boa parte dos aplicativos (tudo o que não façaa uso das APIs nativas dos dispositivos móveis).
  7. Comunidade forte e ativa. Como o AngularJS é, atualmente, o framework javascript mais popular entre os desenvolvedores front-end, grande parte desses desenvolvedores optam por utilizar o Ionic e isso acaba fortalecendo cada dia mais a sua comunidade.

Instalação

Para utilizar o Ionic é necessário que você tenha o Node.js instalado.

Após instalar o Node.js é necessário instalar o Cordova e o Ionic através da seguinte linha de comando:

npm install -g cordova ionic

Assim que a instalação estiver completa você pode iniciar um novo projeto utilizando um template. Os templates disponí­veis são: blank, tabs e sidemenu. O primeiro é um template vazio, com o mí­nimo necessário para se ter um aplicativo Ionic, o segundo é um template que possui abas de navegação e o terceiro possui um menu lateral.

Para inicar um projeto utilizando um desses templates é só executar um dos comandos a seguir:

ionic start myApp blank
ionic start myApp tabs
ionic start myApp sidemenu

Onde myApp é o nome do aplicativo que você irá criar, ou seja, você pode substituí­-lo por qualquer outro nome. Poderia ser tableless ou tablelessApp por exemplo.

ionic start tablelessApp sidemenu

Após iniciar o aplicativo você deve adicionar as plataformas para o qual ele será publicado. Lembre-se que para desenvolver para iOS você precisa estar desenvolvendo em um Mac OS.

cd tablelessApp
ionic platform add ios
ionic platform add android

Agora você já pode fazer o build de seu aplicativo e executar ele no emulador da plataforma desejada.

ionic build ios
ionic emulate ios

É assim que seu aplicativo deve estar parecendo agora:

Ionic Side Menu - Home

Conclusão

Neste artigo nós vimos por que utilizar o Ionic Framework e como começar o desenvolvimento com o mesmo. Para que o artigo não fique muito extenso termino o mesmo por aqui, mas voltarei, em breve, com um tutorial onde explicarei como criar um aplicativo utilizando o Ionic.

Entretanto, fique a vontade para explorar as possibilidades do framework através dos links abaixo.

Site: http://ionicframework.com
Tutoriais: http://learn.ionicframework.com
Fórum: http://forum.ionicframework.com
GitHub: http://github.com/driftyco/ionic

Jean Lucas de Carvalho

Instrutor at Futuring
Desenvolvedor Front-end na HE:labs e instrutor na Futuring, especialista em aplicativos híbridos com Cordova e Ionic Framework, faxineiro do Frontend Goiás, ex-subcelebridade do Google Developer Bus Brazil, sedentário e o lindão ali da foto. Tudo isso quando não está com preguiça demais pra fazer alguma coisa.

Latest posts by Jean Lucas de Carvalho (see all)

Comentários

One thought on “Aplicativos mobile com o AngularJS e Ionic

  1. Pingback: A introdução que faltava ao Ionic 2 | Front In Brazil