Sistema de ventas online para Ferretaller Hernández Hermanos

Texto completo

(1)SISTEMA DE VENTAS ONLINE PARA FERRETALLER HERNANDEZ HERMANOS. CRISTIAN ORLANDO HERNANDEZ QUINTERO. UNIVERSIDAD COOPERATIVA DE COLOMBIA FACULTAD DE INGENIERIAS PROGRAMA INGENIERIA DE SISTEMAS VILLAVICENCIO 2014.

(2) SISTEMA DE VENTAS ONLINE PARA LA FERRETALLER HERNANDEZ HERMANOS. CRISTIAN ORLANDO HERNANDEZ QUINTERO. Informe de práctica profesional presentado como opción de modalidad de grado para optar al título de ingeniero de sistemas.. Asesor, JUAN FAJARDO BARRERO Ingeniero de Sistemas. UNIVERSIDAD COOPERATIVA DE COLOMBIA PROGRAMA INGENIERIA DE SISTEMAS VILLAVICENCIO 2014.

(3) DIRECTIVOS. Cesar Augusto Pérez González Rector. Cesar Augusto Pérez Londoño Director Sede. Raúl Alarcón Bermúdez Decano Facultad de Ingeniería. María Lucrecia Ramírez Suarez Jefe de Programa.

(4) AGRADECIMIENTOS. Agradezco a Dios primordialmente por regalarme unos padres que con sus consejos, con sus actos y con su colaboración permanente me ayudan y dan aliento para lograr todo lo que me propongo en la vida, gracias a ellos recibí la mejor educación en el hogar, en el colegio y en esta excelente universidad. Agradezco a todos y cada uno de los profesores que me guiaron en mi paso como estudiante, Giovanny Javid Parrado, Juan Fajardo Barrero, Josue Guillermo Cucaita, Francy Yaneth Patiño, Piedad Chica Sosa, Rooselvert Díaz, María del Carmen Cuyares, Lina Zabala, Mónica Silva y a todos los que no están en la lista pero aportaron su conocimiento en sus respectivas áreas, con una mención especial al ingeniero Juan Fajardo Barrero por su disposición, su colaboración y extraordinaria ayuda para poder culminar este proyecto de grado. Agradezco a todos los compañeros que conocí en la universidad, ellos me aportaron conocimientos, vivencias y a los funcionarios administrativos que siempre fueron de gran ayuda..

(5) NOTA DE ACEPTACION. __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________. ________________________________________ DIRECTOR DEL PROYECTO. ________________________________________ JURADO. ________________________________________ JURADO. Villavicencio, 30 de julio de 2014.

(6) DEDICATORIA. A mis padres Ruth Carmenza Quintero Segura y Orlando Hernández Bahamón, gracias a sus esfuerzos, a sus consejos y su ayuda constante, hoy puedo cumplir esta gran meta. A mi hija María Isabella Hernández Fuentes por ser ese motor que me impulsa a sobrepasar los obstáculos día a día, por llegar a mi vida y enseñarme a ser una persona dedicada, organizada y por enseñarme el valor que tienen los hijos para los padres. A mi compañera de batallas Dana Katherine Fuentes Roa por ser esa persona que me ayuda, me entiende y me da fortaleza para seguir adelante todos los días, por los consejos y los cambios que he realizado gracias a ella..

(7) CONTENIDO. INTRODUCCION ................................................................................................... 16 1. ANALISIS ........................................................................................................ 17 1.1 DESCRIPCION GENERAL DE LA EMPRESA ............................................. 17 1.1.1 Localización ............................................................................................ 18 1.1.3 Sistemas de información actuales. ......................................................... 21 1.2. ANTECEDENTES........................................................................................ 21 1.3 SISTEMA ACTUAL ....................................................................................... 23 1.3.1 Restricciones del sistema actual. ........................................................... 24 1.4 DIAGNÓSTICO............................................................................................. 24 1.4.1 Diagnóstico de la infraestructura actual.................................................. 25 1.5 PLAN DE SISTEMAS ................................................................................... 25 1.5.1. Requerimientos Globales. .................................................................... 26 1.5.2 FACTORES CLAVES DEL ÉXITO ......................................................... 28 1.5.3 FUNCIONES .......................................................................................... 28 1.6 ORGANIZACIÓN DE LOS RECURSOS COMPUTACIONALES .................. 30 1.6.1 SOLUCIONES PROPUESTAS .......................................................... 30 1.6.2 LIMITACIONES DEL NUEVO SISTEMA ............................................ 31 1.7 METODOLOGIA INGENIERIL ...................................................................... 31 2. DISEÑO DEL SISTEMA .................................................................................... 34 2.1 CONCEPTOS BÁSICOS TECNOLÓGICOS Y TÉCNICOS ......................... 34 2.2 DOCUMENTO DE DISEÑO DEL SISTEMA ................................................. 42 2.2.1 Descripción técnica del sistema. ............................................................ 42 2.2.2 Alcances y delimitaciones .................................................................... 110 2.2.3 Configuración del software ................................................................... 111 2.2.4 Modelo de datos. .................................................................................. 112 2.2.5 Definición de atributos y entidades ....................................................... 113 2.3 DISEÑO DE LA INTERFAZ ........................................................................ 118 2.3.1 INTERFAZ WEB ................................................................................... 118 2.3.2 INTERFAZ MÓVIL ................................................................................ 134 3. ANALISIS ECONOMICO ................................................................................. 140 4. CONCLUSIONES ............................................................................................ 142 5. RECOMENDACIONES .................................................................................... 143 BIBLIOGRAFIA .................................................................................................... 144 ANEXOS .............................................................................................................. 145.

(8) LISTA DE TABLAS Pág. Tabla 1. Descripción actor administrador. .............................................................. 45 Tabla 2. Descripción actor Cliente ......................................................................... 45 Tabla 3. Descripción actor Cliente Registrado ...................................................... 45 Tabla 4. Descripción caso de uso Iniciar Sesión.................................................... 46 Tabla 5. Descripción caso de uso navegar por la tienda. ...................................... 47 Tabla 6. Descripción caso de uso ver detalles del producto .................................. 48 Tabla 7. Descripción caso de uso gestionar carrito. .............................................. 49 Tabla 8. Descripción caso de uso vaciar carrito..................................................... 50 Tabla 9. Descripción caso de uso registrarse ........................................................ 51 Tabla 10. Descripción caso de uso ver productos disponibles .............................. 52 Tabla 11. Descripción caso de uso realizar compra. ............................................. 53 Tabla 12. Descripción caso de uso Visualizar pedidos .......................................... 54 Tabla 13. Descripción caso de uso descargar reporte de compra ......................... 55 Tabla 14. Descripción caso de uso llamar vendedor ............................................. 56 Tabla 15. Descripción caso de uso visualizar Datos .............................................. 57 Tabla 16. Descripción caso de uso Actualizar Datos ............................................. 58 Tabla 17. Descripción caso de uso Cambiar contraseña ....................................... 59 Tabla 18. Descripción caso de uso Iniciar Sesión Administrador........................... 60 Tabla 19. Descripción caso de uso Visualizar Pedidos.......................................... 61 Tabla 20. Descripción caso de uso Generar reporte pedido .................................. 62 Tabla 21. Descripción caso de uso Enviar Reporte ............................................... 63 Tabla 22. Descripción caso de uso llamar al comprador ....................................... 64 Tabla 23. Descripción caso de uso cambiar estado del pedido ............................. 65 Tabla 24. Descripción caso de uso pedido entregado ........................................... 66 Tabla 25. Descripción caso de uso cancelar pedido .............................................. 67 Tabla 26. Descripción caso de uso visualizar pedidos entregados ........................ 68 Tabla 27. Descripción caso de uso visualizar pedidos cancelados........................ 69 Tabla 28. Descripción caso de uso ver detalles del pedido entregado .................. 70 Tabla 29. Descripción caso de uso administrar usuarios ....................................... 71 Tabla 30. Descripción caso de uso registrar usuarios ........................................... 72 Tabla 31. Descripción caso de uso visualizar usuarios.......................................... 73 Tabla 32. Descripción caso de uso administrar productos ..................................... 74 Tabla 33. Descripción caso de uso registrar nuevo producto ................................ 75 Tabla 34. Descripción caso de uso actualizar producto ......................................... 76 Tabla 35. Descripción caso de uso eliminar disponibilidad del producto ............... 77 Tabla 36. Descripción caso de uso administrar categorías .................................... 78 Tabla 37. Descripción caso de uso registrar nueva categoría ............................... 79 Tabla 38. Descripción caso de uso registrar nueva categoría ............................... 80 Tabla 39. Descripción caso de uso visualizar estadísticas .................................... 81 Tabla 40. Descripción caso de uso agregar imágenes al producto........................ 82 Tabla 41. Roles de los usuarios. .......................................................................... 113.

