Sistema de información web para la gestión de la Información de ventas y servicios en la Empresa Photolife Studio

Texto completo

(1)SISTEMA DE INFORMACIÓN WEB PARA LA GESTIÓN DE LA INFORMACIÓN DE VENTAS Y SERVICIOS EN LA EMPRESA PHOTOLIFE STUDIO.. INTEGRANTES: JOAN SEBASTIÁN BELTRÁN CARVAJAL. UNIVERSIDAD DISTRITAL FRANCISCO JOSE DE CALDAS FACULTAD TECNOLOGICA SISTEMATIZACIÓN DE DATOS BOGOTA D.C 2018.

(2) SISTEMA DE INFORMACIÓN WEB PARA LA GESTIÓN DE LA INFORMACIÓN DE VENTAS Y SERVICIOS EN LA EMPRESA PHOTOLIFE STUDIO.. INTEGRANTES: JOAN SEBASTIÁN BELTRÁN CARVAJAL COD:20142578122. TUTOR: INGENIERA: ROCIO RODRIGUEZ GUERRERO PROYECTO DE GRADO PARA OPTAR POR EL TÍTULO DE TECNÓLOGO EN SISTEMATIZACION DE DATOS TIPO DE PROYECTO PASANTIA. UNIVERSIDAD DISTRITAL FRANCISCO JOSE DE CALDAS FACULTAD TECNOLOGICA SISTEMATIZACIÓN DE DATOS BOGOTA D.C 2018.

(3) Nota de aceptación ___________________________ ___________________________ ___________________________ ___________________________ ___________________________. __________________________ Firma del tutor. _________________________ Firma del jurado. _________________________ Firma del jurado. Bogotá 12de octubre de 2018.

(4) AGRADECIMIENTOS. Agradezco a mi hermano mayor, a mis padres y a todas aquellas personas que me brindaron su apoyo tanto moral como económicamente, ya que sin estos nunca hubiese logrado llegar hasta este punto. Agradezco a mi tutora Rocío Rodríguez, que sin su apoyo y conocimientos no hubiese logrado realizar este proyecto..

(5) TABLA DE CONTENIDO. INTRODUCCIÓN .................................................................................................. 17 RESUMEN ............................................................................................................ 18 ABSTRACT ........................................................................................................... 19 1. ETAPA 1 – PLANEACION, DEFINCIÓN, ORGANIZACIÓN .......................... 20 1.1. TITULO ................................................................................................... 20 1.2. TEMA ...................................................................................................... 20 1.3. PLANTEAMINETO DEL PROBLEMA ..................................................... 20 1.4. ALCANCES Y LIMITACIONES ............................................................... 22 1.5. OBJETIVOS ............................................................................................ 23 1.6. JUSTIFICACIÓN ..................................................................................... 24 1.7. MARCO REFERENCIAL ......................................................................... 25 1.8. FACTIBILIDAD DE DESARROLLO ......................................................... 33 1.9. CRONOGRAMA DE ACTIVIDADES (POR ETAPAS) ............................. 36 2. ETAPA 2 – ANALISIS DEL PROYECTO ....................................................... 38 2.1. Identificación de los roles ........................................................................ 38 2.2. Lista de actividades por rol ...................................................................... 39 2.3. Producto Backlog .................................................................................... 41 2.4. Sprint o iteraciones.................................................................................. 45 3. FASE 3 – DISEÑO DE LOS SPRINT............................................................. 49 3.1. Sprint 1 Muestra de materia fotográfico .................................................. 49 3.2. Sprint 2 Solicitud de cita para foto estudio .............................................. 55 3.3. Sprint 3 Base de datos ............................................................................ 64.

(6) 3.4. Sprint 4 Registro de usuarios .................................................................. 70 3.5. Sprint 5 Login .......................................................................................... 77 3.6. Sprint 6 Olvide mi contraseña ................................................................. 83 3.7. Sprint 7 Personalización producto ........................................................... 91 3.8. Sprint 8 Carrito de compras .................................................................. 100 3.9. Sprint 9 Compra producto ..................................................................... 108 3.10. Sprint 10 Respuesta de transacción .................................................... 114 3.11. Sprint 11 Gestión de categorías .......................................................... 118 3.12. Sprint 12 Gestión de productos ........................................................... 128 3.13. Sprint 13 Gestión de pedidos .............................................................. 139 3.14. Sprint 14 Gestión de usuarios ............................................................. 145 3.15. Sprint 15 Gestión de eventos .............................................................. 157 3.16. Sprint 16 Selección de foto evento ...................................................... 165 3.17. Sprint 17 Direccionamiento general .................................................... 174 4. ETAPA 4 – IMPLEMENTACION .................................................................. 180 4.1. Diagrama de paquetes .......................................................................... 180 4.2. Diagrama de componentes ................................................................... 180 4.3. Pruebas a diferentes resoluciones y navegadores. ............................... 181 CONCLUSIONES ................................................................................................ 185 RECOMENDACIONES ....................................................................................... 186 BIBLIOGRAFIA ................................................................................................... 187 Anexos ................................................................................................................ 188.

(7) LISTA DE TABLAS. Tabla 1. Factibilidad económica - Software y hardware ........................................ 33 Tabla 2. Factibilidad económica - Recursos humanos .......................................... 34 Tabla 3. Factibilidad económica - Total costos...................................................... 34 Tabla 4. Factibilidad técnica .................................................................................. 35 Tabla 5.Factibilidad operativa................................................................................ 36 Tabla 6. Roles ....................................................................................................... 38 Tabla 7. Lista de actividades ................................................................................. 39 Tabla 8. Producto Backlog .................................................................................... 41 Tabla 9. Sprints o iteraciones ................................................................................ 45 Tabla 10. Definición Sprint 1 ................................................................................. 49 Tabla 11. Tareas del Sprint 1 ................................................................................ 49 Tabla 12. Prueba Sprint 1...................................................................................... 55 Tabla 13. Definición del Sprint 2............................................................................ 56 Tabla 14. Tareas del Sprint 2 ................................................................................ 56 Tabla 15. Prueba del Sprint 2 ................................................................................ 62 Tabla 16. Definición del Sprint 3............................................................................ 64 Tabla 17. Tareas del Sprint 3 ................................................................................ 64 Tabla 18. Prueba del Sprint 3 ................................................................................ 70 Tabla 19. Definición del Sprint 4............................................................................ 71 Tabla 20. Tareas del Sprint 4 ................................................................................ 71 Tabla 21. Prueba del Sprint 4 ................................................................................ 75 Tabla 22. Definición del Sprint 5............................................................................ 77.

(8) Tabla 23. Tareas del Sprint 5 ................................................................................ 78 Tabla 24. Pruebas del Sprint 5 .............................................................................. 81 Tabla 25. Definición del Sprint 6............................................................................ 83 Tabla 26. Tareas del Sprint 6 ................................................................................ 84 Tabla 27. Prueba del Sprint 6 ................................................................................ 89 Tabla 28. Definición del Sprint 7............................................................................ 91 Tabla 29. Tareas del Sprint 7 ................................................................................ 92 Tabla 30. Pruebal de Sprint 7 ................................................................................ 98 Tabla 31. Definición del Sprint 8.......................................................................... 100 Tabla 32. Tareas del Sprint 8 .............................................................................. 101 Tabla 33. Prueba del Sprint 8 .............................................................................. 105 Tabla 34. Definición del Sprint 9.......................................................................... 108 Tabla 35. Tareas del Sprint 9 .............................................................................. 108 Tabla 36. Prueba del Sprint 9 .............................................................................. 112 Tabla 37. Definición del Sprint 10 ........................................................................ 114 Tabla 38. Tareas del Sprint 10 ............................................................................ 114 Tabla 39. Pruebas del Sprint 10 .......................................................................... 118 Tabla 40. Definición del Sprint 11 ........................................................................ 118 Tabla 41. Tareas del Sprint 11 ............................................................................ 119 Tabla 42. Pruebas del Sprint 11 .......................................................................... 126 Tabla 43. Definición del Sprint 12 ........................................................................ 128 Tabla 44. Tareas del Sprint 12 ............................................................................ 129 Tabla 45. Pruebas del Sprint 12 .......................................................................... 136 Tabla 46. Definición del Sprint 13 ........................................................................ 139.

