Cápitulo 1 -Conociendo PhoneGapCápitulo 2 - Preparando el entornoCápitulo 3 - SDK de AndroidCápitulo 4 - EclipseCápitulo 5 - SDK de iOSCápitulo 6 - Dreamweaver CS6Cápitulo 7 - Estructura de una aplicaciónCápitulo 8 - HTML5Cápitulo 9 - CSS 3Cápitulo 10 - JavaScriptCápitulo 11 -Acceder información del usuarioCápitulo 12 - NotificacionesCápitulo 13 - Detectar conexiónCápitulo 14 - AcelerómetroCápitulo 15 - BrújulaCápitulo 16 - GeolocalizaciónCápitulo 17 - Archivos;Cápitulo 18 - AlmacenamientoCápitulo 19 - CámaraCápitulo 20 - ContactosCápitulo 21 - Depuración en navegadoresCápitulo 22 - Depuración en equiposCápitulo 23 - PhoneGap Build

A mi abuela, que me enseñó el valor de los libros. A mimadre, que me dió el coraje para escribirlo y a mi esposa,

que me dio la inspiración.

Santiago, 2012

SOBRE EL AUTOR

Carlos Solis es Adobe Community Professional, speakeren diversos eventos, entre ellos Adobe Express en Perú yMéxico, Latin Flash Tour y otros eventos en Costa Rica,Colombia, Chile y Argentina.

Como desarrollador móvil ha creado soluciones paravarias marcas del Fortune 500 y colaborado con múltiplesstartups en el Silicon Valley, Santiago, Tel-Aviv y NewYork.

Certificado W3C en buenas prácticas móviles y fundadordel proyecto Revolución Móvil. Firme creyente delpotencial de los desarrolladores latinoamericanos.

www.carlossolis.mobi

INTRODUCCION

Los dispositivos móviles han creado un nuevo mercadoque crece exponencialmente y esta repleto de nuevasoportunidades.

Desde la llegada de las tiendas de aplicaciones o appStores la forma de distribuir software ha cambiadoradicalmente. Antes del 2008 - año en que se inauguró laApp Store de Apple - para distribuir un programa, eranecesario crear una costosa estructura de distribución ymarketing, hoy en día cualquier desarrollador tiene accesoa una red global de clientes ávidos de contenidos.

Muchos desarrolladores que trabajan lenguajes comoObjective-C, C, C++ o Java lograron incursionarrápidamente en este nuevo mercado y monetizar susproductos a través de esta nueva red de distribución quegeneraron las App Stores.

Sin embargo, gran cantidad de desarrolladores queapostaron por el desarrollo web se han quedado fuera deesta bonanza, porque los lenguajes con los que seconstruye la web no están soportados para desarrollaraplicaciones nativas.

PhoneGap abre una oportunidad a todos los

desarrolladores que han invertido años de estudio yperfeccionamiento en los lenguajes web, permitiéndolecrear aplicaciones nativas de alta calidad basadas enlenguajes de su uso cotidiano como HTML, javascript yCSS . PhoneGap es una de las mejores opciones para losdesarrolladores con conocimientos en lenguajes web quedeseen incursionar en el mundo del desarrollo móvil.

Con una tecnología abierta, fácil de instalar en cualquierplataforma y a un costo gratuito, PhoneGap es una opciónreal para desarrollar proyectos educativos, gratuitos ocomerciales.

En este libro aprenderás a desarrollar aplicacionesmultiplataforma basadas en HTML5, CSS3 y Javascriptcon ejemplos prácticos y realistas.

Desde la configuración básica y desarrollo, hasta lapublicación final en las tiendas de aplicaciones,aprenderás todos los trucos prácticos que el autor de estelibro ha descubierto desarrollando aplicaciones conPhoneGap.

¿Es para mi este libro?El manual del guerrero móvil está planeado para ser unaguía introductoria a la creación y desarrollo deaplicaciones móviles con PhoneGap.

Los ejemplos y temas desarrollados acá son para usuariosque nunca han desarrollado aplicaciones phonegap o quetienen conocimientos básicos y desean profundizar a unnivel básico - intermedio.

Cada capítulo está redactado con la mayor claridad y enla medida de lo posible se realizará una rápida inducciónsobre el tema, sin embargo es recomendable que el lectortenga conocimientos básicos sobre los lenguajes en losque se basa PhoneGap : CSS3, Javascript, HTML5.

Luego de leer este libro el lector tendrá un panoramacompleto sobre el desarrollo de aplicaciones phonegap ycontará con bases sólidas para seguir creciendo yaprendiendo en el cambiante mundo de los dispositivosmóviles.

¿Como utilizar este libro?Este es un libro práctico, rápido de leer y fácil decomprender para poner manos a la obra de inmediato.

El libro está estructurado con un orden progresivo, cadacapítulo se relaciona con el anterior y el objetivo final esguiar al lector en un viaje de conocimiento desde lo másbásico hasta la publicación final de su aplicación. Pero siusted, amable lector, es como el autor de este libro - ymuy posiblemente lo sea - tendrá ansiedad por saltarsecapítulos y buscar directamente la información quenecesita… siéntase libre de hacerlo! es más, el autor leinvita a hacerlo!

Sobre el Manual delguerrero móvilEl desarrollo en dispositivos móviles no es paracobardes, se necesita una actitud desafiante, iniciativa ymucha dedicación, con un panorama siempre cambiante yuna fragmentación de equipos casi infinita, no se puedever esto como un simple trabajo, cada día hay que estarpreparados para que todas las reglas cambien.

Para este trabajo no es suficiente un desarrollador normal,se necesita un guerrero incansable, sediento deconocimiento y dispuesto a darlo todo por alcanzar lameta.

El libro del guerrero móvil es una colección pensada paraquienes necesitan información útil y rápida, sin páginas derelleno, sin introducciones interminables ni análisis quesólo son útiles en la teoría.

Este es un libro para aquellos que quieren hacer su trabajobien y tienen que hacerlo ahora mismo!

Ejemplos y ejerciciosTodos los ejemplos usados en este libro se encuentranactualizados y disponible para descarga gratuita en lasiguiente dirección

www.manualdelguerreromovil.com/phonegap

En este libro utilizaremos - salvo casos en los que se hagala salvedad - ejemplos funcionales en equipos android 2.2en adelante y iPhone 5.0 en adelante que cubren a lamayoría de los usuarios de equipos móviles al momentode escribir el libro.

Errores y correccionesAunque cada parte de este libro fue cuidadosamenterevisada siempre se nos puede escapar un error, siencuentras alguno por favor notificarlo en el sitio oficialdel libro

www.manualdelguerreromovil.com/phonegap

Este libro digital tiene soporte para actualizaciones, susreportes de errores y correcciones serán tomados encuenta y serán entregadas gratuitamente a todos queposean una copia.

Cursos y capacitacionesSi desea recibir un curso online o presencial sobre lostemas de este libro contáctenos sin compromiso en lapágina oficial del libro para consultar sobredisponibilidad y costos.

CONOCIENDOPHONEGAP

HistoriaEl proyecto PhoneGap fue creado y dirigido por Nitobi,una empresa canadiense fundada por André Charland yDave Johnson en los primeros años de este milenio.

PhoneGap es un proyecto de código abierto basado enestándares web. Nació en el 2008 durante un eventollamado iPhoneDevCamp, una conferencia informal dedesarrolladores, en la que buscan promover el desarrollode aplicaciones basadas en iOS y tecnologías webestándar. En solo 2 días que duró el evento un grupo deentusiastas desarrolladores logró crear un prototipofuncional de lo que hoy conocemos como PhoneGap.

El proyecto saltó a la fama en el 2009 cuando fuepremiado por el público como el mejor proyecto (People’s Choice Award ) durante la conferencia anualWeb 2.0 organizada por la prestigiosa editorial O’Reilly.

-Adquisición de Adobe y nacimiento deCordova

El 4 Octubre del año 2011 Nitobi fue adquirido porAdobe. Con esta adquisición se anunció que el códigobase de PhoneGap pasaría a ser propiedad de laFundación Apache bajo el nombre de Proyecto ApacheCordova ( inicialmente llamado Apache Callback, nombreahora desechado ).

El cambio de nombre ha llevado a muchas confusionesentre los desarrolladores, según Brian Leroux - uno de loslíderes del proyecto - Cordova es el nombre con el quese denomina al código base del proyecto y núcleo centralde las aplicaciones. PhoneGap, es una "distribución" quehace uso de ese núcleo, tal y como los sistemas operativosDebian o Ubuntu que, aunque son sistemas independientes,son también distribuciones basadas en Linux.

Los creadores de PhoneGap - ahora parte de Adobe -continúan trabajando en el proyecto ahora enfocados enintegrar esta plataforma con las herramientas de Adobe y servicios como PhoneGap Build.

La liberación del código fuente de PhoneGap le permitiráa la comunidad de desarrolladores mantener a perpetuidadacceso a la licencia gratuita y espíritu de código abiertoque ampara la Fundación Apache.

Para efectos de redacción y orden, durante este librollamaremos PhoneGap tanto al proyecto Apache Cordovacomo a PhoneGap y cualquiera de sus elementos.

¿Cómo funciona?En pocas palabras, PhoneGap crea aplicaciones nativaspara dispositivos móviles a partir de lenguajes web (HTML5, Javascript, CSS3, etc).

Esto lo logra a creando una instancia del navegador delsistema que se controla través de una interfaz de funcionesforáneas (FFI por sus siglas en inglés).

La interfaz de funciones foráneas es un mecanismo, por elque un programa escrito en un lenguaje de programaciónpuede realizar llamadas a funciones o usar los serviciosescritos en otro lenguaje.

En el caso de PhoneGap, este proceso se realiza alpermitir que los comandos de programación hechos enJavascript utilicen servicios escritos en lenguaje nativo dela plataforma móvil en que se ejecuta la aplicación, porejemplo Objective-C o Java.

El código base de la aplicación hecha en PhoneGap sedespliega en una instancia del navegador del sistema,exactamente igual que una página web, pero, a diferenciadel navegador normal, la instancia que usa PhoneGap nomuestra controles de navegación ni barras deherramientas, sino que se muestra en pantalla completa, dela misma forma que una aplicación nativa.

-Webkit

La instancia de navegador en la que se despliega elcódigo tiene, por lo general, un núcleo basado en el motorde render Webkit.

Webkit es un proyecto de código abierto que sirve comomotor a muchos de los principales navegadores web deescritorio como Chrome, Safari, Konkeror o RockMelt yde los navegadores móviles de iOS, Blackberry OS yAndroid. Webkit está desempeñando un papel crucial enla implementación de nuevas tecnologías como HTML5 yCSS3.

Los principales actores de la internet como Apple, Adobe,Microsoft y Google contribuyen con el proyecto Webkitpara que adopten rápidamente las nuevas tecnologías webcomo HTML5, CSS3, AJAX ó Javascript. PhoneGap alutilizar Webkit como base, tiene en general un buensoporte sobre estos lenguajes.

- Aplicaciones Híbridas

Cuando se crea una aplicación PhoneGap, el códigobasado en HTML5 y demás lenguajes web se empaquetaen una aplicación 100% nativa que muestra el código através de una instancia del navegador. La aplicación tieneacceso a todos los sensores del dispositivo al conectarsede forma nativa a través de la API de PhoneGap.

Por esta razón PhoneGap entra en la categoría deaplicación híbrida: ejecuta una aplicación web dentro deuna aplicación nativa. PhoneGap combina la simplicidadde los lenguajes web con el poder de los lenguajesnativos, es, en síntesis, lo mejor de dos mundos.

Plataformas soportadasPor un amplio margen PhoneGap es la tecnología dedesarrollo móvil que tiene el mas amplio soporte deplataformas distintas.

Gracias a que la mayoría de los smartphones permitencrear instancias del navegador en sus aplicacionesnativas, PhoneGap solo crea clientes específicos paracada plataforma, estos clientes interpretan un mismocódigo y envían comandos nativos a sus respectivossistemas operativos. Muy similar al principio que usan lasmáquinas virtuales de Java o al del Player de Flash quepermiten ejecutar un mismo código en muchasplataformas.

Actualmente PhoneGap es soportado en 7 diferentesplataformas:

iOSAndroidWindows Phone 7Blackberry OSWebOSSymbianBada

¿Se pueden publicar en laAppstore las aplicacionesPhoneGap?A inicios del año 2010 Apple cambió las reglas para lasaplicaciones que se publicaban en su tienda, prohibiendoaplicaciones hechas en lenguajes que no fueran nativos,esta modificación se hizo en medio de una guerramediática con Adobe y buscaba afectar directamente aFlash que quería perfilarse como una herramienta dedesarrollo de aplicaciones para iPhone.

Tiempo después en Octubre del mismo año Apple revirtiósus términos y volvió a aceptar aplicaciones creadas conlenguajes no nativos.

Sin embargo, aunque hoy en día ya es posible publicaraplicaciones basadas en cualquier lenguaje, el famosocambio de políticas nunca afectó a PhoneGap yposiblemente nunca lo afecte.

Desde el cambio original de reglas, Apple hizo lasalvedad de incluir a javascript y los lenguajes que seejecutan dentro de Webkit como lenguajes nativos, por loque aun durante el periodo en que las aplicaciones flashfueron prohibidas, las aplicaciones PhoneGap siguieron

publicándose con total normalidad.

Es muy poco probable que con la enorme cantidad deaplicaciones basadas en PhoneGap que existenactualmente en la tienda de Apple y la profundaintegración de Webkit en el sistema operativo, que algúndía se lleguen a restringir las aplicaciones basadas enlenguajes web.

En resumen: es total y completamente seguro publicaraplicaciones basadas PhoneGap en la Appstore de Appley en cualquier otra de las tiendas de aplicaciones de lasplataformas soportadas por PhoneGap.

¿Cuando usar PhoneGap?PhoneGap es una plataforma muy versátil y el lenguajeHTML5 en el que se basa está avanzando a pasosagigantados, sin embargo, ninguna tecnología esabsolutamente perfecta y PhoneGap no es la excepción: notodos los proyectos son aptos para trabajarlos con estatecnología.

Vamos a analizar algunos tipos de aplicaciones y lasposibilidades que ofrece PhoneGap para cada una deellos.

-Aplicaciones informativas

Este es el tipo de aplicación que funciona mejor conPhoneGap: Mostrar información estática o dinámica sobreproductos y servicios, desplegar textos, vídeos yelementos gráficos de alta calidad.

Una buena parte de las aplicaciones disponibles en lastiendas de aplicaciones entra en esta clasificación.

Crear una aplicación de este tipo con PhoneGap es fácil yrápido. El resultado final es prácticamente igual al de unaaplicación nativa.

Por ejemplo, METAR Reader es una aplicación parapilotos aéreos que utiliza PhoneGap para mostrar einterpretar información estándar sobre las condicionesmeteorológicas en diferentes aeropuertos.

-Aplicaciones Utilitarias

Una de las categorías más populares en las App Storesson las aplicaciones utilitarias, que son todas aquellas quenos sirven para hacer tareas y operaciones con nuestromóvil desde lo crucial a lo trivial.

En esta categoría están las calculadoras de todo tipo,linternas, monitores de memoria, lectores de códigos QRy miles más. Esta es otra categoría en la que el desarrollocon PhoneGap se destaca positivamente.

Entre las aplicaciones utilitarias podemos incluir las quenos ayudan a planificar y organizar nuestras tareas comoDiary Mobile. Esta aplicación creada con PhoneGappermite gestionar tareas y eventos que se sincronizan en lanube.

-Adaptación de Webapps

Entre las ventajas que tiene PhoneGap es que se puedencrear aplicaciones completas usando los mismoslenguajes que se utilizan para crear sitios web: HTML5,CSS3 y Javascript.

Esto permite que con solo pequeñas variaciones yadaptaciones se pueda utilizar una web app o aplicaciónweb y convertirla en una aplicación móvil nativa.

Gracias a esta capacidad, las empresas pueden ahorrartiempo y dinero reutilizando sus aplicaciones basadas enweb, si ya están optimizadas para equipos móviles, lamayor parte del trabajo esta hecha.

El mejor ejemplo de este uso es la Wikipedia, que usaPhoneGap para ofrecer en su aplicación nativa los mismoscontenidos y servicios de la enciclopedia online.

-Juegos

Aunque PhoneGap no fue creado como una plataformadedicada para juegos, si es posible desarrollarlos aunquecon muchas restricciones.

No olvidemos que al trabajar sobre una instancia delbrowser del sistema se genera una carga de procesadoradicional. La velocidad del navegador para renderizar loselementos y realizar los cálculos de javascript tiene unimpacto notable en el rendimiento, además, lacomplejidad del juego y la interacción de múltipleselementos gráficos puede derivar en problemas derendimiento.

El juego Orbium creado en PhoneGap demuestra que esposible crear juegos básicos en esta plataforma. Aunquesi estas buscando crear un juego que haga uso intensivodel procesador, es mejor que explores otras plataformascomo Flash, Cocos2D o Unity.

-Interacción con los sensores

A diferencia de una simple aplicación web creada conHTML5, PhoneGap tiene acceso a la mayoría de lossensores y receptores del dispositivo móvil. Puedeacceder sin problema los sensores de GPS o la brújulapara ubicarse en el espacio o utilizar la cámara ymicrófono para registrar lo que pasa a su alrededor.Utilizar los sensores del móvil con PhoneGap es muysencillo y solo necesita unas pocas líneas de código.

ClicPic es un buen ejemplo del uso de los sensores, estaaplicación usa PhoneGap para acceder a la cámara delequipo: Toma fotos, las procesa, clasifica y comparte ensu propia red social.

En general PhoneGap es una tecnología bastante flexible.Sus principales problemas son el rendimiento enaplicaciones intensivas del procesador y el soporteparcial de HTML5 o CSS3 en algunos sistemasoperativos, principalmente en las versiones más antiguas.

Para esta plataforma, no se recomiendan aplicaciones queusen animaciones avanzadas y cálculos intensivos.

Siempre debe ponerse especial cuidado a todo lo quetiene que ver con el rendimiento, en especial si se piensapublicar aplicaciones que se ejecuten en equipos antiguoso con procesador lento.

Con PhoneGap así como en cualquier otra tecnología quetenga que ver con dispositivos móviles, siempre tenemosque ser cuidadosos con el uso de los limitados recursosde un equipo móvil.

Licencia y condiciones de usoA diferencia de otras plataformas de desarrollo,PhoneGap es un proyecto de código abierto,completamente gratuito y basado en los estándares de laweb.

Desde octubre del 2011 tras la adquisición de Nitobi porparte de Adobe, PhoneGap es parte de la fundaciónApache bajo el nombre de proyecto Cordova.

Al ser parte de esta fundación está bajo la licenciaApache versión 2.0, al igual que otros proyectos comoAndroid, Spring, o los servidores Tomcat y Apache.

Esta licencia permite a los usuarios de PhoneGap utilizar,distribuir y modificar de manera gratuita y abierta elcódigo.

La licencia permite comercializar aplicaciones sin pagarregalías de ningún tipo, no es necesario incluir logosoficiales o dar créditos a PhoneGap, Adobe o Apache yno requiere la creación de obras derivadas o publicacióndel código fuente.

Es perfectamente seguro desarrollar aplicacionescomerciales, educativas o de código abierto sin riesgospor el cobro de regalías o reclamos por el uso de

propiedad intelectual.

PREPARANDO ELENTORNO

Antes de comenzar a desarrollar aplicaciones paramóviles, tienes antes que instalar y configurar el entornode desarrollo con las herramientas en las que crearásaplicaciones para móviles.

A diferencia de otras plataformas ,PhoneGap no tiene unentorno de desarrollo propio, por el contrario, trabajacomo plugin o extensión dentro de otros editores decódigo como Dreamweaver, Xcode o Eclipse.

Para crear una aplicación móvil necesitarás instalar -además de PhoneGap - las herramientas de desarrollo oSDK's de cada plataforma en la que quieres desarrollar.

Un SDK es un conjunto de herramientas y utilidades quepermiten compilar código fuente y convertirlo en unaaplicación apta para ejecutarse en equipos móviles... yeso es justo lo que usarás para convertir tu códigoHTML5 una flamante aplicación móvil.

Requerimientos de SistemaPara crear y probar aplicaciones móviles en tu ordenadornecesitarás instalar un editor de código y los SDK deAndroid y/o iPhone. Dependiendo de tu sistema operativo,puede que necesites instalar programas adicionales (verdetalles a continuación).

-Requerimientos en Windows

Para desarrollar en PC necesitas un ordenador WindowsXP o superior, en este manual usaremos Windows 7 comopunto de referencia.

El JDK de JAVA crea el entorno necesario para correr elemulador de Android y algunas herramientas dedepuración. Muchos programas requieren este entorno yes posible que ya lo tengas instalado en tu computador, delo contrario los instaladores de estos programas seencuentran en el sitio de Oracle

http://www.oracle.com/technetwork/java/javase/downloads/index.htm

Para utilizar todos los programas que se requieren paradesarrollar aplicaciones móviles, se sugiere unaconfiguración mínima de:

1. Procesador Intel® Pentium® 4 o AMD Athlon® 642. Microsoft® Windows® 7 o Microsoft® Windows®

Vista Service Pack 2.3. 1 GB de RAM4. Display de 1280x800 con tarjeta de video de 16-bit

-Requerimientos en Mac OS

En equipos Apple es necesario el sistema operativoMacOS X 10.7.0 Lion o superior.

Aunque también se puede trabajar con el MacOS X 10.6(Snow Leopard) se recomienda actualizar a la últimaversión. La política de Apple es darle soporte únicamentea la última versión de su sistema operativo yeventualmente las versiones más antiguas dejarán de sercompatibles. En este manual se usará Mac OS Lion comoreferencia.

Para utilizar todos los programas que se requieren paradesarrollar aplicaciones móviles, se sugiere unaconfiguración mínima de:

1. Procesador Intel Multicore2. Mac OS X v10.63. 1GB de RAM4. Display de 1280x800 tarjeta de video de 16-bit

-Requerimientos en Linux

1. Librería GNU C (glibc) 2.7 o superior.

Se recomienda usar Ubuntu Linux, versión 8.04 osuperior.

Las distribuciones de 64-bit deben ser capaces de ejecutaraplicaciones de 32-bit.

-Conexión a internet

La conexión a internet es crucial no solo para descargarprogramas y actualizaciones, también es requerida parautilizar servicios como PhoneGap Build y algunosemuladores que requieren el uso de conexión web.

Es posible crear y probar aplicaciones sin conexión ainternet, sin embargo, el proceso será limitado por lo quese recomienda que mientras se desarrollan aplicacionesmóviles hacerlo en un equipo que tenga asegurada laconexión todo el tiempo.

-Instalación de JAVA JDK

El Java JDK es necesario para ejecutar el emulador deAndroid y algunas herramientas de depuración. No essuficiente con instalar el Java JRE es necesario instalar elJDK completo para tener acceso a todas las herramientasde desarrollo

El instalador de este programa se encuentra en el sitio deOracle.

http://www.oracle.com/technetwork/java/javase/downloads/index.html

Ahora que tienes un sistema listo para desarrollaraplicaciones PhoneGap, vamos a crear aplicaciones. En elproximo capitulo vamos a aprender como crear unaaplicación Android básica.

SDK DE ANDROID

Instalando el SDK deAndroidEl SDK de Android contiene todo lo necesario para creary probar las aplicaciones para esta plataforma. Esbastante completo e incluye emuladores de sistemaoperativo y aplicaciones especializadas para controlar ymonitorear todos los elementos de una aplicación móvil.

Para descargar el SDK de Android debes ir al sitio dedesarrolladores de Android y elegir allí la versión delSDK que corresponda a tu sistema operativo:

http://developer.Android.com/sdk/

El tamaño promedio de esta descarga es deaproximadamente 30MB. Una vez descargado el archivodeberás descomprimirlo en tu computador.

Descomprime este archivo en una ruta sencilla deacceder, sin espacios, mayúsculas o tildes. Por ejemplo,en windows puedes usar esta ruta:

C:/Android/

Esto no sólo te ayudará a encontrar más fácilmente elSDK, también evitarás posibles errores cuando compilestu aplicación.

Instalación de múltiplesversiones de AndroidDescargar y descomprimir el SDK es solo el primer paso, para poder probar una verdadera aplicación tienes quedescargar las diferentes versiones del sistema operativode Android y todas las herramientas de desarrollo.

Este proceso es indispensable porque con estos archivospodrás probar y depurar tus aplicaciones en múltiplesversiones de Android.

Para actualizar el sistema en un equipo PC debes abrir elarchivo "SDK Manager.exe" tal como se aprecia en laimagen.

En los equipos Mac, debes abrir la carpeta "/tools" yabrir el archivo "Android"

En ambos casos, al abrir el archivo correspondiente, semostrará el SDK Manager. Éste es una sub-aplicación delSDK de Android enfocada a administrar los paquetes yherramientas del sistema.

Con el SDK Manager puedes descargar cualquier versióndisponible de Android y probar característicasadicionales como desarrollo de aplicaciones para GoogleTV o hacer uso de las capacidades multipantalla o 3Dque tienen algunos dispositivos Android.

Cada vez que se lanza una actualización o nueva versiónde Android y sus herramientas, el SDK Manager temostrará la opción de instalarla o actualizarla en tuordenador. Se recomienda chequear con frecuencia estaaplicación para tener la versión más actualizada del SDK.

En el SDK manager, cada versión del sistema operativoAndroid o su API se muestra como una carpeta. Dentro de

la carpeta de cada API hay una cantidad variable deelementos relacionados con cada versión específica, perodos de esos elementos se repiten consistentemente: "SDKPlatform" y "Google API's by Google Inc".

Para instalar una versión de Android es requisito instalaral menos esos dos elementos, el resto, en su gran mayoría,son características opcionales.

Las versiones de Android vienen en grupos de paquetes,para descargar cualquier versión de este sistemaoperativo es necesario chequear la casillacorrespondiente al paquete que se desea instalar y luegopresionar el botón "Install package" que descarga e instalatodos los archivos necesarios automáticamente.

La vista por defecto, clasifica las actualizaciones porversión de la API de Android. Por ejemplo, los paquetesrelacionados con Android 2.2 ( Froyo ) aparecerán en unacarpeta, mientras que los de Android 2.3 ( GingerBread )están en otra carpeta separada.

Cada una de las versiones de Android puede tener enpromedio unos 150 MB, la descarga de varios de ellospuede tomar un periodo considerable de tiempo y espacioen el disco duro.

Creación y configuración deAVD’sLos AVD ( Android Virtual Devices ) son las "máquinasvirtuales" que nos permiten probar versiones específicasde Android así como diferentes configuraciones dehardware.

Gracias a los AVD’s se pueden probar aplicaciones encualquier versión de Android con cualquier configuraciónde hardware de manera virtual, sin tener que comprar elequipo físico, reduciendo así los costos y el tiempo dedepuración.

Para crear una AVD es necesario abrir el SDK Managertal como se detalló en el apartado anterior, buscar lasección "Tools" y seleccionar la opción "ManageAVDs...":

Esto abrirá el administrador de AVDs, para crear unanueva configuración presiona el botón "New.."

Escribe el nombre para el nuevo AVD y selecciona de lalista "target" la versión del sistema operativo de Androidque deseas usar. Si no estas seguro cual elegir, escoge"Android 2.3.3 - API Level 10". Este proceso creará unAVD basado en Android 2.3.3 conocido comoGingerbread.

Por lo general no es necesario modificar ningún otroparámetro, si deseas crear una configuración regular de

Android presiona "Create AVD" y el nuevo dispositivovirtual aparecerá en el AVD Manager.

Emular elementos deHardwareEn algunos casos es necesario emular elementos delhardware como la cámara o el GPS, el emulador deAndroid permite depurar el sistema usando estoselementos dentro de sus máquinas virtuales.

Para agregar un elemento de hardware, seleccionacualquier AVD de la lista del AVD manager y presiona elbotón "Edit".

Busca el apartado "Hardware" y presiona el botón "New".Esto desplegará una ventana con una lista de sensores ycapacidades de software, en este caso seleccionaremos laopción GPS para darle soporte a cualquier aplicación quenecesite emular el dispositivo de geolocalización.

Una vez seleccionado el sensor, aparecerá en la lista dehardware disponible, asegúrate que en la casilla junto al

nombre, aparezca que el sensor está activo, igualmente sideseas desactivarlo, puedes hacerlo en esta casilla.

Es necesario activar manualmente los sensores paraemularlos en el AVD, algunos de los sensores que puedesactivar con este procedimiento son:

AcelerómetroGPSBrújulaCamaraMicrófono

No solo los sensores se activan en el apartado dehardware, también opciones como la emulación deorientación del equipo o la presencia de un SD card seadministran aquí.

Si estás usando una aplicación que use cualquiera de esascaracterísticas, no olvides activarla en tu AVD osencillamente no funcionará.

Activar el Emulador deAndroidPara activar el AVD solamente debes seleccionarlo de lalista y presionar el botón "Start..."

Una última ventana con las opciones para el AVDaparecerá, selecciona el tamaño y DPI adecuado para tusistema, de lo contrario el emulador puede aparecer enescala incorrecta. Presiona el botón "Launch" paraarrancar el AVD.

Después de unos minutos el emulador de Android semostrará en tu ordenador, el emulador es una copia fiel deun dispositivo tal y como funcionaria con el sistemaoperativo que le fue asignado.

¿Que versión de Androidusar para probar?Android es al momento de escribir este manual, el sistemaoperativo móvil más popular del mundo. Existenliteralmente miles de equipos distintos con diferentesversiones del sistema operativo y diferentes tamaños depantalla y diferentes especificaciones de hardware, a estefenómeno se le llama fragmentación.

