Share
En esta serie, desarrollaremos un cliente de Twitter utilizando los marcos jQuery Mobile y PhoneGap. Este proyecto se implementará en entornos Android e iOS como una aplicación nativa. La interfaz de usuario de la aplicación, llamada simplemente "Tweets", se construirá utilizando jQuery Mobile y PhoneGap se usará para crear la aplicación nativa. También utilizaremos la API de almacenamiento de PhoneGap para acceder a la funcionalidad de base de datos nativa. Toda la codificación se realizará con HTML y JavaScript utilizando jQuery, jQuery Mobile y las bibliotecas de PhoneGap..
Las principales características de la aplicación Tweets discutida en esta serie son las siguientes:
Accentsconagua
línea de tiempo del usuario y buscar. El código de la aplicación se basa en la función jQuery ajax () para acceder a esos métodos API.Este tutorial ha sido organizado en 4 partes. En la siguiente sección de la Parte I, llamada "jQuery Mobile y PhoneGap", presentamos brevemente jQuery Mobile y PhoneGap y discutimos el desarrollo de aplicaciones nativas multiplataforma utilizando esos marcos. En la siguiente sección, "Flujo de pantalla", presentamos la aplicación Tweets y describimos su flujo de pantalla. La sección denominada "Estructura de la página de jQuery Mobile" es una introducción a varios conceptos de alto nivel en el marco de jQuery Mobile, en particular, las páginas de contenido y contenido..
En la Parte II, comenzaremos a revisar la aplicación de Tweets. En "Review Of index.html", nuestro enfoque principal es la estructura estática del código HTML y jQuery Mobile que conforma las pantallas de la aplicación. La sección llamada "API de Twitter" ofrece una descripción general de los métodos de la API de Twitter. línea de tiempo del usuario y buscar. La siguiente sección, "Revisión de código", ofrece una revisión del código JavaScript que implementa la funcionalidad de la aplicación. La Parte II discutirá "Carga de página inicial", "Funciones de utilidad" y "Funciones de acceso a la base de datos", y comenzará la discusión sobre "Funciones de lógica de negocios principales".
En la Parte III, continuaremos inspeccionando las "Funciones básicas de la lógica de negocios", comenzando desde donde las dejamos en la Parte II y finalizando la revisión del código de la aplicación de Tweets observando "Controladores de eventos" y "Funciones de visualización de página".
La parte final de nuestro tutorial, Parte IV, comienza con la sección llamada "Archivos en el archivo de descarga", donde describimos el contenido del archivo comprimido que acompaña a esta serie. En "Temas específicos del entorno", explicamos cómo importar la aplicación en Eclipse para la plataforma Android y Xcode para la plataforma iOS. En esa sección, también ofrecemos imágenes de pantalla de la aplicación en un teléfono con Android, un iPod touch y un iPad 2. Finalmente, damos las observaciones finales en "Conclusiones"..
Todos los íconos e imágenes de bienvenida en el archivo de descarga han sido creados en base a un conjunto de íconos provisto por Smashing Magazine. Como se indica en el sitio web vinculado, "Puede utilizar el conjunto para todos sus proyectos de forma gratuita y sin restricciones. Sin embargo, está prohibido venderlos".
El proyecto jQuery Mobile es un sistema de interfaz de usuario para dispositivos móviles que funciona de manera uniforme en diferentes plataformas, como Android y iOS. Si bien jQuery Mobile se centra principalmente en la uniformidad de la interfaz de usuario en un paradigma de aplicación web, el marco de PhoneGap permite desarrollar aplicaciones nativas basadas en HTML5 y JavaScript que pueden implementarse en múltiples plataformas móviles, como Android y iOS. Esos marcos se pueden usar juntos para desarrollar aplicaciones nativas donde la interfaz de usuario se construye a través de jQuery Mobile y las funciones nativas del dispositivo se construyen usando PhoneGap.
El siguiente diagrama ofrece una vista simplificada de una aplicación nativa implementada en Android e iOS, que se desarrolló utilizando HTML5, CSS y JavaScript..
Tenga en cuenta que tanto jQuery Mobile como PhoneGap son compatibles con plataformas móviles adicionales, como BlackBerry OS, Symbian y otras. Sin embargo, en esta serie nos centraremos solo en Android y iOS..
A continuación se enumeran varias ventajas de desarrollar aplicaciones nativas utilizando jQuery Mobile y PhoneGap..
Por otro lado, hay desventajas de desarrollar una aplicación nativa utilizando jQuery Mobile y PhoneGap. Algunos de ellos se mencionan a continuación.
Además, como en cualquier proyecto de desarrollo, todavía tiene que usar herramientas de desarrollo y prueba específicas de la plataforma para probar e implementar su aplicación en dispositivos Android e iOS.
Para la aplicación de ejemplo analizada en esta serie, utilizamos jQuery Mobile versión 1.0 RC1 y PhoneGap versión 1.1.0. Esas fueron las últimas versiones a la hora de crear esta serie..
Hay dos patrones distintos de flujo de pantalla, uno para dispositivos de pantalla ancha donde el ancho de la pantalla es mayor que 500 píxeles y uno para dispositivos de pantalla estrecha donde el ancho de la pantalla es menor que 500 píxeles. Con esta definición, un dispositivo iPad se considerará de pantalla ancha, mientras que un iPod touch o un teléfono Motorola Droid se considerará de pantalla estrecha. El umbral, 500, es una constante que se define en el código de la aplicación..
Veamos primero el flujo de pantalla para dispositivos de pantalla ancha. La pantalla inicial tiene dos botones con etiquetas 'Agregar nombre de pantalla' y 'Agregar término de búsqueda'. Hay un campo de texto debajo de los botones. En la sección inferior izquierda de la pantalla hay una lista con el nombre de la pantalla y los términos de búsqueda ingresados por el usuario. Los nombres de pantalla aparecen en gris y los términos de búsqueda tienen un fondo amarillo..
Para ingresar un nombre de pantalla de Twitter, el usuario escribe el nombre en el campo de texto debajo de los botones y presiona el botón 'Agregar nombre de pantalla'. De manera similar, para ingresar un término de búsqueda en Twitter, el usuario escribe el término en el campo de texto debajo de los botones y presiona el botón 'Agregar término de búsqueda'.
Si el usuario hace clic en el botón de eliminar en la sección derecha de un elemento de la lista (representado como una 'x' dentro de un círculo), ese elemento se elimina de la lista.
Si el usuario hace clic en un elemento de la lista para un nombre de pantalla de Twitter, se muestra una rueda giratoria como una indicación de que la línea de tiempo del usuario (tweets) para ese nombre de pantalla se está recuperando de Twitter.
Después de recibir la línea de tiempo asociada con el nombre de la pantalla, la aplicación los muestra en el lado derecho de la página junto a la lista. Esos son los últimos 11 elementos de la línea de tiempo asociados con el nombre de pantalla. El umbral, 11, es una constante definida en el código de la aplicación..
Tenga en cuenta que, según la API de Twitter, es posible recuperar la línea de tiempo de un usuario sin autenticación solo si su línea de tiempo no está protegida / privada. Nuestra aplicación no involucra la autenticación, por lo tanto, la razón es que solo los plazos públicos están disponibles para nosotros.
De manera similar, si el usuario hace clic en una lista de elementos para un término de búsqueda de Twitter, una rueda giratoria se muestra como un indicador de que los resultados de búsqueda se están recuperando de Twitter, similar a la pantalla de la Figura 4. Después de recibir los resultados de búsqueda, la aplicación Los muestra en el lado derecho de la página junto a la lista, similar a la Figura 5. Esos son los últimos 11 resultados asociados con el término de búsqueda. El umbral, 11, es una constante definida en el código de la aplicación..
La línea de tiempo o los resultados de búsqueda pueden incluir enlaces URL. Si el usuario presiona cualquiera de esos enlaces, se abrirá un navegador web para mostrar la página web asociada con el enlace. Cuando esto sucede, la aplicación Tweets ya no está activa..
El siguiente diagrama resume el flujo de pantalla discutido anteriormente.
Para dispositivos de pantalla estrecha, el flujo de pantalla es similar, sin embargo, debido a la falta de espacio, las entradas (elementos de la lista), la página de progreso y los resultados se muestran en diferentes pantallas.
La pantalla inicial, la página 'Entradas', tiene los botones, el campo de texto y la lista de nombres de pantalla y términos de búsqueda apilados..
Si el usuario hace clic en un elemento de la lista, la página 'Progreso' se muestra como una pantalla separada.
Cuando se reciben los resultados, la página Progreso se sustituye por "Resultados".
Si el usuario presiona cualquiera de los enlaces de URL en la página de Resultados, una aplicación de navegador comenzará a mostrar la página web en el enlace. Cuando esto sucede, la aplicación Tweets ya no está activa. En dispositivos Android, el usuario puede volver a la aplicación Tweets presionando el botón Atrás del dispositivo. Para dispositivos iOS, el usuario debe cerrar el navegador e iniciar la aplicación Tweets desde la pantalla de inicio presionando el ícono de la aplicación.
El siguiente diagrama resume el flujo de pantalla para dispositivos de pantalla estrecha.
Ahora analizaremos cómo se representarán las pantallas en nuestra aplicación utilizando los elementos de la página de jQuery Mobile (aquí, tomamos prestado algo del material de mi tutorial anterior Construir una aplicación de contactos). marco, consulte la sección Anatomía de una página en la documentación de referencia de jQuery Mobile).
Un solo archivo HTML en el marco de jQuery Mobile consta de una página de contenedor con una o más páginas de contenido dentro del contenedor. La página del contenedor tiene un data-role = "page" atributo, mientras que las páginas de contenido tienen una data-role = "contenido" atributo. Una página de contenido puede tener opcionalmente un encabezado y un pie de página. En el ejemplo a continuación, hay dos páginas de contenido con un encabezado y un pie de página, y una página de contenido sin un encabezado o pie de página.
.....................
Dentro de una página de contenedor, se pretende mostrar solo una página de contenido a la vez. La idea es agrupar las pantallas relacionadas lógicamente dentro de una sola página de contenedor y definir cada una de ellas como una página de contenido. Por ejemplo, esas páginas de contenido pueden compartir código JavaScript común.
En la aplicación Tweets, hay una página de contenedor que se almacena en la página física index.html. Esa página de contenedor almacena todas las páginas de contenido que necesita la aplicación. Para los dispositivos de pantalla estrecha, las pantallas de Entradas (Figura 7), Progreso (Figura 8) y Resultados (Figura 9) se representan como páginas de contenido separadas. Para dispositivos de pantalla ancha, solo hay una página de contenido, denominada 'Ancho', que proporciona toda la funcionalidad requerida. La siguiente figura resume esta discusión..
En la parte inicial de este tutorial, presentamos brevemente jQuery Mobile y PhoneGap y discutimos el desarrollo de aplicaciones nativas multiplataforma utilizando esos marcos. Luego, presentamos la aplicación Tweets y describimos su flujo de pantalla. A continuación, dimos una introducción a varios conceptos de alto nivel en el marco de jQuery Mobile. En particular, se discutieron el contenedor y las páginas de contenido..
En la Parte II, comenzaremos a revisar la aplicación de Tweets. En "Review Of index.html", nuestro enfoque principal será la estructura estática del HTML y el código de jQuery Mobile que conforma las pantallas de la aplicación. La sección llamada "API de Twitter" ofrecerá una descripción general de los métodos de la API de Twitter. línea de tiempo del usuario y buscar. La siguiente sección, 'Revisión de código', proporcionará una revisión del código JavaScript que implementa la funcionalidad de la aplicación. La Parte II tratará la "Carga de la página inicial", "Funciones de la utilidad", "Funciones de acceso a la base de datos", y luego comenzará la discusión sobre "Funciones básicas de la lógica de negocios".
