Desarrollo del sprint

Esta primera entrega de funcionalidad es objetivamente la que normalmente más carga de trabajo lleva entre la preparación del entorno de implementación y el análisis técnico de las historias de usuario para plasmarlo sobre un modelo que luego pueda plasmarse sobre una base de datos o colección en la jerga de MongoDB. Una vez preparado lo anterior, durante el proceso de implementación es posible que haya que instalar librerías en pos de perseguir la reusabilidad y productividad. El gestor de paquetes npm es un aliado enormemente útil en esta fase, en la cual se establecen las bases de lo que será la aplicación en sucesivas iteraciones.

Ilustración 6. Instantánea del modelo UML de análisis sobre los conceptos que se manejan en la primera iteración

Abordando la filosofía de lo crítico primero, durante esta primera iteración se acordó con el dueño del producto en trabajar sobre el concepto de los guiones sobre los que gira la aplicación. Es por ello que durante esta iteración todo lo relacionado con escenas, es decir, tanto su creación, modificación y eliminación expresadas en las historias de usuario previas son críticos. Conceptualmente los guiones serán entidades virtuales, es decir, de puertas para adentro en la aplicación el guion sólo será una agrupación de escenas de las que luego podremos extraer detalles técnicos o puramente literarios.

Técnicamente, con el objetivo de desacoplar la capa de almacenamiento de la lógica de negocio y de la presentación, se opta por realizar primeramente un servicio REST haciendo uso de ExpressJS. De esta manera, cualquier aplicación cliente podría montar su lógica de negocio y de presentación comunicándose con ExpressJS a través del API REST construido para la persistencia de la información manejada en cliente.

Al elegir la pila de desarrollo MEAN, se toma la decisión de hacer uso de Angular2 con TypeScript en cliente por el atractivo que tiene en su facilidad a la hora de manejar los modelos por medio de aplicaciones orientadas a componentes. Que esté orientado a componentes le da un plus de productividad debido a que, bien pensados, los componentes pueden ser reutilizados en diferentes vistas del cliente. Además, no solo representa ventajas para los desarrolladores, en el núcleo de Angular2 está JavaScript, lo que facilita que la aplicación sea dinámica y asíncrona, lo que se traduce en una mejor respuesta de cara al usuario. Para todo lo relacionado con la gestión de componentes y creación del proyecto con Angular2, resulta especialmente útil hacer uso del Angular-CLI1 _{que ponen a disposición de los usuarios.}

La aplicación Angular-CLI viene a aumentar la productividad y reducir el riesgo de cometer fallos durante el desarrollo del cliente con los diversos componentes, rutas y servicios que pudiera contener. Es más, aporta agilidad en el desarrollo gracias a la inclusión de un servicio de “desarrollo en vivo” que se mantiene a la espera de cambios en el código fuente para trasladarlos automáticamente al navegador.

En lo referido a la tarea de desarrollar el proyecto, con un solo “new”, Angular-CLI genera por nosotros un esqueleto de proyecto con todos los directorios básicos de los que se compone una aplicación en Angular2 según su documentación, además del módulo principal, el primer componente a modo de “Hola mundo” e, incluso, polyfills (o recursos para asegurar la compatibilidad de la aplicación en diversos navegadores). Misma filosofía para los componentes, rutas y servicios, ya que el fruto de ejecutar un “generate” de Angular-CLI es un nuevo script con dependencias básicas resueltas y listo para ser implementado.

Ilustración 7. Esquema de la arquitectura de la aplicación haciendo uso de las tecnologías mencionadas previamente.

Como se puede observar en la ilustración, hay 3 bloques diferenciados en la arquitectura de la aplicación: el gestor de base de datos MongoDB, el API REST en ExpressJS que trabaja

1 _{Angular2-CLI: https://cli.angular.io/}

directamente con MongoDB a través de los modelos Mongoose2 _{y, finalmente, el cliente web de} GuionMaker que usa la tecnología Angular2.

Entrando en el detalle de lo que sería un caso de uso genérico, un usuario del cliente web haría una petición sobre una URL en específico. Al realizar dicha petición, el cliente web de Angular2 carga el paquete de módulos que contienen todos los elementos que le dan vida: componentes, rutas y servicios. Una vez cargados los recursos del cliente, el usuario interaccionará con los componentes y, fruto de esta interacción, se trasladarán al API REST las operaciones CRUD a realizar junto a los datos manipulados.

La comunicación API-cliente se realiza por medio del servicio HTTP que Angular2 provee y, por el lado del API, se hace uso del módulo de rutas de la aplicación de servidor en ExpressJS. La definición de dichas rutas en el API determina la URL y los métodos HTTP a los que se va a responder. Por lo tanto, cuando cualquiera de estas rutas es utilizada hay un método que, por detrás, realizará las tareas pertinentes sobre los modelos Mongoose que, a la postre, se reflejarán en las colecciones almacenadas en MongoDB. Cuando finaliza este procesamiento, se recorre el camino inverso con una respuesta HTTP que finalmente se mostrará en el componente Angular2 sobre el que trabaja el usuario en su navegador.

Teniendo en mente la arquitectura del aplicativo, como resultado de esta primera entrega se acuerda seguir la siguiente hoja de ruta:

 API REST Express JS

o Creación de los modelos y esquemas Mongoose asociados al UML como middleware entre servicio web y gestor de bases de datos MongoDB.

 Escenas  Proyectos  Detalles  Usuarios  Plantillas  Géneros  Clasificaciones

o Implementación de los métodos encargados de gestionar las operaciones CRUD sobre las colecciones de MongoDB.

o Configuración de la aplicación.  Rutas a los métodos CRUD  Módulos

 Servidor web  Angular2

o Inicialización del proyecto e instalación de dependencias por medio del comando new del angular-cli.

o Creación de los módulos asociados a los conceptos de la primera iteración.  Componentes

 Rutas  Plantillas

o Implementación del servicio haciendo uso de http del núcleo de Angular2 para comunicarse con el servicio REST en ExpressJS en pos de trabajar con los modelos en cliente a través de formularios.

o Inclusión de las librerías adicionales de front-end como Summernote (editor de textos), Bootstrap y JQuery como dependencia de este último.