(9) Tabla 47. Tareas del Sprint 13 ............................................................................ 140 Tabla 48. Prueba del Sprint 13 ............................................................................ 144 Tabla 49. Definición de Sprint 14 ........................................................................ 145 Tabla 50. Tareas del Sprint 14 ............................................................................ 146 Tabla 51. Prueba del Sprint 14 ............................................................................ 154 Tabla 52. Definición de Sprint 15 ........................................................................ 157 Tabla 53. Tareas del Sprint 15 ............................................................................ 158 Tabla 54. Pruebas del Sprint 15 .......................................................................... 163 Tabla 55. Definición del Sprint 16 ........................................................................ 166 Tabla 56. Tareas del Sprint 16 ............................................................................ 166 Tabla 57. Prueba del Sprint 16 ............................................................................ 172 Tabla 58. Pruebas del Sprint 17 .......................................................................... 179.

(10) LISTA DE ILUSTRACIONES. Ilustración 1. Marco de trabajo SCRUM ................................................................ 32 Ilustración 2. Etapa 1 cronograma de actividades ................................................. 36 Ilustración 3. Etapa 2 cronograma de actividades ................................................. 37 Ilustración 4. Etapa 3 cronograma de actividades ................................................. 37 Ilustración 5. Etapa 4 cronograma de actividades ................................................. 38 Ilustración 6. Sprint Muestra de material fotográfico 1. ......................................... 50 Ilustración 7. Sprint Muestra de material fotográfico 2. ......................................... 51 Ilustración 8. Sprint Muestra de material fotográfico 3. ......................................... 51 Ilustración 9. Sprint 1 HTML Galerías de fotos. ..................................................... 52 Ilustración 10. Sprint 1 CSS Galería de fotos. ....................................................... 53 Ilustración 11. Sprint 1 Etiqueta media para web responsive. ............................... 53 Ilustración 12. Sprint 1 CSS responsive. ............................................................... 54 Ilustración 13. Diagrama de contexto Sprint 1 ....................................................... 54 Ilustración 14. Sprint Solicitud de cita para foto estudio ........................................ 57 Ilustración 15. Sprint 2 HTML Solicitud de cita para foto estudio .......................... 58 Ilustración 16. Sprint 2 JS Solicitud de cita para foto estudio ................................ 59 Ilustración 17. Sprint 2 JS Solicitud de cita para foto estudio ................................ 59 Ilustración 18. Sprint 2 CSS Solicitud de cita para foto estudio ............................. 60 Ilustración 19. Sprint 2 PHP Solicitud de cita para foto estudio ............................. 60 Ilustración 20. Sprint 2 HTML Solicitud de cita para foto estudio .......................... 61 Ilustración 21. Diagrama de contexto Sprint 2 ....................................................... 61 Ilustración 22. Sprint Prueba 1 .............................................................................. 63.

(11) Ilustración 23. Sprint 2 Prueba 2 ........................................................................... 63 Ilustración 24. Sprint Base de datos ...................................................................... 68 Ilustración 25. Sprint 3 PHP Migration Base de datos ........................................... 69 Ilustración 26. Sprint 3 PHP Seed Base de datos ................................................. 69 Ilustración 27. Sprint Registro de usuarios ............................................................ 72 Ilustración 28. Sprint 4 HTML Registro de usuarios .............................................. 73 Ilustración 29. Sprint 4 HTML Registro de usuarios .............................................. 74 Ilustración 30. Sprint 4 PHP Registro de usuarios ................................................. 74 Ilustración 31. Sprint 4 PHP Registro de usuarios ................................................. 75 Ilustración 32. Diagrama de contexto Sprint 4 ....................................................... 75 Ilustración 33. Sprint 4 Prueba 1 ........................................................................... 77 Ilustración 34. Sprint 4 Prueba 2 ........................................................................... 77 Ilustración 35. Sprint Login .................................................................................... 79 Ilustración 36. Sprint 5 HTML Login ...................................................................... 80 Ilustración 37. Sprint 5 HTML Login ...................................................................... 80 Ilustración 38. Diagrama de contexto Sprint 5 ....................................................... 81 Ilustración 39. Sprint 5 Prueba 1 ........................................................................... 82 Ilustración 40. Sprint 5 Prueba 2 ........................................................................... 83 Ilustración 41. Sprint Olvide mi contraseña ........................................................... 85 Ilustración 42. Sprint Olvide mi contraseña ........................................................... 86 Ilustración 43. Sprint 6 HTML Olvide mi contraseña.............................................. 87 Ilustración 44. Sprint 6 PHP Olvide mi contraseña ................................................ 87 Ilustración 45. Sprint 6 PHP Olvide mi contraseña ................................................ 88 Ilustración 46. Sprint 6 HTML Olvide mi contraseña.............................................. 88.

(12) Ilustración 47. Diagrama de contexto Sprint 6 ....................................................... 89 Ilustración 48. Sprint 6 Prueba 1 ........................................................................... 90 Ilustración 49. Sprint 6 Prueba 2 ........................................................................... 91 Ilustración 50. Sprint Personalización producto ..................................................... 93 Ilustración 51. Sprint Personalización producto ..................................................... 94 Ilustración 52. Sprint 7 HTML Personalización producto ....................................... 95 Ilustración 53. Sprint 7 HTML Personalización producto ....................................... 96 Ilustración 54. Sprint 7 HTML Personalización producto ....................................... 96 Ilustración 55. Sprint 8 PHP Personalización producto ......................................... 97 Ilustración 56. Diagrama de contexto Sprint 7 ....................................................... 98 Ilustración 57. Sprint 7 Prueba 1 ........................................................................... 99 Ilustración 58. Sprint 7 Prueba 2 ......................................................................... 100 Ilustración 59. Sprint Carrito de compras ............................................................ 103 Ilustración 60. Sprint 8 HTML Carrito de compras ............................................... 104 Ilustración 61. Sprint 8 PHP Carrito de compras ................................................. 104 Ilustración 62. Diagrama de contexto Sprint 8 ..................................................... 105 Ilustración 63. Sprint 8 Prueba 1 ......................................................................... 107 Ilustración 64. Sprint 8 Prueba 2 ......................................................................... 107 Ilustración 65. Sprint Compra Producto ............................................................... 110 Ilustración 66. Sprint 9 PHP Compra producto .................................................... 111 Ilustración 67. Sprint 8 HTML Compra producto ................................................. 111 Ilustración 68. Diagrama de contexto Sprint 9 ..................................................... 112 Ilustración 69. Sprint 9 Prueba 1 ......................................................................... 113 Ilustración 70. Sprint Respuesta de transacción ................................................. 115.

(13) Ilustración 71. Sprint 10 PHP Respuesta de transacción .................................... 116 Ilustración 72. Sprint 10 PHP Respuesta de transacción .................................... 117 Ilustración 73. Diagrama de contexto Sprint 10 ................................................... 117 Ilustración 74. Sprint 10 Prueba 1 ....................................................................... 118 Ilustración 75. Sprint Gestión de categorías ........................................................ 120 Ilustración 76. Sprint Gestión de categorías ........................................................ 121 Ilustración 77. Sprint Gestión de categorías ........................................................ 121 Ilustración 78. Sprint Gestión de categorías ........................................................ 122 Ilustración 79. Sprint Gestión de categorías ........................................................ 122 Ilustración 80. Sprint 11 HTML Gestión de categorías ........................................ 123 Ilustración 81. Sprint 11 HTML Gestión de categorías ........................................ 124 Ilustración 82. Sprint 11 HTML Gestión de categorías ........................................ 124 Ilustración 83. Sprint 11 PHP Gestión de categorías .......................................... 125 Ilustración 84. Sprint 11 PHP Gestión de categorías .......................................... 125 Ilustración 85. Diagrama de contexto Sprint 11 ................................................... 126 Ilustración 86. Sprint 11 Prueba 1 ....................................................................... 127 Ilustración 87. Sprint 11 Prueba 2 ....................................................................... 127 Ilustración 88. Sprint 11 Prueba 3 ....................................................................... 128 Ilustración 89. Sprint Gestión de productos ......................................................... 130 Ilustración 90. Sprint Gestión de productos ......................................................... 131 Ilustración 91. Sprint Gestión de productos ......................................................... 131 Ilustración 92. Sprint Gestión de categorías ........................................................ 132 Ilustración 93. Sprint 12 HTML Gestión de productos ......................................... 133 Ilustración 94. Sprint 12 HTML Gestión de productos ......................................... 133.