(9) Tabla 42. Diccionario de datos- Entidad pedidos ................................................. 113 Tabla 43. Diccionario de datos- Entidad líneas pedidos ...................................... 114 Tabla 44. Diccionario de datos- Entidad clientes ................................................. 114 Tabla 45. Diccionario de datos- Entidad admin ................................................... 115 Tabla 46. Diccionario de datos- Entidad productos.............................................. 115 Tabla 47. Diccionario de datos- Entidad imágenes productos ............................. 116 Tabla 48. Diccionario de datos- Entidad categoría .............................................. 117 Tabla 49. Diccionario de datos- Entidad registros................................................ 117 Tabla 50: Costos de producción .......................................................................... 140 Tabla 51.Costos de operación y/o administración (anuales) ............................... 140 Tabla 52.Costos de inversión............................................................................... 141 Tabla 53: Total Costos ......................................................................................... 141.

(10) LISTA DE FIGURAS Pág. Figura 1. Localización de la empresa .................................................................... 18 Figura 2. Fachada de la empresa ......................................................................... 19 Figura 3.Organigrama de la empresa .................................................................... 20 Figura4. Recursos computacionales ...................................................................... 25 Figura5. Explicación metodología XP .................................................................... 33 Figura6. Sistema de información. .......................................................................... 34 Figura7. Ejemplo de UML. ..................................................................................... 36 Figura8. Diagrama de casos de uso clientes del sistema de e-commerce ............ 43 Figura9. Diagrama de casos de uso administrador del sistema e-commerce ........ 44 Figura10. Diagrama de secuencia Navegar por tienda .......................................... 83 Figura11. Diagrama de secuencia gestionar carrito ............................................... 84 Figura12. Diagrama de secuencia detalles del producto ....................................... 84 Figura13. Diagrama de secuencia productos disponibles ...................................... 85 Figura14. Diagrama de secuencia Iniciar sesión ................................................... 85 Figura15. Diagrama de secuencia Actualizar Datos .............................................. 86 Figura16. Diagrama de secuencia cambiar contraseña ......................................... 87 Figura17. Diagrama de secuencia descargar reporte compra ............................... 88 Figura18. Diagrama de secuencia descargar reporte compra ............................... 89 Figura19. Diagrama de secuencia Registrarse ...................................................... 89 Figura20. Diagrama de secuencia descargar reporte compra ............................... 90 Figura21. Diagrama de secuencia visualizar datos................................................ 91 Figura22. Diagrama de secuencia visualizar pedidos ............................................ 91 Figura23. Diagrama de secuencia Iniciar sesión ................................................... 92 Figura24. Diagrama de secuencia Generar reporte pedido ................................... 92 Figura25.Diagrama de secuencia llamar vendedor................................................ 93 Figura26. Diagrama de secuencia pedido entregado ............................................ 94 Figura27. Diagrama de secuencia registrar nueva categoría ................................ 95 Figura28. Diagrama de secuencia visualizar pedidos ............................................ 96 Figura29. Diagrama de secuencia actualizar producto .......................................... 97 Figura30. Diagrama de secuencia agregar imagen al producto ............................ 98 Figura31.Diagrama de secuencia cambiar estado pedido ..................................... 99 Figura32. Diagrama de secuencia eliminar categoría .......................................... 100 Figura33. Diagrama de secuencia eliminar disponibilidad del producto .............. 101 Figura34. Diagrama de secuencia enviar reporte pedido .................................... 102 Figura35. Diagrama de secuencia pedido cancelado .......................................... 103 Figura36. Diagrama de secuencia registrar nuevo producto ............................... 104 Figura37. Diagrama de secuencia registrar usuarios ........................................... 105 Figura38. Diagrama de secuencia ver detalles pedido ........................................ 106 Figura39. Diagrama de secuencia visualizar pedidos Cancelados ...................... 107 Figura40. Diagrama de secuencia visualizar pedidos Entregados....................... 108 Figura41. Diagrama de secuencia visualizar usuarios ......................................... 109.

(11) Figura42. Diagrama de secuencia visualizar usuarios ......................................... 112 Figura43. Ingreso al panel de administración. ..................................................... 118 Figura44. Menú principal panel administrador ..................................................... 118 Figura45. Opciones Pedidos – segundo ítem panel de administración. .............. 119 Figura46. Opciones clientes- tercer ítem panel de administración....................... 120 Figura47. Opciones productos- cuarto ítem panel de administración. ................. 120 Figura48. Opciones categoría- quinto ítem panel de administración. .................. 121 Figura49. Estadísticas- sexto ítem panel de administración. ............................... 121 Figura50. Visualizar pedidos ................................................................................ 122 Figura51.Generar reporte pedido......................................................................... 122 Figura52. Enviar pedido. ...................................................................................... 123 Figura53. Pedidos Cancelados. ........................................................................... 123 Figura54. Pedidos Entregados............................................................................. 124 Figura55. Detalles pedidos entregados ............................................................... 124 Figura56. Registrar Clientes ................................................................................ 125 Figura57. Visualizar clientes registrados ............................................................. 125 Figura58. Registrar producto ............................................................................... 126 Figura59.Actualizar productos ............................................................................. 127 Figura60. Actualizar productos ............................................................................ 127 Figura61Productos Inactivos ............................................................................... 127 Figura62. Agregar imagen a producto ................................................................. 128 Figura63. Agregar imagen a producto ................................................................. 128 Figura64. Interfaz principal tienda e-commerce ................................................... 129 Figura65. Interfaz gestionar carrito ...................................................................... 129 Figura66. Interfaz realizar pedido. ....................................................................... 130 Figura67. Mensaje pedido realizado .................................................................... 130 Figura68. Ver detalles del producto ..................................................................... 130 Figura69. Panel clientes ...................................................................................... 131 Figura70. Pedidos panel clientes ......................................................................... 131 Figura71. Datos panel clientes............................................................................. 132 Figura72. Actualizar datos panel clientes ............................................................ 132 Figura73. Cambiar contraseña panel clientes ...................................................... 133 Figura74. Cambiar contraseña panel clientes ...................................................... 133 Figura75. Ingreso al panel de administración. ..................................................... 134 Figura76. Menú principal panel administrador ..................................................... 135 Figura77. Opciones Pedidos – segundo ítem panel de administración. .............. 136 Figura78. Opciones clientes- tercer ítem panel de administración....................... 136 Figura79. Opciones productos- cuarto ítem panel de administración. ................. 137 Figura80. Opciones categoría- quinto ítem panel de administración. .................. 137 Figura81. Estadísticas- sexto ítem panel de administración. ............................... 138 Figura82. Registrar Clientes ................................................................................ 138 Figura83. Registrar producto ............................................................................... 139 Figura84. Pantallazo base de datos productos .................................................... 145 Figura85. Pantallazo sistema de ventas actual .................................................... 146 Figura86. Pantallazo factura. ............................................................................... 147.

(12) Figura87. Infraestructura tecnológica. .................................................................. 148 Figura88. Infraestructura tecnológica. .................................................................. 149 Figura89. Infraestructura tecnológica. .................................................................. 150.

(13) LISTA DE ANEXOS Pág. Anexo A.. Sistema Actual. 145. Anexo B.. Infraestructura tecnológica.. 148.

