jueves, 14 de febrero de 2013

Un proyecto en NetBeans de principio a fin (I). Diseño de la aplicación

¡Vaya! Bonito pareado el del título... En fin. En este perseverante afán que me está llevando a convertirme en un ""experto"" en el desarrollo de aplicaciones java al abrigo de este Framework, me encontré con un completísimo tutorial que abarca la totalidad de los pasos del desarrollo de una pequeña, pero completamente funcional, aplicación web de e-commerce. Es un tutorial arduo que comienza con el escenario ficticio de una tienda de alimentación que pretende extender su negocio de productos orgánicos a Internet. Profundiza, basándose en requerimientos y reuniones figuradas con el cliente, en todo el proceso de desarrollo de una arquitectura orientada a servicios de cliente.

Mi intención no es otra que afianzar mis conocimientos a través de la repetición y el esfuerzo de sintetizar y contar todo el proceso con mis palabras (el original está en inglés). Adicionalmente esto me queda mucho más a mano para referencias puntuales en el futuro.

El tutorial original puede encontrarse AQUÍ.

Sin más preámbulos me meteré en situación e iré al asunto.


DISEÑANDO LA APLICACIÓN

El escenario

El cliente es una tiendita de comestibles llamada "the Affable Bean" (Algo así como "la Judía Cariñosa"... Un guiño sólo al alcance de unos pocos maestros de los juegos de palabras, eso es innegable...). Tras estudiar el mercado han decidido ampliar el negocio con un servicio de pedidos a domicilio. Intentan contactar con los mejores desarrolladores de Java para crear un sitio web que ponga a disposición de sus clientes una tienda online, pero como todos están ocupados me llaman a mi. Adicionalmente quieren también poder acceder mediante una consola de administración web para hacer un seguimiento de los pedidos.

En el tutorial original la tienda está en la República Checa, por lo que quieren que el website soporte inglés y checo... Aquí me tomaré una licencia poética y ubicaré a mi cliente en Poyales del Hoyo (sí, existe y está en Ávila). Por lo que la web tendrá soporte para español y checo... (sic)

Los propietarios ya tienen comprado un dominio y un servicio de hosting con servidor Java EE 6 y servidor MySQL de base de datos. Además informan de que un miembro de su plantilla tiene los conocimientos necesarios para realizar el despliegue en el servidor de producción cuando la aplicación esté lista.

Reuniendo requerimientos del cliente

En una fase inicial, cualquier proyecto requiere reunir información antes de tomar decisión alguna de diseño o implementación. Generalmente esto implica comunicación directa y frecuente con el cliente. La plantilla de la Judía Cariñosa ha determinado que la aplicación debe cumplir con los siguientes requerimientos:
  1. Presentación online de los productos vendidos físicamente en la tienda. Hay cuatro categorías (lácteos, carnes, panadería y frutería), y cuatro productos por cada categoría. Debe indicarse información sobre cada producto (nombre, imagen, descripción, precio...)
  2. Carrito de compra virtual con las siguientes posibilidades:
    • Añadir artículos
    • Quitar artículos
    • Actualizar la cantidad de artículos
    • Ver resumen de artículos y cantidades
    • Enviar pedido y hacer el pago a través de un proceso seguro
  3. Consola de administración para que los empleados puedan ver los pedidos de los clientes
  4. Seguridad, con la intención de proteger los datos sensibles de los clientes y evitar accesos no autorizados a la consola de administración
  5. Soporte de lenguaje para español y checo
El personal proporcionará imágenes y categorías de los productos, descripciones y precios, gráficos para la web los textos y traducciones necesarias.

Preparando las maquetas 

Después de la recopilación de requerimientos trabajamos con el cliente en un esbozo del sitio web para tener una idea más clara de su aspecto y su funcionamiento. Creamos un caso de uso para describir cómo se usará la aplicación y encapsular sus comportamientos.

Caso de uso

El cliente visita la página de bienvenida y selecciona una categoría de producto. El cliente navega por los productos en la página de la categoría seleccionada y añade un producto a su carrito. El cliente continúa comprando y selecciona otra categoría. El cliente añade varios productos de esta categoría a su carrito. El cliente selecciona la opción "ver carro" y actualiza las cantidades de los productos en la página de carro. El cliente verifica el contenido del carro y procede al pago. El cliente ve el precio del pedido y otras informaciones, rellena datos personales y envía sus detalles. El pedido se procesa y el cliente es llevado a página de confirmación. La página de confirmación proporciona un número de referencia único para el pedido y un resumen del pedido. 

