Clase 4

Módulo 2: Plugins y archivos ejecutables

Quiz

Semana 1: Uso de Plugins

Para instalar un plugin se debe ejecutar lo siguiente 

cordova plugin add id-plugin

Obtener estado de la batería

Instalación:

cordova plugin add cordova-plugin-battery-status

Con este plugin se pueden obtener los siguientes eventos:

  • Estado de la batería
  • Batería baja
  • Batería crítica

Ejemplos 

window.addEventListener("batterystatus", onBatteryStatus, false);

function onBatteryStatus(status) {
    console.log("Level: " + status.level + " isPlugged: " + status.isPlugged);
}
window.addEventListener("batterylow", onBatteryLow, false);

function onBatteryLow(status) {
    alert("Battery Level Low " + status.level + "%");
}
window.addEventListener("batterycritical", onBatteryCritical, false);

function onBatteryCritical(status) {
    alert("Battery Level Critical " + status.level + "%\nRecharge Soon!");
}

URL: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-battery-status/index.html

Tomar o seleccionar fotos del dispositivo

Instalación:

cordova plugin add cordova-plugin-camera

Ejemplo:

<div>
    <header>
        <h2>
            Fotos
        </h2>
    </header>
        <button onclick="takePicture(true);">Tomar foto</button>
        <button onclick="takePicture(false);">Seleccionar foto</button>
        <img id="myImg" alt="Esperando imagen"/>
</div>
function takePicture(cam) {
    if (!cam) {
        Camera.PictureSourceType = {
            PHOTOLIBRARY : 1,
            CAMERA : 0,
            SAVEDPHOTOALBUM : 2
        };
    } else {
        Camera.PictureSourceType = {
            PHOTOLIBRARY : 0,
            CAMERA : 1,
            SAVEDPHOTOALBUM : 2
        };
    }
    
    navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
        destinationType: Camera.DestinationType.DATA_URL
    });
    function onSuccess(imageData) {
        var image = document.getElementById('myImg');
        image.src = "data:image/jpeg;base64," + imageData;
    }

    function onFail(message) {
        alert('Falló: ' + message);
    }
}

URL: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/index.html

Acceder a lista de contactos

Instalación: 

cordova plugin add cordova-plugin-contacts

Crear un contacto:

var myContact = navigator.contacts.create({"displayName": "Test User"});

myContact .save(onSuccess,onError)

Buscar contactos:

function onSuccess(contacts) {
    alert('Found ' + contacts.length + ' contacts.');
};

function onError(contactError) {
    alert('onError!');
};
// find all contacts with 'Bob' in any name field
var options      = new ContactFindOptions();
options.filter   = "Bob";
options.multiple = true;
options.desiredFields = [navigator.contacts.fieldType.id];
options.hasPhoneNumber = true;
var fields       = [navigator.contacts.fieldType.displayName, navigator.contacts.fieldType.name];
navigator.contacts.find(fields, onSuccess, onError, options);

URL: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-contacts/index.html

Información del dispositivo

Instalación

cordova plugin add cordova-plugin-device

Propiedades:

  • device.cordova
  • device.model
  • device.platform
  • device.uuid
  • device.version
  • device.manufacturer
  • device.isVirtual
  • device.serial

URL: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-device/index.html

Información del acelerómetro

Instalación:

cordova plugin add cordova-plugin-device-orientation

Ejemplo

function onSuccess(heading) {
    var element = document.getElementById('heading');
    element.innerHTML = 'Heading: ' + heading.magneticHeading;
};

function onError(compassError) {
    alert('Compass error: ' + compassError.code);
};

var options = {
    frequency: 3000
}; // Update every 3 seconds

var watchID = navigator.compass.watchHeading(onSuccess, onError, options);

URL: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-device-orientation/index.html

Otros ejemplos

JS Bin on jsbin.com

Tarea

Hacer un app que busque los contactos a medida en que yo voy escribiendo el nombre del contacto en un campo de texto como lo hace la aplicación de contactos del teléfono.

Links útiles