(14) GLOSARIO ARCHIVO: Un archivo es un elemento de información conformado por un conjunto de registros. Estos registros a su vez están compuestos por una serie de caracteres. ATRIBUTOS: Descripción de las propiedades que tiene cada instancia de entidad. Cada atributo está asociado a un valor. BASE DE DATOS: Colección de datos y/o documentos digitales, que pueden ser hom.ogéneos o no, que disponen de sistemas de gestión de bases de datos (relacionales o documentales) y un conjunto de aplicaciones que hacen posible su publicación, integración y consulta dentro o fuera de Internet. CLAVE PRIMARIA: Clave candidata que se escoge para identificar sus tuplas de modo único. Ya que una relación no tiene tuplas duplicadas, siempre hay una clave candidata y, por lo tanto, la relación siempre tiene clave primaria. DIAGRAMA ENTIDAD-RELACIÓN: Son un lenguaje gráfico para describir conceptos, e información acerca del sistema de información y el software que lo automatiza. E-COMMERCE: Denominado comercio electrónico supone el desarrollo de una nueva forma de comercio vinculada a una tecnología, la red Internet. Internet tiene una gran utilidad para la empresa, sirve para identificar proveedores, seleccionar productos y servicios y, también, para comprar y vender y por tanto, para realizar, transacciones económicas de distinta naturaleza.1 FRONTEND: Los frontends tienden a ser programadores, pero hay diseñadores genios que también hacen frontend. Son los encargados de maquetar la estructura semántica del contenido (HTML), codificar el diseño en hojas de estilo (CSS) y agregar la interacción con el usuario (JavaScript). 2 LENGUAJE DE CONSULTA ESTRUCTURADO (SQL): Es un lenguaje declarativo de acceso a bases de datos relacionales que permite especificar diversos tipos de operaciones sobre las mismas. 1 2. http://video.anetcom.es/editorial/GUIA_E-COMMERCE_BR.pdf Htl,tp://www.cristalab.com/blog/que-significa-backend-y-frontend-en-el-diseno-web-c106224l/.

(15) MODELO DE DATOS: Es un sistema formal y abstracto que permite describir los datos de acuerdo con reglas y convenios predefinidos. MYSQL: Es un sistema de gestión bases de datos relacional, multihilo y multiusuario con más de seis millones de instalaciones. MySQL AB desde enero de 2008 una subsidiaria de Sun Microsystems y ésta a su vez de Oracle Corporation desde abril de 2009 desarrolla MySQL como software libre en un esquema de licenciamiento dual.3 PEDIDO: Registros de los pedidos realizados por los clientes. m PHP: Es un lenguaje de script interpretado en el lado del servidor utilizado para la generación de páginas Web dinámicas, y ejecutado en el servidor. REGISTRO: Un registro es un conjunto de campos que contienen los datos que pertenecen a una misma repetición de entidad. Se le asigna automáticamente un número consecutivo (número de registro) que en ocasiones es usado como índice aunque lo normal y práctico es asignarle a cada registro un campo clave para su búsqueda. RESPONSIVE DESING: Corresponde a una tendencia de creación de páginas web que pueden ser visualizadas perfectamente en todo tipo de dispositivos, desde ordenadores de escritorio hasta Smartphone o tabletas. Con este tipo de diseño no necesitas tener una versión para cada dispositivo, una sola web se adapta a todos ellos.4 REPORTE: Genera estadísticas y consultas en archivos .pdf.. 3 4. http://es.wikipedia.org/wiki/MySQL http://www.maestrosdelweb.com/editorial/que-es-responsive-web-design/.

(16) INTRODUCCION. El comercio electrónico o e-commerce supone el desarrollo de una nueva forma de comercio vinculada a una tecnología, la red de Internet. Internet tiene una gran utilidad para la empresa, sirve para identificar posibles clientes, seleccionar productos y servicios y, también para comprar y vender. El comercio electrónico ha venido en alza, puesto que los consumidores ya no temen comprar sus productos por internet ya que esta es una forma rápida, segura y eficaz de adquirir bienes y servicios. Ferretaller Hernández Hermanos es una empresa Acacireña productora y comercializadora de bienes y servicios para la construcción y la industria metalmecánica del municipio de Acacias, ha querido innovar y ser la primera empresa del sector en vender sus productos en internet. Basado en las nuevas tecnologías, se planteó el desarrollo de un sistema de ventas online, que les permita a las personas acceder a los productos de la empresa de una forma fácil y sencilla, realizar pedidos de los productos y tener una relación entre cliente y empresa más rápida y eficaz. Este proyecto busca la creación de un nuevo nicho de mercado y posibles clientes, tratando de acaparar la mayor cantidad de personas, con una plataforma ágil, multidispositivo, fácil de utilizar, rápida y segura. El proyecto adoptó la metodología ágil XP, que permite una interacción entre desarrollador y la persona que requiere el sistema, se realizó todo el proceso de análisis, diseño y desarrollo de la aplicación, dando como resultado el sistema de ventas online para Ferretaller Hernández Hermanos.. 16.

(17) 1. ANALISIS. El proceso de levantamiento de información se llevó a cabo en conversaciones informales con el gerente de la empresa, la necesidad principal de la empresa era ampliar la forma en cómo se comercializaban sus productos, surgió la idea de crear una plataforma segura para vender productos vía internet.. 1.1 DESCRIPCION GENERAL DE LA EMPRESA MISION Proveer soluciones integrales a la demanda de bienes y servicios para el sector de la construcción y la industria metalmecánica, ofreciendo a nuestros clientes materiales fabricados bajo normas y estándares de calidad acompañados de excelente atención, asesoría y entrega. VISION En el año 2020, Ferretaller Hernández Hermanos será la mejor y más eficiente empresa productora y comercializadora de bienes y servicios para la construcción y la industria metalmecánica del municipio de Acacias; desarrollando su acción dotada de modernas tecnologías y maquinas CNC, en un clima organizacional caracterizado por la cualificación permanente del talento humano y la búsqueda de la satisfacción total de nuestros clientes. POLITICA DE CALIDAD FERRETALLER HERNANDEZ HERMANOS, solo distribuye materiales certificados y fabricados con los más altos estándares de calidad; los servicios que ofrecemos son realizados pensando en los requerimientos y necesidades de nuestros clientes, para ello contamos con talento humano capacitado y competente que labora en un clima organizacional pensado para asegurar la calidad de nuestros procesos y calidad de vida para quienes participan de la actividad de nuestra empresa. 5. 5. Información suministrada por los directivos de Ferretaller Hernández Hermanos.. 17.

(18) 1.1.1 Localización. La Ferretería Hernández Hermanos se encuentra ubicada en la calle 15 #14-81 Barrio Cooperativo en la ciudad de Acacias-Meta. Figura 1. Localización de la empresa. Fuente: https://www.google.com/maps/preview. 18.

(19) Figura 2. Fachada de la empresa. Fuente: https://www.google.com/maps/preview. 19.

(20) 1.1.2 Organización de la empresa Figura 3.Organigrama de la empresa .. Fuente: Archivos de la empresa.. 20.

(21) 1.1.3 Sistemas de información actuales.. Actualmente Ferretaller Hernández Hermanos, cuenta con un paquete de ofimática de Microsoft versión 2007, en un archivo de Excel se guarda la base de datos de los artículos que se comercializan, su precio y el proveedor, esta base de datos puede ser modificada por el gerente de la empresa, y es compartida como archivo de lectura para los vendedores. Ferretaller Hernández Hermanos cuenta con un sistema de información de escritorio que sirve para la parte contable y de ventas presenciales, el sistema fue comprado por la empresa en el año 2012.. 1.2. ANTECEDENTES Se conocen sistemas de comercio electrónico como: . A nivel internacional :. -OpenCart Es un sistema de comercio electrónico de código abierto (open source) basado en PHP para tiendas de venta online. Una solución de comercio electrónico robusta para comerciantes de Internet con la capacidad de crear su propio negocio en línea y obtener un comercio electrónico con un coste mínimo. OpenCart está diseñado con unas características muy completas, fácil de usar, potente, rápida y con un interfaz visualmente atractivo. Su principal creador y actual desarrollador de todo el proyecto es el inglés Daniel Kerr, al cual se le debe agradecer esta magnífica tienda online que ha puesto gentilmente al alcance de todos y hoy en día según muchas valoraciones y estadísticas que hay en Internet es quizás la mejor (o una de las mejores) de entre todas las existentes de código abierto, comparando rapidez, sencillez y eficacia. 6. 6. http://www.opencartspanish.com/index.php/quees. 21.

