Desarrollo de Apps Multiplataforma para Dispositivos Móviles. Phonegap - Cordova. Pedro A. Castillo Valdivieso Universidad de Granada pacv@ugr.

Transcripción

1 Desarrollo de Apps Multiplataforma para Dispositivos Móviles Phonegap - Cordova Pedro A. Castillo Valdivieso Universidad de Granada pacv@ugr.es

2 Phonegap Materiales! Materiales en la web Texto, presentaciones y ejemplos: Servicios web de hora y dirección IP: 2

3 Phonegap! Índice 1. Introducción 2. Datos sobre Phonegap-Cordova 3. Realmente funciona? 4. Mismo código para desarrollar en ios, Android o Win-Phone 5. Descargar PhoneGap 6. Crear la primera aplicación 7. Descripción de las APIs de Phonegap 8. PhoneGap Build: Compilador en la nube 9. Importar aplicaciones 10. Ejemplos 11. Proyecto 3

4 Phonegap - Introducción! Introducción al desarrollo para plataformas móviles Quiero desarrollar aplicaciones para móviles, pero para qué plataforma comienzo a desarrollar? Las aplicaciones Android se desarrollan usando Java, ios usa Objetive C como lenguaje de desarrollo y Symbiam usa C++. Manejar muchos lenguajes de programación para desarrollar una sola aplicación. Lo ideal? Desarrollar para todas las plataformas, así las aplicaciones abarcan un número mayor de posibles usuarios. 4

5 Phonegap - Introducción! Introducción al desarrollo para plataformas móviles Hay una forma de desarrollar aplicaciones con una tecnología única? PhoneGap es un framework para el desarrollo de aplicaciones móviles. Usando técnicas de desarrollo web podemos hacer aplicaciones nativas para dispositivos móviles. Actualmente pertenece a Adobe Systems. 5

6 Phonegap - Introducción! Introducción al desarrollo para plataformas móviles PhoneGap es un framework para el desarrollo de aplicaciones móviles. PhoneGap permite a los programadores desarrollar aplicaciones para dispositivos móviles utilizando herramientas genéricas tales como JavaScript, HTML5 y CSS3. Con PhoneGap hacemos un solo código cuya lógica de programación está sustentada en JavaScript Las aplicaciones resultantes son híbridas, es decir que no son realmente aplicaciones nativas al dispositivo (ya que el renderizado es realizado mediante vistas web). 6

7 Phonegap - Introducción! Introducción al desarrollo para plataformas móviles Desarrollar aplicaciones para dispositivos móviles utilizando JavaScript, HTML5 y CSS3: 7

8 Phonegap - Introducción! Introducción al desarrollo para plataformas móviles No se tratan tampoco de aplicaciones web. Se empaqueta la aplicación web original con un navegador basado en webkit para desplegarla en el dispositivo trabajando con el API del sistema nativo. PhoneGap maneja APIs que permiten tener acceso a elementos como el acelerómetro, cámara, contactos en el dispositivo, red, almacenamiento, notificaciones, etc. PhoneGap es compatible con frameworks de desarrollo web móvil: jquery Mobile, Sencha Touch, Dojo, jqtouch, SprountCore, GloveBox, XUI, iscroll. 8

10 Phonegap Datos sobre el framework! Datos sobre el framework PhoneGap - Cordova Actualmente este framework soporta: Android ios Windows Phone BlackBerry OS Web OS Symbiam Bada 10

11 Phonegap Datos sobre el framework! Datos sobre el framework PhoneGap - Cordova Soporte actual para cada una de estas plataformas: 11

12 Phonegap Datos sobre el framework! Datos sobre el framework PhoneGap - Cordova PhoneGap es completamente libre. Se puede descargar de la página web oficial: Sección para desarrolladores con instrucciones para comenzar a usarlo. 12

13 Phonegap Datos sobre el framework! Datos sobre el framework PhoneGap - Cordova Existen otros frameworks similares: Appcelerator Titanium: Mobl: Sencha Touch: 13