Aunque el mercado de Android está muy fragmentado, noquiere decir que no hay tendencias definidas, al momentode escribir este manual, el 63% usa Android 2.3 y el 17%usa la versión 2.2.

Al soportar y probar tus aplicaciones en estas dosversiones de Android abarcas casi el 80% de losdispositivos del mercado.

Aun con esta solución sencilla, se recomiendaampliamente descargar todas las versiones de Android yprobar las aplicaciones en todas las versiones de estesistema operativo al menos una vez para comprobar si haysoporte o no.

También se recomienda revisar constantemente lainformación actualizada y oficial de penetración de lasversiones de Android:

http://developer.android.com/resources/dashboard/platform-versions.html

El mercado de los dispositivos móviles se mueve muy

rápido y en cualquier momento puede cambiar laproporción de usuarios de cada versión, no dejes que pasemucho tiempo sin revisar esta valiosa información.

ECLIPSE

Ampliamente conocido entre los desarrolladores JAVA,Eclipse es uno de los entornos de programación másrobustos del mercado. Planeado originalmente como unIDE que funcione con cualquier lenguaje sin estarorientado a ninguno en especial, Eclipse tiene unacapacidad camaleónica de adaptarse a prácticamentecualquier lenguaje de programación a través de uncompleto sistema de plugins que permite incluir todas lasherramientas que se puedan necesitar.

Por su popularidad entre los desarrolladores JAVA ( labase de Android) y su licencia de código abierto, Googleha creado un muy completo set de herramientas paradesarrollar aplicaciones con Eclipse que lo convierte enla mejor opción para crear aplicaciones Android.

Instalar EclipsePara instalar eclipse en tu equipo, el primer paso esdescargarlo gratuitamente en esta dirección ( serecomienda usar la versión "Eclipse Classic" )

http://www.eclipse.org/downloads/

Como se mencionó anteriormente, Eclipse es unaherramienta de desarrollo para muchos lenguajes. Laversión que estás descargando es la más estándar y noincluye ninguna herramienta para desarrollo deaplicaciones para móviles o PhoneGap, así que vamos ainstalar uno por uno todos los plugins para convertir esteEclipse en un entorno de desarrollo PhoneGap.

Instalar el ADTPara desarrollar aplicaciones en Android, Googledesarrolló el ADT ( Android Development Toolkit ), unplugin para Eclipse que instala un entorno de desarrollomuy completo para crear aplicaciones de Android.

El ADT integra las herramientas y funciones del SDK deAndroid directamente con el ambiente de desarrollo deEclipse. Es requisito instalar el SDK de Android antes deinstalar el ADT.

Para instalar el ADT se debe abrir Eclipse y allí dirigirsea Help > Install new software

En la ventana emergente, encuentra el botón "add" y hazclick allí. Esto te permitirá agregar un nuevo repositoriode software, desde el cual se descargará el ADT.

Cuando el sistema lo solicite, debes incluir un nombrepara el plugin y la dirección del repositorio:

http://dl-ssl.google.com/Android/eclipse/

El paso final es configurar el ADT, para esto, seleccionala opción Window > Preferences ( en equipos Mac OS laopción es Eclipse > preferences ). Allí debes seleccionar"Android" en la lista que se muestra a la izquierda.

En la casilla "SDK Location" Haz click en "Browse" ydefine la ruta a la carpeta donde guardaste el SDK de

Android. Presiona "OK" y el ADT estará configurado entu ordenador.

Instalando PhoneGapEn la documentación oficial de PhoneGap, se muestra unprocedimiento de instalación para Android que incluyedescargar el plugin y modificar varios archivos paraejecutar el framework, el proceso es francamentecomplicado e ineficiente. Además de tomar mucho tiempo,es necesario repetirlo en cada proyecto que se crea. Poresta razón en este manual usaremos otro procedimientomucho más práctico.

Vamos a utilizar el plugin MDS de AppLaud que eliminaese proceso complicado y permite crear proyectosPhoneGap en un solo clic.

Para instalar este y cualquier otro plugin, se sigue elmismo proceso que acabamos de realizar para instalar elplugin de ADT: se abre la opción: Help > Install newsoftware

En la ventana emergente debes insertar un repositorio. Ladirección del repositorio de Applaud es:

http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2/download/

Recuerda actualizar periódicamente este plugin paraasegurarte que usas la última versión de PhoneGap en tuproyecto. Generalmente Applaud actualiza su versión unpar de semanas después de la actualización oficial de

PhoneGap.

Una vez descargados los archivos, el sistema pediráreiniciar Eclipse y encontrarás herramientas adicionalesen Eclipse, vamos a utilizar estas nuevas herramientaspara crear una aplicación PhoneGap para Android.

Aplicación básicaPara crear tu primera aplicación PhoneGap en Eclipsetienes primero que crear un nuevo proyecto. Para esto hazclic en el icono del MDS de AppLaud

En la ventana emergente, elige las opciones para tuproyecto, por ejemplo, si quieres instalar automáticamentelibrerías como jQuery Mobile o Sencha Touch o siquieres importar un proyecto externo solo marca lascasillas correspondientes. En este caso puedes dejar lasopciones por defecto y presionar el botón "Next"

En el futuro, cuando desees crear nuevas aplicaciones, lorecomendable es escoger la opción "Minimal PhoneGapproject" en la sección "Project Contents", esto creará unproyecto en blanco, listo para que puedas arrancar unanueva aplicación.

En la siguiente pantalla debes elegir un nombre para tuproyecto, una vez definido presiona de nuevo "Next"

Ahora, debes elegir la versión base de SDK para tuaplicación. Al elegir una versión específica en la quedarás soporte, tu aplicación se vincula a las funciones deuna versión de Android en especial. Antes de elegir, tomaen cuenta que al seleccionar versiones más recientes, esposible que no le puedas dar soporte a equipos consistemas operativos más antiguos.

Para garantizar una mejor distribución y soporte de tuaplicación, elige como base Android 2.2 ó 2.3.3 que son

compatibles con las versiones más recientes ( Android 3.xy Android 4.x), así tu aplicación será compatible con lamayor cantidad de dispositivos en uso y con los que seactiven en el futuro.

En la última pantalla, debes definir la información de tuproyecto. En este punto, el dato más importante es elPackage Name. Para definirlo debes seguir la siguientenomenclatura:

[extensión de tu dominio]. [nombre de tu dominio].[nombre de tu aplicación ]

Por ejemplo, si mi dominio es "revolucion.mobi" y miaplicación se llama "demo", debo definir el package namecomo "mobi.revolucion.demo", si mi dominio fueragoogle.com, debo definirla como "com.google.demo"

Al presionar el botón "Finish" automáticamente se crearántodos los archivos que necesitas para crear una aplicaciónPhoneGap. En el archivo index.html encontrarás la basede tu aplicación.

La configuración que elegimos para este proyecto deprueba, creará una aplicación de demostración en estearchivo.

-Configurar y activar el emulador

Para probar tu aplicación en el emulador de Android esnecesario configurar el ambiente de depuración. Pararealizar este proceso tienes que seleccionar la opción"Debug Configurations"

Debes definir ahora un entorno para tu app, en la lista dela izquierda haz doble clic sobre la opción "AndroidApplication".

Las opciones de configuración aparecerán a la derecha.Define un nombre en la casilla "Name" y en la casilla"Project" haz clic en el botón "Browse" para elegir elproyecto en el que estás trabajando.

Por último haz clic en "Apply" y luego en "Debug" paracompilar tu aplicación en modo de depuración.

Luego de unos minutos podrás ver una aplicación de

prueba funcionando en todo su esplendor el emulador deAndroid.

Si haces cambios en tu aplicación y quieres verlos en elemulador simplemente guarda estos cambios y vuelve apresionar el botón de "debug". Esta vez aparecerá laconfiguración que ya tienes guardada, solo debes elegirlapara probar la nueva versión de tu aplicación.

Cuando envíes de nuevo tu aplicación a depuración nocierres el emulador, ésta se instalará y actualizaráautomáticamente en el emulador, ahorraras mucho tiempoevitando reiniciar el sistema operativo.

SDK DE IOS

InstalaciónSi deseas crear programas para la plataforma móvil deApple y probarlos en tu equipo, es necesario bajar elSDK de iOS, el sistema operativo de los equipos iPhone,iPad y iPod Touch.

A diferencia del SDK de Android que es independientedel programa en que desarrolla el código, Apple creópara iOS un paquete completo que incluye el SDK,herramientas, emuladores y hasta el editor de código.

El programa principal del paquete de Apple es Xcode.Desde allí se pueden crear las aplicaciones nativas paraiOS y al instalarlo se instala también todo el paquete delSDK de iOS. El Xcode 4 puede instalarse únicamente enequipos Apple y se requiere al menos OS X 10.7.0 Lion osuperior.

Para descargar Xcode 4 solamente debes abrir el AppStore incluido en todas los equipos de escritorio Applecon sistema operativo Lion o superior

Debes buscar Xcode en la tienda y hacer la descarga delprograma. Esto descargará un instalador, que a su vez tepermite descargar a tu ordenador todos los archivos deXcode.

La instalación tomará un tiempo porque descargarás almismo tiempo los instaladores de Xcode, el SDK de iOSy el emulador de este sistema operativo. El pesoaproximado del archivo de instalación es de 1.8 GB

Descargar Xcode y el SDK de iOS es gratuito. Estesoftware te permitirá crear y emular aplicaciones en elordenador. Para publicar y probar aplicaciones en el

móvil deberás inscribirte en el programa de pago deApple.

Una vez finalizada la instalación de Xcode tendrásinstalado en tu ordenador todo lo necesario para crearapps para el sistema operativo iOS

Instalar PhoneGap en XcodePara crear tus aplicaciones PhoneGap desde Xcode,tienes primero que descargar la ultima versión en el sitiode PhoneGap ( http://www.phonegap.com/download )

Para efectos de redacción y sencillez para el lector, eneste libro vamos a utilizar la versión 1.9.0 de PhoneGaptambién disponible en el sitio de descarga.

Al momento de escribir este libro, el instalador dePhoneGap 2 aun no tiene soporte para plantillas en Xcode.Para crear tu proyecto usando la última versión dePhoneGap debes hacerlo a través de la línea decomandos. Puedes encontrar los detalles en la guiaoficial:

http://docs.phonegap.com/en/2.0.0/guide_getting-started_ios_index.md.html#Getting%20Started%20with%20iOS

Una vez descargada la versión 1.9.0 de PhoneGap debesdescomprimir el archivo que acabas de descargar yejecutar el instalador. El archivo de instalación está en lacarpeta "/lib/ios/" asegúrate de abrir el archivo con laextensión ".dmg"

Finalizado el proceso de instalación podrás crearaplicaciones PhoneGap desde Xcode. Vamos a utilizarestas nuevas herramientas para poner manos a la obra ycrear una aplicación iOS

Aplicación básica en XcodeUna vez instalado, abre el Xcode, elige la opción "Createa New Xcode Project".

En la ventana emergente podrás elegir que tipo de archivodeseas crear. Busca en la lista de la izquierda la opcióniOS > Application y selecciona la opción "Cordova-basedApplication".

En la siguiente ventana debes elegir el nombre de tuaplicación y seleccionar un identificador para el apartado"Company Identifier". La nomenclatura usual es definir la

extensión de tu dominio y su nombre. Por ejemplo si tudominio es google.com, usa como identificador:com.google

Presiona "Next" y guarda el proyecto en algún lugar defácil acceso en tu ordenador.

Para crear tu primera aplicación, presiona el botón "Run"que está en la parte superior izquierda de la aplicación.

Luego de unos segundos se compilará la aplicación yaparecerá el emulador con un mensaje similar a este:

Este mensaje de error es normal, solo necesitamos unpaso extra para corregirlo. Durante la compilación se creó

una carpeta llamada "www" en tu proyecto, debesincluirla dentro de Xcode para que la utilice como basede tu app.

Para encontrar la carpeta selecciona la raíz de tuproyecto, haz click derecho y selecciona la opción "Showin Finder"

Esta opción abrirá la carpeta donde se almacena el códigofuente de tu aplicación, busca allí la carpeta "www"

Selecciona esta carpeta y arrástrala dentro de Xcode, enla raíz de tu proyecto, tal como se indica en la imagen:

Aunque la carpeta www ya es parte del proyecto, esteproceso la incluirá gráficamente en el editor. Asegurate deseleccionar la opción "Create folder references for anyadded folders"

Para editar tu aplicación abre la carpeta www que ahoraaparece en la lista de archivos a la izquierda

Abre el archivo index.html y reemplaza el código original,por este otro :

Ejercicio: 5.1

<!DOCTYPE html><html> <head> <title>Hola mundo</title> <meta charset="utf-8"> </head><body> <h1> Hola mundo! </h1></body>

</html>

Salva los cambios y presiona de nuevo el botón "Run"

Luego de unos segundos, tendrás lista tu primeraaplicación hecha en Xcode, que se debe ver muy parecidaa esto:

En adelante, puedes seguir modificando los archivos de la

carpeta "www" para crear tus aplicaciones de iPhone /iPad

DREAMWEAVER CS6

Dreamweaver es un software propietario desarrollado porAdobe Systems. Es muy popular entre los desarrolladoresweb y desde hace más de una década es la herramientapor excelencia para crear la web.

Desde la versión CS5.5 se incluye integración contecnologías enfocadas al desarrollo de aplicacionesmóviles como jQuery Mobile, HTML5 y CSS3, ademásdel soporte para crear y probar aplicaciones nativasbasadas en PhoneGap.

Con la adquisición de Nitobi (creadores de PhoneGap)Adobe mejoró la integración de Dreamweaver conPhoneGap e incluyó la opción de compilar aplicacionesdesde la nube a través del servicio PhoneGap Build.

Esta nueva forma de crear aplicaciones permitedesarrollar y publicar aplicaciones móviles sin dependerde ningún sistema operativo en particular. Dreamweaverabre la opción para que sus usuarios puedan crearaplicaciones para plataformas que antes eranincompatibles, ahora es posible crear aplicaciones paraiOS sin necesidad de usar un equipo Apple o desarrollaraplicaciones para Blackberry desde Linux o Apple sin

necesidad de máquinas virtuales o librerías adicionales.

Instalar DreamweaverEn este libro usaremos como referencia la versión eninglés de Dreamweaver CS6. Si aun no lo tienes instaladopuedes bajar una versión de prueba por 30 días en el sitiode Adobe:

http://www.adobe.com/es/products/dreamweaver.html

Para descargar este programa es necesario crear unacuenta gratuita con Adobe o "Adobe ID", esta cuentatambién puede ser utilizada para otros servicios comoPhoneGap Build.

Gracias a que Dreamweaver está totalmente integrado conPhoneGap, no es necesario instalar ningún softwareadicional. Tampoco es necesario realizar ningunaconfiguración extra, el programa viene listo para crearaplicaciones PhoneGap de inmediato.

Aplicación básicaEl primer paso para crear una aplicación conDreamweaver es crear un nuevo proyecto o "sitio". Paracrear un nuevo sitio debes ir a Site > New Site.

El sistema te pedirá asignarle un nombre al proyecto ydefinir una carpeta en tu ordenador para guardar losarchivos de tu futura aplicación. Introduce los datoscorrespondientes y presiona el botón "Save"

Ahora que tienes un proyecto definido, debes crear elarchivo base de la aplicación, solo tienes que a la opción

File> new.

En la pantalla de nuevos documentos encontrarás muchasopciones para crear la base de una aplicación, en estecaso escoge: Blank Page > HTML > <none> y asegurateque el DocType esté definido en HTML5.

En el nuevo documento que acabas de crear, copia estecódigo:

Ejercicio 6.1:

<!DOCTYPE HTML> <html>

<head> <meta charset="UTF-8"> <title>Hola Mundo</title> <script src="phonegap.js" type="text/javascript"charset="utf-8"></script> </head> <body> <h1>Hola Mundo!</h1> <p>Mi primera app hecha con Dreamweaver CS6</p> </body> </html>

Como puedes notar, se está incluyendo en el código unallamada a un archivo "phonegap.js". Este archivo es elque conecta la librería de PhoneGap con tu aplicación.

No es necesario incluirlo en tu proyecto de Dreamweaver,cuando PhoneGap Build encuentra esta línea de código, seencarga de agregar automáticamente la versión másactualizada de la librería, esta funcionalidad esparticularmente útil tomando en cuenta que el proyectoPhoneGap es sumamente activo y las versiones cambianmuy rápido, ahora tienes la seguridad de usar siempre laversión más actualizada sin necesidad de modificar elcódigo.

Guarda el archivo que acabas de crear con el nombre"index.html" y tendrás lista la base de tu primeraaplicación móvil en Dreamweaver CS6.

-Configuración de Dreamweaver

Aunque este paso no es un requisito para crearaplicaciones, si deseas probarlas en un emulador Android local es necesario que descargues e instales elSDK de Android tal como se indica el Capítulo 3 de estelibro y que configures Dreamweaver para instalaraplicaciones directamente en el emulador.

Para activar esta funcionalidad solo debes ingresar a:Site>PhoneGap Build service> PhoneGap build settings.

En esta sección debes indicar la ruta en la que instalasteel SDK de Android, usa el icono de carpeta para navegaren tu ordenador y seleccionar la carpeta correspondiente.

Esta configuración se realiza una única vez, en adelantecuando compiles una aplicación con Dreamweaver puedesenviarla directamente a un emulador local de Android.

Compilar en la nube conPhoneGap BuildPara crear una aplicación PhoneGap desde Dreamweaverdebes seleccionar la opción: File > Phonegap BuildService > PhoneGap Build Service.

Dreamweaver envía todos los archivos del proyecto alservicio PhoneGap Build. Este servicio se encarga deprocesarlos y compilarlos automáticamente en 6diferentes plataformas ( iOS, Android, Windows Phone,Blackberry, webOS y Symbian).

Antes de enviar tus archivos a PhoneGap Build esnecesario que crees una cuenta gratuita e ingreses con tu

nombre y password registrados. Gracias a que PhoneGapBuild es parte de Adobe puedes utilizar el Adobe ID quecreaste previamente para bajar tu copia de DreamweaverCS6.

La primera vez que ejecutas un proyecto en PhoneGapBuild, el sistema va a solicitar un archivo deconfiguración para la aplicación, selecciona la opción"Create as a new project" y presiona el boton "continue"

Este paso creará un archivo con el nombre"ProjectSettings" dentro de tu proyecto con los detallesde configuración de la aplicación.

Tu aplicación será enviada inmediatamente a PhoneGapBuild. En el panel de control de PhoneGap podrás ver lasdiferentes versiones de tu aplicación en 5 diferentesplataformas.

-Probar aplicaciones

Dreamweaver CS6 te da 3 diferentes opciones paraprobar las diferentes versiones de tus aplicacionesPhoneGap:

Emulador: Descargar tu aplicación de la nube yejecutarla en un emulador local.

Probar en equipo: Escanear un código QR paraejecutar tu aplicación en un dispositivo físico.

Descarga: Guardar la aplicación compilada en lanube, en tu disco duro.

Por ahora, para ver tu primera aplicación, elige la opciónEmulador para probar tu aplicación localmente.

En cuanto la aplicación se descargue la nube y esté listapara ser probada en tu ordenador, debes elegir un AVDpara ejecutarla.

Puedes elegir un AVD pre existente o crear unopresionando el botón "AVD". Una vez elegido el AVDpresiona el botón "Launch" para instalar tu aplicación enel emulador.

Luego de unos minutos, tu aplicación estará disponible enel emulador de android

ESTRUCTURA DE UNAAPLICACION PHONEGAP

Las aplicaciones PhoneGap tiene una estructura definidaen su código y componentes externos. Una vez terminadala aplicación, es posible que sea necesario configuraralgunos elementos externos a la programación de lamisma, como la orientación en pantalla o los iconos queidentificaran al programa dentro del sistema. Estaconfiguración en PhoneGap varía según el sistemaoperativo en que se desea publicar.

En este capítulo examinaremos las partes que componenuna aplicación PhoneGap: las partes del código, laintegración de PhoneGap con un documento HTML, laestructura de los archivos y la configuración específicapara Android y iPhone.

Estructura html-Doctype

El doctype define el tipo de documento que vamos autilizar. Aunque es posible utilizar diferentes Doctypes enPhoneGap, en este manual vamos a utilizar el estándarHTML5 para aprovechar al máximo esta nuevatecnología. En la próxima sección hablaremos con detalledel HTML5, por ahora incluiremos en la primera línea dela aplicación el doctype:

<!DOCTYPE html>

Esto definirá el documento que utilizaremos como uno detipo HTML 5, ahora vamos a construir un documentocompleto.

Ejercicio 7.1

<!DOCTYPE html><html><head> <title>Ejercicio 7.1</title> <meta charset="utf-8">

</head><body> <h1>Mi primer app</h1> <button id="boton1"> Botón</button></body></html>

Cualquier documento, como este, puede convertirse en unaaplicación móvil, si lo compilamos se vería así:

Sin embargo nadie descargará una aplicación tan básica,no sin que antes le demos algo de estilo.

-CSS

Mejoremos un poco la apariencia de esta aplicación. Enla misma carpeta en que tienes almacenado el documentobase, crea una carpeta con el nombre "css", dentro de ellacrea un nuevo documento y nombra el archivo como:"hojaDeEstilos.css". Dentro de él incluiremos los estilosde esta aplicación:

body{ background:#1485CC; font-family:Arial; text-align:center; color:#fff;}button{ margin-top:5em; padding:1em; font-size:1em; background:#FFFC19;}div{ text-align:left;}

Finalmente, para incluir estos estilos en la aplicación, sedebe agregar esta linea antes de </head>

<link rel="stylesheet" href="css/hojaDeEstilos.css" >

En este punto la aplicación debería verse así:

-Cordova.js y librerías de javascript

Tenemos una aplicación con una estructura HTML5 yapariencia gráfica pero aún no tiene ningunafuncionalidad.

Muchas aplicaciones pueden continuar su desarrollo yllegar a publicarse sin mayor problema con lafuncionalidad actual, pero si queremos que la aplicacióntenga acceso a sensores como la cámara, brújula o elGPS, es necesario que incluyamos la librería Cordova quese encargará de conectar nuestra aplicación con elhardware del dispositivo y nos dará acceso a lossensores.

Para conectar la aplicación con Cordova solamente esnecesario copiar la el archivo javascript de Cordova en laraíz del proyecto (en caso de que no esté presente aún) einvocarla copiando esta línea antes de </head>

<script type="text/javascript" charset="utf-8"src="cordova.js"></script>

La librería Cordova se encuentra en los archivos deinstalación de PhoneGap. Según el programa dedesarrollo que se utilice es posible que el archivoCordova se copie automáticamente en el proyecto.

El nombre del archivo de cordova cambia según laversión, en el ejemplo actual se muestra simplementecomo "cordova.js" para efectos de redacción. Recuerdaactualizar tu código según la versión que corresponda.

Si deseas agregar otras librerías de javascript se debenincluir de la misma forma, en las líneas subsecuentes.

También es posible incluir código JavaScriptdirectamente en el documento a través de la etiqueta<script>. Vamos a darle algo de acción a la aplicación deejemplo incluyendo este código antes de </body>:

<script> document.getElementById("boton1").onclick =function(){alert(" haz hecho click")}</script>

Este comando básico de javascript selecciona el botónque estaba inactivo y muestra una alerta de texto al hacerclick. Más adelante en este manual vamos a explorar condetalle el uso de JavaScript en PhoneGap.

Continuemos explorando la estructura de una aplicacióncon algo un poco más interesante, en el próximo apartadovamos a acceder información del dispositivo.

Eventos de PhoneGapEn el ejemplo anterior utilizamos el evento "onclick" quese activa como es de sospechar cuando se hace clicksobre un elemento.

PhoneGap tiene también sus propios eventos que nosindican estados del dispositivo en el que trabajamos. Elmás importante de todos los eventos de PhoneGap es"deviceready" que nos indica cuando el dispositivo estalisto para enviar y recibir información de la API dePhoneGap.

Este evento es independiente de la carga de la aplicación, así que aunque la aplicación ya esté completamentecargada y funcional no quiere decir que ya tenga acceso alos sensores del dispositivo, eso puede tomar un tiempovariable según el sistema operativo y capacidad delequipo.

Es crucial que toda aplicación que utilice la API dephoneGap se inicialice después del evento "deviceready"de lo contrario, es casi seguro que la aplicacióndespliegue errores de comunicación con la API y obtengasresultados inconsistentes o erróneos.

Para agregar este importante evento debes incluir estalínea de código justo después de la línea que incluye la

librería Cordova.

<script> document.addEventListener("deviceready",dispositivoListo, false);</script>

En este caso lo que sucederá es que cuando el dispositivoen el que se ejecute la aplicación esté listo para enviar yrecibir datos de sus sensores, se activará el evento"deviceready", cuando esto suceda, se ejecutará la función"dispositivoListo".

Ahora es necesario definir la función"dispositivoListo" que, en su forma mas básica, puedeser:

function dispositivoListo(){ alert(" tu dispositivo esta listo para usar la API dePhoneGap")}

Para este punto, el código completo de la aplicación es:

Ejercicio 7.2

<!DOCTYPE html><html><head><title>Ejercicio 7.2</title><meta charset="utf-8"><link rel="stylesheet" href="css/hojaDeEstilos.css" ><script type="text/javascript" charset="utf-8"src="cordova.js"></script> <script> document.addEventListener("deviceready",dispositivoListo, false); function dispositivoListo(){ alert(" tu dispositivo esta listo para usar la API dePhoneGap") } </script> </head><body><h1>Mi primer app</h1><button id="boton1"> Botón</button><script>

document.getElementById("boton1").onclick =function(){alert(" haz hecho click")}</script></body></html>

Una vez compilado el ejercicio, se mostrará una ventanade alerta en cuanto el dispositivo este listo para ejecutarPhoneGap, similar a esto:

Ya estas usando HTML5, invocando una hoja de estilosexterna y la librería Cordova se inicializaperfectamente.... ¡nada mal para comenzar!

Archivos de un proyectoPhoneGapCuando se crea un proyecto PhoneGap, tal como vimos enlos ejemplos anteriores, utilizamos una serie de archivosde diferentes formatos como JavaScript ó CSS.

En general los dos archivos con los que vamos a trabajaren PhoneGap serán:

index.html: este archivo es la base de toda aplicaciónPhoneGap, es crucial que toda aplicación contenga unarchivo con exactamente ese nombre y extensión ( sinmayúsculas, ni espacios ) de lo contrario, la aplicación nofuncionará correctamente.

cordova.js: la conexión entre el documento HTML y laAPI de PhoneGap. Este archivo permite ejecutarcomandos en lenguaje JavaScript que, gracias a PhoneGappueden interactuar con el hardware del equipo móvil. Elnombre de este archivo cambia según la versión, usandola nomenclatura: Cordova-X.x.js donde "X.x" es elnúmero de la versión actual. En este libro solo aparecerácon el nombre "cordova" sin número de versión paraefectos de redacción. Recuerda siempre actualizar tucódigo para que se ajuste a al nombre del archivo queutilizas.

El resto de archivos son opcionales, pero como buenapráctica se recomienda crear carpetas por cada tipo dearchivo (ej: hojas de estilo en una carpeta "css" yjavascript en la carpeta "js") en caso de usar archivosJavaScript y CSS adicionales.

Todos estos archivos son la parte visible de unaaplicación, detrás de ella, hay una serie de archivospermitirán el acceso nativo a los sensores y demáshardware del dispositivo móvil.

Por regla general, los archivos que vamos a trabajar en unproyecto PhoneGap se encuentran en una carpeta llamada"www". La ubicación exacta de esta carpeta cambia segúnla plataforma, pero en general siempre conserva el mismopatrón.

Al trabajar desde la aplicación es acceder con totallibertad cualquier archivo que esté dentro de la carpeta"www", el resto de archivos del sistema son de accesorestringido o bloqueado por motivos de seguridad.

Estructura de proyectos enXcodeXcode fue creado para desarrollar aplicaciones de iOS,los proyectos de PhoneGap son exactamente iguales a unproyecto regular para iPhone/iPad pero con ligerasadaptaciones.

Al revisar los archivos del proyecto, encontrarás unacarpeta llamada "www" allí están todos los archivos enlos que se basa el proyecto, esta carpeta es la raíz de todaaplicación.

En la carpeta "Products" se creará un archivo con elnombre de tu proyecto y la extensión ".app", ese es elproyecto compilado, mas adelante hablaremos de comoutilizarlo.

La carpeta "Resources" tiene en su interior dossubcarpetas llamadas "icons" y "splash", allí sealmacenan los iconos e imágenes de carga de tuaplicación.

Por último la carpeta "Supporting Files" tiene un archivocon el nombre de tu proyecto con el sufijo "-Info" y laextensión ".plist", ( Ej: miapp-Info.plist ) este archivosirve para configurar tu aplicación, más adelanterevisaremos las propiedades de este archivo en detalle.

-Estructura de proyectos en Eclipse

La estructura de un proyecto PhoneGap en Eclipse se basaen un proyecto nativo de Android con ligeros cambios.

La carpeta en la que vamos a trabajar es "assets". Dentrode esa carpeta esta una subcarpeta llamada "www" que esla raíz de toda aplicación PhoneGap.

En la carpeta "bin" encontrarás archivos con el nombre de

tu aplicación y la extensión ".apk" esos archivos son tuaplicación compilada. Más adelante hablaremos comoutilizar este archivo.

La carpeta "res" almacena los iconos y pantallas de cargade la aplicación en múltiples resoluciones.

Finalmente, en la raíz se encuentra el archivo"AndroidManifest.xml" que se encarga de la configuraciónde la aplicación. Hablaremos de él en el siguienteapartado.

Archivos de configuraciónLos archivos de configuración de Android y iOS son muydistintos en su forma y sintaxis, sin embargo, cumplen lamisma función: configuran la forma en que la aplicaciónserá ejecutada dentro del dispositivo.

Dentro de estos archivos de configuración se escondeinformación crucial de toda app aquí se definen losiconos que identificaran la aplicación, las pantallas decarga, la orientación y hasta la capacidad de mostrarse apantalla completa.

Vamos a analizar individualmente los archivos deconfiguración de estos dos sistemas operativos

Configuración en iOSTal como se menciona en el apartado de archivos de iOS ,el archivo de configuración de las aplicaciones iOS seencuentra en la se encuentra en la carpeta "SuportingFiles" del proyecto.

En los proyectos de iOS generalmente hay dos archivoscon la extensión .plist, el que nos interesa es el que tengael nombre del proyecto con el sufijo "-Info" (ej: si miproyecto se llama test, el archivo se llamara test-Info.plist).

Al abrir este archivo encontraremos una lista depropiedades de la aplicación:

Este archivo de configuración permite modificar variaspropiedades, algunas irrelevantes otras que tienen un granimpacto en el comportamiento de la aplicación.

-Mostrar en pantalla completa

Vamos a probar lo útil que puede ser este archivo deconfiguración con un ejercicio simple. La aplicación deprueba que hemos creado, en iPhone se ve por defecto conla barra de status que muestra datos como la hora o elstatus de la batería:

Si al archivo de configuración le agregamos una lineaextra con el parámetro "Status bar is initially hidden"definido en "YES" de esta forma

La barra de status se ocultará cada vez que se ejecute estaaplicación y se mostrará a pantalla completa.

-Permitir acceso a documentos externos

Por cuestiones de seguridad la configuración por defectode las aplicaciones PhoneGap restringen el acceso acualquier documento externo.

Si una aplicación intenta conectarse a un documentoonline, sencillamente se le bloquea el acceso y apareceráun error en la consola de depuración reportando que no setiene acceso al archivo solicitado.

Si tu aplicación necesita acceso a archivos externos, esnecesario configurarlo en el archivo: "Cordova.plist" quese encuentra en la misma carpeta que los demás archivosde configuración.

Abre el archivo, busca el valor "External Hosts" ypresiona el signo "+" que esta junto a él. Esto agregarauna linea por cada dominio que necesites autorizar, ennuestro caso, vamos para darle acceso a la imagen delejemplo que se encuentra en el dominio"manualdelguerreromovil.com" agregandolo tal como seve en la ilustración:

Al agregarle un asterisco y un punto, se autoriza acceso atodos los subdominios del sitio seleccionado.

-Control de orientación

En iOS es posible bloquear la orientación de laaplicación en posición horizontal o vertical evitando laconducta por defecto de rotar la pantalla automáticamente.

Es posible editar esta conducta desde el archivo deconfiguración buscando el valor "Supported Interfaceorientations". En iOS hay cuatro posibles orientaciones (horizontal a la derecha y a la izquierda, vertical a laderecha e izquierda) por lo que este valor permite incluirde una a cuatro posibles posiciones soportadas.

La orientación de la aplicación se puede editar también enel sumario de la aplicación de Xcode.

Desde este sumario, también se pueden editar con mucha

facilidad y de forma gráfica, otras opciones del archivode configuración como los iconos y pantallas de carga dela aplicación.

Configuración en AndroidLa configuración de las aplicaciones android se realiza enel archivo llamado AndroidManifest.xml que se encuentraen la raíz del proyecto Android.

En el AndroidManifest encontramos todo tipo de detallessobre la aplicación, como las resoluciones soportadas olos permisos de acceso al dispositivo.

Al igual que con la configuración de iOS, este archivo nospermite configurar aspectos importantes de nuestraaplicación.

-Control de orientación

Para evitar que la aplicación se ajuste a la orientación delaparato es posible bloquear la apariencia de la aplicación para que solo funcione en modo horizontal o vertical.

Necesitas buscar en el archivo de configuración el nodo<activity y le agregas el código:

android:screenOrientation="portrait"

Tal y como se ilustra a continuación:

Este comando bloqueara la aplicación en posiciónvertical, para que el bloqueo se haga en la posiciónhorizontal, se debe utilizar este otro código:

android:screenOrientation="landscape"

En el caso que necesites probar esta característica en elemulador de Android, debes habilitar el soporte para estacaracterística en la configuración del AVD.

Presiona las teclas CTRL+F12 para rotar el emulador.Una lista completa sobre los comandos por teclado delemulador están en este URL: http://bit.ly/w1cFvz

-Mostrar a pantalla completa

Mostrar las aplicaciones PhoneGap a pantalla completaen Android necesita una configuración especial.

El primer paso para habilitar esta función es buscar elarchivo de actividad de la aplicación. Usando el projectexplorer de Eclipse localiza la carpeta "src" de tuproyecto, dentro de esta carpeta encontraras un paquetecon el namespace que usaste para tu app, allí encontrarásun archivo de extensión ".java" que tiene el nombre de tuapp con el sufijo "Activity".

Por ejemplo, suponiendo que tenemos una aplicaciónllamada "test" con un namespace "mobi.revolucion.test".Según la nomenclatura mencionada previamente, elarchivo de actividad se llama TestActivity.Java

Dentro del archivo de actividad, hay que modificaralgunas líneas, primero es necesario importar la siguienteclase:

import android.view.WindowManager;

el siguiente paso es localizar la función onCreate() yluego de la líneasuper.loadUrl("file:///android_asset/www/index.html"); incluirel siguiente código:

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN| WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);

Por ejemplo en la aplicación de demostración quemencionamos anteriormente, el archivo TestActivity.javaquedaría con el siguiente código:

package mobi.revolucion.test;import org.apache.cordova.DroidGap;import android.os.Bundle;import android.view.WindowManager;public class TestActivity extends DroidGap { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState);

super.loadUrl("file:///android_asset/www/index.html"); getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN| WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN); }}

