Seminario de PhoneGap con los fundamentos del framework y los primeros pasos para la programación de aplicaciones móviles.

1. 1
University of Castilla-La Mancha, Spain
MAmI Research Lab
PhoneGap Basics
v1.0
Jesús Fontecha Diezma
http://www.jesusfontecha.name

2. ¿Qué es PhoneGap?
2
• Framework gratuito y abierto para crear aplicaciones móviles multiplataforma
• Basado en tecnologías web
HTML CSS JavaScript+ +
Ventajas Desventajas
• Reutilizar tus conocimientos web
para programar apps móviles.
• Despliegue multiplataforma
• Mayor público con menos esfuerzo
• Es interpretado
• Compatibilidad con funciones
nativas
• Depuración costosa
http://www.jesusfontecha.name

3. ¿A quién pertenece PhoneGap?
3
“Adobe compro a Nitobi, la empresa que creó PhoneGap, compró todos sus
productos y servicios, sin embargo el proyecto y código fuente de PhoneGap fue
donado por completo a la fundación Apache (ASF) para garantizar que
permanezca siempre abierto y gratuito”.
http://revolucion.mobi/2011/10/04/adobe-compra-phonegap-y-ahora-que/
http://docs.phonegap.com/en/3.0.0/guide_over
view_index.md.html#Overview
• Soporte para la mayoría de
plataformas móviles:
http://www.jesusfontecha.name

4. Primeros pasos: preparación del entorno
4
• Requisitos
• Eclipse 3.4+
• Prepararemos nuestras apps para Android
• Instalación IDE + SDK Android
1. Descargar e instalar Eclipse: http://www.eclipse.org/downloads/
2. Descargar e instalar Android SDK: http://developer.android.com/sdk/index.html
3. Descargar e instalar ADT Plugin:
1. Iniciar eclipse
2. Seleccionar Help -> Install New Software
3. Añadimos el repositiorio de la url:
• https://dl-ssl.google.com/android/eclipse/
• Descargamos las herramientas
O… descargar el bundle
http://developer.android.com/sdk/index.html
http://www.jesusfontecha.name

5. Primeros pasos: integración de Cordova
5
• Integración SDK + Cordova
• Descargar la última versión de PhoneGap: http://phonegap.com/install/
• Extraer su contenido (lo guardamos de forma temporal)
• Nos centraremos en el directorio de /Android
• ¡Ya podemos crear nuestro primer proyecto!
• Creación del proyecto
• Creamos un nuevo proyecto Android
http://www.jesusfontecha.name

6. Primeros pasos: configuración del proyecto
6
• Preparación y configuración
1. Creamos 2 nuevos directorios en la raíz del proyecto
• /libs
• /assets/www
2. Copiar cordova-x.x.x.js de la versión PhoneGap descargada a assets/www
3. Copiar cordova-x.x.x.jar de la versión PhoneGap descargada a /libs
4. Copiar la carpeta /xml de la versión PhoneGap descarada a /res
5. Verificar que cordova-x.x.x.jar se encuentra en el Build Path, si no, añadir.
http://www.jesusfontecha.name

