Diseñando Aplicacion usando "diagramas de estados" y "ports" (UML)

Los Diagramas de Estado nos permiten visualizar la interacción del usuario, funciona como un "history board".  

Los Puertos (Ports) permiten etiquetar el origen de una actividad, ayudando a condicionar la acción a tomar dependiendo del origen de su llamada inicial.

Por ejemplo para Ports, la actividad: "Leer este Blog" podría venir de dos puertos distintos: Viene de un celular, Viene de un Computador, tras finalizar la actividad podriamos querer regresar al origen, esta acción de regresar podria estar condicionada a la forma en que se originó la llamada a la actividad.

Cuando fabricamos una aplicación web podemos usar un Diagrama de Estados (UML) para graficar y analizar el estado en que se encuentra el usuario dentro de nuestro sistema.

La interfaz de usuario de nuestro sistema es una "maquina de estados", cada uno de estos estados puede ser representado por el despliegue de una pantalla o de un conjunto de vistas que conforman una pantalla.

Para comprender el uso de "ports" (UML Ports) debo guiarte primero dentro del diseño con diagramas de estados en una simple aplicación ficticia que le pide a un usuario autenticarse y adquirir un plan que le vendemos para luego proceder a usar el sistema que hemos hecho (supongamos un sistema SAAS cualquiera).

Sistema diseñado en base a estados, maquina de estados, diagrama de estados UML.

El siguiente diagrama ilustra este sistema ficticio en una forma minimalista pero a la vez realista:

Diagrama de Estados de un sistema SAAS sencillo

Notarás que cada "cuadro" lleva un titulo principal (ejemplo: "Autenticarse"), este cuadro es el Estado del Sistema en un momento dado en el tiempo, en otras palabras, el estado "autenticarse" indica que el usuario esta frente a un conjunto de pantallas que le permiten iniciar sesión, autenticarse con google, crear una cuenta etc, pero nada mas allá de autenticarse.

Como toda maquina de estados formal, estas tienen salidas o entradas del estado, el estado autenticarse tiene dos salidas: "tiene plan" y "sin plan", indicando que el usuario que se ha autenticado exitosamente tiene un plan y esta vigente o que simplemente nunca ha seleccionado un plan o este ha expirado yendo en consecuencia a la pantalla (o estado) que corresponda.

Que mas nos dice este diagrama acerca del sistema ? Nos dice que tras autenticarse exitosamente podemos "usar el sistema" si "tiene un plan", el estado "usa el sistema" es un "estado compuesto", muchas pantallas o sub estados pueden conformar este estado mayor, el usuario quizá está listando productos, creando facturas, etc etc, todos estos subestados dentro del estado "usa el sistema" dependen de que el usuario tenga un plan.

UML Ports / Puertos

Ahora bien, qué son esos cuadritos [1] y [2] junto al estado "elige plan" ? Son "puertos del estado", se grafican de esta manera (como un cuadrito adosado al estado).  Que finalidad tienen y que nos dicen respecto al sistema ? La respuesta está en la lógica de negocios y diseño de interfaz del sistema graficado aqui.

Resaltado (verde y morado) de los "UML Ports" del estado "Elige Plan"

Notarás que el estado (o pantalla) "Elige Plan" es alcanzado en dos oportunidades:

1. (port #1) Inmediatamente tras autenticarse y cuando el usuario no tiene plan.
   
   
2. (port #2) Cuando estamos "usando el sistema" y decidimos "eligir plan" simplemente para hacer un upgrade o cambiar de plan a otro mas favorable. 

El "port" nos ayuda a saber o mantener "la ruta"
por donde provino la llamada.  

Cuando el estado "elige plan" es alcanzado en el puerto "1", entonces sabemos que estamos en presencia de un usuario recién autenticado que no tiene plan, podemos tomar las medidas respectivas respecto a interfaz de usuario (mostrar mas ayuda, etc), ademas de ayudar a esto el port ayuda a volver al estado anterior, porque podemos ir al estado "autenticarse" o al estado "usa el sistema" dependiendo de la llamada que nos hicieron.

Cómo se lleva a la práctica el diagrama de estados con puertos ?

Se realiza con ayuda de componentes. Siguiendo el ejemplo anterior, supongamos que tenemos un componente que despliega todo el formulario de "elige plan", supongamos que este componente puede ser incrustado en una pagina web y que sin importar cual página sea desplegará un formulario que presenta una lista de planes, un botón "submit" y un botón "Volver", nada mas.

(quienes conocen Wordpress sabrán que podriamos crear un Shortcode que incruste este formulario de elección de plan, si no conoces Wordpress te invito a que leas acerca de este tema, es muy bueno y útil).

Usando este componente que incrusta un formulario de elección de plan en cualquier página podemos ahora crear dos paginas (o vistas): EligePlan1 y EligePlan2, sí, 1 y 2 tienen que ver con los "ports" graficados mas atrás.  Cada una de estas páginas despliega el mismo formulario el cual también. A esta acción se le conoce por el nombre de "componentización" (desconozco si el término esta aceptado por la RAE, pero así se le conoce), la componentización nos ayuda a que fabriquemos un componente dedicado a presentar un formulario, sin importar en qué ámbito será utilizado, aquí ese ámbito es graficado por "el port".

EligePlanForm <componente>

Si salimos del "estado de autenticación" y "no hay plan" entonces presentamos la vista (o página) EligePlan1, la cual incrustará al componente: "EligePlanForm", si estando dentro de esta página recibimos actividad en el botón "Volver" pues volvemos al estado de autenticación.

Si salimos del estado "Usa el sistema" (el usuario quiere cambiar de plan) entonces presentamos la vista (o página) EligePlan2, la cual incrustará al componente "EligePlanForm", si estando dentro de esta página recibimos actividad en el mismo botón "Volver" el sistema no se confundirá y nos enviará a alguna pantalla del estado combinado "Usa el Sistema".

Diagrama de Clases y Componentes con la implementación de "UML Ports"

En el diagrama sobre estas líneas muestro cómo implementar la solución en un escenario de desarrollo basado en Wordpress. Los objetos "eligePlan1" y "eligePlan2" ambos son instancias de una PaginaWordpress, en otras palabras mas simples: crearemos dos paginas independientes en Wordpress. Ambos objetos incluyen un componente llamado: "EligePlanForm" el cual esta hecho en forma de Shortcode. Cómo sabemos todo esto leyendo este diagrama ? debido a los símbolos de UML (no son dibujitos lindos de adorno, son grafos del lenguaje UML).  La notación "port=1" y "port=2" bajo cada objeto indica que en esa instancia marcamos al objeto con un atributo que nos indica en qué escenario esta corriendo el shortcode.  Una implementación real podría ser:

El componente "EligePlanForm" que he mencionado en el diagrama de clases anterior esta siendo incrustado y utilizado en cada una de las páginas indicando información de ámbito (los atributos del shortcode "port" y "volver_a").  De esta manera, al realizar el componente éste sabrá que debe hacer y a dónde regresar tras acción "submit" o "volver".

Todo esto gracias al uso de ports y diagramas de estados UML.