Background Geolocation Ionic | Qué es y cómo se usa

¿Interesado en geolocalizar a tu usuario de manera asíncrona, o con la aplicación cerrada? O, quizás, ya sabes cómo se hace y lo que quieres es conocer algún detalle sobre los campos o funciones de Background Geolocation Ionic ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014 y en este artículo vas a aprender, de manera clara y práctica, a localizar a tu usuario de manera asíncrona a través de Background Geolocation Ionic.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Presentación del componente

Este plugin nos da la posibilidad de geolocalizarnos tanto en background, como su nombre indica, como en foreground y dispone de un buen sistema de ahorro de energía para que no tengamos problemas con la batería. Este problema pasa con la mayoría de las librerías que nos permiten acceder a la geolocalización.

Instalación de Background Geolocation Ionic

Para poder usar el plugin en nuestra app solo tendremos que pasarle dos comandos a la consola que son los siguientes:

ionic cordova plugin add @mauron85/cordova-plugin-background-geolocation
npm install @ionic-native/background-geolocation

La primera de ellas es para agregar el plugin Background Geolocation a la aplicación y poder realizar una comunicación con la parte nativa del sistema.

La segunda instala el código TS necesario para poder comunicarnos con el plugin desde nuestro código Type Script.

Configuración del módulo

Por suerte, a menos que nosotros extendamos la funcionalidad, no tenemos que aplicar ninguna configuración al sistema. Yupi :)

Eso sí, al tratarse de un servicio tenemos que incluirlo en los providers de nuestra clase. Para los que no sean como se hace aquí os dejo un breve ejemplo.

...
import { BackgroundGeolocation } from '@ionic-native/background-geolocation/ngx';

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    ...
    BackgroundGeolocation,
    ...
  ]
})
export class AppModule {}

Plataformas nativas que soporta Background Geolocation

Al tratarse de una funcionalidad que nos permite obtener la localización del usuario en segundo plano no tendría mucho sentido fuera de un dispositivo móvil.

• Android
• iOS

La verdad, que tratándose de un módulo que ya lleva tiempo en el mercado, no de soporte para Windows Phone. Aunque creo que ya no existe WP como tal. Pero bueno, me parece bastante raro.

Cómo se usa Background Geolocation Ionic con ejemplo / example

Ahora vamos a lo que nos interesa, ver como se usa el componente. Pero primero vamos a ver un ejemplo y comentamos sobre este código.

import { BackgroundGeolocation, BackgroundGeolocationConfig, BackgroundGeolocationResponse } from '@ionic-native/background-geolocation';

constructor(private backgroundGeolocation: BackgroundGeolocation) { }

...

const config: BackgroundGeolocationConfig = {
            desiredAccuracy: 10,
            stationaryRadius: 20,
            distanceFilter: 30,
            debug: true, //  Esto hace que el dispositivo emita sonidos cuando lanza un evento de localización
            stopOnTerminate: false, // Si pones este en verdadero, la aplicación dejará de trackear la localización cuando la app se haya cerrado.
            //Estas solo están disponibles para Android
            locationProvider: 1, //Será el proveedor de localización. Gps, Wifi, Gms, etc...
            startForeground: true, 
            interval: 6000, //El intervalo en el que se comprueba la localización.
            fastestInterval: 5000, //Este para cuando está en movimiento.
            activitiesInterval: 10000, //Este es para cuando está realizando alguna actividad con el dispositivo.
    };

this.backgroundGeolocation.configure(config)
  .then(() => {

    this.backgroundGeolocation.on('location').subscribe((location: BackgroundGeolocationResponse) => {
      console.log(location);

      // Es muy importante llamar al método finish() en algún momento para que se le notifique al sistema que hemos terminado y que libere lo que tenga que liberar,
      // Si no se hace, la aplicación dará error por problemas de memoria.
      this.backgroundGeolocation.finish(); // SOLO PARA IOS
    });

  });

