Uso del GPS en Android con Cordova

phonegap
En esta gua se pretende explicar la manera de obtener la posicin actual del dispositivo Android (coordenadas latitud, longitud), haciendo uso de la API del GPS de cordova (phonegap).

Contenido
Introduccin ........................................................................................................................................ 2 Requisitos ............................................................................................................................................ 2 Creando la Aplicacin: ......................................................................................................................... 3 Obtener informacin GPS ................................................................................................................... 5 Permisos Android: ........................................................................................................................... 5 Probar Aplicacin ................................................................................................................................ 7 Bibliografa ........................................................................................................................................ 10 Anexos ............................................................................................................................................... 11 Abrir proyecto de Android desde Eclipse ...................................................................................... 11

Introduccin
En esta gua se pretende explicar la manera de obtener la posicin 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, Gua Instalacin Android).

Creando la Aplicacin:
En este paso se procede a crear la aplicacin por medio de comandos en la terminal (por opciones de pereza, las siguiente imgenes fueron tomadas de un tutorial anterior, por ende las imgenes 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 aplicacin con los comandos de cordova:

En este caso se cre una aplicacin llamada GpsCordova (cambiar LectorQr por GpsCordova en la imagen). Cambiamos de carpeta, dirigindonos a la anteriormente creada (cambiar LectorQr por GpsCordova en la imagen).

Agregamos la plataforma de Android al proyecto

Compilamos la aplicacin

Obtener informacin GPS

Para obtener los datos de latitud y longitud en Cordova, nos basta con llamar a una funcin JavaScript llamada getCurrentPosition (existen otras alternativas que pueden consultar en la documentacin 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 cdigo anterior, existen 3 funcion javascript: probarGps(): Esta funcin es llamada al momento de dar clic en el botn y se encarga de obtener la posicin actual del dispositivo probarGpsonSuccess(position): Esta funcin es llamada luego de obtener la posicin del dispositivo y como parmetro recibe un objeto position, que nos dara luego las coordenadas probarGpsonError(error): Esta funcin es llamada si existe algn error al intentar obtener la posicin del dispositivo

Permisos Android:
Para poder probar la aplicacin, 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 Aplicacin
Ahora debemos correr nuestra aplicacin para poder probar el cdigo y determinar si funciona. Primero debemos agregar un botn 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 cdigo

<!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=deviceheight, 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 cdigo en Android

Aqu pueden ver imgenes de la aplicacin corriendo en un Samsung Galaxy Nexus.

Bibliografa
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 cdigo 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