(22) -Prestashop De código abierto. Es compatible con las pasarelas de pago como DirecPay, Google Checkout , Authorize.Net , Moneybookers , PayPal , pagos de PayPal Pro (directos) y EBANX Pedido a través de sus respectivas APIs. Los módulos de pago adicionales se ofrecen en el mercado. PrestaShop está disponible bajo la Licencia Open Software y lanzado oficialmente en agosto de 2007. El software, que está escrito en PHP y basado en el Smarty motor de plantillas, es utilizado actualmente por 165.000 tiendas en todo el mundo. MySQL es el motor de base de datos predeterminada. PrestaShop es el ganador de los 2010 y 2011 Mejores códigos abiertos premios Business Application. 7 . A nivel nacional:. - E-Commerce Colombia Empresa Colombiana que ofrece un sistema de comercio electrónico con las siguientes características: La plataforma ecommerce-colombia le permite abrir su negocio en internet en tiempo record sin tener que contratar servicios con diferentes proveedores, ya no tiene que invertir en una infraestructura tecnológica que deba actualizar para no quedarse relegado en el tiempo, dedíquese a vender, nosotros trabajamos todos los días en el desarrollo de nuevas funcionalidades y mejoras a la plataforma para que sus objetivos comerciales se cumplan y sus clientes tengan una experiencia positiva y sientan que su tienda pertenece a gran empresa que denota confianza, solidez y respaldo. *Administración de Productos *Verificación del pedido *Personalización 8. 7 8. http://www.mxw.es/prestashop/ http://www.ecommerce-colombia.com/caracteristicas.html. 22.

(23) -Siembraviva.com Empresa Colombiana que ofrece un sistema de comercio electrónico con la siguiente descripción: A través de la página de SiembraViva.com es posible elegir frutas, hortalizas y verduras, cereales y granos, todos orgánicos, muy frescos y con un alto estándar de calidad y producción. El servicio también ofrece la posibilidad de comprar canastas en combo, que ya traen una variedad de productos incluidos. El proceso de compra a través de Siembra Viva es básico. Primero, debe registrarse, los datos de contacto que piden son básicos, como nombre, teléfono y dirección. Luego, selecciona los productos en los que esté interesado, los agrega al carrito de compra, y finaliza pagando su pedido. Hay unas fechas límites para realizar los pedidos y allí mismo le informan el tiempo que se tardará en recibirlo. La aplicación también permite conocer la información de cada agricultor, y ver fotos y videos de los cultivos. Así, el consumidor siempre sabrá de dónde viene lo que sirve en su mesa y le da a su familia. El servicio está actualmente activo en las ciudades de Medellín y Pereira, y tiene más de 35 productores y cultivos georreferenciados. 9 . A nivel regional. -Topalxe.co: Sistema de ventas online, que le permite al usuario realizar cotizaciones, gestionar su carrito de compras, revisar novedades y ver datos representativos de la empresa. 10. 1.3 SISTEMA ACTUAL La desaparición de las distancias en las comunicaciones, desde la popularización de internet, justifica la aparición de sitios web ya no sólo para la obtención de información sino también para la realización de transacciones de compra-venta o lo que técnicamente se denomina e-commerce.. 9. http://www.enter.co/cultura-digital/colombia-digital/siembra-viva-tienda/ http://www.topalxe.co/. 10. 23.

(24) Actualmente Ferretaller Hernández Hermanos no cuenta con un sistema de ventas en línea en su organización, todas las ventas se realizan localmente y se quiere ampliar el alcance de la empresa a otros municipios y departamentos con una plataforma web que permita la comercialización de productos de ferretería por internet con una plataforma amigable y sencilla de usar, sin tener la necesidad de que los clientes vengan a ellos. El proceso de ventas se realiza de forma presencial, los usuario llegan a la tienda central y compran sus productos, los datos de los productos están alojados en una base de datos en Excel y son accesibles a los empleados en modo de lectura, no se manejan privilegios y es muy fácil exponer datos confidenciales de los productos, como el nombre del proveedor, el precio neto del producto. Cuando un usuario realiza la compra, para la impresión de la factura se utiliza un sistema que tiene almacenado los datos de los productos y de los clientes, si es un nuevo cliente se digitan los datos y se expide la factura, si ya está el usuario registrado en la base de datos solo se digita el número de cedula y se expide la factura. (Ver Anexo A). 1.3.1 Restricciones del sistema actual. Actualmente Ferretaller Hernández Hermanos no cuenta con un sistema de venta por internet, todos los procesos son llevados a mano localmente o por un sistema de ventas ya desactualizado y de poco uso por los empleados de la organización. Hay que pensar en las ventajas que internet implica para la empresa que le permite ofrecer sus productos de forma inmediata en cualquier parte del mundo, sin unos horarios de tienda ya que cualquiera puede visitar la tienda las 24 horas día, lo que hace imprescindible para una tienda moderna disponer de este tipo de herramientas para realizar su actividad, ya que los factores de perdida de información, falta de seguridad, poca usabilidad, difícil manejo en los sistemas locales afectan el funcionamiento del proceso de venta de productos.. 1.4 DIAGNÓSTICO En su expansión de mercado y posibles nuevos clientes Ferretaller Hernández Hermanos ha visto como una necesidad primordial apoyándose de las nuevas tecnologías, implementar un sistema de comercio electrónico que permita comercializar los productos de la organización en internet, para que por medio de 24.

(25) este sistema se llegue a un mayor número de personas y así conseguir nuevos clientes y expandir sus productos a nivel nacional. 1.4.1 Diagnóstico de la infraestructura actual. Ferretaller Hernández Hermanos cuenta con una sede principal de ventas y administrativa ubicadas en la Calle 15 # 20-81 Acacias-Meta cuenta con una zona de venta para los clientes, una de producción de corte de láminas y formación de estructuras en lámina, en el segundo piso oficinas administrativas del gerente general y el contador y una sala de juntas. Ferretaller Hernández Hermanos cuenta con una sede para la elaboración de estructuras metálicas, trabajo de soldadura, zona de bodegaje que está ubicada en la Calle 16 No 21-27 Acacias-Meta Ferretaller Hernández Hermanos en infraestructura tecnológica cuenta con 4 computadores de escritorio y un servidor DELL donde se encuentra alojada la información de los productos con los precios, la red de datos es proporcionada por la empresa claro y dispone de un tráfico de subida y bajada de 5mb. (Ver Anexo B.) Figura4. Recursos computacionales. Fuente: Foto tomada por el investigador 1.5 PLAN DE SISTEMAS Para la implementación y puesta en marcha del sistema con el cual se dará solución al planteamiento del problema, se estipularon ciertas técnicas de capacitación dictadas a los usuarios del programa, manejando aspectos de interfaz, acceso a la base de datos, modificación de la misma, formas de acceder. 25.

(26) por cuentas de usuario, explicación de cada una de las restricciones a cada cuenta.. 1.5.1. Requerimientos Globales.. Requerimientos Funcionales: Requerimiento. Especificación.. PANEL DE ADMINISTRADOR Administrar usuarios. Permite crear y visualizar usuarios.. Administrar productos. Permite crear, actualizar y eliminar productos.. Agregar imágenes a producto. Permite agregar nuevas imágenes a los productos.. Administrar Categorías. Permite crear y eliminar categorías.. Visualizar pedidos. Permite visualizar los nuevos pedidos del sistema.. Generar reportes de venta. Permite generar un reporte en pdf del detalle del pedido.. Enviar reporte de venta al comprador. Permite enviar vía email el reporte del pedido.. Cancelar pedidos. Permite cancelar el pedido.. Visualizar pedidos cancelados. Permite la visualización de los pedidos cancelados.. Visualizar pedidos entregados. Permite la visualización de los pedidos. 26.

