Aplicación para el diseño y venta de camisetas personalizadas · 2017-10-17 · aplicación...
Transcript of Aplicación para el diseño y venta de camisetas personalizadas · 2017-10-17 · aplicación...
Daniel Guzmán Castroviejo
César Domínguez Pérez
Facultad de Ciencia y Tecnología
Grado en Ingeniería Informática
2015-2016
Título
Director/es
Facultad
Titulación
Departamento
TRABAJO FIN DE GRADO
Curso Académico
Aplicación para el diseño y venta de camisetas personalizadas
Autor/es
© El autor© Universidad de La Rioja, Servicio de Publicaciones, 2016
publicaciones.unirioja.esE-mail: [email protected]
Aplicación para el diseño y venta de camisetas personalizadas, trabajo fin degrado
de Daniel Guzmán Castroviejo, dirigido por César Domínguez Pérez (publicado por la Universidad de La Rioja), se difunde bajo una Licencia
Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported. Permisos que vayan más allá de lo cubierto por esta licencia pueden solicitarse a los
titulares del copyright.
Facultad de Ciencia y Tecnología
TRABAJO FIN DE GRADO
Grado en Ingeniería Informática
Aplicación para el diseño y venta de camisetas
personalizadas
Alumno:
Daniel Guzmán Castroviejo.
Tutores:
César Domínguez Pérez
Logroño, junio, 2016
Aplicación para el diseño y venta de camisetas personalizadas
2
Contenido RESUMEN ............................................................................................................................ 4
SUMMARY .......................................................................................................................... 4
Capítulo 1 PLANIFICACIÓN ................................................................................................... 5
1.1 Alcance ................................................................................................................................ 5
1.2 Tecnologías y metodología de desarrollo .......................................................................... 7
1.3 Tareas a realizar .................................................................................................................. 8
1.4 Descripción de las tareas .................................................................................................... 9
1.5 EDT del proyecto ............................................................................................................... 10
1.6 Diccionario de la EDT ........................................................................................................ 10
1.7 Diagrama de Gantt ........................................................................................................... 11
1.8 Plan de comunicaciones ................................................................................................... 12
1.9 Plan de riesgos .................................................................................................................. 12
Capítulo 2 ANÁLISIS DEL PRODUCTO .................................................................................. 14
2.1 Requisitos funcionales ...................................................................................................... 14
2.1.1 Usuario ....................................................................................................................... 14
2.1.2 Cliente ........................................................................................................................ 14
2.1.3 Administrador ............................................................................................................ 15
2.2 Requisitos no funcionales ................................................................................................ 15
2.3 Diagrama de casos de uso ................................................................................................ 15
2.4 Especificación de los casos de uso ................................................................................... 17
2.5 Control de calidad ............................................................................................................. 18
Capítulo 3 DISEÑO ............................................................................................................. 20
3.1 Diseño de la base de datos ............................................................................................... 20
3.2 Diseño de la lógica de negocio ......................................................................................... 24
3.3 Diseño de las interfaces gráficas y de la navegabilidad .................................................. 25
Capítulo 4 IMPLEMENTACIÓN ............................................................................................ 34
4.1 Estructura y herramientas utilizadas ............................................................................... 34
4.2 Base de datos .................................................................................................................... 34
4.3 Capa de persistencia ......................................................................................................... 34
4.4 Capa de lógica de negocio ................................................................................................ 36
4.5 Capa de presentación ....................................................................................................... 36
4.6 Implementación de las principales funcionalidades ....................................................... 39
4.6.1 Personalizacion de la librería Fabric JS ..................................................................... 39
4.6.2 Introducción de textos en el área de personalización ............................................. 43
4.7 Otros aspectos relevantes ................................................................................................ 45
Daniel Guzmán Castroviejo
3
4.7.1 Forzar la codificación en UTF-8 ................................................................................. 45
4.7.2 Denegar el acceso a ficheros con contenidos sensibles. .......................................... 45
4.7.3 Tratamiento de errores ............................................................................................. 46
Capítulo 5. CONCLUSIONES ................................................................................................ 48
5.1 Gestión real del proyecto ................................................................................................. 48
Capítulo 6. BIBLIOGRAFÍA .................................................................................................. 50
Aplicación para el diseño y venta de camisetas personalizadas
4
RESUMEN
La empresa en la que se desarrollaron mis prácticas curriculares, Manantial de Ideas S.L., está
especializada en el marketing y en el diseño gráfico. Esta empresa dispone de un amplio equipo
de diseñadores que realizan todas las tareas relacionadas con el diseño gráfico. Por ello dispone
de un banco de imágenes a las que pretende dar salida y ve una posibilidad de negocio en la
venta de artículos personalizados, utilizando dichas imágenes.
El gerente de Manantial de Ideas S.L., Juan de la Cruz Beltrán, me propone la realización de una
aplicación destinada a la personalización y venta de camisetas. Esta aplicación tendrá dos
versiones, una web y otra de escritorio alojada en las máquinas de información táctil, Infotactile,
pertenecientes a la misma empresa. Ambas versiones permitirán personalizar camisetas,
elaborar pedidos y ejecutar pagos. Además la web dispondrá de un registro de diseñadores
interesados en vender sus creaciones, un área de clientes y un área de administración.
SUMMARY
The Company where my curriculum practices were developed, Manantial de Ideas S.L., is
specialized in marketing and graphic design. This Company has a large team of designers that
perform all tasks related to graphic design. Therefore it has an image bank which aims to sell
and sees a business opportunity in selling personalized ítems, using such images.
Manantial de Ideas S.L. manager, Juan de la Cruz Beltrán, proposed me making an application
for customization and selling shirts. This application will have two versions, one web version and
other desktop version hosted in tactile information machines, Infotactile. Both versions allows
to customize shirts, develop orders and execute payments. In addition, the web version will have
a record of designers interested in selling their creations, a customer área and a administration
área.
Daniel Guzmán Castroviejo
5
Capítulo 1 PLANIFICACIÓN
1.1 Alcance
El producto a realizar consistirá en una aplicación destinada al diseño y venta de camisetas
personalizadas. Dicho producto contará con dos versiones: una versión web y una versión de
escritorio instalada en las máquinas de información táctil Infotactile pertenecientes a la empresa
Manantial de Ideas S.L. En un futuro se plantea la posibilidad de extender su uso a otro tipo de
productos, como pueden ser sudaderas, zapatillas deportivas, fundas para móviles, etc. El
nombre de la aplicación será Masdemil.
Manantial de Ideas S.L. cuenta con las máquinas de información Infotactile. Dichas máquinas las
podemos encontrar en numerosos hoteles y lugares de interés turístico, y proporcionan
información al usuario sobre la ciudad donde se encuentran, sitios de interés (monumentos,
museos, restaurantes, medios de transporte), servicios, además de venta de entradas para
espectáculos y promociones exclusivas. La empresa también cuenta con un gestor de páginas
web llamado TuCreasWeb donde el usuario puede registrar su dominio, alojar su web o tienda
virtual, e incluso destacar su página a través del posicionamiento SEO.
La aplicación web dispondrá de diferentes apartados:
Apartado de diseño y personalización de las camisetas: se podrá elegir el tipo de
camiseta en función de la persona (hombre, mujer o niño/a) y de las características de
la prenda (sin mangas, manga corta, manga larga, cuello redondo, cuello en pico), el
color y la talla. Además se podrán añadir cuadros de texto con diferentes tipográficas,
colores de letra y alineación del texto, diseños ya predefinidos o un diseño propio a
partir de una imagen. Las camisetas podrán personalizarse tanto por la parte delantera
como por la parte trasera. La región personalizable de la camiseta estará delimitada.
Además cada elemento añadido a la camiseta podrá variar de tamaño, girar y
desplazarse a cualquier posición dentro de la región. Esta sección también contará con
una opción de previsualización de manera que el usuario podrá ver el producto de una
manera más real.
Apartado de productos predefinidos: la aplicación contará con una colección de
camisetas con colores y diseños ya establecidos. Estos resultados se podrán filtrar por
el tipo de camiseta, la temática del diseño y la persona a la que va destinada. Incluso
cuando se elija un producto predefinido, este se podrá personalizar de manera que
podremos cambiar el tipo de camiseta o el color, o incluso trasladar el producto a la
sección de diseño y modificarlo por completo.
Apartado de venta de diseños: un usuario podrá vender sus propios diseños dentro de
la aplicación, únicamente proporcionando su correo electrónico, a través del cual la
empresa se pondrá en contacto para negociar sus creaciones.
Apartado de usuarios registrados: todo usuario que lo desee podrá registrarse en la
aplicación a través de un formulario, indicando sus datos personales (nombre, apellidos,
dirección, correo electrónico, teléfono), un nombre de usuario y una contraseña. Para
llevar a cabo el registro, el usuario será informado de las condiciones de uso y de las
políticas establecidas en la aplicación, y por consiguiente, deberá aceptarlas. Los
usuarios registrados podrán realizar pedidos, tramitar pagos, almacenar pedidos sin
finalizar, ver el historial de pedidos realizados, guardar sus diseños favoritos, ver el
Aplicación para el diseño y venta de camisetas personalizadas
6
estado de sus pedidos pendientes, gestionar sus datos personales e incluso dar de baja
su cuenta.
Apartado de administración: el administrador de la aplicación contará con una sección
donde podrá ver y gestionar los pedidos realizados. También podrá gestionar las
categorías, productos, diseños, (añadiendo nuevos, eliminando o modificando los ya
existentes), tipos de envío, precios, y el stock del almacén. Dispondrá de información
acerca de los usuarios registrados en la aplicación, que también podrá gestionar, así
como de diseñadores interesados en vender sus diseños. Además podrá obtener
estadísticas de la aplicación web relacionadas con las visitas, los pedidos y los usuarios
registrados.
Apartado de ayuda: la aplicación dispondrá de una sección de ayuda donde el usuario
se podrá poner en contacto con la empresa rellenando un formulario con el nombre, el
correo electrónico, un teléfono, el número del pedido si es aplicable y la consulta a
realizar. Además contará con una sección que incluirá preguntas frecuentes con sus
correspondientes respuestas y también dispondrá de información relativa a la empresa
responsable de la aplicación.
La aplicación también dispondrá de información relativa a los gastos de envío, tiempos de
entrega de los pedidos y devoluciones. A si mismo, el usuario podrá consultar las condiciones
generales de uso y la política de cookies establecida.
El administrador y los usuarios contarán con páginas de inicio de sesión diferentes para mayor
seguridad.
El administrador del sistema recibirá para cada producto personalizado dos imágenes. Una de
ellas corresponderá con la parte delantera de la camiseta y otra con la parte trasera. En dichas
imágenes estarán incluidos los diseños y los textos añadidos por el usuario. De esta manera el
administrador podrá descargarse dichas imágenes y llevar a cabo la impresión en las camisetas.
A si mismo recibirá información del tipo de camiseta, la talla, el color y la cantidad.
Para tramitar los pedidos la aplicación utilizará un carrito de la compra. En él se irán
almacenando los productos que se soliciten. Una vez que el usuario ha terminado de seleccionar
los productos, si lo desea podrá proceder con su pedido de manera que no será necesario iniciar
sesión ni tener cuenta en la aplicación. Únicamente deberá facilitar sus datos personales, una
dirección donde enviar el pedido, un correo electrónico donde le llegará su factura y un teléfono
de contacto.
Cada tipo de camiseta tendrá un precio diferente, que podrá variar en función del color, la talla
o el material. A este precio se le añadirá un coste adicional por cada diseño y texto introducido.
Todos los pedidos podrán pagarse a través de diferentes medios seguros, ya sea con tarjeta de
crédito, PayPal o contra reembolso. También se podrá elegir el tipo de envío, por correo urgente
o por correo estándar.
Cualquier usuario que no se haya registrado en la aplicación y que desee consultar el estado de
su pedido, podrá hacerlo indicando el número de pedido y su correo electrónico.
La aplicación estará disponible en varios idiomas, fundamentalmente en inglés, francés, alemán
y español.
Daniel Guzmán Castroviejo
7
Por último la aplicación deberá cumplir con los requerimientos legales establecidos en la LOPD
(Ley Orgánica de Protección de Datos), LSSI (Ley de Servicios de la Sociedad de la Información) y
la Ley de Propiedad Intelectual.
La aplicación de escritorio de las máquinas será similar al del sitio web. El usuario podrá elegir
una camiseta con un diseño predefinido o diseñar su propia camiseta con un diseño almacenado
en la aplicación o un diseño propio. Podrá añadir tantos diseños y textos como desee dentro de
la región acotada. Dispone de un carrito donde se irá almacenando cada producto
personalizado, con su cantidad, su talla y su color.
Una vez que el usuario haya seleccionado los productos que conforman su pedido, podrá llevar
a cabo el pago del mismo a través de un TPV físico y un sistema de pago en efectivo instalado
en las propias máquinas. Además la factura de su pedido será impresa también en la propia
máquina a través de una impresora.
La persona que se encuentre al cargo de la máquina recibirá toda la información
correspondiente al pedido, y podrá obtener a partir de imágenes los diseños que el usuario
desea para llevar a cabo la impresión.
Toda la información se almacenará dentro de la propia máquina, excepto los pedidos que
también deberán almacenarse en la base de datos de la aplicación web. Si la máquina no cuenta
con conexión a Internet, en el momento en que la tenga, los pedidos se deberán sincronizar con
los de la aplicación web.
Del mismo modo que la versión web, estará disponible en varios idiomas.
1.2 Tecnologías y metodología de desarrollo
La aplicación web estará desarrollada en PHP tal y como la empresa expresamente me ha
solicitado, ya que todas sus páginas webs están desarrolladas en dicho lenguaje y durante las
prácticas en la empresa he estado aprendiendo. Además PHP posee una curva de aprendizaje
muy baja, es similar a otros lenguajes como Java y su despliegue es muy sencillo. También la
aplicación será muy dinámica, por lo que utilizaremos JavaScript junto con tecnologías como
AJAX y librerías como JQuery para hacerla lo más interactiva posible, y HTML y CSS que nos
permitirán desarrollar y maquetar todas las interfaces de la aplicación.
La base de datos utilizada será MySQL, también estudiada en varias asignaturas a lo largo del
Grado. Como pasarela de pago para los pedidos se utilizará un TPV Virtual, ya que es el medio
de pago utilizado en la mayoría de las tiendas virtuales y que proporciona un nivel de seguridad
bastante adecuado.
La aplicación de escritorio estará desarrollada en C# ya que las maquinas Infotactile cuentan con
Windows 7 como sistema operativo. Todas las aplicaciones que disponen estas máquinas están
desarrolladas en Visual Basic, pero yo me decanto por C# porque ambos lenguajes han sido
desarrollados por Microsoft, son muy similares y como C# lo he utilizado a lo largo del Grado no
necesitaré dedicar horas del TFG a la preparación de Visual Basic. Además la aplicación de
escritorio contará con partes web, también desarrolladas en PHP.
La base de datos utilizada para la aplicación de escritorio será SQL gestionada a través del
sistema PostgreSQL utilizado por la empresa en el resto de aplicaciones alojadas en las
máquinas.
Aplicación para el diseño y venta de camisetas personalizadas
8
El desarrollo de ambas aplicaciones seguirá el modelo iterativo e incremental. Utilizar este
modelo permite al cliente obtener resultados importantes y usables desde las primeras
iteraciones, de manera que como máximo el cliente puede perder los recursos dedicados a una
iteración. Ademas este modelo mitiga desde el inicio los riesgos del proyecto y se gestiona la
complejidad del mismo con mayor facilidad.
1.3 Tareas a realizar
Tarea Tiempo estimado
Análisis de requisitos 14 horas
Reuniones con el cliente 6 horas
Reuniones con el tutor 12 horas
Planificación 14 horas
Diseño de la interfaz de la versión web 3 horas
Diseño de la Base de datos 4 horas
Diseño de la lógica de la versión web 8 horas
Implementación de la interfaz web 14 horas
Creación de la Base de datos 2 horas
Implementación de la lógica de la versión web 52 horas
Pruebas de la versión web 8 horas
Gestión de calidad 4 horas
Gestión de riesgos 4 horas
Gestión de comunicaciones 4 horas
Diseño de la interfaz de la versión de escritorio 3 horas
Diseño de la lógica de la versión de escritorio 8 horas
Diseño de la capa de persistencia de la versión de escritorio 4 horas
Implementación de la interfaz de escritorio 10 horas
Creación de la base de datos 2 horas
Implementación de la capa de persistencia 14 horas
Implementación de la lógica de la versión de escritorio 32 horas
Pruebas de la versión de escritorio 6 horas
Preparación de la presentación 15 horas
Elaboración de la memoria del TFG 25 horas
Seguimiento y control 8 horas
Instalación de software y herramientas 2 horas
Documentación relativa al proyecto 12 horas
Consultas y búsqueda de información 10 horas
Diseño de la capa de persistencia de la versión de escritorio 4 horas
Total 304 horas
Tabla 1. Tareas a realizar
Daniel Guzmán Castroviejo
9
1.4 Descripción de las tareas
Análisis de requisitos: se definirán los requisitos necesarios que debe cumplir la
aplicación.
Planificación: elaboración de toda la documentación relacionada con la planificación del
proyecto.
Diseño de la interfaz de la versión web: se elaborarán unas plantillas modelo que
reflejen la apariencia de diferentes partes de la web.
Diseño de la base de datos: diagramas y optimización de la base de datos de la
aplicación.
Diseño de la lógica de la versión web: diagramas y documentación que refleje la
funcionalidad de la aplicación web.
Implementación de la interfaz web: creación y maquetado de los diferentes elementos
que conforman las interfaces de la aplicación web.
Creación de la base de datos: generar tablas, relaciones entre tablas y carga de datos.
Implementación de la lógica de la versión web: programación de todo el código
necesario para la funcionalidad de la web.
Pruebas de la versión web: comprobaciones y pruebas del correcto funcionamiento de
la aplicación web.
Gestión de calidad: con ayuda de una CheckList se comprobará que se vayan cumpliendo
todos los requisitos.
Gestión de riesgos: se indicaran que riesgos puede tener el proyecto a lo largo de su
realización.
Gestión de comunicaciones: se definirá con quien comunicarse, como va a ser esa
comunicación, a través de medios y en que rango de horas o días.
Diseño de la interfaz de la versión de escritorio: se elaborara unas plantillas modelo que
refleje la apariencia de las partes que forman la versión de escritorio.
Diseño de la lógica de la versión de escritorio: diagramas y documentación que refleje
la funcionalidad de la aplicación.
Diseño de la capa de persistencia: diagramas y documentación que represente todas las
comunicaciones con la base de datos.
Implementación de la interfaz de escritorio: creación y maquetado de los diferentes
elementos que conforman las interfaces de la aplicación de escritorio.
Implementación de la lógica de la versión de escritorio: programación de todo el código
necesario para la funcionalidad de la aplicación de escritorio.
Pruebas de la versión de escritorio: comprobaciones y pruebas del correcto
funcionamiento de la aplicación de escritorio.
Preparación de la presentación: se elaborará una presentación para la defensa ante el
Tribunal del Trabajo Fin de Grado.
Elaboración de la memoria del TFG: redacción de un documento de 50 páginas que
contenga el desarrollo del TFG.
Seguimiento y control: documentación relativa al seguimiento del proyecto.
y configuración de las diferentes herramientas y programas que se utilizaran para el
desarrollo e implementación de la aplicación.
Documentación relativa al proyecto: memoria, anexos y diagramas generados.
Aplicación para el diseño y venta de camisetas personalizadas
10
Consultas y búsqueda de información: consultas a través de internet y otros medios, de
información relativa al desarrollo de todo el proyecto, tanto la documentación como la
programación del mismo.
1.5 EDT del proyecto
En la figura 1 se presenta la EDT del proyecto.
Figura 1. EDT del proyecto.
1.6 Diccionario de la EDT
1.1.1: Confección de los requisitos o requerimientos que demanda el cliente del
producto.
1.1.2: Definición de las tecnologías a utilizar para desarrollar la aplicación.
1.2.1: Descripción de las tareas a realizar y del alcance del proyecto.
1.2.2: Gestión de riesgos y posibles problemas que pueden surgir durante el desarrollo
del proyecto.
1.2.3: Documentación referida a los plazos de entrega y gestión del tiempo por medio
de fechas e hitos.
1.3.1.1: Diseño de las interfaces de la aplicación web.
1.3.1.2: Diseño de la base de datos de la aplicación web.
1.3.1.3: Diseño de la lógica de la aplicación web.
1.3.2.1: Implementación de las interfaces de la aplicación web y maquetado de los
elementos que las conforman.
1.3.2.2: Creación de la base de datos, carga de datos y gestión de las conexiones a la
misma.
1.3.2.3: Implementación de la lógica y del comportamiento de la aplicación web.
Daniel Guzmán Castroviejo
11
1.3.3: Comprobaciones y verificaciones del correcto funcionamiento de la aplicación
web.
1.4.1.1: Diseño de las interfaces de la aplicación de escritorio.
1.4.1.2: Diseño de la base de datos de la aplicación de escritorio.
1.4.1.3: Diseño de la lógica de la aplicación de escritorio.
1.4.2.1: Implementación de las interfaces de la aplicación de escritorio y maquetado de
los elementos que las conforman.
1.4.2.2: Creación de la base de datos, carga de datos y gestión de las conexiones a la
misma.
1.4.2.3: Implementación de la lógica y del comportamiento de la aplicación de escritorio.
1.4.3: Comprobaciones y verificaciones del correcto funcionamiento de la aplicación de
escritorio.
1.5.1: Documentación obtenida de las reuniones. En esta tarea englobamos todas las
reuniones a lo largo del producto, tanto con el cliente como con el tutor.
1.5.2: Seguimiento de los posibles riesgos que puedan aparecer durante el desarrollo
del proyecto.
1.5.3: Verificación de que se van cumpliendo los requisitos establecidos por el cliente
en la captura de los mismos, garantizando la calidad del producto.
1.6.1: Elaboración de la memoria correspondiente al Trabajo Fin de Grado.
1.6.2: Preparación de la presentación para la defensa del Trabajo Fin de Grado.
1.7 Diagrama de Gantt
En las figuras 2 y 3 se muestran el diagrama de Gantt y los hitos del proyecto.
Figura 2. Diagrama de Gantt
Aplicación para el diseño y venta de camisetas personalizadas
12
Figura 3. Diagrama de Gantt
1.8 Plan de comunicaciones
En esta tabla se muestra el plan de comunicaciones a seguir en este proyecto.
Interesado Informar Pedir información Acuerdos
Cliente
Asíncrono
Skype, Correo electrónico
Asíncrono
Skype, Correo electrónico
Síncrono
Reuniones, llamadas Síncrono
Reuniones
Síncrono
Reuniones
Tutor
Asíncrono
Correo electrónico, Herramienta TFG
Asíncrono
Correo electrónico Síncrono
Reuniones
Síncrono
Reuniones
Síncrono
Reuniones
Tabla 2. Plan de comunicaciones del proyecto
1.9 Plan de riesgos
En las siguientes tablas se recoge la planificación de los riesgos de este proyecto.
Riesgo Si sucede Para evitarlo/minimizarlo
Rendimiento Redistribución del trabajo Seguimiento de tareas y plazos
Enfermedad/imponderable Recortar alcance Distribuir bien las horas
Tabla 3. Riesgo de recursos humanos
Daniel Guzmán Castroviejo
13
Riesgo Si sucede Para evitarlo/minimizarlo
Disfunción comunicación Revisión del plan de comunicación
Plan de comunicación bien definido
Cambios especificaciones Revisión del alcance Feedback con el cliente
Cambios alcance Revisión de costes Enseñar al cliente en las reuniones el trabajo
realizado hasta el momento
Retrasos contrato Uso de medios de comunicación alternativos
Seguimiento de plazos y tareas.
Tabla 4. Riesgos de relaciones con el cliente
Riesgo Si sucede Para evitarlo/minimizarlo
No podemos usarla Cambio de tecnología Analizar bien las alternativas
Coste imprevisto de formación
Recorte del alcance Elegir tecnologías conocidas
No es adecuada para algo Búsqueda de alternativa Documentar bien las herramientas a usar
Tabla 5. Riesgos con la tecnología
Aplicación para el diseño y venta de camisetas personalizadas
14
Capítulo 2 ANÁLISIS DEL PRODUCTO
Una vez descrito el alcance del proyecto y la planificación, se recogerán y documentarán los
requisitos funcionales y no funcionales que deberán soportar ambas aplicaciones. Estos
requisitos se han obtenido a través de una reunión con el tutor de la empresa Manantial de
Ideas S.L. y el estudio de los problemas y necesidades del mismo.
2.1 Requisitos funcionales
Tanto la aplicación web como la aplicación de escritorio estarán enfocadas al diseño y venta de
camisetas personalizadas. Sin embargo los roles serán diferentes:
Para la aplicación web: usuario, cliente y administrador.
Para la aplicación de escritorio: usuario y administrador.
Para poder utilizar la aplicación web como cliente, será necesario estar registrado. Por ello
estarán disponibles dos formularios, uno de registro y otro de inicio de sesión. Este segundo
incluirá la opción de recuerdo de contraseña. Además el propio administrador podrá llevar a
cabo el registro de clientes.
A continuación definiremos las funcionalidades disponibles para cada rol.
2.1.1 Usuario
Crear camisetas personalizadas. Para ello elegirá el tipo de camiseta, la talla y el color.
Además podrá agregar en las regiones acotadas una imagen propia o una imagen
disponible en la aplicación y cuadros de texto con diferentes fuentes y colores de letras.
Ver la colección de productos prediseñados. Cuando seleccione uno de los productos,
podrá trasladarlo a la sección de personalización para editarlo.
Agregar, eliminar y modificar un producto almacenado en el carrito de la compra.
Realizar un pedido, detallando previamente sus datos personales, una dirección de
envío y el tipo de envío, correo urgente o correo ordinario.
Pagar un pedido. Podrá elegir el método de pago, ya sea PayPal, contrarreembolso o
tarjeta de crédito.
Ponerse en contacto con la empresa para ofrecer nuevos diseños. Para ello enviará un
correo electrónico a través de un formulario que se almacenará en la aplicación.
Consultar la sección de ayuda compuesta por preguntas frecuentes y diversa
información.
Registrarse en la aplicación a través de un formulario, introduciendo sus datos
personales, un nombre de usuario y una contraseña válidos.
Seleccionar el idioma de la aplicación web.
Consultar las condiciones de registro y legales del sistema.
2.1.2 Cliente
Iniciar sesión en la aplicación a través de un formulario. Además dispondrá de la opción
de obtener una nueva contraseña en caso de que el usuario no la recuerde.
Consultar el estado de un pedido. El pedido podrá estar sin finalizar, finalizado,
pendiente o entregado. Dispondrá de la opción de descargar un resumen de cada
pedido en formato PDF.
Daniel Guzmán Castroviejo
15
Consultar el historial de pedidos realizados por el usuario.
Almacenar un pedido sin finalizar, es decir, sin pagar.
Almacenar sus diseños preferidos. Se almacenarán camisetas completas, es decir, el tipo
de camiseta, color y el diseño de la parte delantera y trasera.
Añadir, modificar y eliminar los datos personales almacenados del usuario.
Dar de baja la cuenta. Para ello deberá introducir los motivos por los que el usuario
desea eliminar la cuenta.
2.1.3 Administrador
Añadir, eliminar y modificar las camisetas sobre las que aplicar el diseño. Esto incluye el
tipo de camiseta, los colores disponibles, las tallas y el precio. Además para poder añadir
nuevos productos será necesario incluir el precio.
Añadir y eliminar diseños. Cada diseño estará categorizado según la temática que
represente y para añadirlo será necesario especificarla.
Añadir y eliminar categorías de los diseños.
Consultar y actualizar stock. Podrán consultarse la cantidad de productos disponibles y
modificar esta cantidad.
Consultar, modificar y eliminar pedidos. Además podrá descargarse un resumen de cada
pedido en PDF y el diseño de la parte delantera y de la parte trasera para su impresión,
ambos en formato imagen.
Consultar, añadir y eliminar usuarios de la aplicación, así como, modificar sus datos
personales.
Consultar estadísticas sobre usuarios, pedidos, diseños, clientes y visitas en la aplicación.
Consulta de correos de diseñadores interesados en vender sus diseños.
2.2 Requisitos no funcionales
Además de los requisitos funcionales ya enunciados, deberá tenerse en cuenta lo siguiente:
La aplicación web deberá ser accesible desde cualquier dispositivo y visualizarse
correctamente.
La aplicación web contará con los mecanismos de seguridad para impedir ataques y
poner en riesgos los datos almacenados.
El usuario podrá consultar toda la información relativa a los gastos de envío, tiempos
de entrega de pedidos, devoluciones, condiciones generales de uso y política de
cookies.
La aplicación deberá cumplir con los requerimientos legales establecidos en la LOPD,
LSSI y la Ley de Propiedad Intelectual.
2.3 Diagrama de casos de uso
En las figuras 4, 5 y 6 se muestra el diagrama de casos de uso de la aplicación web:
Aplicación para el diseño y venta de camisetas personalizadas
16
Figura 4. Rol usuario del diagrama de casos de uso.
Figura 5. Rol cliente del diagrama de casos de uso.
Daniel Guzmán Castroviejo
17
Figura 6. Rol administrador del diagrama de casos de uso.
Para la aplicación de escritorio, el diagrama será similar. Las diferencias serán:
El rol cliente junto con sus casos de uso no existirán.
El rol administrador solo dispondrá de los casos de uso: consultar stock, actualizar
stock, consultar pedido, modificar pedido, eliminar pedido y descargar diseño.
2.4 Especificación de los casos de uso
La especificación completa de los casos de uso se encuentra en el Anexo 1. A continuación
describiremos los casos de uso más interesantes del diagrama anterior.
Aplicación para el diseño y venta de camisetas personalizadas
18
Caso de Uso: Realizar pedido
Actores: Usuario, cliente y administrador.
Precondiciones: El carrito deberá tener algún producto.
Postcondiciones: El pedido quedará registrado.
Pasos: 1. El usuario accederá a su carrito de la compra. 2. Se seleccionará la opción de proceder con el pedido. 3. El sistema comprobará que el carrito no está vacío. 4. El usuario indicará sus datos personales y una dirección de envío. 5. El sistema validará y almacenará los datos en el pedido. 6. El usuario elegirá el tipo de envío. 7. El sistema almacenará el tipo de envío.
Extensiones 4.1 Si el cliente ha iniciado sesión no serán necesarios introducir los datos personales, únicamente se indicará una dirección de recogida. 5.1 Si los datos no son válidos el sistema volverá al paso 4. 7. 1 Si el usuario no indica alguno de los datos requeridos, el caso de uso se acaba.
Tabla 6. Caso de uso Realizar pedido
Caso de Uso: Modificar usuario
Actores: Administrador.
Precondiciones: El usuario deberá estar registrado en el sistema.
Postcondiciones: Se modificará el usuario que solicite el administrador.
Pasos: 1. El administrador iniciará sesión en el sistema. 2. Accederá a la sección de usuarios. 3. El sistema mostrará todos los usuarios registrados. 4. El administrador seleccionará el usuario a modificar. 5. El sistema mostrará la información relativa al pedido. 6. El administrador modificará los datos del usuario. 7. El sistema validará que los datos introducidos son correctos y solicitará la
confirmación de los mismos. 8. El administrador confirmará los cambios. 9. El usuario quedará modificado.
Extensiones 7.1 Si los datos no son válidos, se volverá al paso 6. 8.1 Si el administrador no confirma los cambios, el caso de uso se acaba.
Tabla 7. Caso de uso Modificar usuario
2.5 Control de calidad
Como indicamos anteriormente, el cumplimiento de cada uno de los requisitos quedará
registrado en varios CheckList siguiendo las plantillas incluidas en las tablas 8, 9 y 10:
Daniel Guzmán Castroviejo
19
Rol Usuario
Requisito Si No NP Comentario
Personalizar camiseta
Colección de camisetas
Carrito de la compra
Gestión de Pedidos
Pagos
Formulario para diseñadores
Sección de ayuda
Registro de usuarios
Internacionalización
Condiciones legales y de registro
Tabla 8. Plantilla de calidad
Rol Cliente
Requisito Si No NP Comentario
Inicio de sesión
Acceso al historial de pedidos
Pedidos sin finalizar
Estado de los pedidos
Diseños preferidos
Gestión de datos personales
Eliminación de cuenta.
Tabla 9. Plantilla de calidad
Rol Administrador
Requisito Si No NP Comentario
Gestión de camisetas
Gestión de diseños
Gestión de categorías
Gestión de stock
Gestión de pedidos
Gestión de usuarios
Estadísticas
Gestión de diseñadores
Tabla 10. Plantilla de calidad
Aplicación para el diseño y venta de camisetas personalizadas
20
Capítulo 3 DISEÑO
Este capítulo recoge los aspectos fundamentales del diseño de la aplicación, como son la base
de datos y las interfaces más significativas.
3.1 Diseño de la base de datos
Para cada camiseta almacenaremos un identificador, nombre, género al que pertenece, la
imagen de la parte delantera, la imagen de la parte trasera y precio. Cada modelo camiseta
podrá tener varios colores y tallas disponibles. Además para cada talla y color habrá disponible
un stock determinado.
Sobre una camiseta se podrá aplicar un único diseño. Para cada diseño se almacenará un
identificador, un nombre, la categoría del diseño y el precio del diseño. Cada diseño estará
conformado por dos partes, la región personalizable de la parte delantera de la camiseta y la
región personalizable de la parte trasera. Ambos campos estarán formados por cadenas de texto
correspondientes a los JSON generados por la librería utilizada.
Para cada imagen disponible en la aplicación se almacenará un identificador, un nombre, la ruta
en la que se encuentra y el precio.
Para cada tipo de fuente disponible en los textos personalizables se almacenará un identificador,
un nombre, la ruta donde se encuentra el fichero que la define y el precio.
Cada camiseta personalizada o prediseñada quedará determinado por un identificador, la
camiseta sobre la que se aplica, el diseño correspondiente y el color de la camiseta.
Un usuario es un cliente que no desea realizar un pedido pero no desea registrarse en la
aplicación. Para cada usuario almacenaremos un identificador, su nombre, sus apellidos, su
correo electrónico, un teléfono, su dirección, su localidad, su provincia y el código postal.
Un cliente es un tipo de usuario que dispone de cuenta en la aplicación. Para cada cliente
además de los campos almacenados para un usuario, se almacenará un nombre de usuario, el
hash de su contraseña y su estado.
Un cliente tiene asignado un único rol: cliente o administrador de la aplicación web; y un único
estado: activo o inactivo.
Cuando un usuario solicita el registro en la aplicación se guarda el identificador del usuario, la
fecha de solicitud y un código que se envía al email del usuario y que utilizará para completar
dicho registro.
Cada usuario puede solicitar varios cambios de contraseña si la ha olvidado. Por ello se guardará
la fecha de la solicitud de cambio y un código que se envía al email del usuario para efectuar el
cambio. Además cada usuario tendrá asociados varios diseños favoritos.
Un usuario puede realizar varios pedidos. Para cada pedido se almacenará un identificador, la
fecha en la que el pedido se efectuó, el precio total, la dirección de envío, el tipo de pago y el
estado del pedido. Un pedido solamente pertenecerá a un único usuario y podrá estar
conformado por varias líneas de pedido.
Para cada línea del pedido se almacenará un identificador de la línea de pedido, el producto
asociado a la línea, la cantidad, la talla del producto y el precio total de la línea. Cada pedido
Daniel Guzmán Castroviejo
21
contará con un único tipo de envío asociado. Para cada tipo de envío se almacenará un
identificador, un nombre descriptivo y el precio del envío.
Para cada diseñador interesado en vender sus productos se almacenará únicamente su correo
electrónico.
A continuación se muestra el diagrama entidad-relación correspondiente a la base de datos
diseñada:
Figura 7. Diagrama Entidad-Relación
Aplicación para el diseño y venta de camisetas personalizadas
22
La transformación a modelo relacional del anterior diagrama queda de la siguiente manera:
CAMISETA
Id Nombre Genero Imagen_delantera Imagen_trasera Precio
Tipos de datos: Id (int). Nombre, Genero, Imagen_delantera e Imagen_trasera (varchar).
STOCK
Camiseta Color Talla Cantidad
CE: CAMISETA
Tipos de datos: Cantidad (int). Color y Talla (varchar).
DISENO
Id Nombre Categoria Parte_delantera Parte_trasera Precio
Tipos de datos: Id (int). Nombre, Categoría, Parte_delantera y Parte_trasera (varchar). Precio
(float).
IMAGEN
Id Nombre Ruta Precio
Tipos de datos: Id (int). Precio (float). Ruta y Nombre (varchar).
TEXTO
Id Nombre Ruta Precio
Tipos de datos: Id (int). Precio (float). Ruta y Nombre (varchar).
CAMISETA_DEFINIDA
Id Diseno Color
CE:CAMISETA CE:DISEÑO
Tipos de datos: Id y Diseno (int). Color (varchar)
LINEA_PEDIDO
Id Cantidad Talla Precio Camiseta Pedido
CE: CAMISETA_DEFINIDA CE: PEDIDO
Tipos de datos: Id y Cantidad (int). Talla (varchar). Precio (float).
Daniel Guzmán Castroviejo
23
PEDIDO
Id Fecha Precio Direccion Pago Estado Envio Usuario
CE:ENVIO CE:USUARIO
Tipos de datos: Id (int). Fecha (date). Precio (float). Dirección, Pago y Estado (varchar).
ENVIO
Id Nombre Precio
Tipos de datos: Id (int). Nombre (varchar). Precio (float).
USUARIO
Id Nombre Apellidos Correo Telefono Direccion Localidad Provincia CP
Tipos de datos: Id y CP (int). Nombre, Apellidos, Correo y Direccion (varchar)
CLIENTE
Id Nombre usuario Contrasena Rol Estado
CE: Usuario Unique
Tipos de datos: Id y CP (int). Nombre usuario, Contraseña ,Rol y Estado (varchar).
DISENO_FAVORITO
Camiseta Usuario
CE: CAMISETA_DEFINIDA CE: USUARIO_REGISTRADO
SOLICITUD_REGISTRO
Usuario Fecha Codigo
CE: USUARIO
Tipos de datos: Codigo (varchar).
RECUERDO_CONTRASENA
Usuario Fecha Codigo
CE: USUARIO_REGISTRADO
Tipos de datos: Codigo (varchar).
DISENADOR
Id Correo
Tipos de datos: Id (int). Correo (varchar).
Tras realizar las comprobaciones correspondientes concluimos que el proceso de normalización
ya se ha conseguido, debido a que todas las tablas están en FNBC, forma normal de Boyce-Codd.
Aplicación para el diseño y venta de camisetas personalizadas
24
Se destaca la presencia de la tabla USUARIO y CLIENTE, las cuales representan a actores
diferentes. Por un lado estarían los usuarios que desean hacer un pedido sin registrarse en la
aplicación, que se almacenarán en la tabla USUARIO, y por otro lado, los clientes, que estarían
registrados en la tabla CLIENTE y disponen de cuenta en la aplicación y correspondientemente,
mayores privilegios.
El diseño anterior recoge íntegramente la estructura de la Base de Datos de la aplicación web.
Para la aplicación de escritorio, el diseño sería el mismo pero más simplificado.
Además la tabla Pedido también se simplificaría. Los campos Usuario y Envio ya no serían
necesarios, porque la aplicación de escritorio, como se indica anteriormente, no se gestionan ni
usuarios ni pedidos.
3.2 Diseño de la lógica de negocio
La lógica de la aplicación estará apoyada íntegramente en la orientación a objetos, aplicada a lo
largo de todo el Grado. Estas clases servirán para modelar toda la funcionalidad lógica de la
aplicación.
A continuación se representa el Diagrama de Clases generado para la aplicación web:
Figura 8. Diagrama de Clases.
Todas las clases obtenidas están basadas en las tablas correspondientes a la Base de Datos
diseñada:
Daniel Guzmán Castroviejo
25
Camiseta: representará los diferentes modelos de camisetas disponibles.
Stock: representará al stock disponible para cada modelo de camiseta.
CamisetaDefinida: representará un modelo de camiseta con un diseño definido dentro
del mismo.
Diseno: representará a cada uno de los diseños definidos en la aplicación.
Texto: representarán a las diferentes tipografías disponibles para cada diseño.
Imagen: representará a las diferentes imágenes disponibles para cada diseño.
Pedido: representará a cada uno de los pedidos realizados en la aplicación.
LineaPedido: representará a una línea de pedido asociada a un pedido realizado.
Envio: representará a los tipos de envío disponibles en la aplicación.
Usuario: representará a los diferentes usuarios que han realizado un pedido en la
aplicación, pero que no disponen de una cuenta en la misma.
Cliente: hereda de la clase Usuario, y en este caso, representará a un usuario registrado
y con cuenta en la aplicación.
3.3 Diseño de las interfaces gráficas y de la navegabilidad
Para llevar a cabo el diseño de las interfaces gráficas, se han creado algunos prototipos de las
páginas más relevantes de la aplicación.
Para todas las páginas de la aplicación, contendrán una cabecera con el logo de la aplicación, un
menú con seis opciones, que nos permitan acceder a los diferentes apartados de la aplicación,
dos botones, uno de ellos para visualizar la sección de ayuda y el segundo para que el usuario
pueda ponerse en contacto con la empresa a través de un formulario, y dos opciones más, una
que nos lleva a la sección de registro o de inicio de sesión y otra que nos permite visualizar el
estado del carrito de la compra.
Figura 9. Cabecera de la aplicación web.
El menú que aparece en la figura 9 es el estándar para toda la aplicación cuando el usuario no
ha iniciado sesión en la misma. En el caso de que un cliente haya iniciado sesión en el sistema,
dispondrá de una serie de opciones adicionales:
Mis pedidos: opción que le permitirá visualizar el historial de pedidos a través de una
serie de tablas, consultar el estado de un pedido y almacenar pedidos sin finalizar.
Mis diseños favoritos: opción que le permitirá consultar y gestionar sus diseños
favoritos.
Mis datos personales: opción que le permitirá gestionar los datos asociados a la cuenta
e incluso darse de baja en la aplicación.
Para el administrador, el menú será diferente, aparecerán las siguientes opciones:
Camisetas: opción que le permitirá gestionar las camisetas almacenadas en la aplicación
y actualizar el stock.
Diseños: opción que le permitirá gestionar los diseños almacenados, además de poder
crear nuevos diseños, crear nuevas categorías y asignarlas a cada uno de ellos.
Aplicación para el diseño y venta de camisetas personalizadas
26
Pedidos: opción que le permitirá gestionar los pedidos realizados, consultando toda la
información relativa a los mismos, así como descargarse las imágenes de los diseños
para su descarga
Usuarios: opción que le permitirá gestionar los usuarios registrados en la aplicación.
Dentro de esta opción habrá una sección destinada a los diseñadores que soliciten
vender sus productos.
Estadísticas: opción que le permitirá consultar la información relativa a las estadísticas
del sitio web, tales como visitas, usuarios registrados, pedidos, productos, etc.
A su vez todas las páginas de la aplicación contarán con un pie de página, contenido en la figura
10, donde se mostrará información relativa a la empresa responsable de la aplicación web.
Figura 10. Pie de página de la aplicación web.
La página de inicio (figura 11) contendrá un banner, en donde se mostrará una animación con
algunos productos de la aplicación web y debajo del mismo, una lista con las camisetas más
vendidas y con las novedades del último mes, además de información relativa a envíos y pedidos.
Figura 11. Página de Inicio de la aplicación web.
Daniel Guzmán Castroviejo
27
Como se ha indicado en los requisitos, cada camiseta pertenece al menos a un género de
personas. Por ello la aplicación dispone de secciones en donde se muestran los productos de
cada uno de los géneros. De esta manera el usuario puede elegir el producto que más se ajusta
a sus necesidades. Cada uno de estos productos ya está previamente personalizado, y el usuario
directamente puede realizar su pedido sin tener que personalizar el producto. Por ello en cada
una de las secciones el usuario podrá visualizar todos los productos disponibles para cada
género, y seleccionando el color de la camiseta, la talla y la cantidad, podrá añadir al carrito el
producto deseado (figura 12). Otra de las opciones disponibles, será trasladar el producto
prediseñado al área de personalización de productos, para que el usuario pueda editarlo a su
gusto. Además la aplicación le mostrará como hemos dicho anteriormente, unas
recomendaciones sobre las camisetas más vendidas y las novedades del mes.
Figura 12. Sección de camisetas para hombre.
Para la región de personalización de las camisetas (figura 13), la aplicación ofrecerá todas las
opciones disponibles para personalizar un producto. El usuario previamente deberá elegir el tipo
de camiseta sobre la que aplicar el diseño, o se mostrará una camiseta por defecto, que el
usuario podrá modificar.
Aplicación para el diseño y venta de camisetas personalizadas
28
Figura 13. Elección de la camiseta a personalizar.
La primera opción será la que permita al usuario seleccionar una imagen almacenada en la
aplicación, a insertar en la región personalizable de la camiseta. La aplicación ofrecerá una lista
de dibujos y el usuario seleccionará uno de ellos que automáticamente se le mostrará en la
región, con un tamaño y posición predeterminadas. Después arrastrando y soltando podrá
posicionarlo dentro de los límites de la región, además de poder modificar su tamaño, girarlo,
ampliarlo para su visualización o eliminarlo, utilizando una serie de botones que se mostrarán
en las esquinas del cuadro que lo contiene (ver figura 14). También el usuario podrá elegir el
color y la talla de la camiseta. Se podrán personalizar dos regiones de la camiseta, la
correspondiente a la parte delantera y la parte trasera. En todo momento el usuario podrá
visualizar y seleccionar cualquiera de las dos partes.
Figura 14. Selección de la imagen a añadir.
Otra opción permitirá al usuario añadir su propia imagen al diseño, en lugar de usar una de las
que ofrece la aplicación (figura 15). Por ello dispondrá de un pequeño formulario con un campo,
donde cargará la ruta de la imagen a añadir. Una vez subida, se añadirá directamente a la región
personalizable, en donde el usuario podrá llevar a cabo las mismas acciones que con las
Daniel Guzmán Castroviejo
29
imágenes disponibles en la aplicación. Solamente se podrá añadir una imagen por región, ya sea
propia, o una de las disponibles en la aplicación.
Figura 15. Sección para añadir una imagen propia.
Por último el usuario podrá añadir cuadros de texto, con diferentes tipos de letra y colores. El
usuario elegirá el tipo de letra a través de un menú desplegable, y en un cuadro de texto
introducirá el texto a mostrar. También seleccionará el color del texto a través de un menú
desplegable de colores. Una vez introducido, deberá marcar el texto, a través de una casilla de
verificación y automáticamente aparecerá en la región personalizable. Cada cuadro de texto
insertado, contará con las mismas opciones que las imágenes añadidas, es decir, se podrá
posicionar, modificar su tamaño, girar y eliminar (figura 16). Solamente se permitirá añadir un
máximo de seis cuadros de texto por región.
Figura 16. Sección para añadir cuadros de texto.
En todas las secciones anteriores, el usuario podrá visualizar su creación a través de una vista
previa, ofreciéndole una mejor visión de su producto.
Aplicación para el diseño y venta de camisetas personalizadas
30
En todo momento el usuario podrá ver el estado de su carrito de la compra (figura 17), con la
opción disponible en la cabecera de la aplicación, en donde se irán almacenando los productos
que el usuario haya solicitado. Además de añadir productos, el usuario podrá eliminar los
productos ya añadidos o modificarlos. Solamente se podrá modificar a través del carrito la talla
de un producto y la cantidad, a través de dos menús desplegables en los que se mostraran las
tallas y las cantidades disponibles de cada talla. En el caso de que se quiera modificar el producto
o su apariencia, se seleccionará un botón que directamente redigirá al usuario al área de
personalización.
Figura 17. Carrito de la compra vacío.
En cuanto al pago y finalización de un pedido, el usuario puede o no estar registrado en la
aplicación. En el primer caso, el usuario deberá indicar el tipo de envío y la forma de pago a
través de casillas de verificación, donde seleccionará la opción que desee. Además deberá
aceptar a su vez, los términos y condiciones incluidos en la aplicación. Por defecto la dirección
almacenada en su cuenta personal, pero si desea indicar otra, se le ofrecerá la posibilidad a
través de un campo de texto. En el caso de que el usuario no quiera registrarse o no disponga
de una cuenta, adicionalmente deberá rellenar el mismo formulario anterior con todos sus datos
personales, un correo electrónico, una dirección de facturación y algún comentario personal si
lo desea (figura 18).
La aplicación ofrecerá dos tipos de envío: correo urgente o correo ordinario; y tres formas de
pago: tarjeta de crédito, contrareembolso y PayPal. También se le ofrecerá al usuario la
posibilidad de consultar los términos y condiciones de los pedidos a través de un enlace.
Daniel Guzmán Castroviejo
31
Figura 18. Sección de pago y finalización de un pedido.
Una vez que el usuario haya completado el pedido, introduciendo los datos necesarios y
seleccionando el tipo de envío y la forma de pago, la aplicación mostrará un resumen detallado
del pedido y se le solicitará la confirmación de este, pulsando sobre la opción confirmar pedido
(ver figura 19). En el caso de que el usuario en este momento desee cambiar alguno de los datos
del pedido, se le permitirá esta posibilidad, seleccionando la opción modificar datos.
Figura 19. Sección de confirmación de un pedido
Aplicación para el diseño y venta de camisetas personalizadas
32
En cuanto a la sección de inicio de sesión (figura 20), la aplicación contará con un formulario,
donde el usuario introducirá su nombre de usuario y su contraseña para acceder al área de
clientes. A través de esta sección se podrá crear una nueva cuenta en la aplicación,
seleccionando la opción crear una cuenta, lo que permitirá al usuario, rellenando los campos de
un formulario, crear una cuenta en la aplicación e iniciar sesión a través de ella.
Además esta sección dispone de la opción de recuerdo de contraseña, en la cual el usuario a
través de un campo de texto introducirá el correo electrónico con el que hizo su registro en la
aplicación, para recibir a través del mismo, un código de verificación que le permita al usuario
reestablecer una nueva contraseña.
Figura 20. Sección de inicio de sesión.
Por último, para los diseñadores interesados en vender sus creaciones, la aplicación dispone de
una sección que permite al diseñador introducir su correo electrónico a través de un campo de
texto, y aceptando los términos y condiciones, la aplicación almacene su correo electrónico, de
manera que el administrador pueda ponerse en contacto. Esta sección, además mostrará una
imagen atractiva y algunos textos informativos (ver figura 21).
Daniel Guzmán Castroviejo
33
Figura 21. Sección de contacto para los diseñadores.
Aplicación para el diseño y venta de camisetas personalizadas
34
Capítulo 4 IMPLEMENTACIÓN
En este capítulo se recogen los aspectos fundamentales de la implementación de la aplicación.
4.1 Estructura y herramientas utilizadas
Como se ha comentado anteriormente, la aplicación seguirá el paradigma de orientación a
objetos, de manera que la lógica quede bien estructurada. Desde la fase de planificación del
proyecto, la aplicación se concebirá estructurada en tres niveles o capas: capa de persistencia,
capa de lógica de negocio y capa de presentación. De esta manera se conseguirá mayor
escalabilidad y adaptabilidad si en el futuro la aplicación necesita una serie de cambios o de un
incremento en su funcionalidad. Todo ello conlleva, al ser una aplicación web, a seguir un patrón
de arquitectura MVC (modelo-vista-controlador), desarrollado e implementado en la asignatura
Programación de Aplicaciones Web, y catalogado como uno de los mejores patrones a la hora
de desarrollar una aplicación web.
Para la implementación de cada una de las capas de la aplicación web, se ha utilizado el entorno
de desarrollo Netbeans, junto con el navegador Mozilla Firefox. Además, tanto para las pruebas
de Javascript como las de PHP, se ha utilizado este mismo navegador, junto con algunas de las
extensiones que dispone: Web Developer, Firebug, ColorZilla y MesaureIt.
Por último se ha utilizado un servidor XAMPP en el equipo local. XAMPP es un servidor
multiplataforma, de software libre, que consiste en un sistema de gestión de base de datos
MySQL, un servidor web Apache e intérpretes para lenguajes de script como PHP y Perl. Este
sistema se ha seleccionado, ya que desde la empresa me recomendaron su uso y además se
adapta perfectamente a los requerimientos que necesita la aplicación.
El proyecto se encuentra alojado en un repositorio público en GitHub. Es accesible a través del
siguiente enlace: https://github.com/daguzman93/AplicacionCamisetas/
4.2 Base de datos
La Base de Datos ha sido creada siguiendo el diagrama definido en la figura 7 del capítulo
anterior, y su correspondiente paso a tablas.
4.3 Capa de persistencia
La capa de persistencia la conforma la clase GestorBD, cuyos métodos realizan tanto las
conexiones como las operaciones necesarias en cada una de las peticiones generadas por la
aplicación.
Como la aplicación sigue el paradigma de orientación a objetos, para establecer la conexión a
la base de datos, se instanciara un objeto de la clase mysqli de PHP. Los parámetros de
conexión se pasarán a través de este objeto. Estos se encuentran almacenados en un fichero
de propiedades con extensión .ini definido en la raíz del proyecto de la siguiente manera:
host = 127.0.0.1;
name = bd_camisetas;
user = root;
pass = root;
Figura 22. Definición de los parámetros de conexión a la BD.
Daniel Guzmán Castroviejo
35
Dentro de la clase GestorBD se cargará el fichero de propiedades a través del método
parse_ini_file y se definirán cuatro constantes de clase (DB_HOST, DB_USER, DB_PASS Y
DB_NAME) de manera que sean accesibles desde cualquier método de la clase para poder
establecer conexiones a la base de datos a través de un objeto mysqli.
$db = parse_ini_file($_SERVER["DOCUMENT_ROOT"] .
'/AplicacionCamisetas/parametros.ini');
include_once ($_SERVER["DOCUMENT_ROOT"] . '/AplicacionCamisetas/class/Camiseta.php');
include_once ($_SERVER["DOCUMENT_ROOT"] . '/AplicacionCamisetas/class/Stock.php');
include_once ($_SERVER["DOCUMENT_ROOT"] . '/AplicacionCamisetas/class/Imagen.php');
define('DB_HOST', $db['host']);
define('DB_USER', $db['user']);
define('DB_NAME', $db['name']);
define('DB_PASS', $db['pass']);
Figura 23. Carga del fichero de propiedades y definición de constantes de la clase
GestorBD.php.
La instancia mysqli que establece la conexión con la BD, se define en todos los métodos de la
clase GestorBD.php encargada de todas las operaciones.
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
Figura 24. Fragmento de la clase mysqli que establece la conexión con BD.
Los métodos de la clase GestorBD trabajan directamente con la BD de la misma manera:
1. Se establece la conexión con la Base de Datos.
2. Se codifica la conexión al formato estándar UTF-8.
3. Se ejecuta la operación determinada (consultas, inserciones o modificaciones), pasando
parámetros en el caso de que sea necesario.
4. Se obtiene el resultado, construyendo un objeto o una colección de objetos en el caso
de las consultas.
5. Se devuelve el resultado obtenido.
En el siguiente ejemplo se muestra el método correspondiente a la obtención de un modelo de
camiseta dado un identificador de la clase GestorBD.
public function getCamisetaporId($id) {
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
$mysqli->set_charset('utf8');
if (mysqli_connect_errno()) {
printf("Fallo la conexion: %s\n", mysqli_connect_error());
exit();
}
$query = "SELECT * FROM camiseta WHERE id=?";
if ($sentencia = $mysqli->prepare($query)) {
$sentencia->bind_param('i', $id);
$sentencia->execute();
$sentencia->bind_result($id, $nombre, $genero, $delantera, $trasera,
$precio);
while ($sentencia->fetch()) {
$camiseta = new Camiseta($id, $nombre, $genero, $delantera, $trasera,
$precio);
}
$sentencia->close();
}
$mysqli->close();
return $camiseta;}
Figura 25. Método de consulta de un modelo de camiseta a partir de su identificador.
Aplicación para el diseño y venta de camisetas personalizadas
36
4.4 Capa de lógica de negocio
Para la capa de lógica de negocio utilizaremos una serie de ficheros PHP que integraran la
funcionalidad de la aplicación web, además de servir como nexo de unión entre la capa de
persistencia y la capa de presentación.
Dentro de esta capa podemos distinguir diferentes ficheros:
Clases básicas: definidas en el diagrama de clases correspondiente a la figura 8 que
modelan los objetos con los que trabajara la aplicación.
Ficheros de terceros: son clases extraídas a través de diferentes fuentes.
Ficheros de respuesta asíncrona: se trata de ficheros que dan respuesta a peticiones
realizadas asíncronamente a través de AJAX o JQuery.
if (isset($_POST['email'])) {
$email = $_POST['email'];
if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
$gdb = new GestorBD();
if (!$gdb->existeDisenador($email)) {
$gdb->almacenarDisenador($email);
echo '<h5 class="center-align white-text">Tu correo ' . $email . ' ha sido
almacenado,'
. 'en breve nos pondremos en contacto contigo</h6>';
}else{
echo '<h5 class="center-align white-text">El correo introducido ya estaba
registrado anteriormente, en breve nos pondremos en contacto contigo.</h6>';
}
}
}
Figura 26. Código correspondiente al fichero registrodisenador.php
Ficheros de enlace entre diferentes vistas: se trata de los controladores que
responderían a las peticiones ejecutadas sobre la aplicación.
4.5 Capa de presentación
Para la capa de presentación, se ha buscado una interfaz amigable, intuitiva y fácil de utilizar,
intentando reproducir con exactitud los prototipos de interfaces definidos en el capítulo 3.
En el desarrollo de esta capa de la aplicación, se ha optado por utilizar el framework Materialize,
creado y diseñado por Google, similar a otros frameworks más utilizados, como BootStrap. De
esta manera incluyendo los ficheros correspondientes y maquetando a través de HTML y CSS,
se consigue un diseño atractivo e intuitivo. Todos los iconos y estilos de fuente utilizados en la
aplicación son de uso libre.
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.cs
s">
<script type="text/javascript" src="https://code.jquery.com/jquery-
2.1.1.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js">
</script>
Figura 27. Fragmento de código correspondiente a la inclusión de Materialize y de iconos.
Como podemos observar, también es necesaria la inclusión de JQuery, ya que algunos de los
elementos utilizados en este tipo de frameworks, requieren de su inclusión, ya que parte de su
funcionalidad y de sus efectos están implementados bajo esta biblioteca de JavaScript.
Daniel Guzmán Castroviejo
37
Como requisito de la aplicación se estableció que las interfaces deberían ser adaptativas a
cualquier tipo de dispositivo. Materialize está pensado para que esta tarea no suponga un
problema a la hora de maquetar los elementos, y dispone de un diseño en cuadricula a través
del cual, cada una de las columnas son adaptativas. En el caso en el que sea necesario establecer
alguna característica de estilo, para un tamaño de pantalla en concreto, se han utilizado las
Media Queries.
@media (min-width: 1024px) {
.container{
min-width: 1014px;
}
footer.page-footer{
background-color:#0095ad;
position: relative;
top: 65px;
}
main{
position: relative;
top: 65px;
}
nav{
height: 130px;
}
}
Figura 28. Fragmento de código de una Media Query en el fichero estilo.css.
Materialize no solo ofrece un diseño en cuadricula, también dispone de elementos propios que
siguen el estilo Material, propio de las aplicaciones Android. En la aplicación web se han utilizado
algunos de ellos, como formularios, botones, imágenes, modales, etc. La mayoría de ellos
requieren de código JQuery para implementar su funcionalidad y pueden ser personalizados a
través de código CSS.
Figura 29. Formulario de registro de clientes.
Aplicación para el diseño y venta de camisetas personalizadas
38
Figura 30. Modal que contiene los términos y condiciones del registro.
<label for="condiciones" class="black-text">Acepto los términos y condiciones. <a
href="#modalcondiciones" class="modal-trigger white-text">Leer más. </a></label>
<div id="modalcondiciones" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Términos y condiciones</h4>
<p>Lorem… </p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-
flat">Cerrar</a>
</div>
</div>
Figura 31. Fragmento de HTML correspondiente al modal de la figura 30.
$(document).ready(function () {
$('.modal-trigger').leanModal();
}
Figura 32. Fragmento de JQuery que inicializa el modal correspondiente a la figura 30.
Para la funcionalidad de ciertas partes de nuestra aplicación también se han utilizado elementos
creados por terceros y descargables de manera gratuita. Podriamos destacar el selector de color
de los textos que se pueden añadir a la región de personalización de las camisetas. Se trata de
un plugin de JQuery llamado JQuery Simple Color Picker. Para implementarlo simplemente es
necesario descargar un fichero JavaScript e incluirlo en nuestro proyecto a través de una
directiva script en HTML, de la misma manera que hemos incluido Materialize en la figura 27.
$('select[name="colorpicker-picker-option-selected"]').simplecolorpicker({picker:
true});
Figura 33. Fragmento JQuery para la inicialización de Simple Color Picker.
Daniel Guzmán Castroviejo
39
Figura 34. Ejemplo de Simple Color Picker en el área de personalización.
4.6 Implementación de las principales funcionalidades
4.6.1 Personalizacion de la librería Fabric JS La aplicación web desarrollada, tiene como parte más interesante, la personalización de las
camisetas. Tal y como describen los prototipos definidos en el capítulo 3, se situará la imagen
de una camiseta, y sobre la misma se definirá una región rectangular, tanto para la parte
delantera como para la parte trasera, en la que se podrá añadir una imagen disponible en la
aplicación o una imagen propia, así como cuatro textos de longitud limitada.
La solución a este problema se encontró en la utilización de una librería externa desarrollada en
JavaScript, llamada Fabric JS, con la cual se pueden personalizar regiones llamadas canvas. Las
posibilidades de dicha librería son múltiples, lo que supone tener que limitar la funcionalidad,
además de personalizar y customizar dicha librería para las necesidades de la aplicación.
Para hacer uso de la librería Fabric JS, es necesario disponer de JQuery en la aplicación, además
de incluir a través de un elemento script de HTML, el fichero fabric.min.js.
<script
src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
Figura 35. Inclusión de la librería Fabric JS en el proyecto.
Como hemos comentado anteriormente, las regiones personalizables en Fabric JS se denominan
canvas. En ellas se pueden añadir, modificar y eliminar elementos tanto imágenes, textos,
formas y gráficos. Cada canvas puede ser exportado en formato JSON o en formato SVG.
Cada uno de los elementos que se encuentran dentro del canvas dispone de una serie de
controles establecidos por defecto. Para nuestra aplicación, estos controles han sido
personalizados totalmente, definiendo una serie de botones a través de imágenes, cumpliendo
Aplicación para el diseño y venta de camisetas personalizadas
40
cada uno de ellos con una función determinada. Estos controles deberán aparecer cuando el
objeto este seleccionado o activo.
function Controles(e) {
var selectedObject = e.target;
selectedObject.hasRotatingPoint = false;
selectedObject.customiseCornerIcons({
settings: {
borderColor: '#0095ad',
cornerSize: 30,
cornerShape: 'circle',
cornerPadding: 10
},
tl: {
icon: 'img/rotate.png'
},
tr: {
icon: 'img/remove.png'
},
bl: {
icon: 'img/zoom.png'
},
br: {
icon: 'img/resize.png'
}
});
selectedObject.setControlsVisibility({'mt': false, 'mb': false, 'mr': false,
'ml': false});
$('#texto1').focus();
}
Figura 36. Función JavaScript que define la personalización de los controles en cada uno de los
objetos del canvas.
En el código anterior, lo único que se consigue es personalizar la apariencia de los controles de
un objeto seleccionado y desactivar la visibilidad de los controles que no se desean utilizar. Cada
objeto incluido en el canvas, está rodeado por un recuadro que lo limita y en el que se definen
los diferentes controles en función de la posición en la que se encuentre dicho control. En
nuestro caso solo nos interesa mantener un control en cada una de las esquinas del recuadro y
el resto de controles deshabilitarlos. Cada elemento “tl”, “tr”, “bl” y “br” representa a una
esquina, esquina superior izquierda, esquina superior derecha, esquina inferior izquierda y
esquina inferior derecha en ese mismo orden.
Daniel Guzmán Castroviejo
41
Figura 37. Elemento dentro del canvas con la apariencia definida para cada control.
A continuación se definirán las funciones a realizar por cada uno de los controles, y la forma
que representará el puntero del ratón cuando este sobre ellos. Para ello tenemos que utilizar la
función customizeControls del objeto Fabric.Canvas.prototype y redefinir su comportamiento.
fabric.Canvas.prototype.customiseControls({
tl: {
action: 'rotate',
cursor: 'pointer'
},
tr: {
action: 'remove',
cursor: 'pointer'
},
bl: {
action: function (e, target) {
var elem = document.createElement("img");
elem.src = target.getSrc();
elem.width = 370;
var div = document.createElement('div');
div.className = 'content';
div.appendChild(elem);
document.getElementById('modalimagen').replaceChild(div,
document.getElementById('modalimagen').firstChild);
$('#modalimagen').openModal();
},
cursor: 'pointer'
},
br: {
action: 'scale',
cursor: 'pointer'
}
});
Figura 38. Función customizeControls que define el comportamiento de los controles de un
objeto dentro del canvas.
Aplicación para el diseño y venta de camisetas personalizadas
42
Las funcionalidades definidas para cada control son las siguientes:
Control superior izquierdo: rotación del objeto seleccionado sobre sí mismo.
Control superior derecho: borrado del objeto seleccionado.
Control inferior izquierdo: ajustar el tamaño del objeto seleccionado.
Control inferior derecho: ampliación del objeto seleccionado en un modal.
Una vez definida tanto la apariencia como los controles de los elementos dentro del canvas, es
necesario definir un tamaño máximo y mínimo para los elementos, ya que de lo contrario,
podrían ser mayores que la propia área. Para ello establecemos un límite tomando como
referencia la anchura del propio canvas. Estos límites son definidos dentro del evento scaling del
objeto.
canvas.observe("object:scaling", function (e) {
var shape = e.target;
var minWidth = (canvas.width * 0.30);
var maxWidth = (canvas.width * 0.80);
var actualWidth = shape.scaleX * shape.width;
if (!isNaN(maxWidth) && actualWidth >= maxWidth) {
shape.set({scaleX: maxWidth / shape.width, scaleY: maxWidth /
shape.width});
}
if (!isNaN(minWidth) && actualWidth <= minWidth) {
shape.set({scaleX: minWidth / shape.width, scaleY: minWidth /
shape.width});
}
LimiteBordes(e);
});
Figura 39. Función correspondiente al evento scaling de un objeto del canvas.
Para la región de personalización, no solo es suficiente con limitar el tamaño de los elementos,
también se necesita limitar la posición en la que se puede situar cada elemento. Fabric JS
permite posicionar los elementos arrastrando y soltando, pero una vez añadidos los elementos
dentro del canvas, permite posicionarlos fuera del área de personalización, quedando ocultos.
Para evitar esta situación, se ha definido una función que delimita la posición en la que se
pueden situar los elementos, haciendo que tanto el elemento como los controles que lo
conforman, queden en todo momento a la vista del usuario. Dicha función tiene en cuenta tanto
la anchura del objeto junto con sus controles como la anchura del canvas.
Daniel Guzmán Castroviejo
43
function LimiteBordes(e) {
var obj = e.target;
if (obj.getHeight() > obj.canvas.height || obj.getWidth() > obj.canvas.width)
{
obj.setScaleY(obj.originalState.scaleY);
obj.setScaleX(obj.originalState.scaleX);
}
obj.setCoords();
if (obj.getBoundingRect().top - (obj.cornerSize / 2) < 0 ||
obj.getBoundingRect().left - (obj.cornerSize / 2) < 0) {
obj.top = Math.max(obj.top, obj.top - obj.getBoundingRect().top +
(obj.cornerSize / 2));
obj.left = Math.max(obj.left, obj.left - obj.getBoundingRect().left +
(obj.cornerSize / 2));
}
if (obj.getBoundingRect().top + obj.getBoundingRect().height + obj.cornerSize
> obj.canvas.height || obj.getBoundingRect().left + obj.getBoundingRect().width +
obj.cornerSize > obj.canvas.width) {
obj.top = Math.min(obj.top, obj.canvas.height -
obj.getBoundingRect().height + obj.top - obj.getBoundingRect().top - obj.cornerSize /
2);
obj.left = Math.min(obj.left, obj.canvas.width -
obj.getBoundingRect().width + obj.left - obj.getBoundingRect().left - obj.cornerSize /
2);
}
}
Figura 40. Función que delimita la posición de los elementos dentro de una región.
Esta función se asigna los eventos moving y rotating de cada elemento incrustado dentro del
canvas. La función controles mencionada anteriormente se asigna al evento selected.
canvas.on({
'object:selected': Controles,
'object:moving': LimiteBordes,
'object:rotating': LimiteBordes,
'object:removed': VaciarInput
});
Figura 41. Asignación de cada función a su correspondiente evento dentro del canvas.
4.6.2 Introducción de textos en el área de personalización Las camisetas personalizadas disponen de la opción de introducir imágenes y textos. Para
introducir textos se implementó un formulario con cuatro campos de tipo textual, cada uno de
ellos junto con un select correspondiente al plugin JQuery Simple Color Picker y un botón.
Cada campo del formulario se asocia un texto añadido al canvas, mediante el cual se define el
contenido del texto. Pero esta asociación no es trivial. Fabric JS identifica cada texto como un
objeto de tipo Text, pero no dispone de ningún atributo o método que lo identifique de manera
única.
Para conseguir esta asociación, se ha definido una nueva clase llamada Texto, que hereda de la
clase Text de Fabric JS, a la cual se le ha añadido un atributo llamado name, con el que identificar
cada uno de los textos. Cada texto incluido en el canvas tendrá como valor del atributo name el
identificador de cada campo textual del que ha tomado su valor correspondiente. Ademas para
poder hacer uso de la nueva clase, es necesario redefinir el método initialize que define el
comportamiento al crear una nueva instancia de la clase y el método toObject que permite
definir como se exportará en formato JSON y SVG un objeto de dicha clase. Adicionalmente se
han definido dos nuevos métodos, setName y getName que permite acceder y modificar la
nueva propiedad definida.
Aplicación para el diseño y venta de camisetas personalizadas
44
fabric.Texto = fabric.util.createClass(fabric.Text, {
type: 'texto',
initialize: function (element, options) {
this.callSuper('initialize', element, options);
options && this.set('name', options.name);
},
toObject: function () {
return fabric.util.object.extend(toObject.call(this), {name: this.name});
},
getName: function () {
return this.name;
},
setName: function (nombre) {
this.name = nombre;
}
});
var canvas = this.__canvas = new fabric.Canvas('tcanvas', {
hoverCursor: 'pointer',
selection: true
});
Figura 42. Definición de la clase Texto en el fichero personalización.js.
Gracias a la identificación de cada uno de los elementos textuales dentro del canvas, el usuario
puede interactuar adecuadamente con los diferentes textos. Utilizando las nuevas propiedades
de los objetos tipo Texto del canvas, definimos una función auxiliar en JavaScript que nos
permita, al situarnos sobre uno de los campos textuales del formulario, seleccionar
automáticamente el elemento dentro del área de personalización.
function activarTexto(input) {
switch (input.attr('id')) {
case "texto1":
canvas.setActiveObject(getTextoByName(canvas, 'texto1'));
break;
case "texto2":
canvas.setActiveObject(getTextoByName(canvas, 'texto2'));
break;
case "texto3":
canvas.setActiveObject(getTextoByName(canvas, 'texto3'));
break;
case "texto4":
canvas.setActiveObject(getTextoByName(canvas, 'texto4'));
break;
}
}
Figura 43. Función JavaScript para activar un texto dentro del canvas.
Daniel Guzmán Castroviejo
45
Figura 44. Asociación de un texto con su correspondiente campo del formulario.
4.7 Otros aspectos relevantes
El fichero .htaccess, conocido como archivo de configuración distribuida, es un fichero
popularizado por el servidor HTTP Apache que permite definir diferentes directivas de
configuración para cada directorio y sus correspondientes subdirectorios sin necesidad de editar
el archivo de configuración principal de Apache.
El formato del este fichero es el mismo que el de configuración global de Apache y ofrece una
gran variedad de posibilidades. Sus usos más frecuentes son:
Autorización y autenticación.
Creación de URLs amigables.
Restringir el acceso.
Definición de páginas de error personalizadas.
Control de caché.
4.7.1 Forzar la codificación en UTF-8 Para que no surjan problemas a la hora de codificar tanto los archivos de la aplicación, como los
datos de entrada y salida, se establece UTF-8 como codificación estándar de nuestra aplicación
a través del fichero .htaccess utilizando las directivas addcharset y adddefaultcharset.
AddDefaultCharset utf-8
AddCharset utf-8 .css .js .json
Figura 45. Directiva que establece la codificación de los ficheros .css, .js y .json, y de los datos
en .htaccess.
4.7.2 Denegar el acceso a ficheros con contenidos sensibles. La aplicación web contiene ciertos ficheros con contenido sensible, que sino los protegemos,
pueden ser accesibles de una manera sencilla, generando un agujero de seguridad muy
Aplicación para el diseño y venta de camisetas personalizadas
46
importante, que puede ocasionar la perdida de datos, el acceso a ciertas partes no autorizadas
de la aplicación o incluso un comportamiento inesperado del sistema. A través del fichero
.htaccess, podemos restringir el acceso a los ficheros o directorios que contengan contenidos
sensibles, en nuestro caso, el fichero parámetros.ini que contiene los datos de conexión con la
base de datos o el propio .htaccess.
<FilesMatch "\.(htaccess|htpasswd|ini|phps|fla|psd|log|sh)$">
Order Allow,Deny
Deny from all
</FilesMatch>
Figura 46. Directiva que impide el acceso a ficheros sensibles en el fichero .htaccess.
4.7.3 Tratamiento de errores Con respecto al tratamiento de errores, se ha definido un único fichero PHP, donde se redirigirá
al usuario en el caso de que una petición o una página que solicite no este accesible, o definida
o no tenga permisos para hacerlo.
ErrorDocument 400 /AplicacionCamisetas/error.php
ErrorDocument 401 /AplicacionCamisetas/error.php
ErrorDocument 403 /AplicacionCamisetas/error.php
ErrorDocument 404 /AplicacionCamisetas/error.php
ErrorDocument 500 /AplicacionCamisetas/error.php
Figura 47. Fragmento del fichero .htaccess en el que se especifica la página de error error.php
De la misma manera se define cada código de error en el fichero .htaccess y es en error.php
donde en función del código, se muestra un mensaje u otro.
$status = $_SERVER['REDIRECT_STATUS'];
switch ($status) {
case 400:
$codigoerror = '400 Bad Request';
$mensaje = 'La solicitud contiene sintaxis errónea.';
break;
case 401:
$codigoerror = '401 Unauthorized';
$mensaje = 'El recurso solicitado requiere de autenticación.';
break;
case 403:
$codigoerror = '403 Forbidden';
$mensaje = 'El servidor no puede responder con el recurso porque se ha
denegado el acceso.';
break;
case 404:
$codigoerror = '404 Not Found';
$mensaje = 'Recurso no encontrado.';
break;
case 500:
$codigoerror = '500 Internal Server Error';
$mensaje = 'Error producido en el servidor.';
break;
}
Figura 48. Fragmento de código PHP en el que se trata cada caso de error en error.php
Daniel Guzmán Castroviejo
47
Figura 49. Ejemplo de página de error con código 404 definida en error.php.
Aplicación para el diseño y venta de camisetas personalizadas
48
Capítulo 5. CONCLUSIONES
Tras concluir el desarrollo de este proyecto, se puede afirmar que ha resultado una experiencia
muy grata y enriquecedora por varios motivos:
Enfrentarse a un proyecto real de manera individual y de forma totalmente autónoma.
Llevar a cabo una planificación y seguimiento exhaustivo del proyecto, que sirva como
experiencia para proyectos futuros.
Preparación y aprendizaje de nuevas tecnologías como PHP e integrar elementos
desarrollados por terceros, como librerías y plugins.
Utilizar tecnologías ya conocidas como JavaScript, JQuery o Ajax, aplicándolas de
diferentes formas e incluso incrementando los conocimientos adquiridos sobre las
mismas durante el Grado.
A priori, el proyecto parecía sencillo y se plantearon dos versiones de la aplicación, una versión
web y una versión de escritorio instalada en las máquinas de información táctil Infotactile. Sin
embargo, debido a varios inconvenientes y problemas, solamente se ha podido desarrollar la
versión web.
Un aspecto fundamental y a destacar es el desarrollo del proyecto de manera individual. A lo
largo del Grado, la mayoría de trabajos y proyectos son elaborados por equipos de dos o más
personas. Por ello cabe destacar que existe una gran diferencia entre elaborar un proyecto de
manera individual, a elaborarlo en equipo.
Por último cabe señalar que la participación de la empresa en el proyecto ha sido casi nula.
Desde el principio no dejaron claros los requisitos, lo que ha dado lugar a diferentes
interpretaciones y algunos cambios imprevistos en la fase de diseño del producto.
En definitiva, tras un periodo de varios meses desarrollando el proyecto, se puede concluir que,
en términos generales, el proyecto ha sido gestionado de una manera satisfactoria, a pesar de
las dificultades.
5.1 Gestión real del proyecto
En la siguiente tabla se reflejan las horas planificadas y reales empleadas para cada una de las
tareas:
Daniel Guzmán Castroviejo
49
Tarea Horas planificadas Horas reales
Análisis de requisitos 14 horas 10 horas
Reuniones con el cliente 6 horas 1 hora
Reuniones con el tutor 12 horas 8 horas
Planificación 14 horas 16 horas
Diseño de la interfaz de la versión web 3 horas 6 horas
Diseño de la Base de datos 4 horas 8 horas
Diseño de la lógica de la versión web 8 horas 10 horas
Implementación de la interfaz web 14 horas 30 horas
Creación de la Base de datos 2 horas 4 horas
Implementación de la lógica de la versión web
52 horas 90 horas
Pruebas de la versión web 8 horas 8 horas
Gestión de calidad 4 horas 4 horas
Gestión de riesgos 4 horas 4 horas
Gestión de comunicaciones 4 horas 4 horas
Diseño de la interfaz de la versión de escritorio
3 horas -
Diseño de la lógica de la versión de escritorio 8 horas -
Diseño de la capa de persistencia de la versión de escritorio
4 horas -
Implementación de la interfaz de escritorio 10 horas -
Creación de la base de datos 2 horas -
Implementación de la capa de persistencia 14 horas -
Implementación de la lógica de la versión de escritorio
32 horas -
Pruebas de la versión de escritorio 6 horas -
Preparación de la presentación 15 horas 10 horas
Elaboración de la memoria del TFG 25 horas 26 horas
Seguimiento y control 8 horas 4 horas
Instalación de software y herramientas 2 horas 3 horas
Documentación relativa al proyecto 12 horas 20 horas
Consultas y búsqueda de información 10 horas 10 horas
Diseño de la capa de persistencia de la versión de escritorio
4 horas -
Aprendizaje de la librería Fabric JS - 20 horas
Aprendizaje de PHP - 20 horas
Total 304 horas 316 horas
Tabla 11. Gestión real del proyecto.
Aplicación para el diseño y venta de camisetas personalizadas
50
Capítulo 6. BIBLIOGRAFÍA
Página oficial y manuales de PHP.
http://www.php.net/
http://www.desarrolloweb.com/
Página oficial del framework web MaterializeCSS.
http://materializecss.com/
Página oficial de la librería Fabric JS.
http://fabricjs.com/
Información relativa a CSS, HTML, JavaScript y JQuery.
http://www.w3schools.com/
https://jquery.com/
http://librosweb.es/
Página oficial del plugin JQuery Validation.
https://jqueryvalidation.org/
Foros de consulta y resolución de cuestiones.
http://stackoverflow.com/
Alojamiento del repositorio del proyecto.
https://github.com/