14 Phonegap! Índice 1. Introducción 2. Datos sobre Phonegap-Cordova 3. Realmente funciona 4. Mismo código para desarrollar en ios, Android o Win-Phone 5. Descargar PhoneGap 6. Crear la primera aplicación 7. Descripción de las APIs de Phonegap 8. PhoneGap Build: Compilador en la nube 9. Importar aplicaciones 10. Ejemplos 11. Proyecto 14

15 Phonegap Realmente funciona?! Realmente funciona? apps 15

16 Phonegap Realmente funciona?! Realmente funciona? Algunas aplicaciones propias desarrolladas con Phonegap: 16

17 Phonegap Realmente funciona?! Realmente funciona? Explicación de una apliación propia: Calcular la letra del NIF/NIE 17

18 Phonegap! Índice 1. Introducción 2. Datos sobre Phonegap-Cordova 3. Realmente funciona 4. Mismo código para desarrollar en ios, Android o WinPhone 5. Descargar PhoneGap 6. Crear la primera aplicación 7. Descripción de las APIs de Phonegap 8. PhoneGap Build: Compilador en la nube 9. Importar aplicaciones 10. Ejemplos 11. Proyecto 18

19 Phonegap Un solo código! Un solo código para varias plataformas. Win-Phone Veamos el proceso (básico) para crear aplicaciones con Phonegap en: ios Win-Phone 19

20 Phonegap Un solo código! Un solo código para varias plataformas. ios 20

23 Phonegap Un solo código! Un solo código para varias plataformas. Win-Phone 23

24 Phonegap Un solo código! Un solo código para varias plataformas. Win-Phone 24

25 Phonegap Un solo código! Un solo código para varias plataformas. Win-Phone Más adelante veremos el proceso más detallado para crear aplicaciones con Phonegap en: ios Win-Phone 25

27 Phonegap - Descargar! Descargar PhoneGap Descargar la última versión disponible del framework desde: Actualmente la versión más nueva es la

28 Phonegap - Descargar! Descargar PhoneGap Descomprimir el archivo.zip para sacar una carpeta con las librerías para cada sistema operativo. Obtenemos una librería JavaScript y otra en el lenguaje nativo para comunicar la aplicación web con el dispositivo. 28

30 Phonegap Primera aplicación! Crear la primera aplicación (proyecto Android) Tutoriales detallados para comenzar a hacer aplicaciones PhoneGap para cada sistema operativo compatible: ios, Android, BlackBerry OS, Windows Phone, Web OS, Bada y Symbian. Pasos para crear un proyecto PhoneGap para Android con Eclipse y el plugin ADT instalados... 30

31 Phonegap Primera aplicación! Crear la primera aplicación (proyecto Android) Iniciar Eclipse y crear un nuevo proyecto a través del menú File > New > Project 1 31

32 Phonegap Primera aplicación! Crear la primera aplicación (proyecto Android) Eclipse nos guiará en el proceso de crear la aplicación

33 Phonegap Primera aplicación! Crear la primera aplicación (proyecto Android) Proceso de crear la aplicación:

41 Phonegap Primera aplicación! Crear la primera aplicación (proyecto Android) Proceso: 20 41

42 Phonegap Primera aplicación! Crear la primera aplicación (proyecto Android) Proceso: 21 42

43 Phonegap Primera aplicación! Crear la primera aplicación (proyecto Android) Ejercicio: Crear la primera aplicación Phonegap siguiendo el proceso descrito anteriormente. 43

