Movil_PhoneGap

Cápitulo 1 -Conociendo PhoneGap Cápitulo 2 - Preparando el entorno Cápitulo 3 - SDK de Android Cápitulo 4 - Eclipse Cápitulo 5 - SDK de iOS Cápitulo 6 - Dreamweaver CS6 Cápitulo 7 - Estructura de una aplicación Cápitulo 8 - HTML5 Cápitulo 9 - CSS 3 Cápitulo 10 - JavaScript Cápitulo 11 -Acceder información del usuario Cápitulo 12 - Notificaciones Cápitulo 13 - Detectar conexión Cápitulo 14 - Acelerómetro Cápitulo 15 - Brújula Cápitulo 16 - Geolocalización Cápitulo 17 - Archivos; Cápitulo 18 - Almacenamiento Cápitulo 19 - Cámara Cápitulo 20 - Contactos Cápitulo 21 - Depuración en navegadores Cápitulo 22 - Depuración en equipos Cápitulo 23 - PhoneGap Build

A mi abuela, que me enseñó el valor de los libros. A mi madre, 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, speaker en diversos eventos, entre ellos Adobe Express en Perú y México, Latin Flash Tour y otros eventos en Costa Rica, Colombia, Chile y Argentina. Como desarrollador móvil ha creado soluciones para varias marcas del Fortune 500 y colaborado con múltiples startups en el Silicon Valley, Santiago, Tel-Aviv y New York. Certificado W3C en buenas prácticas móviles y fundador del proyecto Revolución Móvil. Firme creyente del potencial de los desarrolladores latinoamericanos.

www.carlossolis.mobi

INTRODUCCION Los dispositivos móviles han creado un nuevo mercado que crece exponencialmente y esta repleto de nuevas oportunidades. Desde la llegada de las tiendas de aplicaciones o app Stores la forma de distribuir software ha cambiado radicalmente. Antes del 2008 - año en que se inauguró la App Store de Apple - para distribuir un programa, era necesario crear una costosa estructura de distribución y marketing, hoy en día cualquier desarrollador tiene acceso a una red global de clientes ávidos de contenidos. Muchos desarrolladores que trabajan lenguajes como Objective-C, C, C++ o Java lograron incursionar rápidamente en este nuevo mercado y monetizar sus productos a través de esta nueva red de distribución que generaron las App Stores. Sin embargo, gran cantidad de desarrolladores que apostaron por el desarrollo web se han quedado fuera de esta bonanza, porque los lenguajes con los que se construye la web no están soportados para desarrollar aplicaciones nativas. PhoneGap abre una oportunidad a todos los

desarrolladores que han invertido años de estudio y perfeccionamiento en los lenguajes web, permitiéndole crear aplicaciones nativas de alta calidad basadas en lenguajes de su uso cotidiano como HTML, javascript y CSS . PhoneGap es una de las mejores opciones para los desarrolladores con conocimientos en lenguajes web que deseen incursionar en el mundo del desarrollo móvil. Con una tecnología abierta, fácil de instalar en cualquier plataforma y a un costo gratuito, PhoneGap es una opción real para desarrollar proyectos educativos, gratuitos o comerciales. En este libro aprenderás a desarrollar aplicaciones multiplataforma basadas en HTML5, CSS3 y Javascript con ejemplos prácticos y realistas. Desde la configuración básica y desarrollo, hasta la publicación final en las tiendas de aplicaciones, aprenderás todos los trucos prácticos que el autor de este libro ha descubierto desarrollando aplicaciones con PhoneGap.

¿Es para mi este libro? El manual del guerrero móvil está planeado para ser una guía introductoria a la creación y desarrollo de aplicaciones móviles con PhoneGap. Los ejemplos y temas desarrollados acá son para usuarios que nunca han desarrollado aplicaciones phonegap o que tienen conocimientos básicos y desean profundizar a un nivel básico - intermedio. Cada capítulo está redactado con la mayor claridad y en la medida de lo posible se realizará una rápida inducción sobre el tema, sin embargo es recomendable que el lector tenga conocimientos básicos sobre los lenguajes en los que se basa PhoneGap : CSS3, Javascript, HTML5. Luego de leer este libro el lector tendrá un panorama completo sobre el desarrollo de aplicaciones phonegap y contará con bases sólidas para seguir creciendo y aprendiendo en el cambiante mundo de los dispositivos móviles.

¿Como utilizar este libro? Este es un libro práctico, rápido de leer y fácil de comprender para poner manos a la obra de inmediato. El libro está estructurado con un orden progresivo, cada capítulo se relaciona con el anterior y el objetivo final es guiar al lector en un viaje de conocimiento desde lo más básico hasta la publicación final de su aplicación. Pero si usted, amable lector, es como el autor de este libro - y muy posiblemente lo sea - tendrá ansiedad por saltarse capítulos y buscar directamente la información que necesita… siéntase libre de hacerlo! es más, el autor le invita a hacerlo!

Sobre el Manual del guerrero móvil El desarrollo en dispositivos móviles no es para cobardes, se necesita una actitud desafiante, iniciativa y mucha dedicación, con un panorama siempre cambiante y una fragmentación de equipos casi infinita, no se puede ver esto como un simple trabajo, cada día hay que estar preparados para que todas las reglas cambien. Para este trabajo no es suficiente un desarrollador normal, se necesita un guerrero incansable, sediento de conocimiento y dispuesto a darlo todo por alcanzar la meta. El libro del guerrero móvil es una colección pensada para quienes necesitan información útil y rápida, sin páginas de relleno, sin introducciones interminables ni análisis que sólo son útiles en la teoría. Este es un libro para aquellos que quieren hacer su trabajo bien y tienen que hacerlo ahora mismo!

Ejemplos y ejercicios Todos los ejemplos usados en este libro se encuentran actualizados y disponible para descarga gratuita en la siguiente dirección www.manualdelguerreromovil.com/phonegap En este libro utilizaremos - salvo casos en los que se haga la salvedad - ejemplos funcionales en equipos android 2.2 en adelante y iPhone 5.0 en adelante que cubren a la mayoría de los usuarios de equipos móviles al momento de escribir el libro.

Errores y correcciones Aunque cada parte de este libro fue cuidadosamente revisada siempre se nos puede escapar un error, si encuentras alguno por favor notificarlo en el sitio oficial del libro www.manualdelguerreromovil.com/phonegap Este libro digital tiene soporte para actualizaciones, sus reportes de errores y correcciones serán tomados en cuenta y serán entregadas gratuitamente a todos que posean una copia.

Cursos y capacitaciones Si desea recibir un curso online o presencial sobre los temas de este libro contáctenos sin compromiso en la página oficial del libro para consultar sobre disponibilidad y costos.

