Aplicativos mobile com o AngularJS e Ionic Framework

Aplicativos mobile com o AngularJS e Ionic Framework

#Aplicativos mobile com o AngularJS e Ionic Framework


##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 híbrido, como o [Titanium](http://www.appcelerator.com/titanium/), o [PhoneGap](http://phonegap.com/), o [Xamarin](http://xamarin.com/), o [Delphi XE7](http://www.embarcadero.com/br/products/delphi), etc.

O [**Ionic Framework**](http://ionicframework.com) é uma dessas tecnologias e vem ganhando destaque nos últimos. O Ionic é um framework front-end open source que utiliza o poder do HTML5 e do [AngularJS](https://angularjs.org/) para entregar uma experiência de usuário fluída e um rápido desenvolvimento.

Os aplicativos Ionic são baseados no [Cordova](http://cordova.apache.org/), logo, os utilitário 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](http://onsenui.io/) ou o fazer tudo do zero em cima do Cordova?". Existem algumas características 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](http://angular-ui.github.io/ui-router/site/#/api/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](http://sass-lang.com/) 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](http://tableless.com.br/flexbox-organizando-seu-layout/) 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](http://gulpjs.com/) 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](http://tableless.com.br/tenha-o-dom/).
5. Não possui depedência do [jQuery](http://jquery.com/), 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ça 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](http://nodejs.org/) 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](https://lh3.googleusercontent.com/-uEcHYJ0qICQ/VBM65n8VXzI/AAAAAAAABjE/SOH_Hx60tIY/s0/Captura+de+Tela+2014-09-12+a%CC%80s+15.28.13.png "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](http://ionicframework.com)
Tutoriais: [http://learn.ionicframework.com](http://learn.ionicframework.com)
Fórum: [http://forum.ionicframework.com](http://forum.ionicframework.com)
GitHub: [http://github.com/driftyco/ionic](http://github.com/driftyco/ionic)