7 de març del 2018

Ionic: aplicació per saber l'hora de sortida/posta del sol (V)

Part V: Versió amb Google Maps

Aquest article ens mostrarà com utilitzar Google Maps per escollir el lloc en l'aplicació per saber l'hora de sortida i posta de sol.

Fins ara hem vist:

Ara utilitzarem Google Maps per poder escollir el lloc. Tot i que hi ha molta informació sobre com utilitzar Google Maps, la informació sol estar incompleta o no acabar-se d'adaptar a les nostres necessitats concretes.

En general, una de les meves primeres fonts d'informació són els articles de Josh Morony. Són acurats i força actualitzats. Tota una referència. I just podem trobar-hi el que busquem: "com fer una pàgina de selecció de lloc amb Google Maps i Ionic". Seguirem el tutorial i fem els canvis necessaris per afegir la funcionalitat a la nostra aplicació.

Afegim el mòdul de xarxa, que permetrà verificar quan tenim connexió de dades, i les definicions de tipus per Google Maps:
 $ ionic cordova plugin add cordova-plugin-network-information
 $ npm install --save @ionic-native/network
 $ npm install @types/google-maps --save

Seguint el tutorial, afegim la pàgina nova (LocationSelect) i els nous proveïdors a app.module.ts:
 ...
 import { CalendarModule } from "ion2-calendar";
 import { LocationSelect } from '../pages/location-select/location-select';
 import { Connectivity } from '../providers/connectivity-service';
 import { GoogleMapsService } from '../providers/google-maps-service';
 import { Network } from '@ionic-native/network';
 ...
  declarations: [
    ...
    HomePage,
    LocationSelect,
    TabsPage
  ],
  ...
  entryComponents: [
    ...
    HomePage,
    LocationSelect,
    TabsPage
  ],
  providers: [
    ...
    Geolocation,
    Connectivity,
    GoogleMapsService,
    Network
  ]
 ...

Ara afegim les pàgines dels proveïdors de servei, segons el tutorial. En primer lloc, providers/connectivity-service.ts: 
  1.  import { Injectable } from '@angular/core';
  2.  import { Network } from '@ionic-native/network';
  3.  import { Platform } from 'ionic-angular';
  5.  @Injectable()
  6.  export class Connectivity {
  7.   onDevice: boolean;
  9.   constructor(public platform: Platform, public network: Network) {
  10.     this.onDevice = this.platform.is('cordova');
  11.   }
  13.   isOnline(): boolean {
  14.     if(this.onDevice && this.network.type){
  15.       return this.network.type != 'none';
  16.     } else {
  17.       return navigator.onLine; 
  18.     }
  19.   }
  21.   isOffline(): boolean {
  22.     if(this.onDevice && this.network.type){
  23.       return this.network.type == 'none';
  24.     } else {
  25.       return !navigator.onLine;   
  26.     }
  27.   }
  29.   watchOnline(): any { return this.network.onConnect(); }
  30.   watchOffline(): any { return this.network.onDisconnect(); }
  31.  }