(14) Ilustración 95. Sprint 12 HTML Gestión de productos ......................................... 134 Ilustración 96. Sprint 12 PHP Gestión de productos ........................................... 134 Ilustración 97. Sprint 12 PHP Gestión de productos ........................................... 135 Ilustración 98. Sprint 12 Gestión de productos .................................................... 135 Ilustración 99. Sprint 12 Gestión de productos .................................................... 135 Ilustración 100. Diagrama de contexto Sprint 12 ................................................. 136 Ilustración 101. Sprint 12 Prueba 1 ..................................................................... 137 Ilustración 102. Sprint 12 Prueba 2 ..................................................................... 138 Ilustración 103. Sprint 12 Prueba 3 ..................................................................... 138 Ilustración 104. Sprint 12 Prueba 4 ..................................................................... 139 Ilustración 105. Sprint Gestión de pedidos .......................................................... 141 Ilustración 106. Sprint Gestión de pedidos .......................................................... 141 Ilustración 107. Sprint Gestión de pedidos .......................................................... 142 Ilustración 108. Sprint 13 HTML Gestión de pedidos .......................................... 143 Ilustración 109. Sprint 13 PHP Gestión de pedidos ............................................. 143 Ilustración 110. Diagrama de contexto Sprint 13 ................................................. 144 Ilustración 111. Sprint 13 Prueba ........................................................................ 145 Ilustración 112. Sprint Gestión de usuarios ......................................................... 147 Ilustración 113. Sprint Gestión de usuarios ......................................................... 148 Ilustración 114. Sprint Gestión de usuarios ......................................................... 148 Ilustración 115. Sprint Gestión de usuarios ......................................................... 149 Ilustración 116. Sprint 14 HTML Gestión de usuarios ......................................... 150 Ilustración 117. Sprint 14 HTML Gestión de usuarios ......................................... 150 Ilustración 118. Sprint 14 HTML Gestión de usuarios ......................................... 151.

(15) Ilustración 119. Sprint 14 HTML Gestión de usuarios ......................................... 151 Ilustración 120. Sprint 14 PHP Gestión de usuarios ............................................ 152 Ilustración 121. Sprint 14 PHP Gestión de usuarios ............................................ 152 Ilustración 122. Sprint 14 PHP Gestión de usuarios ............................................ 153 Ilustración 123. Sprint 14 PHP Gestión de usuarios ............................................ 153 Ilustración 124. Diagrama de contexto Sprint 14 ................................................. 153 Ilustración 125. Sprint 14 Prueba 1 ..................................................................... 155 Ilustración 126. Sprint 14 Prueba 2 ..................................................................... 155 Ilustración 127. Sprint 14 Prueba 3 ..................................................................... 156 Ilustración 128. Sprint 14 Prueba 4 ..................................................................... 156 Ilustración 129. Sprint 14 Prueba 5 ..................................................................... 157 Ilustración 130. Sprint Gestión de eventos .......................................................... 159 Ilustración 131. Sprint Gestión de eventos .......................................................... 159 Ilustración 132. Sprint Gestión de eventos .......................................................... 160 Ilustración 133. Sprint 15 HTML Gestión de eventos .......................................... 161 Ilustración 134. Sprint 15 HTML Gestión de eventos .......................................... 161 Ilustración 135. Sprint 15 HTML Gestión de eventos .......................................... 162 Ilustración 136. Diagrama de contexto Sprint 15 ................................................. 162 Ilustración 137. Sprint 15 Prueba 1 ..................................................................... 164 Ilustración 138. Sprint 15 Prueba 2 ..................................................................... 164 Ilustración 139. Sprint 15 Prueba 3 ..................................................................... 165 Ilustración 140. Sprint 15 Prueba 4 ..................................................................... 165 Ilustración 141. Sprint Selección de foto evento .................................................. 168 Ilustración 142. Sprint Selección de foto evento .................................................. 168.

(16) Ilustración 143. Sprint 16 HTML Selección de foto evento .................................. 169 Ilustración 144. Sprint 16 HTML Selección de foto evento .................................. 169 Ilustración 145. Sprint 16 PHP Selección de foto evento .................................... 170 Ilustración 146. Sprint 16 PHP Selección de foto evento .................................... 170 Ilustración 147. Sprint 16 PHP Selección de foto evento .................................... 171 Ilustración 148. Diagrama de contexto Sprint 16 ................................................. 171 Ilustración 149. Sprint 16 Prueba 1 ..................................................................... 173 Ilustración 150. Sprint 16 Prueba 2 ..................................................................... 173 Ilustración 151. Sprint 16 Prueba 3 ..................................................................... 174 Ilustración 152. Sprint 17 PHP Direccionamiento general ................................... 176 Ilustración 153. Sprint 17 Direccionamiento general ........................................... 176 Ilustración 154. Sprint 17 Direccionamiento general ........................................... 177 Ilustración 155. Sprint 17 Direccionamiento general ........................................... 177 Ilustración 156. Sprint 17 Direccionamiento general ........................................... 178 Ilustración 157. Sprint 17 Direccionamiento general ........................................... 178 Ilustración 158. Diagrama de contexto Sprint 17 ................................................. 179 Ilustración 159. Diagrama de paquetes ............................................................... 180 Ilustración 160. Diagrama de componentes ........................................................ 180.

(17) INTRODUCCIÓN Con las tecnologías en pleno crecimiento, es de gran importancia desarrollar software que facilite al usuario realizar actividades del día a día, sin importar si aquella persona está presente o no en un lugar determinado; permitiéndonos así acceder desde cualquier lugar y en cualquier dispositivo conectado a la red, al conocimiento, con el fin de realizar una tarea en específico, que puede ser desde una simple consulta de información, hasta realizar una transacción en el banco, ahorrándonos tiempo y dinero, y todo esto desde una plataforma web. El proyecto tiene como finalidad desarrollar una plataforma web para la gestión de la información referente a las ventas y los servicios presentes en la empresa PhotoLife Studio; mostrándole al cliente los servicios y productos prestados por esta, con el fin de permitirle personalizarlos y adquirirlos en la puerta de su hogar si así lo quiere; una vez el cliente solicite su servicio o producto, la empresa tendrá la información de esto para disponer de ella y complacer al cliente con sus exigencias. El documento en cuestión permite conocer el planteamiento del problema que se desea tratar, así como la solución tecnológica que se le dio a este; por otra parte, se realizó un análisis de los productos presentes en la empresa, con el fin de determinar las características modificables que cada uno presentaba, para determinar los elementos que se debían llegar a tratar con cada uno de los productos y agruparlos para su personalización.. 17.

