PhoneGap es una tecnología de código abierto, que permite que los desarrolladores construir aplicaciones móviles nativas para todas las plataformas móviles. La mejor manera de pensar en una aplicación PhoneGap, es pensar como un navegador "Chromeless", donde la vista web ocupa todo el ancho y alto de la pantalla. Puedes construir la interfaz de toda la aplicación usando HTML, CSS y JavaScript.

PhoneGap Robot

Desde crear aplicaciones con HTML,CSS y JavaScript, tienes el completo control sobre cómo se ve, se siente, y cómo los usuarios interactuan con ella. Sin embargo, la interfaz de usuario se basa en una visión de la web, por lo que es muy fácil crear aplicaciones que se sienten cómo páginas web en lugar de aplicaciones. Para crear experiencias de aplicación que se sienta más como "apps", tienes que tener en cuenta la experiencia general del usuario y como las personas interactúan como el contenido visual de la aplicación.

Para ayudar a desarrollar y crear experiencias de usuario nativas en aplicaciones PhoneGap, me gustaría presentarles App-UI, un proyecto personal en el que he estado trabajando, que se puede descargar aquí. App-UI es un conjunto de contenedores de código abierto creados con HTML, CSS y JavaScript, el cual provee una experiencia de interfaz de usuario similar a la nativa para su uso dentro de PhoneGap o aplicaciones web. App-UI ofrece lo siguiente:

  • Un simple ViewNavigator para vistas "pushing" y "popping", dentro y fuera de la interfaz de usuario.
  • Un SplitViewController que permite contenido de lado a lado y se ajusta cuando cambias la orientación del dispositivo.
  • Un SlidingView que te permite utilizar un gesto swipe para revelar contenido detrás del contenido principal.

App-UI maneja la parte dura del intercambio de contenido con agradables animaciones y transiciones, permitiéndote enfocarse en la construcción de experiencias de aplicación.

En este artículo, tu aprenderás cómo crear una aplicación básica en Dreamweaver, usando el ViewController e implementar la aplicación en varios dispositivos utilizando la ultima versión de PhoneGap. PhoneGap Build es un compilador basado en la nube para aplicaciones PhoneGap. Todo lo que necesitas hacer es subir el HTML, CSS y JavaScript para PhoneGap Build, y el servicio de PhoneGap Build te proporcionara enlaces para descargar los binarios específicos directamente a tu dispositivo. Toma en cuenta que ni Dreamweaver y PhoneGap está obligado a utilizar App-UI. App-UI trabajará en cualquier experiencia basada en HTML.

Introducción

Lo primero que debes de hacer es descargar App-UI.

Una vez que se haya descargado, vamos a configurar el entorno de desarrollo en Dreamweaver.

  1. Abre Dreamweaver y selecciona la opción Create new Dreamweaver Site en la pantalla de Bienvenida de Dreamweaver(Figura 1):

Pantalla de Bienvenida de DW
Figura 1

  1. Especifica un nombre al sitio y una carpeta donde se almacenará el contenido del sitio en el equipo local. Ignora el tab Servers, ya que se va a utilizar localmente(Figura 2).

Nuevo Sitio
Figura 2

Ingresa la información y haz clic en Save para continuar. Dreamweaver crea el nuevo sitio, pero está vacío por que todavía no tienes los archivos en él; Dreamweaver mostrara nuevamente la pantalla de Bienvenida.

Ahora que configuraste el sitio de Dreamweaver, podrás empezar a crear la aplicación.

Construir la Aplicación

Ahora que ya esta configurado el sitio en Dreamweaver, pueden comenzar a construir tu aplicación. Primero configura las librerías y, entonces, aprende acerca de lo que hace esta aplicación.

Configuración de las librerías en tu aplicación

  1. En la pantalla de Bienvenida de Dreamweaver, selecciona la opción de Create New HTML para crear un nuevo archivo HTML, como se muestra en la Figura 3.
  2. Pantalla de Bienvenida 2
    Figura 3