45 Phonegap APIs! Descripción de las APIS de PhoneGap Varias APIs para acceder al hardware del dispositivo móvil: Acelerometer: brinda acceso al acelerómetro del dispositivo. Camera: Brinda acceso a la aplicación de la cámara para tomar una foto u obtenerla de la galería. Capture: Brinda acceso a aplicaciones de capturas de audio y video. Compass: Esta API es útil para hacer verificación en cambio de la orientación del dispositivo, tambien depende del hardware. Connection: Útil para trabajar con las conexiones de red que cuenta el dispositivo, desde redes WiFi, redes 3G, redes 4G entre otras. Contacts: proporciona acceso a los contactos almacenados. Device: Con esta se pueden obtener datos del dispositivo como el sistema operativo, el nombre y algunos otros datos relevantes. Media: proporciona acceso a reproductores multimedia como sonido y video. 45

46 Phonegap APIs! Descripción de las APIS de PhoneGap Varias APIs para acceder al hardware del dispositivo móvil (cont): Events: con esta APIS es posible manejar eventos de teclas físicas del dispositivo, además de manejar los diferentes eventos generados en el ciclo de vida de una aplicación. File: Su implementación facilita el acceso a los archivos del dispositivo, con esta API se puede crear, editar y leer archivos binarios. Geolocation: Útil para obtener la posición geográfica del dispositivo, ya bien sea a través de redes o del GPS satelital si cuenta el cuenta el dispositivo con uno. Notication: además de ser útil para crear cuadros de diálogos como alertas nativas del sistema, también brinda acceso al vibrador si el dispositivo lo posee. Storage: Facilita el uso de base de datos basadas en el estándar de W3C y el uso de localstorage. 46

47 Phonegap APIs! Descripción de las APIS de PhoneGap Documentación detallada del uso de las APIs de programación: 47

48 Phonegap APIs! Descripción de las APIS de PhoneGap Incluir la API en nuestra aplicación Cómo podemos tener acceso al dispositivo móvil desde las páginas web que forman nuestra aplicación? Incluir la API Javascript en el archivo HTML: <script type="text/javascript" charset="utf-8" src="cordova js">! </script>! 48

49 Phonegap APIs! Descripción de las APIS de PhoneGap PhoneGap en marcha Con la librería JavaScript incluida, podemos usar los eventos y las APIs para acceder al dispositivo: <script type="text/javascript" charset="utf-8">! //Esperamos que PhoneGap esté cargado! document.addeventlistener("deviceready", InicioApp, false);! // IniciarAplicacion es la funcion que se ejecuta cuando!! phonegap se ha cargado completamente (evento deviceready)! function InicioApp (){! }! </script>! 49

50 Phonegap APIs! Descripción de las APIS de PhoneGap Qué información podemos obtener del dispositivo usando la API device? device.name: Sirve para conocer el nombre del dispositivo móvil que está usando la aplicación. device.cordova: Sirve para conocer la versión de Cordova del dispositivo móvil que está usando la aplicación. device.platform: Sirve para conocer el sistema operativo del dispositivo móvil que está usando la aplicación. Puede ser: "Android", "BlackBerry", "iphone", "webos", "WinCE" (Windows Phone). device.uuid: Sirve para conocer el identificado único universal del dispositivo móvil que está usando la aplicación, éste se lo asigna la empresa que fabrica el terminal. device.version: Sirve para conocer la versión del sistema operativo del dispositivo móvil que está usando la aplicación 50

51 Phonegap APIs! Descripción de las APIS de PhoneGap Cómo acceder a la información del dispositivo con la API device? <head>! <script type="text/javascript" charset="utf-8" src="cordova js"> </script>! <script type="text/javascript" charset="utf-8">! document.addeventlistener("deviceready", InicioApp, false);! function InicioApp (){!! var informacion="tu SO es: " + device.platform + " Version: " + device.version;!! alert(informacion);! }! </script>! </head>! Muestra en un "alert" el nombre del sistema operativo que usa el usuario de la aplicación y la correspondiente versión del mismo. 51

52 Phonegap APIs! Descripción de las APIS de PhoneGap Ejercicio: Incluir el código JavaScript anterior en el index.html de nuestra primera aplicación para comprobar el funcionamiento. 52