A partir de aquí se hace un boceto de la aplicación a muy alto nivel. Existen varias formas de hacerlo, pero en este caso vamos a preparar unas maquetas de las páginas que el usuario verá cuando navegue por la web. Más tarde, cuando profundicemos en el diseño MVC, estas páginas se adaptarán bastante bien a las vistas que usará la aplicación. 
Página de bienvenida. Introduce el negocio y servicios, y habilita al usuario a navegar las categorías.
Página de bienvenida. Introduce el negocio y servicios, y habilita al usuario a navegar las categorías
Página de categorías. Proporciona lista de productos dentro de cada categoría. El usuario puede ver las características de cada producto, añadir a la lista de su compra...
Página del carro. Muestra información sobre productos del carro de la compra. Permite varias operaciones sobre los productos, como modificar las cantidades. Da acceso a la operación de pago.
Página de pago. Recoge información del cliente. Detalla condiciones de compra y costes finales. El usuario puede enviar información sobre un canal seguro.
Página de confirmación. Confirma la operación al cliente. Proporciona número de referencia del pedido y un resumen de los detalles de la compra.
Además se acuerdan una serie de reglas que se aplicarán al comportamiento de las páginas:
  1. El cliente debe poder acceder al pago desde cualquier página, contemplando que
    • El carrito no esté vacío
    • El cliente no se encuentre ya en la página de pago
    • El cliente no haya hecho el pago (por ejemplo que esté en la página de confirmación)
  2. En todas las páginas el cliente debe ser capaz de
    • Ver el estado de su carro de la compra (si éste no está vacío)
    • Volver a la página de bienvenida haciendo click en el logo
  3. El cliente debe poder seleccionar el idioma en todas las páginas (excepto en la página de confirmación)
Nota: En esta parte del desarrollo también debería realizarse en caso de uso para la consola de administración. Pero este tutorial se centra en el desarrollo de la tienda online, aunque posteriormente se mostrará cómo crear el mecanismo de login y la implementación de la consola de administración.

Flujo del proceso de negocio 

El siguiente diagrama muestra los componentes visuales y funcionales de cada página, y destaca las acciones primarias disponibles para la navegación del usuario. 

Determinando la arquitectura 

Antes de comenzar con la codificación es necesario determinar cual va a ser la arquitectura del proyecto. Concretamente hay que perfilar las responsabilidades entre los componentes funcionales y determinar cómo interactúan entre ellos.

Cuando se trabaja con tecnologías JSP es posible codificar toda la lógica de negocio mediante scriptlets dentro de las propias páginas. El código Java es perfectamente válido en páginas JSP, porque dichas páginas son compiladas en los servlets antes de ejecutarse. Sin embargo hay varias razones por las que esta práctica es poco recomendable en grandes proyectos: El código de los scriptlets no es reutilizable, mezclan lógica y presentación, rompen con la separación de roles entre los desarrolladores (por ejemplo entre programadores y diseñadores, puesto que mezclan programación y contenido web), dificultan la lectura y el mantenimiento de las páginas, es difícil de testear...

Existen varios patrones de diseño que se pueden aplicar. En este caso optaremos por el paradigma MVC (Modelo Vista Controlador), que divide la aplicación en tres componentes que interactúan entre si.

El modelo representa los datos de negocio y la lógica que gobierna el acceso y la modificación de esos datos. La vista (o vistas) renderiza el contenido del modelo y especifica cómo deben ser presentados los datos. El controlador define el comportamiento de la aplicación: atiende las peticiones del usuario, selecciona las vistas para la presentación, interpreta las actuaciones del usuario y las mapea en acciones que serán desempeñadas por el modelo.

En este diagrama puede verse cómo interactúan los componentes del modelo

La arquitectura MVC proporciona un gran desacoplamiento entre presentación, control, persistencia de datos y comportamiento, lo que repercute en una mayor flexibilidad y escalabilidad, y en un mejor mantenimiento y separación de tareas. De este modo, en el caso que nos ocupa, el diseño MVC nos permite usar un servlet como controlador para las peticiones entrantes. Las distintas páginas del diagrama de flujo pueden ser mapeadas en vistas. Y los datos de negocio pueden estar en una base de datos, accesibles y modificables en la aplicación usando componentes EJB de sesión con clases de entidades persistentes (JPA). 
Planificación del proyecto 

Llegados a este punto estamos en condiciones de realizar una planificación exhaustiva del proyecto. Desarrollaremos un guión de tareas -a muy alto nivel- pendientes de realizar, lo que nos proporcionará una valiosa lista de unidades simples de trabajo. Este guión perfilará los próximos apartados del tutorial (en el tutorial original este esquema es mucho más detallado, pero esto será suficiente dado que en cada apartado que desarrollemos se describirán las diferentes subtareas implicadas)
  1. Configuración del entorno de desarrollo
  2. Preparar en modelo de datos para la aplicación
  3. Crear el Front-End de los archivos de proyecto
  4. Organizar el Front-End de la aplicación
  5. Crear un servlet controlador
  6. Conectar la aplicación a la base de datos
  7. Desarrollo de la lógica de negocio
  8. Crear funcionalidad del carrito
  9. Integrar la lógica transaccional
  10. Añadir soporte de lenguaje
  11. Crear consola de administración
  12. Asegurar la aplicación
Próximamente: "Un proyecto en NetBean de principio a fin. Parte II"; en el que hablaré de la configuración del entorno de desarrollo.

1 comentario:

  1. Parece bien completito. Puede estar muy interesante para la gente que venga de PHP y .NET o nunca haya montado un proyecto java web bien organizado.

    ResponderEliminar