Começando com Ionic

Imagem para Começando com Ionic

Front endPostado em  2 min de leitura

O Ionic é um framework para construir aplicações no sentido nativo para dispositivos móveis, utilizando as linguagens web como HTML, CSS e JavaScript.

Criado no final de 2013, visando a construção de aplicações híbridas. Sendo voltado para a aparência e interação da interface da aplicação com o mesmo. Em sua documentação deixa bem claro que não é um substituto para o PhoneGap ou seu preferido framework de JavaScript. A ideia é se encaixar com os seus projetos e simplicar grande parte da sua aplicação no lado do front-end.

O framework exige atualmente o AngularJS, para trabalhar todo o seu potencial. Se integra com os recursos nativos dos dispositivos por meio do Cordova e disponibiliza ferramentas e componentes com o Ionic Module e Ionic CLI.

Instalação

Para começar, precisamos primeiramente ter o NodeJS e NPM, instalados.

Podendo ser baixado, aqui: NodeJS com NPM

E agora, será necessário instalar globalmente o ionic e o cordova:

npm install -g ionic cordova

Criando um projeto

Usando o gerador do Ionic CLI, utilizaremos o comando:

ionic start nomeDoApp tipo

Onde:

nomeDoApp = Nome da sua aplicação. tipo = Tipo do projeto base(Existem 3 tipos: tabs, blank e sidemenu.).

Visualizando o projeto

Com o projeto criado, podemos rodar o projeto para visualizá-lo com o comando:

ionic serve

Para simular um dispositivo móvel com android por exemplo, podemos utilizar os comandos abaixo:

ionic platform add os
ionic build os
ionic emulate os

Onde:

os = plataforma(android ou ios)

Até o momento apenas simulei com o android e você precisa ter instalado o Java Development Kit (JDK) e o Android SDK

Links interessantes

Ionic Creator Aqui você pode criar a interface para as páginas com os elementos disponíveis

Ionic Playground Funciona como o jsfiddle, voltado para o Ionic

Ionic Material Design Para resolver uma boa parte de problemas com layout

Observações

Precisando utilizar os recursos nativos dos dispositivos, todos os recursos do Cordova estarão disponíveis para isso. E também pode contar com o módulo ngCordova do AngularJS.

O Ionic usa o GulpJS para automatizar as tarefas de compilar o SCSS, coffeeScript e rodar o servidor para visualizar o projeto. Os mesmos são opcionais.

Conclusão

Nos dias de hoje, ter uma aplicação web e ainda desenvolver nativamente para android e IOS, além de gastar mais recursos, tempo e mais códigos para manter, é complicado. Por isso, ter uma aplicação hídrida com o Ionic, resolve boa parte dos problemas, com mais rapidez e facilidade para o desenvolvimento da sua aplicação.

Confira o site do framework e sua documentação para mais detalhes.