CONOCIENDO PHONEGAP Historia El proyecto PhoneGap fue creado y dirigido por Nitobi, una empresa canadiense fundada por André Charland y Dave Johnson en los primeros años de este milenio. PhoneGap es un proyecto de código abierto basado en estándares web. Nació en el 2008 durante un evento llamado iPhoneDevCamp, una conferencia informal de desarrolladores, en la que buscan promover el desarrollo de aplicaciones basadas en iOS y tecnologías web estándar. En solo 2 días que duró el evento un grupo de entusiastas desarrolladores logró crear un prototipo funcional de lo que hoy conocemos como PhoneGap. El proyecto saltó a la fama en el 2009 cuando fue premiado por el público como el mejor proyecto ( People’s Choice Award ) durante la conferencia anual Web 2.0 organizada por la prestigiosa editorial O’Reilly.

-Adquisición de Adobe y nacimiento de Cordova El 4 Octubre del año 2011 Nitobi fue adquirido por Adobe. Con esta adquisición se anunció que el código base de PhoneGap pasaría a ser propiedad de la Fundación Apache bajo el nombre de Proyecto Apache Cordova ( inicialmente llamado Apache Callback, nombre ahora desechado ). El cambio de nombre ha llevado a muchas confusiones entre los desarrolladores, según Brian Leroux - uno de los líderes del proyecto - Cordova es el nombre con el que se denomina al código base del proyecto y núcleo central de las aplicaciones. PhoneGap, es una "distribución" que hace uso de ese núcleo, tal y como los sistemas operativos Debian 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 en integrar 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 perpetuidad acceso a la licencia gratuita y espíritu de código abierto que ampara la Fundación Apache.

Para efectos de redacción y orden, durante este libro llamaremos PhoneGap tanto al proyecto Apache Cordova como a PhoneGap y cualquiera de sus elementos.

¿Cómo funciona? En pocas palabras, PhoneGap crea aplicaciones nativas para dispositivos móviles a partir de lenguajes web ( HTML5, Javascript, CSS3, etc). Esto lo logra a creando una instancia del navegador del sistema que se controla través de una interfaz de funciones foráneas (FFI por sus siglas en inglés).

La interfaz de funciones foráneas es un mecanismo, por el que un programa escrito en un lenguaje de programación puede realizar llamadas a funciones o usar los servicios escritos en otro lenguaje.

En el caso de PhoneGap, este proceso se realiza al permitir que los comandos de programación hechos en Javascript utilicen servicios escritos en lenguaje nativo de la plataforma móvil en que se ejecuta la aplicación, por ejemplo Objective-C o Java. El código base de la aplicación hecha en PhoneGap se despliega en una instancia del navegador del sistema, exactamente igual que una página web, pero, a diferencia del navegador normal, la instancia que usa PhoneGap no muestra controles de navegación ni barras de herramientas, sino que se muestra en pantalla completa, de la misma forma que una aplicación nativa.

-Webkit La instancia de navegador en la que se despliega el código tiene, por lo general, un núcleo basado en el motor de render Webkit. Webkit es un proyecto de código abierto que sirve como motor a muchos de los principales navegadores web de escritorio como Chrome, Safari, Konkeror o RockMelt y de los navegadores móviles de iOS, Blackberry OS y Android. Webkit está desempeñando un papel crucial en la implementación de nuevas tecnologías como HTML5 y CSS3. Los principales actores de la internet como Apple, Adobe, Microsoft y Google contribuyen con el proyecto Webkit para que adopten rápidamente las nuevas tecnologías web como HTML5, CSS3, AJAX ó Javascript. PhoneGap al utilizar Webkit como base, tiene en general un buen soporte sobre estos lenguajes.

- Aplicaciones Híbridas Cuando se crea una aplicación PhoneGap, el código basado en HTML5 y demás lenguajes web se empaqueta en una aplicación 100% nativa que muestra el código a través de una instancia del navegador. La aplicación tiene acceso a todos los sensores del dispositivo al conectarse de forma nativa a través de la API de PhoneGap. Por esta razón PhoneGap entra en la categoría de aplicación híbrida: ejecuta una aplicación web dentro de una aplicación nativa. PhoneGap combina la simplicidad de los lenguajes web con el poder de los lenguajes nativos, es, en síntesis, lo mejor de dos mundos.

Plataformas soportadas Por un amplio margen PhoneGap es la tecnología de desarrollo móvil que tiene el mas amplio soporte de plataformas distintas. Gracias a que la mayoría de los smartphones permiten crear instancias del navegador en sus aplicaciones nativas, PhoneGap solo crea clientes específicos para cada plataforma, estos clientes interpretan un mismo código y envían comandos nativos a sus respectivos sistemas operativos. Muy similar al principio que usan las máquinas virtuales de Java o al del Player de Flash que permiten ejecutar un mismo código en muchas plataformas. Actualmente PhoneGap es soportado en 7 diferentes plataformas: iOS Android Windows Phone 7 Blackberry OS WebOS Symbian Bada

¿Se pueden publicar en la Appstore las aplicaciones PhoneGap? A inicios del año 2010 Apple cambió las reglas para las aplicaciones que se publicaban en su tienda, prohibiendo aplicaciones hechas en lenguajes que no fueran nativos, esta modificación se hizo en medio de una guerra mediática con Adobe y buscaba afectar directamente a Flash que quería perfilarse como una herramienta de desarrollo de aplicaciones para iPhone. Tiempo después en Octubre del mismo año Apple revirtió sus términos y volvió a aceptar aplicaciones creadas con lenguajes no nativos. Sin embargo, aunque hoy en día ya es posible publicar aplicaciones basadas en cualquier lenguaje, el famoso cambio de políticas nunca afectó a PhoneGap y posiblemente nunca lo afecte. Desde el cambio original de reglas, Apple hizo la salvedad de incluir a javascript y los lenguajes que se ejecutan dentro de Webkit como lenguajes nativos, por lo que aun durante el periodo en que las aplicaciones flash fueron prohibidas, las aplicaciones PhoneGap siguieron

publicándose con total normalidad. Es muy poco probable que con la enorme cantidad de aplicaciones basadas en PhoneGap que existen actualmente en la tienda de Apple y la profunda integración de Webkit en el sistema operativo, que algún día se lleguen a restringir las aplicaciones basadas en lenguajes web. En resumen: es total y completamente seguro publicar aplicaciones basadas PhoneGap en la Appstore de Apple y en cualquier otra de las tiendas de aplicaciones de las plataformas soportadas por PhoneGap.

¿Cuando usar PhoneGap? PhoneGap es una plataforma muy versátil y el lenguaje HTML5 en el que se basa está avanzando a pasos agigantados, sin embargo, ninguna tecnología es absolutamente perfecta y PhoneGap no es la excepción: no todos los proyectos son aptos para trabajarlos con esta tecnología. Vamos a analizar algunos tipos de aplicaciones y las posibilidades que ofrece PhoneGap para cada una de ellos.