(18) RESUMEN El proyecto “Sistema de información web para la gestión de la información de ventas y servicios en la empresa PhotoLife Studio” tiene como fin desarrollar una aplicación web que permita a los usuarios con sesión, solicitar un servicio, comprar y personalizar un producto, y hacer la selección del material fotográfico de un evento realizado con anterioridad; por otra parte, para el usuario con perfil de administrador, le será posible crear, editar y eliminar: categorías de productos, productos disponibles en la tienda, usuarios dentro de la plataforma, pedidos realizados por los clientes, y eventos realizados en la empresa. Esta aplicación web estará presente para todos los usuarios que cuenten con un dispositivo con conexión a internet, ya sea móvil o no; gracias a su diseño web responsive, la aplicación es capaz de adaptarse a las diferentes pantallas ya sea de: móviles, tabletas o computadores, que manejen diferentes navegadores web como: mozilla, chrome, y safari entre otros. El aplicativo web contara con los módulos de: Estudios (donde se mostrará el material fotográfico de la empresa como: bodas, quince años, sesiones en exterior etc), Tienda online (está dividido en los productos presentes en línea y los que únicamente se pueden comprar en la tienda física), Agenda tu cita (donde se realizara la solicitud de un servicio), Clientes (donde se le mostrara al cliente su material fotográfico para seleccionar), Contacto (donde se presenta la información de la empresa y se hace el contacto con la empresa por parte del cliente); lo anterior bajo la tecnología de php, html, css, el framewor de desarrollo laravel y como motor de base de datos Mysql.. 18.

(19) ABSTRACT The project "Web information system for management of sales and services in the company PhotoLife Studio" aims to develop a web application that allows users to access, request a service, buy and customize a product, and make the selection of the material photographic of an event previously held; On the other hand, for the user with an administrator profile, it is possible to create, edit and delete: product categories, products for the store, users for the platform, orders placed for clients and events carried. out. in. the. company.. This web application will be present for all users who have a device with an internet connection, whether mobile or not, thanks to its web-sensitive design, the application is able to adapt to different screens and the sea of: mobile , tablets or computers, which handle different web browsers such as: mozilla, chrome, and safari among others. The web application will have the following modules: Studies (where you can obtain the photographic material of the company such as: weddings, fifteen years, outdoor sessions, etc.), Online store (it is divided into the products present online and the that can only be purchased in the physical store), Schedule your appointment (where the service request is made), Clients (where the clientele is shown with photographic material to select), Contact (where the information of the company is presented and makes contact with the company by the client); the above under the technology of php, html, css, laravel development framework and as MySQL database engine.. 19.

(20) 1. ETAPA 1 – PLANEACION, DEFINCIÓN, ORGANIZACIÓN 1.1. TITULO SISTEMA DE INFORMACIÓN WEB PARA LA GESTIÓN DE LA INFORMACIÓN DE VENTAS Y SERVICIOS EN LA EMPRESA PHOTOLIFE STUDIO. 1.2. TEMA Aplicación web para la gestión de la información de ventas y servicios en la empresa PhotoLife Studio, con pasarela de pagos. 1.3. PLANTEAMINETO DEL PROBLEMA 1.3.1. Descripción del problema PhotoLife Studio, es una empresa colombiana dedicada a capturar y materializar los recuerdos de las personas, es decir, a realizar fotografías y videos, de los momentos especiales en la vida y posteriormente generar múltiples recuerdos de forma creativa sobre dichos momentos.. Las fotografías, son la forma más tradicional y única de mostrar y tener presentes nuestros recuerdos más preciados (paseos, conmemoraciones, bodas, bautizos, e incluso personas), teniendo la posibilidad de mostrarlos como objetos decorativos o presentándolos de otras maneras , es decir como un detalle o un simple gesto de recuerdo hacia otra persona, esto implica que determinemos la foto adecuada que vamos a plasmar en dicho recuerdo, el costo que este puede llegar a tener y demás factores como: su tamaño, su forma y sus colores. Es en este punto donde la empresa PhotoLife studio presta sus servicios ante el cliente dándole la atención a cada uno de ellos, mostrándole los diferentes tipos de recuerdos que puede llevar, sus formas, colores y sus diferentes precios; esto realizándolo en el menor tiempo posible y siempre intentando capturar la idea del cliente. 20.

(21) El sistema de selección personal que utiliza la empresa actualmente, consiste en: el acercamiento del cliente a la empresa, en donde se le presentan los servicios (bodas, cumpleaños, bautizos etc…) y productos (pocillos, estampados, álbumes etc…) proporcionados por esta y se le informan los precios; una vez seleccionado el producto, se hace la transferencia del material fotográfico que trae el cliente, o bien que se haya tomado por la empresa con anterioridad, enseguida de esto, se procede a realizar la selección del material fotográfico que ira en el producto, en este punto se le muestran al cliente los diseños que hay para dicho producto y se hace la selección del material fotográfico que se pretenda incorporar, este procesos puede llevar varios minutos o incluso un par de horas, esto dependiendo del material fotográfico seleccionado por el cliente y los cambios que se tengan que realizar, para el o los productos, lo que genera una gran deficiencia de tiempo para la empresa, quien después tendrá que incorporar las ideas presentadas por el cliente y adecuarlas al producto. Este proceso genera un gran problema con los tiempos de entrega de los productos; al ser invertido tanto tiempo por el empleado en el acompañamiento con el cliente, los demás trabajos e incluso el del cliente en cuestión,. disponen de un. menor. tiempo. para. ser. desarrollados e. implementados, generando así que el sistema de selección personal colapse en las temporadas en las que el flujo de clientes se incrementa.. Desafortunadamente el sistema de selección personal que utiliza la empresa PhotoLife Studio, es poco eficiente con el tiempo del cliente y su forma de capturar las ideas, desperdiciando así, tiempo del empleado, recursos de la empresa y haciendo menos competitiva a esta, puesto que contribuye a un lento proceso de selección y este a su vez crea una imagen de marca desfavorable.. 21.

(22) 1.3.2. Formulación ¿Es posible generar una alternativa tecnológica que agilice los procesos entre el cliente y la empresa además de brindar al cliente información de productos y servicios, información de trabajos realizados y compra de productos?. 1.4. ALCANCES Y LIMITACIONES 1.4.1. Alcances . El presente proyecto facilitara al usuario de la plataforma realizar diferentes tareas desde cualquier lugar con acceso a internet permitiéndole personalizar objetos, solicitar la asignación de un evento y seleccionar el material fotográfico de sus eventos.. . La personalización de elementos y selección de fotos estará presente únicamente para clientes registrados en la plataforma.. . Las transacciones de la plataforma estarán controladas por PayU y se deberá esperar a su respuesta para determinar el estado de la compra.. . Se estima un tiempo aproximado máximo de 6 meses de desarrollo, para dar por finalizada la aplicación web.. . La plataforma web tendrá diseño web responsive para adaptarse a diferentes dispositivos.. 1.4.2. Delimitaciones . La integración del software desarrollado con el framework laravel, en relación al servicio de host contratado.. . El manejo de versiones de Mysql usado en el host local y el del servicio de host contratado.. . El servicio de la empresa está solo en la ciudad de Bogotá y pueblos aledaños a esta.. 22.

(23) . Los objetos a la venta que contengan dimensiones muy grandes o características. muy. particulares,. deberán. ser. solicitados. presencialmente en la empresa. . El almacenamiento comprado en el servicio de host.. 1.5. OBJETIVOS 1.5.1. Objetivo General . Desarrollar un sistema web para la gestión de información, referente a ventas y servicios de eventos sociales como: bodas, bautizos, quince años, etc, presentes en la empresa PhotoLife Studio.. 1.5.2. Objetivos Específicos . Realizar el levantamiento de los requerimientos necesarios para la estructuración del sistema web, que permitirá agilizar los procesos de información y selección referentes a los productos y servicios prestados por la empresa.. . Desarrollar e implementar los módulos de: home, bodas, estudios, tienda, galería de clientes privados y solicitud de servicio, que conformaran el sistema web, para brindar al cliente tanto información, como la posibilidad de: solicitar productos y servicios, seleccionar los estilos de sus productos, realizar pagos y cargar su material fotográfico para dichos productos.. . Desarrollar el modulo administrativo, que permita gestionar y enviar información a sus clientes referentes a productos y servicios.. . Desarrollar los perfiles de acceso por roles, que brindaran seguridad a la plataforma y validar su funcionalidad.. 23.