Dreamweaver muestra la interfaz del editor HTML. Primero, debes configurar el contenido inicial HTML siguiendo estos pasos:

  1. Agrega el siguiente código HTML y guardalo como index.html. Este será el punto de partida de tu aplicación.

  1. Localiza el archivo ZIP que contiene App-UI que descargaste anteriormente. Extrae el archivo ZIP y copia las librerías y la carpeta viewnavigator dentro de tu proyecto de Dreamweaver. Si has copiado las carpetas correctamente, entonces deberías ser capaz de verlos en la vista de Archivos (Files view) de Dreamweaver.
  2. Para incluir apropiadamente los enlaces de script y CSS en el archivo HTML (para poder usarlos dentro de la experiencia HTML), agrega las siguientes lineas como un hijo de la etiqueta head en el archivo index.html

App-UI utiliza jQuery, jQuery.animate.enhanced, iScroll, y algunas otras librerías de código, para crear la experiencia general de la aplicación. La librería de jQuery es una herramienta que acelera la solución, haciendo la experiencia de codificación general de JavaScript más fácil. La librería jQuery.animate.enhanced se utiliza para animaciones de transformación CSS3 en lugar de posicionamiento "top" o "left". Las transformaciones CSS3 son aceleradas por hardware en muchas platadormas móviles, incluyendo iOS de Apple y la última versión de Android, y proporciona una mejor experiencia de usuario. La librería iScroll es utilizada para un desplazamiento táctil consistente de contenido en dispositivos móviles. Los archivos viewnavigator.css y viewnavigator.js contienen la lógica principal del componente ViewNavigator del ejemplo.

También hay un enlace a cordova-1.7.0.js, pero puedes notar que no hay realmente un archivo con este nombre dentro del proyecto. No te preocupes, no falta ningún archivo. PhoneGap Build agrega este archivo automáticamente cuando se carga el código. Esto se discute con detalle más adelante en este artículo.

Inicializa el contenedor de la aplicación app-UI y le proporcionara una vista predeterminada. En el ViewNavigator de App-UI, las vistas se agregan o se eliminan desde la interfaz de usuario haciendo de las funciones pushView, popView o replaceView. El parámetro de la función pushView es un objeto JavaScript que requiere el título de los atributos y vistas, lo que yo nombro "view descriptor". El atributo de la vista debe ser una referencia de jQuery a un elemento del DOM.

El siguiente código es ejecutado en el evento "ready " de jQuery. Este crea una instancia de ViewNavigator a la etiqueta <body> del HTML y empujara al view descriptor inicial dentro de la instancia del ViewNavigator.

Puedes habilitar la vista previa dentro Dreamweaver a lado de tu código para tener un vista interactiva de la aplicación. Si lo haces, veras un encabezado azul que contiene le titulo y el área principal del cuerpo contendrá el div de animación, como se indico en el view descriptor.

Vista Live
Figura 4

 A continuación, vamos a solicitar algunos datos y ponerlos dentro de la vista. En este ejemplo, vamos a consumir datos de la API Rotten Tomatoes, la cual ofrece reseñas de las ultimas películas que hay en los cines. Tendrás que obtener una clave usar la API de Rotten Tomatoes, para usarla en este ejemplo.

  1. Dentro del bloque de <script>, agrega las siguientes variables, que utilizaras en el ejemplo:

  1. Agrega el siguiente código dentro de la función <ready>. Utiliza el método AJAX de jQuery para solicitar asincronamente los datos desde Rotten Tomatoes, que se puede utilizar para actualizar la interfaz de usuario.

Una vez que se recuperan los datos desde el servidor, se almacenaran en la variable rootData, y entonces la función renderDefaultView es invocada. Ahora vamos a examinar esta función.

Función rederDefaultView

La función rederDefaultView accederá a la vista raíz que hemos creado anteriormente y eliminará sus elementos secundarios. A continuación, se hará un ciclo con las películas que fueron recibidas desde el API de Rotten Tomatoes y creara un cadena de HTML que contenga todas las películas. Una vez que la API crea la lista. la cadena HTML se establece como la vista raíz y luego el área del ViewNavigator se restablece mediante la función resetScroller().

Si detiene y previsualizar el contenido ahora, veras que una vez que se han cargado los datos, se muestran como una lista HTML dentro del ViewNavigator.

Vista ViewNavigator con Datos
Figura 5