-Aplicaciones informativas Este es el tipo de aplicación que funciona mejor con PhoneGap: Mostrar información estática o dinámica sobre productos y servicios, desplegar textos, vídeos y elementos gráficos de alta calidad. Una buena parte de las aplicaciones disponibles en las tiendas de aplicaciones entra en esta clasificación. Crear una aplicación de este tipo con PhoneGap es fácil y rápido. El resultado final es prácticamente igual al de una aplicación nativa. Por ejemplo, METAR Reader es una aplicación para pilotos aéreos que utiliza PhoneGap para mostrar e interpretar información estándar sobre las condiciones meteorológicas en diferentes aeropuertos.

-Aplicaciones Utilitarias Una de las categorías más populares en las App Stores son las aplicaciones utilitarias, que son todas aquellas que nos sirven para hacer tareas y operaciones con nuestro mó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 QR y miles más. Esta es otra categoría en la que el desarrollo con PhoneGap se destaca positivamente. Entre las aplicaciones utilitarias podemos incluir las que nos ayudan a planificar y organizar nuestras tareas como Diary Mobile. Esta aplicación creada con PhoneGap permite gestionar tareas y eventos que se sincronizan en la nube.

-Adaptación de Webapps Entre las ventajas que tiene PhoneGap es que se pueden crear aplicaciones completas usando los mismos lenguajes que se utilizan para crear sitios web: HTML5, CSS3 y Javascript. Esto permite que con solo pequeñas variaciones y adaptaciones se pueda utilizar una web app o aplicación web y convertirla en una aplicación móvil nativa. Gracias a esta capacidad, las empresas pueden ahorrar tiempo y dinero reutilizando sus aplicaciones basadas en web, si ya están optimizadas para equipos móviles, la mayor parte del trabajo esta hecha. El mejor ejemplo de este uso es la Wikipedia, que usa PhoneGap para ofrecer en su aplicación nativa los mismos contenidos y servicios de la enciclopedia online.

-Juegos Aunque PhoneGap no fue creado como una plataforma dedicada para juegos, si es posible desarrollarlos aunque con muchas restricciones. No olvidemos que al trabajar sobre una instancia del browser del sistema se genera una carga de procesador adicional. La velocidad del navegador para renderizar los elementos y realizar los cálculos de javascript tiene un impacto notable en el rendimiento, además, la complejidad del juego y la interacción de múltiples elementos gráficos puede derivar en problemas de rendimiento. El juego Orbium creado en PhoneGap demuestra que es posible crear juegos básicos en esta plataforma. Aunque si estas buscando crear un juego que haga uso intensivo del procesador, es mejor que explores otras plataformas como Flash, Cocos2D o Unity.

-Interacción con los sensores A diferencia de una simple aplicación web creada con HTML5, PhoneGap tiene acceso a la mayoría de los sensores y receptores del dispositivo móvil. Puede acceder sin problema los sensores de GPS o la brújula para ubicarse en el espacio o utilizar la cámara y micrófono para registrar lo que pasa a su alrededor. Utilizar los sensores del móvil con PhoneGap es muy sencillo y solo necesita unas pocas líneas de código. ClicPic es un buen ejemplo del uso de los sensores, esta aplicación usa PhoneGap para acceder a la cámara del equipo: Toma fotos, las procesa, clasifica y comparte en su propia red social.

En general PhoneGap es una tecnología bastante flexible. Sus principales problemas son el rendimiento en aplicaciones intensivas del procesador y el soporte parcial de HTML5 o CSS3 en algunos sistemas operativos, principalmente en las versiones más antiguas. Para esta plataforma, no se recomiendan aplicaciones que usen animaciones avanzadas y cálculos intensivos.

Siempre debe ponerse especial cuidado a todo lo que tiene que ver con el rendimiento, en especial si se piensa publicar aplicaciones que se ejecuten en equipos antiguos o con procesador lento. Con PhoneGap así como en cualquier otra tecnología que tenga que ver con dispositivos móviles, siempre tenemos que ser cuidadosos con el uso de los limitados recursos de un equipo móvil.

Licencia y condiciones de uso A diferencia de otras plataformas de desarrollo, PhoneGap es un proyecto de código abierto, completamente gratuito y basado en los estándares de la web. Desde octubre del 2011 tras la adquisición de Nitobi por parte de Adobe, PhoneGap es parte de la fundación Apache bajo el nombre de proyecto Cordova. Al ser parte de esta fundación está bajo la licencia Apache versión 2.0, al igual que otros proyectos como Android, Spring, o los servidores Tomcat y Apache. Esta licencia permite a los usuarios de PhoneGap utilizar, distribuir y modificar de manera gratuita y abierta el código. La licencia permite comercializar aplicaciones sin pagar regalías de ningún tipo, no es necesario incluir logos oficiales o dar créditos a PhoneGap, Adobe o Apache y no requiere la creación de obras derivadas o publicación del código fuente. Es perfectamente seguro desarrollar aplicaciones comerciales, educativas o de código abierto sin riesgos por el cobro de regalías o reclamos por el uso de

propiedad intelectual.

PREPARANDO EL ENTORNO Antes de comenzar a desarrollar aplicaciones para móviles, tienes antes que instalar y configurar el entorno de desarrollo con las herramientas en las que crearás aplicaciones para móviles. A diferencia de otras plataformas ,PhoneGap no tiene un entorno de desarrollo propio, por el contrario, trabaja como plugin o extensión dentro de otros editores de código como Dreamweaver, Xcode o Eclipse. Para crear una aplicación móvil necesitarás instalar además de PhoneGap - las herramientas de desarrollo o SDK's de cada plataforma en la que quieres desarrollar. Un SDK es un conjunto de herramientas y utilidades que permiten compilar código fuente y convertirlo en una aplicación apta para ejecutarse en equipos móviles... y eso es justo lo que usarás para convertir tu código HTML5 una flamante aplicación móvil.

Requerimientos de Sistema Para crear y probar aplicaciones móviles en tu ordenador necesitarás instalar un editor de código y los SDK de Android y/o iPhone. Dependiendo de tu sistema operativo, puede que necesites instalar programas adicionales (ver detalles a continuación).

-Requerimientos en Windows Para desarrollar en PC necesitas un ordenador Windows XP o superior, en este manual usaremos Windows 7 como punto de referencia. El JDK de JAVA crea el entorno necesario para correr el emulador de Android y algunas herramientas de depuración. Muchos programas requieren este entorno y es posible que ya lo tengas instalado en tu computador, de lo contrario los instaladores de estos programas se encuentran en el sitio de Oracle

http://www.oracle.com/technetwork/java/javase/downloads Para utilizar todos los programas que se requieren para desarrollar aplicaciones móviles, se sugiere una configuración mínima de: 1. Procesador Intel® Pentium® 4 o AMD Athlon® 64 2. Microsoft® Windows® 7 o Microsoft® Windows® Vista Service Pack 2. 3. 1 GB de RAM 4. Display de 1280x800 con tarjeta de video de 16-bit