(24) 1.6. JUSTIFICACIÓN El aplicativo web se realiza con el propósito de suplir la necesidad que tiene la empresa PhotoLife Studio de ampliar su mercado y generar nuevos clientes por medio de una solución tecnológica que permita alcanzar un mayor posicionamiento, aplicando los conocimientos adquiridos a lo largo del paso por la academia, mostrando así de manera tanto teórica como practica la aplicación de cada uno de estos conocimientos y resaltando la importancia de estos en la realización de una aplicación web sólida y completa, que permita cumplir con los requisitos mencionados anteriormente. La idea parte de la necesidad de tener un espacio donde la gente pueda conocer el trabajo realizado por la empresa con los diferentes productos y servicios que esta suministra, haciendo uso de una plataforma que sea capaz de mostrar los trabajos realizados, permitir la compra de productos, personalizar los mismos y solicitar la asignación de citas para todo tipo de eventos sociales; aparte de esto con la facilidad de poder gestionar cada uno de los productos, pedidos, usuarios, y selección de fotos para los eventos, sin tener que salir de la plataforma, gracias al sistema de roles que se pretende implementar para facilitar y agilizar los procesos de la empresa referentes a estas actividades. Si bien la mayoría de empresas que tienen ventas de productos permiten seleccionar aspectos como el color o el tamaño, la personalización de esta plataforma va más lejos que eso, brindándole al usuario la capacidad de elegir una gama de colores, una serie de tipografías, una gama de fondos prediseñados, y lo más importante, poder cargar una o varias de sus fotos dependiendo del producto que desee comprar. Añadiendo a lo anterior sumamos la posibilidad de solicitar citas con la empresa y seleccionar el material fotográfico resultante de los foto eventos contratados.. 24.

(25) 1.7. MARCO REFERENCIAL 1.7.1. Marco Teórico 1.7.1.1. Fuentes de información Fuentes de información primaria . Stauffer, Matt. Laravel: Up and Running. Ed 2016 United States of America. O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.. . Dayle Rees. Laravel Code Bright. Ed 2016. Leanpub, Ruboss Technology Corp.. . Bahit, Eugenia. POO y MVC en PHP. Ed 2011. Creative Commons Atribucion.. . Gilfillan, Ian. La biblia del MySQL. ANAYA MULTIMEDIA. Ed 2003. ISBN: 9788441515581.. Fuentes de información secundaria . Cobo, Ángel. Gómez, Patricia. Pérez, Daniel. Rocha, Roció. PHP y MySQL tecnologías para el desarrollo de aplicaciones web. Ed 2005 España. ISBN: 847978-706-6.. . Reinosa, Enrique. Bases de Datos. Ed 2012. Argentina. ISBN: 978-987-160931-4.. 1.7.1.2. Proyectos relacionados . Título: ClickPrint. Autor: Photoprint. Año: 2012 Descripción: Photoprint es una empresa de fotografía la cual se encarga de plasmar el material fotográfico de sus clientes de diferentes formas, esta empresa cuenta con diferentes tipos de software encargado de diferentes tareas como lo es el diseño de productos realizado por medio de su plataforma ClickPrint en la cual únicamente se puede hacer el diseño del producto a personalizar, variando desde el tamaño de la foto hasta la tipografía utilizada.. . Título: STUDIO 109. 25.

(26) Autor: Marisol Castaño. Año: 2018 Descripción: STUDIO 109 es una empresa de fotografía como muchas, que se encarga de plasmar el material fotográfico de sus clientes de diferentes formas, esta plataforma cuenta únicamente con la compra del producto tal cual como esta exhibido en la galería de las fotos y se enfoca en vender productos con estilos planos, es decir sin que se puedan personalizar. . Título: Wawaw. Autor: Wawaw. Año: 2008 Descripción: Wawaw es una empresa de accesorios para mascotas, la cual tiene diversos productos para ellas, desde disfraces hasta medallas, lo particular de esta plataforma está en la personalización de los productos, llegando al punto de personalizar las dimensiones del producto, la tipografía y el color de cada uno de estos.. . Título: Foto A Digital. Autor: Amapolazul. Año: 2018 Descripción: Foto A Digital es una empresa de fotografía que se encarga de tomar e imprimir el material fotográfico de sus clientes, esta plataforma cuenta únicamente con la venta de productos en blanco, es decir portarretratos sin personalización alguna o el material fotográfico por aparte, sin hacer la integración de estos.. 1.7.2. Marco conceptual . Sesión Fotográfica (foto estudio): Termino que generalmente se le atribuye a la moda, aunque sin ser exclusivo es aquella situación en la que una persona o un grupo, posan frente a una cámara de fotografía en un estudio realizando múltiples fotografías. 26.

(27) . Personalizar: Hace referencia a volver algo personal, es decir hacer una representación de algún objeto o algo abstracto como si tuviera características de persona.. . Pasarela de pago: Hace referencia al servicio por el cual un proveedor de servicios de comercio electrónico autoriza pagos a negocios electrónicos, ventas en línea a detalle y demás instancias que requieran el uso de una tarjeta de crédito de cualquier tipo.. . HTML: Es el lenguaje de marcado que se utiliza para el desarrollo de páginas web, que hace como referencia al lenguaje de marcas de hipertexto que permite ordenar y etiquetar diferentes documentos dentro de una lista.. . CSS: Es un lenguaje que describe la presentación de los documentos estructurados en hojas de estilo para diferentes métodos de interpretación, es decir, describe cómo se va a mostrar un documento en pantalla.. . JS: Hace referencia al lenguaje de programación ligero interpretado por los navegadores con efectos y funciones complementarias a las consideradas como estándar html, con frecuencia es utilizado para realizar acciones del lado del cliente.. . PHP: Hace referencia a lenguaje de programación interpretado, este lenguaje es quien realiza el contenido dinámico en una página web, este código es invisible para el usuario ya que sus interacciones son transformadas para mostrar variedades multimedia y los formatos con los que es posible interactuar para añadir y demás.. . Laravel: Es un framework de código abierto con el fin de desarrollar aplicaciones y servicios web con PHP. Su objetivo principal es desarrollar aplicaciones con código PHP de forma ágil y simple. 27.

(28) . Base de datos relacional: Hace referencia a una colección de datos almacenada de forma ordenada en un programa de ordenador que puede seleccionar rápidamente los fragmentos de datos que necesite.. . ORM: mapeo de objeto-relacional, es un modelo de programación que consiste en la transformación de las tablas de una base de datos, en una serie de entidades que simplifiquen las tareas básicas de acceso a los datos para el programador.. . Eloquent: Es el ORM que incluye Laravel para manejar de una forma fácil y sencilla los procesos correspondientes al manejo de bases de datos en nuestro proyecto, gracias a las funciones que provee podremos realizar complejas consultas y peticiones de base de datos sin escribir una sola línea de código SQL.. . Token: Este elemento hace referencia a una cadena de caracteres que toma sentido coherente ante un lenguaje de programación con una longitud cualquiera que sirve para identificar las entidades del programa.. . CSRF: Es un tipo de protección que añade un campo oculto a los formularios, el cual solo puede ser conocido por el formulario de envió y el sistema que lo recibe.. . HASH: Es un método que genera claves para representar un conjunto de datos y que como resultado da una huella digital de tamaño fijo, independientemente de la dimensión del documento original.. . MD5: Es una función codificadora de un archivo, a menudo empleada para codificar contraseñas en bases de datos.. 28.

