uso del gps en android con cordova (phonegap)
DESCRIPTION
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).TRANSCRIPT
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).
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
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
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