-Requerimientos en Mac OS En equipos Apple es necesario el sistema operativo MacOS 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 última versión. La política de Apple es darle soporte únicamente a la última versión de su sistema operativo y eventualmente las versiones más antiguas dejarán de ser compatibles. En este manual se usará Mac OS Lion como referencia. Para utilizar todos los programas que se requieren para desarrollar aplicaciones móviles, se sugiere una configuración mínima de: 1. 2. 3. 4.

Procesador Intel Multicore Mac OS X v10.6 1GB de RAM 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 o superior. Las distribuciones de 64-bit deben ser capaces de ejecutar aplicaciones de 32-bit.

-Conexión a internet La conexión a internet es crucial no solo para descargar programas y actualizaciones, también es requerida para utilizar servicios como PhoneGap Build y algunos emuladores que requieren el uso de conexión web. Es posible crear y probar aplicaciones sin conexión a internet, sin embargo, el proceso será limitado por lo que se recomienda que mientras se desarrollan aplicaciones móviles hacerlo en un equipo que tenga asegurada la conexión todo el tiempo.

-Instalación de JAVA JDK El Java JDK es necesario para ejecutar el emulador de Android y algunas herramientas de depuración. No es suficiente con instalar el Java JRE es necesario instalar el JDK completo para tener acceso a todas las herramientas de desarrollo El instalador de este programa se encuentra en el sitio de Oracle.

http://www.oracle.com/technetwork/java/javase/downloads Ahora que tienes un sistema listo para desarrollar aplicaciones PhoneGap, vamos a crear aplicaciones. En el proximo capitulo vamos a aprender como crear una aplicación Android básica.

SDK DE ANDROID Instalando el SDK de Android El SDK de Android contiene todo lo necesario para crear y probar las aplicaciones para esta plataforma. Es bastante completo e incluye emuladores de sistema operativo y aplicaciones especializadas para controlar y monitorear todos los elementos de una aplicación móvil. Para descargar el SDK de Android debes ir al sitio de desarrolladores de Android y elegir allí la versión del SDK que corresponda a tu sistema operativo: http://developer.Android.com/sdk/ El tamaño promedio de esta descarga es de aproximadamente 30MB. Una vez descargado el archivo deberás descomprimirlo en tu computador. Descomprime este archivo en una ruta sencilla de acceder, 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 el SDK, también evitarás posibles errores cuando compiles tu aplicación.

Instalación de múltiples versiones de Android Descargar y descomprimir el SDK es solo el primer paso, para poder probar una verdadera aplicación tienes que descargar las diferentes versiones del sistema operativo de Android y todas las herramientas de desarrollo. Este proceso es indispensable porque con estos archivos podrás probar y depurar tus aplicaciones en múltiples versiones de Android. Para actualizar el sistema en un equipo PC debes abrir el archivo "SDK Manager.exe" tal como se aprecia en la imagen.

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

En ambos casos, al abrir el archivo correspondiente, se mostrará el SDK Manager. Éste es una sub-aplicación del SDK de Android enfocada a administrar los paquetes y herramientas del sistema. Con el SDK Manager puedes descargar cualquier versión disponible de Android y probar características adicionales como desarrollo de aplicaciones para Google TV o hacer uso de las capacidades multipantalla o 3D que tienen algunos dispositivos Android. Cada vez que se lanza una actualización o nueva versión de Android y sus herramientas, el SDK Manager te mostrará la opción de instalarla o actualizarla en tu ordenador. Se recomienda chequear con frecuencia esta aplicación para tener la versión más actualizada del SDK. En el SDK manager, cada versión del sistema operativo Android o su API se muestra como una carpeta. Dentro de

la carpeta de cada API hay una cantidad variable de elementos relacionados con cada versión específica, pero dos de esos elementos se repiten consistentemente: "SDK Platform" y "Google API's by Google Inc". Para instalar una versión de Android es requisito instalar al 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 sistema operativo es necesario chequear la casilla correspondiente al paquete que se desea instalar y luego presionar el botón "Install package" que descarga e instala todos los archivos necesarios automáticamente.

La vista por defecto, clasifica las actualizaciones por versión de la API de Android. Por ejemplo, los paquetes relacionados con Android 2.2 ( Froyo ) aparecerán en una carpeta, mientras que los de Android 2.3 ( GingerBread ) están en otra carpeta separada. Cada una de las versiones de Android puede tener en promedio unos 150 MB, la descarga de varios de ellos puede tomar un periodo considerable de tiempo y espacio en el disco duro.

Creación y configuración de AVD’s Los AVD ( Android Virtual Devices ) son las "máquinas virtuales" que nos permiten probar versiones específicas de Android así como diferentes configuraciones de hardware. Gracias a los AVD’s se pueden probar aplicaciones en cualquier versión de Android con cualquier configuración de hardware de manera virtual, sin tener que comprar el equipo físico, reduciendo así los costos y el tiempo de depuración. Para crear una AVD es necesario abrir el SDK Manager tal como se detalló en el apartado anterior, buscar la sección "Tools" y seleccionar la opción "Manage AVDs...":

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

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

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

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

Emular elementos de Hardware En algunos casos es necesario emular elementos del hardware como la cámara o el GPS, el emulador de Android permite depurar el sistema usando estos elementos dentro de sus máquinas virtuales. Para agregar un elemento de hardware, selecciona cualquier AVD de la lista del AVD manager y presiona el botón "Edit". Busca el apartado "Hardware" y presiona el botón "New". Esto desplegará una ventana con una lista de sensores y capacidades de software, en este caso seleccionaremos la opción GPS para darle soporte a cualquier aplicación que necesite emular el dispositivo de geolocalización.

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

nombre, aparezca que el sensor está activo, igualmente si deseas desactivarlo, puedes hacerlo en esta casilla. Es necesario activar manualmente los sensores para emularlos en el AVD, algunos de los sensores que puedes activar con este procedimiento son: Acelerómetro GPS Brújula Camara Micrófono No solo los sensores se activan en el apartado de hardware, también opciones como la emulación de orientación del equipo o la presencia de un SD card se administran aquí. Si estás usando una aplicación que use cualquiera de esas características, no olvides activarla en tu AVD o sencillamente no funcionará.

Activar el Emulador de Android Para activar el AVD solamente debes seleccionarlo de la lista y presionar el botón "Start..." Una última ventana con las opciones para el AVD aparecerá, selecciona el tamaño y DPI adecuado para tu sistema, de lo contrario el emulador puede aparecer en escala incorrecta. Presiona el botón "Launch" para arrancar el AVD.

Después de unos minutos el emulador de Android se mostrará en tu ordenador, el emulador es una copia fiel de un dispositivo tal y como funcionaria con el sistema operativo que le fue asignado.