(29) 1.7.2.1. Herramientas de desarrollo Atom Es un editor de texto de código abierto para Windows, Linux y Mac desarrollado por GitHub, que permite la instalación de paquetes para identificar elementos, visualizar pestañas, identificar colores según su código RGB y demás herramientas útiles a la hora de desarrollar. La característica más útil y utilizada de Atom es control de versiones integrado con Git, permitiéndole al usuario tener control completo del versionamiento de su código en cualquier punto del desarrollo.. GIT Es un software de control de versiones, pensado en la eficiencia y confiabilidad del mantenimiento de versiones de aplicaciones cuando estas poseen un número elevado de archivos de código fuente, su propósito es llevar registro de los cambios en archivos y coordinar el trabajo que varias personas realizan sobre archivos compartidos.. Composer Este es un manejador de dependencias, es decir que nos permite gestionar (declarar, descargar y mantener actualizados) los paquetes de software en los que se basa nuestro proyecto PHP.. Laravel Es uno de los frameworks de código abierto más utilizados para PHP, Laravel se enfoca en el uso de una sintaxis refinada y expresiva para crear código de forma sencilla, evitando el llamado “código espagueti” (es decir código enredado) y permitiendo multitud de funcionalidades, entre sus características esta: . Sistema de ruteo.. . Blade, motor de plantillas.. . Peticiones fluent. 29.

(30) . Eloquent ORM.. . Soporte para el cache.. . Soporte para MVC.. . Usa componentes de Symfony.. . Adopta las especificaciones PSR-2 y PSR-4.. Artisan Este elemento es la interfaz de línea de comandos que permite la interacción con la aplicación donde los usuarios dan instrucciones en forma de línea de texto simple o como se le llama comúnmente línea de comandos, este elemento está basado en el componente Console de Symfony y nos ofrece un conjunto de comandos que nos ayuden a realizar diferentes tareas durante el desarrollo e incluso cuando la aplicación se encuentre en producción.. MySQL Es el sistema de bases de datos relacionales desarrollado bajo licencia publica y es considerada la base de datos de código abierto más popular del mundo, es frecuentemente utilizada en desarrollos web gracias a su velocidad y flexibilidad ya que las tablas están conectadas por relaciones definidas que hacen posible combinar datos de diferentes tablas sobre pedido. Entre sus características tenemos: . Disponibilidad en gran cantidad de plataformas y sistemas.. . Posibilidad de selección de mecanismo de almacenamiento que ofrece diferentes velocidades de operación.. . Transacciones y claves foráneas.. . Conectividad segura.. . Replicación.. . Búsqueda e indexación de campos de texto.. 30.

(31) 1.7.3. Metodología de desarrollo Para el desarrollo de esta aplicación se pretende implementar la metodología SCRUM, la cual gracias a sus diferentes componentes logran un desarrollo óptimo y acertado de la aplicación a trabajar; lo anterior por medio de sus sprint o iteraciones, que permiten entregar un producto funcional al terminar cada uno de estos, con la posibilidad de cambiar las funcionalidades del sprint en relación a la necesidad de negocio expresada por el cliente en cuestión. Esta metodología maneja una serie de roles y responsabilidades asignadas a sus procesos de desarrollo, asegurando así que quien tenga un rol, tiene la autoridad para asegurar el éxito del proceso que conlleva en cuestión y que aquel que carezca de esto, no pueda interferir en el desarrollo del proceso. Scrum maneja la premisa de: el dónde y el cuándo, esto se ve representado en un sprint, que es la unidad básica de trabajo para un equipo en esta metodología, un equipo puede llegar a terminar varios sprint a lo largo del desarrollo de un proyecto y este inicia cunado un equipo se compromete a entregar el trabajo y finaliza con la demostración de un entregable. Este proceso tiene un mínimo de una semana por sprint y un máximo de cuatro semanas. Etapas Esta metodología puede dividirse por etapas, que garantizan minimizar inconvenientes con el proyecto en cuestión, estas etapas son: . Reunión de planificación del sprint: Es un evento de tiempo variable donde se reúne todo el equipo de scrum para definir la funcionalidad y tiene como salida el objetivo del sprint.. . Scrum diario: Es un evento de 15 min donde el equipo de desarrollo sincroniza actividades y crea un plan para las próximas horas.. . Trabajo de desarrollo durante del sprint: Una vez el sprint está en curso debe asegurarse que no se realizan cambios que afecten el objetivo principal, no. 31.

(32) disminuyan los objetivos de calidad y el alcance del sprint podrá cambiarse y re-negociarse a medida se va desarrollando. . Revisión del sprint: Es donde el equipo de scrum inspecciona y crea un plan de mejoras para ejecutar durante el siguiente sprint.. Roles Scrum consiste en 3 diferentes roles que son: Product Owner: Es quien representa la voz del cliente y el responsable de desarrollar, mantener y priorizar las tareas del backlog. Scrum Master: Es quien se encarga de que el trabajo del equipo vaya bien siguiendo las bases de Scrum, además de remover los obstáculos que puedan afectar al desarrollo del equipo. Development Team Members: Son los encargados de escribir y probar el código. Características . Flexibilidad y adaptación a las cambiantes expectativas del cliente mitigando el riego y conservando la productividad y la calidad.. . Se hace uso de equipos auto dirigidos y auto organizados.. . Se realiza a diario una reunión de scrum, cuyo objetivo es tener retroalimentación de las tareas del equipo.. Ilustración 1. Marco de trabajo SCRUM. 32.

(33) 1.8. FACTIBILIDAD DE DESARROLLO 1.8.1. Factibilidad económica 1.8.1.1. Factibilidad económica – Software y hardware Tabla 1. Factibilidad económica - Software y hardware. Software. Herramientas. Nombre. Costo. Sistema Operativo –. $ 799999. Windows 10. Hardware. Elemento. Atom. Software libre. Git. Software libre. Composer. Software libre. Laravel. Software libre. Artisan. Software libre. MySQL. Software libre. Sub total. $799999. Nombre. Detalle. Costo. PC Escritorio. Lenovo. $ 1400000. ThinkCentre Procesador. Intel Core i5. Ram. 6 GB. Disco duro. 500 GB. Board. Intel DH61CR. Físico. Ítem. Sub total. $ 1400000. Valor mensual. Valor total. 33.

(34) Transporte. $ 126000. $ 756000. Fotocopias. $ 10000. $ 60000. Impresiones. $ 10000. $ 60000. Otros. $ 30000. $ 180000. Sub total. $ 1’056.000. 1.8.1.2. Factibilidad económica – Recursos humanos Tabla 2. Factibilidad económica - Recursos humanos. Nombre. Función. Valor hora. Cantidad. Sub total. Horas Rocio Rodríguez Guerrero. Tutora. $40000. 100. $4’000.000. Joan. Desarrollador. $20000. 600. $12’000.000. Sebastián Beltrán $16’000.000. Sub total. 1.8.1.3. Factibilidad económica – Total costos Tabla 3. Factibilidad económica - Total costos. Recursos. Valor. Total recursos humanos. $ 16’000.000. Total recursos software y hardware. $ 799.999. Total otros recursos. $ 1’056.000. Costo imprevistos. $ 4’000.000. Total. $ 21’855.999 34.

(35) 1.8.2. Factibilidad legal 1.8.2.1. Licencia de software El desarrollo en cuestión es acogido bajo la licencia de desarrollo de uso libre de PHP, Open source, al ser un lenguaje libre acota tres puntos principales, los cuales son: El uso libre de programar con PHP, el segundo es la posibilidad de modificar el código accediendo a su código fuente y, por último, pero no menos importante es hacer la distribución del programa modificado o no. 1.8.3. Factibilidad técnica El proyecto tiene como necesidades o requisitos a nivel de recursos las siguientes especificaciones: Tabla 4. Factibilidad técnica. Hardware. Software. Disco duro 500 GB. Sistema operativo. Procesador Core i3. Atom. Memoria Ram 6 GB. Composer. Board Dim ddr3. Laravel Artisan MySQL GIT. El planteamiento anterior nos muestra la viabilidad de este, al requerir software de fácil adquisición y en su mayoría de uso gratuito.. 35.

