Nuevos diseños para la aplicación

Anteriormente en la fase de diseño se habían planteado una serie de modelos que ayudan a definir la arquitectura y la estructura de la aplicación, entre las cuales se encuentra un diagrama de clases que abstrae las clases que consideramos más relevantes y la forma en que se relacionaban, sin embargo nos hemos encontrado en la actualidad con unas nuevas opciones que nos dan una mejor perspectiva de la aplicación web, estas son extensiones al lenguaje UML en el cual estamos acostumbrados a trabajar, por lo cual decidimos realizar un nuevo diagrama de clases que modele de forma más acertada lo que nos interesa.

A continuación se muestra el nuevo diagrama:

Este diagrama forma parte de lo que se conoce como WAE (Web Application Extension) y fue desarrollado agregándole un plug in a Star UML.

El carrito de compras tiene agregados productos los cuales tienen una id y una cantidad, la cual en la aplicación puede ser modificada por el usuario a su gusto, este producto forma parte del modelo y se tienen registros de el en la base de datos, por lo cual está la clase "productosDB". Todo se controla a través del controlador del carrito, el cual usa los datos de la base de datos, busca los productos, los agrega al carrito y despliega una vista que ya muestra los resultados de las acciones realizadas por el usuario.

Como se puede ver en el modelo, este usa una serie de figuras que no se encuentran en el estándar de UML y estos son los que han sido agregados por el plugin.

Por otro lado se creó un nuevo diagrama de secuencia en el cual se muestra como el usuario ingresa productos al carrito, ese modelo se muestra a continuación:

Todo inicia con una petición para agregar al carrito de compras, por medio de código javascript se direcciona la petición al controlador del carrito, el cual busca el producto en la base de datos, lo verifica (para revisar que hayan existencias) y lo agrega al carrito de forma definitiva; luego de todo esto devuelve el resultado actualizando solo la parte en la que se muestra el carrito en la página, para que de esta forma el usuario no se pierda entre tantas ventanas que podrían aparecer y la experiencia de compra y agregación de productos al carrito sea lo más agradable posible.

Después de realizar estos nuevos modelos/diagramas y haber probado en carne propia lo que es modelar de la forma más adecuada una aplicación web, pudimos constatar que en efecto el UML tradicional se queda corto a la hora de trabajar con aplicaciones web y usar extensiones como la que usamos nos proporciona un plus que puede hacer mucho más entendible la aplicación para el equipo de desarrollo.

A veces uno se deja amedrentar por tecnologías que no conoce o técnicas que pocos usan pero es bueno arriesgarse de vez en cuando y asumir el reto que puede catapultarnos hacia un mejor desarrollo.

Leer más

La definición formal del proceso de desarrollo

Un buen proceso de desarrollo requiere tener unos estándares de calidad en relación con el proceso, de otra forma se cometerán errores una y otra vez además de que no se sabrá un inicio y un fin para este; por esto se decidió en conjunto la creación de un documento que estructure la forma en que se va a trabajar a lo largo del desarrollo, incluyendo sus actividades y el orden en que se cumplirán, sin embargo como el proceso ya había iniciado antes de su creación, hay algunas actividades que se realizaron en otro orden y que ya están terminadas, de ahí en adelante se tratara de seguir de la forma más cercana este documento.

A continuación se encuentra una muestra de este documento:


1. Fase de análisis del proyecto
    1.1 Recepción y discusión del problema a solucionar
    1.2 Definición de roles
    1.3 Definición de tareas a realizar
    1.4 Elección de la tecnología
    1.5 Elección del IDE
    1.6 Definición del cronograma de actividades

2. Fase de diseño
    2.1 Asignación de actividades según el rol
    2.2 Creación del primer esbozo de la arquitectura de la aplicación
    2.3 Análisis de requerimientos para la posterior creación del diagrama de casos de uso
    2.4 Diseño del diagrama de clases
    2.5 Diseño del modelo de bases de datos (E/R)
    2.6 Descripción en alto nivel de los casos de uso
    2.7 Creación o modificación del prototipo
    2.8 Aplicación de test de usabilidad correspondiente
    2.9 Análisis de los resultados del test de usabilidad
    2.10 Implementación de las correcciones al prototipo
    2.11 (Opcional) Regreso a 2.7 para una nueva iteración

3. Fase de construcción
    3.1 Asignación de actividades según el rol
    3.2 Implementación del framework correspondiente
    3.3 Creación de la GUI
    3.4 Implementación de la lógica de negocio
    3.5 Implementación de la base de datos
    3.6 Integración de las partes que conforman la arquitectura de la aplicación
    3.7 Aplicación de pruebas de funcionalidad
    3.8 Corrección de errores
    3.9 (Opcional) volver al punto 3.6