¿Que versión de Android usar para probar? Android es al momento de escribir este manual, el sistema operativo móvil más popular del mundo. Existen literalmente miles de equipos distintos con diferentes versiones del sistema operativo y diferentes tamaños de pantalla y diferentes especificaciones de hardware, a este fenómeno se le llama fragmentación. Aunque el mercado de Android está muy fragmentado, no quiere decir que no hay tendencias definidas, al momento de 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 dos versiones de Android abarcas casi el 80% de los dispositivos del mercado.

Aun con esta solución sencilla, se recomienda ampliamente descargar todas las versiones de Android y probar las aplicaciones en todas las versiones de este sistema operativo al menos una vez para comprobar si hay soporte o no. También se recomienda revisar constantemente la información actualizada y oficial de penetración de las versiones 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 la proporción de usuarios de cada versión, no dejes que pase mucho tiempo sin revisar esta valiosa información.

ECLIPSE Ampliamente conocido entre los desarrolladores JAVA, Eclipse es uno de los entornos de programación más robustos del mercado. Planeado originalmente como un IDE que funcione con cualquier lenguaje sin estar orientado a ninguno en especial, Eclipse tiene una capacidad camaleónica de adaptarse a prácticamente cualquier lenguaje de programación a través de un completo sistema de plugins que permite incluir todas las herramientas que se puedan necesitar. Por su popularidad entre los desarrolladores JAVA ( la base de Android) y su licencia de código abierto, Google ha creado un muy completo set de herramientas para desarrollar aplicaciones con Eclipse que lo convierte en la mejor opción para crear aplicaciones Android.

Instalar Eclipse Para instalar eclipse en tu equipo, el primer paso es descargarlo gratuitamente en esta dirección ( se recomienda usar la versión "Eclipse Classic" ) http://www.eclipse.org/downloads/ Como se mencionó anteriormente, Eclipse es una herramienta de desarrollo para muchos lenguajes. La versión que estás descargando es la más estándar y no incluye ninguna herramienta para desarrollo de aplicaciones para móviles o PhoneGap, así que vamos a instalar uno por uno todos los plugins para convertir este Eclipse en un entorno de desarrollo PhoneGap.

Instalar el ADT Para desarrollar aplicaciones en Android, Google desarrolló el ADT ( Android Development Toolkit ), un plugin para Eclipse que instala un entorno de desarrollo muy completo para crear aplicaciones de Android. El ADT integra las herramientas y funciones del SDK de Android directamente con el ambiente de desarrollo de Eclipse. Es requisito instalar el SDK de Android antes de instalar el ADT. Para instalar el ADT se debe abrir Eclipse y allí dirigirse a Help > Install new software

En la ventana emergente, encuentra el botón "add" y haz click allí. Esto te permitirá agregar un nuevo repositorio de software, desde el cual se descargará el ADT. Cuando el sistema lo solicite, debes incluir un nombre para el plugin y la dirección del repositorio: http://dl-ssl.google.com/Android/eclipse/

