Uso del GPS en Android con Cordova phonegap

En esta guía se pretende explicar la manera de obtener la posición actual del dispositivo Android

(coordenadas latitud, longitud), haciendo uso de la API del GPS de cordova (phonegap).

Contenido Introducción ........................................................................................................................................ 2

Requisitos ............................................................................................................................................ 2

Creando la Aplicación: ......................................................................................................................... 3

Obtener información GPS ................................................................................................................... 5

Permisos Android: ........................................................................................................................... 5

Probar Aplicación ................................................................................................................................ 7

Bibliografía ........................................................................................................................................ 10

Anexos ............................................................................................................................................... 11

Abrir proyecto de Android desde Eclipse ...................................................................................... 11

Introducción

En esta guía se pretende explicar la manera de obtener la posición actual del dispositivo Android

(coordenadas latitud, longitud) , haciendo uso de la API del GPS de cordova (phonegap).

Requisitos

Tener Instalado y configurado NodeJs (NodeJs.org).

Tener instalado y configurado Cordova (Apache Cordova)

Tener instalado y configurados Android (SDK) (Android SDK, Guía Instalación Android).

Creando la Aplicación: En este paso se procede a crear la aplicación por medio de comandos en la terminal (por opciones

de “pereza”, las siguiente imágenes fueron tomadas de un tutorial anterior, por ende las imágenes

no reflejan lo escrito).

Abril la terminal, para eso vamos al menú inicio y en el cuadro buscar digitamos CMD,

luego abrimos el programa encontrado

Creamos la aplicación con los comandos de cordova:

En este caso se creó una aplicación llamada GpsCordova (cambiar LectorQr por GpsCordova en

la imagen).

Cambiamos de carpeta, dirigiéndonos a la anteriormente creada (cambiar LectorQr por

GpsCordova en la imagen).

Agregamos la plataforma de Android al proyecto

Compilamos la aplicación

Obtener información GPS

Para obtener los datos de latitud y longitud en Cordova, nos basta con llamar a una función

JavaScript llamada getCurrentPosition (existen otras alternativas que pueden consultar en la

documentación oficial (PhoneGap))

<script type="text/javascript">

function probarGps()

{

navigator.geolocation.getCurrentPosition(probarGpsonSuccess,

probarGpsonError);

}

function probarGpsonSuccess(position)

{

alert('Latitude: ' + position.coords.latitude

+ '\n' +'Longitude: '+ position.coords.longitude

+ '\n' +'Altitude: ' + position.coords.altitude

+ '\n' + 'Timestamp: '+ new Date(position.timestamp)

+ '\n');

}

function probarGpsonError(error)

{

alert('code: ' + error.code + '\n' +

'message: ' + error.message + '\n');

}

</script>

En el código anterior, existen 3 funcion javascript:

probarGps(): Esta función es llamada al momento de dar clic en el botón y se encarga de

obtener la posición actual del dispositivo

probarGpsonSuccess(position): Esta función es llamada luego de obtener la posición

del dispositivo y como parámetro recibe un objeto position, que nos dara luego las

coordenadas

probarGpsonError(error): Esta función es llamada si existe algún error al intentar obtener

la posición del dispositivo

Permisos Android:

Para poder probar la aplicación, debemos colocar en el manifiesto de Android los permisos

necesarios para poder acceder al GPS del dispositivo, para ello debemos abrir el proyecto de

Cordova en Eclipse (ver anexos).

Abrimos el archivo AndroidManifest.xml en eclipse y agregamos un nuevo permiso

Luego de seguir los pasos descritos en la imagen, guardamos todos los cambios

Probar Aplicación

Ahora debemos correr nuestra aplicación

para poder probar el código y determinar si

funciona.

Primero debemos agregar un botón y las

funciones javascript al index.html de la

carpeta www del proyecto creado con

Cordova. Para poder hacer esto, abrimos el

archivo anteriormente indicado con nuestro

editor de texto favorito (bloc notas,

notepad++,etc) y pegamos el siguiente código

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="format-detection" content="telephone=no" />

<meta name="viewport" content="user-scalable=no, initial-scale=1,

maximum-scale=1, minimum-scale=1, width=device-width, height=device-

height, target-densitydpi=device-dpi" />

<link rel="stylesheet" type="text/css" href="css/index.css" />

<title>Hello World</title>

</head>

<body>

<div class="app">

<h1>Gps Cordova</h1>

<div id="deviceready" class="blink">

<p class="event listening">Device is Ready</p>

<input name="btnGps" type="button" id="btngps"

value="Probar Gps" onClick="probarGps()">

</div>

</div>

<script type="text/javascript" src="cordova.js"></script>

<script type="text/javascript" src="js/index.js"></script>

<script type="text/javascript">

app.initialize();

function probarGps()

{

navigator.geolocation.getCurrentPosition(probarGpsonSuccess,probar

GpsonError);

}

function probarGpsonSuccess(position)

{

alert('Latitude: ' +

position.coords.latitude + '\n' +'Longitude: '+

position.coords.longitude + '\n' +'Altitude: ' +

position.coords.altitude + '\n' + 'Timestamp: '+ new

Date(position.timestamp) + '\n');

}

function probarGpsonError(error)

{

alert('code: ' + error.code + '\n' +

'message: ' + error.message + '\n');

}

</script>

</body>

</html>

Ahora compilamos el proyecto desde la consola

Ejecutamos el código en Android

Aquí pueden ver imágenes de la aplicación corriendo en un Samsung Galaxy Nexus.

Bibliografía PhoneGap. (s.f.). PhoneGap Documentation-Geolocation. Recuperado el 7 de 10 de 2013, de

http://docs.phonegap.com/en/1.2.0/phonegap_geolocation_geolocation.md.html

Anexos

Abrir proyecto de Android desde Eclipse Abrimos Eclipse, y luego creamos un nuevo proyecto, para eso damos clic en File -> New ->

Project…

Creamos un nuevo proyecto de Android desde código existente

Damos clic en Browse… y nos dirigimos a la carpeta donde está el proyecto, una vez ubicados hay

vamos a la carpeta platforms y damos clic en Aceptar

Escogemos el proyecto y damos clic en finalizar