Blog Tecnológico

Criando um aplicativo que consome dados da nuvem com Ionic

Renato Probst • 01 nov 2016

Neste artigo veremos como é fácil criar um aplicativo híbrido para Android e iOS que consome dados da nuvem utilizando o Ionic.

Antes de tudo, vamos precisar que você realize os procedimentos de instalação do Ionic seguindo os passos descritos no link abaixo:

Instalando o Ionic

Agora que você já está com o ambiente de desenvolvimento instalado, vamos botar a mão na massa!!

O Ionic realiza a maior parte dos seus procedimentos de Build (geração e configuração de código) através do Ionic cli, a ferramenta de linha de comando do Ionic, portanto vamos abrir o terminal do sistema operacional na pasta em que queremos criar o projeto e utilizar o seguinte comando:

ionic

Este comando cria um projeto chamado "meuPrimeiroAplicativo" do tipo “tabs” na pasta selecionada.

O Ionic possui 3 tipos iniciais de projeto: tabs, sidemenu e blank. O tabs cria um app com navegação através de abas, o sidemenu gera uma aplicação com menu lateral e o blank gera um aplicativo em branco.

Agora precisamos adicionar as plataformas para as quais queremos desenvolver:

ionic

Você pode utilizar este mesmo comando para adicionar outras plataformas, como iOS e Windows Phone. Lembrando que para compilar para iOS é necessário utilizar um Mac.

ionic

Dentro da pasta inicial do nosso projeto vamos encontrar uma pasta chamada “www”. Dentro da pasta “www” ficam os arquivos relacionados ao desenvolvimento do nosso projeto: os arquivos css, js, imagens e o index.html.

O desenvolvimento em Ionic é baseado principalmente em Javascript, portanto vamos abrir a pasta js e trabalhar com os arquivos dentro dela:

ionic

O arquivo app.js gerencia as configurações de dependência do projeto e o sistema de rotas.

O Ionic utiliza um sistema de rotas para direcionar o usuário para um determinado controlador quando a url da barra de endereços for modificada (por um link por exemplo).

Vamos deixar o nosso app.js da seguinte forma:

ionic

O arquivo controllers.js define os controladores e as regras de negócio do nosso app. Cada controlador do app acessa uma tela .html.

 

Vamos deixar o nosso arquivo controllers.js da seguinte forma:

ionic


Basicamente adicionamos 2 controladores, um para um array de fotos e outro para um array de postagens, cada um deles acessa o seu respectivo Service que realiza a chamada para a API de dados.

 

O arquivo services.js define os serviços da aplicação. Um serviço é responsável por executar algum tipo de regra de negócio, como um conjunto de funções relacionadas, uma DAO (chamadas para o webservice), etc.


Vamos deixar o nosso arquivo services.js da seguinte forma:

ionic


Criamos 2 serviços. Um para a busca de fotos e o outro para a busca de postagens. A api RESTful utilizada vem de um site que contém exemplos de API RESTful para testes.

Pronto, a nossa lógica de negócios está pronta, agora só precisamos alterar os nossos arquivos .html para adequá-los ao retorno do nosso json.

Vamos utilizar 3 arquivos .html na pasta templates com os seguintes conteúdos:

ionic

Esta é a tela que controla as abas. Neste arquivo definimos a quantidade, ícones e nomes das abas.

ionic

Esta é a tela de postagens, aqui basicamente utilizamos a diretiva ng-repeat para gerar uma visualização para cada postagem dentro da lista de postagens.

ionic

Esta é a tela de fotos, aqui basicamente utilizamos a diretiva ng-repeat para gerar uma visualização para cada foto dentro da lista de fotos.

Agora só falta instalar o aplicativo no dispositivo, sugiro a utilização do emulador Genymotion para Android, porém o aplicativo também pode ser instalado em um dispositivo conectado através da porta usb.

ionic

Para compilar e rodar o aplicativo utilizamos o comando “ionic run android”.

 

Assim terminamos o nosso tutorial de consumo de dados na nuvem utilizando Ionic. Pudemos ver que o consumo de uma API de dados pode ser feito facilmente através do Ionic.

Uma das principais vantagens do Ionic é a forma como ele liga o layout (html) com os controladores (javascript). Este sistema é chamado de two-way-binding e permite que as variáveis sejam compartilhadas entre os controladores e o código html.

Quando uma alteração é feita em uma variável, ela é refletida dos 2 lados, tanto no javascript, quanto no html, em tempo real.

Renato Probst

Renato Policeno Probst – Formado em Sistemas para Internet, com especialização em Aplicativos Móveis e Computação em Nuvem. Experiência com diversas linguagens de programação voltadas para desenvolvimento mobile (Android, Swift, Cordova, Ionic, SQLite) e desenvolvimento web (PHP, HTML5, CSS, Javascript, mySQL, RESTful).

Possui em seu portfólio mais de 12 aplicativos publicados, entre eles aplicativos para venda e classificado de veículos, CRMs, aplicativos para streaming de áudio, jogos, POS, guia de serviços, entre outros.

Também possui em seu portfólio sites e apis em tecnologia RESTful. Atua atualmente como instrutor na ENG, onde ministra cursos de desenvolvimento mobile, já tendo ministrado cursos para empresas como Grupo RPC, Prodesp, Banco do Brasil, SENAI e TRE, além de dezeas de alunos nos laboratórios da ENG SP, PR e DF.

CONTATO