(27) entregados y el detalle de ese pedido. Visualizar estadísticas. Permite visualizar las estadísticas de los 10 mejores clientes que realizaron más compras en el sistema, permite la visualización de los productos más comprados en el sistema. PANEL DE CLIENTES. Cambiar contraseña. Permite cambiar la contraseña de acceso al panel de clientes.. Visualizar pedido. Permite visualizar los pedidos realizados, verificar su estado y los datos del pedido.. Administrar datos. Permite al cliente visualizar los datos registrados en el sistema y actualizar los datos. SISTEMA DE VENTAS. Administrar carrito. Le permite agregar o eliminar productos del carrito de compras.. Realizar pedido. Permite realizar el pedido de los productos que ya se encuentren en el carrito de compras.. Registrarse. Permite registrarse en el sistema para poder realizar pedidos.. Requerimientos no funcionales: Accesibilidad. El sistema de ventas online para Ferretaller Hernández Hermanos debe ser accesible desde cualquier Smartphone, tableta o computador.. 27.

(28) Funcionalidad. El sistema de ventas online para Ferretaller Hernández Hermanos debe ser un sistema que ofrezca una funcionalidad las 24 horas del día.. Criterios de rendimiento y calidad. El sistema de ventas online para Ferretaller Hernández Hermanos debe ser un sistema rápido, fácil de usar, entendible a los usuarios.. Seguridad Se deben manejar seguridad en el sistema web, acceso por privilegios, manejos de sesiones, evitar vulnerabilidades que pongan en peligro la información de la empresa.. 1.5.2 FACTORES CLAVES DEL ÉXITO Capacitar a los administradores del sistema para que puedan hacer cambios y tener control de los diferentes módulos. Interfaz agradable para los administradores y usuarios, entendible, de fácil manejo, para que se facilite el uso del sistema. 1.5.3 FUNCIONES . Función de planeación, coordinación y control.. Una vez finalizado el proceso de desarrollo del sistema de ventas online para Ferretaller Hernández Hermanos, se hace entrega de la aplicación al gerente y al ingeniero de sistemas de la empresa, con el fin de que ellos administren el sistema. Los gastos operacionales de la aplicación web deben ser asumidos por la empresa.  Función Operativa La aplicación es funcional en un servidor web, está compuesta por módulos pensados en cada usuario que interactúa con la empresa. El módulo de clientes registrados: Este módulo le permite a los clientes que se registren en el sistema, acceder a los pedidos que han realizado, ver el estado del. 28.

(29) pedido, los detalles del pedido, llamar a pedir información sobre el pedido desde la página a través de skype, cambiar sus datos personales y su contraseña de acceso, es un panel donde el cliente tendrá el histórico de sus pedidos. El módulo de administración: Este módulo permite administrar todo el sistema, la persona encargada de este módulo tendrá acceso a los pedidos, pedidos entregados y cancelados con sus respectivos detalles, podrá generar reportes y enviarlos por correo desde la misma aplicación, administrar los productos, las categorías y visualizar las estadísticas de la página. El módulo de la tienda: Este módulo le permite a las personas que ingresen a la tienda virtual visualizar los productos disponibles, gestionar su carrito de compras y registrarse en caso de que no hagan parte de los clientes del sistema. . Función Financiera. El desarrollo, las pruebas, las correcciones en etapa de desarrollo no acarrean costos para Ferretaller Hernández Hermanos; pero en la implementación y puesta en marcha de la aplicación es indispensable adquirir un servicio de hosting y dominio por parte de la empresa, el investigador deja claro que no se asumirán estos costos. Por lo cual se le informo al gerente de la empresa de la situación y están dispuestos a asumir dicha inversión. . Función Asesoría. El investigador del proyecto dará capacitaciones tanto al ingeniero de sistema de la empresa, como a las personas encargadas de administrarlo, para que conozcan el funcionamiento de la aplicación y realicen pruebas al sistema. La capacitación se dará en la sala de juntas de la empresa con un videobeam donde se les expondrá la aplicación, las ventajas que trae para la organización y los diferentes módulos. . Función Técnica. Para que la aplicación funcione de manera adecuada es recomendable utilizar computadores con las siguientes características: - Sistema Operativo Windows XP, 7, 8. - Sistema Operativo Mac. - Sistema Operativo Linux y otras versiones. 29.

(30) -. Sistema operativo Android, Ios o Windows pone para la versión móvil. 512 MB de Memoria RAM. 20 GB de Disco Duro. Procesador de 1.8 GHz Navegador Web Mozilla Firefox, Google Chrome, Opera y Internet Explorer 9. Reproductor de Multimedia Adobe Flash Player. Conexión a internet mayor de 1Mb.. . Función Administrativa. -. Para la función de crear los administradores, de alimentar, consultar la información de la base de datos y de interactuar con la aplicación, la empresa asignará la persona que se encargará. El mantenimiento y los costos de operación de la aplicación como son el arrendamiento del hosting y el de soporte técnico lo realizará el área administrativa de Ferretaller Hernández Hermanos.. 1.6 ORGANIZACIÓN DE LOS RECURSOS COMPUTACIONALES En Ferretaller Hernández Hermanos, el administrador ingresa los datos de los productos disponibles en una base de datos en Excel se encuentran dos computadores disponibles para los empleados de las siguientes características: Windows 7, memoria RAM de 2 Gb, disco duro de 500Gb, caja atx, monitor de 19” y multilector de tarjetas. 1.6.1 SOLUCIONES PROPUESTAS Se implementará un sistema web para vender productos en línea, con paneles de administración para los usuarios y el personal encargado de las ventas en línea. El panel del administrador del sistema podrá realizar las siguientes operaciones:  Registro de clientes  Registro de ventas  Posibilidad de administrar los productos, categorías, imágenes, clientes, pedidos  Visualizar estadísticas de que producto es el más vendido y los mejores clientes de la plataforma. El panel de usuarios del sistema tendrá opciones para los usuarios que se registren en el sistema como:. 30.

(31)   . Actualizar sus datos Cambiar contraseñas Visualizar los pedidos realizados y ver en qué estado se encuentran.. 1.6.2 LIMITACIONES DEL NUEVO SISTEMA La implementación de este sistema está sujeta a la aprobación del gerente de la empresa dependiendo si el sistema cumple con los requerimientos. A futuro se piensa implementar un método de pago en línea en el sistema, por el momento se hará verificación por correo electrónico y por llamadas a los clientes.. 1.7 METODOLOGIA INGENIERIL La alternativa metodológica que se manejó para el desarrollo de este proyecto es el de la programación extrema, ya que gracias a este modelo, se puede tener una constante comunicación con el cliente y de esa forma, entender que es lo que necesita verdaderamente, de tal forma que al final quede satisfecho con el producto final. Igualmente, se maximiza el trabajo en equipo, aun mas, involucrando al cliente en el desarrollo del proyecto, para lograr una satisfacción con la aplicación ya terminada. La programación extrema o extreme Programming (XP) es una metodología de desarrollo de la ingeniería de software formulada por Kent Beck, autor del primer libro sobre la materia, Extreme Programming Explained: Embrace Change (1999). Es el más destacado de los procesos ágiles de desarrollo de software. Al igual que éstos, la programación extrema se diferencia de las metodologías tradicionales principalmente en que pone más énfasis en la adaptabilidad que en la previsibilidad. Los defensores de la XP consideran que los cambios de requisitos sobre la marcha son un aspecto natural, inevitable e incluso deseable del desarrollo de proyectos. Creen que ser capaz de adaptarse a los cambios de requisitos en cualquier punto de la vida del proyecto es una aproximación mejor y más realista que intentar definir todos los requisitos al comienzo del proyecto e invertir esfuerzos después en controlar los cambios en los requisitos. Se puede considerar la programación extrema como la adopción de las mejores metodologías de desarrollo de acuerdo a lo que se pretende llevar a cabo con el proyecto, y aplicarlo de manera dinámica durante el ciclo de vida del software.. 31.