7. Primeros pasos: modificando la actividad principal
7
• Edición ficheros del proyecto
1. Acceder a la actividad principal del proyecto Android, en el directorio /src
• Importar el paquete org.apache.cordova.*;
• Hacer que la clase extienda de DroipGap
• Reemplazar la línea setContentView() por
super.loadUrl(“file:///android_asset/www/index.html”);
http://www.jesusfontecha.name

8. Primeros pasos: modificando el manifiesto
8
• Edición ficheros del proyecto
1. Añadimos los permisos para PhoneGap entre <uses-sdk…/> y
<application…/>
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />
android:configChanges="orientation|keyboardHidden|screenSize"
Permitir rotación pantalla (<activity>)
http://www.jesusfontecha.name

9. Hello World!
9
• Programando la aplicación
1. Creamos la página inicial “index.html”
2. Todas las páginas se almacenan en assets/www
<!DOCTYPE HTML>
<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.8.0.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
• Desplegando la aplicación
1. Ejecutar la aplicación en emulador como Android Application
2. Conectar un dispositivo USB y ejecutarla en él
http://www.jesusfontecha.name
Ejemplo descargable de: http://jesusfontecha.name/recursos/ejemplos/HolaPhoneGap.zip

10. Programando de forma organizada
10
• Estructura de directorios de la aplicación
• Es aconsejable organizar bien el código html de nuestra aplicación
• Agrupar ficheros en carpetas
• Un ejemplo:
/www
/css
/img
/js
/pages
index.html
• Revisar el ejemplo que viene con la distribución PhoneGap.
¿Con HTML y JavaScript puedo acceder a las funciones del dispositivo móvil?
http://www.jesusfontecha.name

11. API PhoneGap
11
• Ofrece funciones para el manejo de:
• Brújula
• Acelerómetro
• Cámara
• Captura (imagen, video y audio)
• Conexiones
• Contactos
• Eventos (pulsaciones, desplazamientos,…)
• Device (info del dispositivo)
• Ficheros
• Geolocalización (red+GPS)
• Globalización (localización y lenguaje SSOO)
• InAppBrowser (cambios de contexto con el navegador nativo)
• Media
• Notification
• Splashscreen (operaciones sobre splash screens)
• Storage (almacenamiento y recuperación de datos)
¡No todos los dispositivos permiten
manejar todas sus funciones con
PhoneGap!
http://www.jesusfontecha.name

12. Emulador vs Dispositivo real
12
• El emulador permite comprobar el aspecto y funcionamiento de la aplicación en
un dispositivo, en este caso, virtual.
• La ejecución de la aplicación en un dispositivo real, permite comprobar el
comportamiento y aspecto real de la aplicación.
¿Y si deseamos crear una aplicación que maneje los sensores del móvil?
¿Puedo emular la cámara?
¿Puedo emular la brújula?
¿Puedo emular el GPS?
¿Puedo emular el acelerómetro?
…uso de plugins y aplicaciones de terceros
Lo mejor y recomendable: ¡Usar el dispositivo real!
http://www.jesusfontecha.name

13. 1
2
¡Para Android Nativo!
Centrado en Blackberry
Poco soporte
Errores. Pobre emulación
No es trivial emular la aplicación
3
Emulador Android
Aplicaciones de simulación
Emulador “online”
4
Móvil real
Caso: Emulación de sensores
13
http://www.jesusfontecha.name

14. Instrumento que permite determinar la orientación con respecto a la superficie
terrestre, a través de una aguja que indica la dirección del norte magnético.
Obtiene la orientación en grados (0° a 359.99°) hacia
dónde apunta el dispositivo.
Obtiene la orientación en grados (0° a 359.99°) hacia
dónde apunta el dispositivo en un intervalo regular.
Interrumpe la obtención de valores de orientación.
navigator.compass.getCurrentHeading(onSuccess, onError, [compassOptions]);
Éxito Error Opciones
function onSuccess(heading) {
alert('Heading: ' + heading.magneticHeading);
};
function onError( error) {
alert(‘Error:' + error.code);
}
Ejemplo: programación de sensores
• Brújula
http://docs.phonegap.com/en/edge/cordova_compass_compass.md.html#Compass
14
http://www.jesusfontecha.name

15. Opciones
frequency (Number): Frecuencia a la que se calculan los grados de orientación en milisegundos (100)
filter (Number): Grados de orientación para determinar una obtención exitosa de watchHeading.
function onSuccess(heading) {
alert('Heading: ' + heading.magneticHeading);
};
function onError( error) {
alert(‘Error:' + error.code);
}
Propiedades
• magneticHeading (Number): grados en ese instante.
• trueHeading (Number): grados relativos al polo norte geográfico (valor negativo=error).
• headingAccuracy (Number): grados de desviación entre polo norte magnético y real.
• timestamp (milliseconds): milisegundos transcurridos desde las 0h del 01/01/1970 GMT.
• code: Código de error CompassError.COMPASS_INTERNAL_ERR
CompassError.COMPASS_NOT_SUPPORTED
// Actualiza el valor de la brújula cada 3 segundos
var options = { frequency: 3000 };
watchID = navigator.compass.watchHeading(onSuccess, onError, options);
Ejemplo
Brújula (cont.)
15
http://www.jesusfontecha.name

16. 1. Acceder a: http://jesusfontecha.name/recursos/ejemplos/ProyectosSensores_API_14.zip
2. Descargar los proyectos y descomprimir
3. Acceder al proyecto “TestBrujula” y revisar su contenido
4. Crear/importar el proyecto Android en Eclipse
5. Configuramos el proyecto PhoneGap (ver Trasps. 6-7)
6. Probar su ejecución
Ejercicio brújula (I)
16
1. Programar el método/función startWatch() para que recoja valores de orientación cada
2 segundos.
2. Programar los métodos onSuccess y onError.
1. onSuccess: escribe en la pantalla el valor de orientación.
2. onError: muestra un ‘alert’ con el código de error.
3. Programar el método stopWatch() para detener la recolección de datos de orientación.
• Pasos previos
• Ejercicio 1
http://www.jesusfontecha.name

17. Ejercicio brújula (II)
17
• Ejercicio 2
1. Añadir al html inicial, el icono “round_arrow_right.png” contenido en “/img”.
2. Modificar el método onSuccess para rotar “arrow” según los grados recogidos de la
brújula cada 2 segundos.
arrow.css(‘-webkit-transform’, ‘rotate(‘ + arrowOrientation + ‘deg)’);
http://jesusfontecha.name/recursos/ejemplos/ProyectosSensores_API_14_Soluciones.zip
Soluciones en:
http://www.jesusfontecha.name

18. Ejemplo: programación de sensores (II)
• Acelerómetro
http://docs.phonegap.com/en/edge/cordova_accelerometer_accelerometer.md.html#Accelerometer
18
Sensor que mide: los cambios inducidos por fuerzas gravitatorias y la aceleración
(o la aceleración bajo el efecto de la gravedad).
• Distribución coordenadas
• “estandarizado” o necesidad de calibración
• Efecto Gravedad
• aceleración sometida al efecto de la gravedad en la
coordenada correspondiente (9,8m/s²)
• Precisión
• Se mide en “G”: aceleración que puede
soportar/detectar el móvil (±2G)
• 0 G  Caída libre
• 1G  Objeto en superficie terrestre
• +1G  Montaña rusa, avión combate,…
• Ruido
• Variabilidad en la señal del acelerómetro
• Filtrado señal
http://www.jesusfontecha.name

19. Obtiene la aceleración de los ejes x, y, z; y el
timestamp.
Obtiene la aceleración (x,y,z) y el timestamp
en un intervalo regular.
Interrumpe la obtención de valores de aceleración.
navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
Éxito Error
function onSuccess(acceleration) {
alert('Acceleration X: ' + acceleration.x + 'n' +
'Acceleration Y: ' + acceleration.y + 'n' +
'Acceleration Z: ' + acceleration.z + 'n' +
'Timestamp: ' + acceleration.timestamp + 'n');
};
function onError() {
alert('onError!');
}
var options = { frequency: 3000 }; // Actualiza cada 3 segundos
var watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
Opciones
navigator.accelerometer.watchAcceleration(onSuccess, onError, [options]);
Acelerómetro (cont.)
19
http://www.jesusfontecha.name

20. Geolocalización
http://docs.phonegap.com/en/edge/cordova_geolocation_geolocation.md.html#Geolocation
20
Nos permite conocer la posición de un objeto en la tierra, mediante el uso de GPS y señales
de red (WiFi, RFID, Bluetooth, GSM)
Obtiene la posición actual del dispositivo en un objeto
Position
Observa cambios en la posición del dispositivo según
las opciones dadas.
Interrumpe la obtención de valores de posición.
navigator.geolocation.getCurrentPosition(onSuccess, onError, [options]);
Éxito Error Opciones
function onSuccess(heading) {
alert('Heading: ' + heading.magneticHeading);
};
function onError( error) {
alert(‘Error:' + error.code);
}
http://www.jesusfontecha.name

21. function onSuccess(position) {
alert(‘Latitud: ' + position.coords.latitude);
};
Opciones
enableHighAccuracy (Boolean): Especifica si queremos una
alta precisión en los cálculos. Por ejemplo, usando GPS en
lugar de la red.
Timeout (Number): Máximo valor de tiempo permitido para
intentar obtener una posición. Si tardamos más tiempo que
‘timeout’ en conseguir una localización, se llama a ‘onError’.
maximumAge (Number): Indica aceptar la posición obtenida
en el tiempo especificado (nunca mayor al timeout).
function onError( error) {
alert(‘Error:' + error.code);
}
Propiedades
• coords (Coordinates): grados en ese instante.
• timestamp (milliseconds): milisegundos transcurridos desde las 0h del 01/01/1970 GMT.
• code: Código de error
• message: Detalles del error
PositionError.PERMISSION_DENIED
PositionError.POSITION_UNAVAILABLE
PositionError.TIMEOUT
• latitude (Number) : Latitud en grados.
• longitude (Number) : Longitud en grados.
• altitude (Number) : Altitud en metros.
• accuracy (Number) : Precisión en metros del par (latitud,longitud).
• altitudeAccuracy (Number) : Precisión en metros de la altitud.
• heading (Number) : Dirección del viaje en grados, respecto al norte geográfico.
• speed (Number) : Velocidad de viaje del dispositivo en m/s.
21
http://www.jesusfontecha.name

22. Más ejercicios (I)
22
• Ejercicios para manejo de acelerómetro y geolocalización
• Acelerómetro 1
1. Descargar “TestAcelerometro”. Programar el método/función
startWatch() para que recoja valores de aceleración cada 2
segundos.
2. Programar los métodos onSuccess y onError.
1. onSuccess: escribe en la pantalla el valor de las coordenadas
x, y, z y el timestamp.
2. onError: muestra un ‘alert’ con el mensaje de error “Fallo al
recoger datos del acelerómetro”.
3. Programar el método stopWatch() para detener la recolección de
datos del acelerómetro.
http://jesusfontecha.name/recursos/ejemplos/ProyectosSensores_API_14.zip
• Acelerómetro 2
1. Programar la función startMoving() que recoge valores de
aceleración cada 0,5 segundos.
• En caso de éxito en la recogida de estos valores, se deberá
llamar a la función moveObject, que mueve el objeto por la
pantalla teniendo en cuenta los valores (x,y) de aceleración
obtenidos.
http://www.jesusfontecha.name

23. Más ejercicios (II)
23
• Geolocalización 1
http://jesusfontecha.name/recursos/ejemplos/ProyectosSensores_API_14_Soluciones.zip
Soluciones en:
1. Descargar e importar el proyecto “TestGeoLoc”.
2. Programar la función getPosition() para que recoja valores de localización con estos requisitos:
• Habilitación de la opción enableHighAccuracy
• Fijar el timeout a 10 segundos.
3. Completar la función onSuccess para que muestre todos los datos posibles de localización
debidamente formateados en una tabla.
• Mostrar la fecha y hora en la que se ha obtenido la localización en lugar de su valor en
milisegundos (dado por ‘timestamp’).
4. Programar la función onError para mostrar un mensaje de alerta con el código del error y el mensaje
de error.
http://www.jesusfontecha.name

24. Más ejercicios (III)
24
• Geolocalización 2: Uso de los mapas de Google
var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Initialize the Google Maps API v3
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 16,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Place a marker
new google.maps.Marker({
position: point,
map: map
});
http://www.jesusfontecha.name

25. Otras características de PhoneGap
25
• Servicio PhoneGap Build
• Servicio en la nube para compilar aplicaciones y facilitar su distribución
• Compilador para todas las plataformas
• Generación de instalables
• Favorece la colaboración (repositorios)
• Es de pago (de forma gratuita solo permite utilizarlo con una
aplicación)
• Extender PhoneGap con plugins
• Implementar en PhoneGap partes de código nativo encapsuladas en plugins
• Usar cuando se requiere utilizar funciones no implementables desde PhoneGap
o para conseguir mayor rendimiento en esas acciones.
• La clase que implementa el plugin debe heredar de CordovaPlugin
• Sobrescribir el método execute de la clase con lo que queremos que haga
nuestro plugin.
http://build.phonegap.com/
http://docs.phonegap.com/en/edge/guide_platforms_android_plugin.md.html#Android%20Plugins
http://www.jesusfontecha.name

26. 26
Jesús Fontecha DiezmaPhoneGap Basics V1.0
http://www.jesusfontecha.name