-Imagen de Inicio

La imagen de inicio o Splash Screen es el gráfico queaparece mientras el dispositivo móvil carga tu aplicación.

Prácticamente todas las aplicaciones usan un splashscreen porque los dispositivos generalmente tardan untiempo en inicializar una aplicación, también esta imagensirve para introducir al usuario a lo que será laaplicación.

Antes de comenzar a configurar, crea una imagen enformato PNG de 320px de ancho y 480px de alto. Buscaen tu proyecto la carpeta "res", allí encontraras variascarpetas, cada una de ellas almacena archivos gráficoscorrespondientes a las resoluciones soportadas por tuproyecto android, la nomenclatura de estas carpetas es:

drawable-hdpi: archivos gráficos de alta resolución(High Density per Inch)drawable-ldpi: archivos gráficos de baja resolución(Low Density per Inch)drawable-mdpi: archivos gráficos de medianaresolución (Medium Density per Inch)drawable-xhdpi: archivos gráficos de muy altaresolución (eXtra High Density per Inch)

Cada carpeta necesita un tamaño diferente de imagen para

mostrar en pantallas de diferente resolución, si deseasmás información sobre los tamaños soportados puedesencontrarla en este URL

http://developer.android.com/guide/practices/screens_support.html

Por ahora, solo guarda el mismo archivo gráfico enformato PNG que acabas de crear en cada una de estascarpetas, asegurate que en todas tengan el mismo nombre:"splash.png".

Para incluir esta imagen dentro aplicación también esnecesario modificar el archivo de actividad como sedetallo en el apartado anterior. En este caso se necesita localizar esta línea en el archivo de actividad:

super.loadUrl("file:///android_asset/www/index.html");

y reemplazarla con el siguiente código:

super.setIntegerProperty("splashscreen",R.drawable.splash);super.loadUrl("file:///android_asset/www/index.html",10000);

La primera línea agrega el soporte para el splash screenusando el archivo "splash.png", la segunda línea, incluye

una pausa de 10 segundos para mostrar la imagenseleccionada.

El código de ejemplo , se vería así al actualizarlo consoporte para la imagen de carga:

package mobi.revolucion.test;import org.apache.cordova.DroidGap;import android.os.Bundle;import android.view.WindowManager;public class TestActivity extends DroidGap { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.setIntegerProperty("splashscreen",R.drawable.splash); super.loadUrl("file:///android_asset/www/index.html",10000); getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN|

WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN); }}

Edita los archivos de configuración de tu aplicación ypruebala en el emulador, notarás que ahora muestra unaimagen al inicializarse.

En este capítulo analizamos las propiedades yconfiguración básica de un proyecto PhoneGap, en lospróximos capítulos vamos a revisar los tres pilaresfundamentales para crear un proyecto PhoneGap: HTML5,CSS y JavaScript.

HTML5

HTML5, la base dePhoneGapComo hemos visto en ejercicios anteriores, la basecentral de una aplicación PhoneGap es HTML5. Gracias aesta integración con la nueva versión de HTML, es quepodemos aplicar lo más novedoso del desarrollo web alentorno móvil.

Aunque ya se ha utilizado en varios ejercicios, vamos ahacer hincapié en un detalle importante de los documentosque estamos usando en este manual, en todos los casosiniciamos los documentos con esta primera línea:

<!DOCTYPE html>

Esta línea es el doctype y define el documento en el quevamos a trabajar como uno de tipo HTML5. Estadefinición permite acceder a las nuevas tecnologías de laweb y lo mejor: es perfectamente compatible con todoslos equipos en los que funciona PhoneGap.

HTML5 es mucho más que nuevas etiquetas, el W3C(world wide web consortium ) , organismo encargado demantener los estándares de los principales lenguajes deinternet, trabaja por convertir el navegador tradicional enun completo entorno multimedia que nos permita trabajarsin necesidad de ningún plugin o programas externos,precisamente por esta razón es que HTML5 vieneempacado con una serie de nuevas tecnologías comoaudio, video, canvas y mucho más.

PhoneGap utiliza en muchos casos la implementaciónestándar del W3C para conectar los sensores deldispositivo. Si ya has trabajado con HTML5 y conocessus nuevos tags y semántica tienes la mitad del caminorecorrido, si no estás familiarizado con este nuevolenguaje, desarrollando aplicaciones PhoneGap te vas aconvertir en un experto.

En este capítulo vamos a explorar algunos de lasprincipales novedades de HTML5 que ya podemosaplicar con seguridad en aplicaciones PhoneGap.

ViewportEl viewport es un elemento clave para asegurar la escalay apariencia en que se muestran las aplicaciones. Si no seincluye este el elemento en el código se corre el riesgo deque las aplicaciones se muestren en una escala incorrecta.

El viewport es el área visual en la cual se muestra undocumento HTML, es posible manipular este elementopara controlar la forma en que se despliegan loscontenidos en la pantalla de un dispositivo móvil.

Manipulando los atributos del viewport es posibleconfigurar elementos de visualización como el ancho,alto, tamaño y escala de un documento. Para habilitar elviewport solamente se añade esta línea dentro del <head>

<meta name="viewport" content="width=device-width"/>

Ésta configuración en especial se adapta dinámicamente altamaño de pantalla del dispositivo mostrando loscontenidos en su escala correcta.

Esta etiqueta no solo nos sirve para ajustar el tamaño delárea visible, también podemos controlar el "pinch zoom"

o zoom gestual del sitio, por ejemplo, el siguiente códigobloquea que los usuarios escalen el tamaño de loscontenidos en pantalla:

<meta name="viewport" content="width=device-width, user-scalable=no;" />

Si queremos que los contenidos se escalen hasta untamaño máximo también se puede definir con el atributo"maximum-scale", por ejemplo, este viewport permiteescalar el contenido hasta el doble de su tamaño regular:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0;" />

Si usas el emulador de iPhone presiona la tecla "alt" parasimular el "pinch" para escalar elementos.

CanvasMuy similar al concepto de Flash, el elemento canvas esun área rectangular que permite representar gráficos eimágenes de forma dinámica en mapa de bits.

Canvas ofrece una amplia gama de posibilidades gráficas,que le permiten controlar todos los pixeles de sucontenido y manipularlos de muchas maneras.

Esta tecnología también es compatible con equiposmóviles y se vuelve particularmente atractiva como unmedio para mostrar animaciones y gráficos dinámicos, enespecial, tomando en cuenta que el plugin de Flash fuedescontinuado para equipos Android y no es compatiblecon equipos iPhone. Por este mismo motivo el formato Flash (.swf) no es compatible en aplicaciones PhoneGap.

Insertar Canvas en una app no podría ser más sencillo,solamente se debe incluir un código similar a éste encualquier parte dentro de <body>

<canvas id="misCanvas"></canvas>

Se recomienda usar el atributo "id" ya que los contenidosde Canvas se asignan con comandos de javascript,asignarle un ID facilita la manipulación desde este

lenguaje.

En el siguiente ejemplo, crea un círculo usando comandosbásicos en <canvas>

Ejercicio 8.1

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> <title>Ejercicio 8.1</title> <meta charset="utf-8"></head><body> <canvas id="misCanvas" width="200" height="200"></canvas> <script> /// selecciona el elemento canvas var canvas =document.getElementById("misCanvas"); var contexto = canvas.getContext("2d"); ///crea un círculo dentro de las canvas

contexto.beginPath(); contexto.arc(60, 60, 50, 0, Math.PI*2, true); contexto.closePath(); contexto.strokeStyle = "#FF0000"; contexto.fillStyle = "#0000FF"; contexto.lineWidth = 3; contexto.fill(); contexto.stroke(); </script></body></html>

Como se puede observar lo que realmente genera losgráficos dentro de la API de Canvas es Javascript, en estecaso se generó un círculo de color azul:

Canvas es un tag muy flexible y además de ser controlablepor javascript es completamente accesible por CSS.

Prueba agregar este código CSS dentro del <head> delejemplo anterior para modificar las Canvas

<style> #misCanvas{ background:#000; width:100%;height:100%}</style>

Esa simple línea le define las propiedades gráficas alcanvas, en este caso cambió el tamaño y fondo alelemento que teníamos antes.

Otra característica interesante de las canvas es quepueden dar un efecto de animación, se usa la palabra"efecto" porque lo que realmente sucede es que seredibuja una imagen ligeramente distinta que da lasensación de animación ante el ojo humano.

En el siguiente ejemplo se crea un círculo partiendo del

que acabamos de crear pero en este caso se redibuja elcírculo muchas veces, a través de un intervalo de tiempode javascript:

Ejercicio 8.2

<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2" /> <title>Ejercicio 8.2</title> <meta charset="utf-8"> <style> #misCanvas{ background:#000;} body{ margin:0px; padding:0px;} </style> </head> <body> <canvas id="misCanvas" width="320" height="480"></canvas> <script type="text/javascript"> /// crea un intervalo que redibuja el círculo var animacion = setInterval("animar()", 1000); // posiciones originales y velocidad de la

animación var posX = 0; var posY = 0; var dx = 5; var dy = 5; //tamaño de la figura var shapeSize = 50; // selecciona el elemento canvas y lo convierteen una variable var canvas =document.getElementById("misCanvas"); /// selecciona el contexto 2D que usaremos paradibujar var contexto = canvas.getContext("2d"); /// la función animar() se ejecutará cada ciclo delintervalo definido al inicio function animar(){ // Limpia el dibujo anterior contexto.clearRect(0, 0, canvas.width,canvas.height); /// Círculo contexto.beginPath(); contexto.arc(posX,posY,shapeSize,0,Math.PI*2,true);

contexto.fillStyle = '#'+(Math.random()*0xFFFFFF<<0).toString(16); contexto.fill(); // controla la posición, evita que loselementos salgan de vista if (posX + shapeSize > canvas.width || posX < 0){ dx = -dx; } if (posY + shapeSize > canvas.height || posY < 0){ dy = -dy; } posX += dx; posY += dy; } </script> </body></html>

Este código genera una animación con circulo de coloresaleatorios que baila por toda la pantalla sin usar ningúnplugin externo.

Canvas y su capacidad para dibujar formas, así como lade animarlas, es una de las características de la API deHTML5 con el soporte más extendido, es totalmenteseguro usarlo en las aplicaciones PhoneGap para losprincipales sistemas operativos de smartphone.

Video (iOS)Una de las API’s más famosas de HTML5 es el tag<video> que permite incluir vídeos directamente en losdocumentos HTML5 sin usar ningún plugin.

El soporte para vídeo, aunque está disponible en elnavegador de Android, no está disponible desde lasaplicaciones PhoneGap que usan esta plataforma. Almomento de escribir este manual, los ejemplos queveremos a continuación sólo funcionan en equipos iOS.

-Insertar video

Lo primero que se necesita para mostrar video en unaaplicación PhoneGap, es un archivo con el formatoadecuado para desplegarse correctamente en un equipomóvil.

Existe una infinidad de programas con la capacidad decodificar el archivo de video en el formato correcto. En elpresente manual utilizaremos Miro Video Converter, unproyecto de código abierto, gratuito y multiplataforma. Elprograma se puede descargar en el sitio oficial:http://www.mirovideoconverter.com

Para darle el formato correcto a un video con esteprograma sólo es necesario arrastrar el archivo a laventana del convertidor y en este caso seleccionar laopción: "iPhone"

Una vez convertido el archivo, en este caso, puedesrenombrarlo como "video.mp4" y copiarlo en la carpetade tu proyecto phoneGap.

Por defecto, cuando en un documento HTML5 se inserta eltag <video> sin ningún parámetro o configuraciónadicional, se muestra únicamente el primer cuadro delarchivo de video. Para mostrar una imagen diferente, seutiliza el atributo "poster" con el valor de la imagen quese desea mostrar. La imagen puede estar en formato PNG,JPG o GIF.

En este caso usaremos una imagen con el nombre"thumb.png" previamente incluida en la carpeta delproyecto.

En el siguiente ejemplo se mostrará el uso del tag <video>con el atributo "poster"

Ejercicio 8.3

<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>Ejercicio 8.3</title> <meta charset="utf-8"> </head><body> <video id="miVideo" src="video.mp4"width="300px" height="234" poster="thumb.png" ></video></body></html>

Este código no sólo inserta un video que puedereproducirse directamente dentro de la aplicación,también gracias al atributo poster despliega una imagenque ayuda al usuario a conocer los contenidos del videoque se va a observar.

-Control programático de video

Aunque en iOS el video incluye automáticamente un botónde reproducción, tenemos algunas opciones extra paracontrolarlo gracias a la API de video.

Por ejemplo, podemos controlar la reproducción de videodesde elementos externos, prueba agregar este códigoluego de </video> en el ejemplo anterior.

<button onClick="reproducir()"> reproducir video</button><script> function reproducir(){ var videoSeleccionado =document.getElementById("miVideo") videoSeleccionado.play(); }</script>

Este código muestra un botón que vincula el eventoonclick con la función reproducir(). Dentro de estafunción se selecciona el elemento de video y se activa lareproducción a través del comando de la API de video: play();

Puedes encontrar documentacion completa sobre esta API

de HTML5 en el sitio oficial del W3Chttp://www.w3.org/TR/html5/media-elements.html

Audio (iOS)HTML5 también permite utilizar archivos de audioanidados directamente dentro del navegador sin necesidadde plugins, esto se logra gracias al tag <audio>.

Al igual que con el video, la API de audio aunque estadisponible en el navegador de Android, no lo esta paraaplicaciones basadas en PhoneGap. Los ejemplos queveremos a continuación solo funcionan en iOS

-Insertar audio

El formato que necesitamos para insertar audio conHTML5 en iOS es el omnipresente .mp3, casi seguramentetienes un archivo de este formato en algún lugar de tuordenador, solo cópialo en la carpeta del proyectophonegap y renombrarlo como "audio.mp3".

Para insertar audio en un documento debes utilizar el tag<audio> similar a este código

<audio id="miAudio" src="audio.mp3" controls ></audio>

Esto muestra automáticamente un control básico del audio

que se acaba de incluir.

El tag <audio> no tiene representación gráfica, por lo quesi no se incluye el atributo "controls" aunque el audio estépresente, no será visible.

-Control programático

La API de <audio> es muy similar a la de video y utilizalos mismos métodos para controlar el audio.

En el siguiente ejemplo aprovechamos la capacidad quetiene <audio> de ser invisible al eliminar el atributo"control" y desplegamos nuestros propios controles,usando la API de audio:

Ejercicio 8.4

<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=2" /> <title>Ejercicio 8.4</title> <meta charset="utf-8"><style> button { background: green; border-radius: 10px; font-size: 1em; margin: 4%; padding: 1em;

width: 40%; } button:last-of-type { background: red; }</style></head><body> <audio id="miAudio" src="audio.mp3"></audio> <button onClick="reproducir()"> reproducir</button> <button onClick="detener()"> detener </button> <script> function reproducir(){ var audio =document.getElementById("miAudio"); audio.play(); } function detener(){ var audio =document.getElementById("miAudio") audio.pause(); } </script>

</body></html>

Los botones controlan la reproducción del audio y conalgo de diseño adicional estarán listos para cualquieraplicación musical.

A lo largo de esta sección hemos usado CSS para darlepropiedades gráficas básicas a los elementos de HTML5,en el siguiente capítulo, exploraremos a profundidad todaslas opciones que nos ofrece CSS3 para llevar laapariencia de las aplicaciones PhoneGap un nivelprofesional.

CSS 3

HTML5 es la base de construcción de las aplicaciones enPhoneGap, pero existe otra herramienta igual de crucialpara crear una aplicación: el lenguaje CSS (CascadingStyle Sheets).

CSS permite definir o modificar la apariencia de todos ycada uno de los elementos en un documento HTML o ennuestro caso una aplicación PhoneGap.

La última versión de la especificación de este lenguaje esel CSS3, y al igual que HTML5 está disponible parautilizarlo en las aplicaciones hechas con PhoneGap.

CSS3 y equipos móvilesCSS3 tiene una relevancia particular en el desarrollo paradispositivos móviles, ya que las animaciones ytransiciones que crea tienen un performance muy superiora las creadas a través de otras tecnologías comojavascript, esto se debe a que la animaciones de CSS3 sonaceleradas por hardware, mientras que una animaciónhecha con javascript se ejecuta desde el procesador y enlos dispositivos móviles, generalmente éste no es tanveloz como para dar un rendimiento óptimo.

En general se recomienda dar prioridad a CSS paramanipular los elementos gráficos y la creaciónanimaciones debido a su bajo consumo de recursos enequipos móviles.

Media queriesLos Media Queries son una serie de condiciones yrequisitos de CSS que permiten ejecutar código alevaluar ciertas condiciones predeterminadas, porejemplo, permiten invocar hojas de estilos adaptadas a lascapacidades específicas de cada dispositivo.

Con Media Queries tienes parámetros más inteligentespara definir las condiciones en que se deben mostrar lashojas de estilo, por ejemplo, invocar hojas de estilo segúnel ancho y alto del navegador o del equipo, la orientaciónactual del dispositivo (horizontal o vertical) y hasta laresolución de pantalla.

Debido a que PhoneGap tiene la capacidad de generarcódigo que funciona en muchos equipos y plataformas, eluso de media queries es particularmente útil para adaptarel contenido a las condiciones y equipos cambiantes.Usando media queries, es posible crear un solo códigobase con varias hojas de estilo que adapten la aparienciade la aplicación al desplegarse en un móvil, un tablet o unequipo de alta resolución.

-Sintaxis

Existen dos formas de utilizar media queries en undocumento, la primera es insertarlos directamente en lallamada al documento CSS, usando para esto el atributomedia:

<link href="css/movil.css" rel="stylesheet"type="text/css" media="handheld, only screen and(max-device-width: 480px)" />

De esta forma, la hoja de estilos se ejecutará sólo si sereúnen las condiciones definidas, en el código anteriorpor ejemplo, los estilos que están en el documento"movil.css" se mostrarán sólo si la aplicación se ejecutaen un dispositivo móvil, que tenga como máximo un anchode pantalla de 480 pixels.

La segunda opción para utilizar media queries en undocumento es incluirlos dentro del documento CSS:

@media only screen and (max-width: 480px) { body{ background:red }}@media only screen and (max-width: 999px) { body{ background:green }

}

En este caso, la misma hoja de estilos puede reaccionarde diferentes maneras: si el dispositivo mide menos de480 pixels muestra un background rojo, si mide mas queeste tamaño y menos de 999 pixels, el background seráverde.

Este sencillo ejemplo, en la práctica mostrará un fondo decolor rojo si se ejecuta en un iPhone, mientras que elfondo será verde si la misma aplicación se ejecuta en uniPad.

Selectores CSS3CSS3 incluye una nueva gama de selectores que podemosutilizar en nuestras aplicaciones, eliminando la necesidadde incluir constantemente clases o ID’s. Esto permite quenuestro código no solo sea más flexible, también, máseficiente. Al tener que buscar menos clases o ID’s paraaplicar los estilos, le ahorramos algo de carga al limitadoprocesador de un dispositivo móvil.

Pongamos manos a la obra , vamos a comenzar a explorarlos selectores usando como base este código que noutiliza ninguna clase ni ID:

Ejercicio 9.1

<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2" /> <title>Ejercicio 9.1</title> <meta charset="utf-8"> <link rel="stylesheet" href="ejercicio_9-1.css"/> </head>

<body> <h1> Receta de té helado </h1> <img src="icedTea.png" alt="tefrio" height="157"width="73"/> <ul> <li>Hervir agua</li> <li>Mezclar Té</li> <li>Agregar Limon y azucar</li> <li>Enfriar</li> <li>Disfrute!</li> </ul> </body></html>

Para mantener el orden del ejemplo, vamos a trabajar conuna hoja de estilos externa que debes crear en la carpetade tu proyecto en con el nombre "ejercicio_9-1.css", porahora dejalo en blanco.

El código base, produce una aplicación con este aspecto

Ahora, vamos a aplicarle una serie de estilos básicos,para comenzar a trabajar y darle una apariencia un pocomás amigable a la aplicación. En la hoja de estilos queacabas de crear copia este codigo base:

body, h1{margin:0; padding:0;}html,body{height:100%}body{background: #f5bd07;}ul{margin:127px auto 0; padding:0; width:90%;}

h1{font-size:20px; font-weight:normal;background:#000; color:#fff; height:52px; line-height:52px; text-align:right}img{position: absolute; top:0}li{ list-style-type:none; background:#000000;height:45px; margin-bottom:10px; color:#fff; text-indent:22px; line-height:45px}

Esto es CSS tradicional, el que siempre has utilizado paracrear sitios. Luego de aplicarlos, tenemos un punto departida para aplicar el CSS3, tu aplicación por ahoradebería verse así:

Ahora ya estamos listos para comenzar a utilizar losnuevos selectores! Comencemos por darle un colordiferente a cada caja de texto sin usar nada más queselectores CSS3.

El primero que vamos a usar es :first-child , un nuevo

selector que permite manipular el primer elemento de ungrupo, agrega esta linea al final del archivo .css

li:first-child {background:#733c0a}

Esto selecciona el primer elemento (:firstchild) de la lista(li) y le asignará un nuevo color.

El cambio de apariencia al agregar una linea al final se daporque en CSS se pueden asignar múltiples estilos para unsolo tag. Si dos estilos afectan al mismo tag, el últimoque se define tiene prioridad.

En los siguientes ejemplos de este capítulo - únicamentepara efectos educativos - vamos a aprovechar esteprincipio de CSS agregaremos los nuevos selectores alfinal de la hoja de estilo de esta forma sobre escribiráncualquier otro efecto anterior y será posible ver el cambiode inmediato.

Para seleccionar la segunda casilla de texto, vamos autilizar el selector :nth-child que permite elegir unelemento según el orden en que aparece. Este selectorhace el conteo a partir del primer elemento del grupo, eneste caso vamos a modificar el segundo elemento, loseleccionamos asignando el número 2 como parámetro delselector:

li:nth-child(2) {background:#ab5110}

El tercer elemento lo vamos a seleccionar usando :nth-of-type un selector muy similar al anterior pero que ademásde seleccionar en base al orden de los elementos, sóloafecta elementos de un tipo específico, en este caso soloselecciona el tercer elemento de la lista (<li>).

li:nth-of-type(3){background:#cd5d14}

En este caso en el grupo solo hay elementos de tipo <li>pero si hubiera cualquier otro tag, :nth-of-type lo ignoraen su conteo por no ser del tipo correcto.

El penúltimo elemento lo seleccionaremos con nth-last-child que es el opuesto de nth-child. Este selectortambién busca los elementos a partir del orden en que seencuentran, pero hace su conteo a partir del últimoelemento. En este caso como queremos seleccionar elpenúltimo elemento de la lista, le enviamos el numero 2como parámetro para que cuente el segundo elementoantes del final de la lista.

li:nth-last-child(2){background:#e46516}

Este selector es particularmente útil si necesitamosseleccionar elementos al final de una lista de la que

desconocemos la cantidad total de elementos.

Finalmente el último elemento de la lista loseleccionaremos con :last-child que selecciona el últimoelemento de un grupo:

li:last-child{background:#ff721d}

Ahora la lista se ve mucho más colorida y sin usar ni unasola clase de CSS:

Existen muchas formas de seleccionar elementos y tal vezpara este ejemplo nos complicamos más de lo necesario,pero fue únicamente con fines pedagógicos.

Puedes encontrar la lista completa de los selectores deCSS3 en la documentación oficial del W3C:

http://www.w3.org/TR/selectors/#selectors

Efectos con CSSAdemás de los selectores podemos seguir mejorandonuestra aplicación con los nuevos efectos que incluyeCSS3.

Lo mejor de estos efectos es que no solo nos dan uncontrol total sobre la apariencia de las aplicaciones,también permiten reducir drásticamente el peso total yaque permiten hacer menor uso de imágenes para crearelementos de interfase.

Por ejemplo, antes de CSS3 para darle un borderedondeado a las cajas de texto teníamos que crearimágenes con dicho borde redondeado y asignar una acada casilla, ahora podemos hacer esta tarea en unsegundo con la propiedad border-radius, para darlebordes redondeados a toda la lista solo es necesarioagregar esta linea:

li{ border-radius:10px; }

De la misma forma, es posible agregarle una sombra a lascasillas con solo agregar esta linea:

li{ box-shadow:2px 2px 2px rgba(0,0,0,0.5)

-webkit-box-shadow:2px 2px 2px rgba(0,0,0,0.5)}

Este efecto permite definir una sombra definiendo ladistancia X e Y en los primeros dos parámetros y eldesenfocado en el tercer parámetro.

A traves del soporte rgba (red, green, blue, alpha)podemos incluir colores con transparencia, en este caso sedefine el color negro y el último parámetro: 0.5 permiteuna transparencia del 50%

El atributo para definir la sombra de un elemento es "box-shadow". En este caso se incluyen dos diferentesversiones, la versión regular y otra con el prefijo "-webkit-" para asegurar el soporte en equipos Android.

Con ambos efectos aplicados - los bordes redondeados yla sobra - las casillas ahora se ven de esta forma:

También es posible agregarle sombras al texto, con unapropiedad muy similar a la anterior, con text-shadow se leasignan sobras específicamente al texto:

li{text-shadow:1px 1px 1px rgba(0,0,0,1)}

En este caso se le asigna una sombra de color negro atodos los elementos de texto que estén en la lista, este esel resultado:

Por último vamos a usar una gradiente de fondo sin usarninguna imagen, solamente tenemos que agregar estecodigo

body{ background: -webkit-gradient(linear, left top, leftbottom, color-stop(15%,#f5bd07), color-stop(33%,#fdf402)); background: -webkit-linear-gradient(top, #f5bd0715%,#fdf402 33%); background: linear-gradient(top, #f5bd0715%,#fdf402 33%);

}

Detallar las propiedades y mecánica de las gradientes esalgo extenso y complicado de explicar en este manualsobre aplicaciones móviles, para mantener las cosasprácticas y sencillas se recomienda usar servicios comocolorzilla, que a través de una interfase gráfica genera sinmayor complicación el codigo para mostrar gradientes enCSS.

http://www.colorzilla.com/gradient-editor/

TipografíasLas tipografías han sido un dolor de cabeza histórico paralos desarrolladores de sitios web desde el inicio de lainternet. Afortunadamente CSS3 soluciona de una vez portodas el problema y nos permite utilizar fuentespersonalizadas en nuestras aplicaciones.

Servicios como google fonts nos dan la facilidad deincluir tipografías de uso libre en nuestras aplicaciones

http://www.google.com/webfonts

Google permite que utilicemos cualquiera de sustipografías y nos brinda un código para enlazar eldocumento con sus fuentes online.

Aunque técnicamente es posible utilizar las tipografíasonline de Google, no se recomienda esta técnica. Utilizarcontenidos que requieren conexión a internet no es unapráctica recomendable para aplicaciones móviles ya quelos usuarios no siempre tendrán acceso a internet y porende las tipografías podrían no desplegarse .

Es posible descargar las fuentes de Google Webfonts atraves de la opcion " Download your collection "

Descarga la tipografía y copia los archivos en la carpetadel proyecto PhoneGap, para este ejemplo usaremos lafuente "Della Respira" así que copiamos los archivos en"/fonts/Della_Respira". Dentro de esta carpetaencontraremos un archivo "DellaRespira-Regular.ttf" quees el que contiene la fuente.

El atributo @font-face es el encargado de definir unanueva tipografía y de incluir en el documento.

Para incluir una nueva fuente usamos el atributo "src" paradefinir la ruta al archivo que contiene la tipografía. Elatributo "font-family" define el nombre con el que estanueva tipografía estará disponible dentro de la aplicación.

Así por ejemplo, para que la fuente "Della Respira" queacabamos de descargar se pueda utilizar en nuestraaplicación , agregaremos esta línea al CSS:

@font-face { font-family:DellaRespira; src:url('../fonts/Della_Respira/DellaRespira-Regular.ttf');}

En este caso se define la nueva tipografía "dellaRespira"que se mostrará según los contenidos del archivo"Della_Respira/DellaRespira-Regular.ttf".

Importante observar que el archivo de la tipografíaSIEMPRE debe estar dentro de la carpeta de trabajo delproyecto phonegap y debe accederse a él a través de unenlace relativo tal como el que se usa en el ejemplo.

Ahora que está instalada la nueva tipografía podemosasignarla como una fuente dentro de la aplicación. Incluyeesta nueva línea en el documento CSS:

body{font-family: 'DellaRespira', serif;}

Así se asignará la fuente "DellaRespira" a todo el texto dela aplicación.

Importante señalar que se debe incluir siempre una fuentesegura como segunda opción, en este caso, si la fuentepersonalizada que acabamos de incluir no esta disponibleo no es compatible con el dispositivo o sistema operativoen que se ejecuta, el texto de la aplicación se mostrará con

la tipografía "serif".

TransformacionesCSS3 incluye una nueva gama de propiedades llamadastransformaciones, éstas nos permiten como el nombre lodice, transformar objetos ya definidos y escalarlos,moverlos o girarlos según sea necesario.

Vamos a probar las transformaciones girando un poco laimagen de la aplicación, agrega esta línea al CSS:

img{ -webkit-transform: rotate(-10deg); }

La función rotate() permite rotar un elemento según unvalor definido en grados (representado como "deg" por lapalabra en inglés "degrees").

Otra característica interesante de las transformaciones esque podemos asignar varias al mismo tiempo, para probaresta peculiaridad de las transformaciones reemplaza lalínea anterior por esta otra

img{ -webkit-transform: rotate(-10deg) scale(0.5) }

Ahora la imagen no solo esta rotada, sino que ha sidoescalada a la mitad de su tamaño original:

Si deseas conocer más sobre las transformaciones, la listacompleta de propiedades está disponible en el W3C enesta dirección:

http://www.w3.org/TR/css3-2d-transforms/#transform-functions

Finalmente, nuestra aplicación tiene una mejor apariencia,totalmente personalizada gracias a CSS3 y sin usar clasesni imágenes adicionales.

TransicionesYa hemos usado muchos trucos de CSS3 en este ejemplo,pero aún nos queda un As bajo la manga: las transiciones.

Las transiciones de CSS3 permiten pasar de un estado aotro de manera suave y fluida, en otras palabras, podemoshacer animaciones al cambiar una propiedad de CSS3.

Para habilitar la capacidad de transformación de unelemento es necesario asignar la propiedad de transiciónantes de cualquier transformación, de lo contrario sólocambiará de un estado a otro de manera abrupta, sinninguna animación. Para probar una transición básica pegaeste código en el css del ejemplo:

img{ -webkit-transition: top 1s; }

Esta propiedad define como manejar los cambios queafecten el elemento seleccionado, en este caso , img.

Al elegir una propiedad, en este caso "top", se indica quecualquier cambio en el valor de dicha propiedad serealizará con una transición suave. Si se quisieran afectartodas la propiedades se puede utilizar el valor "all".

El segundo parámetro de la transición define el tiempoque tardará, así, cuando se modifique la propiedad

seleccionada se creará una animación de 1 segundo entreel estado original y el nuevo.

El siguiente ejemplo utiliza una función de javascript paraasignar un nuevo valor a la propiedad "top" de lasimágenes. Para activar la transición. copia este código enel documento HTML al final del código, antes de</body>:

<script>//selecciona los botonesvar lista = document.getElementsByTagName("li");//selecciona la imagenvar imagen = document.getElementsByTagName("img")[0];for( elemento in lista ){ //asigna una conducta para el evento click lista[elemento].onclick = function (elemento){ /// obtiene la posición del elemento clickado var posicionDelTexto = this.offsetTop; // define el offset para ajustar la imagen var offsetDeImagen = imagen.height/2;

// cambia la posición "top" de la imagen imagen.style.top = (posicionDelTexto -offsetDeImagen )+"px"; } }</script>

Al presionar cualquier botón la copa se moverásuavemente por un segundo hasta ubicarse junto al botónactivo.

Prueba eliminar o modificar la propiedad "transition"para ver los efectos en la animación.

Puedes encontrar información detallada y completa sobrelas transiciones en la documentación oficial del W3C

http://www.w3.org/TR/css3-transitions/

Para este punto tienes la información para mejorar laapariencia de tus aplicaciones usando lo último del CSS3incluso creando animaciones y efectos sin usarprogramación.

Sin embargo, es indispensable utilizar javascript paracrear aplicaciones realmente profesionales, incluso paralos ejemplos más simples en este manual hemos utilizadojavascript básico.

En el próximo capítulo revisaremos las ventajas que nosofrece javascript para crear interactividad y en especialpara enriquecer nuestras aplicaciones manipulando lossensores y elementos de hardware del equipo móvil.

JAVASCRIPT

JavaScript es el lenguaje que se encarga de lainteractividad en nuestras aplicaciones. Mientras queHTML provee los datos y CSS se encarga de presentarlos,JavaScript permite manipular los elementos deldocumento, administrar eventos e incluso agregar o quitarelementos ya existentes.

Imagina que una aplicación se desarrolla por capas, elHTML es la capa de datos con toda la información,enlaces e imágenes del documento. CSS es la capaestética, diagramando la información, asignando colores,posiciones y efectos. JavaScript se encarga de la capainteractiva y de acceder los sensores del dispositivomóvil a través de la API de PhoneGap.

En este capítulo se mostrará cómo utilizar JavaScript enaplicaciones PhoneGap con ejemplos básicos y detallandopaso a paso.

Si aún no estás familiarizado con las bases de estelenguaje, dale una visita al centro de documentación deMozilla que tiene excelente referencia y una guíadetallada para aprender JavaScript desde cero.

https://developer.mozilla.org/es/javascript

API de PhoneGapTal como se indicó anteriormente, PhoneGap comunicalas aplicaciones basadas en HTML5 con el dispositivo através del uso de un interface de funciones foráneas queejecuta código nativo a partir de comandos invocados porJavaScript.

A lo largo del libro hemos utilizado varios ejemplos deJavaScript, ahora vamos a detallar cómo acceder la APIde PhoneGap con éste lenguaje. Javascript es el lenguajeque nos permitirá controlar sensores como la cámara,micrófono o GPS del dispositivo móvil

PhoneGap tiene una serie de objetos y clases deJavaScript disponibles para interactuar con los diferentessensores y propiedades del dispositivo móvil. Estasclases a su vez, tienen disponibles métodos para enviar orecibir información del equipo.

Los métodos son un conjunto de comandos o instruccionespredefinidos que realizan una determinada tarea.

-Estructura de los métodos

Debido a que PhoneGap funciona en muchos sistemasoperativos y dispositivos, no siempre se puede contar conla disponibilidad o permisos de acceso a un sensor.Partiendo de esta premisa, en PhoneGap la mayoría de losmétodos fueron planeados para reaccionar en amboscasos: si el sensor está disponible o si hay algúnproblema para leerlo. La estructura en general que tienenestos métodos es:

Metodo( respuestaExitosa , AccionDeError,{opciones} );

Los métodos de PhoneGap generalmente incluyen dosargumentos, en el primer argumento, se debe incluir elnombre de una función. Esta función se ejecutará cuandoel método obtenga exitosamente la información solicitada.

El primer argumento es el más importante de definirporque allí es donde se recibe la respuesta del dispositivoy se puede interactuar con los datos recibidos del sensor.Según el ejemplo, si el método invocado realiza unalectura normal y exitosa, ejecutará la función respuestaExitosa.

El segundo argumento también incluye el nombre de unafunción. Esta función se ejecutará cuando exista algún

problema para obtener los datos. Este argumento esimportante porque no siempre los sensores son accesiblespor varias razones,es posible que el equipo que ejecuta elprograma carezca del sensor solicitado, que el usuario noautorice el acceso o simplemente esté dañado. Esteargumento también recibe datos relativos al error, que lepermite a la aplicación reaccionar según el tipo deproblema.

En el código de ejemplo, si el método no puede leer elsensor indicado, ejecutará la función "AccionDeError" yle enviará los detalles del error encontrado.

El último argumento define los parámetros de lectura delsensor, a diferencia de los anteriores, no recibeinformación sino que la envía. Dependiendo del sensorque se utilice es posible que se necesite configurar endetalle la lectura del hardware, por ejemplo, calibrar lacalidad o tamaño de la imagen capturada por la cámara,definir la exactitud del GPS o el intervalo de tiempo paradetectar la rotación del equipo.

Conociendo las partes de un método regular de PhoneGap,tomemos por ejemplo un llamado al sensor de GPS:

navigator.geolocation.getCurrentPosition (lecturaGPS,errorGPS,{enableHighAccuracy: true});function lecturaGPS(ubicacion){

alert("GPS activado y funcional")}function errorGPS(error){ alert("GPS no disponible")}

En este caso getCurrentPosition es un método denavigator.geolocation. Este método va a conectarse a laAPI de PhoneGap y le solicitará información sobre elsensor de GPS.

Si el dispositivo en el que se ejecuta este código tienesoporte para GPS, el sensor es funcional y el usuarioautoriza compartir su posición, devolverá las coordenadasen que se encuentra ubicado el aparato. En este caso, alser exitosa la llamada se ejecutará la función del primerargumento (lecturaGPS).

La función lecturaGPS recibe un objeto con toda lainformación de respuesta del sensor, este objeto se recibecomo un parámetro en la función. En el caso del ejemplo,el parámetro ubicacion contiene toda la informaciónsobre las coordenadas del equipo.

Si por el contrario, el sensor no esta disponible porcualquier motivo, se ejecutará el segundo argumentoactivando la función de error (errorGPS). Dicha funcióntambién recibe una respuesta con los detalles del error. En

el caso del ejemplo, la función errorGPS puede accederlos datos del error a través del parámetro error.

Finalmente, en algunos métodos se incluye un parámetroadicional que modifica o configura la lectura regular deldispositivo. Por lo general este parámetro adicional estaen formato JSON y puede incluir múltiples indicaciones.En el caso del ejemplo el parámetro enableHighAccuracy:true fuerza al dispositivo a entregar la mayor exactitudposible de sus coordenadas.

En la siguiente sección se revisará con detalle el uso deeste y muchos otros métodos de la API de PhoneGap, porahora el propósito es mostrar un ejemplo del flujo de loseventos y estructura de los métodos de la API dePhoneGap.

Esta estructura se aplicará consistentemente en casi todoslos métodos de la API de PhoneGap y es crucialcomprenderla cabalmente para crear aplicaciones debuena calidad.

jQuery mobilePosiblemente el framework de JavaScript más utilizado enla web es jQuery y tiene su versión adaptada paradispositivos móviles llamado jQuery Mobile.

jQuery Mobile es un plugin del jQuery original y requiereque este último esté instalado previamente para poderfuncionar.

Una vez activo, jQuery Mobile hace dos cosas: primero,optimiza las funciones nativas para mejorar superformance en equipos móviles , segundo, modifica elHTML y genera un layout con una serie de elementosgráficos predefinidos que acelera sustancialmente lavelocidad de producción.

-Instalar jQuery Mobile

Aunque es posible y es una técnica muy común en sitiosweb, instalar jQuery Mobile enlazando directamente a losarchivos almacenados en la nube, se recomiendaampliamente no aplicar esa técnica para aplicacionesPhoneGap.

Muy frecuentemente tu aplicación será utilizada sinninguna conexión a internet o con conexión intermitente. Silos archivos de jQuery están enlazados a documentos en lanube, la aplicación quedaría posiblemente inutilizable.

Para instalar este framework, lo primero que debes haceres descargar jQuery en su página oficial:

http://docs.jQuery.com/Downloading_jQuery#Current_Release

Crea una subcarpeta llamada "js" dentro de tu proyectoPhoneGap y guarda allí el archivo de jQuery.

Una vez descargado jQuery, debes descargar el plugin dejQuery Mobile desde su sitio web oficial:

http://jquerymobile.com/download/

Crea una carpeta con el nombre "jQueryMobile",descomprime el archivo .zip que acabas de descargar ycopia allí todos los archivos que contiene. Al finaldeberías tener una estructura similar a esta:

El nombre de los archivos de jQuery y jQuery Mobilecambia según la versión. Si la versión que descargastetiene otro nombre recuerda hacer los ajustes en el códigodel ejercicio.

Como mencionamos jQuery Mobile cumple dos funciones:optimiza las acciones de jQuery y genera una interfazadaptada para dispositivos móviles, por eso es que esteplugin contiene imágenes y hojas de estilo.

Pongamos manos a la obra con el código y comencemos aconstruir una aplicación con jQuery Mobile. comencemoscon este código base:

Ejercicio 10.1

<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2" /> <title>Ejercicio 10.1</title> <meta charset="utf-8"> <link rel="stylesheet"href="js/jQueryMobile/jQuery.mobile.theme-1.1.0.min.css" /> <script src="js/jQuery-1.7.2.min.js"></script> <script src="js/jQueryMobile/jQuery.mobile-1.1.0.min.js"></script> </head><body> </body></html>

Como se puede observar en negrita agregamos 3 líneas decódigo extra para incluir los archivos descargados. Laprimera incluye la hoja de estilos de jQuery Mobile quese usará para crear las interfaces, la segunda línea incluye

el el framework de jQuery propiamente dicho y la terceraes la que inserta el plugin de jQuery Mobile.

Por ahora el código no muestra ningun elemento en elnavegador, a continuación vamos a explorar cómo crearuna interfaz de usuario con jQuery Mobile.

-Creación de Interfaces

jQuery Mobile nos permite crear interfaces optimizadaspara dispositivos móviles muy rápidamente y conrelativamente poco esfuerzo.

La forma en que trabaja, es reescribiendo el códigooriginal del documento y generando uno nuevo, máscomplejo, según las características y argumentossolicitados.

Una característica interesante de jQuery Mobile es que, adiferencia de un sitio web, que pasa de un documentoHTML a otro para mostrar la información, las páginas o"pantallas" de una aplicación se manejan desde un solodocumento HTML.

Las páginas o "pantallas" están en un único archivo,jQuery Mobile las administra para mostrar sólo la partedel documento correspondiente a cada pantalla mientrasque el resto permanece oculto. De esta forma se acelerasustancialmente la carga de páginas, también permiteadministrar eventos y animaciones entre una pantalla yotra.

jQuery Mobile aprovecha al máximo los nuevoselementos de HTML5 y hace un uso intensivo de losatributos personalizados que se definen con el prefijo"data-"

Por ejemplo "data-role", uno de los atributos más usadosen jQuery Mobile, permite definir el rol a nivel defuncionalidad y apariencia del elemento que lo contiene.Al definir el rol de un elemento, este atributo permitecrear páginas, botones, menús y muchos elementos más.

Al insertar el atributo "data-role" en cualquier tag loconvertimos en un elemento de la interfaz. Sin necesidadagregar ningún código adicional jQuery agrega todos loselementos gráficos, clases y hasta animaciones necesariospara el funcionamiento de ese elemento en particular.

Por ejemplo, para crear una página se utiliza el atributodata-role="page" de esta forma:

<div data-role="page" id="inicio"> Inicio</div>

Cuando jQuery Mobile renderiza la aplicación comprendeque este div debe ser interpretado como una página. Leagrega el código y eventos necesarios para que secomporte y vea como tal.

Usando el mismo principio, vamos a utilizar el atributodata-role="header" para agregar un encabezado a lapágina que acabamos de crear:

<div data-role="page" id="inicio" > <div data-role="header"> <h1> Inicio </h1> </div></div>

Ya tenemos una pagina con un encabezado, fijate que segeneró un fondo negro detrás del texto, en este caso comojQuery detectó que ese elemento era un header yautomáticamente le agregó las imágenes necesarias paraque tenga la apariencia de un encabezado.

Como se mencionó antes, jQuery Mobile encapsula todala aplicación en un solo documento, así que todas las

pantallas deben agregarse en el mismo documento,agreguemos dos pantallas más a esta aplicación:

<div data-role="page" id="pantalla2"> <h1> Pantalla 2 </h1> </div><div data-role="page" id="pantalla3"> <h1> Pantalla 3 </h1></div>

Tenemos tres pantallas pero la aplicación se sigue viendoexactamente igual. Esto porque aun no tenemos ningunaforma de navegar entre ellas, para crear elementos denavegación sólo es necesario agregar un enlace normal deHTML, en este caso vamos a incluirlo en la primerapantalla, al inicio de la aplicación:

<div data-role="page" id="inicio" > <div data-role="header"> <h1> Inicio </h1> </div> <a href="#pantalla2"> Ir a Pantalla 2 </a></div>

Como habrá notado el lector, en el código todas las

pantallas tienen un atributo "id" diferente. Para navegarentre pantallas los enlaces deben usar el nombre del IDagregando el signo "#" al inicio.

El enlace del ejemplo no solo permite ir a la pantalla 2 ,jQuery Mobile automáticamente incluyó una animación detransición para darle una apariencia similar a la de unaaplicación nativa.

Llevemos un poco más lejos el enlace que acabamos decrear y agreguemos el atributo de jQuery Mobile data-role="button" para que este enlace se comporte como unbotón:

<a href="#pantalla2" data-role="button"> Ir a Pantalla2 </a>

Al probar el código anterior se verá algo similar a esto:

¡Mucho mejor, cada vez se ve más similar a unaverdadera aplicación! El siguiente problema es que, enesta aplicación, cuando avanzamos a la siguiente pantalla,no hay forma de regresar.

Para regresar a la página principal, se puede aplicar latécnica anterior de enlazar un link al id de la páginaprincipal, o más sencillo aún, se puede utilizar elatributo data-rel="back" que regresa la aplicación a lapantalla inmediatamente anterior.

<a href="#" data-rel="back" data-role="button" >Regresar </a>

En este punto ya tenemos una aplicación mínima con unanavegación básica y hasta transiciones de pantalla.

Para crear una aplicación más compleja con muchassecciones, es posible que se necesite mostrar estassecciones en forma de lista de enlaces directos a cadasección. Esto lo logramos aplicando el atributo data-role="listview" a cualquier lista regular :

<ul data-role="listview" > <li><a href="#pantalla3"> Pantalla 1</a></li> <li><a href="#pantalla3"> Pantalla 2 </a></li> <li><a href="#pantalla3"> Pantalla 3 </a></li> <li><a href="#pantalla3"> Pantalla 4 </a></li>

<li><a href="#pantalla3"> Pantalla 5 </a></li> <li><a href="#pantalla3"> Pantalla 6 </a></li></ul>

En el código anterior creamos una lista normal de enlaces,pero con el uso de listview se genera un nuevo elementode tipo lista:

Con las listas podemos crear menús extensos que

abarquen múltiples páginas internas. Al igual que en conlos otros elementos de navegación, las transiciones entrepantallas incluyen las animaciones automáticamente.

Por último, vamos a agregar un menú de navegación enesta pantalla. Al igual que con el elemento anterior,utilizamos una lista con enlaces para generar el elemento,pero esta vez se usará el atributo data-role="navbar" paracrear una barra de navegación :

<div data-role="navbar"><ul><li><a href="#pantalla1">Inicio</a></li><li><a href="#pantalla2">Pantalla 2</a></li><li><a href="#pantalla3">Otros</a></li></ul></div>

El siguiente ejercicio integra todos los elementos queexaminamos en una sola aplicación:

Ejercicio 10.2

<!DOCTYPE html>

<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2" /> <title>Ejercicio 10.2</title> <meta charset="utf-8"> <link rel="stylesheet"href="js/jqueryMobile/jquery.mobile.theme-1.1.0.min.css" /> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/jqueryMobile/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page" id="inicio" > <div data-role="header"> <h1> Inicio </h1> </div> <a href="#pantalla2" data-role="button"> Ir aPantalla 2 </a> </div> <div data-role="page" id="pantalla2"> <div data-role="header">

<h1> Pantalla 2 </h1> </div> <a href="#" data-rel="back" data-role="button" > Regresar </a> <ul data-role="listview" > <li><a href="#pantalla3"> Pantalla 1</a></li> <li><a href="#pantalla3"> Pantalla 2 </a></li> <li><a href="#pantalla3"> Pantalla 3 </a></li> <li><a href="#pantalla3"> Pantalla 4 </a></li> <li><a href="#pantalla3"> Pantalla 5 </a></li> <li><a href="#pantalla3"> Pantalla 6 </a></li> </ul> <div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="#pantalla1">Inicio</a></li> <li><a href="#pantalla2">Pantalla2</a></li>

<li><a href="#pantalla3">Otros</a></li> </ul> </div><!-- /navbar --> </div> </div> <div data-role="page" id="pantalla3"> <h1> Pantalla 3 </h1> <a href="#" data-rel="back" data-role="button" > Regresar </a> </div> </body></html>

Pros y contras de jQueryMobileNo hay tecnología perfecta y jQuery no es la excepción.Muchos desarrolladores crean todas sus aplicaciones conesta tecnología mientras que otros la evitan al máximo,todo depende de las preferencias personales.

Aquí una breve lista de ventajas y desventajas dedesarrollar con jQuery Mobile para que puedas tomar lamejor decisión.

Pros:

Desarrollo rápido de interfaces.Sintaxis sencilla.Efectos prediseñados.Manejo de eventos.Baja curva de aprendizaje.

Contras:

Agrega peso extra a la aplicación.Manejo complejo de CSS.Los efectos no funcionan fluidamente en algunosequipos de baja gama.Las aplicaciones más grandes pueden hacer lenta la

carga por trabajar en un solo archivo.Menos control general del código.

jQuery Mobile es una excelente plataforma para comenzara desarrollar, para aplicaciones pequeñas o medianas ypara acelerar tu producción.

Si deseas aprender más sobre este framework puedesencontrar documentación detallada en su sitio oficial

http://jQuerymobile.com/demos/

También existen otros frameworks similares a jQueryMobile como Sencha Touch o DHTMLX touch con unaaproximación similar de desarrollo rápido con elementosprediseñados.

jQuery Mobile y frameworks similares son un paquetecompleto con su propio CSS, elementos gráficos, eventosy métodos, que, aunque ofrecen una gran comodidad, amuchos desarrolladores les gusta tener más control sobresus aplicaciones, vamos a explorar entonces una soluciónpara los que prefieren algo más simple y transparente.

XUIXUIJS es una librería de JavaScript creadaespecíficamente para dispositivos móviles, a diferenciade jQuery Mobile que crea todos los elementos graficos,XUI es una librería completamente minimalista, pensadapara los que se enfocan en la eficiencia y quierenmantener control total sobre los elementos de la interfaz.

Una de las principales ventajas que tiene XUI es tutamaño, apenas 10.4 Kb en su versión reducida(comparado con los (±70kb extra de jQuery Mobile). XUIse adapta perfectamente con PhoneGap, de hecho sucreador, Brian Leroux, es también uno de los principalesdesarrolladores de PhoneGap.

-Instalación

Instalar XUI es sumamente sencillo. Crea una carpeta "js"en tu proyecto PhoneGap y copia allí la versión de XUIcon soporte para webkit que encuentra en el sitio oficial

http://xuijs.com/downloads

La estructura de archivos de una aplicación basada enXUI debería verse similar a esta imagen:

Como muchas otras librerías el nombre del archivocambia según la versión, si el archivo que descargas tieneun nombre distinto recuerda hacer las adaptaciones delcaso.

Para habilitar XUI en un documento solo se necesitainvocarlo como cualquier otro archivo JavaScript, en estecaso sería así:

<script src="js/xui-2.3.2.min.js"> <script>

Para dar un ejemplo de lo sencillo que es utilizar XUIvamos a crear un lector de RSS en menos de 10 líneas de

código.

Partiremos con este código como base:

Ejercicio 10.3

<!doctype html><html><head><title>Ejercicio 10.3</title><script src="js/xui.js"></script></head><body><ul id="contenedor"></ul></body></html>

Este código, apenas tiene una llamada a la librería XUI yuna lista vacía con el id "contenedor".

La primera línea que vamos a agregar escuchara un evento"ready". En XUI este evento se activa en cuanto eldocumento está cargado y listo para ser manipulado.

x$.ready( init );

Como se ve, el método recibe un argumento, cuando seactiva el evento "ready" se invoca una función, en estecaso se activará la función "init"

function init(){x$(document').xhr('http://feeds.feedburner.com/revolucionmobi?format=xml', function() { x$(this.responseXML).find("item title").each(bloque)});}

Dentro de la función incluimos el método xhr que permitellamadas a otros documentos a través de AJAX.

En este caso, el método xhr invocará el URL en el que seencuentra el feed RSS de revolucion.mobi.

Recuerda que si estas trabajando en iOS, tanto esta comocualquier otra aplicación necesita autorización paraacceder dominios externos, tal como se explica en elcapítulo 9 de este manual.

Cuando XUI se logra conectar el archivo externo, activael segundo argumento que, en este caso, está incluidodirectamente como función. La información de respuestaque se recibe, en este caso un documento XML es enviadaautomáticamente como el parámetro "this.responseXML".

En XUI, cualquier elemento que se incluya dentro de x$()será seleccionado y podrá ser manipulado, así que vamosa seleccionar el objeto con la información de respuestapara parsearlo:

x$(this.responseXML)

Una vez seleccionado un elemento, podemos encadenarleotros métodos, acá por ejemplo usamos "find" para queseleccione únicamente los nodos <item> que seencuentren dentro del documento Esto porque según elstandard del RSS cada post del blog que estamosrevisando se incluye en un nodo <item>.

x$(this.responseXML).find("item")

Por último, el resultado de la selección es un array oconjunto de elementos, al final se agrega un últimométodo: "each" este método ejecutará una función porcada elemento del array.

x$(this.responseXML).find("item").each(bloque)

En este caso, la función "bloque" se ejecutará cada vezque XUI encuentre un articulo dentro del documento.

function bloque(element){ var texto = element.getElementsByTagName("title")[0].textContent; var entrada = '<li> ' + texto +' </li>'; x$("#contenedor").html('bottom',entrada);}

En la función bloque se procesa cada entrada del blog, sele extrae la información del título y por último se agregala lista contenedor con el método "html" de XUI queademás tiene una práctica opción para ubicar el texto endiferentes posiciones del nodo seleccionado, en este caso"bottom" agrega una linea al final del texto actual, así lostítulos se irán agregando consecutivamente a la lista.

¡El lector de noticias por RSS ya está listo!

Gracias a XUI, este simple lector de RSS solo necesitó 10líneas de programación y apenas le agrego 10kb extra a laaplicación, no es en vano que esta librería es una de lasfavoritas de muchos desarrolladores PhoneGap, entre loscuales se incluye el autor de este manual. ;)

El código completo, con algo de CSS extra se vería así:

Ejercicio 10.4

<!doctype html><html><head><title>Ejercicio 10.4</title><script src="js/xui-2.3.2.min.js"></script><script>x$.ready(init);function init(){x$(document).xhr('http://feeds.feedburner.com/revolucionmobi?format=xml', function() { x$(this.responseXML).find("item").each(bloque)});}function bloque(element){ var entrada = '<li> <ahref="'+element.getElementsByTagName("link")[0].textContent+'"> ' +element.getElementsByTagName("title")[0].textContent+'</a> </li>'; x$("#contenedor").html('bottom',entrada);}</script><style type="text/css"> ul, body{margin:0; padding:0}

li{ border-bottom: 1px solid #1f3953; font-size: 17px; font-family:Arial; text-shadow:1px 1px 1px #000; list-style-type: none; overflow: hidden; padding: 5px; background-image: -webkit-gradient( linear, leftbottom, left top, color-stop(0.23, rgb(59,109,160)),color-stop(0.71, rgb(93,153,195))); } a{display:block; text-decoration:none; color:#FFF;}</style></head><body><ul id="contenedor"></ul></body></html>

Este sencillo lector se verá así:

Si deseas aprender más sobre el proyecto XUI puedesencontrar documentación en su sitio oficial

www.xuijs.com

Para este punto del libro, ya hemos analizado todas laspartes de una aplicación PhoneGap básica, desde suanatomía hasta los lenguajes que la controlan.

El próximo paso es acceder los sensores del dispositivo yllevar nuestras aplicaciones al siguiente nivel.

En la siguiente sección revisaremos uno por uno losprincipales elementos de la API de PhoneGap y lastécnicas para controlar el hardware del dispositivo móvil.

INFORMACION DELUSUARIO

Acceder la información del dispositivo móvil puede sercrucial para algunas aplicaciones que necesiten unaversión en especial de software, conocer el sistemaoperativo en que se ejecutan o simplemente mostrarinformación del usuario.

Estas capacidades toman particular importancia sitomamos en cuenta que uno de los principales beneficiosde PhoneGap es la capacidad de generar un sólo códigobase que puede funcionar en múltiples plataformas.

Conocer en detalle la información del sistema permitecrear un código adaptable a la plataforma en la quefunciona, ejecutar sólo acciones que le sean compatiblesy evitar cualquier comando que tenga problemas desoporte o compatibilidad.

Con la información del sistema es posible por ejemplomostrar una apariencia gráfica si el equipo usa Android yotra si esta en iPhone, Blackberry o Windows Phoneofreciendo una experiencia más consistente ycontextualizada.

Las propiedades disponibles para acceder la informacióndel dispositivo son:

device.name: obtiene el nombre del dispositivo, enequipos android obtiene el nombre del modelo, enequipos iOS obtiene el nombre asignado por elusuario.device.cordova: muestra el numero de version deCordovadevice.platform: nombre del sistema operativodevice.version: versión del sistema operativodevice.uuid: número de identificación deldispositivo

Mostrar la plataforma delequipoCon la propiedad device.platform podemos conocer cualsistema operativo esta usando el usuario.

Esta propiedad puede ser invocada en cualquier momentoy devuelve una cadena de texto con el nombre del sistemaoperativo en que funciona la aplicación, por ejemplo :"Android" ó "iPhone". En el caso especial de que estapropiedad se invoque desde el simulador de iPhone,device.platform devolverá como resultado la cadena"iPhone Simulator"

En el siguiente ejemplo se utilizará esta propiedad paracargar una hoja de estilos diferente según el sistemaoperativo en que se ejecute la aplicación:

Ejercicio 11.1

<!DOCTYPE html><html><head><title>Ejercicio 11.1</title><meta charset="utf-8">

<script type="text/javascript" charset="utf-8"src="cordova.js"></script><script type="text/javascript"> //Notifica cuando el dispositivo esta listo document.addEventListener("deviceready",onDeviceReady, false); // el dispositivo esta listo function onDeviceReady() { //muestra una ventana con el nombre del sistemaoperativo alert("Estás usando: "+device.platform); var archivoCSS switch(device.platform){ case "iPhone": //muestra una hoja de estilos especificapara iPhone archivoCSS = "css/skin_iPhone.css"; break; case "iPhone Simulator": //el emulador de iphone se muestra comootra plataforma archivoCSS = "css/skin_iPhone.css";; break;

case "Android": //muestra una hoja de estilos especificapara iPhone archivoCSS = "css/skin_Android.css"; break; default: // si no detecta equipo iPhone ni Androidmuestra esta version archivoCSS = "css/skin_Default.css"; break; } var headID =document.getElementsByTagName("head")[0]; var cssNode = document.createElement('link'); cssNode.rel = 'stylesheet'; cssNode.href = archivoCSS; headID.appendChild(cssNode); }</script></head><body></body></html>

Este código le permite a una aplicación 2 diferentesapariencias una para Android y otra para iPhone, ademásincluye una opción especial para mostrar la apariencia deiPhone en caso de que se ejecute desde el simulador deiOS

Mostrar la versión delsistema operativoCon PhoneGap es posible también conocer la versión delsistema operativo del dispositivo. A traves del metododevice.version se puede obtener esta información deversión, algo especialmente útil con sistemas operativoscomo Android que tiene una base de usuarios muy diversay distribuida en muchas diferentes versiones de sistemaoperativo.

El siguiente ejemplo muestra la versión y código delsistema operativo Android del usuario:

Ejercicio 11.2

<!DOCTYPE html><html><head><title>Ejercicio 11.1</title><meta charset="utf-8"><script type="text/javascript" charset="utf-8"src="cordova.js"></script><script> document.addEventListener("deviceready",

onDeviceReady, false); function onDeviceReady(){ /* crea las variables que seran actualizadas segunla informacion del sistema*/ var sistemaOperativo var numeroVersion; if(device.platform == "Android"){ sistemaOperativo = "Android"; switch(device.version){ case "2.1": numeroVersion = "Eclair"; break; case "2.2": numeroVersion = "Froyo"; break; case "2.3": numeroVersion = "Gingerbread"; break; case "3.0": numeroVersion = "Honeycomb"; break; case "4.0": numeroVersion = "Ice CreamSandwich";

break; case "4.1": numeroVersion = "Jelly Bean"; break; } }else if(device.platform == "iPhone" ||device.platform == "iPhone Simulator" ){ sistemaOperativo = "iOS"; numeroVersion = device.version; } /*selecciona el div "informacion" y le asignacontenido */ document.getElementById("informacion").innerHTML="Estás usando: "+sistemaOperativo + " con la version:" + numeroVersion ; }</script></head><body> <h1 id="informacion"></h1></body></html>

Identificación de equipos yconsideraciones deprivacidadEl UUID ( Universally Unique Identifier ) es unidentificador del dispositivo que se usa para reconoceruna unidad específica, es similar al concepto de númerode serie del equipo o el MAC address de una terminal dered. En teoría, el UUID es un identificador único, aunquesegún la plataforma el tipo de identificación varía.

En el caso de Android, se usa como identificación unaintegral aleatoria de muy baja probabilidad de repetición,más no necesariamente única.

Los equipos iOS crean un UUID único a partir de unnúmero basado en algunos elementos de hardware deldispositivo.

En los equipos con Blackberry OS el identificador es elnúmero de PIN, mientras que los aparatos con WindowsPhone crean un hash basado en el dispositivo+usuario

El siguiente ejemplo muestra el número UUID de undispositivo:

Ejercicio 11.3

<!DOCTYPE html><html><head><title>Ejercicio 11.3</title><meta charset="utf-8"><script type="text/javascript" charset="utf-8"src="cordova.js"></script><script type="text/javascript" charset="utf-8"> //Notifica cuando el dispositivo esta listo document.addEventListener("deviceready",onDeviceReady, false); // el dispositivo esta listo function onDeviceReady() { /// obtiene el numero de identificacion var identificacion = device.uuid //selecciona el elemento con el ID"informacion" y muestra los datos document.getElementById("informacion").innerHTML= "El UUID de este equipo es: <br>"+identificacion }</script>

</head><body> <p id="informacion"> </p></body></html>

La aplicación resultante va a mostrar la cadena deidentificación propia del sistema operativo en el que seejecute, similar al que se muestra en la imagen:

Al momento de escribir este manual las aplicaciones queutilizan esta propiedad para identificar usuarios tienenaltas probabilidades de rechazadas en la appstore deApple debido a problemas de privacidad. Para garantizarla aprobación de tu aplicación se recomienda usar conprecaución esta propiedad o mejor, aun no utilizarla si noes realmente necesario.

NOTIFICACIONES

En muchas ocasiones nuestras aplicaciones necesitaránenviar alertas al usuario o consultarle su aprobación paraalgún efecto en el sistema, PhoneGap utiliza lasnotificaciones nativas del sistema para enviar alertas,crear diálogos de confirmación, sonar timbres o utilizar elvibrador del dispositivo

Enviar alertasJavaScript , por defecto tiene una alerta básica quemuestra un mensaje al usuario, esta alerta se invoca con elmétodo alert() y es compatible con cualquier dispositivomóvil.

En el siguiente ejemplo se muestra una alerta básica deJavaScript

Ejercicio 12.1

<!DOCTYPE html><html><head><title>Ejercicio 12.1</title><meta charset="utf-8"><script type="text/javascript" charset="utf-8"src="cordova.js"></script><script type="text/javascript"> //muestra una alerta basica function mostrarAlerta() { alert("alerta básica"); return false;

} </script> </head><body> <button onclick="mostrarAlerta();">Mostraralerta</button></body></html>

El ejemplo anterior vincula el evento onClick con lafunción mostrarAlert() que, en este caso, despliega laalerta usando el comando alert()de JavaScript

Esta alerta, aunque útil, no nos deja mucho control sobreel mensaje, solamente podemos mostrar el texto central dela alerta, el resto de elementos no esta en nuestras manos.

Es posible mostrar ventanas más personalizadas usando laAPI de Phonegap a través del métodonavigator.notification.alert() que permite personalizar loselementos del pop up.

Vamos a modificar la función mostrarAlerta() para que

muestre este nuevo tipo de alerta, reemplaza el codigo dela función aterior por este otro:

function mostrarAlerta() {navigator.notification.alert('Esta es una alerta dePhoneGap', null,'Mi aplicacion', 'Aceptar');}

El método navigator.notification.alert usa nuevosparámetros. El primero define el mensaje de la alertaigual que el método básico, el segundo parámetro permiteactivar una acción luego de que se presiona el botónaceptar, en este caso no es necesario este proceso así quese define como null. El tercer parámetro define el textodel título y el último parámetro muestra el texto del botón.

Ahora la ventana de alerta muestra un texto totalmentepersonalizado:

También es posible crear diálogos de confirmaciónusando el método notification.confirm que funciona muysimilar al anterior:

navigator.notification.confirm('Desea aceptar lascondiciones?', respuesta,'Mi aplicacion','Aceptar,Rechazar');

Al igual que la alerta, el diálogo de confirmación de

PhoneGap tiene 4 parámetros, en el caso anterior dejamosel segundo parámetro en "null". Esta vez se incluye unafunción "respuesta" que se activará cuando se presionealgún botón del diálogo.

Otro cambio que se incluye en las confirmaciones en elúltimo parámetro en vez de poner el nombre del botón,incluye el nombre que tendrán los diferentes botones,separados por coma. Aunque poco frecuente usar más de 2valores, es posible agregar más elementos a esta últimaopción, cada palabra separada por coma se convertirá enun botón.

Cuando el usuario presione algún botón de la alerta, seactivará la función respuesta(), cada uno de los botonesinternos tiene asignado automáticamente un número segúnsu orden, así, en este ejemplo "aceptar" devuelve un valorde 1 y "rechazar" un valor de 2. Veamos como la funciónrespuesta() procesa estos valores:

function respuesta(boton) { if(boton == 1){ alert("has aceptado las condiciones") }else if( boton == 2){ alert( "no aceptas las condiciones" ) } }

Gracias a que la función respuesta()se ejecuta únicamentecuando el usuario presiona un botón de la alerta y tiene lacapacidad de reaccionar según esta respuesta, es posibleutilizar este tipo de alertas para crear aplicaciones mássofisticadas que sólo ejecuten acciones cuando el usuariolo autorice explicitamente.

En el siguiente ejemplo se muestran los 3 tipos diferentesde alertas en acción:

Ejercicio 12.2

<!DOCTYPE html><html><head><title>Ejercicio 12.1</title><meta charset="utf-8"><script type="text/javascript" charset="utf-8"src="cordova.js"></script><script type="text/javascript"> //muestra una alerta básica function mostrarAlerta1() { alert("alerta básica"); return false; }

//muestra una alerta personalizada function mostrarAlerta2() { navigator.notification.alert('Esta es una alertade PhoneGap', null,'Mi aplicacion', 'Aceptar'); } // muestra un diálogo de confirmación function mostrarAlerta3() { navigator.notification.confirm('Desea aceptarlas condiciones?', respuesta,'Mi aplicacion','Aceptar,Rechazar'); } // reacciona según la respuesta del diálogo deconfirmación function respuesta(boton) { if(boton == 1){ alert("has aceptado las condiciones :)") }else if( boton == 2){ alert( "no aceptas las condiciones :(" ) } }</script></head><body>

<button onclick="mostrarAlerta1();">Mostrar alertabasica</button> <br><button onclick="mostrarAlerta2();">Mostrar alertapersonalizada</button><br><button onclick="mostrarAlerta3();">Mostrar dialogode confirmacion</button></body></html>

Alertas con sonidoEl smartphone es un equipo que interactúa con nuestrossentidos y no todas las alertas tienen que ser de tipovisual, también es posible enviar sonidos al usuario paraalertarle aunque no tenga el equipo a su alcance visual,para este tipo de alertas PhoneGap tiene el métodonotification.beep()

El siguiente ejemplo reproduce un sonido de alerta alpresionar un boton

Ejercicio 12.3

<!DOCTYPE html><html><head><title>Ejercicio 12.3</title><meta charset="utf-8"><script type="text/javascript" charset="utf-8"src="cordova.js"></script><script type="text/javascript"> function reproducirSonido(cantidad) { navigator.notification.beep(cantidad); }

</script></head><body> <button onclick="reproducirSonido(3);">Activaralerta</button></body></html>

Como se observa en el ejemplo, se ha incluido un valor de3 como parámetro en el llamado a la funciónreproducirSonido() , este valor determina la cantidad deveces que sonará la alarma.

En los equipos iPhone la alerta de sonido no tiene unarchivo de audio predeterminado, así que es necesarioque se incluya un archivo de audio de menos de 30segundos con el nombre beep.wav en la raíz del proyecto(/www).

VibradorLa mayoría de los dispositivos moviles tienen la opciónde vibrar para que sean más sencillos de detectar losmensajes aunque el ruido del entorno pueda afectar o encasos en los que el usuario no quiere que se escuchenestas alertas de sonido. Para enviar este tipo de mensajestenemos el método vibrate() que recibe como parámetro eltiempo que se desea que tarde la vibración del equipo,este parámetro se define en milisegundos, así que parahacer por ejemplo que el vibrador se active por 2segundos se debe asignar un valor de 2000 milisegundos.

El siguiente ejemplo activa el vibrador al presionar unbotón

Ejercicio 12.4

<!DOCTYPE html><html><head><title>Ejercicio 12.4</title><meta charset="utf-8"><script type="text/javascript" charset="utf-8"src="cordova.js"></script><script type="text/javascript">

function vibrar() { navigator.notification.vibrate(2000); }</script> </head><body> <button onclick="vibrar();">Vibrar!</button></body></html>

En los equipos iPhone se ignora el parámetro de tiempo yla alerta se ejecuta por un tiempo predefinido por elsistema.

DETECTAR CONEXION

En el mundo de los dispositivos móviles, uno de los temasmás importantes es el ancho de banda. Aunque en algunospaíses las conexiones de estos dispositivos tienencapacidad de descarga ilimitada de datos, la mayoría deproveedores del mundo tiene restricciones de velocidad ytráfico. En algunos casos cuando el usuario se excede deltráfico base establecido en su plan pueden aplicar cobrosadicionales por lo que la descarga de contenidosadicionales puede tener un impacto económico para elusuario.

Por regla general se recomienda siempre hacer un usoresponsable de la descarga de datos del usuario paraevitarle, en la medida de lo posible, efectos negativos ensu facturación.

Detectar la presencia y tipo de conexión del usuario puedeser un factor crucial en una aplicacion, ademas del yamencionado impacto en la facturación, en la mayoría delos casos la conexión a internet no es constante. Por lanaturaleza móvil de estos dispositivos los usuariosexperimentan cambios constantes en su conexión desde eltipo de conexión a la ausencia total de ella. Por eso es quePhoneGap incluye un elemento en su API que no solo

detecta si hay conexión, también el tipo. De esta forma esposible adaptar la experiencia a las condiciones delusuario.

Detección de conexiónDetectar la conexión es muy simple a través de lapropiedad network.connection.type que devuelve unaintegral de acuerdo al tipo de conexión que tiene elusuario. Los tipos de enlace a internet que detectaPhoneGap son

UNKNOWN : el sistema no puede determinar el tipode conexión.ETHERNET : el equipo está conectado a una redlocal o alámbrica.WIFI : el equipo está conectado a una redinalámbrica.CELL_2G : El equipo está usando una red de datoscelular de tipo 2G, ( GPRS / EDGE).CELL_3G : El equipo está usando una red de datoscelular de tipo 3G.CELL_4G : El equipo está usando una red de datoscelular de tipo 4G.NONE : Ninguna conexión a internet detectada.

El siguiente ejemplo detecta la presencia de una conexióna internet y muestra el tipo de la misma:

Ejercicio 13.1

<!DOCTYPE html><html><head><title>Ejercicio 13.1</title><meta charset="utf-8"><script type="text/javascript" charset="utf-8"src="cordova.js"></script><script type="text/javascript"> function mostrarConeccion() { var networkState =navigator.network.connection.type; if (networkState == Connection.NONE){ alert("no hay conexion a internet") }else{ alert("Dispositivo conectado a internetusando: "+networkState) } }</script></head><body> <button onclick="mostrarConeccion();">Mostrar

conexion</button></body></html>

Gracias a que es posible detectar no sólo la presencia dela conexión a internet sino el tipo, podemos crearaplicaciones que por ejemplo descarguen imágenes debaja resolución cuando tienen conexión móvil ydescarguen una versión de alta resolución si la conexiónes de mejor calidad como en el caso de 4G o WI-FI

El siguiente ejemplo adapta sus contenidos según lacalidad de la conexión, si tiene acceso por WI-FI muestrauna imagen de alta resolución (500kb) por el contrario siusa una conexión a red de datos móvil, muestra unaimagen de baja resolución (28kb):

Ejercicio 13.2

<!DOCTYPE html><html><head><title>Ejercicio 13.2</title><meta charset="utf-8"><script type="text/javascript" charset="utf-8"src="cordova.js"></script>

<script type="text/javascript" charset="utf-8"> function mostrarConeccion() { var networkState =navigator.network.connection.type; if (networkState == Connection.NONE){ alert("no hay conexion a internet") }else{ if(networkState == Connection.WIFI){ // si la conexión es Wi-Fi carga una imagende alta calidad(500kb) document.getElementById("imagen").setAttribute("src","tokioHD.jpg") }else{ // si la conexión es por red celular cargauna imagen de baja calidad(28kb) document.getElementById("imagen").setAttribute("src","tokioLD.jpg") } } }</script></head>

<body> <div> <img id="imagen"/> </div> <button onclick="mostrarConeccion();">Mostrarimagen segun conexion</button></body></html>

El resultado final muestra imágenes de diferente escala yresolución según el ancho de banda del dispositivo.

El acelerómetro es el sensor encargado de detectar elmovimiento del dispositivo, estos sensores son cada vezmás populares y permiten aumentar el nivel de interaccióndel usuario a través de la detección de cualquiermovimiento en el espacio del equipo.

El acelerómetro detecta movimientos en 3 dimensiones y através de la información que se obtiene del movimiento desus ejes se puede determinar la dirección, distancia yvelocidad en que se mueve el dispositivo.

Para detectar los movimientos del dispositivo enPhoneGap tenemos el objeto accelerometer. Este objeto brinda las herramientas para monitorear hasta el másmínimo movimiento del equipo, vamos a revisar una a unasus capacidades:

Detectar posición:Como se detalla en el el capítulo de JavaScript de estelibro, este método sigue el patrón básico de los métodosde PhoneGap, así por ejemplo para obtener el unmovimiento se utiliza

navigator.accelerometer.getCurrentAcceleration(lecturaExitosa,manejoDeError);

Como en la mayoria de los métodos de la API , el primerargumento es el nombre de la función que se activa cuandola lectura es exitosa y el segundo se activa si ocurre algúnerror.

El método getCurrentAcceleration obtendrá una lectura dela posición tridimensional del equipo y devuelve estainformación en forma de coordenadas X,Y, Z. El siguienteejemplo despliega la posición del dispositivo usando elacelerómetro:

Ejercicio 14.1

<!DOCTYPE html><html><head>

<title>Ejercicio 14.1</title><meta charset="utf-8"><script type="text/javascript" charset="utf-8"src="cordova.js"></script><script type="text/javascript"> function mostrarPosicion(){ navigator.accelerometer.getCurrentAcceleration(lecturaExitosa,manejoDeError); } function lecturaExitosa(acelerometro) { var texto = " Posición X: "+ acelerometro.x + "<br>"; texto += " Posición Y: "+ acelerometro.y + "<br>"; texto += " Posición Z: "+ acelerometro.z + "<br>"; document.getElementById("resultados").innerHTML =texto; } function manejoDeError(){ // maneja el error de lectura alert("No se puede leer el acelerometro"); }

</script></head><body> <h1>Posicion del dispositivo</h1> <div id="resultados"></div> <button onclick="mostrarPosicion();">MostrarPosicion</button> </div></body></html>

Este método permite leer la posición del dispositivo cadavez que se invoque, en este caso, al presionar el botón.Precisamente como sólo permite saber la posición quetiene el dispositivo en un momento específico,es comotomar una fotografía de la posición estática. En algunoscasos esta lectura puede ser insuficiente, es posible que senecesite leer constantemente la posición del equipo paraque las aplicaciones reacciones con los movimientos delusuario.

Detección de movimientoAlgunas aplicaciones y juegos necesitan ir más allá de lasimple posición del dispositivo e interactuar con elmovimiento conforme ocurre, para estas aplicacionesexiste el método accelerometer.watchAcceleration , que adiferencia de getCurrentAcceleration puede realizarmúltiples llamadas al acelerómetro y rastrear con bastanteexactitud el más mínimo movimiento del dispositivo.

Este método trabaja muy similar agetCurrentAcceleration , pero con algunas diferencias:

navigator.accelerometer.watchAcceleration(lecturaExitosa,manejoDeError, {frequency:3000} );

Como puede observarse, igual que en los ejemplosanalizados previamente se incluyen dos argumentos: unollama a una función en caso de éxito y el otro se activa encaso de error, sin embargo incluye un tercer argumentoque define las opciones en que se va a realizar la lecturadel sensor, este argumento es crucial para detectarmovimientos porque permite definir la frecuencia con laque se van a monitorear los cambios.

El valor de la frecuencia se define en milisegundos. En elsiguiente ejemplo se muestra el movimiento del

dispositivo actualizado con una frecuencia de 3 segundos.

Ejercicio 14.2

<!DOCTYPE html><html><head><title>Ejercicio 14.2</title><meta charset="utf-8"><script type="text/javascript" charset="utf-8"src="cordova.js"></script><script type="text/javascript" > var lecturaAccelerometro function mostrarPosicion(){ lecturaAccelerometro =navigator.accelerometer.watchAcceleration(lecturaExitosa,manejoDeError, {frequency:3000} ); } function lecturaExitosa(acelerometro) { var texto = " Posición X: "+ acelerometro.x +"<br>"; texto += " Posición Y: "+ acelerometro.y + "<br>"; texto += " Posición Z: "+ acelerometro.z + "<br>";

document.getElementById("resultados").innerHTML =texto; } function manejoDeError(){ // maneja el error de lectura alert("No se puede leer el acelerometro"); }</script></head><body> <h1>Deteccion de Movimientos</h1> <div id="resultados"></div> <button onclick="mostrarPosicion()">MostrarMovimientos</button> </div></body></html>

La detección de movimientos a través del acelerómetro, aligual que todos los métodos que hacen una lecturaconstante de los sensores, tiene un impacto directo sobreel dispositivo tanto a nivel de batería como deprocesador, según el sistema operativo en que se ejecute,existe un número máximo de llamadas permitidas por

minuto, esto con el fin de mantener un uso racional de losrecursos del sistema, se recomienda realizar la menorcantidad de llamadas posible, entre menos llamadas sehagan mejor trabajará tu aplicación y menos bateríaconsume.

Dicho esto, el ejemplo anterior tiene un serio problemaque podría afectar el rendimiento de la aplicación.Cuando se invoca el método watchAcceleration ,comienza a utilizar recursos del sistema y si no se detieneeste proceso puede llegar a dejar al usuario sin bateria,por eso es importante que SIEMPRE que se active estemétodo se incluye una opción para detenerlo, ya se a porparte del usuario o automáticamente, una vez que seobtenga el resultado deseado.

Para detener el rastreo de movimientos se debe utilizar elsiguiente comando:

navigator.accelerometer.clearWatch( identificador )

Este método recibe como argumento el identificador quese le asigne a accelerometer.watchAcceleration para asídetener el proceso de lectura del acelerómetro.

En el siguiente ejemplo muestra la versión correcta delejercicio anterior utilizando el identificador para elproceso de lectura del acelerómetro y una opción para que

el usuario pueda detener dicho proceso.

Ejercicio 14.3

<!DOCTYPE html><html><head><title>Ejercicio 14.3</title><meta charset="utf-8"><script type="text/javascript" charset="utf-8"src="cordova.js"></script><script type="text/javascript"> /// identificador del proceso de lectura var lecturaAccelerometro function mostrarPosicion(){ lecturaAccelerometro =navigator.accelerometer.watchAcceleration(lecturaExitosa,manejoDeError, {frequency:3000} ); } function lecturaExitosa(acelerometro) { var texto = " Posición X: "+ acelerometro.x + "<br>"; texto += " Posición Y: "+ acelerometro.y + "<br>"; texto += " Posición Z: "+ acelerometro.z + "

<br>"; document.getElementById("resultados").innerHTML =texto; } function manejoDeError(){ // maneja el error de lectura alert("No se puede leer el acelerometro"); } function detenerLectura(){ navigator.accelerometer.clearWatch(lecturaAccelerometro); lecturaAccelerometro = null; } </script></head><body> <h1>Deteccion de Movimientos</h1> <div id="resultados"></div> <button onclick="mostrarPosicion()">MostrarMovimientos</button> <button onclick="detenerLectura()">DetenerLectura</button> </div>

</body></html>

BRUJULA

La brújula de un dispositivo móvil funciona de manerasimilar a una brújula regular: mide la orientación deldispositivo con respecto al norte. En PhoneGap el objetocompass es el que contiene los métodos de acceso a labrújula incorporada en el dispositivo.

El método para leer información de la brújula es muysimilar al del acelerómetro que estudiamos en el capítuloanterior:

navigator.compass.getCurrentHeading(lecturaExitosa,manejoDeError);

Como se puede observar utiliza también dos argumentosque invocan funciones, el primero se activa cuando lalectura es exitosa, el segundo si hay un error pararealizarla.

El resultado de la lectura de la brújula devuelve un objetocon información sobre la rotación del dispositivo conrespecto al norte magnético, esta respuesta esrepresentada con un número en grados que van del 0 all359.99 según la orientación del dispositivo al momento dela lectura.

Los valores que se obtienen al leer la brújula son

magneticHeading: Medida en grados relativa alnorte magnético.trueHeading: Medida en grados relativa al NortegeográficoheadingAccuracy: la desviación en grados entre elnorte magnético reportado y el norte geográfico.timestamp: el momento en que fue tomada la lectura.

Detección de OrientaciónEl proceso más básico que puede realizar la API dePhoneGap es leer la orientación actual del equipo conrespecto al norte. Por regla general se toma como punto dereferencia la parte superior del dispositivo.

El siguiente ejemplo muestra la orientación actual deldispositivo usando el método getCurrentHeading():

Ejercicio 15.1

<!DOCTYPE html><html><head><title>Ejercicio 15.1</title><meta charset="utf-8"><script type="text/javascript" charset="utf-8"src="cordova.js"></script><script type="text/javascript" > var lectura function mostrarOrientacion(){ navigator.compass.getCurrentHeading(lecturaExitosa,error);

} function lecturaExitosa(orientacion) { document.getElementById("resultados").innerHTML= " Orientacion: " + orientacion.magneticHeading + "Grados" } function error(){ alert("No es posible leer la brujula") }</script></head><body> <h1>Orientacion del dispositivo</h1> <div id="resultados"></div> <button onclick="mostrarOrientacion();">MostrarOrientacion</button></body></html>

El resultado de esta aplicación es similar a este:

El número que muestra esta aplicación se obtiene delvalor que contiene heading.magneticHeading que muestrala desviación en grados que tiene el dispositivo conrespecto al norte magnético, el número 0 representa que eldispositivo está alineado al norte mientras que 180 indicaque el dispositivo apunta al sur.

Es importante aclarar que el norte magnético es diferentedel norte real. El norte magnético se basa en el campomagnético de la tierra y es sujeto a cambios por diversosfactores planetarios. El norte "real" es un punto geográficoestático representado en el mapa.

En los equipos iOS se tiene la opción de elegir cual delos puntos utilizar como diferencia, mientras que en losequipos Android el resultado se obtiene siempre a partirdel norte "magnetico". Para obtener resultados másconsistentes se recomienda utilizar como referencia elelemento heading.magneticHeading que es soportado porambas plataformas.

Los equipos Android por no tener soporte para resolver elnorte "real" tampoco tienen soporte para

headingAccuracy que determina la diferencia entre elnorte magnético y el real.

Lectura de movimientoEn el ejemplo anterior, los datos de la orientación seobtienen al presionar un botón, si la orientación cambia,el sistema no puede saberlo, es necesario que el usuariosolicite activamente la información. Cada vez que sepresione el botón se obtendrá el resultado de la alineaciónen ese momento específico.

Para observar la orientación a lo largo del tiempo yrastrear el movimiento del usuario se utiliza el métodocompass.watchHeading():

navigator.compass.watchHeading(lecturaExitosa, error,{ frequency: 3000 } )

Este método también incluye un tercer argumento quepermite definir la frecuencia de lectura, en este caso lalectura se realizará cada 3 segundos ( 3000 milisegundos )

En el siguiente ejemplo se muestra una lectura de laorientación del dispositivo actualizado cada 3 segundos.

Ejercicio 15.2

<!DOCTYPE html><html>

<head><title>Ejercicio 15.2</title><meta charset="utf-8"><script type="text/javascript" charset="utf-8"src="cordova.js"></script><script type="text/javascript"> var lectura function mostrarOrientacion(){ var lectura =navigator.compass.watchHeading(lecturaExitosa, error,{ frequency: 3000 } ) } function lecturaExitosa(orientacion) { document.getElementById("resultados").innerHTML= " Orientacion: " + orientacion.magneticHeading + "Grados" } function error(){ alert("No es posible leer la brujula") } function detenerLectura(){ navigator.compass.clearWatch(lectura); lectura = null

}</script></head><body> <h1>Orientacion del dispositivo</h1> <div id="resultados"></div> <button onclick="mostrarOrientacion();">MostrarOrientacion</button> <button onclick="detenerLectura();">DetenerRastreo</button></body></html>

La diferencia central de este ejemplo con respecto alanterior es que una vez que se activa la lectura, lainformacion sobre la orientacion se actualiza cada 3segundos.

En este ejemplo ejemplo se incluye también el métodonavigator.compass.clearWatch

Este método se utiliza para para detener la petición dedatos a la brújula. Al igual que en el caso delacelerómetro se recomienda que siempre que se invoca elmétodo watchHeading, se debe incluir acompass.clearWatch para hacer un uso eficiente yresponsable de los recursos del sistema.

GEOLOCALIZACION

Uno de lo sensores mas populares en los equipos movileses el GPS . Es este sensor el que permite que los usuariosubiquen su posición en el mapa, realizar check ins enbares o restaurantes y geoetiqueten sus fotografías. Es muyposible que en el pasado desarrollaras o planeesdesarrollar una aplicación que involucre de alguna manerael Geoposicionamiento. Detectar la ubicación del usuarioes una habilidad indispensable para poderse llamar undesarrollador móvil en estos días.

Los dispositivos moviles tienen muchas formas dedeterminar la ubicación geográfica: a través de GPS,AGPS e identificación a través de IP, no importa elmétodo que utilicen, la API de PhoneGap puede obtenerlas coordenadas del dispositivo e integrarlotransparentemente a cualquier aplicación.

Detectar la ubicación delDispositivoEl método para detectar la ubicación del usuario enPhoneGap funciona igual que el acelerómetro y la brújulaestudiados anteriormente. El código para obtener laposición del usuario es:

geolocation.getCurrentPosition(lecturaExitosa, error)

Como hemos visto en sensores similares el métodogetCurrentPosition hace una llamada al sensor de GPS yutiliza 2 argumentos, donde el primero invoca una funcióncuando la lectura es exitosa y el segundo se ejecutacuando hay un error.

A diferencia del acelerómetro o la brújula, en el caso dela geolocalización, por motivos de privacidad, el usuariodebe aprobar activamente el uso de este sensor.

La primera vez que tu app intente conocer la ubicación delusuario, una diálogo de confirmación similar a esteaparecerá en pantalla.

Esta confirmación se hace en todas las plataformas. Si elusuario decide no darle permisos a la aplicación paraacceder el sensor de geolocalización se interpretara comoun error y activará el argumento correspondiente.

Por este motivo es que definir el argumento para que seactive cuando hay un error en la lectura del GPS se vuelveparticularmente importante en este caso ya que existe laposibilidad que el usuario no quiera compartir suubicación y decida no dar el permiso. La aplicación debeque tener la capacidad de seguir funcional aun si elusuario rechaza el permiso.

Otro punto que cabe mencionar es que este método tieneproblemas para mostrarse correctamente en emuladores de dispositivos Androidd 2.x ( Ecleair, Froyo yGingerbread ), para solucionar este problema solo senecesita agregar un tercer argumento que habilite laopción enableHighAccuracy, de la siguiente forma:

navigator.geolocation.getCurrentPosition(lecturaExitosa,

error,{ enableHighAccuracy: true });

Este argumento fuerza a que la lectura del GPS sea lo másexacta posible y hace que las aplicaciones que usen GPSfuncionen correctamente en cualquier emulador Android.

Al obtener una respuesta del sensor GPS se obtiene unobjeto con múltiples datos sobre la ubicación del usuariocon información relevante no solo sobre la latitud,longitud y altitud, también incluye información sobre elmargen de error de la lectura. La lista completa de loselementos que se reciben con cada lectura es:

timestamp: muestra cuando fue detectada laubicación.coords.latitude: devuelve la latitud de la ubicación,en grados.coords.longitude: devuelve la longitud de laubicación, en grados.coords.accuracy: indica que tan acertada es lalectura de coordenadas con un margen de error enmetros.coords.altitude: muestra la altitud cuando estadisponible.coords.altitudeAccuracy: indica que tan acertadaes la lectura de altitud con un margen de error enmetros.coords.speed: devuelve la velocidad basado en la

lectura anterior, en metros por segundo.coords.heading: regresa el ángulo en grados a partirdel norte.

El siguiente ejemplo muestra la ubicación del equipo alpresionar un botón:

Ejercicio 16.1

<!DOCTYPE html><html><head><title>Ejercicio 16.1</title><meta charset="utf-8"><script type="text/javascript" charset="utf-8"src="cordova.js"></script><script type="text/javascript"> function mostrarUbicacion(){ navigator.geolocation.getCurrentPosition(lecturaExitosa, error,{ enableHighAccuracy: true }); } function lecturaExitosa(posicion) { alert(' tu posicion es: Latitud ' +posicion.coords.latitude+' ' + ' Longitud '+posicion.coords.longitude )

} function error(){ alert('no se donde estas'); }</script></head><body> <h1>Ubicación del dispositivo</h1> <div id="resultados"></div> <button onclick="mostrarUbicacion();">MostrarUbicación</button></body></html>

En este ejemplo, cada vez que presiones el boton "mostrarubicacion" se desplegara una alerta con los datos de tuubicación.

Detectar MovimientoAl igual que con la brújula y el acelerómetro , para elsensor GPS también tenemos la opción de rastrear elmovimiento del usuario a través del métodogeolocation.watchPosition, que es exactamente igual algeolocation.getCurrentPosition visto en el ejemploanterior, con la variante de que este otro método envíainformación de manera periódica.

La frecuencia de lectura se define en el tercer argumento,con un valor definido en milisegundos

navigator.geolocation.watchPosition(lecturaExitosa,error,{ frequency: 3000 });

El GPS es sin duda el sensor que agota más rápidamentela batería del dispositivo móvil. La frecuencia debedefinirse con el mayor intervalo posible, ajusta tusaplicaciones para que hagan lecturas en intervalos de almenos uno o dos minutos. Una frecuencia muy alta puededrenar la batería de cualquier smartphone en minutos.

También, al ser el GPS tan intensivo para la batería delequipo, es absolutamente indispensable que cada vez quese utilice el método watchPosition se incluya una formapara detener el uso del GPS. Para detener la lectura se

utiliza el método :

navigator.geolocation.clearWatch()

Este método recibe como argumento el identificador conel que se creó geolocation.watchPosition y detiene elproceso de lectura

En el siguiente ejemplo se asigna un identificador a lallamada al GPS y permite que el usuario detenga la lecturade GPS.

Ejercicio 16.2

<!DOCTYPE html><html><head><title>Ejercicio 16.2</title><meta charset="utf-8"><script type="text/javascript" charset="utf-8"src="cordova.js"></script><script type="text/javascript"> /// identificador de la llamada GPS var llamada function mostrarUbicacion(){ llamada =

navigator.geolocation.watchPosition(lecturaExitosa,error,{ frequency: 3000 , enableHighAccuracy: true }); } function lecturaExitosa(posicion) { document.getElementById("resultado").innerHTML = 'tu posicion es: Latitud ' + posicion.coords.latitude+' ' +' Longitud '+ posicion.coords.longitude } function error(){ alert('no se donde estas'); } function detenerLectura(){ //detiene cualquier llamada vinculada alidentificador navigator.geolocation.clearWatch(llamada) llamada = null }</script></head><body> <h1>Ubicación del dispositivo</h1> <div id="resultado"></div> <button onclick="mostrarUbicacion();">Mostrar

Ubicación</button> <button onclick="detenerLectura();">Detener Lectura</button></body></html>

Google mapsDurante el desarrollo de este libro varios alumnos yusuarios de revolucion.mobi nos pidieron incluir unejemplo para interactuar con los mapas de Google Mapsa traves de la API de PhoneGap, por este motivo vamos aincluir un ejemplo completo sobre este tema.

Antes de comenzar a crear una aplicación que integreGoogle Maps son necesarios algunos pasos previos quecambian según la plataforma en que se desarrolla.

- Preparacion iOS

Para acceder los archivos de un sitio externo debesconfigurar el acceso a los dominios que usa google Maps.Si estas trabajando con Xcode debes localizar el archivo"Cordoba.plist" que se encuentra en la carpeta"Supporting Files". Busca el apartado "External Hosts" yagrega estas tres direcciones

*.gstatic.com

*.googleapis.com

*.google.com

- Preparacion Android

Si deseas probar tu aplicación en un emulador deAndroid, debes configurar el AVD para simular el sensorGPS. Para activar esta función abrir el AVD manager,seleccionar el dispositivo en el que se va a realizar laprueba y agregarle el soporte para GPS.

Si no estás familiarizado con los detalles de laconfiguración previa, puedes encontrar informacióndetallada en el Capítulo 7 de este libro.

- Crear un mapa básico

El primer paso para crear la aplicación es utilizar unmapa básicoo, que se puede descargar de cualquierejemplo de google maps, en este caso usaremos elejemplo de "mapa simple" de la documentación de GoogleMaps disponible en este URL

https://google-developers.appspot.com/maps/documentation/javascript/examples/map-simple

El codigo del ejemplo de Google es:

<!DOCTYPE html><html><head><title>Google Maps JavaScript API v3 Example: MapSimple</title><meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no"><meta charset="utf-8"><style>html, body, #map_canvas {margin: 0; padding: 0;

height: 100%;}</style><script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script><script>var map;function initialize() {/// define las opciones del mapa (zoom y centrado) var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397,150.644), mapTypeId:google.maps.MapTypeId.ROADMAP }; map = newgoogle.maps.Map(document.getElementById('map_canvas'), mapOptions); } google.maps.event.addDomListener(window,'load', initialize); </script>

</head> <body> <div id="map_canvas"></div> </body></html>

Este codigo ya es perfectamente funcional en PhoneGap yal compilarlo muestra un mapa similar a este:

En el código del ejemplo, la función initialize() es la quecontiene los elementos para desplegar mapa de Google.

La clase google.maps.LatLng() se utiliza en la API degoogle Maps para definir una coordenada en el mapa yrecibe siempre dos valores: latitud y longitud. En esteejemplo, las coordenadas se incluyen manualmente y

pertenecen a un punto de australia cerca de Sydney.

La informacion de estas coordenadas se envia junto conotras opciones como el tipo de mapa y el nivel deacercamiento dentro del objeto mapOptions. Cuando elmapa se despliega toma estas opciones para definir losdetalles del mapa que se muestra en pantalla.

Ahora que conocemos a grandes rasgos los elementos delmapa, vamos a ajustarlo para que se integre con la API dePhoneGap.

- Integracion con PhoneGap

El primer paso para integrar la nueva aplicación esagregar la libreria de PhoneGap

<script type="text/javascript" charset="utf-8"src="cordova.js"></script>

luego es necesario agregar una nueva variable global conel nombre marcador, justo despues de la variable globaldel mapa

var marcador

Vamos a usar esta variable global para crear un marcadorque muestra nuestra posición en el mapa. Para agregar elmarcador incluye este código luego de la creación delmapa

marcador = new google.maps.Marker( {position:latlng, map:map });

Ahora vamos a agregar las funciones que interactuan conla API de PhoneGap del ejercicio 16.2

function mostrarUbicacion(){

navigator.geolocation.getCurrentPosition( lecturaGPS ,errorGPS , {enableHighAccuracy:true}}function errorGPS(){alert(" no puedo encontrarte :(")}

La función lecturaGPS() se encarga de procesar lainformación que se obtiene de la lectura del sensor GPS.

function lecturaGPS(ubicacion){var miubicacion = newgoogle.maps.LatLng(ubicacion.coords.latitude,ubicacion.coords.longitude);map.setCenter(miubicacion)marcador.setPosition(miubicacion)}

En este caso la variable miubicacion crea una nuevacoordenada de google maps usando las coordenadasactuales del dispositivo. Por último, loscomandos map.setCenter y marcador.setPosition centranel mapa y el marcador en la posición actual.

A continuación se muestra el ejemplo completo con loscambios destacados en negrita.

Ejercicio 16.3

<!DOCTYPE html><html><head><style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% }</style><script type="text/javascript" charset="utf-8"src="cordova.js"></script><title>Ejercicio 16.3</title><script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?sensor=true"></script><script type="text/javascript"> var map var marcador function initialize() { var latlng = new google.maps.LatLng(-34.397,150.644); var myOptions = { zoom: 8,

center: latlng, mapTypeId:google.maps.MapTypeId.ROADMAP }; map = newgoogle.maps.Map(document.getElementById("map_canvas"), myOptions); marcador = new google.maps.Marker( { position: latlng, map:map }) } function mostrarUbicacion(){ navigator.geolocation.getCurrentPosition(lecturaGPS , errorGPS , {enableHighAccuracy:true} ) } function lecturaGPS(ubicacion){ var miubicacion = newgoogle.maps.LatLng(ubicacion.coords.latitude,ubicacion.coords.longitude); map.setCenter(miubicacion) marcador.setPosition(miubicacion) } function errorGPS(){

alert(" no puedo encontrarte :(") }</script></head><body onload="initialize()"> <div id="map_canvas" style="width:100%;height:90%"></div> <button onClick="mostrarUbicacion()"> mostrar miubicacion </button></body></html>

El resultado final va a centrar el mapa y el marcador en laubicación en que se encuentre el dispositivo o en la que sele asigne desde el emulador.

El File API es uno de los elementos más poderosos quetiene PhoneGap. Como la mayoría de las APIs de esteframework esta basado en la especificación del W3C yaprovecha el soporte HTML5 que tiene PhoneGap paracrear, manipular y borrar archivos.

Cada sistema operativo maneja ligeramente distinto laubicación de los archivos, la principal diferencia es queen el caso de iOS, los archivos se almacenan en unacarpeta interna del sistema dedicada exclusivamente paracada aplicación (conocida como sandbox), mientras queen el caso de Android vamos a guardar los archivos en elSD card.

Otra diferencia importante es el acceso a los archivos, enel caso de iOS solo tendremos acceso al sandbox, nopodemos salir de ese entorno controlado, en el caso deAndroid podemos acceder cualquier archivo que seencuentre dentro del SDcard del usuario.

Acceder al sistema dearchivosAntes de acceder el sistema debemos solicitar permisos yverificar que la aplicación tenga acceso al sistema, paraesto utilizaremos el método :

window.requestFileSystem

Que solicita acceso al sistema de archivos del dispositivoy retorna un objeto con acceso al sistema. Este métodoutiliza 4 argumentos:

LocalFileSystem que define el tipo de acceso al sistemade archivos, puede ser PERSISTENT si se necesitaacceder al almacenamiento permanente del sistema oTEMPORARY para acceder y crear archivos de tipotemporal. En este libro usaremos la primera opción.

El segundo argumento es el tamaño (en bytes) que necesitala aplicación, por defecto se define en 0.

Los dos últimos argumentos son las funciones de lecturaexitosa y error, en el caso de la primera recibe un objetode tipo filesystem que permite acceso al sistema dearchivos.

Acceso y lectura de CarpetasUna vez garantizado el acceso al sistema de archivos sepueden acceder y manipular las carpetas a través delobjeto DirectoryEntry. El método getDirectory permiteseleccionar un directorio:

fileSystem.root.getDirectory("manualDelGuerreroMovil",{create: true, exclusive: false}, lecturaExitosa, error )

Esta función recibe como primer argumento la ruta ynombre del folder que se desea abrir, el segundoargumento incluye los parámetros en los que se realiza lalectura: la opción "create" definida en true, creará elarchivo en caso de que no exista y el parámetro"exclusive" se debe definir en "false" si existe laposibilidad de crear el archivo.

El acceso y/o creación exitosa de la carpeta activará lafunción lecturaExitosa que recibe como argumento unobjeto de tipo DirectoryEntry que contiene informaciónsobre la carpeta seleccionada.

function lecturaExitosa(carpeta){alert (carpeta.fullPath)}

Una vez que se tiene acceso a la carpeta a través delobjeto DirectoryEntry tenemos acceso a manipular lacarpeta. Por ejemplo podemos acceder la información dela carpeta con el método getMetadata()

function lecturaExitosa(carpeta){ carpeta.getMetadata( procesarMetadata, error )}function procesarMetadata(metadata){ console.log("ultima modificacion: " +metadata.modificationTime);}

Creacion y manipulacion deArchivosPara leer un archivo utilizamos un método muy similar alque se utiliza para las carpetas:

fileSystem.root.getFile("readme.txt", {create: true,exclusive: false}, lecturaExitosa, error );

La diferencia central radica en que aquí se define elnombre del archivo con su respectiva extensión, al igualque en el caso anterior, el parámetro "create" permitecrear el archivo en caso de que no exista.

Al realizar correctamente la lectura, se invoca la funciónlecturaExitosa que recibe como argumento un objeto detipo FileEntry. Al tener acceso a este objeto podemosinvocar los métodos específicos para manipular archivos.Por ejemplo, una vez creado el archivo se puede editar yagregarle texto.

En el siguiente ejemplo se explora un archivo y se edita sucontenido

function onDeviceReady() { //solicita acceso al filesystem

window.requestFileSystem(LocalFileSystem.PERSISTENT,0, accesoFS);} // tenemos acceso al filesystem!function accesoFS(fileSystem) { // busca o crea el directorio fileSystem.root.getFile("manualDelGuerreroMovil.txt",{create: true, exclusive: false},function(myFile){ myFile.createWriter( function(escritor){ escritor.write("hola mundo!!!") }) }, function(){alert("fallo")})}

Una vez que se crea el archivo utilizamos el métodoCreateWriter que crea un objeto de tipo FileWriter, elcual permite escribir dentro del archivo.

Por último para borrar un archivo se utiliza el métodoremove

function onDeviceReady() { //solicita acceso al filesystem window.requestFileSystem(LocalFileSystem.PERSISTENT,0, accesoFS);} // tenemos acceso al filesystemfunction accesoFS(fileSystem) { // busca o crea el directorio fileSystem.root.getFile("manualDelGuerreroMovil.txt",{create: true, exclusive: false},function(myFile){ myFile.remove( function(){ alert("archivo Eliminado") }) }, function(){alert("fallo")}) }

El siguiente ejemplo muestra un uso básico de los treselementos mencionados:

Ejercicio 17.1

<!DOCTYPE html><html><head><script type="text/javascript" charset="utf-8"src="cordova.js"></script><title>Ejercicio 17.1</title><script> document.addEventListener("deviceready",onDeviceReady, false); function onDeviceReady() { //solicita acceso al filesystem window.requestFileSystem(LocalFileSystem.PERSISTENT,0, accesoFS);} // tenemos acceso al filesystem function accesoFS(fileSystem) { // busca o crea el directorio fileSystem.root.getFile("manualDelGuerreroMovil.txt",{create: true, exclusive: false},function(myFile){ myFile.createWriter( function(escritor){

escritor.write("hola mundo!!!") }) }, function(){alert("fallo")}) }} </script></head><body > <button> Crear archivo </button> <button> leer archivo </button> <button> Borrar archivo</button></body></html>

El siguiente ejemplo integra los comandos basicos decreación, lectura, escritura y borrado de un archivo.

Ejercicio 17.2

<!DOCTYPE html><html><head>

<title>Ejercicio 17.1</title><style type="text/css"> button, input{display:block; width:90%; height:35px;margin:10px auto; } input{ text-align:center; font-size:15px; color:#666;}</style><script type="text/javascript" charset="utf-8"src="cordova.js"></script><script> document.addEventListener("deviceready",onDeviceReady, false); var sistemaDeArchivos; var rutaArchivo; function onDeviceReady() { //solicita acceso al filesystem window.requestFileSystem(LocalFileSystem.PERSISTENT,0, accesoFS); } // tenemos acceso al filesystem function accesoFS(fs) { sistemaDeArchivos = fs }

function crearArchivoVacio(){ // crea un archivo vacio sistemaDeArchivos.root.getFile("manualDelGuerreroMovil.txt",{create: true, exclusive: false}, function(_ruta){rutaArchivo = _ruta}) } function escribirEnarchivo(){ /// escribe los datos de la casilla de texto rutaArchivo.createWriter( function(escritor){ contenido = document.getElementById("textoArchivo").value escritor.write(contenido) }) } function leerArchivo(){ var reader = new FileReader(); reader.onloadend = function(evt) { alert(evt.target.result); }; reader.readAsText(rutaArchivo); } function leerInfo(){

rutaArchivo.getMetadata(function(_data){alert("ultima modificacion:"+_data.modificationTime)}) } function borrarArchivo(){ rutaArchivo.remove(); } </script></head><body > <button onclick="crearArchivoVacio()"> Creararchivo </button> <hr> <input type="text" id="textoArchivo" value="Textode prueba" /> <button onclick="escribirEnarchivo()"> Escribir enarchivo </button> <hr> <button onclick=" leerArchivo()"> Leer archivo</button> <hr> <button onclick="leerInfo()"> Leer Metadata</button> <hr>

<button onclick=" borrarArchivo()"> Borrararchivo</button> <hr></body></html>

El resultado final puede crear archivos, escribir textoaleatorio en un archivo, acceder los datos del archivo,mostrar metadatos como la fecha de creación o tamaño ypor último eliminar el archivo creado.

En caso de que desarrolles con iOS y utilices el emulador,puedes encontrar los documentos creados en esta ruta:

/Users/[ tu nombre de usuario]/Library/ApplicationSupport/iPhone Simulator/[ version del sistemaoperativo] /Applications/ [ identificador delemulador ] /Documents

Si desarrollas para Android, puedes ver los archivos conla herramienta DDM que se detalla en el capítulo 22 deeste libro.

ALMACENAMIENTO

El api de permanencia de datos es particularmente útilpara desarrollar aplicaciones. Nos permite almacenar ymanipular información con permanencia dentro delsistema, o sea que no importa que el usuario cierre laaplicación o apague el equipo, los datos permanecerándisponibles para utilizarlos posteriormente.

Gracias a la permanencia de datos podemos desarrollaraplicaciones más sofisticadas, como juegos que puedanrestaurarse donde el usuario los dejo, recordar puntosimportantes en el mapa o simplemente recordar el nombrede usuario con el que se utiliza nuestra aplicación

Phonegap utiliza varias apis del W3C y nos ofrecedistintas formas de almacenar la información según lasnecesidades específicas de cada aplicación. Vamos aanalizar cada una en detalle

Base de datosPhonegap permite crear una base de datos local basada enlos estándares de las bases de datos SQL del W3C.

Para crear una base de datos sólo es necesario invocar elmétodo openDatabase:

window.openDatabase(database_name,database_version, database_displayname,database_size);

Al igual que la mayoría de los métodos de phonegap estetambién utiliza callbacks en sus parámetros. El primerodefine el nombre de la base de datos, el segundo laversión , el tercero el nombre con el que se mostrará y porúltimo el tamaño original de la base.

window.openDatabase("DemoDB", "1.0", "Demo Basede Datos", 200000);

Si la base de datos ya existe el sistema solo la abrirá, sino existe se creará y luego abrirá, en ambos casos elresultado será un objeto de tipo Database, con el quevamos a trabajar.

-Transacciones

La forma primaria en la que vamos a interactuar con labase de datos de phonegap será a través de transacciones,una transacción básicamente es una conexión a la base dedatos mediante la cual podremos enviar comandos.

En PhoneGap las transacciones tienen un accesoexclusivo. eso significa que solo se atiende unatransacción a la vez. Si se ejecutan dos transacciones almismo tiempo, la primera tendrá prioridad y mientras seejecute esta transacción cualquier otra petición devolveráun error.

Las transacciones son un método del objeto Database y sepueden invocar en cualquier momento luego de realizadala conexión:

document.addEventListener("deviceready",onDeviceReady, false); function onDeviceReady() { var db = window.openDatabase("Database","1.0", "Cordova Demo", 200000); db.transaction(populateDB, errorCB, successCB);}

Las transacciones tienen 3 parámetros: los dos primeros

como es usual se activan cuando la transacción es exitosao cuando falla, el tercero se activa una vez que finaliza lainteracción con la base de datos y el sistema está listopara volver a ejecutar una nueva transacción. Este métodoes particularmente útil porque como se expusoanteriormente no es posible realizar más de unatransacción al mismo tiempo, utilizando este parámetropodemos encadenar transacciones:

función ejecutarPrimeraTransaccion(){ db.transaction(populateDB, errorCB,ejecutarSegundaTransaccion);}function ejecutarSegundaTransaccion(){ db.transaction(populateDB, errorCB,ejecutarTerceraTransaccion);}function ejecutarTerceraTransaccion(){ db.transaction(populateDB, errorCB);}

-Queries SQL

Una vez que abrimos una transacción podemos interactuardirectamente con la base de datos a través de queries deSQL.

Los queries son peticiones que se le dan a la base dedatos y devuelven información en las condiciones que losolicitamos. Con los queries podemos guardar, borrar yordenar datos de forma muy rápida y sencilla.

function populateDB(tx) { tx.executeSql('DROP TABLE IF EXISTSDEMO'); tx.executeSql('CREATE TABLE IF NOTEXISTS DEMO (id unique, data)'); tx.executeSql('INSERT INTO DEMO (id, data)VALUES (1, "First row")'); tx.executeSql('INSERT INTO DEMO (id, data)VALUES (2, "Second row")');}

Aunque solo se puede abrir una transacción a la vez, unavez que tengamos acceso, es posible enviar múltiplesqueries a la base de datos.

La información que se almacena en cada transacción es

accesible una vez finalizada la misma. Los queries solopueden leer la información que hay en la base de datos almomento de iniciar la transacción.

Si una transacción hace un query en el que almacena porejemplo el nombre del usuario, este dato no se puedeacceder en la misma transacción, es necesario abrir otratransacción para leer las modificaciones que se hagan enla base de datos.

El siguiente ejemplo realiza las operaciones básicas deSQL mencionadas previamente:

Ejercicio 18.1

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"/> <script type="text/javascript" charset="utf-8"src="cordova.js"></script> <title>Ejercicio 18.1</title><style> button {width: 90%;height: 25px;

margin: 5px auto; } ul{margin:0; padding:0; font-size:12px} li{list-style-type:none; padding:10px 0; border-bottom: solid 1px #ccc }</style> <script>document.addEventListener("deviceready",onDeviceReady, false); var dbfunction onDeviceReady() { db = window.openDatabase("DemoDB", "1.0", "DemoBase de Datos", 200000); db.transaction(poblarBD, errorBD);}function poblarBD(tx) { tx.executeSql('DROP TABLE IF EXISTS libros '); // si no existe la tabla libros, la crea y agrega 2columnas. tx.executeSql('CREATE TABLE IF NOT EXISTSlibros ( titulo, autor)'); // Una vez creada la tabla, inserta entradas en ella tx.executeSql('INSERT INTO libros (titulo, autor)VALUES ("Manual del guerrero movil", "CarlosSolis")');

tx.executeSql('INSERT INTO libros (titulo, autor)VALUES ("Abraham Lincoln: Cazador de Vampiros","Seth Grahame-Smith")'); tx.executeSql('INSERT INTO libros (titulo, autor)VALUES ("Alicia en el pais de las maravillas", "LewisCaroll")');}/*function ejecutarPrimeraTransaccion(){/// al finalizar correctamente esta transaccion se ejecutala segunda transacciondb.transaction(transaccion, errorCB,ejecutarSegundaTransaccion);}function ejecutarSegundaTransaccion(){/// al finalizar correctamente esta transaccion se ejecutala tercera transacciondb.transaction(transaccion, errorCB,ejecutarTerceraTransaccion);}function ejecutarTerceraTransaccion(){/// al finalizar correctamente esta transaccion se detieneel proceso.db.transaction(transaccion, errorCB);}

function transaccion(){/// ejecutar una transaccion}*/function leerBaseDeDatos(){ // crea una nueva transaccion db.transaction(leerBD, errorBD);}function leerBD(tx){ tx.executeSql('SELECT * FROM libros ', [] ,mostrarResultados, errorBD);}function mostrarResultados(tx, resultados){ var lista = "" for(var a=0; a < resultados.rows.length; a++){lista += "<li>"lista += "<b>Titulo:</b> " +resultados.rows.item(a).titulo + "<br>";lista += "<b>Autor:</b> " +resultados.rows.item(a).autor + "<br>";lista += "</li>" } document.getElementById("listaDeLibros").innerHTML= lista

}function agregarItem(){db.transaction(agregarItemSQL, errorBD)}function agregarItemSQL(tx){ tx.executeSql('INSERT INTO libros (titulo, autor)VALUES ("La importancia de llamarse Ernesto","Oscar Wilde")', [] , leerBD, errorBD);}function borarUltimo(){ db.transaction(borrarItemSQL, errorBD)}function borrarItemSQL(tx){ tx.executeSql('DELETE FROM libros WHEREautor="Oscar Wilde"', [] , leerBD, errorBD);}function errorBD(){ alert("un error en la base de datos");} </script></head><body ><button onclick="leerBaseDeDatos()"> leer Base dedatos </button>

<button onclick="agregarItem()"> Insertar nuevolibro</button><br> <button onclick=" borarUltimo()"> Borrar libros deOscar Wilde</button> <h1> Libros </h1> <ul id="listaDeLibros"> </ul></body></html>

Este ejercicio lee y crea una base de datos de libros consus títulos y autores. Puede insertar nuevos registros yborrar en base a una búsqueda.

Si deseas aprender mas sobre la sintaxis de las bases dedatos en PhoneGap, puedes encontrar documentacioncompleta en el sitio oficial de SQLite

LocalStorageAdemás de la base de datos tenemos otras formas dealmacenar información de manera mas sencilla conLocalStorage. Este objeto también es parte del EstándarHTML5 y su función es la de almacenar datos simples conpermanencia de sesión, su funcionamiento es muy similaral de las cookies pero más elegante y eficiente, por lo quelentamente se ha convertido en el reemplazo natural.

LocalStorage es mucho más rápido y menos intensivo parael ordenador y es la opción ideal si lo que queremos esalmacenar datos simples como el nombre del usuario, laúltima vez que se usó la aplicación o un punto en el mapa.Mientras que la base de datos nos funcionará mejor siqueremos almacenar datos más complejos como una listade usuarios o las coordenadas en el mapa de una cadenade tiendas, también debemos preferir la base de datos siqueremos hacer operaciones con esa información comoordenarla alfabéticamente o hacer búsquedas dentro deella.

A diferencia de la base de datos localStorage tiene un usomás sencillo, para almacenar un dato sólo se usa estecomando:

window.localStorage.setItem("key", "value");

Ahora la variable quedará almacenada en el equipo , siqueremos recuperar ese dato se usa el método getItem:

var value = window.localStorage.getItem("key")

y para eliminarlo se usa removeItem()

window.localStorage.removeItem("key");

El siguiente ejemplo muestra cómo manipular informaciónusando localstorage

SessionStrorageEste método es exactamente igual a localStorage con unaúnica diferencia: la información se borra al cerrar laaplicación.

Es particularmente útil para almacenar información entredocumentos pero que es solo útil durante la sesión actual,por ejemplo el identificadores de sesión, passwords ycualquier información sensible.

Para crear un variable de sesión se usa el método

window.sessionStorage.setItem("key", "value");

y al igual que con localstorage están disponibles losmétodos getItem y removeItem para recuperar y borrar lainformación respectivamente.

En el siguiente ejercicio se prueban ambos elementos

Ejercicio 18.2

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-

width"/> <script type="text/javascript" charset="utf-8"src="cordova.js"></script> <title>Ejercicio 18.2</title><style> button {width: 90%;height: 25px;margin: 5px auto; } </style> <script> var normal document.addEventListener("deviceready",onDeviceReady, false); function onDeviceReady(){/// muestra las variables de sesion si existenmostrarVariables(); }function crearLocalStorage(){window.localStorage.setItem("local", "variablelocalstorage activa");mostrarVariables() }

function crearSessionStorage(){window.sessionStorage.setItem("session","variablesession activa");mostrarVariables() } function crearNormal(){normal = "valor normal";mostrarVariables() } function mostrarVariables(){var texto = ""if(window.localStorage.getItem("local")){ texto += "<li>"+window.localStorage.getItem("local") + "</li>"}if( window.sessionStorage.getItem("session")){ texto += "<li>"+window.sessionStorage.getItem("session")+ "</li>"}if(normal){ texto += "<li>"+ normal+ "</li>";}// selecciona la lista del DOM

lista = document.getElementById("listaVariables");lista.innerHTML = texto} </script></head><body ><button onclick="crearLocalStorage()">Crear variablelocalStorage</button><button onclick="crearSessionStorage()">Crearvariable SessionStorage</button><button onclick="crearNormal()">Crear variablenormal</button><a href ="otroDocumento.html"> Abrir otro Documento</a><h1>Variables</h1><ul id="listaVariables"></ul></body></html>

Este ejercicio crea variables de tipo localStorage,sessionStorage y normales.

Las variables localStorage permaneces hasta que seborren o se desinstale la app. Las variablesSessionStorage permanecen mientras la app esté activa,pero desaparecen al cerrar. las variables normalesdesaparecen al cambiar de documento.

CAMARA

Lenta y silenciosamente los móviles reemplazaron a lascámaras digitales, hoy en dia en flickr la mayoría de lasfotografías se toman a través de iPhone más que cualquierotra cámara profesional.

Fuente: http://www.flickr.com/cameras/

Un buen desarrollador móvil debe tener conocimientos

del uso de la cámara, debido a la enorme popularidad dela fotografía en los móviles, existe una gran posibilidadde que la proxima app que desarrolles utilice estacapacidad.

-Como funciona la fotografía en PhoneGap

Al tomar una fotografía usando PhoneGap, una vezcapturada la imagen el dispositivo se enviar los datos devuelta a la aplicación.

Para procesar la imagen tenemos 2 alternativas la primeraes accederla como datos crudos en base 64, la segunda esutilizar el path virtual de la imagen.

Cuando PhoneGap recibe respuesta del dispositivo, envíala respuesta según se indique en forma de datos o de unlink al archivo.

En el siguiente ejemplo se toma una foto al presionar elbotón y muestra el resultado en el tag <img>

Ejercicio 19.1

<!DOCTYPE html><html><head><title>Ejercicio 19.1</title><style> button{width:95%; height:35px;}</style><meta charset="utf-8">

<script type="text/javascript" charset="utf-8"src="cordova.js"></script><script> var pictureSource; // picture source var destinationType; // sets the format of returnedvalue document.addEventListener("deviceready",onDeviceReady,false); function onFail(message) { alert('Error: ' + message); } function tomarFoto(){ navigator.camera.getPicture( mostrarFoto, onFail,{ quality: 50, destinationType:Camera.DestinationType.FILE_URI } ); } function mostrarFoto(param){ var imagen =document.getElementById("imagen") imagen.src = param }</script></head><body>

<button onclick="tomarFoto()"> Tomar Foto </button> <img id="imagen" src="" /> </body></html>

Como se puede apreciar, en este ejemplo el método que seencarga de tomar la fotografía es

navigator.camera.getPicture( mostrarFoto, onFail, {quality: 50, destinationType:Camera.DestinationType.FILE_URI } );

Este método , como muchos otros de phonegap utiliza 3parámetros donde el primero se activa con una lecturaexitosa, el segundo se activa con el error y el tercerodefine las opciones de la fotografía, en la próxima secciónhablaremos en detalles de ellos.

En el presente ejemplo, cuando los datos de la imagenestán disponibles, se activa la función mostrarFoto querecibe como respuesta el URI de la imagen y lo asigna alatributo src de la imagen para desplegarlo

Al momento de tomar una fotografia, los parámetros sonson sumamente importantes y pueden afectar el desempeñode la aplicación, a continuación vamos a revisar los másrelevantes.

Opciones de FotografíaCuando se toma una fotografía en PhoneGap, es posibleconfigurar una serie de elementos que van desde el tamanohasta el formato de la imagen. Las principales elementosde configuración son:

quality : define la calidad de la imagen que setomará, gracias a que los dispositivos actualesmanejan cámaras de buena calidad, se recomiendausar imágenes con calidad 50 o inferior para noafectar el rendimiento ni el espacio disponibles deldispositivo.destinationType : Define la forma de recibir laimagen, como una cadena codificada en base 64(Data_URL) o el URI del archivo (File_URI), porperformance, compatibilidad y sencillez serecomienda usar la segunda opción para manipularlas imágenes. sourceType : Indica la fuente para obtener laimagen, puede ser una fotografía ya almacenada en eldispositivo o una imagen capturada por la cámara. targetWidth: define el ancho de la imagen enpixeles. targetHeight: define el largo de la imagen enpixeles.

El siguiente ejemplo toma una fotografía y la copia en unacarpeta

Ejercicio 19.2

<!DOCTYPE html><html><head><meta charset="utf-8"><script type="text/javascript" charset="utf-8"src="cordova.js"></script><title>Ejercicio 19.2</title><style> body{text-align:center;} button{ width:95%; height:35px} h2{ font-size:14px}</style><script> var pictureSource; // picture source var destinationType; // sets the format of returnedvalue document.addEventListener("deviceready",onDeviceReady,false); var _root var _workingFolder

var _imagePath var _localImagePath function onDeviceReady() { //solicita acceso al filesystem window.requestFileSystem(LocalFileSystem.PERSISTENT,0, accesoFS, error); } // tenemos acceso al filesystem function accesoFS(fileSystem) { // busca o crea el directorio fileSystem.root.getDirectory("manualDelGuerreroMovil",{create: true, exclusive: false},function(myfolder){ /// define el objeto del folder para utilizarloposteriormente _workingFolder = myfolder; alert("folder") }) _root = fileSystem.root } function copiarFoto() {

window.resolveLocalFileSystemURI(_imagePath,function(fileEntry){ fileEntry.copyTo(_workingFolder , "miImagen"+Math.random() +".jpg" ,function(e){ _localImagePath = e; var imagen =document.getElementById("imagenGuardada") imagen.src = _localImagePath.fullPath; } , function(e){ alert(e)}); }, function(e){alert("fallo en la escritura"+e.code)} );} function error(message) { alert('error al tomar la foto : ' + message); } function tomarFoto(){ navigator.camera.getPicture( mostrarFoto,error, { quality : 75, destinationType :Camera.DestinationType.FILE_URI, sourceType :Camera.PictureSourceType.CAMERA, allowEdit :true, encodingType: Camera.EncodingType.JPEG,

targetWidth: 100, targetHeight: 100 } ); } function mostrarFoto(param){ var imagen =document.getElementById("imagen") imagen.src = param; _imagePath = param; }</script></head><body > <button onclick="tomarFoto()"> Tomar Fotografia</button> <h2> Captura:</h2> <img id="imagen" src="" /> <hr> <button onclick="copiarFoto()"> Guardar imagen</button> <h2> Ultima imagen guardada:</h2> <img id="imagenGuardada" src="" /> </body></html>

El resultado de este ejercicio toma fotografias y las copiaen una carpeta del sistema usando el File API que sedetalla en el capitulo 17 de este libro.

Para probar este ejemplo en un emulador android esnecesario habilitar la captura de imágenes desde el AVD,puedes encontrar mas detalles sobre la configuración en elcapitulo 7 de este libro.

Si estás trabajando en iOS deberás probar estos ejemplos

en un equipo real ya que el emulador no tiene soporte parala captura de imágenes.

CONTACTOS

El dispositivo móvil por excelencia es un teléfono celulary una de las principales funciones de este dispositivo eshacer llamadas e interactuar con todos los contactos delusuarios.

PhoneGap tiene acceso a la lista de contactos deldispositivo y permite la manipulación y creación de todosellos. En este capítulo revisaremos las operacionesbásicas para administrar contactos desde una aplicación.

Crear contactosEl método que permite la creación de contactos es contacts.create(). Crear un contacto es bastante simple ,solo es necesario invocar este método:

var nuevoContacto = navigator.contacts.create();

Esta sencilla línea ha creado un objeto de tipo Contact quese puede modificar arbitrariamente. Para agregar nuevosdatos a este contacto tal como números de teléfono,direcciones o imágenes, es necesario agregar nuevosobjetos que , tal como una figura de bloques, se integranpara formar un solo conjunto que compone el contacto.

El contacto que acabamos de crear aún no tiene ningúndato vinculado. Posiblemente el dato más importante deun contacto es el nombre y para agregarle uno esnecesario incluir un nuevo objeto llamadoContactName(), el siguiente código crea el nuevo objetoque contiene los datos del nombre:

var nuevoNombre = new ContactName(); nuevoNombre.givenName = "Darth"; nuevoNombre.familyName = "Vader";

Aunque este objeto tiene datos del nombre del nuevocontacto, estos elementos aún no están vinculados entre sí.

Como se mencionó anteriormente, en PhoneGap uncontacto es un conjunto de bloques. Cada contacto tieneuna serie de contenedores donde podemos almacenarestos bloques o mejor dicho, objetos. En el caso delnombre, el contacto tiene una propiedad llamada namepara incluir en el contacto los valores del nombre queacabamos de crear,se debe asignar el valor del objetocontactName a esta propiedad:

nuevoContacto.name = nuevoNombre

A partir de este momento, el nuevo contacto ya tiene unnombre asociado, sin embargo, el contacto que hemoscreado aun no esta guardado en el sistema, para que estenuevo contacto permanezca en el dispositivo como partede la lista de contactos utilizamos el método save()

nuevoContacto.save()

Al igual que en el caso anterior, es posible agregarmuchos otros elementos a un contacto. Las principalespropiedades que podemos agregarle a un contacto son:

id: identificador global del contacto.

displayName: El nombre para mostrar del contacto,pueden ser apodos o nombres cortos.name: Un objeto que contiene los elementos delnombre del contacto.nickname: El nombre casual o apodo del contactophoneNumbers: Un objeto Array con los números deteléfono del contacto.emails: Un objeto Array con los correos electrónicosdel contacto.addresses: Un objeto Array con las direccionescontacto.ims: un objeto Array con las direcciones demensajería instantánea del contacto.organizations: Un objeto Array con lasorganizaciones a las que pertenece el contacto.birthday: La fecha de cumpleaños del contacto.note: Notas acerca del contacto.photos: Un objeto Array con las fotografías delcontacto.urls: un objeto Array con las direcciones web delcontacto.

El siguiente ejemplo crea un nuevo contacto, le agreganumeros de telefono y hasta una imagen personalizada:

Ejercicio 20.1

<!DOCTYPE html><html><head><meta charset="utf-8"><script type="text/javascript" charset="utf-8"src="cordova.js"></script><title>Ejercicio 20.1</title> <script>function crearContacto(){ var nuevoContacto = navigator.contacts.create(); var nombre = new ContactName(); nombre.givenName = "Darth"; nombre.familyName = "Vader"; nuevoContacto.name = nombre var numerosTelefonicos = []; numerosTelefonicos[0] = newContactField('work', '123-456-7890', false); numerosTelefonicos[1] = newContactField('mobile', '123-456-7890', true); numerosTelefonicos[2] = newContactField('home', '123-456-7890', false); nuevoContacto.phoneNumbers =numerosTelefonicos;

var pics = [] pics[0] = new ContactField('url','http://manualdelguerreromovil.com/assets/darth_vader.jpg',true); nuevoContacto.photos = pics nuevoContacto.save()}</script></head><body > <button onclick="crearContacto()"> crear contactonuevo </button></body></html>

Al hacer clic en el botón "Crear Contacto Nuevo" seagrega un nuevo elemento en la lista de contactos, talcomo se puede ver en la imagen:

Si deseas probar este ejemplo en iOS no olvides agregarel dominio "manualdelguerreromovil.com" en la lista deExternalHosts.

Buscar contactosLos contactos se almacenan en una base de datos local yes posible usar la API de PhoneGap para hacer búsquedasentre los contactos y hasta usar filtros para buscar entrelos diferentes valores de los contactos.

Para hacer una búsqueda entre los contactos PhoneGaptiene el método navigator.contacts.find() que utiliza variosparámetros para hacer búsquedas.

El siguiente código hace una búsqueda entre los contactosy muestra una lista de los que calzan con el resultado:

function verContactos(){ var options = new ContactFindOptions(); options.filter=""; // una cadena vacia muestra todoslos elementos options.multiple=true; // devuelve multiplesresultados filtro= ["name","phoneNumbers"]; // busca entre losnombres y numeros de telefono // encuentra contactos navigator.contacts.find(filtro, lecturaExitosa, false,options);}

En este ejemplo método navigator.contacts.find() seencarga de realizar la búsqueda en los contactos delsistema. El primer parámetro que recibe es un array conlos elementos en los que se va a hacer la busqueda, eneste caso "filtro" indica que la búsqueda se realizará entrevalores de nombres y numeros de telefono.

El segundo y tercer parámetros son los clásicos callbacksque usa PhoneGap para ejecutar la lectura exitosa o errorde lectura. El último parámetro define las opciones delectura, en este caso el valor "múltiple" definido en "true"permite obtener varios contactos en un solo resultado, siesta en "false" se devolverá solo el primer resultado de labúsqueda en que existan otras posibles coincidencias.

Una vez que se realiza exitosamente la lectura, el métododevuelve un array con todos los resultados que coincidencon la búsqueda y pueden procesarse en el método querecibe esos datos

function lecturaExitosa(contacts) {var resultados ="";for (var i=0; i<contacts.length; i++) { resultados += "<li>"+contacts[i].name.givenName + ""+ contacts[i].name.familyName + "</li>"; }

//agrega los resultados forma de listavar lista = document.getElementById("resultados")lista.innerHTML = resultados};

El siguiente ejemplo hace una búsqueda abierta entretodos los contactos del sistema:

Ejemplo 20.2

<!DOCTYPE html><html><head><meta charset="utf-8"><script type="text/javascript" charset="utf-8"src="cordova.js"></script><title>Ejercicio 20.2</title><script> function verContactos(){ var options = new ContactFindOptions();options.filter=""; // una cadena vacia muestra todos loselementosoptions.multiple=true; // devuelve multiplesresultados

filter = ["name","phoneNumbers"]; // busca entre losnombres y numeros de telefono// encuentra contactosnavigator.contacts.find(filter, lecturaExitosa, false,options);} function lecturaExitosa(contacts) {var resultados ="";for (var i=0; i<contacts.length; i++) { resultados += "<li>"+contacts[i].name.givenName + ""+ contacts[i].name.familyName + "</li>"; }//agrega los resultados forma de listavar lista = document.getElementById("resultados")lista.innerHTML = resultados};</script></head><body><button onclick="verContactos()"> Ver contactos</button>

<ul id="resultados"></ul></body></html>

En este caso, el valor options.filter se deja vacíointencionalmente para que la búsqueda devuelva todos loscontactos del sistema. Se invita al lector a probardiferentes búsquedas en su lista de contactos.

La API de contactos de PhoneGap esta basada en elestándar del W3C, puedes encontrar informacióndetallada y actualizada sobre ella en este URL:

http://www.w3.org/TR/2011/WD-contacts-api-20110616/

DEPURACION CONNAVEGADORES

Las aplicaciones PhoneGap son catalogadas comohíbridas porque, aunque en el fondo son aplicacionesnativas, en su parte operativa usan lenguajes propios de laweb como HTML5 y CSS3.

Este tipo de aplicaciones, por su naturaleza dual, puedenprobarse en diferentes entornos. Aunque una aplicaciónPhoneGap se puede depurar en emuladores y dispositivosmoviles, gracias a que su base es HTML5, en la granmayoría de los casos es posible depurar desde unnavegador web.

En este capítulo vamos a examinar las principalesherramientas para probar y depurar aplicaciones desde elbrowser.

WebkitComo se ha mencionado anteriormente, las aplicacionesPhoneGap corren en una instancia del navegador delsistema, en la mayoría de los casos, esta instancia es unaversión de Webkit.

En el mundo de los navegadores móviles, Webkit es unode los pesos pesados de la industria. Los principalessistemas operativos móviles ( Android, iPhone yBlackberry) tienen un punto en común: todos susnavegadores usan como núcleo el motor Webkit.

Webkit es un motor de render y su función es básicamenteconvertir el código HTML, CSS, y Javascript en loselementos gráficos, lógicos e interactivos de undocumento web. Este proyecto de código abierto estárevolucionando la internet y liderando el avance detecnologías como HTML5 y CSS3.

El proyecto Webkit es el motor detrás de todos estospopulares navegadores:

Google ChromeSafariSafari mobileAndroid BrowserBlackberry browser

KonquerorAmazon KindleRockMelt

Cualquiera de todos estos navegadores puede ejecutar elcódigo HTML de tus aplicaciones PhoneGap con apariencia y funcionalidad muy similar a la que tendrá enel dispositivo móvil.

Aunque muchos navegadores están basados en Webkit,pueden usar versiones ligeramente diferentes, estasdiferencias pueden ir desde sutiles cambios en laapariencia de las propiedades CSS hasta el soporte decaracterísticas cruciales de la API de HTML5. Lo mismosucede con las diferentes versiones de sistemasoperativos para móviles.

Seguir la pista de todas estas diferencias es un trabajocomplejo, afortunadamente, el sitio MobileHTML5.comtiene una tabla detallada y permanentemente actualizadacon todas las capacidades soportadas por los principalesnavegadores, clasificadas por sistema operativo yversión.

Fuente: http://mobilehtml5.org/

Si no estas seguro que versión de browser utilizar para tuspruebas, puedes usar Google Chrome ó Safari que usanWebkit y tienen muchas características en común con suscontrapartes móviles.

Para probar las similitudes de Webkit con una aplicaciónmóvil real, prueba abrir este URL en Google Chrome óSafari:

http://goo.gl/T2oCw

Este archivo usa el mismo código que el ejemplo finalusado en el capítulo de CSS3. Aqui una imagencomparativa entre ambas opciones:

A la izquierda se puede ver el ejercicio original, instaladocomo una aplicación en Android, a la derecha se ve elarchivo HTML base de la misma aplicación.

Se puede apreciar el soporte que tiene el navegador para para mostrar todos los efectos, tipografías, animaciones y

selectores CSS3 que se usaron en la aplicación original.

-Herramientas de desarrollo de Safari /Google Chrome

Al utilizar Safari ó Google Chrome podrás depurar tusaplicaciones en una ventana especial con múltiplesherramientas de desarrollo. Para mostrar esta ventana soloes necesario hacer click derecho en cualquier parte de undocumento y seleccionar la opción: "inspeccionarelemento"

La ventana de herramientas de desarrollo permitemonitorear y modificar una serie de elementos de undocumentos, desde sus elementos HTML hasta el códigoJavaScript

Las herramientas disponibles son:

Elementos: Permite ver en detalle cada uno de loselementos que componen un documento. Al seleccionarcualquier elemento, es posible modificar su HTML,Estilos CSS, Eventos y propiedades del DOM ( DocumentObject Model).

Recursos: Muestra recursos internos disponibles para laaplicación como Bases de datos, localStorage ysessionStorage. Esta sección es perfecta para depuraraplicaciones PhoneGap que usan permanencia de datos.

Network: Despliega todos los archivos que descarga eldocumentos y muestra detalles como el tamaño y tiempode carga de cada uno.

Scripts: Muestra todos los archivos de JavaScript que usael documento, es posible inspeccionar el código, detectarerrores y hasta modificar comandos.

Timeline: Permite hacer análisis avanzado de velocidad yrendimiento de la aplicación.

Profiles: Captura y analiza el rendimiento de scripts deJavascript.

Audits: Analiza el documento y ofrece sugerencias deoptimización para reducir la carga y mejorar elrendimiento de la aplicación.

Console: Una consola que permite insertar comandosarbitrarios de JavaScript, detectar errores de javascript einspeccionar objetos y clases.

Finalmente, se incluye una útil casilla de búsqueda paraencontrar elementos correspondientes a la ventana queesté activa.

Todas estas herramientas gratuitas hacen la depuración deaplicaciones PhoneGap mucho más rápida, productiva ydetallada.

El browser convencional es muy útil para depuraraplicaciones, pero tiene una limitación: los eventos ymétodos específicos de la API de PhoneGap no estándisponibles de manera nativa en el navegador. Porejemplo el evento "onDeviceReady" no se activa cuandose hacen pruebas directamente en el browser.

Afortunadamente tenemos un plugin especializado paradesarrollo de aplicaciones PhoneGap que soluciona estalimitación.

RippleRipple es un plugin para Google Chrome que recrea elentorno y sensores de un dispositivo móvil real dentro delnavegador web. Ripple es propiedad de Research inMotion, los creadores de Blackberry y tiene un sistemabastante avanzado de simulación optimizadoespecíficamente para PhoneGap.

Con este plugin y el soporte HTML5 de Google Chromees posible probar, con bastante aproximación a larealidad, prácticamente cualquier aplicación PhoneGap,incluso si usan eventos o sensores del móvil.

-Instalación

Para instalar Ripple solo necesitas descargarlodirectamente desde la appstore de Google Chrome :

https://chrome.google.com/webstore/detail/geelfhphabnejjhdalkjhgipohgpdnoc

Una vez instalado el plugin vas a encontrar el nuevo iconode Ripple

Desde este botón se puede administrar el modo deemulación. Al presionarlo te aparecerá un menú paraactivar o desactivar la emulación con Ripple.

Para entrar en modo de emulación debes escoger laopción "Enable".

Al activarlo por primera vez es posible que aparezca unaventana solicitando escoger una plataforma para emular,puedes escoger las opciones "Apache Cordova" o"PhoneGap".

El modo de emulación tiene permanencia de sesión, lo quesignifica que una vez activado en un documento, cada vezque lo abras en el navegador, Ripple se activaautomáticamente. Para desactivar esta conducta, solodebes presionar el botón de Ripple y seleccionar"Disable".

Toma en cuenta que Ripple no trabaja con archivos enmodo local, sólo puede emular documentos en la redusando el protocolo "http://". Si abres un archivo localusando el protocolo "file://" el plugin no se activará.

Los archivos que se desean emular en Ripple deben estaralmacenados en un servidor externo o en uno interno(localhost). En caso de no tener acceso a un servidorexterno, es posible habilitar un servidor local de manera

rápida y fácil con programas gratuitos como Xampp.

http://www.apachefriends.org/es/xampp.html

-Emulación de aplicaciones

Para probar una aplicación PhoneGap en Ripple, se debenubicar todos los archivos de la aplicación (usualmentecontenidos en la carpeta "www") en un servidor local oexterno.

Solamente es necesario abrir en el navegador el archivo"index.html" ( la base de la aplicación PhoneGap ) yactivar el modo de emulación de Ripple.

Si aún no tienes ninguna aplicación móvil lista, puedesprobar esta aplicación de ejemplo:

http://revolucion.mobi/wp-content/uploads/2011/11/index.html

Prueba cambiar los valores de Geolocalización ypresionar el botón "mostrar mi ubicacion" para ver loscambios.

Una vez activado el emulador, es posible simular elcomportamiento de la aplicación en diferentesplataformas, emular sensores y hasta activar eventospropios de PhoneGap.

Las principales secciones del plugin Ripple son:

Devices: Simula la apariencia, tamaño y resolución de

pantalla de múltiples equipos y sistemas operativosmóviles. También permite cambiar la orientación delequipo en horizontal ó vertical.

Platforms: Muestra las plataformas y versionesdisponibles para emulación. Asegúrate de elegir siemprela opción "Apache Cordova" en su versión más reciente.Aunque también existe la opción "PhoneGap", ésta serefiera a una versión antigua (1.0), previa a la compra deAdobe y lanzamiento del proyecto Apache Cordova.

Information: Despliega información importante sobre eldocumento y modo de emulación actual.

Accelerometer: Muestra un dispositivo virtual en 3D quese puede rotar libremente sobre todos sus ejes. Almanipular el dispositivo virtual se envía directamente lainformación a la aplicación para que reaccione de igualmanera, simulando así el movimiento real de undispositivo. La información detallada se muestra entiempo real para depurar y comprobar los resultados.Incluye también la opción de simular la acción de"sacudida" o "shake".

Device & Network Settings: Simula la presencia y tiposde conexión a internet propios de un dispositivo móvil.

Geo Location: Permite simular y manipular todos losvalores de las coordenadas de geolocalización, desde la

latitud y longitud hasta la velocidad en que se desplaza elmóvil. Incluye además un mapa para ubicar gráficamentelas coordenadas que se introducen.

Events: Activa eventos específicos de PhoneGap comodeviceReady , que señala el momento en que eldispositivo esta listo o backbutton , que se activa cuandose presiona el botón de regresar de algunos dispositivos.Esta característica es particularmente útil porque permiteemular el comportamiento de una aplicación PhoneGap enun dispositivo móvil real.

La depuración en browsers es una gran opción paraacelerar el desarrollo de aplicaciones, sin embargo noimporta lo práctico que sea el uso del browser, esindispensable que antes de publicar una aplicación,realices pruebas en equipos reales o simuladores desistemas operativos móviles. Sólo éstos ofrecen unaversión realista de la aplicación y en especial delcomportamiento que tendrá una vez instalada en suplataforma definitiva.

En el próximo capítulo vamos a aprender cómo depuraraplicaciones desde equipos físicos y sistemas operativosmóviles.

DEPURACION CONEQUIPOS REALES

Antes de publicar una aplicación móvil es crucial realizarpruebas en equipos reales. Las pruebas en emuladores,aunque son muy prácticas para desarrollar rápidamente,no son suficientes. No importa lo bueno que sea unemulador, nunca tendrá las mismas características de unequipo real, algunas de las principales limitaciones de losemuladores son:

Hardware: En emuladores como los que se incluye en elSDK de Android y iPhone, aunque tienen la capacidad deemular un sistema operativo móvil, lo hacen usando elhardware de tu ordenador, que generalmente tiene másrecursos de sistema que un móvil normal.

También puede ocurrir el caso opuesto: el ordenadordonde se ejecuta el emulador puede tener pocos recursosdisponibles, un escenario posible en ordenadores antiguoso aun modernos que estén ejecutando muchos programassimultáneamente al realizar la emulación.

En ambos casos las aplicaciones van a tener undesempeño que no corresponde al que tendrían en un

equipo real.

Sistema operativo: El sistema operativo en el que hacestus pruebas, en ocasiones puede mostrar un resultadoincorrecto, por ejemplo si haces tus pruebas usandoRipple en el sistema operativo windows, encontrarásresultados inconsistentes al ejecutar tus aplicaciones en elequipos iPhone.

Soporte: Algunas características no son soportadas entodos los sistemas operativos ni en todas sus versiones.Aunque una característica funcione en algunos emuladoresy sistemas operativos, sólo al ejecutarlo en un dispositivoreal puedes saber si funciona correctamente.

Por ejemplo, el tag <video> en Android está disponibleen el browser del sistema y algunos emuladores comoRipple, pero no es posible ejecutarlo desde unaaplicación PhoneGap por ausencia de soporte dentro delentorno de la aplicación.

Sensores: Varios sensores son difíciles o imposibles deprobar de manera efectiva en emuladores. Sensores comola cámara del sistema no siempre están soportados en elemulador y es necesario que se ejecuten desde un equiporeal para probarlos.

En otros casos, aunque es posible probar los sensores enel emulador, su respuesta cambia en el dispositivo físico,

por ejemplo al probar elementos de geolocalización, enel mundo real encontrarás grandes diferencias de exactitudy un impacto en la batería del dispositivo que eraimposible de observar desde un emulador.

Ecosistema: Aunque tiene un impacto posiblemente menorque los demás factores, es igual relevante tomar en cuentaque el comportamiento específico de tu aplicación puedeverse influenciado al interactuar con el resto deaplicaciones y servicios de un sistema operativo real. Enalgunos casos, cuando utilizas plugins o componentesadicionales, como Facebook o lectores de códigos QR, esposible que necesites que otras aplicaciones esténinstaladas en el sistema operativo.

Como puedes ver, las herramientas de simulación quehemos estudiado en este libro pueden darte una buena ideade como funciona tu aplicación, pero sólo sonsimulaciones. Tu aplicación funcionará en equipos realesy la prueba de fuego siempre se debe realizar en uno deellos.

A continuación vamos a revisar los requerimientos,configuración y herramientas para instalar y depurar tusaplicaciones en equipos reales.

Depuración en equiposAndroidAndroid es uno de los equipos favoritos de losdesarrolladores porque además de incluir excelentesherramientas de desarrollo, su configuración paradepuración es sencilla, rápida y no requiere de ningunalicencia especial.

-Configuración del Dispositivo

El primer paso para configurar tu equipo Android es abrirel menú de opciones. Desde la pantalla principal delsistema, presiona el botón de menú que se encuentra en laparte inferior de tu equipo.

Este botón despliega un menu con varias opciones paraconfigurar tu dispositivo, presiona la opción "settings" :

En pantalla aparecerá una lista con todos los elementos deajuste del sistema operativo, selecciona la opción"Applications"

Esto mostrará las opciones de configuración para lasaplicaciones. Marca la casilla "Unknown sources" parapermitirle a tu dispositivo instalar aplicaciones desdeotras fuentes distintas a Google Play.

Al marcar esta casilla puede que aparezca una ventana deadvertencia informando sobre los posibles problemas quepuedes tener al habilitar esta opción, presiona aceptar.Toma en cuenta que no debes descargar aplicaciones en tuequipo si no conoces bien su procedencia, de ser posible,instala únicamente tus propias aplicaciones y no bajesnada de tiendas o sitios que no conozcas bien.

A partir de ahora tu equipo puede instalar aplicacionescreadas localmente! Vamos a hacer unos ajustes extra parahabilitar la depuración. En este mismo apartadoselecciona la opción "Development"

En esta sección puedes configurar las opcionesespecíficas para desarrolladores:

Modo de depuración cuando el dispositivo estáconectado al cable USBMantener la pantalla activa permanentementePermitir simulación de posicionamiento GPS

La primera opción es la más importante porque tepermitirá depurar aplicaciones desde el dispositivo. Las

otras opciones no son tan críticas, pero se recomiendahabilitarlas.

Ahora tu dispositivo esta configurado como herramientade desarrollo! Cuando lo conectes con el cable USB a unordenador, aparecerá un icono indicando que eldispositivo esta listo para depurar aplicaciones.

Depurar aplicaciones conEclipseLejos, el programa más completo para probaraplicaciones de Android es Eclipse, que tiene todas lasherramientas para depurar aplicaciones, además de unaintegración total con el sistema operativo Android.

Para probar tus aplicaciones con todas las herramientasde prueba que ofrece Eclipse debes compilar tusaplicaciones en modo de depuración. Para hacerlo,selecciona el menú contextual que aparece junto a laopción "Debug" y en la lista que se despliega, selecciona"Debug Configurations"

Esto mostrará las opciones de depuración de tu

aplicación. En el menú de la derecha selecciona la opción"Android Application" y crea una nueva configuraciónpara compilar tu aplicación tal y como se detalla en elCapítulo 4 de este libro.

Esta vez, además de la configuración normal, debes entraren el tab "Target" que se encuentra en la parte superiorderecha. Allí puedes elegir donde deseas que se ejecute tuaplicación.

Marca la opción "Always prompt to pick device", de estaforma cada vez que compiles tu aplicación, Eclipse teconsultará en donde deseas que se ejecute.

Ahora conecta tu dispositivo al ordenador y compila tu

aplicación en el modo de depuración que acabas de crear.

En cuanto la aplicación esté lista, te aparecerá unaventana similar a esta, preguntando en donde deseasejecutar tu aplicación. En la parte superior se muestra tudispositivo conectado con su versión de Android ynúmero de serie.

Selecciona tu dispositivo y en unos minutos la aplicaciónse instalará automáticamente en él. Lo mejor de todo esque aunque estés ejecutando tu aplicación en undispositivo físico, mientras esté conectado por USB,tienes disponibles todas las herramientas de Eclipse paradepurar.

-Herramientas de Eclipse

Gracias al plugin ADT de Android ( que aprendimos ainstalar en el Capítulo 3 ) Eclipse tiene una completa seriede herramientas para depurar aplicaciones,completamente integradas con el sistema operativoAndroid.

Puedes encontrar todas las herramientas especializadas deEclipse si vas a la barra superior del programa yseleccionas Window > Show View > Other

Esto te mostrará todas las herramientas disponibles deEclipse. En la carpeta "Android" encontrarás todas lasherramientas especializadas para éste sistema operativo.

Aquí encontrarás herramientas para probar la mayoría delos aspectos de tu aplicación, desde su apariencia hasta eluso de recursos.

- LogCat.

Los logs de sistema te permiten analizar información,enviarte mensajes de error y chequear datos internos.Puedes usar la herramienta logCat para ver todo lo queesta pasando en el sistema, rastrear errores de runtime ode sintaxis. También puedes enviar tus propios mensajes ala consola a traves del comando console.log(). Estecomando esta disponible luego de que se inicialice elevento "deviceready".

Por ejemplo, puedes usar el comando console.log("holamundo") y recibir un mensaje de manera oculta para elusuario final. El mensaje aparecerá únicamente en laconsola de LogCat.

-Captura de imágenes de pantalla

Para publicar tu aplicación y obtener un buen número dedescargas es importante que muestres casos de uso real,en algunas aplicaciones, como los juegos por ejemplo, noes suficiente mostrar la portada de una aplicación, tienesque mostrar la experiencia real de jugarla!

Para capturar estas imágenes puedes usar la herramienta"Devices" que entre otras muchas cosas te permitecapturar lo que aparece en la pantalla tanto del emuladorcomo de un equipo conectado en modo de depuración.

Solo tienes que usar tu aplicación y presionar el botón decaptura en el momento perfecto,el sistema almacenará lacaptura de pantalla en una imagen.

-Administración de Archivos

Con la herramienta "File Explorer" puedes ver yadministrar todos los archivos del sistema Android en elque se ejecuta tu aplicación. El File Explorer permiteenviar y recibir datos además de crear o borrar archivos ocarpetas.

Con esta herramienta puede explorar archivos de sistematanto en emuladores como en equipos reales.

-Simular llamadas telefónicas, conexión a lared y coordenadas de geolocalización

Android incluye el una herramienta particularmente útilllamada "Emulator Control" que puede simular varioselementos como el tipo y estado de la red, llamadastelefónicas entrantes, mensajes SMS y hasta la posicióngeográfica del equipo.

Depurar en equipos iOSA diferencia de Android, para depurar aplicaciones en unequipo iOS (iPhone, iPad, iPod touch) debes cumplir conuna serie de requisitos previos.

Para probar en un equipo iOS es indispensable que lohagas desde un ordenador con sistema operativo MacOS yregistrarse en el programa de desarrolladores de Apple.

-Licencias y configuración

Apple controla muy de cerca de todo el ecosistema iOS ypara probar una aplicación en cualquier equipo quefuncione con este sistema operativo es necesario estarinscrito en el programa de desarrolladores iOS. Aunque elregistro en este programa es gratuito y le permite aldesarrollador acceso a la descarga de programas ydocumentación, el acceso al hardware se obtieneúnicamente a través de la membresía de pago que tiene uncosto anual de $100 USD.

El sitio de Apple para registrarte como desarrollador deiOS es:

https://developer.apple.com/programs/register/

Para registrarte necesitas una tarjeta de créditointernacional y si estas fuera de los Estados Unidos debesenviar los datos de tu tarjeta de crédito por Fax a Apple.Si no tienes una máquina de Fax a mano, puedes enviarloen linea a traves de Faxzero.com:

http://faxzero.com/

Una vez registrado como desarrollador podrás registrartus dispositivos y crear certificados de seguridad que tepermitirán instalar aplicaciones en equipos físicos.Puedes registrar hasta 100 dispositivos iOS diferentes.

- Configuración del equipo

Una vez que tengas el registro como developer, puedescrear, descargar e instalar, los certificados dedesarrollador, el proceso es algo complejo y tedioso. Eneste manual vamos a dejar que Xcode se encargue deltrabajo de registrar y configurar tu dispositivo.

Para configurar tu dispositivo, conectalo por el cable USBal ordenador y abre Xcode. Una vez abierto el programa,selecciona en la barra superior la opción Window >Organizer

El organizer es un programa parte del SDK de iOS que tepermite administrar equipos, librerías documentación yaplicaciones.

Selecciona el apartado devices, aqui puedes administrartodos tus dispositivos iOS

Si tienes conectado tu dispositivo lo veras en la lista de aparatos a la izquierda del programa. El nombre con elque aparece tu dispositivo es el que le has definido desdeel sistema operativo.

Selecciona el aparato que quieres registrar paradepuración. En cuanto lo selecciones se mostrará a laderecha una ventana con información del dispositivo.Busca en la parte inferior de esa ventana el boton "Add toportal"

Al presionar este botón Xcode se encargara de registrareste aparato en tu cuenta de developer. Automáticamentese descargan e instalan todos certificados necesarios paraque puedas depurar aplicaciones en este dispositivo.

Luego de este proceso el aparato estará listo para hacerpruebas.

Depurar aplicaciones conXcodeLa herramienta por excelencia para desarrollar paraiPhone es Xcode. Esta herramienta está totalmenteintegrada con el SDK y el sistema operativo e integra unaserie de programas adicionales para realizar pruebas tantoen el emulador como en equipos físicos.

Para ejecutar una aplicación en un dispositivo físicoprimero debes conectar un dispositivo previamenteregistrado y configurado para desarrollo.

Una vez conectado el equipo, busca en la parte superior lalista de opciones para ejecutar el programa, elige laopción "iOS Device " tal como se muestra en la imagen.

En algunos casos, en vez de mostrarse como "iOS Device"aparece el nombre del dispositivo que se encuentraconectado.

Ahora que tienes definido tu dispositivo físico paraejecutar la aplicación solo necesitas presionar el botón"Run".

Luego de unos minutos la aplicación PhoneGap seejecutará en el dispositivo.

-Herramientas de Xcode

Xcode tiene todo un arsenal de herramientas para quedepures tus aplicaciones hasta que estén listas para salir ala appstore.

La mayoría de estas herramientas te servirán para probartus aplicaciones tanto en el simulador como en un equiporeal. El proceso de prueba en iOS es particularmenteimportante porque si tu aplicación tiene alguna fallacrítica corre el riesgo de no ser aprobada en la Appstore.

- Consola

La consola de Xcode permite monitorear la actividad dela aplicación, rastrear datos, enviar mensajes de error yanalizar datos de funcionamiento.

Para activar la consola en Xcode debes ir a View >Activate Console

Además de monitorear con detalle tu aplicación, puedesenviar mensajes directos a través del comandoconsole.log().

El comando console.log() solo esta disponible luego deinicializado el evento deviceready y puede mostrarmensajes exclusivamente en la consola sin que sean vistospor el usuario.

-Instruments

Una de las herramientas más poderosas de depuración deXcode es Instruments, un programa que te permite realizarmúltiples pruebas tanto en el emulador como en el equiporeal.

Para desplegar Instruments desde Xcode, debes ir aXcode> Open Developer Tool > Instruments

En Instruments puedes realizar una gran cantidad depruebas como el uso de CPU, batería, velocidad y hastadetectar fugas de memoria en tu aplicación. Soloselecciona la prueba que deseas realizar y presiona elbotón "Choose"

Para monitorear tu aplicación debes seleccionarla de lalista de procesos. Selecciona en la lista de procesos laopción "attach to process" y busca en la sección System unproceso con el nombre de tu aplicación.

En este ejemplo se está ejecutando una prueba deactividad en el programa "manual del guerrero móvil", enla siguiente ilustración se observa cómo seleccionar elproceso correspondiente:

Una vez seleccionado el proceso, presiona el botón"record" al lado superior izquierdo para comenzar arastrear la actividad de la aplicación.

Dependiendo del análisis solicitado, Instruments mostrarágráficas en tiempo real del rendimiento de la aplicación.Esta información puede ser almacenada para análisisposteriores.

- Administración de archivos

Xcode también permite inspeccionar los archivos de unaaplicación, esta información es particularmente útil si tuaplicación de alguna forma crea o modifica archivos.

Para inspeccionar los archivos debes abrir el Organizerde Xcode que ya hemos usado en páginas anteriores ybuscar en la lista de dispositivos el que ejecuta laaplicación que deseas inspeccionar.

Bajo el nombre de tu dispositivo encontrarás una lista desub elementos, escoge el ítem "Aplications" para mostrarlas aplicaciones instaladas en este dispositivo.

Las aplicaciones instaladas en tu dispositivo aparecen enuna lista al lado derecho, selecciona la aplicación quedeseas inspeccionar y en la parte inferior de la pantallaaparecerán todos los archivos de esta aplicación.

Recuerda que en iOS las aplicaciones trabajan de maneraindependiente bajo el concepto de "Sand Box" cadaaplicación tiene un espacio reservado para instalar yadministrar sus propios archivos, completamenteseparado e independiente del sistema y otros programas.

Puedes administrar los archivos de una aplicación con loscontroles en la parte inferior de la ventana.

PHONEGAP BUILD

PhoneGap Build es un servicio de Adobe que permitecompilar aplicaciones PhoneGap en la nube. El principiobásico de este servicio es crear aplicaciones en múltiplesformatos y plataformas en un solo paso, sin importar laplataforma que se utilice para desarrollar.

Para crear aplicaciones con este servicio solo se necesitasubir los archivos fuente en HTML5, CSS3 y JavaScript.Sin importar en qué plataforma trabajes, PhoneGap Buildconvierte estos archivos en aplicaciones móviles. No esnecesario instalar ningún software adicional porque losservidores de PhoneGap Build están cargados con todoslos SDK’s necesarios para crear aplicaciones en 6diferentes plataformas ( iOS, Android, Windows Phone,Blackberry webOS y Symbian )

Lo mejor de este servicio gratuito es que libera a losusuarios de encadenarse a cualquier sistema operativo.Por ejemplo, para crear una aplicación iOS esindispensable desarrollar desde un equipo Apple porqueel SDK de iPhone está completamente vinculado alsistema operativo Mac OS. Técnicamente, un usuario deWindows o Linux estaría imposibilitado a crear unaaplicación para iPhone. Ahora, gracias a Phonegap Build

ya no importa en qué plataforma se desarrolle laaplicación, solo es necesario enviar el código fuente a lanube y las aplicaciones móviles se compilansimultáneamente en 6 formatos distintos, listas parapublicarse directamente en las tiendas de aplicaciones.

La dirección del sitio de PhoneGap build es:

http://build.phonegap.com/

Para utilizar el servicio solo es necesario tener una cuentagratuita de Adobe o Github

Subir Aplicaciones a la nubeActualmente hay 3 diferente formas de publicar el códigoen PhoneGap Build:

Github: una de las opciones más robustas es utilizar elsistema de repositorios de git ya que además de ser muypráctico, permite que varios developers trabajen en unsolo código y mantener control de versiones.

Upload directo: se pueden subir archivos de la aplicacióndirectamente en forma de .zip o en un archivo .html

Dreamweaver CS6: La última versión del Creative Suitede Adobe incluye integración nativa con el servicio dePhoneGap Build. En el capítulo 6 de este libro se detallala configuración básica para integrar Dreamweaver CS6con este servicio. Al crear una aplicación móvil enDreamweaver CS6 el sistema se encarga de duplicarla enel sitio de PhoneGap Build y de definir todos los ajustesnecesarios.

Crear una nueva aplicaciónPara crear una nueva aplicación desde el sitio dePhoneGap Build, solo es necesario buscar el botón "+newapp" para comenzar el proceso de creación

El siguiente paso es definir el nombre de la aplicación,los settings y la fuente de origen de los archivos

El título de la aplicación es el identificador dentro dePhoneGap Build y el nombre con el que se va a mostrar laaplicación en los dispositivos en que se instale.

Los settings de la aplicación tienen 3 opciones:

Enable debugging: Permite activar la consola dedepuración que puede enviar y recibir datos dedepuración de cualquier terminal que instale la aplicación

Make app private: Controla el acceso a la aplicación, unaaplicación pública puede ser descargada por cualquierpersona mientras que una aplicación privada solo puededescargarse por usuarios previamente autorizados.

Enable hydration: Activa el "Hydration" nuevo servicio

de PhoneGap Build que actualiza automáticamentecualquier aplicación instalada a la última versióndisponible.

También tienes dos opciones para subir el código fuentede la aplicación. En el caso de elegir la opción "from arepo" debes definir la dirección de un repositoriopúblico. La opción "by upload" permite subir un archivoen formato html o un archivo .zip con los archivos de laaplicación.

ConfiguraciónUna vez listos los archivos base de la aplicación esnecesario crear un archivo de configuración. Este archivodefinirá las propiedades básicas de la aplicación y estabasado en el standard de aplicaciones del W3C. Puedesencontrar información detallada sobre el formato de losarchivos de configuración en los siguientes enlaces:

http://www.w3.org/TR/widgets/

http://dev.opera.com/articles/view/extensions-api-config-xml/

Si estás creando tu aplicación a través de AdobeDreamweaver CS6 el archivo de configuración se creaautomáticamente, en el caso de que utilices otraherramienta es necesario crear un archivo con el nombreconfig.xml e incluirlo en la raíz de la aplicación.

A continuación se muestra un ejemplo del contenido quedebe tener el archivo de configuración:

<?xml version="1.0" encoding="UTF-8" ?><widget xmlns = "http://www.w3.org/ns/widgets" xmlns:gap = "http://phonegap.com/ns/1.0" id = "com.phonegap.example"

version = "1.0.0"><name>Nombre de la app</name><description>Descripcion breve.</description><icon src="icono.png"/><author href="https://revolucion.mobi"email="carlos@revolucion.mobi">Carlos Solis</author><featurename="http://api.phonegap.com/1.0/geolocation"/><featurename="http://api.phonegap.com/1.0/network"/></widget>

Aunque, según el estándar del W3C el archivo deconfiguración puede definir una gran cantidad de detallesde una aplicación móvil, PhoneGap Build solo soporta unnúmero limitado de propiedades, las principales son:

icon file: Debes incluir un archivo que será el icono de tuaplicación, esta imagen se mostrará en el sistemaoperativo y será la forma en que los usuarios identificarántu aplicación. El formato de este archivo debe ser PNG ytiene soporte para canal Alpha.

Name: El título de tu aplicación, este será el nombre con

el que aparecerá identificada tu aplicación dentro delsistema operativo.

Versión: La versión actual de tu aplicación

PhoneGap version: La versión que PhoneGap que deseasutilizar en tu aplicación.

Description: una breve descripción de la aplicación.

Icon: Una imagen pequeña que identifica la aplicación

Author: El nombre del autor de la aplicación

Features: una lista de los elementos de la API que utilizala aplicación, esta lista se utiliza para invocar permisosde acceso en el dispositivo. Por ejemplo, si la aplicaciónusa la API de geolocalización, debe incluirse en esta listapara asegurar el acceso al hardware del dispositivo.

La información de este archivo está disponible tambiéndesde el sitio de PhoneGap Build en el panel de controlde la aplicación, en la sección de "settings"

Una vez definido el archivo de configuración y enlazadoel código, solo tienes que compilar. En un solo paso tuaplicación se compila para 6 plataformas distintas.

Dependiendo de la plataforma en la que quieras publicares posible que necesites algunos pasos extra antes depublicarla en su respectiva tienda de aplicaciones, acontinuación examinaremos los pasos detallados parapublicar tanto en Android como en iOS.

Publicar aplicaciones enAndroidTodas las aplicaciones de Android necesitan estarfirmadas con un certificado de seguridad antes depublicarse en la tienda Google Play.

El certificado de seguridad en android es muy sencillo decrear y el proceso es totalmente gratuito. Para crear elcertificado solo debes insertar este comando en consolade tu sistema operativo

keytool -genkey -v -keystorekeyParaPublicar.keystore -alias mi_alias -keyalg RSA-keysize 2048 -validity 10000

En el código que aparece anteriormente, se va a crear unarchivo llamado keyParaPublicar.keystore y le asigna elalias "mi_alias". El alias es un nombre corto que seutilizará como identificación del usuario.

En cuanto se inserte este comando , el sistema solicitaasignar un password y enviar algunos datos personalesnombre, organización, ciudad y codigo de pais, en esteúltimo caso se debe usar el código standard de dos letraspara su país, por ejemplo Estados unidos (US), Mexico

(MX), Chile (CL).

Toma en cuenta que al incluir algunos datos como elpassword el cursor no parpadea ni se mueve y puedeparecer que no responde. Al terminar de incluir un datosolo debes presionar la tecla enter y el sistemaresponderá.

Puedes encontrar información detallada sobre el procesode creación de certificados para android en el sitio oficial

de Android:

http://developer.android.com/intl/es/tools/publishing/app-signing.html

Una vez finalizado el proceso antes mencionado, se creael archivo keyParaPublicar.keystore que será elencargado de encriptar tus aplicaciones.

El siguiente paso es subir este archivo a la nube paraencriptar todas tus aplicaciones . En el sitio de PhoneGapBuild, selecciona tu aplicación y busca el apartado deAndroid en la sección "Builds". Selecciona la opción"add a key..."

Al agregar un nuevo certificado, el sistema va a solicitarlos permisos para cifrar el archivo:

Alias: El título del certificado

Alias: incluir el alias que usaste a la hora de crear elcertificado, en el comando que se uso de ejemplo el aliases "mi_alias"

Key password: incluir el password que usaste para creartu certificado de seguridad.

Keystore password: El segundo password que usaste

para crear tu certificado

Luego de definidos el certificado su aplicación, el archivo.apk que genera phonegap build está listo no solo parahacer pruebas en cualquier equipo, también es posiblesubirlo directamente a la tienda de Google Play.

Publicar aplicaciones iOSPara publicar una aplicación de iOS es necesarioencriptar tu aplicación con los certificados de seguridadque ofrece Apple. Los certificados de Apple son de usoexclusivo para desarrolladores registrados. Los pasospara completar el proceso de registro se detallan en elCapítulo 22 de este libro.

Una vez completado el registro como desarrollador deiOS, es necesario ingresar con tus credenciales al sitio dedesarrolladores de Apple en:

http://developer.apple.com

Debes buscar el "iOS Provisioning Portal", en estasección se generan y almacenan todos los certificadospara acceso y distribución de aplicaciones iOS

El certificado que necesita PhoneGap build para distribuirtus aplicaciones se encuentra en la sección"Provisioning". Si no tienes ningun certificado activo aun,presiona el boton "New profile" para crear uno.

Al presionar el boton "Download" se descargará el

certificado del perfil correspondiente. El archivodescargado tiene el nombre del perfil seleccionado y laextensión ".mobileprovision". Guarda este archivo en unlugar accesible, lo vas a necesitar más adelante.

El siguiente paso necesita realizarse en un equipo Mac OSregistrado y configurado para desarrollar aplicacionesiOS tal como se indica en el capítulo 22 de este libro.

PhoneGap Build necesita un certificado de encriptado enformato .p12, para generarlo debes abrir el programa"Keychain Access".

Selecciona la categoría "Certificates" y busca allí un elcertificado de desarrollador de iOS a tu nombre:

Selecciona tu certificado de desarrollador y has clickderecho sobre él. En el menu contextual que se muestreelige la opcion "Export iPhone Developer: XXXXXX "

donde XXX es tu nombre y numero de desarrolladorregistrado.

Esta opcion va a exportar tu certificado de desarrolladorpara utilizarlo en PhoneGap Build, recuerda exportarlo enformato .p12

El sistema pedirá un password para este certificado,recuerda anotarlo en algún lugar accesible, lo necesitarásmás adelante.

Ya tienes todos los elementos necesarios para encriptaraplicaciones en la nube!

Ahora debes regresar a la pagina de PhoneGap Build,elige tu aplicación y busca en la sección "builds" laopcion iOS. Selecciona la opcion "add a key..." pararegistrar el nuevo certificado.

El menu emergente te pide algunos detalles adicionales, lainformacion que necesitas incluir es:

Title: el nombre de indentificacion de el certificado, asipodras utilizarlo en otras aplicaciones.

Certificate (p12) file: aqui debes incluir el archivo .p12que acabas de crear

Provisioning file: incluye aca el archivo que reciendescargaste del portal de desarrolladoreas (.mobileprovisioning)

Certificate password: el password que definiste en elcertificado que creaste en tu ordenador.

Una vez asignado el certificado puedes compilar en lanube tus aplicaciones iOS y descargar un archivo .ipa yalisto para publicarse directamente en la Appstore deApple.

Depuración de aplicacionesen la nubePhonegap build tiene servicio de depuración muycompleto llamado weinre, con este sistema es posibleenviar y recibir información de cualquier terminal quedescargue la aplicación.

Para activar el modo de depuración es necesario activarlohaciendo clic en el botón debug

El depurador detecta e identifica los dispositivos queestén utilizando la aplicación y muestra sus datos:

En la seccion "Consola" es posible enviar y recibir datos,ejecutar funciones del programa o cualquier comando

arbitrario de javascript.

La siguiente aplicación utiliza el comandoconsole.log() para enviar informacion al depurador cadavez que se hace clic en el botón "enviar datos aldepurador" .

Ejercicio 23.1

<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>Hola Mundo</title><script src="cordova.js" type="text/javascript"charset="utf-8"></script></head><body><h1>Depurando en la nube</h1><button onclick="enviarDatos()"> enviar datos aldepurador </button><script>

function enviarDatos(){ console.log("Datos Enviados desde elmovil") }</script></body></html>

Una vez instalado el programa e, PhoneGap build puededetectar que hay un dispositivo conectado en modo dedepuración y recibir los datos del equipo. En este ejemplocada vez que se presione el botón "enviar datos aldepurador" se reciben datos en tiempo real en la consolade depuracion de PhoneGap Build.

También es posible enviar datos desde la consola a losdispositivos que tengan instalada la aplicación, porejemplo, si en la consola se inserta el comando dejavascript:

alert("enviando datos desde el depurador")

En el equipo que usa la aplicación se ejecutará elcomando y aparecerá la respectiva alerta:

La consola de PhoneGap Build es una de las herramientasde depuración más poderosas del mercado y en definitivapermite refinar a un nivel profesional cualquieraplicación.