Dentro de la función renderDefaultView(), puedes notar que cada elemento de la lista tiene un controlador de eventos clic. Si haces clic en un elemento de la lista, recibirás un error de tiempo de ejecución porque todavía no hemos definido la función rederDetails. Vamos a hacerlo ahora…

Función renderDetails()

La función renderDetails convierte los datos de la fila seleccionada, en una cadena HTML, crea un view descriptor y luego hace la instancia de ViewNavigator con la función de pushView(). La función renderDetails acepta un parámetro index de tipo entero, que corresponde al index del arreglo correspondiente a rootData, el cual contiene los datos recuperados de la API de Rotten Tomatoes.

Lo primero que se debe hacer con la función renderDetails, es quitar la clase CSS listSelected de todos los elementos del <li> en la vista predeterminada. Ya que no hemos añadido los estilos CSS, no notaras la diferencia en este punto, sin embargo, más adelante añadiremos una clase CSS a que elemento de la lista ha hecho clic el usuario.

Después de definir los estilos en el elemento list, la función renderDetails genera una cadena HTML que se utilizará para mostrar los detalles de la película. En este caso, solo se utiliza la manipulación de cadenas raw, sin embargo, si se desea utilizar una librería de plantillas HTML, se puede usar aquí.

Una vez que se ha generado la cadena HTML, un view descriptor es creado y enviado dentro del ViewNavigator usando la función pushView().

Puedes notar que en este caso, el view descriptor tiene un atributo backLabel que especifica la etiqueta de texto que se muestra en el botón Back, que crea automáticamente el ViewNavigator. Si haces clic en el botón Back, la vista actual extrae o elimina la instancia de ViewNavigator, y muestra la ultima vista.

Si ejecutas este ejemplo ahora, veras que si das clic en un elemento de la lista, muestra los detalles de la película dentro del navegador, como se muestra en la Figura 6.

Detalle de Película
Figura 6

En este punto, tenemos la lógica para crear una instancia de ViewNavigator, que hace una solicitud de datos desde el servidor y muestra los datos que están dentro de ViewNavigator. El ViewNavigator tiene estilos predeterminados y maneja las transiciones entre el contenido, pero en general la aplicación no se ve muy pulida.Vamos a cambiar eso.

A continuación agrega el CSS de estilos que mejora el aspecto de la aplicación.

  1. Agrega el elemento <style> a tu HTML, y agrega los siguientes estilos.

El estilo aplicado a "*" establece el tipo de fuente de toda la experiencia. La aplicación utiliza la fuente Arial en lugar del tipo de letra predeterminado Times New Roman. El estilo CSS listSelected cambia el color de fondo del elemento de la lista al que el usuario da clic. Esto da la representación visual de un elemento seleccionado. Los estilos de ul, li y viewNavigator_contentHolder formatean la lista de HTML para que luzca mucho mas a una lista real que esperarías dentro de una aplicación.

Formato de la Lista con CSS
Figura 7

Ahora que tenemos la lista con formato, vamos a añadir algunos formatos a la vista de detalles de la película seleccionada.

  1. Agrega los siguientes estilos CSS.

El estilo #detail de CSS se aplica al <div> que contiene los detalles de la película. Simplemente se añade un padding alrededor del contenido HTML para tener un borde visualmente agradable. El estilo moviePoster agrega un padding y un border alrededor de la imagen del poster de la película y floats a la derecha del contenido descriptivo. El estilo #detail li CSS aplica las reglas de formato a la lista que contiene a los miembros del elenco.

Formato de Lista de Detalles
Figura 8

Ahora bien hemos formateado el contenido dentro de la experiencia de aplicación, sin embargo, se siguen utilizando los estilos predeterminados del framework App-UI -La cabecera azul y fondo blanco-. Vamos a añadir algunos CSS para cambiar esto.