(32) FASE 1: PLANIFICACIÓN DEL PROYECTO  .  . Historias de usuario: levantamiento de la información. Release planning: Es una planificación donde los desarrolladores y clientes establecen los tiempos de implementación ideales de las historias de usuario. Iteraciones: Realizar prototipos sencillos. Velocidad del proyecto: Una medida que representa la rapidez con la que se desarrolla el proyecto.. FASE 2: DISEÑO    . Diseño simple: Diagramas de casos de usos. Glosario de términos: Usar glosarios de términos y un correcta especificación de los nombres de métodos y clases. Riesgos: Problemas potenciales durante el diseño. Funcionalidad extra: No realizar funcionalidad extras al programa.. FASE 3: CODIFICACIÓN . Codificar lo plasmado en el diseño.. FASE 4: PRUEBAS . 11. Test de aceptación: Se realizan pruebas al software. 11. http://www.willydev.net/descargas/prev/ExplicaXP.pdf. 32.

(33) Figura5. Explicación metodología XP. Fuente: http://www.slideshare.net/edgarespinoza/programacion-extrema. 33.

(34) 2. DISEÑO DEL SISTEMA 2.1 CONCEPTOS BÁSICOS TECNOLÓGICOS Y TÉCNICOS . SISTEMAS DE INFORMACION. Es el conjunto formal de procesos que operando sobre una colección de datos estructurada de acuerdo con las necesidades de una empresa, recopila, elabora y distribuye la información necesaria para la operación de dicha empresa y para las actividades de dirección y control correspondientes, apoyando, al menos en parte, los procesos de toma de decisiones necesarios para desempeñar las funciones de negocio de la empresa de acuerdo con su estrategia. 12 Figura6. Sistema de información.. Fuente: http://contenidosdigitales.ulp.edu.ar/exe/sistemadeinfo/actividad_12.html Un sistema de información se caracteriza por:   12. Capacidad de coleccionar, almacenar y extraer información. Identificar y definir objetivos.. http://libros.metabiblioteca.org/bitstream/001/193/8/978-84-693-9894-4.pdf. 34.

(35)  . Analizar la relación de los datos. Facilitar la selección y transmisión de datos. . UML. El Lenguaje de Modelado Unificado (UML:Unified Modeling Language) es la sucesión de una serie de métodos de análisis y diseño orientadas a objetos que aparecen a fines de los 80's y principios de los 90s.UML es llamado un lenguaje de modelado, no un método. Los métodos consisten de ambos de un lenguaje de modelado y de un proceso. El UML, fusiona los conceptos de la orientación a objetos aportados por Booch, OMT y OOSE (Booch, G. et al., 1999). UML incrementa la capacidad de lo que se puede hacer con otros métodos de análisis y diseño orientados a objetos. Los autores de UML apuntaron también al modelado de sistemas distribuidos y concurrentes para asegurar que el lenguaje maneje adecuadamente estos dominios. El lenguaje de modelado es la notación (principalmente gráfica) que usan los métodos para expresar un diseño. El proceso indica los pasos que se deben seguir para llegar a un diseño. La estandarización de un lenguaje de modelado es invaluable, ya que es la parte principal del proceso de comunicación que requieren todos los agentes involucrados en un proyecto informático. Si se quiere discutir un diseño con alguien más, ambos deben conocer el lenguaje de modelado y no así el proceso que se siguió para obtenerlo. 13. 13. http://www.docirs.cl/uml.htm. 35.

(36) Figura7. Ejemplo de UML.. Fuente: http://www.docirs.cl/uml.htm. PHP. El PHP (acrónimo de PHP: Hypertext Preprocessor), es un lenguaje interpretado de alto nivel embebido en páginas HTML y ejecutado en el servidor. El PHP inicio como una modificación a Perl escrita por Rasmus Lerdorf a finales de 1994. Su primer uso fue el de mantener un control sobre quien visitaba su currículo en su web. Soporte para bases de datos:. Una de sus características más potentes es su suporte para gran cantidad de bases de datos. Entre su soporte pueden mencionarse InterBase, mSQL, MySQL, Oracle, Informix, PosgreSQL, entre otras. PHP también ofrece la integración con las varias bibliotecas externas, que permiten que el desarrollador haga casi cualquier cosa desde generar documentos en pdf hasta analizar código XML. 36.

(37) Código abierto:. Como producto de código abierto, PHP goza de la ayuda de un gran grupo de programadores, permitiendo que los fallos de funcionamiento se encuentren y se reparan rápidamente. El código se pone al día continuamente con mejoras y extensiones de lenguaje para ampliar las capacidades de PHP. Es utilizado en aplicaciones Web-relacionadas por algunas de las organizaciones más prominentes tales como Mitsubishi, Redhat, Der Spiegel, MP3-Lycos, Ericsson y NASA. PHP es la opción natural para los programadores en máquinas con Linux que ejecutan servidores web con Apache, pero funciona igualmente bien en cualquier otra plataforma de UNIX o de Windows, con el software de Netscape o del web server de Microsoft. PHP también utiliza las sesiones de HTTP, conectividad de Java, expresiones regulares, LDAP, SNMP, IMAP, protocolos de COM (bajo Windows). Para trabajar con capacidades PHP, se puede conseguir mayor información en PHP.net, sitio encargado de mantener al día a todos los desarrolladores con las últimas descargas relacionadas con el lenguaje y documentación. 14  JAVASCRIPT JavaScript es un lenguaje con muchas posibilidades, utilizado para crear pequeños programas que luego son insertados en una página web y en programas más grandes, orientados a objetos mucho más complejos. Con JavaScript podemos crear diferentes efectos e interactuar con nuestros usuarios. Este lenguaje posee varias características, entre ellas podemos mencionar que es un lenguaje basado en acciones que posee menos restricciones. Además, es un lenguaje que utiliza Windows y sistemas X-Windows, gran parte de la programación en este lenguaje está centrada en describir objetos, escribir funciones que respondan a movimientos del mouse, aperturas, utilización de teclas, cargas de páginas entre otros. Es necesario resaltar que hay dos tipos de JavaScript: por un lado está el que se ejecuta en el cliente, este es el JavaScript propiamente dicho, aunque 14. http://www.maestrosdelweb.com/editorial/phpintro/. 37.

(38) técnicamente se denomina Navigator JavaScript. Pero también existe un JavaScript que se ejecuta en el servidor, es más reciente y se denomina LiveWire JavaScript.15 . BOOTSTRAP. Bootstrap es un framework que simplifica el proceso de creación de diseños web combinando CSS y JavaScript. Ha sido desarrollado por Twitter que recientemente liberó su versión 2.0. La mayor ventaja es que podemos crear interfaces que se adapten a los distintos navegadores (responsive design) apoyándonos en un framework potente con numerosos componentes webs que nos ahorrarán mucho esfuerzo y tiempo. Características principales de Bootstrap Bootstrap ofrece una serie de plantillas CSS y ficheros JavaScript que nos permiten integrar el framework de forma sencilla y potente en nuestros proyectos webs. Permite crear interfaces que se adapten a los diferentes navegadores, tanto de escritorio como tabletas y móviles a distintas escalas y resoluciones. Se integra perfectamente con las principales librerías JavaScript, por ejemplo JQuery. Ofrece un diseño sólido usando LESS y estándares como CSS3/HTML5. Es un framework ligero que se integra de forma limpia en nuestro proyecto actual. Funciona con todos los navegadores, incluido Internet Explorer usando HTML Shim para que reconozca los tags HTML5. Dispone de distintos layout predefinidos con estructuras fijas a 940 píxeles de distintas columnas o diseños fluidos. Componentes webs Bootstrap ofrece distintos componentes que podemos usar con unos estilos predefinidos y fáciles de configurar. Además de los distintos plugins integrados con jquery que disponemos en la versión 2.0 de Bootstrap. 15. http://www.maestrosdelweb.com/editorial/%C2%BFque-es-javascript/. 38.