53 Phonegap APIs! Descripción de las APIS de PhoneGap Cómo acceder a la información del dispositivo? <!DOCTYPE html>! <html><head>! <script type="text/javascript" charset="utf-8" src="cordova js"></script>! <script type="text/javascript" charset="utf-8">! document.addeventlistener("deviceready", IniciarAplicacion, false);! function IniciarAplicacion(){!! var elemento = document.getelementbyid('propiedades');!! var informacion="<br>tu SO es: " + device.platform + " <BR>Version: " + device.version;!! elemento.innerhtml = informacion;! }! </script>! </head>! <body>! Muestra la información en la pantalla de la aplicación (en lugar de en un alert ).! <div id="propiedades">obteniendo información del dispositivo</div>! </body>! </html>! 53

54 Phonegap APIs! Descripción de las APIS de PhoneGap Ejercicio: Incluir el código JavaScript anterior en el index.html de nuestra primera aplicación para comprobar el funcionamiento. Debe sustituir al que añadimos en el último ejercicio. 54

56 Phonegap Compilador en la nube! PhoneGap Build: Compilador en la nube Complicado hacer todas las configuraciones necesarias para hacer uso de PhoneGap. El entorno de desarrollo para Windows Phone solo es posible en el sistema operativo Windows. El entorno de desarrollo para ios solo es posible en el sistema operativo de Apple. PhoneGap Build o compilador en la nube 56

57 Phonegap Compilador en la nube! PhoneGap Build: Compilador en la nube Crear una cuenta: desarrollador (gratis), Starter ($12 mensuales), Team ($30 mensuales), corporativa ($90 mensuales). PhoneGap Build solo compila para ios, Android, BlackBerry OS, Symbiam, Web OS y Windows Phone. 57

58 Phonegap Compilador en la nube! PhoneGap Build: Compilador en la nube Sólo tenemos que subir el código (archivo.zip) con el index.html como inicio de la aplicación. PhoneGap Build nos avisa de posibles errores si los hay, de no ser así, obtenemos un paquete de instalación para cada uno de los sistemas operativos móviles. 58

60 Phonegap Materiales! Materiales en la web Texto, presentaciones y ejemplos: Servicios de hora y dirección IP: 60

61 Phonegap Importar aplicaciones! Importar aplicaciones Detallar los pasos para importar una aplicación web muy sencilla a partir de código existente (un proyecto Eclipse completo): UNIA1: aplicación web sencilla transición entre páginas HTML sin estilo CSS usar phonegap Descargar el proyecto completo de: 61

62 Phonegap Importar aplicaciones! Importar aplicaciones Crear un proyecto nuevo de tipo Android pero usando código existente:

63 Phonegap Importar aplicaciones! Importar aplicaciones

64 Phonegap Importar aplicaciones! Importar aplicaciones 5 64

65 Phonegap Importar aplicaciones! Importar aplicaciones Si nos da algún error, debemos entrar a las propiedades del proyecto (botón derecho) y marcar todas las casillas correspondientes a las librerías a usar: 65

66 Phonegap Importar aplicaciones! Importar aplicaciones

67 8 Phonegap Importar aplicaciones! Importar aplicaciones 67

68 Phonegap Importar aplicaciones! Importar aplicaciones Proceso de lanzamiento (correcto): 9 Y con algún error o aviso (incorrecto): 68

69 Phonegap Importar aplicaciones! Importar aplicaciones 10 69

70 Phonegap Importar aplicaciones! Importar aplicaciones En ejecución 11 70

71 Phonegap Importar aplicaciones! Importar aplicaciones En ejecución 12 71

72 Phonegap Importar aplicaciones! Importar aplicaciones Ejercicio: Importar la primera aplicación de ejemplo importándola a partir del archivo ZIP: descomprimir importar ejecutar en el emulador 72

