Tableless

Busca Menu

Tutorial Ionic – Meu primeiro app

Seja o primeiro a comentar por

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.

npm install -g ionic cordova

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.

ionic start weather blank

estrutura de páginas 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.

Diálogo de permissão de localização via html5

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

cordova plugin add org.apache.cordova.geolocation

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

bower install ngCordova

E importar no arquivo www/index.html.

<script src="lib/ngCordova/dist/ng-cordova.js"></script> 
<script src="cordova.js"></script> 

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

(function() {
    angular.module('weather', ['ionic', 'ngCordova'])
        .run(function($ionicPlatform) {
            $ionicPlatform.ready(function() {
                // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
                // for form inputs)
                if (window.cordova && window.cordova.plugins.Keyboard) {
                    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
                }
                if (window.StatusBar) {
                    StatusBar.styleDefault();
                }
            });
        });
})();

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.

(function() {
    angular.module('weather', ['ionic', 'ngCordova'])
        .run(function($ionicPlatform) {
            $ionicPlatform.ready(function() {
                // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
                // for form inputs)
                if (window.cordova && window.cordova.plugins.Keyboard) {
                    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
                }
                if (window.StatusBar) {
                    StatusBar.styleDefault();
                }
            });
        })
        .factory('Weather', function($http) {

        })
        .controller('WeatherCtrl', function($scope, Weather) {

        });
})();

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

<body ng-app="weather" ng-controller="WeatherCtrl as weatherCtrl">
    <ion-pane>
        <ion-header-bar class="bar-stable">
            <h1 class="title">Weather</h1>
        </ion-header-bar>
        <ion-content>
            
        </ion-content>
    </ion-pane>
</body>

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

.factory('Weather', function($q, $http) {
            var deferred = $q.defer();

            function getCurrentWeather(lat, lng) {
                var url = 'https://api.forecast.io/forecast/SUA_CHAVE_DE_API/' + lat +',' + lng + '?callback=JSON_CALLBACK';
                $http.jsonp(url)
                    .success(deferred.resolve)
                    .error(deferred.reject);

                return deferred.promise;
            }

            return {
                getCurrentWeather: getCurrentWeather
            };
        })

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.

.controller('WeatherCtrl', function($scope, $cordovaGeolocation, Weather) {
            $scope.loading = true;

            $scope.toCelsius = function(temperature) {
                return ((temperature - 32) / 1.8).toFixed(1);
            };

            $cordovaGeolocation
                .getCurrentPosition({
                    timeout: 10000,
                    enableHighAccuracy: false
                })
                .then(function(position) {
                    var lat = position.coords.latitude;
                    var long = position.coords.longitude;

                    Weather.getCurrentWeather(lat, long).then(function(data) {
                        $scope.weatherInfo = data;
                        $scope.loading = false;
                    }, function(error) {
                        //TODO Display error message
                    });
                }, function(err) {
                    //TODO Display error message
                });
        });

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.

<body ng-app="weather" ng-controller="WeatherCtrl as weatherCtrl">
    <ion-pane>
        <ion-header-bar class="bar-stable">
            <h1 class="title">Weather</h1>
        </ion-header-bar>
        <ion-content class="text-center">
            <div ng-show="loading">
                Carregando informações...
            </div>
            <div ng-hide="loading">
                <p>
                    Temperatura: {{toCelsius(weatherInfo.currently.temperature)}}º
                </p>
                <p>
                    Sensação térmica: {{toCelsius(weatherInfo.currently.apparentTemperature)}}º
                </p>
            </div>
        </ion-content>
    </ion-pane>
</body>

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

ionic serve

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.

ionic platform add android

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

Criação do projeto Android

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

ionic run android

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

Publicado no dia