Conoceremos la API device de PhoneGap, donde nos empaparemos aún más en el desarrollo de aplicaciones multi-plataforma.
Hasta este punto del Manual de PhoneGap hemos conocido inicialmente algunas características del framework, a través de dos artículos que nos introdujeron en el mundo del desarrollo de aplicaciones móviles haciendo uso de PhoneGap. También conocimos dos formas posibles para compilar aplicaciones, haciendo uso de esta poderosa herramienta, pero si bien hemos conocido algo de PhoneGap, apenas hemos comenzado a verlo desde el horizonte, pues solo se ha construido una sencilla aplicación basada en jQuery Mobile, que ni siquiera hace uso de la librería JavaScript que viene incorporada dentro de PhoneGap, que permite, como mencionamos en algunos artículos anteriores, tener acceso a ciertas herramientas que sólo son propias de aplicaciones nativas del sistema, esto es, sin lugar a dudas, una gran ventaja para llegar a convertirnos en verdaderos desarrolladores móviles. Para iniciar estos apuntes que nos permitirán profundizar en PhoneGap, comenzaremos por la API device, que permite conocer detalles exactos y precisos de la máquina que está ejecutando la aplicación, es decir, permite adentrarse en las intimidades de los dispositivos, para de esta forma manipular ciertas apariencias o preferencias de acuerdo a el dispositivo que está usando el usuario de la aplicación.
Incluyendo PhoneGap en mí proyecto.
Pues bien, para comenzar a trabajar en forma con PhoneGap, debemos incluir su librería JavaScript dentro de nuestra aplicación web. Recuerda que ya hemos conocido la forma de construir una aplicación haciendo uso de PhoneGap, donde por lo general se crea una carpeta llamada www, donde debemos incluir nuestro archivo .js. Luego incluimos dentro de nuestro "index", también conocimos la forma de compilar una aplicación haciendo uso del compilador en la nube, llamado PhoneGap Build, en donde resulta la labor más fácil, es decir, que nuestro index.html tendría la siguiente estructura básica:
<!DOCTYPE html>
<html>
<head>
<title>Conociendo la API Device de PG</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
</head>
<body>
</body>
</html>
Hemos agregado un archivo cordova-1.7.0.js, el cual es nuestra librería JavaScript para trabajar con PhoneGap. Recuerda que en la introducción al framework PhoneGap conocimos algunas razones por que este framework en realidad recibe el nombre de Apache Cordova.
Éste es el único archivo que necesitamos para trabajar PhoneGap, ya agregarás tú algunos otros archivos que vayas a necesitar para construir tus aplicaciones, ya sean librerías como jQuery Mobile, Sencha Touch, Dojo, Kendo Touch, JQM, DHTMLX o cualquier complemento que desees usar como adición al funcionamiento de tu aplicación.
PhoneGap en marcha
Ahora que ya hemos incluido la librería JavaScript de PhoneGap, podemos iniciar usándola de inmediato, haciendo uso de los nuevos eventos que se incluyen, no solo para saber que el DOM se ha cargado, sino que la PhoneGap y todas sus APIs están listan para ser usadas. En otras palabras, sería al método "ready" de jQuery, con la diferencia de que PhoneGap lo hace de una forma natural y clásica a lo que es JavaScript, haciendo que los desarrolladores JavaScript se sientan trabajando de forma muy cómoda.
<script type="text/javascript" charset="utf-8">
//Esperamos que Cordova (PhoneGap) esté cargado
document.addEventListener("deviceready", IniciarAplicacion, false);
// IniciarAplicacion es la funcion que manejadora del evento deviceready
function IniciarAplicacion(){
}
</script>
Lo que hemos hecho es agregar un escuchador de eventos al elemento "document", el cual manejara el evento "deviceready", el manejador de este evento será la funcion "IniciarAplicacion". Todo lo que se va a hacer con PhoneGap, debe ser trabajado dentro de nuestra función IniciarAplicacion.
Cosas que nos proporciona la API Device de PhoneGap
Pues si hasta este punto ya hemos afrontado la parte inicial, tenemos todo preparado para comenzar a usa PhoneGap en serio, para ello vamos a comenzar por la API device, que como mencionábamos anteriormente, nos proporciona información relevante al dispositivo, como el sistema operativo o plataforma que usa, la versión del mismo entre uno que otro detalle que comentaremos en este artículo. Para lograr su objetivo, la API Device se sustenta en los siguientes métodos:- device.name: Sirve para conocer el nombre del dispositivo móvil que está usando la aplicación.
- device.cordova: Sirve para conocer la versión de Cordova del dispositivo móvil que está usando la aplicación.
- device.platform: Sirve para conocer el sistema operativo del dispositivo móvil que está usando la aplicación.
- device.uuid: Sirve para conocer el identificado único universal del dispositivo móvil que está usando la aplicación, éste se lo asigna la empresa que fabrica el terminal.
- device.version: Sirve para conocer la versión del sistema operativo del dispositivo móvil que está usando la aplicación
<script type="text/javascript" charset="utf-8">
//Esperamos que Cordova (PhoneGap) esté cargado
document.addEventListener("deviceready", IniciarAplicacion, false);
// IniciarAplicacion es la funcion que manejadora del evento deviceready
function IniciarAplicacion(){
var informacion="Tu SO es: " + device.platform + " Version: " + device.version;
alert(informacion);
}
</script>
Lo que hace este sencillo script, es mostrar en un "alert" el nombre del sistema operativo que usa el usuario de la aplicación y la correspondiente versión del mismo. "Device.platform" puede devolver los siguientes valores.
- "Android"
- "BlackBerry"
- "iPhone"
- "webOS"
- "WinCE" (Windows Phone)
Ahora para ultimar algunos detalles, usaremos o emplearnos todos los métodos de la API device, con el fin de aclarar alguna duda que haya quedado en el aire.
<!DOCTYPE html>
<html>
<head>
<title>Conociendo la API Device de PG</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8">
//Esperamos que Cordova (PhoneGap) esté cargado
document.addEventListener("deviceready", IniciarAplicacion, false);
// IniciarAplicacion es la funcion que manejadora del evento deviceready
function IniciarAplicacion(){
//la variable elemento guarda una referencia a un elemento
//div donde se muestran las propiedades obtenidas con PhoneGap
var elemento = document.getElementById('propiedades');
//la variable informacion guarda todas las propiedades obtenidas con PhoneGap
var informacion='Nombre del dispositivo ' + device.name + '<br />' +
'Version de Cordova: ' + device.cordova + '<br />' +
'Sistema operativo: ' + device.platform + '<br />' +
'Version: ' + device.version + '<br />'+
'Identificador unico universal: ' + device.uuid + '<br />';
elemento.innerHTML = informacion;
}
</script>
</head>
<body>
<!--Elemento div donde apareceran las propiedades del dipositivo obtenidas a travez de PhoneGap
-->
<div id="propiedades">Cargando datos del dispositivo</div>
</body>
</html>
Recuerda que este ejemplo lo puedes compilar en PhoneGap Build. También lo pongo a disposición los instaladores para su descarga.