Blog Tecnológico

Criando um aplicativo que consome dados da nuvem com Ionic

Renato Probst • 01 nov 2016 • Angular & Ionic

Criando um aplicativo que consome dados da nuvem com Ionic

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:

comando-ionic-eng-dtp-multimidia

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:

adicionar-plataformas-ionic-eng-dtp-multimidia

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.

compilar-ionic-eng-dtp-multimidiaDentro 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:

arquivos-java-eng-dtp-multimidia

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:

app-js-eng-dtp-multimidia

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:

controllers-js-eng-dtp-multimidia


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:

services-js-eng-dtp-multimidia


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:

conteudos-eng-dtp-multimidia

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

nome-abas-eng-dtp-multimidia

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.

visualizacao-eng-dtp-multimidia

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.

instalar-aplicacao-eng-dtp-multimidia

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.

Gostou deste conteúdo?




 

 

Renato Probst

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.

Prvacidade e Proteção de Dados | ENG DTP & Multimídia

ENG DTP & Multimídia - Logo

 

 

ENVIE SEU CONTATO e SEUS COMENTÁRIOS

ENG DTP & Multimídia

ENG DTP & Multimídia. Todos os direitos reservados.
Nossa Política de Privacidade e Proteção de Dados.