(39) . Botones. Se pueden aplicar tanto a enlaces como a etiquetas button/input simplemente usando la clase btn. Así podemos distinguir el propósito de cada botón con los distintos estilos prefijados o variar su tamaño. . Dropdown. Con ellos podemos asociar un menú desplegable a un botón de forma sencilla agrupando distintas opciones. . Formularios. Bootstrap cuenta con distintos layout que podemos adaptar con las principales necesidades. Además de incluir distintos elementos para remarcar distintas acciones sobre los formularios: focused, disabled, control-group,… . Plugin de jQuery:. Bootstrap cuenta con distintos plugins que nos permiten crear ventanas modales, o crear el típico tooltip sobre algún elemento de la página. 16  FRAMEWORK La palabra inglesa "framework" (marco de trabajo) define, en términos generales, un conjunto estandarizado de conceptos, prácticas y criterios para enfocar un tipo de problemática particular que sirve como referencia, para enfrentar y resolver nuevos problemas de índole similar. En el desarrollo de software, un framework o infraestructura digital, es una estructura conceptual y tecnológica de soporte definido, normalmente con artefactos o módulos de software concretos, que puede servir de base para la organización y desarrollo de software. Típicamente, puede incluir soporte de programas, bibliotecas, y un lenguaje interpretado, entre otras herramientas, para así ayudar a desarrollar y unir los diferentes componentes de un proyecto.. 16. http://www.genbetadev.com/frameworks/bootstrap. 39.

(40) Representa una arquitectura de software que modela las relaciones generales de las entidades del dominio, y provee una estructura y una especial metodología de trabajo, la cual extiende o utiliza las aplicaciones del dominio. 17 . FRONTEND. Lado del cliente (HTML, CSS, HTML5, CSS3, JavaScript, jQuery) Los frontends tienden a ser programadores, pero hay diseñadores genios que también hacen frontend. Son los encargados de maquetar la estructura semántica del contenido (HTML), codificar el diseño en hojas de estilo (CSS) y agregar la interacción con el usuario (JavaScript). En la época actual los frontends tienen HTML5 y CSS3. Con HTML5, desde el frontend, es posible hacer geolocalización, dibujo vectorial, guardar datos en el disco del usuario, insertar audio y video, entre otras cosas. Con CSS3, se pueden crear diseños altamente complejos sin la necesidad de imágenes cortadas, sólo usando código. Bordes redondeados, sombras, degradados, fondos múltiples, entre otros. Por último, JavaScript y sus frameworks añaden el componente de interactividad y conexión al servidor. Es posible comunicarse con el backend y la base de datos sin recargar la página usando AJAX o WebSockets, recibir esos datos y cambiar el diseño entero del sitio. JQuery hace todo esto fácil pero no es el único framework de JavaScript. 18  BACKEND Backend: Lado del servidor (Php, Ruby On Rails, Django, Node.Js, .Net) Un programador tiende a ser backend. Es la labor de ingeniería que compone el acceso a bases de datos y generación de plantillas del lado del servidor. En backend se encargan de implementar cosas como MySQL, Postgres, SQL Server o MongoDB. Luego, un lenguaje como PHP o JSP, o frameworks como RoR, Django, Node.JS o .NET se conectan a la base de datos.. 17 18. http://es.wikipedia.org/wiki/Framework http://www.cristalab.com/blog/que-significa-backend-y-frontend-en-el-diseno-web-c106224l/. 40.