I tot seguit, providers/google-maps-service.ts: 
  1.  import { Injectable } from '@angular/core';
  2.  import { Connectivity } from './connectivity-service';
  3.  import { Geolocation } from '@ionic-native/geolocation';
  5.  @Injectable()
  6.  export class GoogleMapsService {
  7.   mapElement: any;
  8.   pleaseConnect: any;
  9.   map: any;
  10.   mapInitialised: boolean = false;
  11.   mapLoaded: any;
  12.   mapLoadedObserver: any;
  13.   currentMarker: any;
  14.   apiKey: string; //  = "YOUR_API_KEY";
  15.   lat: number = null;
  16.   lon: number = null;
  18.   constructor( public connectivityService: Connectivity, 
  19.                public geolocation: Geolocation ) 
  20.   {
  21.   }
  23.   init( mapElement: any, pleaseConnect: any, 
  24.         lat: number, lon: number 
  25.        ): Promise 
  26.   {
  28.     this.mapElement = mapElement;
  29.     this.pleaseConnect = pleaseConnect;
  30.     this.lat = lat;
  31.     this.lon = lon;
  33.     return this.loadGoogleMaps();
  34.   }
  36.   loadGoogleMaps(): Promise {
  37.     return new Promise((resolve) => {
  38.       if(typeof google=="undefined" || typeof google.maps=="undefined") {
  39.         console.log("Google maps JavaScript needs to be loaded.");
  40.         this.disableMap();
  42.         if(this.connectivityService.isOnline()){
  43.           window['mapInit'] = () => {
  44.             this.initMap().then(() => {
  45.               resolve(true);
  46.             });
  48.             this.enableMap();
  49.           }
  51.           let script = document.createElement("script");
  52.           script.id = "googleMaps";
  54.           if(this.apiKey){
  55.             script.src = 'http://maps.google.com/maps/api/js?key=' + 
  56.                        this.apiKey + '&callback=mapInit&libraries=places';
  57.           } else {
  58.             script.src = 'http://maps.google.com/maps/api/js' + 
  59.                                      '?callback=mapInit&libraries=places';       
  60.           }
  62.           document.body.appendChild(script);  
  63.         } 
  64.       } else {
  65.         if(this.connectivityService.isOnline()){
  66.           this.initMap();
  67.           this.enableMap();
  68.         } else {
  69.           this.disableMap();
  70.         }
  72.  resolve(true);
  73.       }
  75.       this.addConnectivityListeners();
  76.     });
  77.   }
  79.   initMap(): Promise {
  80.     this.mapInitialised = true;
  82.     return new Promise((resolve) => {
  83.       if(this.lat && this.lon) {
  84.         this.initMapPos(this.lat, this.lon);
  85.         resolve(true);
  87.       } else {
  88.         this.geolocation.getCurrentPosition().then((pos) => {
  89.           this.initMapPos(pos.coords.latitude, pos.coords.longitude);
  90.           resolve(true);
  92.         }).catch((error) => {
  93.           console.log('Error getting location'+JSON.stringify(error));
  94.           return Promise.reject("Unable to get location");
  95.         });
  96.       }
  97.     });
  98.   }
  100.   initMapPos(lat: number, lon: number) {
  101.     let latLng = new google.maps.LatLng(lat, lon);
  102.     let mapOptions = {
  103.       center: latLng,
  104.       zoom: 15,
  105.       mapTypeId: google.maps.MapTypeId.ROADMAP
  106.     }
  108.     this.map = new google.maps.Map(this.mapElement, mapOptions);
  109.   }
  111.   disableMap(): void {
  112.     if(this.pleaseConnect){
  113.       this.pleaseConnect.style.display = "block";
  114.     }
  115.   }
  117.   enableMap(): void {
  118.     if(this.pleaseConnect){
  119.       this.pleaseConnect.style.display = "none";
  120.     }
  121.   }
  123.   addConnectivityListeners(): void {
  124.     this.connectivityService.watchOnline().subscribe(() => {
  125.       setTimeout(() => {
  126.         if(typeof google=="undefined" || typeof google.maps=="undefined") {
  127.           this.loadGoogleMaps();
  128.         } else {
  129.           if(!this.mapInitialised) {
  130.             this.initMap();
  131.           }
  132.           this.enableMap();
  133.         }
  134.       }, 2000);
  135.     });
  137.     this.connectivityService.watchOffline().subscribe(() => {
  138.       this.disableMap();
  139.     });
  140.   }
  141.  }

En aquest fitxer hem fet alguns canvis:
  • [6] Hem canviat el nom de la classe a GoogleMapsService.
  • [14] Hem eliminat l'apiKey. Se n'hauria de generar una per poder-la utilitzar en l'aplicació però, per fer proves, podem treballar sense.
  • [15-16] Declarem les variables per poder inicialitzar el mapa a partir d'una posició concreta, enlloc de la posició del nostre dispositiu.
  • [24-31] Afegim paràmetres per la posició desitjada a la funció init i els traslladem als corresponents camps de la classe. 
  • [59] Hem afegit el paràmetre que faltava a la petició: '&libraries=places'.
  • [79-109] En la funció initMap, utilitzem la posició obtinguda durant la inicialització, o si està buida, usem el servei de geolocalització. També hem separat el codi d'inicialització de Google Maps en una nova funció initMapPos per no repetir codi.