4. Fase de finalización
    4.1 Asignación de actividades según el rol
    4.2 Implementación de pruebas para atributos no funcionales
    4.3 Corrección de errores en atributos no funcionales
    4.4 Creación del manual de usuario
    4.4 Presentación de la aplicación al cliente para su aprobación
    4.5 Presentación del manual al cliente para su aprobación
    4.6  Documentación de las conclusiones de la experiencia.

Si desea conocer más a fondo este documento puede descargarlo desde: este link

Leer más

Presentacíon

Este Blog ha sido creado con la finalidad de documentar la experiencia adquirida por mi grupo en relacion con el desarrollo de una aplicación web en la materia Ingeniería de Software III.

Los integrantes de mi grupo de desarollo son:

    * Wilson Geovanny Carvajal
    * Daniel Cepeda
    * Orlando Paz
    * Jalbersson Guillermo Plazas

Un buen grupo de trabajo con el cual esperamos tener un buen desempeño durante el desarrollo del proyecto.

Leer más

Inicio del proceso de desarrollo

Para poder empezar un proyecto de desarrollo de software es esencial hacer una buena fase de diseño y elaboración, pero como en este caso estamos trabajando sobre una empresa ficticia, se encuentra a nuestra libertad los requerimientos que queremos trabajar y la forma en que los solucionaremos. En nuestro caso hemos decidido trabajar con una empresa ficticia que distribuye licores del Cauca a nivel nacional, por lo cual es de suma importancia tener un diseño estético apto para las personas que serian nuestros futuros clientes.

En este orden de ideas hemos hecho un esbozo de quiénes serian los usuarios de la aplicación, tanto usuarios comunes como usuarios de la empresa y son los siguientes:

1.   Administrador de la pagina: es el que se encarga de administrar los contenidos, noticias,
      organización de la pagina y demás aspectos técnicos que la pagina requiere; se caracteriza por
      tener un nivel de estudios alto y una capacidad alta para estructurar contenidos web. Para este
      perfil no es necesario tener en cuenta cuestiones como sus gustos porque este se limita a
      seguir lo que es aconsejado por diferente personal relacionado con la interacción con los
      usuarios finales de la aplicación.

2.   Usuario promedio: un usuario común que simplemente se interesa por conocer los productos
      ofrecidos a un detalle muy general. Este usuario tiene una gran variedad en cuanto a las
      características que podrían interesar para la aplicación, entre ellas están sus gustos los
      cuales no se pueden definir de forma especifica, ya que puede ser cualquier persona, lo
      importante a tener en cuenta es que esta interesado en los licores para su consumo personal y
      que posiblemente este buscando cuestiones como precios, que productos se ofrecen,
      eventos patrocinados por la empresa de licores y ademas de eso posiblemente cualquier tipo
      de promoción.

3.   Revendedor de licores (tendero/Licorería): se caracteriza por buscar productos y sus promociones
      de una forma mucho mas centrada que el usuario promedio; su nivel intelectual en general
      es medio pero se centra en aspectos económicos que posiblemente pueden haber sido
      adquiridos gracias a la experiencia. Su entorno social puede ser muy variado, por lo cual es
      difícil describirlo puntualmente.

En general estos serian los usuarios que realizarían las principales funciones en la aplicación.

Teniendo estos perfiles en mente diseñamos un primer prototipo de la GUI para que fuera revisada en clase por nuestros compañeros mediante el uso de Focus Group, un método de evaluación que nos permitiría ver diferentes perspectivas respecto al prototipo y encontrar cualquier error.



El prototipo inicial es el siguiente:
 

En esta pantalla inicial se puede mostrar una vista interactiva con varias secciones multimedia que estarían encaminadas a la publicidad tanto de los productos de la empresa como de diferentes ferias y fiestas que puedan ser patrocinadas.

En esta sección se ve la vista de los productos, cada uno con una foto y con su respectivo icono para añadir al carrito de compra; aparte se puede ver una opción en la cual se pueden buscar/filtrar los productos que se deseen ver.

Arriba esta la parte de registro donde se encuentran los datos que se requerirían para crear a un nuevo usuario; los  campos obligatorios estan marcados con un asterisco.

 En contacto se puede ver la información de los diferentes puntos de venta de los productos de la empresa para que si una persona lo desea llame o vaya al sitio de forma personal.

Aquí se encuentra el carrito de compras, es una visualización básica de lo que contendría el carrito luego de algunas transacciones; el carrito cuenta también con un total que se muestra de forma automática.

Ésta es la pantalla inicial que tendría un administrador, en la cual se puede  empezar a gestionar productos, usuarios, etc.

Por último se muestra una vista de la gestion de usuarios del administrador, el podría editar, crear o eliminar un usuario.

Despues de realizar el Focus Group se encontraron varios problemas de diseño y usabilidad, entre los que destacan el haber desarrollado una interfaz muy cargada de cosas, algunos terminos ambiguos y un maquetado no muy claro de las páginas.

Leer más