
¿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?
Si has respondido que si a alguna de las dos preguntas anteriores, creeme que no eres el único, ni serás el último, que pasa por aquí a intentar dar solución a estas.
Es más, hasta los que somos más expertos necesitamos de estos artículos cuándo tenemos que hacer una implementación nueva, o si vamos a utilizar algo que llevamos un tiempo sin usar. Así que tranquilo.
Por si no me conoces, mi nombre es Aitor Sánchez González, soy desarrollador de apps móviles desde el año 2014 y en este artículo te enseñaré, de manera clara y práctica, cómo puede localizar a tu usuario de manera asíncrona a través de Background Geolocation Ionic.
Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.
P.D: Darse de alta es gratis y de baja, también.
Consultar estructura del artículo
- 1 Presentación del componente
- 2 Instalación de Background Geolocation Ionic
- 3 Configuración del módulo
- 4 Plataformas nativas que soporta Background Geolocation
- 5 Cómo se usa Background Geolocation Ionic con ejemplo / example
- 6 ¿Not working? Cuentame que te sucede y lo solucionamos juntos
- 7 Ejemplo de cómo mantener la geolocalización en Background / Segundo plano
- 8 Más tutoriales de Ionic
- 9 Tutorial en vídeo donde puedes aprender a usarlo, para los más ganduletes 🙂
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); }); });
Más tutoriales de Ionic
Tutorial en vídeo donde puedes aprender a usarlo, para los más ganduletes 🙂
Pues hasta aquí todo lector/a, ha sido un placer, como siempre, ponerme a los mandos de este gran blog una vez más para poder enseñarte todo lo que se.
Si te ha gustado, o por lo menos ha sido útil, pásate por El Circulo es la comunidad que estoy montando alrededor de esta gran disciplina que es el desarrollo.
¡Un saludo y nos vemos en el siguiente artículo! Hasta entonces, que vaya bien 🙂