// Inicia el trackig de geolocalización
this.backgroundGeolocation.start();

// Y este es para terminar de trackear la geolocalización.
this.backgroundGeolocation.stop();

En primer lugar, vamos a realizar un import de 3 clases que vamos a utilizar en este ejemplo y que son necesarios para mostrar como funciona.

• BackgroundGeolocation -> Será la clase encargada de hacer todo el trabajo duro.
• BackgroundGeolocationConfig -> Será una interfaz, no clase, que nos permita definir la configuración de la clase “BackgroundConfig”. Ahora veremos los detalles de esta.
• BackgroundGeoloationResponse -> Será la clase que nos llegue como respuesta cuando el evento “location” esté controlado y lleva los datos que a nosotros nos interesan. La latitud, longitud, altura, etc…

Posteriormente, al tratarse de un servicio, y de haberlo incluido en nuestros providers, vamos a inyectar en nuestro constructor la clase BackgroundGeolocation. Las otras dos no son necesarias al tratarse de interfaces y no de servicios.

Ahora vamos a almacenar en una constante llamada “config” la configuración que le queremos dar a nuestro GeoLocation. Se trata de una instancia de la interface “BackgroundGeolocationConfig” y le vamos a pasar los siguientes campos:

• desiredAccuracy -> El rango de error, o la exactitud, con la que queremos que trabaje el sistema. A menos rango de error, más exactitud, pero más gasto de energía.
• stationaryRadius -> Cuando te detiene, y el sistema no capta movimiento, este se para para ahorrar energía y siempre marcará la zona en la que estás. Pues este parámetro, le dice al sistema, en metros, que cuantos metros tienes que cambiar tu posición desde la que estabas parado para que vuelva a funcionar.
• distanceFilter -> Este campo le dice al sistema que cada X metros de avance debe notificar al módulo. En este caso sería cada 30 metros llamaría al evento correspondiente
• debug -> Pues como era de esperar, activa el modo desarrollo y el módulo emite sonidos cada vez que se llama a un evento para así poder controlarlo y depurarlo.
• stopOnTerminate -> Fuerza una llamada a stop() cuando la aplicación se cierra. Es un valor boleano y puede estar escuchando todo el tiempo, aunque la app esté cerrada.

Bueno, ya la construcción de nuestra interfaz terminada y los parámetros con los que queremos que funcione el sistema definidos y seteados, continuemos.

La función configure

Ahora le toca el turno a la función “configure”. Esta función le pasa al sistema nativo del teléfono todos los parámetros que hemos construidos antes sobre la interface “BackgroundGeolocationConfig” y devuelve una promesa que tenemos que controlar.

Cuando esta promesa se resuelva, a través del then, podremos controlar la geolocalización. Digamos que esta función es una “inicialización” del sistema.

En caso de que haya algún problema la promesa se saldrá por el catch, como es costumbre.

El evento de localización

Bueno, llegados a este punto ya sabemos realizar toda la parafarnalia que tenemos que programar para que el sistema comience a tomar forma. Ahora, y dentro del then de la promesa que hemos mencionado en la sección de la función configure, vamos a llamar al método “on” de la función backgroundGeolocation pasándole como parámetro “location” que será el evento que queremos controlar.

Esta función devuelve un observable, que tendremos con controlar con su función “suscribe”. En los parámetros de esta resolución se encuentra la instancia de “BackgroundLocationResponse” que contiene todos los datos que nos interesan.

Cerrando el flujo

Vale, en determinado momento de la ejecución necesitamos que la aplicación deje de trackear datos. En este caso, como es una app de ejemplo, hemos llamado al método “finish”. En este caso, solo está disponible para IOS y ahora veremos más adelante como hacerlo en Android.

Saltándonos una línea de ejecución, pasamos directamente a la función “stop”. Esta función nos permite detener el trackeo de datos directamente desde código. En el ejemplo lo hemos llamado desde fuera, pero por regla general hay que llamarlo desde dentro del evento. Date cuenta de que está en Background, y será ejecutado sin estar la app abierta. Así que si queremos que pase por la función “stop” en algún momento tenemos que ejecutarlo dentro del evento.

Comenzando el trackeo

Bueno, pues si estás aquí es por que estás interesado en todo lo que te he explicado. Y solo queda el punto más álgido, ¿cómo coño pongo todo en marcha?

Pues es muy sencillo, la clase “backgroundGeolocation” contiene una función llamada “start” que una vez está todo configurado, con las opciones seteadas, y con los métodos sobre-escritos la llamaremos para empezar a pillar datos.

¿Not working? Cuentame que te sucede y lo solucionamos juntos

En esta parte del artículo iré poniendo las cuestiones que me preguntáis por mail, lo que yo encuentro por la red y lo que me dejéis en los comentarios para proceder a su solución.

Actualmente no existe nada que haya podido ver, cuando haga el siguiente barrido de contenidos, volveré a revisar y lo incluiré :)

Ejemplo de cómo mantener la geolocalización en Background / Segundo plano

Nota: Si estás busncando mantener la watchposition del geolocation plugin de Ionic, incluso cuando la aplicación no está en primer plano, este mismo ejemplo podría servirte.

 const config: BackgroundGeolocationConfig = {
  desiredAccuracy: 1,
  stationaryRadius: 20,
  distanceFilter: 10,
  debug: true, //  Activa esto si quieres escuchar sonidos cuando background-geolocation life-cycle se pongan en marcha.
  stopOnTerminate: false, // Activa esto si quieres que la geolocalización termine cuando la aplicación se cierre.
  fastestInterval: 4000,
  interval: 10000
};

this.backgroundGeolocation.configure(config)
  .then(() => {

    this.backgroundGeolocation.on(BackgroundGeolocationEvents.location).subscribe((location: BackgroundGeolocationResponse) => {
      console.log(location);
      this.http.post('http://riyadkhalifeh.com/insert.php', { log: location.latitude, lat: location.longitude }, {})
        .then(data => {

          console.log(data.status);
          console.log(data.data); // data received by server
          console.log(data.headers);

        })
        .catch(error => {

          console.log(error);
          console.log(error); // error message as string
          console.log(error);

        });
    });

  });

// Inicializamos el tracking de la geolocalización.
this.backgroundGeolocation.start();

//////////////
this.geolocation.getCurrentPosition().then((resp) => {
  this.http.post(url, { lat: resp.coords.latitude, long: resp.coords.longitude }, {})
    .then(data => {

      console.log(data.status);
      console.log(data.data); // data received by server
      console.log(data.headers);

    })
    .catch(error => {

      console.log(error);
      console.log(error); // error message as string
      console.log(error);

    });
}).catch((error) => {
  console.log('Error getting location', error);
});

let watch = this.geolocation.watchPosition();
watch.subscribe((data) => {

  this.http.post(url, { lat: data.coords.latitude, long: data.coords.longitude }, {})
    .then(data => {

      console.log(data.status);
      console.log(data.data); // data received by server
      console.log(data.headers);

    })
    .catch(error => {

      console.log(error);
      console.log(error); // error message as string
      console.log(error);

    });
});

Tutorial en video, por si no te gusta leer

Algo más que quizás te interesa

Si quieres aumentar las descargas de tu aplicación, y por extensión el dinero que genera, optimizar de manera proactiva el logo de tu app es una de las mejores estrategias. Por ejemplo, con test a/b constantes.

Bien, para ayudarte con esto, hemos creado esta herramienta. Para que puedas evaluar, optimizar y mejorar los logos de tus aplicaciones cual Da Vinci y la última cena. No te espoileo más, entra en el enlace.

Y ahora si, espero haberte ayudado con tus dudas y nos vemos en el siguiente artículo. Hasta entonces ¡que vaya bien!