Compartilhe esta publicação
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:
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.
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.
Ele utiliza o Gulp para automatização de tarefas, como compilar o código SASS em CSS.
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.
Não possui depedência do jQuery, embora você possa adicioná-lo caso queira.
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).
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:
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