Tutorial Ionic – Meu primeiro app

Introdução Após publicar uma breve introdução do Ionic Framework, vamos agora tentar construir uma app que consiga abordar o uso de componentes nativos de um celular assim como o build para as determinadas plataformas. Para isso, ao decorrer deste tutorial, vamos construir uma app bastante simples que utiliza a posição do usuário para exibir os

Introdução

Após publicar uma breve introdução do Ionic Framework, vamos agora tentar construir uma app que consiga abordar o uso de componentes nativos de um celular assim como o build para as determinadas plataformas.

Para isso, ao decorrer deste tutorial, vamos construir uma app bastante simples que utiliza a posição do usuário para exibir os dados do tempo na tela.

O que é necessário?

  1. NodeJS
  2. NPM

Após instalar os 2, vamos instalar o ionic e o cordova como módulos globais.

Criando o projeto

Para criar a estrutura inicial do projeto, vamos utilizar o gerador do Ionic CLI. Como o app é bastante simples, vamos utilizar o gerador blank do ionic.

Podemos ver então a estrutura de pastas inicial do projeto. Inicialmente vamos mexer somente no conteúdo da pasta www que é onde se encontra nosso projecto html, css e js.

APIS e Plugins utilizados

Para fazer a captura dos dados meteorológicos vamos utilizar uma API gratuita chamada Forecast for Developers. Para fazer a captura dos dados temos que utilizar um plugin do Cordova de Geolocalização. É importante dizer que não é recomendável utilizar o navigator.geolocation nativo pois ele irá pedir permissão para o usuário com frequência e irá mostrar uma mensagem não amigável para isso como a imagem abaixo ilustra.

Para instalar o plugin de geolocalização do Cordova, basta rodarmos o comando abaixo na pasta do projeto.

Após instalado o plugin do cordova, vamos instalar uma lib que tem implementado a comunicação com alguns plugins do Cordova de uma forma mais amigável para o AngularJS que é o ngCordova.

Para instalar o ngCordova basta rodar

E importar no arquivo www/index.html.

Após feito isso, devemos avisar para o AngularJS que nosso projeto depende deste módulo. Esta definição está no arquivo www/js/app.js

Desse momento em diante temos acesso a todos os módulos do ngCordova.

Organização

Como a App é bastante simples, não vamos fragmentar a implementação em diversos arquivos. Vamos focar em construir apenas utilizando o app.js. Vamos então construir 2 componentes no AngularJS, o serviço Weather para se comunicar com a API e o controller WeatherCtrl para fazer a ponte entre a nossa view e a api.

Após feito isso, devemos fazer o bind entre o WeatherCtrl e o nosso HTML.

Feito isso, devemos então implementar o acesso aos dados da API através de uma posição geográfica.

O serviço retorna uma promise que é o retorno da chamada JSONP para a API que iremos capturar no controller após acessarmos a localização do dispositivo.

Com o serviço pronto, vamos então fazer a chamada ao GPS no controller e com a posição, vamos capturar os dados meteorológicos.

Se vocês repararem, eu adicionei umas variáveis ao escopo para controlar se está carregando dados ou não e para converter de Fahrenheit para Celsius que usaremos posteriormente no nosso HTML.

Com o controller preparado vamos então preparar o nosso HTML para mostrar uma imagem de carregamento enquanto não demos os dados e posteriormente mostrar a temperatura e a sensação térmica em celsius.

Para visualizar o resultado podemos rodar o projeto no navegador utilizando o comando

Gerando as builds para o celular

Para gerar as os pacotes de App para celular basta rodarmos alguns comandos no Ionic CLI. É importante ressaltar que para criar o projeto iOS é necessário possuir um computador OSX.

Adicionando as plataformas

Para adicionarmos as plataformas em que vamos compilar nossa app bastar rodar o comando ionic platform add PLATFORM passando a plataforma desejada. Para efeitos de teste, vamos utilizar apenas o Android.

Após rodar esse comando vamos ver que o Ionic está criando um projeto Android dentro da pasta platforms.

A partir daí não precisamos fazer mais nada! Basta rodar a app em seu aparelho ou emulador através do comando

Este comando irá fazer o build e enviar para o celular que estiver conectado ou emulador que estiver aberto.

Para quem quiser, o projeto está disponível no Github

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *