Aunque no se crearon específicamente para trabajar juntos, jQuery Mobile y Cordova (también conocido como PhoneGap) son un dúo muy poderoso para crear aplicaciones móviles híbridas. Esta serie le enseñará cómo desarrollar un lector de feeds utilizando tecnologías web y estos dos marcos. A lo largo de esta serie, también se familiarizará con los complementos básicos de conexión y almacenamiento de Cordova y la API de Google Feed..

---

Descripción general de la aplicación

La aplicación que construiremos en este tutorial, llamado "Audero Feed Reader", es muy pequeña y fácil de entender. Es un lector de feeds básico que te ayudará a mantener todas las noticias y los artículos que te interesan en un solo lugar. Después de todo, Google cerró Google Reader, así que tenemos que reemplazarlo, ¿no es así??

En la pantalla de inicio de la aplicación, colocaremos dos botones para resaltar las dos características principales: agregar un nuevo botón de alimentación y una lista de las fuentes guardadas. El diseño de la pantalla de inicio se muestra con la siguiente captura de pantalla:

Para mantener el proyecto lo más simple posible, solo guardaremos el nombre del feed y su URL. Entonces, una vez que el usuario haga clic en el botón "Agregar fuente", mostraremos un formulario con solo dos casillas de entrada, como se muestra en la siguiente imagen:

Ahora que el usuario puede guardar tantas fuentes como desee, es hora de permitirle ver la lista de esas fuentes guardadas. Además, para ayudar al usuario a encontrar fácilmente una fuente, la lista está ordenada alfabéticamente por nombre y también tiene un cuadro de búsqueda, en caso de que las fuentes sean demasiado numerosas. Puede ver un ejemplo de la página descrita en la captura de pantalla a continuación:

Una vez que el usuario elige un feed, la aplicación obtiene la URL y muestra las entradas disponibles. Para analizar fácilmente los diferentes tipos de feeds (Atom, RSS o Media RSS), aprovecharemos la API de Google Feed y, específicamente, la interfaz JSON de Google Feed. Este último analizará la URL solicitada y devolverá un objeto JSON unificado y fácil de analizar. Descubriremos más sobre esta API en la siguiente parte de esta serie. Por defecto, para ahorrar ancho de banda., Audero Feed Reader Solo requerirá 10 entradas. Para permitir que el usuario recupere más datos, agregaremos un botón "Mostrar más". Por supuesto, los datos se recuperarán realmente solo si el Feed proporcionado expone más de 10 entradas. Por ejemplo, Mobiletuts + proporciona solo 10 entradas, por lo que si el usuario hace clic en el botón "Mostrar más", aparecerá el mensaje "No hay más entradas para cargar"..

Para ahorrar espacio, las entradas se organizan con un acordeón y, de forma predeterminada, solo el título es visible. Sin embargo, el usuario puede ver más detalles si es necesario. La aplicación también muestra el resumen de la entrada, el autor y un botón que dice "Ir al artículo" para leer el artículo completo en el sitio web correspondiente. Tenga en cuenta que para mejorar la usabilidad, también mostraremos nuevamente el título, pero esta vez se puede hacer clic para acceder al artículo completo..

El aspecto final de esta página se muestra a continuación:

---

Componentes del proyecto

En este punto sabemos qué hacer, asi que es hora de ver cómo lo haremos. Las tecnologías involucradas en el desarrollo de Audero Feed Reader son:

• HTML 5: Para crear y marcar las páginas..
• CSS 3: Para estilizar las páginas. Tenga en cuenta que no tendremos una hoja de estilo CSS personalizada y solo usaremos la proporcionada y requerida por jQuery Mobile.
• JavaScript: Este es el lenguaje que usaremos para programar la lógica de la aplicación. Es el único idioma soportado por PhoneGap..
• jQuery: jQuery se utilizará para seleccionar elementos, adjuntar controladores de eventos y ejecutar solicitudes AJAX. También es una dependencia de jQuery Mobile..
• jQuery Mobile: Este es nuestro marco de elección para crear la interfaz de usuario de nuestras páginas. Nos permite optimizar fácilmente un sitio web para dispositivos móviles y crear rápidamente interfaces móviles. En el momento de redactar este documento, la versión más reciente disponible y utilizada es 1.3.1..
• PhoneGap: Envuelve todos nuestros archivos para que podamos compilarlos como si estuviéramos construyendo una aplicación nativa. Además, PhoneGap ofrece algunas API interesantes y útiles para comunicarse con el hardware del dispositivo, como Almacenamiento y Conexión. La versión utilizada es 3.0, una mejora reciente y significativa sobre 2.x.

Además de lo anterior, usaremos también estos complementos específicos de Cordova Core:

• InAppBrowser: Esto es un navegador web que se muestra en la aplicación al llamar ventana abierta. Desde la versión 2.3.0, se han agregado dos métodos importantes: executeScript () y insertCSS (). El primero le permite inyectar código JavaScript, mientras que el segundo agrega código CSS a la InAppBrowser ventana. No utilizaremos estos métodos en nuestra aplicación, pero quería mencionarlos. Para obtener más información, visite el documento oficial InAppBrowser.
• Complemento de almacenamiento: Proporciona acceso a las opciones de almacenamiento del dispositivo. Tenga en cuenta que, como afirma la documentación, algunos dispositivos ya proporcionan una implementación de estas especificaciones, en cuyo caso se aplica el soporte integrado. La implementación de Cordova ofrece soporte compatible para aquellos que no lo hacen. Para leer más, eche un vistazo a la documentación de almacenamiento local.
• Complemento de notificación: Le permite crear notificaciones visuales, audibles y de dispositivos táctiles. De los varios métodos disponibles, usaremos solo alerta() Para mostrar algunos mensajes al usuario. Por ejemplo, este complemento se utilizará cuando un usuario agregue o elimine con éxito una fuente. Para más información, consulte los documentos de notificación..
• Plugin de conexion: Se compone de una sola propiedad que proporciona información sobre el estado de conexión del dispositivo (por ejemplo, WI-FI, 3G, ninguno, etc.). Tenga en cuenta que desde la versión 2.3.0, debe acceder a la Conexión objeto usando el nuevo navegador de conexión propiedad. Esta propiedad coincide con la especificación W3C, en lugar de la anterior navigator.network.connection propiedad. Más sobre esto aquí.

Si usó versiones anteriores de PhoneGap, reconocerá que estos complementos no son más que lo que solía conocer como API. El cambio de nombre se debe a la nueva arquitectura PhoneGap. Pero no te preocupes, aparte del nombre, casi todo es igual. Si desea obtener información acerca de todas las mejoras más recientes y mejores con 3.0, puede leer el artículo introductorio y la guía de introducción..

---

1. Instalar PhoneGap

A partir de la versión 3.0.0, el equipo de desarrollo introdujo un nuevo procedimiento para instalar PhoneGap que requiere Node.js y npm. Además, en este momento no se proporcionan enlaces de descarga simples como una alternativa. Por lo tanto, el resto del tutorial asume que tiene ambos paquetes de software instalados y funcionando. Una vez hecho esto, el primer paso es escribir el siguiente comando para instalar PhoneGap:

npm install -g phonegap

Si está utilizando Linux, recuerde que debe anteponer sudo a la linea anterior.

---

2. Inicializar el proyecto.

Antes de crear la carpeta del proyecto, vale la pena señalar que el equipo de desarrollo también introdujo una línea de comandos en esta nueva versión para ayudar a los desarrolladores a realizar tareas comunes como compilar y ejecutar la aplicación o instalar complementos. El CLI también le permite inicializar un proyecto. No solo creará una carpeta con la biblioteca de PhoneGap dentro, sino que también generará el esqueleto de una aplicación. Para inicializar el proyecto, simplemente escriba el siguiente comando:

phonegap crear audero-feed-reader com.audero.free.utility.auderofeedreader "Audero Feed Reader"

El primer argumento especifica el nombre del directorio a crear. Los otros dos argumentos son opcionales, y especifican la identificación y el nombre de la aplicación, respectivamente. Una vez que ejecute el comando anterior, verá la siguiente estructura dentro de la carpeta raíz del proyecto:

• .Córdoba: Usado para compatibilidad de fondo con herramientas de Cordova.
• fusiona: En esta carpeta, puede agregar cualquier personalización específica de la plataforma para que no tenga que modificar los archivos de origen cada vez que trabaje con un proyecto..
• plataformas: El lugar donde se ubicarán los instaladores compilados, en caso de que compile el proyecto localmente.
• plugins: La carpeta donde encontrarás los complementos de tu proyecto..
• www: La carpeta que contiene los archivos de origen y la configuración de la aplicación. Contiene las carpetas "css", "js" y "img" donde puede colocar los archivos respectivos. Además, también tiene una carpeta de "res" donde colocas íconos y pantallas de bienvenida..

---

3. Instalar los complementos de PhoneGap

Como hemos visto en la introducción, nuestro proyecto aprovechará algunos de los complementos principales de PhoneGap. Para instalarlos, debe usar la CLI escribiendo el siguiente comando:

 complemento local de phonegap agregar PLUGIN_REPOSITORY_URL

En lo anterior, PLUGIN_REPOSITORY_URL es la URL del repositorio del complemento que desea utilizar. Dado que nuestro proyecto utilizará los complementos principales de Notificación y Conexión, debe escribir el siguiente comando:

 complemento local phonegap agregar https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git complemento local phonegap agregar https://git-wip-us.apache.org/repos/asf /cordova-plugin-network-information.git

Como el más observador de ustedes pudo haber notado, no agregué el complemento de almacenamiento. La razón es que a partir de la versión 3.0, el acceso está integrado en Cordova.

---

4. Añadir marcos PhoneGap

Ahora que tenemos PhoneGap y sus complementos en su lugar, debemos agregar las otras dos bibliotecas necesarias: jQuery (usaré la versión 2.0.3) y jQuery Mobile (versión 1.3.1).

Antes de continuar, es importante comprender por qué elegí la rama 2.x de jQuery. jQuery tiene dos ramas principales actualmente en desarrollo: 1.xy 2.x. La versión que debe usar realmente depende de dónde use el marco y qué navegadores desea apoyar. Si bien jQuery 1.x admite todas las versiones de Google Chrome, Firefox, Safari, Opera e Internet Explorer a partir de la versión 6, la versión 2.x eliminó la compatibilidad con Internet Explorer 6, 7 y 8 a cambio de un tamaño más pequeño. y mejor rendimiento. Ya que estamos desarrollando una aplicación móvil con Cordova, no debemos preocuparnos por Internet Explorer 6-8. De hecho, los sistemas operativos de Microsoft compatibles con Cordova son Windows Phone 7 y Windows Phone 8 que se ejecutan respectivamente en Internet Explorer 9 y 10. Por lo tanto, podemos usar con seguridad jQuery 2.x!

Con el lugar de comprensión anterior, podemos continuar con nuestros pasos básicos para configurar Audero Feed Reader. Una vez que descargue las bibliotecas, mueva el archivo jQuery y el archivo JavaScript (versión reducida) de jQuery Mobile dentro del "js" carpeta. Entonces, tenemos que poner la hoja de estilo de jQuery Mobile (jquery.mobile-1.3.1.min.css) dentro de "css" carpeta. Finalmente, colocamos las imágenes empaquetadas de jQuery Mobile en el "img" carpeta. Dado que hemos cambiado ligeramente la estructura nativa de jQuery Mobile, debemos ajustar las rutas que apuntan a las imágenes dentro de su archivo CSS. Necesitamos específicamente reemplazar la parte "images /" con esta cadena "... / img /". Tenga en cuenta que la cadena debe ser reemplazada 5 veces.

---

5. Crear estructura de archivos de proyecto

Ahora que tenemos el marco del proyecto en su lugar, debemos crear la carpeta "www", los archivos HTML necesarios, establecer el ícono de la aplicación predeterminada, modificar el archivo de configuración de compilación de Adobe PhoneGap y cambiar la pantalla de inicio predeterminada. Eso es mucho, así que sigamos moviéndonos.!

En el transcurso de esta serie, crearemos los siguientes archivos:

• index.html: El punto de entrada de la aplicación, donde colocaremos los enlaces a las bibliotecas utilizadas.
• add-feed.html: Esta es la página que contiene el formulario utilizado para guardar un nuevo feed.
• list-feeds.html: Esto muestra la lista de los feeds almacenados..
• show-feed.html: Esto muestra las entradas del feed dado. Además, tiene una barra de navegación que tiene un botón para eliminar la fuente y otro para recuperar más entradas de la fuente.
• aurelio.html: La página de créditos que contiene información sobre el autor..
• feed.js: Este archivo contiene una clase, llamada Alimentar, se utiliza para crear, eliminar y recuperar fuentes almacenadas. Está basado en el plugin Cordova Storage..
• aplicacion.js: Este archivo contiene otra clase, llamada Solicitud, que tiene los métodos para inicializar las páginas de la aplicación y adjuntar controladores a algunos elementos de la página (por ejemplo, los botones de la barra de navegación anteriormente citados).
• config.xml: Este archivo XML contiene los metadatos de nuestro proyecto y almacena configuraciones como el nombre y la descripción de la aplicación.

---

6. Crea la página de inicio

Como se explicó en la sección anterior, dado que jQuery Mobile carga páginas utilizando Ajax, debemos cargar los archivos CSS y JavaScript en el punto de entrada de nuestra aplicación, que es el index.html expediente. Esta página muestra el título y la descripción de la aplicación y tiene todos los botones para acceder al resto de la aplicación..

La fuente completa de la página de inicio se muestra a continuación:

                
 
 
Audero Feed Reader
  
 
 Audero Feed Reader es un agregador de feeds muy básico para guardar en un solo lugar todas las noticias y los artículos que le interesan.. 
 Añadir Feed Feed Feed 
  
  

Como puede leer del código anterior, los botones dentro de la y el