Aplicativos Móveis Híbridos com Ionic Framework

O Ionic é um framework de desenvolvimento de aplicativos móveis híbridos multiplataforma, ou seja, funciona corretamente em mais de uma plataforma (Android, IOS, Windows Phone, entre outros). Desde seu lançamento em 2013 o Ionic tem crescido rapidamente entre os desenvolvedores e este veio para preencher a lacuna entre aplicativos web e aplicativos móveis. O Ionic facilita e aumenta a produtividade no desenvolvimento de aplicativos móveis híbridos e é um framework de fácil aprendizagem.

O que é um aplicativo híbrido?

Aplicativos híbridos são parcialmente nativos, pois acessam, câmera, acelerômetro, push notification, leitor de código de barras entre outros, e parcialmente webs, pois utilizam HTML, CSS e Javascript que são tecnologias web. No disposito móvel, esses aplicativos rodam em um container que simula a interface de um app, mas funciona como se fosse um navegador, porém não é como um navegador tradicional que abre o aplicativo exibindo a barra de endereço e ferramentas, isso é invisível para o usuário, devido a isso, que o aplicativo funciona em várias plataformas e não é necessário escrever código para cada uma delas.

O que o Ionic framework oferece?

Primeiramente é Open Source, podemos ainda, desenvolver aplicativos móveis com tecnologias web como, HTML5, CSS e Javascript. O Ionic utiliza AngularJS para renderização do front-end.

Ionic oferece ainda uma serie de componentes prontos e uma ferramenta via linha de comando (Ionic CLI) para construir, iniciar, executar e emular um aplicativo Ionic.

O Ionic é baseado no Apache Cordova, logo, os utilitários do Cordova podem ser usados para build, deploy e testes dos aplicativos. Com as APIs Cordova, podemos acessar recursos nativos sem escrever qualquer código nativo.

Veja como é fácil e rápido iniciar uma aplicativo móvel híbrido do zero.

Primeiro será necessário instalar as dependências para que o Ionic funcione.

Instalar dependências em ambiente Linux: NODE, NPM, CORDOVA, IONIC, SDK

1. Atualizar Pacotes:

$ sudo apt-get update

2. Instalar NODE JS:

$ sudo apt-get install nodejs

3. Instalar NPM:

$ sudo apt-get install npm

4. Instalar CORDOVA:

$ sudo npm install -g cordova

5. Instalar IONIC:

$ sudo npm install -g ionic

6. Instalar SDK Android:

Você pode seguir o tutorial de instalação do SDK clicando aqui .

O Ionic oferece três estruturas existentes para iniciar o projeto, são os tipos, blank, tabs e sidemenu. Como mostra na figura abaixo.

projetos ionic

Figura 01 – Estruturas de projetos existentes

Com tudo devidamente instalado, vamos criar o projeto com nome “example” do tipo “tabs”

Criar estrutura da aplicação

Para criar a estrutura inicial do projeto, vamos utilizar o gerador do Ionic CLI. Acesse o terminal e siga os passos abaixo.

1. Criar o projeto “example” (nome do projeto) e tabs que é o tipo :

$ ionic start example tabs

E vá para a pasta do projeto

cd example

2. Adicionar plataforma Android para o app executar em Android, substitua android por ios para executar em IOS e assim para as demais plataformas :

$ ionic platform add android

Após o termino do processo, teremos essa estrutura de diretórios :

Seleção_013

Figura 02 – Estrutura de diretórios da aplicação

3. Rodar a aplicação no Navegador :

$ ionic serve

4. Listar dispositivos (Habilitado modo desenvolvedor no dispositivo) :

$ adb devices

5.  Rodar a aplicação no dispositivo com Android :

$ ionic run android --device

Pronto, rápido e fácil iniciar um aplicativo com Ionic.

Conclusão

Podemos notar que a curva de aprendizado é baixa, graças a documentação do framework e também por utilizar HTML5, CSS e Javascript, o que facilita, pois o Ionic provê uma boa variedade de componentes prontos de alta qualidade e performance, e também pelo fato da maioria dos desenvolvedores que iniciam no mundo mobile virem do desenvolvimento web. O Ionic framework conta com uma comunidade ativa e receptiva, sempre lançando correções e melhorias, não é à toa, o sucesso desse framework, onde é possível desenvolver aplicativos com excelente qualidade e desempenho.

Fica a dica em utilizar e/ou experimentar esse fantástico framework, espero que tenham gostado! Até a próxima!

Referêcias

[1] http://ionic.io/

Por PATRÍCIA GOMES DOS SANTOS SILVA

Analista de Sistemas apaixonada por front-end e boas práticas em desenvolvimento web, acredita que HTML, CSS e Javascript são a base e podemos mudar o mundo através da web.

Postado em: 08 de março de 2016

Confira outros artigos do nosso blog

[Webinar] Profile de aplicações Java com Oracle Mission Control e Flight Recorder

24 de julho de 2017

Danival Calegari

Criando Mocks de serviços REST com SoapUI

27 de junho de 2017

Monise Costa

Three laws that enable agile software development

09 de março de 2017

Celso Gonçalves Junior

Medindo performance de uma API REST

21 de fevereiro de 2017

Monise Costa

Deixe seu comentário