cordova 3: plugman y la geolocalización

En esta entrada veremos cómo funciona la geolocalización y cómo utilizarla con cordova

Stephen Mackey. Sphinx

archivado en: JavaScript / 2 octubre, 2014 / taller:

Seguimos con la serie de cordova, una plataforma para realizar aplicaciones para dispositivos móviles con javaScript. Con todo instalado y sabiendo ya cómo compilar una aplicación, vamos a comenzar con cosas divertidas y para eso nada mejor que la geolocalización, que no es un api propia de los móviles, sino una especificación de HTML5.

Vamos a ver primero cómo funciona en general y luego qué debemos hacer para incorporarla a nuestra apk.

El api se basa en tres métodos del objeto geolocation:

  • geolocation.getCurrentPosition;
  • geolocation.watchPosition
  • y geolocation.clearWatch.

Con getCurrentPosition() obtenemos las coordenadas del dispositivo desde el que se lanza. Este método recibe tres parámetros: una función callback en caso de que haya salido bien; otra para cuando sale mal y el tercero son las opciones (que son opcionales, valga la valga xD). Por ejemplo,

navigator.geolocation.getCurrentPosition(sucess, error, options);

Las opciones que tenemos disponibles son:

  • enableHighAccuracy: valor booleano, true o false, para indicar si queremos o no que sea lo más preciso posible, lo cual ralentiza o acelera el proceso.
  • timeout: valor en milisegundos que debe aguardar esperando una respuesta hasta que dé error en caso de no haberla recibido.
  • maximumAge: Con valor 0, se calcula la posición cada vez que se pide; con un valor en milisegundos se coge de la caché si hay alguna que no sea más antigua que el valor que indicamos aquí. Volveré sobre esto más adelante cuando hable de watchPosition.

Así, añadiendo una comprobación por si el navegador cliente no soporta la geolocalización, como ocurre con versiones de la tostadora del explorer previas al 9, podríamos ir preparando algo como esto:

if  (!navigator.geolocation) {

/* La geolocalización no está disponible */

pintaGeoNoDisponible();

} else {

var options = {

enableHighAccuracy: true,

timeout: 5000,

maximumAge: 0

};

navigator.geolocation.getCurrentPosition(sucess, error, options);

}

En la función donde recogemos el error recibimos un json con dos claves: la primera se denomina message y es una cadena con el tipo de error y la segunda se llama code y es el código del error, que son tres posibles:

  • 1: permiso denegado a la aplicación para usar la geolocalización.
  • 2: no se encontró nada con los datos indicados.
  • 3: se acabó el tiempo indicado en las opciones.

A partir de ahí podemos preparar el mensaje de error que nos parezca más apropiado... qué sé yo, algo así:

function error (tipoError) {

if ( tipoError.code == 1 ) {

alert('Cada vez que se impide a una apk acceder a la geolocalización, Dios mata un unicornio');

}

}

En la función callback en caso de que todo haya ido bien también recibimos un json con dos claves: timestamp, en la que se indica en formato timestamp cuándo se ha recibido la información; y coords, donde se incluyen estos datos que dependen de la capacidad de cada dispositivo y nos pueden llegan con valor null, salvo latitude, longitude y accuracy:

  • coords.latitude: la latitud en grados decimales
  • coords.longitude: la longitud en grados decimales
  • coords.altitude: la altitud
  • coords.accuracy: el margen de error en metros
  • coords.altitudeAccuracy: el margen de error en la estimación de la altitud
  • coords.heading: orientación en grados
  • coords.speed: la velocidad en metros por segundo.

Así, nuestra función podría ser similar a esta:

function sucess(posicion) {

var latitud = posicion.coords.latitude;

var longitud = posicion.coords.longitude;

/* Ya lo que sea que hagamos con esos datos */

initMapa(latitud, longitud);

}

Y ya con esa información hacemos lo que sea, cómo pintar un mapa con la aplicación de mapas de google, o con los mapas de Microsoft o con OpenStreet, como veremos a continuación.

Para terminar este epígrafe comentar que gelocation.watchPosition() funciona exactamente igual que el anterior, solo que permanece a la escucha para ir lanzando peticiones hasta que lo detenemos con Geolocation.clearWatch().

Pintando mapas con google