Pel que fa a la pàgina LocationSelect, el fitxer d'estils location-select/location-select.scss no s'ha modificat, en el fitxer location-select/location-select.html només s'han traduït els textos al català, i el fitxer controlador location-select/location-select.ts s'ha modificat per poder passar la localització actual al servei GoogleMapsService: 
  1.  ...
  2.  import { NavParams } from 'ionic-angular';
  3.  import { GoogleMapsService } from '../../providers/google-maps-service';
  4.  ...
  5.  export class LocationSelect {
  6.     ...
  7.     location: any; 
  8.     lat: number = 42.582104;
  9.     lon: number = 1.0008419;
  10.   
  11.     constructor( public navCtrl: NavController, 
  12.    public params: NavParams,
  13.    public maps: GoogleMapsService, 
  14.    public platform: Platform, 
  15.    public geolocation: Geolocation, 
  16.    public viewCtrl: ViewController) 
  17.     {
  18.       this.searchDisabled = true;
  19.       this.saveDisabled = true;
  21.       this.lat = params.get('lat');
  22.       this.lon = params.get('lon');
  23.     }
  25.     ionViewDidLoad(): void {
  26.       this.maps.init( this.mapElement.nativeElement, 
  27.                       this.pleaseConnect.nativeElement, 
  28.                       this.lat, this.lon).then(() => {
  29.         this.autocompleteService = 
  30.                new google.maps.places.AutocompleteService();
  31.  this.placesService = 
  32.                new google.maps.places.PlacesService(this.maps.map);
  33.  this.searchDisabled = false;
  34.       }); 
  35.     }
  36.     ...

On:
  • [2] S'ha afegit la classe NavParams per poder passar paràmetres a la pàgina.
  • [8-9] S'han afegit membres a la classe per a guardar la posició inicial.
  • [12] S'utilitza el controlador NavParams en la classe, per a rebre els paràmetres.
  • [21-22] Es llegeixen i es guarden els paràmetres relacionats amb la posició.
  • [28] Els paràmetres de la posició s'utilitzen en la crida init del servei GoogleMapsService.

I finalment només ens queda modificar la pàgina HomePage per afegir la funcionalitat. En el controlador home.ts: 
  1.  ...
  2.  import { LocationSelect } from '../location-select/location-select';
  3.  ...
  4.  export class HomePage {
  5.   ...
  6.   launchLocationPage() {
  7.     let modal = this.modalCtrl.create( LocationSelect,
  8.                                        {lat: this.lat, lon: this.lon});
  9.     modal.onDidDismiss((location) => {
  10.       if(location) {
  11.         console.log("Nou lloc: ", location);
  12.         
  13.         this.lat = location.lat;
  14.         this.lon = location.lng;
  15.         this.posMsg = location.name;
  16.         this.posError = false;
  17.         this.getSunriseSunsetFromApi();
  18.       }
  19.     });
  21.     modal.present(); 
  22.   }
  23.  }

Hem afegit:
  • [2] La importació de la nova pàgina per a seleccionar el lloc.
  • [6-22] La funció launchLocationPage per mostrar la finestra de selecció de lloc. Observem com passem els paràmetres de la posició actual a la nova pàgina [8], i com s'actualitzen les dades i missatges en cas d'haver escollit un lloc, en el retorn de la pàgina [13-17].

En la part de visualització home.html, simplement activem la crida a la funció anterior: 
  1.   ...
  2.   <ion-item color="light" *ngIf="posError" (click)="launchLocationPage()">
  3.     <h2 text-wrap>No s'ha pogut obtenir la posició actual.</h2>
  4.     <p text-wrap>Verifica el GPS i/o els permisos.</p>
  5.     <ion-icon name="warning" color="danger" item-left></ion-icon>
  6.   </ion-item>
  7.   <ion-item (click)="launchLocationPage()">
  8.     <ion-label>Latitud</ion-label>
  9.     <ion-note item-right>{{ lat | number: "1.1-7" }}</ion-note>
  10.   </ion-item>
  11.   <ion-item (click)="launchLocationPage()">
  12.     <ion-label>Longitud</ion-label>
  13.     <ion-note item-right>{{ lon | number: "1.1-7" }}</ion-note>
  14.   </ion-item>
  15.   ...

I ja ho tenim tot a punt ! Provem de seguida la nova funcionalitat:

Podem veure com el mapa s'obre en una nova finestra superposada, si té prou espai, i com permet escollir un lloc, auto-completant les opcions. En escollir-ne una, el mapa es posició en ella i, en guardar-la, s'utilitza per calcular les hores de sortida/posta del sol en la nostra aplicació:

Podem veure en la consola l'objecte retornat pel servei de Google Maps. Les seves propietats s'utilitzen per actualitzar les dades en la pàgina principal.
Com sempre, teniu tot el codi a la vostre disposició en el Github: v0.4 (amb Google Maps).

Ara ja tenim una aplicació funcional, però encara la podem completar en alguns aspectes. Per exemple, podríem afegir-hi traducció a diversos idiomes; també es poden fer alguns canvis estètics, amb icones personalitzades i tipus de lletra diferents; i finalment, completar el projecte donant les dades de contacte i afegint una pàgina per donar crèdit als projectes i persones que l'han fet possible.

Seguiu l'evolució de l'aplicació:

Publicat per Jordi a 19:52
Etiquetes de comentaris: , , , ,

Cap comentari:

Publica un comentari a l'entrada

Subscriure's a: Comentaris del missatge (Atom)