(36) 1.8.4. Factibilidad operativa Tabla 5.Factibilidad operativa. Integrantes del equipo. Función. Roció Rodríguez Guerrero. Tutora y asesora del. Perfil. proyecto Joan Sebastián Beltrán. Desarrollador. Carvajal. Estudiante de Tecnología en sistematización de datos con conocimientos en: Bases. de. datos. relacionales. Programación en: PHP, Js, HTML, CSS. Manejo. de. framework. Laravel. Según la tabla anterior el proyecto es factible operativamente, porque se cuenta tanto con el equipo como los conocimientos adecuados para su correcto desarrollo. 1.9. CRONOGRAMA DE ACTIVIDADES (POR ETAPAS) Etapa 1 cronograma de actividades. Ilustración 2. Etapa 1 cronograma de actividades. 36.

(37) Etapa 2 cronograma de actividades. Ilustración 3. Etapa 2 cronograma de actividades. Etapa 3 cronograma de actividades. Ilustración 4. Etapa 3 cronograma de actividades. 37.

(38) Etapa 4 cronograma de actividades. Ilustración 5. Etapa 4 cronograma de actividades. 2. ETAPA 2 – ANALISIS DEL PROYECTO 2.1. Identificación de los roles Al desarrollar la aplicación en conjunto con una persona destinada por la empresa para replicar las necesidades de la plataforma, la identificación de los roles se determina con el nombre de la persona responsable y una descripción acertada de sus funciones. Tabla 6. Roles. ROL. RESPONSABLE. DESCRIPCION. Scrum master. Joan Sebastián Beltrán. Es aquella persona que posee el conocimiento acerca de los procesos y se encarga de orientar al equipo. Product owner. Joan Sebastián Beltrán. Es aquella persona que actúa como intermediario entre el cliente y el equipo, teniendo la autoridad sobre los requisitos a implementar.. 38.

(39) Team. Joan Sebastián Beltrán. Es el grupo de personas que se encargan de la realización del proyecto en cuestión.. 2.2. Lista de actividades por rol Se realiza el listado de las actividades que debe llevar acabo cada uno de los integrantes del grupo según el rol que tenga asignado. Tabla 7. Lista de actividades. ROL. RESPONSABLE. Scrum master. Joan Sebastián Beltrán. ACTIVIDAD . Asegurarse que todos los integrantes del grupo sigan los principios y valores agiles, según las reglas y procesos de scrum.. . Aportar a las reuniones de Scrum.. . Remover los impedimentos u obstáculo que se le presenten al equipo, con el fin de conseguir el objetivo de cada sprint.. 39.

(40) Product owner. Joan Sebastián Beltrán. . Controlar y manejar los reportes, referentes a cuentas de resultados y responsabilidades en base al resultado final.. . Es el encargado de transferir la estrategia de producto a partir de una fragmentación adecuada del Product Backlog.. . Realizar la definición de los objetivos del proyecto.. Team. Joan Sebastián Beltrán. . Escoger los requisitos a los que se compromete a terminar en un sprint o iteración.. . Valorar la complejidad de cada tarea en la lista de requisitos priorizada del proyecto.. 40.

(41) . Trabajar de manera grupal para conseguir los objetivos del sprint o iteración.. 2.3. Producto Backlog Tabla 8. Producto Backlog ID. Descripción. Alias. Prioridad. Estimación. Responsable. Sprint. Joan. 2. esfuerzo (1-6) 1. Seleccionar los datos. Datos. de una solicitud de cita. evento. ALTA. 6. Sebastián. para un evento. 2. Beltrán. Enviar solicitud de cita para un evento.. Enviar. ALTA. 6. cita. Joan. 2. Sebastián Beltrán. 3. Seleccionar los datos de los usuario.. Datos. ALTA. 6. usuario. Joan. 3, 4, 5, 6. Sebastián. , 11, 12,. Beltrán. 13, 14, 15. 4. Validar la información. Validar de. presente. informaci. Sebastián. ón. Beltrán. en. los. formularios. 5. Validar inicio de sesión. Login. ALTA. ALTA. de usuarios.. 6. 6. Joan. 2, 3, 4, 6. Joan. 5,7, 8, 9,. Sebastián. 11, 12,. Beltrán. 13, 14, 15, 16. 41.

(42) 6. Tokenizar. y. información. validar para. el. olvido de contraseñas. 7. Personalización. de. productos.. 8. Agregar. producto. personalizado al carrito. Olvide mi. ALTA. 6. contraseñ. Sebastián. a. Beltrán. Personali. ALTA. 6. Sebastián. producto. Beltrán. Agregar a. ALTA. 6. carrito. Joan. 3, 5, 6. 5, 7, 8. 5, 7, 8. Sebastián Beltrán. Cambiar cantidad de producto.. 10. Joan. zar. de compras. 9. Joan. Cantidad. MEDIA. 2. Joan. de. Sebastián. producto. Beltrán. Eliminar producto del. Eliminar. carrito de compras. producto. ALTA. 4. Joan. 5, 7, 8. 5, 7, 8. Sebastián Beltrán. 11. Vaciar. carrito. de. compras. Vaciar. MEDIA. 4. carrito. Joan. 5, 7, 8. Sebastián Beltrán. 12. Validar él envió de el o. Enviar a. los productos a la casa.. casa. ALTA. 2. Joan. 5, 7, 8. Sebastián Beltrán. 13. Confirmar la compra de. Confirmar. los productos en el. compra. ALTA. 6. Confirmar. 5, 7, 8, 9. Sebastián. carrito. 14. Joan. Beltrán datos. del. usuario y valor de la. Confirmar. ALTA. 6. pago. Joan. 5, 7, 8, 9. Sebastián. compra con el costo. Beltrán. por envió. 15. Encriptar. datos. de. información del cliente e. información. Encriptar. ALTA. datos. 6. Joan Sebastián. del. Beltrán. pedido.. 42. 5, 7, 8, 9.

(43) 16. Enviar los datos del. Enviar. usuario y de la compra. compra. ALTA. 6. datos. del. Recibir. estado. de. la. datos de. Sebastián. transacción por parte. estado de. Beltrán. de. transacció. pasarela. de. pagos. 18. Beltrán. Recibir. la. ALTA. 6. el. panel. Editar. MEDIA. 5. usuario. desde. el. panel. Crear. ALTA. 6. usuario. Eliminar usuario de la. Eliminar. plataforma desde. usuario. el. Crear. agrupar los productos. categoría. el. 3, 14. ALTA. 6. Joan. 3, 14. Sebastián Beltrán. Crear categoría para desde. Joan. Beltrán. panel administrativo. 21. 3, 14. Sebastián. administrativo. 20. Joan Beltrán. Crear usuario según el rol. 10. Sebastián. administrativo. 19. Joan. n. Editar datos de usuario desde. 5, 7, 8, 9. Sebastián. a la pasarela de pagos. 17. Joan. ALTA. 6. Joan. 3, 11. Sebastián. panel. Beltrán. administrativo. 22. Editar categoría para. Editar. los productos en el. categoría. ALTA. 5. Beltrán. Eliminar categoría para. Eliminar. los productos en el. categoría. ALTA. 6. 3, 11. Beltrán. Crear producto para la. Crear. tienda desde el panel. producto. ALTA. 6. Joan. 3, 12. Sebastián. administrativo. 25. Joan Sebastián. panel administrativo. 24. 3, 11. Sebastián. panel administrativo. 23. Joan. Beltrán. Seleccionar imagen de. Imágenes. ALTA. muestra e imágenes de. de. Sebastián. producto. Beltrán. 43. 6. Joan. 3, 12.

