Usando WebML para una Aplicación de Tareas

 

(Fuente: archdaily.mx)

Como ya se vio con anterioridad, WebML se basa en la teoría de los hipermedia y los objetos. De igual forma, también utiliza diagramas muy parecidos a los que son utilizados en UML, como lo pueden ser los diagramas de clases o de casos de uso.

Para comenzar a diseñar una aplicación utilizando WebML, es importante tener primero en claro qué es lo que se quiere realizar. En este caso optaremos por una Aplicación de Tareas Escolares como ejemplo para diseñar con WebML.

Estructura

Se comienza creando un diagrama de Estructura, el cual también es conocido como un Modelo Entidad Relación en otras metodologías. Esto nos servirá como guía de cómo va a ser todo el funcionamiento interno de nuestra aplicación.

Para nuestra aplicación de tareas, el diagrama de estructura quedaría de la siguiente manera:

El modelo de datos de una aplicación es un esquema que describe cómo se almacenarán los datos en una base de datos. En el caso de una aplicación que gestiona tareas, usuarios y proyectos, el modelo de datos debe definir las siguientes entidades:

• Tarea: Representa una tarea individual, como crear un documento, programar una reunión o completar un pedido.
• Usuario: Representa una persona que utiliza la aplicación.
• Proyecto: Representa un grupo de tareas relacionadas, como un proyecto de desarrollo de software o un proyecto de marketing.

Las relaciones entre estas entidades pueden ser las siguientes:

• Una tarea pertenece a un usuario: Esto significa que una tarea está asignada a un usuario específico.
• Una tarea puede estar en un proyecto: Esto significa que una tarea puede estar asociada a un proyecto.

Modelo de Navegación

Continuando con el planteamiento de nuestra aplicación, hay que pensar en cual será el modelo de navegación que esta tendrá. El modelo de navegación de una aplicación define cómo los usuarios pueden moverse por la aplicación. En el caso de una aplicación que gestiona tareas, usuarios y proyectos, podemos definir los siguientes elementos de navegación:

• Página de inicio: Esta página es el punto de partida de la aplicación. Muestra una lista de las tareas pendientes del usuario.
• Página de creación de tareas: Esta página permite a los usuarios crear nuevas tareas.
• Página de edición de tareas: Esta página permite a los usuarios editar tareas existentes.
• Página de listas de tareas: Esta página permite a los usuarios ver y gestionar sus listas de tareas.
• Página de proyectos: Esta página permite a los usuarios ver y gestionar sus proyectos.

Arquitectura

Para esta aplicación una de las arquitecturas que se podrían utilizar, y la que se usará para este ejemplo es la Cliente-Servidor.

En una aplicación de tareas escolares con una arquitectura cliente-servidor, el cliente sería el software que se ejecuta en el dispositivo del usuario, como un ordenador o un teléfono móvil. El servidor sería el software que se ejecuta en un ordenador remoto, que proporciona los datos y los servicios necesarios para la aplicación.

En el caso de una aplicación de tareas escolares, el cliente podría consistir en las siguientes partes:

• Un navegador web: El navegador web es el programa que se utiliza para visualizar las páginas web de la aplicación.
• Un framework de desarrollo web: Un framework de desarrollo web es una biblioteca de código que proporciona las herramientas y las clases necesarias para desarrollar aplicaciones web.
• Los componentes de la interfaz de usuario: Los componentes de la interfaz de usuario son los elementos que aparecen en las páginas web de la aplicación, como los botones, los cuadros de texto y las listas.

El servidor podría consistir en las siguientes partes:

• Un servidor web: Un servidor web es un programa que sirve páginas web a los clientes.
• Una base de datos: Una base de datos almacena los datos de la aplicación, como las tareas, los alumnos y los profesores.
• El código de la aplicación: El código de la aplicación es el código que se ejecuta en el servidor para proporcionar los datos y los servicios necesarios para la aplicación.

La interacción entre el cliente y el servidor se realizaría a través de solicitudes HTTP. El cliente enviaría solicitudes HTTP al servidor para solicitar datos o servicios. El servidor respondería a las solicitudes HTTP del cliente enviando datos o realizando acciones.

Por ejemplo, cuando un alumno accede a la página de tareas, el cliente envía una solicitud HTTP al servidor para solicitar una lista de las tareas asignadas al alumno. El servidor responde a la solicitud HTTP del cliente enviando una lista de tareas.

Hipertextos

Ya para concluir con el diseño de nuestra aplicación solo quedaría diseñar los hipertextos, que en este caso podríamos decir que son prácticamente diagramas de clases y de casos de uso, ya que, como se dijo al inicio de este post, en WebML también se utilizan esta clase de diagramas.

Casos de Uso

Prototipado

Una vez terminado con el diseño de los diagramas para nuestra aplicación de tareas, ya solo quedaría hacer el prototipado de mockups. Para esto, utilizamos Figma, en donde creamos modelos tanto de baja como de media fidelidad, los cuáles se pueden ver en la siguiente imagen o directamente en la web de Figma si se le da click a esta misma.