Creando una aplicación profesional y multiplataforma con Apache Cordova segunda parte

Article
06/25/2015

Hace unos meses nos encontramos con un pequeño proyecto para crear una aplicación mediante HTML5 para Android, iOS y Windows Phone sobre el blog de tecnología https://pabloyglesias.com en el cuál Pablo, su autor, quería una aplicación con la que los usuarios pudieran seguir el blog incluso sin estar conectados a internet.

En el anterior artículo, vimos las tecnologías que escogimos y el porqué de esas decisiones, ahora vamos a estudiar la parte de desarrollo de este proyecto, que seguro que puede servirte de inspiración para otros proyectos.

La plantilla

Este proyecto se basa en La plantilla que comenté en el artículo anterior. Una plantilla que hemos creado y liberado en GitHub para que cualquiera pueda usarla o modificarla.

Una vez la hemos descargado he instalado en Visual Studio, creamos un nuevo proyecto de TypeScript basado en esta plantilla y seguimos las instrucciones.

Los requisitos

Para esta aplicación necesitábamos crear un lector de RSS de un blog, que cacheara el contenido más reciente para poder seguir leyendo cuando no se tuviera acceso a internet y que pudiera guardar en una lista de favoritos los artículos que quisiera guardar aparte.

Además, era necesario tener una página con los últimos vídeos de youtube y una de contacto.
También quería tener la posibilidad de poder compartir los artículos desde la misma app y por supuesto que la experiencia de usuario según la plataforma fuera la más adecuada.

Para ello tuvimos que tener en cuenta la diferente UI y UX de cada plataforma es decir, la posición del menú en los diferentes sistemas operativos, los estilos de los iconos, la posición de los botones de acción o incluso la posibilidad de tener un Live Tile en Windows Phone.

Hicimos un primer boceto de los requisitos para cada plataforma obteniendo el siguiente esquema:

Podemos observar lo siguiente:

Un menú con 3 opciones (Inicio, Vídeos, Contacto).
La acción de añadir a favoritos (más adelante se añadió al lado la de compartir).
Una lista en la página de inicio con los posts recientes y un diseño específico.
Un menú vertical con categorías.
La página con la lista de entradas o de vídeos.
La página detalle de un post.

A lo largo del proyecto el esquema fue evolucionando y cambiaron algunas cosas:

Los colores de la aplicación se adaptaron.
El menú de Android se sustituyó por uno más moderno que se puede ver en nuevas versiones de aplicaciones Android.
El diseño de Windows Phone se actualizó completamente a las style guides que salieron para Windows 10.
Otros cambios menores: Posiciones y tamaños de textos, etc.

Estructura de la aplicación

www/templates/

En la carpeta templates están las plantillas de nuestra aplicación, que hemos dividido en dos partes:

partials: Se encuentran las plantillas parciales de la aplicación, que corresponden a las plantillas de componentes distintos en cada plataforma, por ejemplo la de ‘tabs.html’ que, como vimos anteriormente, son totalmente diferentes en cada plataforma.
Para incluir las específicas de cada plataforma lo que hacemos es poner el mismo archivo en ‘/merges/plataforma/templates/partials/plantilla.html’
Así han quedado las de los tabs en nuestro caso:

pages: Para las plantillas básicas que van a ser iguales en todas las plataformas, es decir las plantillas de contenido de las diferentes páginas, por ejemplo la página que lista las diferentes categorías a la que añadimos un botón de acción para borrar el caché:

/scss/

En este directorio encontramos todo lo relacionado con los estilos de nuestra aplicación, utilizando Sass que es algo que vimos en el otro artículo.

La estructura que utilizamos es la siguiente:

base: Tiene los archivos de estilos base de nuestra aplicación, aquellos en los que se basa esta y que corresponden a una única página.
helpers: Contiene las utilidades, por ejemplo _variables.scss que veremos en la siguiente imagen.
lib: Las dependencias que instala bower como ionic.scss
themes: Para modificar los temas de ionic específicos para esta aplicación
main.scss: El archivo global que incluirá a todos los demás.

La siguiente imagen es un ejemplo del helper con las variables que será incluido donde se necesite:

/ts/

Tenemos un directorio para toda la lógica de la aplicación hecha con TypeScript, voy a comentar por encima los directorios y luego comentaré algunas características de la lógica de la aplicación.

Controllers: Contiene los controladores de la aplicación, uno por página y uno para la navegación y las categorías.
Directives: En el caso de que sea necesario tener alguna directiva custom de AngularJS.
Interfaces: Las diferentes interfaces de la aplicación, como mínimo una por ‘scope’ custom.
Lib: Igual que en la parte de Sass, para las dependencias. En este caso Angular e Ionic.
Models: Los modelos de nuestra aplicación, por ejemplo ‘Entry’, para los posts.
Services: Los servicios que hemos utilizado en la aplicación, por ejemplo un servicio para controlar todas las llamadas del RSS.
App.ts: Se inicia la aplicación y se configura lo necesario.
Import.ts: Para tener las referencias de TypeScript de todos los archivos, incluido en la mayoría.

Podemos observar en la siguiente imagen, un ejemplo de un controlador:

Plugins

Hemos utilizado diferentes plugins para la aplicación, instalarlos ha sido tan fácil como abrir el config.xml desde Visual Studio, lo cual nos proporciona una UI para configurar la aplicación e instalar los plugins, como podemos ver en las siguientes imágenes:

Network Information: Nos ha proporcionado información sobre la conexión a internet del dispositivo, así podíamos cargar el caché o hacer peticiones a internet para ver nuevos posts.
Device: Para saber en qué tipo de dispositivo nos encontramos, por ejemplo solo cargar la lógica de los Live Tiles en Windows Phone.
SplashScreen: Para configurar los SplashScreen de cada plataforma.
SocialSharing: Un plugin muy interesante que nos permite compartir cualquier tipo de contenido de forma nativa.
StatusBar: Para cambiar los colores del statusbar según la plataforma y las guías de estilos de la misma.
LiveTiles: Para poder tener LiveTiles con Cordova en Windows Phone.

Lógica de la aplicación

Capturamos el evento ‘onDeviceReady’ e inicializamos nuestra aplicación de angular en este. Además configuramos el color del statusbar según las opciones que tenemos en cada plataforma.

Por defecto vamos a cargar el controlador y la vista de Main que hereda de RSSController, que es un controlador que maneja las diferentes funciones por defecto para interactuar con el servicio de RSS.

Este servicio se va a encargar de hacer las llamadas al feed de la web y cachear los resultados en localStorage, una vez cacheado todos los controladores que necesiten de ese servicio vana leer siempre los datos cacheados.

Un detalle interesante de esta imagen es que para llamar al constructor del padre es tan sencillo como escribir ‘super()’

Otro controlador interesante de ver es ‘PostController’ con la siguiente estructura y constructor:

Tenemos diferentes métodos que se van a llamar desde la vista según diferentes acciones.

Y esta sería la vista para los ‘Post’

Y podemos observar la interfaz del Scope de Post

Al final, hemos acabado obteniendo este resultado, que se ve con una interfaz de usuario y una experiencia distintos según la plataforma (Windows Phone 10, Android >4.4