74 Phonegap Ejemplos! Ejemplos Estudiar y probar varios ejemplos en los cuales se hace uso de diferentes carácterísticas del framework: UNIA2: aplicación de ejemplo de phonegap; estilo negro; información del dispositivo; beep; vibración UNIA3: estilo ios; transiciones entre pantallas; salir de la App UNIA4: plantilla-estilo azul; movimiento de un DIV; uso de JQuery UNIA5: estilo ios; acceso a servidor externo para obtener información de un servicio web UNIA6: estilo ios; tener varios DIV con un solo HTML (transiciones) UNIA7: simular pantallas con DIV; pedir información con formulario UNIA8: estilo ios; uso del almacenamiento de datos UNIA9: información meteorológica a partir de servicios web 74

75 Phonegap Ejemplos! Ejemplos 1 Texto

76 Phonegap Ejemplos! Ejemplos Texto 76

77 Phonegap Ejemplos! Ejemplos 7 Texto

78 Phonegap Ejemplos! Ejemplos Texto 78

79 Phonegap Ejemplos! Ejemplos 11 Texto 79

80 Phonegap Ejemplos! Ejemplos 13 80

81 Phonegap Ejemplos! Código necesario Antes de comenzar a ver los ejemplos, conviene que tengamos trozos de código para realizar diversas acciones: Mostrar mensajes ( alert ) Mostrar notificaciones Pedir confirmación ( yes/no ) Emitir un aviso sonoro (beep) Vibración Salir de la aplicación 81

82 Phonegap Ejemplos! Código necesario: mostrar mensajes (alert) Utilizaremos la función JavaScript alert(); alert("mensaje en una ventanita");! <a href="#" onclick="alert( mensaje );">! pincha aquí </a>! 82

83 Phonegap Ejemplos! Código necesario: mostrar notificaciones Utilizaremos la API de Phonegap navigator.notification.alert(); function mostrarnotificacion(){!! navigator.notification.alert(!!! Texto del mensaje a mostrar,!!! trasnotificacion,!!! Título ventana,!!! Ok!! );! }! function trasnotificacion(){! } 83

84 Phonegap Ejemplos! Código necesario: pedir confirmación ( yes/no ) Utilizaremos la API navigator.notification.confirm(); function confirmarsalida() {!! navigator.notification.confirm(!! " Quieres salir?",!! onconfirm,!! "Salir",!! "Sí,No"!! );! }! function onconfirm(buttonindex) {!! if (buttonindex==1){!!! navigator.app.exitapp();!! }! } 84

85 Phonegap Ejemplos! Código necesario: emitir un aviso sonoro (beep) Utilizaremos la API navigator.notification.beep(num); Debemos indicar el número de pitidos. navigator.notification.beep(1);! 85

86 Phonegap Ejemplos! Código necesario: vibración Utilizaremos la API navigator.notification.vibrate(mseg); Debemos indicar durante cuántos milisegundos queremos que vibre el móvil. navigator.notification.vibrate(2000);! 86

87 Phonegap Ejemplos! Código necesario: terminar la aplicación Utilizaremos la API navigator.app.exitapp(); Es similar a pulsar la tecla back (flechita) del móvil: hace que termine la aplicación y volvemos a la pantalla inicial del sistema. navigator.app.exitapp();! Sólo funciona en Android. En ios la propia aplicación no puede terminarse a sí misma. 87

88 Phonegap Ejemplos! Ejemplos Estudiar y probar varios ejemplos en los cuales se hace uso de diferentes carácterísticas del framework: UNIA2: aplicación de ejemplo de phonegap; estilo negro; información del dispositivo; beep; vibración UNIA3: estilo ios; transiciones entre pantallas; salir de la App UNIA4: plantilla-estilo azul; movimiento de un DIV; uso de JQuery UNIA5: estilo ios; acceso a servidor externo para obtener información de un servicio web UNIA6: estilo ios; tener varios DIV con un solo HTML (transiciones) UNIA7: simular pantallas con DIV; pedir información con formulario UNIA8: estilo ios; uso del almacenamiento de datos UNIA12: usar la cámara de fotos del móvil UNIA13: usar el GPS (geolocalización) 88

89 Phonegap Ejemplos! UNIA2: comprobar la conexión (wifi o 3G) Utilizaremos el objeto navigator.network.connection.type function tipoconexion() {! var networkstate = navigator.network.connection.type;! var states = {};! states[connection.unknown] = 'desconocida';! states[connection.ethernet] = 'Ethernet';! states[connection.wifi] = 'WiFi';! states[connection.cell_2g] = '2G';! states[connection.cell_3g] = '3G';! states[connection.cell_4g] = '4G';! states[connection.none] = 'Sin conexión';! }! alert( 'Conexión:\n ' + states[networkstate] );! 89

92 Phonegap Ejemplos! UNIA4: mover un DIV en pantalla (animaciones) Utilizaremos JQuery, un DIV y algo de JavaScript: <div style=" position: absolute; left: 20px; top: 20px; height: 50px; width: 50px; background: #ffcccc; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-transition: top 1000ms ease-in 100ms, left 1000ms ease-in 100ms; -moz-transition: top 1000ms ease-in 100ms, left 1000ms ease-in 100ms; -o-transition: top 1000ms ease-in 100ms, left 1000ms ease-in 100ms; transition: top 1000ms ease-in 100ms, left 1000ms ease-in 100ms; " class="mibolaclass" id="mibola"><br/> O_o</div>! function moverdiva(posicx,posicy) {!! $("#mibola").css("position","absolute").css("top", posicy).css("left", posicx).show();! }! function mostrarmibola(){!! $('#mibola').show();! }! function ocultarmibola(){!! $('#mibola').hide();! }! 92

94 Phonegap Ejemplos! UNIA5: acceso a un servicio web Utilizaremos el objeto XMLHttpRequest() function contactwebserver(url) {!!! xmlhttp=new XMLHttpRequest();!!! xmlhttp.onreadystatechange=function() {!!! if (xmlhttp.readystate==4 &&!!! (xmlhttp.status==200 xmlhttp.status==0)) {!!!! var tmp = xmlhttp.responsetext;!!!! document.getelementbyid("eldiv").innerhtml = tmp;!!! }!! }!! xmlhttp.open("get",url,true);!! xmlhttp.send();! }! function dimelahora() {!! contactwebserver(' }! 94

96 Phonegap Ejemplos! UNIA6: varias pantallas en un mismo HTML Utilizaremos un par de <DIV> en el HTML: <div id="divc1">!! contenido DIV1!! <input type="button" value="ir a 2" onclick="cambiarpantalla(); return false;"/>! </div>! <div style="visibility:none" id="divc2">!! contenido DIV2!! <input type="button" value="ir a 1" onclick="cambiarpantalla(); return false;"/>! </div>! function cambiarpantalla() {!! var ele1 = document.getelementbyid("divc1");!! var ele2 = document.getelementbyid("divc2");!! if(ele1.style.display == "block") {!! ele1.style.display = "none";!! ele2.style.display = "block";!!}!! else {!! ele2.style.display = "none";!! ele1.style.display = "block";!! }! }! 96

98 Phonegap Ejemplos! UNIA7: introducción de datos (formularios) Utilizaremos un formulario y unas líneas de código JS: <form id="formulario1" onsubmit=" return false; ">!! <input type="text" name="nombre" id="nombre">!! <input type="button" value="procesar datos" onclick="procesardatos(); return false;"/>! </form>! <span id="datostecleados"> </span>! var tmp = document.getelementbyid('nombre').value;! document.getelementbyid("datostecleados").innerhtml = tmp;! var numero = Number(document.getElementById('numero').value);! if (isnan(numero)) {!! alert("introduzca un número válido.");!! return;! }! 98

100 Phonegap Ejemplos! UNIA8: almacenamiento de los datos Utilizaremos la API: localstorage.setitem() function supports_html5_storage() {!! try{!!! return 'localstorage' in window && window['localstorage']!== null;!! }catch (e){!!! return false;!! }! }! localstorage.setitem("mivariablenum", 78);! localstorage.setitem("mivariablecad", "mi cadena");! var num = localstorage.getitem("mivariablenum");! var cad = localstorage.getitem("mivariablecad");! 100

102 Phonegap Ejemplos! UNIA12: usar la cámara del móvil Utilizaremos la API: navigator.camera.getpicture() function takepicture() {! navigator.camera.getpicture(! function(uri) {! var img = document.getelementbyid('camera_image');! img.style.visibility = "visible";! img.style.display = "block";! img.src = uri;! },! function(e) { alert("error al echar la foto"); },! { quality: 50, destinationtype:!!! navigator.camera.destinationtype.file_uri}! );! };! <div>! <img style="width:120px;visibility:hidden;display:none;"!!! id="camera_image" src="" />! </div>! 102

103 Phonegap Ejemplos! UNIA12: cargar imagen de la Galería de imágenes Utilizaremos la API: navigator.camera.getpicture() function selectpicture() {! navigator.camera.getpicture(! function(uri) {! var img = document.getelementbyid('camera_image');! img.style.visibility = "visible";! img.style.display = "block";! img.src = uri;! },! function(e) { alert("error al cargar la imagen de la galería"); },! { quality: 50, destinationtype:!!! navigator.camera.destinationtype.file_uri,!!! sourcetype: navigator.camera.picturesourcetype.photolibrary}! };! );! <div>! <img style="width:120px;visibility:hidden;display:none;"!!! id="camera_image" src="" />! </div>! 103

105 Phonegap Ejemplos! UNIA13: usar el GPS (geolocalización) Utilizaremos la API: navigator.geolocation.watchposition() var options = { frequency: 3000, maximumage: 5000,!!! timeout: 5000, enablehighaccuracy: true };! watchid = navigator.geolocation.watchposition(funcok, funcerror, options);! var funcok = function(pos) {!! var map = document.getelementbyid('map');!! map.style.display = 'block';!! var mapwidth = 270;!! var mapheight = 210;!! map.src = " +!!! pos.coords.latitude + "," + pos.coords.longitude + "&zoom=14&size="!!! + mapwidth + "x" +mapheight+ "&maptype=roadmap&markers=color:green%7c +!!! pos.coords.latitude + "," + pos.coords.longitude + "&sensor=false";! };! <img id="map" alt="location Map"/>! 105

106 Phonegap Ejemplos! UNIA13: usar el GPS (geolocalización) 106

108 Phonegap Proyectos! Proyectos Se propone, como tarea final, realizar los siguientes proyectos en los que utilizaremos todo lo estudiado hasta el momento: Información meteorológica Mostrar la hora en pantalla (reloj analógico o digital) 108

109 Phonegap Proyectos! Proyecto: información meteorológica Existen varios servicios web de información meteorológica: que nos permiten insertar en una aplicación web la información del tiempo: 109

110 Phonegap Proyectos! Proyecto: información meteorológica Vamos a tomar por ejemplo el de 110

111 Phonegap Proyectos! Proyecto: información meteorológica Elegimos el formato, estilo, etc, y usamos el código HTML que nos proporciona el servicio: 111

112 Phonegap Proyectos! Proyecto: información meteorológica Podemos obtener el código HTML para diversas ciudades y así hacer nuestra aplicación personalizada. Sólo tenemos que hacer una página HTML por ciudad y un menú para elegir la ciudad de la que queremos saber el tiempo. 112

113 Phonegap Proyectos! Proyecto: mostrar la hora en pantalla En este segundo proyecto se trata de mostrar la hora en pantalla, ya sea obteniendo la información de un servicio web externo, o bien mostrando un reloj (programación JavaScript)