El paso final es configurar el ADT, para esto, selecciona la opción Window > Preferences ( en equipos Mac OS la opció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" y define la ruta a la carpeta donde guardaste el SDK de

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

Instalando PhoneGap En la documentación oficial de PhoneGap, se muestra un procedimiento de instalación para Android que incluye descargar el plugin y modificar varios archivos para ejecutar el framework, el proceso es francamente complicado e ineficiente. Además de tomar mucho tiempo, es necesario repetirlo en cada proyecto que se crea. Por esta razón en este manual usaremos otro procedimiento mucho más práctico. Vamos a utilizar el plugin MDS de AppLaud que elimina ese proceso complicado y permite crear proyectos PhoneGap en un solo clic. Para instalar este y cualquier otro plugin, se sigue el mismo proceso que acabamos de realizar para instalar el plugin de ADT: se abre la opción: Help > Install new software

En la ventana emergente debes insertar un repositorio. La dirección del repositorio de Applaud es: http://svn.codespot.com/a/eclipselabs.org/mobile-webdevelopment-with-phonegap/tags/r1.2/download/

Recuerda actualizar periódicamente este plugin para asegurarte que usas la última versión de PhoneGap en tu proyecto. Generalmente Applaud actualiza su versión un par 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 adicionales en Eclipse, vamos a utilizar estas nuevas herramientas para crear una aplicación PhoneGap para Android.

Aplicación básica Para crear tu primera aplicación PhoneGap en Eclipse tienes primero que crear un nuevo proyecto. Para esto haz clic en el icono del MDS de AppLaud

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

En el futuro, cuando desees crear nuevas aplicaciones, lo recomendable es escoger la opción "Minimal PhoneGap project" en la sección "Project Contents", esto creará un proyecto en blanco, listo para que puedas arrancar una nueva aplicación. En la siguiente pantalla debes elegir un nombre para tu proyecto, una vez definido presiona de nuevo "Next"

Ahora, debes elegir la versión base de SDK para tu aplicación. Al elegir una versión específica en la que darás soporte, tu aplicación se vincula a las funciones de una versión de Android en especial. Antes de elegir, toma en cuenta que al seleccionar versiones más recientes, es posible que no le puedas dar soporte a equipos con sistemas operativos más antiguos. Para garantizar una mejor distribución y soporte de tu aplicación, elige como base Android 2.2 ó 2.3.3 que son

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

En la última pantalla, debes definir la información de tu proyecto. En este punto, el dato más importante es el Package Name. Para definirlo debes seguir la siguiente nomenclatura:

[extensión de tu dominio]. [nombre de tu dominio].[ nombre de tu aplicación ] Por ejemplo, si mi dominio es "revolucion.mobi" y mi aplicación se llama "demo", debo definir el package name como "mobi.revolucion.demo", si mi dominio fuera google.com, debo definirla como "com.google.demo"

Al presionar el botón "Finish" automáticamente se crearán todos los archivos que necesitas para crear una aplicación PhoneGap. En el archivo index.html encontrarás la base de tu aplicación. La configuración que elegimos para este proyecto de prueba, creará una aplicación de demostración en este archivo.

-Configurar y activar el emulador Para probar tu aplicación en el emulador de Android es necesario configurar el ambiente de depuración. Para realizar este proceso tienes que seleccionar la opción "Debug Configurations"

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

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 el proyecto en el que estás trabajando.

Por último haz clic en "Apply" y luego en "Debug" para compilar 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 de Android.

Si haces cambios en tu aplicación y quieres verlos en el emulador simplemente guarda estos cambios y vuelve a presionar el botón de "debug". Esta vez aparecerá la configuración que ya tienes guardada, solo debes elegirla para probar la nueva versión de tu aplicación. Cuando envíes de nuevo tu aplicación a depuración no cierres el emulador, ésta se instalará y actualizará automáticamente en el emulador, ahorraras mucho tiempo evitando reiniciar el sistema operativo.

SDK DE IOS Instalación Si deseas crear programas para la plataforma móvil de Apple y probarlos en tu equipo, es necesario bajar el SDK de iOS, el sistema operativo de los equipos iPhone, iPad y iPod Touch. A diferencia del SDK de Android que es independiente del 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 para iOS y al instalarlo se instala también todo el paquete del SDK de iOS. El Xcode 4 puede instalarse únicamente en equipos Apple y se requiere al menos OS X 10.7.0 Lion o superior. Para descargar Xcode 4 solamente debes abrir el App Store incluido en todas los equipos de escritorio Apple con sistema operativo Lion o superior

Debes buscar Xcode en la tienda y hacer la descarga del programa. Esto descargará un instalador, que a su vez te permite descargar a tu ordenador todos los archivos de Xcode.

La instalación tomará un tiempo porque descargarás al mismo tiempo los instaladores de Xcode, el SDK de iOS y el emulador de este sistema operativo. El peso aproximado del archivo de instalación es de 1.8 GB Descargar Xcode y el SDK de iOS es gratuito. Este software te permitirá crear y emular aplicaciones en el ordenador. Para publicar y probar aplicaciones en el

móvil deberás inscribirte en el programa de pago de Apple. Una vez finalizada la instalación de Xcode tendrás instalado en tu ordenador todo lo necesario para crear apps para el sistema operativo iOS

Instalar PhoneGap en Xcode Para crear tus aplicaciones PhoneGap desde Xcode, tienes primero que descargar la ultima versión en el sitio de PhoneGap ( http://www.phonegap.com/download ) Para efectos de redacción y sencillez para el lector, en este libro vamos a utilizar la versión 1.9.0 de PhoneGap también disponible en el sitio de descarga. Al momento de escribir este libro, el instalador de PhoneGap 2 aun no tiene soporte para plantillas en Xcode. Para crear tu proyecto usando la última versión de PhoneGap debes hacerlo a través de la línea de comandos. Puedes encontrar los detalles en la guia oficial:

http://docs.phonegap.com/en/2.0.0/guide_gettingstarted_ios_index.md.html#Getting%20Started%20with%20 Una vez descargada la versión 1.9.0 de PhoneGap debes descomprimir el archivo que acabas de descargar y ejecutar el instalador. El archivo de instalación está en la carpeta "/lib/ios/" asegúrate de abrir el archivo con la extensión ".dmg"

Finalizado el proceso de instalación podrás crear aplicaciones PhoneGap desde Xcode. Vamos a utilizar estas nuevas herramientas para poner manos a la obra y crear una aplicación iOS

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

En la ventana emergente podrás elegir que tipo de archivo deseas crear. Busca en la lista de la izquierda la opción iOS > Application y selecciona la opción "Cordova-based Application".

En la siguiente ventana debes elegir el nombre de tu aplicació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 tu dominio es google.com, usa como identificador: com.google

Presiona "Next" y guarda el proyecto en algún lugar de fá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 y aparecerá el emulador con un mensaje similar a este:

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

una carpeta llamada "www" en tu proyecto, debes incluirla dentro de Xcode para que la utilice como base de tu app. Para encontrar la carpeta selecciona la raíz de tu proyecto, haz click derecho y selecciona la opción "Show in Finder"

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

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

Aunque la carpeta www ya es parte del proyecto, este proceso la incluirá gráficamente en el editor. Asegurate de seleccionar la opción "Create folder references for any added folders"

Para editar tu aplicación abre la carpeta www que ahora aparece 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 Hola mundo Hola mundo!

Salva los cambios y presiona de nuevo el botón "Run" Luego de unos segundos, tendrás lista tu primera aplicación hecha en Xcode, que se debe ver muy parecida a 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 por Adobe Systems. Es muy popular entre los desarrolladores web y desde hace más de una década es la herramienta por excelencia para crear la web. Desde la versión CS5.5 se incluye integración con tecnologías enfocadas al desarrollo de aplicaciones móviles como jQuery Mobile, HTML5 y CSS3, además del soporte para crear y probar aplicaciones nativas basadas en PhoneGap. Con la adquisición de Nitobi (creadores de PhoneGap) Adobe mejoró la integración de Dreamweaver con PhoneGap e incluyó la opción de compilar aplicaciones desde la nube a través del servicio PhoneGap Build. Esta nueva forma de crear aplicaciones permite desarrollar y publicar aplicaciones móviles sin depender de ningún sistema operativo en particular. Dreamweaver abre la opción para que sus usuarios puedan crear aplicaciones para plataformas que antes eran incompatibles, ahora es posible crear aplicaciones para iOS sin necesidad de usar un equipo Apple o desarrollar aplicaciones para Blackberry desde Linux o Apple sin

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

Instalar Dreamweaver En este libro usaremos como referencia la versión en inglés de Dreamweaver CS6. Si aun no lo tienes instalado puedes bajar una versión de prueba por 30 días en el sitio de Adobe: http://www.adobe.com/es/products/dreamweaver.html Para descargar este programa es necesario crear una cuenta gratuita con Adobe o "Adobe ID", esta cuenta también puede ser utilizada para otros servicios como PhoneGap Build. Gracias a que Dreamweaver está totalmente integrado con PhoneGap, no es necesario instalar ningún software adicional. Tampoco es necesario realizar ninguna configuración extra, el programa viene listo para crear aplicaciones PhoneGap de inmediato.

Aplicación básica El primer paso para crear una aplicación con Dreamweaver es crear un nuevo proyecto o "sitio". Para crear un nuevo sitio debes ir a Site > New Site.

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

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

File> new.

En la pantalla de nuevos documentos encontrarás muchas opciones para crear la base de una aplicación, en este caso escoge: Blank Page > HTML > y asegurate que el DocType esté definido en HTML5.

En el nuevo documento que acabas de crear, copia este código: Ejercicio 6.1:

Hola Mundo Hola Mundo! Mi primera app hecha con Dreamweaver CS6 Como puedes notar, se está incluyendo en el código una llamada a un archivo "phonegap.js". Este archivo es el que 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, se encarga de agregar automáticamente la versión más actualizada de la librería, esta funcionalidad es particularmente útil tomando en cuenta que el proyecto PhoneGap es sumamente activo y las versiones cambian muy rápido, ahora tienes la seguridad de usar siempre la versión más actualizada sin necesidad de modificar el código.

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

-Configuración de Dreamweaver Aunque este paso no es un requisito para crear aplicaciones, si deseas probarlas en un emulador Android local es necesario que descargues e instales el SDK de Android tal como se indica el Capítulo 3 de este libro y que configures Dreamweaver para instalar aplicaciones 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 instalaste el SDK de Android, usa el icono de carpeta para navegar en tu ordenador y seleccionar la carpeta correspondiente.

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

Compilar en la nube con PhoneGap Build Para crear una aplicación PhoneGap desde Dreamweaver debes seleccionar la opción: File > Phonegap Build Service > PhoneGap Build Service.

Dreamweaver envía todos los archivos del proyecto al servicio PhoneGap Build. Este servicio se encarga de procesarlos y compilarlos automáticamente en 6 diferentes plataformas ( iOS, Android, Windows Phone, Blackberry, webOS y Symbian). Antes de enviar tus archivos a PhoneGap Build es necesario que crees una cuenta gratuita e ingreses con tu

nombre y password registrados. Gracias a que PhoneGap Build es parte de Adobe puedes utilizar el Adobe ID que creaste previamente para bajar tu copia de Dreamweaver CS6.

La primera vez que ejecutas un proyecto en PhoneGap Build, el sistema va a solicitar un archivo de configuració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 detalles de configuración de la aplicación. Tu aplicación será enviada inmediatamente a PhoneGap Build. En el panel de control de PhoneGap podrás ver las diferentes versiones de tu aplicación en 5 diferentes plataformas.

-Probar aplicaciones Dreamweaver CS6 te da 3 diferentes opciones para probar las diferentes versiones de tus aplicaciones PhoneGap: Emulador: Descargar tu aplicación de la nube y ejecutarla en un emulador local. Probar en equipo: Escanear un código QR para ejecutar tu aplicación en un dispositivo físico. Descarga: Guardar la aplicación compilada en la nube, en tu disco duro. Por ahora, para ver tu primera aplicación, elige la opción Emulador para probar tu aplicación localmente. En cuanto la aplicación se descargue la nube y esté lista para ser probada en tu ordenador, debes elegir un AVD para ejecutarla.

Puedes elegir un AVD pre existente o crear uno presionando el botón "AVD". Una vez elegido el AVD presiona el botón "Launch" para instalar tu aplicación en el emulador. Luego de unos minutos, tu aplicación estará disponible en el emulador de android

ESTRUCTURA DE UNA APLICACION PHONEGAP Las aplicaciones PhoneGap tiene una estructura definida en su código y componentes externos. Una vez terminada la aplicación, es posible que sea necesario configurar algunos elementos externos a la programación de la misma, como la orientación en pantalla o los iconos que identificaran al programa dentro del sistema. Esta configuración en PhoneGap varía según el sistema operativo en que se desea publicar. En este capítulo examinaremos las partes que componen una aplicación PhoneGap: las partes del código, la integración de PhoneGap con un documento HTML, la estructura de los archivos y la configuración específica para Android y iPhone.

Estructura html -Doctype El doctype define el tipo de documento que vamos a utilizar. Aunque es posible utilizar diferentes Doctypes en PhoneGap, en este manual vamos a utilizar el estándar HTML5 para aprovechar al máximo esta nueva tecnología. En la próxima sección hablaremos con detalle del HTML5, por ahora incluiremos en la primera línea de la aplicación el doctype: Esto definirá el documento que utilizaremos como uno de tipo HTML 5, ahora vamos a construir un documento completo. Ejercicio 7.1 Ejercicio 7.1

Mi primer app Botón Cualquier documento, como este, puede convertirse en una aplicació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. En la misma carpeta en que tienes almacenado el documento base, crea una carpeta con el nombre "css", dentro de ella crea un nuevo documento y nombra el archivo como: "hojaDeEstilos.css". Dentro de él incluiremos los estilos de 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, se debe agregar esta linea antes de 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 y apariencia gráfica pero aún no tiene ninguna funcionalidad. Muchas aplicaciones pueden continuar su desarrollo y llegar a publicarse sin mayor problema con la funcionalidad actual, pero si queremos que la aplicación tenga acceso a sensores como la cámara, brújula o el GPS, es necesario que incluyamos la librería Cordova que se encargará de conectar nuestra aplicación con el hardware del dispositivo y nos dará acceso a los sensores. Para conectar la aplicación con Cordova solamente es necesario copiar la el archivo javascript de Cordova en la raíz del proyecto (en caso de que no esté presente aún) e invocarla copiando esta línea antes de La librería Cordova se encuentra en los archivos de instalación de PhoneGap. Según el programa de desarrollo que se utilice es posible que el archivo Cordova se copie automáticamente en el proyecto.

El nombre del archivo de cordova cambia según la versión, en el ejemplo actual se muestra simplemente como "cordova.js" para efectos de redacción. Recuerda actualizar tu código según la versión que corresponda. Si deseas agregar otras librerías de javascript se deben incluir de la misma forma, en las líneas subsecuentes. También es posible incluir código JavaScript directamente en el documento a través de la etiqueta . Vamos a darle algo de acción a la aplicación de ejemplo incluyendo este código antes de : document.getElementById("boton1").onclick = function(){alert(" haz hecho click")} Este comando básico de javascript selecciona el botón que estaba inactivo y muestra una alerta de texto al hacer click. Más adelante en este manual vamos a explorar con detalle el uso de JavaScript en PhoneGap. Continuemos explorando la estructura de una aplicación con algo un poco más interesante, en el próximo apartado vamos a acceder información del dispositivo.

Eventos de PhoneGap En el ejemplo anterior utilizamos el evento "onclick" que se activa como es de sospechar cuando se hace click sobre un elemento. PhoneGap tiene también sus propios eventos que nos indican estados del dispositivo en el que trabajamos. El más importante de todos los eventos de PhoneGap es "deviceready" que nos indica cuando el dispositivo esta listo para enviar y recibir información de la API de PhoneGap. Este evento es independiente de la carga de la aplicación, así que aunque la aplicación ya esté completamente cargada y funcional no quiere decir que ya tenga acceso a los sensores del dispositivo, eso puede tomar un tiempo variable según el sistema operativo y capacidad del equipo. Es crucial que toda aplicación que utilice la API de phoneGap se inicialice después del evento "deviceready" de lo contrario, es casi seguro que la aplicación despliegue errores de comunicación con la API y obtengas resultados inconsistentes o erróneos. Para agregar este importante evento debes incluir esta línea de código justo después de la línea que incluye la

librería Cordova. document.addEventListener("deviceready", dispositivoListo, false); En este caso lo que sucederá es que cuando el dispositivo en el que se ejecute la aplicación esté listo para enviar y recibir 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, puede ser: function dispositivoListo(){ alert(" tu dispositivo esta listo para usar la API de PhoneGap") } Para este punto, el código completo de la aplicación es: Ejercicio 7.2

Ejercicio 7.2 document.addEventListener("deviceready", dispositivoListo, false); function dispositivoListo(){ alert(" tu dispositivo esta listo para usar la API de PhoneGap") } Mi primer app Botón

document.getElementById("boton1").onclick = function(){alert(" haz hecho click")} Una vez compilado el ejercicio, se mostrará una ventana de alerta en cuanto el dispositivo este listo para ejecutar PhoneGap, similar a esto:

Ya estas usando HTML5, invocando una hoja de estilos externa y la librería Cordova se inicializa perfectamente.... ¡nada mal para comenzar!

Archivos de un proyecto PhoneGap Cuando se crea un proyecto PhoneGap, tal como vimos en los ejemplos anteriores, utilizamos una serie de archivos de diferentes formatos como JavaScript ó CSS. En general los dos archivos con los que vamos a trabajar en PhoneGap serán: index.html: este archivo es la base de toda aplicación PhoneGap, es crucial que toda aplicación contenga un archivo con exactamente ese nombre y extensión ( sin mayúsculas, ni espacios ) de lo contrario, la aplicación no funcionará correctamente. cordova.js: la conexión entre el documento HTML y la API de PhoneGap. Este archivo permite ejecutar comandos en lenguaje JavaScript que, gracias a PhoneGap pueden interactuar con el hardware del equipo móvil. El nombre de este archivo cambia según la versión, usando la nomenclatura: Cordova-X.x.js donde "X.x" es el número de la versión actual. En este libro solo aparecerá con el nombre "cordova" sin número de versión para efectos de redacción. Recuerda siempre actualizar tu código para que se ajuste a al nombre del archivo que utilizas.

El resto de archivos son opcionales, pero como buena práctica se recomienda crear carpetas por cada tipo de archivo (ej: hojas de estilo en una carpeta "css" y javascript en la carpeta "js") en caso de usar archivos JavaScript y CSS adicionales. Todos estos archivos son la parte visible de una aplicación, detrás de ella, hay una serie de archivos permitirán el acceso nativo a los sensores y demás hardware del dispositivo móvil. Por regla general, los archivos que vamos a trabajar en un proyecto PhoneGap se encuentran en una carpeta llamada "www". La ubicación exacta de esta carpeta cambia según la plataforma, pero en general siempre conserva el mismo patrón. Al trabajar desde la aplicación es acceder con total libertad cualquier archivo que esté dentro de la carpeta "www", el resto de archivos del sistema son de acceso restringido o bloqueado por motivos de seguridad.

Estructura de proyectos en Xcode Xcode fue creado para desarrollar aplicaciones de iOS, los proyectos de PhoneGap son exactamente iguales a un proyecto regular para iPhone/iPad pero con ligeras adaptaciones. Al revisar los archivos del proyecto, encontrarás una carpeta llamada "www" allí están todos los archivos en los que se basa el proyecto, esta carpeta es la raíz de toda aplicación.

En la carpeta "Products" se creará un archivo con el nombre de tu proyecto y la extensión ".app", ese es el proyecto compilado, mas adelante hablaremos de como utilizarlo. La carpeta "Resources" tiene en su interior dos subcarpetas llamadas "icons" y "splash", allí se almacenan los iconos e imágenes de carga de tu aplicación. Por último la carpeta "Supporting Files" tiene un archivo con el nombre de tu proyecto con el sufijo "-Info" y la extensión ".plist", ( Ej: miapp-Info.plist ) este archivo sirve para configurar tu aplicación, más adelante revisaremos las propiedades de este archivo en detalle.

-Estructura de proyectos en Eclipse La estructura de un proyecto PhoneGap en Eclipse se basa en un proyecto nativo de Android con ligeros cambios. La carpeta en la que vamos a trabajar es "assets". Dentro de esa carpeta esta una subcarpeta llamada "www" que es la 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 tu aplicación compilada. Más adelante hablaremos como utilizar este archivo. La carpeta "res" almacena los iconos y pantallas de carga de la aplicación en múltiples resoluciones. Finalmente, en la raíz se encuentra el archivo "AndroidManifest.xml" que se encarga de la configuración de la aplicación. Hablaremos de él en el siguiente apartado.

Archivos de configuración Los archivos de configuración de Android y iOS son muy distintos en su forma y sintaxis, sin embargo, cumplen la misma función: configuran la forma en que la aplicación será ejecutada dentro del dispositivo. Dentro de estos archivos de configuración se esconde información crucial de toda app aquí se definen los iconos que identificaran la aplicación, las pantallas de carga, la orientación y hasta la capacidad de mostrarse a pantalla completa. Vamos a analizar individualmente los archivos de configuración de estos dos sistemas operativos

Configuración en iOS Tal como se menciona en el apartado de archivos de iOS , el archivo de configuración de las aplicaciones iOS se encuentra en la se encuentra en la carpeta "Suporting Files" del proyecto. En los proyectos de iOS generalmente hay dos archivos con la extensión .plist, el que nos interesa es el que tenga el nombre del proyecto con el sufijo "-Info" (ej: si mi proyecto se llama test, el archivo se llamara testInfo.plist). Al abrir este archivo encontraremos una lista de propiedades de la aplicación:

Este archivo de configuración permite modificar varias propiedades, algunas irrelevantes otras que tienen un gran impacto en el comportamiento de la aplicación.

-Mostrar en pantalla completa Vamos a probar lo útil que puede ser este archivo de configuración con un ejercicio simple. La aplicación de prueba que hemos creado, en iPhone se ve por defecto con la barra de status que muestra datos como la hora o el status de la batería:

Si al archivo de configuración le agregamos una linea extra 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 esta aplicación y se mostrará a pantalla completa.

-Permitir acceso a documentos externos Por cuestiones de seguridad la configuración por defecto de las aplicaciones PhoneGap restringen el acceso a cualquier documento externo. Si una aplicación intenta conectarse a un documento online, sencillamente se le bloquea el acceso y aparecerá un error en la consola de depuración reportando que no se tiene acceso al archivo solicitado. Si tu aplicación necesita acceso a archivos externos, es necesario configurarlo en el archivo: "Cordova.plist" que se encuentra en la misma carpeta que los demás archivos de configuración. Abre el archivo, busca el valor "External Hosts" y presiona el signo "+" que esta junto a él. Esto agregara una linea por cada dominio que necesites autorizar, en nuestro caso, vamos para darle acceso a la imagen del ejemplo que se encuentra en el dominio "manualdelguerreromovil.com" agregandolo tal como se ve en la ilustración:

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

-Control de orientación En iOS es posible bloquear la orientación de la aplicación en posición horizontal o vertical evitando la conducta por defecto de rotar la pantalla automáticamente. Es posible editar esta conducta desde el archivo de configuración buscando el valor "Supported Interface orientations". En iOS hay cuatro posibles orientaciones ( horizontal a la derecha y a la izquierda, vertical a la derecha e izquierda) por lo que este valor permite incluir de una a cuatro posibles posiciones soportadas.

La orientación de la aplicación se puede editar también en el 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 archivo de configuración como los iconos y pantallas de carga de la aplicación.

Configuración en Android La configuración de las aplicaciones android se realiza en el archivo llamado AndroidManifest.xml que se encuentra en la raíz del proyecto Android. En el AndroidManifest encontramos todo tipo de detalles sobre la aplicación, como las resoluciones soportadas o los permisos de acceso al dispositivo. Al igual que con la configuración de iOS, este archivo nos permite configurar aspectos importantes de nuestra aplicación.

-Control de orientación Para evitar que la aplicación se ajuste a la orientación del aparato 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