Per comprendere come utilizzare un plugin Cordova tramite Ionic Native, integriamo la nostra applicazione d'esempio con la funzione di geolocalizzazione. La prima cosa da ricordare è che i plugin non sono parte del framework e che per cominciare occorre installare il plugin che ci interessa, nel nostro caso quello per il GPS e la geolocalizzazione, all'interno dell'applicazione:
ionic plugin add cordova-plugin-geolocationOra, supponendo che il nostro server supporti la funzione di geolocalizzazione delle notizie, modifichiamo la nostra applicazione in modo tale da richiedere un risultato filtrato in base alla distanza dalla posizione geografica in cui si trova il dispositivo.
Per ottenere questo risultato le chiamate HTTP indirizzate al server devono contenere le coordinate correnti del dispositivo. Integriamo quindi il componente HomePage della nostra applicazione con un po' di codice come mostrato di seguito:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {News} from '../../components/news/news';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import {Geolocation} from 'ionic-native';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
newsList: Array<News>;
constructor(public navCtrl: NavController, public http: Http) {
Geolocation.getCurrentPosition()
.then(position => {
let url = `http://myserver.com/news
${position.coords.latitude}/${position.coords.longitude}`;
this.http.get(url)
.map(res => res.json())
.subscribe(data => {
this.newsList = data;
});
});
}
}Le differenze principali rispetto alla versione precedente riguardano l'importazione e l'utilizzo del plugin Geolocation nel modulo. Come possiamo vedere, la chiamata HTTP al server viene ora effettuata dopo aver acquisito le coordinate correnti del dispositivo tramite il metodo getCurrentPosition() di Geolocation. Il metodo restituisce una Promise la cui risoluzione fornisce un oggetto contenente le coordinate, le quali vengono utilizzare per costruire l'URL dellla Web API verso cui inoltrare la richiesta HTTP.
Il plugin Geolocation, quindi, consente di ottenere le coordinate correnti del dispositivo in maniera abbastanza semplice. Tuttavia la soluzione appena vista non è esente da possibili problemi di sincronizzazione tra framework e interfacce native dei dispositivi. In altre parole, dal momento che il caricamento dei plugin e l'interazione con i dispositivi esterni al framework avviene in maniera asincrona, nessuno ci garantisce che il sistema di geolocalizzazione sia pronto a fornire i dati che ci servono nel momento in cui li chiediamo.
È sempre importante assicurarsi che il componente sia pronto prima di invocare le sue funzionalità. Questo in generale vale per tutti i plugin, non solo per la geolocalizzazione. Per ottenere questa assicurazione possiamo far ricorso al componente Platform, come mostrato di seguito:
import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import {News} from '../../components/news/news';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import {Geolocation} from 'ionic-native';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
newsList: Array<News>;
constructor(public navCtrl: NavController, public http: Http, platform: Platform) {
platform.ready(() => {
Geolocation.getCurrentPosition()
.then(position => {
let url = `http://myserver.com/news${position.coords.latitude}/${position.coords.longitude}`;
this.http.get(url)
.map(res => res.json())
.subscribe(data => {
this.newsList = data;
});
});
});
}
}Notiamo in questo caso l'importazione di Platform da ionic-angular e la sua iniezione nel costruttore. Quindi vediamo l'invocazione del metodo ready() che restituisce una Promise la cui risoluzione ci garantisce che il dispositivo di geolocalizzazione è pronto per l'utilizzo.
Observable
L'esempio appena visto ci presenta un utilizzo del plugin di geolocalizzazione che restituisce una Promise. Questo approccio è comodo quando vogliamo ottenere un dato puntuale, ad un certo momento del flusso di elaborazione della nostra applicazione.
Lo stesso plugin mette a disposizione un approccio differente alla ricezione della posizione corrente, utile soprattutto quando abbiamo la necessità di tracciare lo spostamento di un dispositivo, quindi di gestire un flusso di dati continuo in maniera asincrona. In queste situazioni possiamo fare ricorso al metodo watchPosition() che restituisce un Observable(). Il seguente esempio mostra come possiamo acquisire dati dal dispositivo di geolocalizzazione e visualizzarli sulla console man mano che li otteniamo
let watch = Geolocation.watchPosition().subscribe((position) => {
console.log(`latitudine: ${position.coords.latitude}, longitudine: ${position.coords.longitude}`)
});Nel momento in cui non abbiamo più bisogno di monitorare lo spostamento del dispositivo è sufficiente annullare la sottoscrizione tramite il metodo unsubscribe():
watch.unsubscribe();