(41) A través de estos lenguajes y frameworks se recibe, procesa y envía información al navegador del usuario. En código HTML (que crea el frontend) o enviando datos puros en XML, RSS o JSON, para ser procesados por JavaScript. En Facebook, por ejemplo, PHP manda la estructura básica del sitio web, pero son múltiples programas y servidores hechos en C++ o Erlang que procesan la información en tiempo real (como chat, comentarios, notificaciones) y las envían y reciben a través de Javascript en el navegador. 19 . HTML5. (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML. HTML5 especifica dos variantes de sintaxis para HTML: un «clásico» HTML (text/html), la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5 que deberá ser servida como XML.1 2 Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo. Todavía se encuentra en modo experimental, lo cual indica la misma W3C, aunque ya es usado por múltiples desarrolladores web por sus avances, mejoras y ventajas. Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se recomienda al usuario común actualizar a la versión más nueva, para poder disfrutar de todo el potencial que provee HTML5. El desarrollo de este lenguaje de marcado es regulado por el Consorcio W3C.20 . CSS. CSS, es una tecnología que nos permite crear páginas web de una manera más exacta. Gracias a las CSS somos mucho más dueños de los resultados finales de la página, pudiendo hacer muchas cosas que no se podía hacer utilizando solamente HTML, como incluir márgenes, tipos de letra, fondos, colores.. 19 20. http://www.cristalab.com/blog/que-significa-backend-y-frontend-en-el-diseno-web-c106224l/ http://es.wikipedia.org/wiki/HTML5. 41.

(42) CSS son las siglas de Cascading Style Sheets, en español Hojas de estilo en Cascada. En este reportaje vamos a ver algunos de los efectos que se pueden crear con las CSS sin necesidad de conocer la tecnología entera.21. 2.2 DOCUMENTO DE DISEÑO DEL SISTEMA 2.2.1 Descripción técnica del sistema. El sistema de ventas online para Ferretaller Hernández Hermanos, está orientado a la web, ha sido desarrollado en la parte del frontend con frameworks como; bootstrap y jquery ui para los formularios y las hojas de estilos se han desarrollado en lenguajes como; Html5 y css3. La parte fundamental de este sistema es el backend, puesto que allí se van a realizar todos los procesos, la escritura en la base de datos, el proceso de registro de usuario y toda la comunicación entre los procesos escogidos por el cliente y el servidor, el backend ha sido desarrollado en el lenguaje de programación PHP. Para el manejo de la base de datos, procesamiento de la información, seguridad, restricción de accesos por privilegios de usuarios se ha implementado la herramienta mySQL. Todas estas son herramientas útiles para la creación de los diferentes módulos que contiene el sistema web, todos los datos de la base de datos serán alojados en un hosting que será comprado por el gerente de la empresa para que el sistema entre en funcionamiento.. 21. http://www.desarrolloweb.com/articulos/26.php. 42.

(43) DIAGRAMA DE CASOS DE USO Figura8. Diagrama de casos de uso clientes del sistema de e-commerce. Fuente: Elaborado por el investigador.. 43.

(44) Figura9. Diagrama de casos de uso administrador del sistema e-commerce. Fuente: Elaborado por el investigado. 44.

(45) DOCUMENTACIÓN CASOS DE USO ACTORES Tabla 1. Descripción actor administrador. ACTOR TIPO CASOS DE USO. Administrador Primario Iniciar sesión, visualizar pedidos, visualizar pedidos cancelados, visualizar pedidos entregados, visualiza estadísticas, visualizar pedidos entregados, ver detalle del pedido entregado, administrar usuarios, administrar categorías, agregar imágenes al producto, generar reporte del pedido, llamar al comprador, enviar reporte del pedido al comprador, cambiar estado del pedido, pedidos entregados, cancelar pedido. Fuente: Tabla creada por el investigador del proyecto. Tabla 2. Descripción actor Cliente . Descripción actor Cliente ACTOR Cliente TIPO Secundario CASOS DE Navegar por la tienda, ver detalles del producto, gestionar carrito, USO registrarse, ver productos disponibles. Fuente: Tabla creada por el investigador del proyecto. Tabla 3. Descripción actor Cliente Registrado . Descripción actor Cliente Registrado ACTOR Cliente Registrado TIPO Primario CASOS Navegar por la tienda, ver detalles del producto, gestionar carrito, ver DE USO productos disponibles, iniciar sesión, realizar compra, visualizar pedidos, visualizar datos, actualizar datos, cambiar contraseña, llamar al vendedor, descargar reporte de compra.. 45.

(46) CASOS DE USO CLIENTES Tabla 4. Descripción caso de uso Iniciar Sesión. Caso de Uso Identificador. Iniciar Sesión 1. Descripción. Este caso de uso permite que cada usuario inicie su sesión y tenga acceso a las funciones predeterminadas de él. Cliente Registrado. Actor Principal Actor Secundario Precondiciones El usuario ingresa su usuario y contraseña para poder acceder a la aplicación, tienen que estar anteriormente registrados para poder ingresar. Flujo Principal El caso de uso comienza cuando el usuario selecciona la opción de iniciar sesión. 1-El sistema despliega un formulario para que el usuario ingrese su identificación de usuario y su contraseña. 2-El usuario ingresa nombre usuario y la contraseña. 3-El sistema verifica los datos del usuario. 4-El sistema permite el acceso del usuario, si el usuario esta creado y el password es correcto lo deja ingresar Post El administrador o el cliente registrado ingresan a su respectivo condiciones panel. Flujos 4. Datos incorrectos Alternativos El sistema arroja un mensaje “Su usuario y contraseña no coinciden” y retorna al punto 2 del flujo principal. Fuente: Tabla elaborada por el investigador del proyecto.. 46.

(47) Tabla 5. Descripción caso de uso navegar por la tienda. Caso de Uso Identificador. Navegar por la tienda 2. Descripción. Este caso de uso le permite a los usuarios navegar por los diferentes ítems del sistema que no exijan verificación de datos. Cliente, Cliente registrado. Actor Principal Actor Secundario Precondiciones. Flujo Principal El caso de uso comienza cuando el usuario ingresa a www.hernandezhermanos.com.co/index2.php puede visualizar los productos disponibles, ver los detalles del producto, registrarse, agregar productos al carrito de compras, vaciar su carrito de compras. Post condiciones Flujos Alternativos Fuente: Tabla elaborada por el investigador del proyecto.. 47.

(48) Tabla 6. Descripción caso de uso ver detalles del producto. Caso de Uso Identificador. Ver detalles del producto 3. Descripción. Este caso de uso le permite a los clientes ver los detalles de cada producto en el que estén interesados. Cliente, Cliente registrado. Actor Principal Actor Secundario Precondiciones El cliente debe seleccionar un producto y elegir el botón de detalles para que se muestren los datos del producto. Flujo Principal. El caso de uso comienza cuando el usuario ingresa a www.hernandezhermanos.com.co ; 1. Selecciona el ítem de productos en el menú principal. 2. Se despliega una lista de los productos disponibles en la tienda. 3. El usuario escoge la pestaña de ver producto. 4. Se despliegan los detalles del producto (Datos principales, Descripción del producto, medidas e imágenes).. Post condiciones Flujos Alternativos. Datos del producto deseado para mejorar las ventas.. Fuente: Tabla elaborada por el investigador del proyecto.. 48.

(49) Tabla 7. Descripción caso de uso gestionar carrito. Caso de Uso Identificador. Gestionar Carrito 4. Descripción. Este caso de uso le permite a los clientes seleccionar productos y agregarlos al carrito de compras con opción de vaciar todo su carro de compras. Cliente, Cliente registrado. Actor Principal Actor Secundario Precondiciones El cliente debe seleccionar la cantidad y elegir el botón “Al carrito” ubicado en la parte inferior de la descripción de cada producto. Flujo Principal. El caso de uso comienza cuando el usuario ingresa a www.hernandezhermanos.com.co ; 1. Selecciona el ítem de productos en el menú principal. 2. Se despliega una lista de los productos disponibles en la tienda. 3. El usuario escoge el producto a agregar, selecciona la cantidad y le da clic al botón “Al carrito”. 4. La cantidad escogida, pasa a la pestaña de “mis compras”. 5. Muestra un listado de los productos escogidos.. Post condiciones Flujos Alternativos. Muestra los productos que selecciono el usuario con la posibilidad de eliminarlos o agregar más productos y realizar la compra.. Fuente: Tabla elaborada por el investigador del proyecto.. 49.

(50) Tabla 8. Descripción caso de uso vaciar carrito.. Caso de Uso Identificador. Vaciar Carrito 4.1. Descripción. Este caso de uso le permite a los clientes y clientes registrados vaciar el carrito de compras. Cliente, Cliente registrado. Actor Principal Actor Secundario Precondiciones El carrito de compras debe tener productos agregados para poder poner el carrito de compras en 0. Flujo Principal. El caso de uso comienza cuando el usuario ingresa a www.hernandezhermanos.com.co ; 1. Selecciona el ítem de productos en el menú principal. 2. Se despliega una lista de los productos disponibles en la tienda. 3. El usuario escoge el producto a agregar, selecciona la cantidad y le da clic al botón “Al carrito”. 4. La cantidad escogida, pasa a la pestaña de “mis compras”. 5. Si el usuario no desea realizar la compra o el producto ya no lo quiere comprar escoge la opción de “vaciar carrito”.. Post condiciones Flujos Alternativos. 6. Todos los productos agregados son eliminados del carrito. Deja sin productos el carrito de compras. 3. Este caso de uso solo funciona si se han agregado productos al carrito de compras.. Fuente: Tabla elaborada por el investigador del proyecto.. 50.

(51) Tabla 9. Descripción caso de uso registrarse. Caso de Uso Identificador. Registrarse 5. Descripción. Este caso de uso le permite a los clientes registrarse en el sistema para poder realizar la compra de sus productos o ser un cliente registrado en el sistema. Cliente. Actor Principal Actor Secundario Precondiciones. Flujo Principal. El caso de uso comienza cuando el usuario ingresa a www.hernandezhermanos.com.co ; 1. Selecciona un producto y le da clic al botón comprar 2. Al momento de realizar la compra escoge la opción de registrarse. 3. Se despliega el formulario de registro 4. El usuario llena los campos del formulario. 5. Se registra en el sistema.. Post condiciones Flujos Alternativos. 1. El usuario selecciona el ítem de registrarse en el pie de pagina 2. El usuario llena los datos de registro. 3. El usuario se registró en el sistema. Pedido realizado. 4. El usuario debe ingresar todos los campos del formulario, si no los ingresa lo devuelve al punto 3 del flujo principal.. Fuente: Tabla elaborada por el investigador del proyecto.. 51.

(52) Tabla 10. Descripción caso de uso ver productos disponibles. Caso de Uso Identificador. Ver productos disponibles 6. Descripción. Este caso de uso le permite a los clientes ver los productos ingresados por el administrador del sistema y que su estado es disponible. Cliente, Cliente registrado. Actor Principal Actor Secundario Precondiciones El cliente debe seleccionar el ítem de productos en el menú principal, se despliega una lista de productos destacados del sistema, si se quiere se busca los productos por categorías. Flujo Principal El caso de uso comienza cuando el usuario ingresa a www.hernandezhermanos.com.co ;. 1. Selecciona el ítem de productos en el menú principal o 2. Selecciona la categoría para visualizar los productos 3. Se despliega una lista de los productos disponibles en la tienda para su visualización. Post condiciones Flujos Alternativos. Muestra los productos destacados o productos ligados a una categoría especifica.. Fuente: Tabla elaborada por el investigador del proyecto.. 52.

(53) Tabla 11. Descripción caso de uso realizar compra.. Caso de Uso Identificador. Realizar Compra 7. Descripción. Este caso de uso le permite a los clientes ver los productos ingresados por el administrador del sistema y que su estado es disponible. Cliente registrado. Actor Principal Actor Secundario Precondiciones El cliente debe estar registrado para poder iniciar sesión y realizar su compra. Flujo Principal. Post condiciones Flujos Alternativos. El caso de uso comienza cuando el usuario se dirige al ítem de productos en el menú principal: 1. Agrega productos al carrito de compras 2. Se dirige a visualizar los productos adquiridos y oprime el botón comprar. 3. Ingresa sus datos de inicio de sesión 4. El sistema valida los datos 5. Se realiza la compra 6. La nueva compra será visible en el panel del cliente. Se realiza el pedido de los productos.. 4. Error en la validación de los datos, el usuario no existe o escribió mal su contraseña, redirige al punto 3 del flujo principal. Fuente: Tabla elaborada por el investigador del proyecto.. 53.