Adobe phonegap / Cordova

1. Adobe Phonegap /
Cordova
POR MSC. YAMIL LAMBERT SARANGO

2. 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

3. 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

4. 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

5. 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

6. 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

7. 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

8. Plugin – config.xml

9. 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.

10. JQuery Mobile GUI &
Phonegap

11. 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');

12. 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

13. Ejemplo
function 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.

14. 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 ] );

15. 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.

16. 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;
}

17. 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:

18. 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

19. 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.

20. 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

21. 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
Constantes
Connection.UNKNOWN
Connection.ETHERNET
Connection.WIFI
Connection.CELL_2G
Connection.CELL_4G
Connection.CELL_3G
Connection.CELL
Connection.NONE

22. Ejemplo:

23. Dispositivo
El objeto device describe del dispositivo hardware y software.
Propiedades
device.model
device.cordova
device.platform
device.uuid
device.version
device.name

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

25. Contacts
El objeto contacts proporciona acceso a la agenda del dispositivo.
Métodos
•contacts.create
•contacts.find
Argumentos
•contactFields
•contactSuccess
•contactError
•contactFindOptions
Objetos
•Contact
•ContactName
•ContactField
•ContactAddress
•ContactOrganization
•ContactFindOptions
•ContactError

26. 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.

27. 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.

28. Argumentos:
navigator.contacts.find
contactFields: 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]

29. Ejemplo

30. Ejemplo Completo

31. 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[])

32. 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.

33. Guardar un contacto

34. Notificación
Notificaciones de dispositivo audible, visual y táctil.
Métodos:
• notification.alert
• notification.confirm
• notification.prompt
• notification.beep
• notification.vibrate

35. 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.

36. Ejemplo de alert

37. 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.

38. Ejemplo de confirm

39. 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)

40. Ejemplo de prompt

41. 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.

42. 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.

43. Geolocation
Métodos
geolocation.getCurrentPosition
geolocation.watchPosition
geolocation.clearWatch
Argumentos
geolocationSuccess
geolocationError
geolocationOptions
Objetos (Solo Lectura)
Position
PositionError
Coordinates

44. 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.

45. Ejemplo

46. 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.

47. Ejemplo

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

49. 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)

50. Ejemplo: Coordinates

51. 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&s
ensor=false

52. Storage
Métodos
•openDatabase
Argumentos
•name
•version
•display_name
•size
Objects
• Database
• SQLTransaction
• SQLResultSet
• SQLResultSetList
• SQLError
• localStorage

53. 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.

54. Ejemplo

55. 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().

56. Ejemplo

57. SQLTransaction
Contiene un métodos que permite al usuario ejecutar sentencias SQL en
la base datos.
Método:
•executeSql: executes a SQL statement

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

59. 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.

60. Ejemplo

61. Gracias.
Phonegap por Msc. Yamil Lambert Sarango