No voy a explicar en detalle el api de google-maps, ya le dedicaré un post específico algún día, pero así a vuelapluma decir que se puede utilizar de forma gratuita en sitios no comerciales y en los que son con ánimo de lucro hay un límite considerable antes de tener que adquirir una licencia (25.000 cargas de mapa diarias).

Su formato más sencillo es este. En el index cargamos el api con las demás librerías.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

y ponemos un tag donde irá el mapa...

<div id="mapa"></div>

...tag al que, claro está, le podemos dar estilos.

#mapa {

width: 500px;

height: 500px;

margin: 0px;

padding: 0px

}

Ya en el js añadimos un listener de Google cuando el DOM esté cargado, en el que llamamos a una función callback en el tercer parámetro:

google.maps.event.addDomListener(window, 'load', initMapa);

Y ya en la función ponemos todo el tinglado:

function initMapa() {

var miMapa, miUbicacion, miMarca, misOpcionesMapa;

/* Aquí definimos la ubicación */

miUbicacion = new google.maps.LatLng(-27.1082163, -109.3102222);

/* Las opciones de configuración */

var misOpcionesMapa = {

zoom: 2,

center: miUbicacion

};

/* Instanciamos */

miMapa = new google.maps.Map(document.getElementById('mapa'), misOpcionesMapa);

/* Y ya sobre la instancia hacemos cosas, como añadir una marca */

miMarca = new google.maps.Marker({

position: miUbicacion,

map: miMapa,

title: 'Qué chulos los moais'

});

}

google.maps.event.addDomListener(window, 'load', initMapa);

Así, uniéndolo todo en un ejemplo poco elegante, pero didáctico, podríamos hacer algo como esto para mostrar a un usuario dónde se encuentra:

function error (tipoError) {

if ( tipoError.code == 1 ) {

alert('Cada vez que se impide a una apk acceder a la geolocalización, Dios mata un unicornio');

}

}

function sucess(posicion) {

var latitud = posicion.coords.latitude;

var longitud = posicion.coords.longitude;

initMapa(latitud, longitud);

}

if (!navigator.geolocation){

// La geolocalización no está disponible

} else {

var options = {

enableHighAccuracy: true,

timeout: 5000,

maximumAge: 0

};

navigator.geolocation.getCurrentPosition(sucess, error, options);

}

function initMapa(latitud, longitud) {

var miMapa, miUbicacion, miMarca, misOpcionesMapa;

miUbicacion = new google.maps.LatLng(latitud, longitud);

var misOpcionesMapa = {

zoom: 8,

center: miUbicacion

};

miMapa = new google.maps.Map(document.getElementById('mapa'), misOpcionesMapa);

miMarca = new google.maps.Marker({

position: miUbicacion,

map: miMapa,

title: 'Estás aquí'

});

}

Bueno, otro día volvemos sobre estas apis y alguna más muy chula, como la de codificación geográfica de Google, pero ahora rematemos este tocho post viendo qué sucede con cordova y la geolocalización.

plugman y los plugins de cordova

Cuando compilamos una apk, cordova solo instala el mínimo imprescindible para que corra una aplicación sencilla. Si necesitamos funcionalidades añadidas —como la geolocalización, el acceso a la cámara o a los contactos—, tenemos que instalar un plugin específico.

Antes era más complicado instalarlos y definir los permisos, pero desde la versión 3 de cordova está tirado con plugman. (Podemos saber la versión de la plataforma escribiendo cordova -v en la consola).

Lo primero que tenemos que hacer es instalar este instalador de plugins:

$ npm install -g plugman

Y luego es tan sencillo como ejecutar este comando en la consola de git (hay más flags, pero ahora no vienen al caso):

$ plugman install --platform NOMBRE DE LA PLATAFORMA --project RUTA HASTA LA VERSIÓN DE ESA PLATAFORMA EN NUESTRO PROYECTO --DIRECCIÓN DEL PLUGIN.

Por ejemplo:

$ plugman install --platform android --project C:/Users/marcos/Documents/miAplicacion/platforms/android --plugin org.apache.cordova.geolocation

Una vez instalado, basta con compilar con nuestro conocido comando $cordova build android, y ya tendríamos una apk geolocalizadora.

Hay una montonera de plugins que se pueden encontrar en el repo plugins.cordova.io y ya veremos los más utilizados en próximas entradas de esta serie. De momento, vamos a dejarlo aquí.

|| Tags: , , ,

valoración de los lectores sobre cordova 3: plugman y la geolocalización

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (2 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.