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?
- NodeJS
- 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