Simple tasks imagen de cabecera

Simple Tasks

PHP
Angular

Simple Tasks una web app para la gestión de tareas a lo kanban

Desarrollé esta app como trabajo de fin de master por lo que os adelanto que no llega a ser una app para el mundo real, esto no quiere decir que no sea funcional o que esté mal hecha, de hecho me llevé un 10 en este proyecto :). Os la comparto por si os puede servir de algún modo a los que se inicien en el mundo del desarrollo con Symfony y Angular, en este caso Symfony 4 y Angular 8 (lo desarrollé con las últimas versiones del momento aunque ya sabéis que en esto de la informática todo va super rápido y a día de hoy vamos por Symfony 5 y Angular 10, y eso que solo han pasado unos meses...). Para los que quieran ver algo mejorado y con la última versión de Symfony (la versión 5) en cuanto al back-end podéis echar un vistazo a nuestro otro proyecto Expenses API, que en este caso está mucho mejor implementado ya que usamos API Platform.

Os hago un breve resumen de lo que va este proyecto antes de de entrar en todo lo demás. Esta app es una SPA (Single Page Application ó Aplicación de una sola página), esto quiere decir que no hace recargas de la página cuando se tienen que refrescar los datos a mostrar o enviar básicamente, en la que se pueden crear tareas para asignarlas a los usuarios disponibles en el sistema, además dispones de una pizarra kanban, un método de organización de tareas que se hizo más popular aún con Trello,una app muy parecida a la que hemos desarrollado para este proyecto de fin de master, salvando las diferencias jejeje, Trello es una app que tiene un gran equipo detrás y como os decía al principio esta app no deja de ser una pequeña demostración aunque funcional.

Si os parece vamos a ver que hay por debajo de esta app.

Infraestructura

En la parte de infraestructura os voy a enseñar un diagrama para que lo veamos un poco más gráficamente y podamos entenderlo mejor:

Infraestructura Simple Tasks

 

Como se puede ver en el diagrama hemos contado con Docker y Docker-compose para montar los servidores necesarios para dar vida a nuestra web app, como os contábamos en el artículo de Expenses-Api, Docker es un virtualizador que facilita mucho la tarea de sistemas ya que gracias a Docker compose apenas es necesario un fichero .yml para configurar los servidores, aplicaciones, etc que necesitemos. Para esta aplicación hemos optado por un servidor web Apache, una imagen de PHP, un servidor de base de datos MySql para el back-end y por último un servidor NodeJs para el front-end.

 

Back End

En el caso del back-end hemos usado Symfony 4 junto con Doctrine, a grandes rasgos Symfony es un framework PHP que facilita muchas tareas muy comunes en el desarrollo de una app, API o software relacionado con PHP y Doctrine es un ORM (Object Relational Mapping) que para quien no lo sepa es como otro framework pero esta vez para relacionar objetos de nuestra app con las tablas de la base de datos, hablar de Symfony sin hablar de Doctrine es casi imposible (seguro que habrá casos donde no se use este ORM pero es lo más común) ya que se integran a la perfección. Este back-end expone una API REST para ser usada por el front-end o cualquier otro software.

 

Front End

En el caso del front-end hemos usado Angular 8 para la lógica y gestión de la representación de los datos y Bootstrap 4 para dar estilos a nuestra aplicación. Angular es un framework JS que permite hacer aplicaciones de una sola página (SPA como os comentaba más arriba) además permite hacer su famoso two-way data binding, esto es un mapeo de las variables que tenemos en nuestro código (datos en el código) con las variables que se muestran o recogen de la página que ve el usuario, esto supone una facilidad en el uso ya que siempre dispondremos del valor de un dato en todo momento, para hacerlo un poco más entendible para el ciudadano de a pié, si nosotros en el código de nuestra aplicación tenemos una variable llamada "nombreDeUsuario" y en la página tenemos un formulario con un casillero con título "Nombre", Angular permite que el desarrollador pueda mapear estos dos elementos por lo que cuando un usuario de la página escriba su nombre en el casillero "Nombre" la variable "nombreDeUsuario" cogerá el valor que ha escrito el usuario.

Por otra parte Bootstrap es uno de los frameworks CSS más famoso y fácil de usar con los que me he tenido que enfrentar, por eso lo hemos elegido para dar forma a los estilos de la página (botones, barra de navegación, etc), además viene con un sistema de rejilla o cuadrícula que te facilita las cosas a la hora de maqueta y de hacer el responsive, aunque esta app no es apta para uso en el móvil.

A través de servicios consumimos el API REST de nuestro back-end que será el encargado de almacenar nuestros datos.

 

Vale, ahora ya sabemos un poco que hay por debajo y ¿ahora qué?, fácil vamos a ver qué es lo que hace esta app y cómo se ve

