Plugin device

org.apache.cordova.device

Como vimos, el plugin mas simple es device (org.apache.cordova.device). Define una variable global device que contiene informacion del dispositivo. Esta variable no estara disponible hasta que se dispare el evento deviceready:

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(device.cordova);
}

Propiedades

• device.cordova: version de Cordova corriendo en el dispositivo.
• device.model: devuelve el modelo/marca del dispositivo. Este puede variar entre el nombre del modelo o el codigo de modelo.
• device.platform: nombre o codigo del sistema operativo/plataforma en la que esta corriendo.
• device.uuid: un identificador unico para el dispositivo
• device.version: version del sistema operativo corriendo

Instalar plugin

Para instalar el plugin hay que estar dentro de la carpeta del proyecto (prueba1). Instalar el plugin device de esta manera:

phonegap plugin add ..\templates\org.apache.cordova.device

En este caso, a diferencia de la manera usual, proveemos al comando plugin add con la ruta a donde se encuentra el plugin a instalar. De esta forma no es necesario contar con una conexion a internet.

Visualizando informacion

Para ejecutar una prueba rapida vamos a mostrar alguno de los datos del plugin en la pantalla principal de la aplicacion.

Editar el archivo www/index.html, buscar esta seccion:

    <div class="app">
      <h1>PhoneGap</h1>
      <div id="deviceready" class="blink">
        <p class="event listening">Connecting to Device</p>
        <p class="event received">Device is Ready</p>
      </div>
    </div>

modificarlo agregando un tag p:

    <div class="app">
      <h1>PhoneGap</h1>
      <div id="deviceready" class="blink">
        <p class="event listening">Connecting to Device</p>
        <p class="event received">Device is Ready</p>
        <p id="device"></p>
      </div>
    </div>

Luego modificamos en archivo index.js y modificamos estas lineas:

    onDeviceReady: function() {
        document.getElementById('device').innerHTML = device.manufacturer + ' ' + device.model;
        app.receivedEvent('deviceready');
    },

document.getElementById('device') busca en nuestra pagina un tag/elemento cuyo ID sea device. .innerHTML accedemos a la propiedad y le asignamos un valor de texto: device.manufacturer + " " + device.model concatenamos la marca y el modelo del dispositivo

Finalmente corremos el proyecto nuevamente y cuando la aplicacion se abra podremos ver, debajo del logo de Phonegap, la marca y el modelo del dispositivo.