Adobe Phonegap / Cordova

POR MSC. YAMIL LAMBERT SARANGO

Instalar Phonegap Instalar primero NodeJS En línea de comando (CLI)

◦ C:\> npm install -g phonegap

Uso:◦ phonegap create HolaMundo◦ Cd HolaMundo◦ phonegap run android

App con ID◦ phonegap create Hola com.ejemplo.hola HolaMundo

CLI – Plataforma, construcción y emulación

Agregar Plataforma◦ phonegap platform add android◦ phonegap platform remove android

Empaquetar y ejecutar◦ phonegap build android◦ phonegap emulate android◦ phonegap run android

Otras Plataformas◦ phonegap platform add ios◦ phonegap platform add blackberry10◦ phonegap platform add firefoxos

Complementos / plugin Agregar los complementos / plugin

◦ phonegap plugin add org.apache.phonegap.device◦ phonegap plugin ls◦ phonegap plugin remove org.apache.cordova.console

Información Phonegap◦ npm update -g phonegap◦ npm instalar phonegap@3.1.0 -g◦ npm info phonegap

Plugin core Phonegap Información básica del dispositivo (dispositivo API):

◦ phonegap plugin add org.apache.cordova.device

Conexión de red y eventos de batería:◦ phonegap plugin add org.apache.cordova.network-information◦ $ phonegap plugin add org.apache.cordova.battery-status

Acelerómetro, brújula y geolocalización:◦ $ phonegap plugin add org.apache.cordova.device-motion◦ $ phonegap plugin add org.apache.cordova.device-orientation◦ $ phonegap plugin add org.apache.cordova.geolocation

Plugin core Phonegap Cámara, reproducción multimedia y captura:

◦ $ phonegap plugin add org.apache.cordova.camera◦ $ phonegap plugin add org.apache.cordova.media-capture◦ $ phonegap plugin add org.apache.cordova.media

Acceder a archivos en el dispositivo o red:◦ $ phonegap plugin add org.apache.cordova.file◦ $ phonegap plugin add org.apache.cordova.file-transfer

Plugin core Phonegap Notificación mediante vibración o cuadro de diálogo:

◦ $ phonegap plugin add org.apache.cordova.dialogs◦ $ phonegap plugin add org.apache.cordova.vibration

Contactos:◦ $ phonegap plugin add org.apache.cordova.contacts

Globalización:◦ $ phonegap plugin add org.apache.cordova.globalization

Plugin – config.xml

Emulador Ripple Ripple es una extensión que puede instalarse en Chrome para poder emular dispositivos móviles.

Para las pruebas usar Apache (XAMPP) en versión localhost.

JQuery Mobile GUI & Phonegap

Dispositivo listo (deviceready)

<script type="text/javascript" charset="utf-8">

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

// informar que el dispositivo esta listo.

}

</script>

Consideración:

<div id="Estado" align="center"></div>

$("#Estado").html("PhoneGap onDeviceReady OK");