(44) detalle. para. el. producto. 26. Editar producto para la. Editar. tienda desde el panel. producto. ALTA. 6. Eliminar desde. Beltrán. producto. Eliminar. panel. producto. el. ALTA. 6. por. los. Detalle de. ALTA. 6. pedidos. Joan. 3, 13. Sebastián. cliente. 29. 3, 12. Beltrán. Información de pedidos realizados. Joan Sebastián. administrativo. 28. 3, 12. Sebastián. administrativo. 27. Joan. Beltrán. Eliminar. pedido. despachados. por. empresa. desde. la. Eliminar. MEDIA. 5. pedido. Joan. 3, 13. Sebastián. el. Beltrán. panel administrativo. 30. Crear evento realizado. Crear. al. evento. cliente. desde. el. ALTA. 5. Beltrán. Editar evento realizado. Editar. al. evento. cliente. desde. el. ALTA. 5. Eliminar realizado desde. al. 3, 15. Beltrán. evento. Eliminar. cliente. evento. el. Joan Sebastián. panel administrativo. 32. 3, 15. Sebastián. panel administrativo. 31. Joan. ALTA. 5. Joan. 3, 15. Sebastián. panel. Beltrán. administrativo. 33. Selección del material. Selección. ALTA. 5. Joan. fotográfico por parte. fotos. Sebastián. del cliente según el. evento. Beltrán. 3, 4, 16. evento realizado. 34. Envió. del. material. fotográfico seleccionado por parte. Envió. ALTA. 5. Joan. fotos. Sebastián. evento. Beltrán. del cliente.. 44. 3, 4, 16.

(45) 35. Almacenamiento. de. información pertinente. Base de. ALTA. 6. datos. para el funcionamiento. Joan. 3, 4, 5,. Sebastián. 9, 10,. Beltrán. 11, 12,. de la plataforma.. 13, 14, 15, 16. 36. Creación de la interfaz. Interfaz. ALTA. 6. para todos los módulos de plataforma .. Joan. 1, 2, 3,. Sebastián. 4, 5, 6,. Beltrán. 7, 8, 9, 10, 11, 12, 14, 15, 16, 17. 37. Permitir el envío de. Envió de. información usuarios. MEDIA. 5. Joan. a. los. informaci. Sebastián. de. la. ón. Beltrán. 14. plataforma.. 2.4. Sprint o iteraciones Listado de trabajo a modalidad de Sprints para la realización de proyecto. Tabla 9. Sprints o iteraciones. Sprint. Nombre. Descripción. Sprint 1. Muestra de materia. Se realizan las pantallas. fotográfico.. de la plataforma que tiene como fin mostrar el trabajo de la empresa por medio de fotos a manera de collage.. Sprint 2. Solicitud de cita para foto. Se capturan los datos del. estudio.. cliente y del foto estudio a. 45.

(46) realizar para determinar cuándo se realizara la sesión. Sprint 3. Base de datos. Se almacenan los datos relevantes. para. funcionamiento. de. el la. plataforma e información de la empresa. Sprint 4. Registro de usuario.. Se capturan los datos de cliente. con. comprador. rol y. de se. comprueban, para luego ser almacenados. Sprint 5. Login.. Ingreso de los datos de usuario y validación para su ingreso a la plataforma según sea su rol.. Sprint 6. Olvide mi contraseña.. Permite. el. cambio. de. contraseña mediante el correo. del. usuario. registrado por medio de la tokenizacion. Sprint 7. Personalización producto.. Permite la personalización dependiendo del producto a comprar, desde cambiar únicamente el texto, hasta la carga de fotografías.. Sprint 8. Carrito de compras.. Permite agregar y cambiar la cantidad de productos. 46.

(47) personalizados al carrito de compras. Sprint 9. Compra del producto.. Realiza la encriptación de los datos referentes a la compra, para enviarlos a la plataforma de pasarela de pagos.. Sprint 10. Respuesta de transacción.. Se. reciben. los. provenientes. datos. de. la. pasarela de pago para determinar el estado de la transacción. del. pedido. realizado. Sprint 11. Gestión de categorías.. Se. crean,. eliminan. editan. las. y. categorías. referentes a los productos que se encuentra en la tienda en línea. Sprint 12. Gestión de productos.. Se. crean,. eliminan. editan. los. y. productos. referentes a la tienda en línea o los productos que únicamente disponibles. están de. forma. presencial. Sprint 13. Gestión de pedidos.. Se muestra el detalle de los pedidos realizados en la. empresa. correspondiente 47. y. su.

(48) personalización,. para. después ser eliminado. Sprint 14. Gestión de usuarios.. Se realiza la creación, edición y eliminación de usuarios con diferentes roles dado caso que sea requerido.. Sprint 15. Gestión eventos.. Se. crean,. eliminan. editan. los. y. eventos. realizados a los clientes con las fotos resultantes de estos. Sprint 16. Selección de foto evento.. Se realiza la selección de las fotos por parte del cliente con la posibilidad de guardar la selección y enviarla. una. vez. todas. las. terminada. Sprint 17. Direccionamiento general. Unifica direcciones plataforma acceso deseada.. 48. a. de. la. para. dar. la. terminal.

(49) 3. FASE 3 – DISEÑO DE LOS SPRINT 3.1. Sprint 1 Muestra de materia fotográfico Esta fase de sprint desarrolla una interfaz gráfica para mostrar el material fotográfico de la empresa a modalidad de collage. 3.1.1. Definición del sprint 1 Tabla 10. Definición Sprint 1. Sprint N° 1. Nombre. Muestra. de. materia. fotográfico. Objetivo. Mostrar los trabajos fotográficos realizados por la empresa.. Detalle Se implementa una interfaz en la cual la persona que ingrese a la plataforma pueda acceder a las diferentes terminales de muestra para ver el diferente trabajo fotográfico realizado por la empresa. Criterios de aceptación . La visualización de las imágenes debe ser optima sin llegar a cargar el estilo visual de la página.. . Las galerías de imágenes deberán responder al tamaño de los diferentes dispositivos.. 3.1.2. Tareas del Sprint 1 Tabla 11. Tareas del Sprint 1. Producto. Descripción de la tarea. Responsable. Estado. Backlog 36. Duración (en horas). Se realizó la agrupación de. Joan. todo el material fotográfica a. Sebastián. presentar en la plataforma y. Beltrán 49. Terminado. 10.

(50) se agrupo por categorías de eventos para mostrar. al. público.. 3.1.3. Diseño del Sprint 1 Para esta serie de pantallas se utiliza código html, css y js, con el fin de armar una estructura que pueda ser modificada según las dimensiones del dispositivo del cual se esté ingresando, para mostrar la información de forma clara.. Ilustración 6. Sprint Muestra de material fotográfico 1.. 50.

(51) Ilustración 7. Sprint Muestra de material fotográfico 2.. Ilustración 8. Sprint Muestra de material fotográfico 3.. 51.

(52) 3.1.4. Proceso de desarrollo de software Sprint 1 Al tener un diseño de página web especifico se decidió realizar todo el código html, css y js a mano, sin utilizar frameworks css que facilitarían la producción de pantallas, pero que no permitirían la personalización tan detallada de cada una de estas, por otra parte, también se evidencia el uso de APIs de terceros como lo es el chat de Facebook integrado a la plataforma. En el código html se integran las partes repetitivas de código por medio de etiquetas de Laravel como “include”, generando así solo una vez esta vista y trayéndose en cada una de las pantallas necesitadas, para este caso, es el logo de la empresa, sus vínculos a redes sociales y el footer de esta, por otra parte se crearon varias estructuras de fotos para poder alterar el orden de cada una en las diferentes galerías y darles a cada una diferentes aspectos manejando la recursividad del código css al utilizar el mismo para cada galería de fotos.. Ilustración 9. Sprint 1 HTML Galerías de fotos.. 52.

(53) El código css es llamado solo una vez para todas las galerías realizadas, puesto que la estructura html es la misma.. Ilustración 10. Sprint 1 CSS Galería de fotos.. El diseño web responsivo se hace por medio de etiquetas “media” que determinan las medidas del equipo en cuestión.. Ilustración 11. Sprint 1 Etiqueta media para web responsive.. 53.

(54) Ilustración 12. Sprint 1 CSS responsive.. 3.1.5. Diagrama de contexto Sprint 1. Ilustración 13. Diagrama de contexto Sprint 1. 54.