Fondo del encabezado
Figura 9

  1. Para cambiar el estilo del encabezado en la App-UI, basta con cambiar el estilo de viewNavigator_header y especificar una dirección URL de la imagen de fondo.

  1. Agregamos un fondo sutil. Primero, establecemos el color de fondo del viewNavigator_content y viewNavigator_contentHolder de estilos CSS y, posteriormente, añadimos una imagen de fondo a los estilos #detail y #rootView de CSS. Después de haber añadido una imagen gris claro de un tomato para agregar dimensión visual sin atiborrar la interfaz de usuario.

  1. Por defecto, el botón Back de la App-UI tiene esquinas redondeadas. Para hacer que el botón tenga esquinas cuadradas y hacer el color más oscuro, utiliza el siguiente estilo CSS:

Si previsualizas la aplicación, veras los nuevos estilos en el header y el fondo sutil como se muestra en la imagen:

Vista Previa de Estilos
Figura 10

PhoneGap Build

Ahora que la aplicación esta completa, es tiempo de instalarla en los dispositivos.

  1. Crea una cuenta en PhoneGap Build. Con PhoneGap Build puedes cargar tu contenido directamente en el sitio de PhoneGap Build, apuntar PhoneGap Build a un repositorio en Git, o publicar tu código en PhoneGap Build desde Dreamweaver. A pesar de la opción que elijas para llevar tu código a PhoneGap Build, PhoneGap Build realizara una compilación (basada en la nube) de binarios de la aplicación que puedes descargar e instalar en tu dispositivo.

Ya que he estado trabajando con Dreamweaver en este ejemplo, usare la integración de PhoneGap Build con Dreamweaver CS6.

  1. Abre PhoneGap Build y ve al menú Site. Selecciona la opción PhoneGap Build Service > PhoneGap Build Service.

Menú de PhoneGap Build
Figura 11

  1. Entra en tu cuenta de PhoneGap Build. Una vez te has identificado, PhoneGap Build mostrara la pantalla de configuración del proyecto.

Proyecto en PhoneGap Build
Figura 12

  1. Selecciona la opción Create as new project y da clic a Continue. Esto crea un nuevo archivo llamado config.xml que contiene la metadata de tu aplicación PhoneGap. Para personalizar los metadatos de tu aplicación, incluyendo su nombre e identificador único, samplemente edita el archivo config.xml. Puedes leer más acerca del archivo config.xml en la Documentación de PhoneGap Build.
  2. Dreamweaver cargara tu código a PhoneGap Build y automáticamente comenzara a compilar tu aplicación. Una vez se ha compilado tu aplicación, la ventana del servicio de PhoneGap Build mostrara un mensaje: “Build Complete” y te presentara opciones para descargar el código a tus dispositivos.

Estatus de PhoneGap Build
Figura 13

Nota: Para desarrollar exitosamente para iOS, necesitaras una Cuenta de Desarrollador de Apple valida, y deberás Cargar tus Certificados Provisionales para el Servicio de PhoneGap Build.

  1. Da clic al botón QR code, para mostrar un código QR dentro de la ventana. Puedes usar un lector de códigos QR para descargar la aplicación.

Descarga del archivo binario de la aplicación
Figura 14

Conclusión

PhoneGap Build se deshace del dolor de compilar para múltiples plataformas, y compila los archivos binarios de la aplicación para las plataformas especificas (IPA, APK, XAP, etc). PhoneGap Build proporciona unos enlaces para descargar estos archivos e instalarlos en los dispositivos con facilidad. No tienes que configurar ambientes de desarrollo independientes para cada plataforma.

Ejecución de la Aplicación en los dispositivos
Figura 15

Puedes usar PhoneGap fácilmente para crear aplicaciones instaladas de forma nativa utilizando HTML, CSS y JavaScript. App-UI es una colección open source de contenedores de aplicaciones que brindan experiencias nativas basadas en HTML. PhoneGap Build es un servicio para simplificar tu desarrollo multiplataforma con PhoneGap.

A donde ir desde aquí

Para aprender más acerca de PhoneGap, revisa la colección de artículos de la Conexión de Desarrollo de Adobe para PhoneGap, o las guías de inicio con PhoneGap.

Para aprender más acerca de App-UI, revisa el proyecto open source.

Para aprender más acerca de PhoneGap Build, revisa build.phonegap.com.

La versión original de este artículo está publicada en Adobe Devnet bajo licencia Creative Commons, fue traducido y adaptado en nuestro blog por Margarita García.