document.getElementById(‘idname');

Acelerómetro API Captura de movimiento del dispositivo en la dirección X, Y y Z.

Métodos◦ accelerometer.getCurrentAcceleration◦ accelerometer.watchAcceleration◦ accelerometer.clearWatch

Argumentos◦ accelerometerSuccess◦ accelerometerError◦ accelerometerOptions

Objetos (sólo lectura)◦ Acceleration

Ejemplofunction acelerometro(){

$("#resultado").html("esperando al acelerómetro");

navigator.accelerometer.getCurrentAcceleration(onInfoAcc, onErrorAccelerometer);

// var watch = navigator.accelerometer.watchAcceleration(onInfoAcc, onErrorAcc, {frequency: 2000});

// navigator.accelerometer.clearWatch(watch);

}

function onInfoAcc(aceleracion){

$("#resultado1").html('Acceleration X: ' + aceleracion.x + '<br>' +

'Acceleration Y: ' + aceleracion.y + '<br>' +

'Acceleration Z: ' + aceleracion.z + '<br>' +

'Timestamp: ' + aceleracion.timestamp);

}

Nota: timestamp es el número de milisegundos en el momento del evento desde que se inicializó el motor de ejecución.

Cámara API El objeto de la cámara proporciona acceso a la aplicación de cámara del dispositivo por defecto.

Métodos◦ camera.getPicture◦ Camera.Cleanup

Implmentacion:◦ navigator.camera.getPicture( cameraSuccess,

cameraError, [ cameraOptions ] );

PictureSourceType• La función camera.getPicture abre la aplicación predeterminada

de cámara del dispositivo que permite a los usuarios tomar fotografías.

• Este comportamiento es el predeterminado, cuando Camera.sourceType es igual a Camera.PictureSourceType.CAMERA. Una vez que el usuario toma la foto, la aplicación de la cámara se cierra y se restablece la aplicación.

• Si Camera.sourceType es Camera.PictureSourceType.PHOTOLIBRARY o Camera.PictureSourceType.SAVEDPHOTOALBUM, entonces aparece un cuadro de diálogo que permite a los usuarios seleccionar una imagen existente.

Consideración: deviceready

var pictureSource; // picture source

var destinationType; // sets the format of returned value

document.addEventListener("deviceready",onDeviceReady,false);

function onDeviceReady() {

pictureSource=navigator.camera.PictureSourceType;

destinationType=navigator.camera.DestinationType;

}

Cámara ejemplos Tomar una foto y recuperarlo como una imagen codificada en base64:

Tomar una foto y recuperar la ubicación del archivo de la imagen:

Captura API (Audio, Imagen y Video)

Proporciona acceso a audio, imagen y las capacidades de captura de vídeo del dispositivo.

Objetos◦ Captura◦ CaptureAudioOptions◦ CaptureImageOptions◦ CaptureVideoOptions◦ CaptureCallback◦ CaptureErrorCB◦ ConfigurationData◦ MediaFiles◦ MediaFileData

Métodos• capture.captureAudio• capture.captureImage• capture.captureVideo• MediaFile.getFormatData

Brújula Descripción

La brújula es un sensor que detecta la dirección o rumbo que el dispositivo está apuntado, normalmente desde la parte superior del dispositivo. Mide el rumbo en grados de 0 a 359.99, donde 0 es el norte.

La información de rumbo de la brújula es devuelta mediante un objeto CompassHeading, utilizando la función de devolución de llamada compassSuccess.

Brújula Obtiene la dirección que apunta el dispositivo.

Métodos:

compass.getCurrentHeading

compass.watchHeading

compass.clearWatch

compass.watchHeadingFilter (obsolete)

compass.clearWatchFilter (obsolete)

Argumentos

compassSuccess

compassError

compassOptions

compassHeading

Conexión El objeto de connection, expuesto a través de navigator.connection, proporciona información sobre conexión celular y wifi del dispositivo.

Propiedades

connection.type

ConstantesConnection.UNKNOWNConnection.ETHERNETConnection.WIFIConnection.CELL_2GConnection.CELL_4GConnection.CELL_3GConnection.CELLConnection.NONE

Ejemplo:

Dispositivo El objeto device describe del dispositivo hardware y software.

Propiedades

device.model

device.cordova

device.platform

device.uuid

device.version

device.name

Consideraciones Ámbito de variable Puesto que el “device” se asigna al objeto de window, es implícitamente en el ámbito global.

Contacts El objeto contacts proporciona acceso a la agenda del dispositivo.

Métodos•contacts.create•contacts.findArgumentos•contactFields•contactSuccess•contactError•contactFindOptions

Objetos•Contact•ContactName•ContactField•ContactAddress•ContactOrganization•ContactFindOptions•ContactError

contacts.create Retorna un objeto Contact nuevo:

Codigo:

var contact = navigator.contacts.create(properties);

Este método no hace el contacto persistente en la base de datos de contactos. Para hacerlo persistente, llama al método:

Contact.save.

contacts.find Consulta la base de datos de contactos y retorna uno o mas objetos Contact, cada uno con los campos especificados.

Código:

navigator.contacts.find(contactFields, contactSuccess, contactError, contactFindOptions);

contacts.find .- es una función asíncrona que consulta la base de datos de la agenda del dispositivo y retorna un array de objetos Contact.

Los objetos retornados son pasados a la función 'callback' contactSuccess especificada en el argumento contactSuccess.

Argumentos: navigator.contacts.findcontactFields: Campos del contacto para usarse en las búsquedas. Solo estos campos tendrán valores asignados en el objeto Contact retornado. (DOMString[]) [Requerido]

contactSuccess: Función 'callback' Success que se dispara cuando se retorna un contacto de la base de datos. [Requerido]

contactError: Función 'callback' Error. Se dispara cuando ocurre algún tipo de error. [Opcional]

contactFindOptions: Opciones de búsqueda para filtrar contactos. [Opcional]

Ejemplo

Ejemplo Completo

Contact - Atributos Contiene propiedades que describen un contacto,

como su información personal o de trabajo.

• id: Un identificador unico y global. (DOMString)

• displayName: El nombre de este contacto. Ideal para mostrar al usuario final. (DOMString)

• name: Un objeto conteniendo todos las partes del nombre de una persona. (ContactName)

• nickname: Un apodo por el que conoces a la persona. (DOMString)

• phoneNumbers: Un array de todos sus números de teléfono. (ContactField[])

• emails: Un array de todas sus direcciones de email. (ContactField[])

• addresses: Un array de todas sus direcciones de contacto. (ContactAddresses[])

• ims: Un array de todas las direcciones de mensajeria instantanea. (ContactField[])

• organizations: Un array con todos sus nombres de organizaciones. (ContactOrganization[])

• birthday: La fecha de nacimiento del contacto. (Date)

• note: Una nota sobre este contacto. (DOMString)

• photos: Un array de fotos del contacto. (ContactField[])

• categories: Un array de todas las categorías del contacto. (ContactField[])

• urls: Un array de sitios webs asociados a este contacto. (ContactField[])

Contact Métodos•clone: Retorna un nuevo objeto del contacto, es una copia de este contacto con la propiedad ID null.

•remove: Elimina el contacto de la base de datos del dispositivo. Se disparara una función 'callback' de error si no se pudo eliminar.

•save: Guarda el contacto en la base de datos, o actualiza el contacto si ya existe un contacto con la misma id.

Guardar un contacto

Notificación Notificaciones de dispositivo audible, visual y táctil.

Métodos:

• notification.alert

• notification.confirm

• notification.prompt

• notification.beep

• notification.vibrate

notification.alert Muestra un cuadro de alerta o diálogo personalizado.

navigator.notification.alert(message, alertCallback, [title], [buttonName])

• message: mensaje de diálogo. (String)

• alertCallback: Callback para invocar al diálogo de alerta. (Función)

• título: título de diálogo. (String) (Opcional, por defecto Alert)

• buttonName: nombre del botón. (String) (Opcional, por defecto OK)

Nota: algunas plataformas de utilizan la función de alert del navegador, que es típicamente menos personalizable.

Ejemplo de alert

notification.confirm Muestra un cuadro de diálogo de confirmación personalizables.

navigator.notification.confirm(message, confirmCallback, [title], [buttonLabels])

• mensaje: mensaje de diálogo. (String)

• confirmCallback: Callback para invocar con índice del botón pulsado (1, 2 ó 3) o cuando el cuadro de diálogo es cerrado sin presionar botón botón (0). (Función)

• título: título de diálogo. (String) (Opcional, por defectoConfirm)

• buttonLabels: matriz de cadenas especificando las etiquetas de botón. (Matriz) (Opcional, por defecto [OK, cancelar])

Nota: El confirmCallback se ejecuta cuando el usuario presiona uno de los botones en el cuadro de diálogo de confirmación.

Ejemplo de confirm

notification.prompt Muestra un cuadro de diálogo pronto personalizables.

navigator.notification.prompt(message, promptCallback, [title], [buttonLabels], [defaultText])

• mensaje: mensaje de diálogo. (String)

• promptCallback: devolución de llamada que invocar cuando se presiona un botón. (Función)

• título: título (String) (opcional, por defecto de diálogoPrompt)

• buttonLabels: matriz de cadenas especificando botón etiquetas (Array) (opcional, por defecto["OK","Cancel"])

• defaultText: valor de la entrada predeterminada textbox ( String ) (opcional, por defecto: cadena vacía)

Ejemplo de prompt

notification.beep y notification.vibrate

El dispositivo reproduce un sonido sonido.

navigator.notification.beep(times);

navigator.notification.vibrate(milliseconds);

Ejemplos:

navigator.notification.beep(2);

navigator.notification.vibrate(2500);

Nota: En iOS el parámetro time: ignora el tiempo especificado y vibra por un tiempo preestablecido.

Geolocation La API Geolocation proporciona información sobre la localización del dispositivo, como la latitud y la longitud.

Los orígenes de datos sobre localización pueden ser el Global Position System (GPS) o la localización obtenida por medio de la red, como la dirección IP, RFID, dirección MAC de dispositivos WiFi/Bluetooth, y los IDs de células GSM/CDMA.

Geolocation Métodos

geolocation.getCurrentPosition

geolocation.watchPosition

geolocation.clearWatch

Argumentos

geolocationSuccess

geolocationError

geolocationOptions

Objetos (Solo Lectura)PositionPositionErrorCoordinates

geolocation.getCurrentPosition

Retorna la geolocalización actual en un objeto Position.

Argumentos:

•geolocationSuccess: La función 'callback' que sera llamada con la posición actual.

•geolocationError: (Opcional) la función 'callback' que sera llamada si ocurriera un error.

•geolocationOptions: (Opcional) Opciones de geolocalización.

Ejemplo

geolocation.watchPosition

Observa los cambios en la actual geolocalización del dispositivo.

Argumentos

•geolocationSuccess: La función 'callback' a la que se le entregara la posición actual.

•geolocationError: (Opcional) La función 'callback' que sera llamada si ocurriera un error.

•geolocationOptions: (Opcional) Opciones de geolocalización.

Retorna

String: Un ID es retornado por la función, ese ID apunta a este observador de geolocalización, puedes usarlo en la función geolocation.clearWatch para dejar de observar la geolocalización.va los cambios en la actual geolocalización del dispositivo.

Ejemplo

geolocation.clearWatch Deja de observar los cambios en la geolocalización (Geolocation) con ese watchID.

Coordinates Un conjunto de atributos que describe las coordenadas geográficas de una posición, el objeto Coordinates es creado y compuesto por PhoneGap, y atribuido al objeto Position

Argumentos:

latitude: Latitud en grados decimales. (Number)

longitude: Longitud en grados decimales. (Number)

altitude: Altura de la posición en metros por encima del elipsoide. (Number)

accuracy: Nivel de precisión (en metros) de la latitud y longitud. (Number)

altitudeAccuracy: Nivel de precisión (en metros) de la altitud. (Number)

heading: Dirección de travesía (en grados) contando como las agujas del reloj y relativo al norte (real). (Number)

speed: Velocidad actual del dispositivo (metros por segundo). (Number)

Ejemplo: Coordinates

Google Map Servidor de aplicaciones de mapas en la web que pertenece a Alphabet Inc. Ofrece imágenes de mapas desplazables, así como fotografías por satélite del mundo e incluso la ruta entre diferentes ubicaciones o imágenes a pie de calle con Google Street View.

Se lanzo en 2005.

https://www.google.com.ec/maps/@-2.1711709,-79.9257882,13z

http://maps.googleapis.com/maps/api/staticmap?center= -2.17,-79.92 &zoom=13&size=200x200&maptype=roadmap&markers=color:green%7C33&sensor=false

Storage Métodos

•openDatabase

Argumentos

•name

•version

•display_name

•size

Objects• Database• SQLTransaction• SQLResultSet• SQLResultSetList• SQLError• localStorage

openDatabase Returna un nuevo objeto Database.

Formato:

var dbShell = window.openDatabase(name, version, display_name, size);

Este método creará un nuevo “SQL Lite Database” y retorna un objeto Database. Este objeto de tipo Database se usa para manipular los datos.

Ejemplo

Database Contiene métodos que permiten al usuario manipular la base de datos.

Métodos:

•transaction: Ejecuta una transacción a la base de datos.

•changeVersion: metodo que permite a los scripts verificar numero de version y cambiar.

Detalle

Un Objeto Database es devuelto en la llamada a: window.openDatabase().

Ejemplo

SQLTransaction Contiene un métodos que permite al usuario ejecutar sentencias SQL en la base datos.

Método:

•executeSql: executes a SQL statement

SQLResultSet Cuando el metodo “executeSql” de una “SQLTransaction” es llamado puede traer datos como returno en la llamado.con un SQLResultSet.

localStorage Provee acceso de almacenamiento segun la interface del “W3C Storage“

Metodos:

•key: Returns the name of the key at the position specified.

•getItem: Returns the item identified by it's key.

•setItem: Saves and item at the key provided.

•removeItem: Removes the item identified by it's key.

•clear: Removes all of the key value pairs.

Ejemplo

Gracias.

Phonegap por Msc. Yamil Lambert Sarango