Post on 14-Feb-2017
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