Si os parece empezaremos viendo las pantallas principales, que ya está bien de tanto texto...

 

Login

Simple Tasks login

Está es la pantalla por donde podremos entrar a la aplicación para poder usarla, primero debemos registrarnos claro está, la he subido a internet y la podéis usar, solo hay que tener en cuenta una cosa, como decía al principio esto no es una app real, es un proyecto para un master, por lo que aunque funciona los datos se borran cada dos horas así que se puede ver y usar pero no permanecerán en el tiempo. Podéis entrar desde este enlace: Simple-Tasks en SamSoft.

 

Task Panel

Simple Tasks panel de tareas

 

Aquí veremos todas nuestras tareas y columnas que hayamos creado, podremos hacer Drag&Drop (arrastrar y soltar) con las tarjetas de tareas entre columnas y en la misma columna para ordenar las tareas, como podemos ver arriba en la barra de tareas tenemos 3 botones, el primero empezando por la izquierda nos abrirá un menú donde podremos navegar a las distintas secciones de la app, el segundo es un atajo que nos llevará a nuestro perfil donde podremos editar nuestros datos y el tercer botón es un menú con 3 atajos: Crear columna, crear tarea y hacer logout para salir de la app.

Más abajo a la derecha tenemos dos botones que nos permite cambiar de vista "pizarra kanban" a "lista", porque ¿por qué no?, no a todo el mundo le gusta el sistema pizarra.

 

Nueva tarea / Edición de tarea

Simple Tasks nueva tarea / edición de tarea

 

En esta sección entraremos o bien pulsando el botón crear tarea o bien pinchando en alguna ya creada. Aquí podremos crear nuestras tareas o bien verlas o bien editarlas. Por ejemplo asignando la tarea a algún usuario registrado en la aplicación (el casillero de asignación saca una lista de usuarios registrados en cuanto empiezas a escribir para facilitar la búsqueda de usuarios registrados), cambiar de columna, crear etiquetas o usar las ya existentes (al igual que el casillero de asignación el casillero de etiqueta muestra una lista de las etiquetas ya disponibles y si no existe al guardar creará la etiqueta para que esté disponible posteriormente).

 

Administración de usuarios

Simple Tasks administración de usuarios

 

A este área solo podrán acceder usuarios con el rol de "Administrador", los usuarios cuando se registran no podrán acceder directamente a la aplicación, estos deben ser activados por algún administrador primero, en el caso de ser el primer usuario en registrarte obtendrás el prestigioso título de "Administrador", un administrador solo podrá cambiar el rol de usuario, activarlo o desactivarlo (por portarse mal y castigarlo jejeje) o bien eliminarlo completamente (la ha liado parda mezclando lejía con ácido clorhídrico XD).

 

Perfil de usuario

Simple Tasks perfile de usuario

Aquí veremos nuestros datos y podremos modificarlos e incluso subir un avatar, aunque en esta versión de la app no se visualiza en ninguna otra parte, recordad que era un proyecto para demostrar a los profesores que sé programar en las tecnologías que me propusieron en el master, en este caso constaba de subir ficheros a un servidor. También podremos borrar nuestra cuenta si es que no nos ha gustado la experiencia jejeje. Ojo si eres el único en la app, si te borras ya nadie podrá activarte y no podrás acceder NUNCA más... bueno nunca, nunca.... no, recuerda que se borran los datos cada 2 horas por lo que con esperar podrías volver a registrarte :)

 

Documentación, mockups y código

Bueno una vez visto lo que son las pantallas principales por encima toca que os cuente que cosas más cosas tenemos de esta maravillosa pero simple web app. Por un lado tenemos varios documentos en nuestro Nextcloud, estos son:

  • DR o documento de requisitos, este documento simula la toma de requisitos de la app a un cliente o empresa
  • DT o documento técnico e infraestructura con una propuesta tecnológica con todas las herramientas a usar en este proyecto
  • DF o documento funcional donde se relatan las historias de usuario (son como agrupaciones de tareas sin desarrollar técnicamente, con un lenguaje entendible y menos técnico) para desarrollar la app
  • MU o manual de usuario, este documento se le entrega al usuario final y explica todos los detalles de uso de la aplicación

Por otra lado tenemos los mockups que también está en Nextcloud, pero mejor es verlos en nuestro Presentator donde son navegables y es más visual que andar viendo diapositiva por diapositiva en Nextcloud.

Y por último pero no por ello menos importante tenemos el código subido a Gitlab.com donde podréis ver las dos partes de la app e indagar cómo está hecha, aunque aquí ya estamos hablando de cosas más técnicas claro, si no eres pogramador te va a sonar un poco a chino.

Recuerda que puedes acceder a la app en Simple Tasks.

 

Bueno sin más con esto me despido, espero que os guste y que os pueda servir en el caso de que necesitéis hacer algo similar, un saludo compañeros!!