Recientemente adquirido por Adobe, PhoneGap es una plataforma que nos permite transformar nuestro código html5, css3 y javascript en aplicaciones nativas para móviles. Esto significa que con nuestros conocimientos de tecnologías web estándares podemos hacer aplicaciones para casi todas las plataformas móviles con un mínimo esfuerzo.
Podemos hacerlo de dos maneras diferentes:
- Descargando e instalando el kit de desarrollo de PhoneGap en nuestro ordenador
- Usando el servicio de compilación en la nube, que es gratuito para proyectos de dominio público sin ánimo de lucro.
En este post nos centraremos en la segunda opción, la más recomendable si no queremos complicarnos la vida con instalaciones de múltiples herramientas o simplemente nos apetece echar un vistazo rápido a este servicio. De las múltiples posibilidades de compilación que nos ofrece PhoneGap nos enfocaremos en la plataforma android por ser la más abierta y extendida.
Creando nuestra aplicación
Vamos a crear una sencilla aplicación que consistirá en mostrarnos un mapa con nuestra posición actual usando las posibilidades de geolocalización de html5. Para ello crearemos un fichero, “index.html”, con el siguiente marcado:
<!doctype html> <html lang="es"> <head> <meta charset="utf-8"> <title>Test de geolocalización</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <header> <h1>Test de geolocalización</h1> </header> <div id="main"> <h2>Te encuentras aquí:</h2> <div id="mapcanvas"></div> <!-- Capa para mostrar el mapa --> </div> </div> </body> </html>
A continuación le añadiremos las funcionalidades necesarias usando un poco de javascript, recordemos que éste debe ponerse al final del código html, justo antes de cerrar la etiqueta </body> ya que mientras se cargan estos ficheros .js se bloquea la carga del resto de la página.
El código resultante sería este:
<!-- google maps API -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<!-- phonegap API -->
<script src="js/phonegap-1.1.0.js"></script>
<!-- Nuestro código javascript -->
<script>
// Esperamos que cargue PhoneGap
//
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap ready
//
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
// Si todo va bien procedemos a geolocalizar
//
function onSuccess(position) {
var latitude = position.coords.latitude; // Latitud
var longitude = position.coords.longitude; // Longitud
var initialLocation = new google.maps.LatLng(latitude, longitude);
// Usamos google maps para mostrar la posición
var mapOptions = {
zoom: 16,
center: initialLocation, // Centramos el mapa en las coordenadas
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), mapOptions); // Creamos el mapa
var marker = new google.maps.Marker({
position: initialLocation,
map: map,
title: "Estás aquí"
});
}
// Si ha ocurrido un error informamos al usuario
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
</script>
Básicamente este código javascript hace lo siguiente:
- Carga el api de google maps para poder dibujar el mapa.
- También el api de phonegap para tener acceso a varias funcionalidades del móvil.
- Usa el api de geolocalización de html para determinar nuestra posisión.
- Pasa la posición del paso anterior a google maps para que dibuje el mapa con nuestra posición.
Uniendo los dos pedazos, html + javascript, tendríamos el código final:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Test de geolocalización</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<header>
<h1>Test de geolocalización</h1>
</header>
<div id="main">
<h2>Te encuentras aquí:</h2>
<div id="mapcanvas"></div> <!-- Capa para mostrar el mapa -->
</div>
</div>
<!-- google maps API -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<!-- phonegap API -->
<script src="js/phonegap-1.1.0.js"></script>
<!-- Nuestro código javascript -->
<script>
// Esperamos que cargue PhoneGap
//
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap ready
//
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
// Si todo va bien procedemos a geolocalizar
//
function onSuccess(position) {
var latitude = position.coords.latitude; // Latitud
var longitude = position.coords.longitude; // Longitud
var initialLocation = new google.maps.LatLng(latitude, longitude);
// Usamos google maps para mostrar la posición
var mapOptions = {
zoom: 16,
center: initialLocation, // Centramos el mapa en las coordenadas
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), mapOptions); // Creamos el mapa
var marker = new google.maps.Marker({
position: initialLocation,
map: map,
title: "Estás aquí"
});
}
// Si ha ocurrido un error informamos al usuario
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
</script>
</body>
</html>
Subiendo a la nube
Para poder subir nuestra aplicación es necesario registrarse gratuitamente en la plataforma siguiendo este enlace. PhoneGap nos enviará un email de confirmación con un enlace para activar la cuenta.
Ahora debemos crear un fichero de configuración “config.xml” en el directorio raíz de nuestra aplicación para que phonegap sepa que recursos del dispositivo van a usarse. En este punto debemos añadir los iconos de escritorio que apareceran en el móvil para identificar nuestra aplicación, en el siguiente enlace podemos ver un ejemplo.
Nuestro xml de configuración quedará así:
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.extrema.test"
version = "1.0.0">
<name>Test de geolocalización</name>
<description>
Mi primera app móvil
</description>
<author href="http://extrema-sistemas.com"
email="egonzalez@extrema-sistemas.com">
Ezequiel González
</author>
<gap:platforms>
<gap:platform name="android" minVersion="2.1" />
<gap:platform name="webos" />
<gap:platform name="symbian.wrt" />
<gap:platform name="blackberry" project="widgets"/>
</gap:platforms>
<icon src="appicon.png" gap:role="default" />
<icon src="icon_72.png" width="96" height="96" />
<icon src="icon_72.png" width="72" height="72" />
<icon src="icon_48.png" width="48" height="48" />
<icon src="icon_36.png" width="36" height="36" />
<gap:splash src="appcapture.png" />
<feature name="http://api.phonegap.com/1.0/geolocation"/>
<feature name="http://api.phonegap.com/1.0/network"/>
</widget>
Ojo con los iconos de escritorio, líneas 26,27,28 y 29. Hemos puesto los iconos a cuatro resoluciones diferentes para cubrir todas las densidades de pantalla posibles en los móviles. En este enlace tenemos más información al respecto.
El splash, línea 31, es la imagen que se muestra mientras carga nuestra aplicación.
Sólo nos falta crear un fichero comprimido .zip con todos los recursos de la aplicación, este fichero será el que subamos después a PhoneGap. En nuestro caso hemos subido este fichero.
Accedemos ahora al website de PhoneGap, una vez logeados seleccionamos la opción “apps” y veremos el popup que se muestra debajo para subir nuestro .zip
Una vez se haya subido el .zip veremos un listado con la aplicación, hacemos clic sobre la misma y podremos ver los códigos qr y enlaces de descarga para cada una de las plataformas.
Lo más cómodo para instalarla suele ser capturar el código QR, en el android market hay bastantes aplicaciones para esto y casi todas gratuitas, y nuestra aplicación se descargará automáticamente.
Vista de la aplicación en el drawer una vez instalada:
Y la aplicación funcionando:
Descargar el .apk
Nuevos horizontes
Este ha sido nuestro particular “Hello World” en el mundo de las aplicaciones móviles usando html5, css3 y javascript. PhoneGap nos ha abierto la puerta a un mundo lleno de posibilidades para investigar según nuestras preferencias y/o necesidades concretas.
ola, he leido este post y me ha servido mucho para empezar a trabajar con phonegap, implemente este código en una aplicación en Android, pero el mapa no me visualiza, cuando corro la aplicación me aparece el siguiente error en el alert: Falied to start Geolocation Service. yo utilice la clave para poder acceder a el api de google (google maps), pero sigue apareciendo lo mismo.
Por otro lado estoy trabajando con el jar cordova-1.8.1.jar y el archivo que viene en el ejemplo de phonegap en su version 1.8.1. cordova-1.8.1.js.
Podria ser esto??
Gracias por su repuesta
Por otro
Hola, me encanta este post, me he descargado la apk y me funciona a la perfeccion, pero me he descargado el zip y lo he subido a phonegap para crear la apk y esta no me funciona no geocaliza ni se ve el mapa.
Te agradecería que me ayudaras si sabes que problema hay?
A mi me pasa lo mismo, el zip con el html no funciona, no muestra el mapa…
Muy bien explicado. Sin embargo cuando subo el zip no crea la aplicación para iOS y en Android no muestra el mapa ¿que podrá estar mal?
Saludos.