SISTEMA DE CONTROL PARA ADMINISTRACIÓN DE SERVICIOS …

1

SISTEMA DE CONTROL PARA ADMINISTRACIÓN DE SERVICIOS Y PEDIDOS ON LINE

HOLMAN MANRIQUE MASSIAS

UNIVERSIDAD COOPERATIVA DE COLOMBIA FACULTAD DE INGENIERÍAS

PROGRAMA DE INGENIERÍA DE SISTEMAS NEIVA 2020

2

SISTEMA DE CONTROL PARA ADMINISTRACIÓN DE SERVICIOS Y PEDIDOS ON LINE

HOLMAN MANRIQUE MASSIAS

Informe Final de práctica social, empresarial y solidaria presentado como requisito para optar al título de INGENIERO DE SISTEMAS

Asesor

Ing. JORGE ELIECER MARTINEZ GAITAN

UNIVERSIDAD COOPERATIVA DE COLOMBIA FACULTAD DE INGENIERÍAS

PROGRAMA DE INGENIERÍA DE SISTEMAS NEIVA 2020

3

NOTA DE ACEPTACIÓN

Presidente del Jurado

Jurado

Jurado

Neiva, Febrero de 2020

4

AGRADECIMIENTOS

Agradezco primero que todo a Dios por darme muchas bendiciones, entre ellas a tener a mi madre que es mi motor y la que me ha dado la oportunidad de continuar con esta carrera, por confiar en mis capacidades y en apoyarme en cada decisión para construir mi futuro, a las personas que amo y a mi familia que siempre estuvieron ahí para darme una voz de aliento le agradezco, Daniel Enrique reyes una excelente persona que me dio la oportunidad de ser parte de WDC Solutions Engineering S.A.S en la cual pude realizar mi proceso de prácticas de modalidad de grado y en la cual aporte mis conocimientos para llevar a cabo este proyecto SISTEMA DE CONTROL PARA ADMINISTRACIÓN DE SERVICIOS Y PEDIDOS ON LINE..

5

CONTENIDO

Pág. INTRODUCCIÓN 16 1. FORMULACION DEL PROBLEMA 17 2. JUSTIFICACION 18 3. OBJETIVOS 19 3.1 OBJETIVO GENERAL 19

3.2 OBJETIVOS ESPECÍFICOS. 19

4. BASES TEÓRICAS 20

4.1 MARCO TEORICO 20 4.2 MARCO CONCEPTUAL 21

4.2.1 Panel Administrativo 21 4.2.2 Aplicación Móvil 21 4.2.3 MYSQL 21 4.2.4 LARAVEL 22 4.2.5 BACK-END 22 4.2.6 FRONT-END 23 5. METODOLOGIA 24 5.1 CAPITULO 1 LEVANTAMIENTO DE REQUERIMIENTO 24

6

5.2 DISEÑO DEL SOFTWARE 27 5.2.1 Capítulo 2 Diseño de Base Datos 27 5.2.2 Capitulo 3 Diseño de Interfaces 28 5.3 CAPITULO 4 MAQUETACIÓN DE INTERFACES 40 5.3.1 Vista General del Panel Administrativo 41

5.3.2 Vista de Usuarios 41

5.3.3 Vista de Categorías 42 5.3.4 Vista de Servicios 43

5.3.5 Vista de Roles 43 5.3.6 Vista de Pagos 44 5.3.7 Vista de Pedidos 45 5.4 CAPITULO 5 CONEXIÓN BASE DATOS 45

5.5 CAPITULO 6 DESARROLLO DE LOS CRUD PARA LOS MODULOS 46 5.5.1 Módulo de Usuarios 47

5.5.2 Módulo de Categorías 48 5.5.3 Modulo para Servicios 50 5.5.4 Modulo para Roles 52 5.5.5 Módulo de Pedidos 54 5.6 CAPITULO 7 PRUEBAS 55 6. CRONOGRAMA ACTIVIDADES 57 7. CONCLUSIÓNES 58

7

8. RECOMENDACIONES 59 BIBLIOGRAFÍA 60

ANEXOS 62

8

LISTA DE TABLAS

Pág. Tabla 1. Requerimientos funcionales 25 Tabla 2. Requerimientos No Funcionales 26

Tabla 3. Descripción de la imagen visual usuario creado 28

Tabla 4. Descripción de la imagen editar usuario 29 Tabla 5. Descripción de la imagen visual usuario 29

Tabla 6. Descripción de la imagen visual categorías 30 Tabla 7. Descripción de la imagen proceso crear categorías. 31 Tabla 8. Descripción de la imagen visual de modificar categorías 31 Tabla 9. Descripción de la imagen de visual de categorías 32

Tabla 10. Descripción de la imagen visual de servicios creados 33 Tabla 11. Descripción de la imagen visual de crear servicios. 33

Tabla 12. Descripción de la imagen editar servicios 34 Tabla 13. Descripción de la imagen visual de servicios 35 Tabla 14. Descripción de la imagen de proceso visual pagos 35 Tabla 15 descripción de la imagen visual de pago 36 Tabla 16. Descripción de la imagen vista de pedidos 37 Tabla 17 descripción de la imagen visualización de pedido 37 Tabla 18. Descripción de la imagen visualización de modificar pedidos 38

Tabla 19. Descripción de la imagen visual de roles creados 39 Tabla 20. Descripción de la imagen visual de registro roles 39

9

Tabla 21. Visual de editar roles 40 Tabla 22. Descripción de la imagen 22: Visual general del panel administrativo 41

Tabla 23. Descripción de la imagen 23: vista de usuarios 42 Tabla 24. Descripción de la imagen 24: vista general de categorías. 42 Tabla 25. Vista general de servicios 43 Tabla 26. Descripción de la imagen 26: vista general de roles. 44

Tabla 27. Descripción de la imagen 27: vista general de pagos. 44 Tabla 28. Descripción de la imagen 26: vista general de pedidos. 45 Tabla 29. Descripción de la imagen 29: opción de visualización de usuarios. 47

Tabla 30. Descripción de la imagen editar usuarios 47

Tabla 31. Descripción de la imagen 31: opción de eliminar usuarios. 48 Tabla 32. Descripción de la imagen 32: opción de crear categorías. 49

Tabla 33. Descripción imagen 33: opción para de visualizar categorías creada. 49 Tabla 34. Descripción imagen 34: opción para de editar categorías. 50 Tabla 35. Descripción imagen 35: opción eliminar categorías 50

Tabla 36. Descripción de la imagen 36: opción de crear servicios. 51 Tabla 37. Descripción de la imagen 37 51

Tabla 38. Descripción de la imagen 38: opción de editar el servicio. 52

Tabla 39 Descripción de la imagen 39: opción de eliminar el servicio. 52 Tabla 40. Descripción de la imagen 40: opción para crear un rol. 53 Tabla 41. Descripción de la imagen 41: opción para visualizar el rol 53 Tabla 42. Descripción de la imagen 42: opción de editar el servicio. 54

10

Tabla 43. Descripción de la imagen 42: opción de editar el servicio. 54 Tabla 44. Descripción de la imagen 44: opción de visualizar pedidos. 55 Tabla 45. Descripción de la imagen 45: opción de editar un pedido. 55 Tabla 46. Cronograma de actividades 57

11

LISTA DE IMÁGENES

Pág. Imagen 1. Diseño de base de datos 27 Imagen 2. Visual de usuario creado 28

Imagen 3. Visual de editar usuario 28

Imagen 4. Visual de usuario 29 Imagen 5. Visual de categorías 30

Imagen 6. Visual de crear categorías 30 Imagen 7. Visual de modificar categorías 31 Imagen 8. Visual de categorías 32 Imagen 9. Visual de servicios creados 32

Imagen 10. Visual de crear servicios 33 Imagen 11 visual de editar servicios 34

Imagen 12. Visual de servicios 34 Imagen 13. Visual de pagos 35 Imagen 14 visual de un pago 36 Imagen 15 visual de pedidos realizados 36 Imagen 16. Visualización de un pedido 37 Imagen 17. Visualización de modificar pedidos 38 Imagen 18. Visual de roles creados 38

Imagen 19. Visual de registro de roles 39 Imagen 20. Visual de editar roles 40

12

Imagen 21. Vista general del panel administrativo 41 Imagen 22. Vista de usuarios 41

Imagen 23. Vista general de categorías 42 Imagen 24. Vista general de servicios 43 Imagen 25 vista general de roles 43 Imagen 26. Vista general de pagos 44

Imagen 27. Vista general de pedidos 45 Imagen 28. Configuración para conecta la base de datos 46 Imagen 29. Migración de base de datos 46

Imagen 30. Opción de visualización de usuarios 47

Imagen 31. Opción de editar usuarios 47 Imagen 32. Opción de eliminar usuario 48

Imagen 33. Opción de crear categorías 48 Imagen 34. Opción para visualizar categorías creada 49 Imagen 35. Opción de editar categorías 49

Imagen 36. Opción de eliminar categorías 50 Imagen 37. Opción de crear servicios 50

Imagen 38. Opción para visualizar el servicio creado 51

Imagen 39. Opción de editar el servicio 51 Imagen 40. Opción de eliminar el servicio 52 Imagen 41. Opción para crear un rol 52 Imagen 42. Opción para visual el rol. 53

13

Imagen 43. Opción para editar el rol 53 Imagen 44. Opción de eliminar rol 54 Imagen 45. Opción de visualizar pedidos 54 Imagen 46. Opción de editar un pedido 55 Imagen 47. Error módulo pagos 56

14

GLOSARIO App: abreviación de aplicativo móvil Back-end: hace referencia al código. Base de datos: Es la recolección de información que un programa puede seleccionar de fragmentos de datos que necesite. Está organizado por campos, registros y archivos.1 CRUD: El concepto CRUD es un acronimo en el que reune las primeras letras de las operaciones fundamentales de aplicaciones en sistemas de base datos, que signfica Create(crear registro), Read(Leer registro), Update(Modificar registro), Delete(Elminar registro).2 CSS: Lenguaje que describe el estilo de un documento en HTML. HTML: Significa lenguaje de marcas de hipertexto, sirve para indicar como va ordenado el contenido de una página web3. JavaScript: Es un lenguaje de programación que permite la creación de contenido dinámico, controlar archivos de multimedia, crear imágenes dinámicas y entre otras cosas. Laravel: Es un framework de código abierto para desarrollar servicios web y aplicaciones. Su sintaxis es expresiva y elegante con desarrollo en PHP.4 Mockups: Son interfaces que permiten a diseñadores gráficos y web para mostrar al cliente como quedaran sus diseños (logos, folleto, colores)5.

1 masadelante. (s.f.). masadelante.com. Recuperado el 04 de 10 de 2019, de masadelante.com: https://www.masadelante.com/faqs/base-de-dato 2 IONOS, D. G. (04 de 09 de 2019). ionos.es. Recuperado el 08 de 11 de 2019, de ionos.es: https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/crud-las-principales-operaciones-de-bases-de-datos/ 3 Codigofacilito. (2019). codigofacilito. Obtenido de codigofacilito: https://codigofacilito.com/articulos/que-es-html 4 LARAVEL. (s.f.). laravel. Recuperado el 20 de 11 de 2019, de laravel: https://laravel.com/ 5 BRAVO, C. (2019 de 02 de 16). estudioka.es. Recuperado el 04 de 10 de 2019, de estudioka.es: https://estudioka.es/que-es-un-mock-up/#targetText=Los%20Mock%20Ups%20son%20fotomontajes,todos%20los%20gustos%20y%20colores.

15

Panel administrativo: Es un software que provee una interfaz gráfica para la administración de los servicios del servidor. Plugins: Componente para ampliar las funciones de un programa. Requerimiento funcional: Son aquellos que describen una actividad que este deba realizar, es decir describe el comportamiento o función particular de un sistema o software.6 Requerimiento no funcional: Son aquellos requisitos que imponen restricciones en el diseño.7 Spam: Mensajes no deseados que llegan sin haberlos solicitado. Sprint: hace referencia a los ciclos o iteraciones que se va tener dentro de un proyecto Scrum. El Sprint es una metodología para proyectos cortos, en que cada sprint es un ciclo de trabajo lo que vamos a conseguir es un entregable o incremento del producto8. Stakeholder: Significa participante, inversor o accionista. Este concepto hace referencia aquellas personas que tiene algún tipo de interés en un entorno a una empresa9.

6 PMOinformatica. (6 de 2 de 2017). PMOinformatica.com. Recuperado el 04 de 10 de 2019, de PMOinformatica.com: http://www.pmoinformatica.com/2017/02/requerimientos-funcionale 7EcuRed. (s.f.). ecured.cu. Recuperado el 04 de 10 de 2019, de ecured.cu:https://www.ecured.cu/Requisitos_no_funcionales 8 Openwebinars. (19 de 12 de 2018). openwebinars. Obtenido de openwebinars: https://openwebinars.net/blog/que-es-un-sprint-scrum/

9 obs-edu.com. (2019). OBS. Obtenido de OBS: https://www.obs-edu.com/int/blog-investigacion/marketing-y-comunicacion/stakeholders-ejemplos-para-entender-el-concepto

16

INTRODUCCIÓN El Panel administrativo o también conocido como back-end, es la interfaz en la que responsables o administradores tienen privilegios de manipular la apariencia de un sitio web. Las herramientas de esta son muchas, pero las principales funcionalidades es administrar interfaces, añadir nuevas extensiones, componentes, idiomas y plugins10. Esta herramienta se ha vuelto muy importante cuando se trata de crear un sitio web, pero esta se ha vuelto muy indispensable para aplicaciones móviles, pues este sea diseñado para gestionar y administrar datos que se generen, un ejemplo es la app-Admin que se encarga de controlar y gestionar mensajes y contactos de una agenda de una empresa desde el panel administrativo, lo que permite evitar spam y tener una buena conversación con el cliente11. El panel administrativo ha tenido impacto a la hora de administrar y gestionar sitios web o aplicaciones. La empresa WDC SOLUTIONS ENGINEERING S.A.S, ha visto la prioridad de emigrar a plataformas virtuales con el propósito de ofrecer sus servicios de una manera sencilla y amigable. Por ende, sea a propuesto desarrollar un panel administrativo para el control del aplicativo móvil que se viene desarrollando, con el fin de poder gestionar pedidos y servicios en línea. En este documento, se evidenciará las actividades del desarrollo del panel administrativo por capítulo; en el capítulo 1 se realizara levantamiento de requisitos, por medio de preguntas abiertas , capitulo 2 se diseñara la base de datos de acuerdo al análisis del levantamiento de requisitos, capitulo 3 se diseñara las interfaces por medio de Mockups , capitulo 4 se realizara maquetación alas interfaces realizadas en Mockups con HTML, CSS Y JavaScript, capitulo 5 se realizara conexión de base datos con PHP en Laragon , capitulo 6 se desarrollara los CRUD de los módulos del panel administrativo, capitulo 7 se realizaran pruebas y socialización.

10 Joomla. (27 de 01 de 2019). Joomla.org. Recuperado el 25 de 11 de 2019, de Joomla.org:

https://docs.joomla.org/Administrator_(Application)/es 11 Movil, a.-a. P. (2014). sms-admin. Recuperado el 25 de 11 de 2019, de sms-admin: http://sms-admin.com/caracteristicas_app_admin.html

17

1. FORMULACION DEL PROBLEMA WDC SOLUTIONS ENGINEERING S.A.S es una empresa dedicada a ofrecer servicios eléctricos, transmisión eléctrica, refrigeración de espacios, construcción de calidad, tecnología de la información, redes de cómputo, diseño de interiores y ensamble de equipos con una trayectoria de más de 4 años en la ciudad de Neiva –departamento Huila. La empresa cuenta con una modalidad de venta para ofrecer sus servicios muy deficientes, puesto que la empresa solo se promociona por Facebook, personal y WhatsApp. En la actualidad carece de una página web, de igual forma se desconoce un aplicativo móvil que promocione sus servicios e información que los clientes requieran. La empresa presenta deficiencias en la venta, también en la actividad económica como: Reducción de la posibilidad de encontrar nuevos clientes, se debe a una falla de comunicación en la hora de adquirir el servicio, puesto que esto se realiza por medio de llamadas o correo y en muchos casos no es lo que espera el cliente, provocando la cancelación de la solicitud de los servicios y busque otras empresas que cuente con una mejor calidad. Carece de una imagen que le dé a conocer la satisfacción de otros clientes, y esto causa muchas veces desconfianza al poder adquirir un servicio. Los clientes que tiene la posibilidad de adquirir el servicio solo manifiestan su satisfacción con la

empresa y a voz a voz con otros interesados. La notificación de la empresa hacia los clientes es muy tardía, en el momento de responder a cualquier petición de servicio es por medio de correos y esto depende también el orden de llegada, lo que en muchos casos se pierde clientes porque no se la complejidad de lo que se pide y cuando se notifica ya es demasiado tarde. El pago de los productos se maneja en efectivo y por consignaciones a una cuenta bancaria, por lo que también genera un tiempo de respuesta tardía para suministrar el servicio, y no tiene un pago en línea que facilite este proceso. La pregunta problema es: ¿Cómo un sistema móvil puede garantizar el control de los servicios y pedidos de la empresa?

18

2. JUSTIFICACION WDC SOLUTIONS ENGINEERING S.A.S es una empresa que ofrece servicios en calidad del cliente. Actualmente está ha tenido un problema en la atención y respuesta al usuario, lo que representa muchas veces perdida. Pues esta solo cuenta con un correo, y la respuesta hacia el cliente depende el orden de llegada de este medio. Ante lo mencionado anteriormente la empresa ha optado querer llevar su comercio al mundo digital en pro desarrollo, y garantizando un mejor servicio. Por ende, se ha desarrollado un panel administrativo para el control del aplicativo móvil que se viene desarrollando, con el fin de poder gestionar mejor sus pedidos y servicios garantizando que el nivel de respuesta sea rápido. El panel administrativo se ha convertido una herramienta muy importante cuando se trata de diseñar, administrar y gestionar un sitio o una aplicación. En la actualidad existen muchos servicios de hosting que brindan ya esta herramienta, pues se han encargado prácticamente de entregarles una interfaz amigable a un usuario para realizar diversas funciones, según OK Hosting en la administración de sitios web pueden crear cuentas de usuario, manejar correos, gestionar paquetes de alojamiento y reiniciar servicios12. En tanto en aplicaciones móviles hay páginas de desarrolladores como codecanyon.net que ofrecen sus plantillas de acuerdo a la necesidad que lo requiera, teniendo en cuenta que el panel administrativo siempre será importante. Los avances tecnológicos crecen de una manera acelerada, y para poder ser competitivos en el mercado se debe estar a la vanguardia, pues muchas empresas utilizan las aplicaciones móviles para ofrecer los servicios y mejorar la atención al cliente, por lo tanto, WDC SOLUTIONS ENGINEERING S.A.S no es diferente a entrar en la era tecnológica.

12 OkHosting. (2018). okhosting. Recuperado el 25 de 11 de 2019, de okhosting:

https://okhosting.com/blog/ventajas-del-cpanel/

19

3. OBJETIVOS

3.1 OBJETIVO GENERAL Desarrollar un sistema móvil para el control y gestión, de pedidos y servicios en línea para la empresa WDC SOLUTIONS ENNGINEERING S.A.S, garantizando una respuesta oportuna a sus clientes.

3.2 OBJETIVOS ESPECÍFICOS.

Diagnosticar el estado actual de la información, responsabilidad y soportes existentes en la empresa WDC SOLUTIONS ENGINEERING S.A.S que sirva como requerimientos para el panel administrativo web.

Diseñar interfaces para el panel administrativo web por medio de Mockups y bases de datos con sus respectivos atributos para la empresa WDC SOLUTIONS ENGINEERING S.A.S

Implementar los requerimientos funcionales para el panel administrativo desarrollado en la empresa WDC SOLUTIONS ENGINEERING S.A.S permitiendo una buena gestión de pedidos y servicios.

20

4. BASES TEÓRICAS

4.1 MARCO TEORICO Panel administrativo está basado en cpanel, pues este es un alojamiento web basado en Linux. Esta proporciona una interfaz agradable y herramientas automatizadas especialmente diseñadas para facilitar el proceso de hospedaje de un sitio. El cpanel brinda una facilidad al usuario de control los diferentes aspectos de un sitio web13. El cpanel, comenzó como un panel de control interno basado en unix, en la empresa o compañía web hosting, este fue diseñado por uno de los accionistas, con el nombre de Jhon Nick Koston. Esta compañía buscaba formas de permitir que los que no estuvieran familiarizados en sistemas unix, pudieran manejar sus propios sitios web de una manera administrativa. Por ende, se lanzó esta necesidad en 1996. Jhon Koston luego decidió llevar su experiencia a la empresa de alojamiento web Virtual Development inc que actualmente no existe. La empresa speed hosting y Webking se fusionaron y trasladaron sus operaciones de desarrollo en servidores. Allí se realizó una nueva versión del cpanel 2, donde fue adoptada como panel de control de la compañía; sin embargo, solo estaba disponible para clientes cuyos sitios solo estaban alojados en virtual desktop infraestructure. En 1999 se lanzó el cpanel3, mejorando este programa incluyendo la función administradora de alojamiento web. Jhon Koston que era el programador principal, abandono VDI (Virtual desktop infraestructure), debido a problemas internos y se llevó su propia versión del programa, mientras VDI mantuvo su propia versión del programa, la cual tiempo después no pudieron soportar y lo sacaron del mercado. Koston trabajo con una empresa de alojamiento llamada BurstNET, después se enfocó en su propio cpanel y logro formar una corporación en la cual su licencia está constando aproximadamente $450 dólares al año. Su sede es en Houston, Texas. Y su lanzamiento oficial fue el 14 de enero 201314.

13 FurH5Hyt. (28 de 03 de 2017). nov2truth. Recuperado el 25 de 11 de 2018, de nov2truth:

https://nov2truth.org/cpanel-works-history/#:~:targetText=History%20of%20cPanel,VDI%20to%20use%20the%20cPanel. 14 Jamison. (13 de 01 de 2014). buycpanel. Recuperado el 25 de 11 de 2019, de buycpanel:

https://www.buycpanel.com/1132014-the-origin-of-cpanel/

21

4.2 MARCO CONCEPTUAL

4.2.1 Panel Administrativo Según Microsoft el Panel administrativo permite a una empresa configurar los respectivos roles de usuario, para utilizar servicios dentro de una organización según los procesos de información que allí se manipule con unas categorías para la distinción entre proceso y servicios15.

4.2.2 Aplicación Móvil Según servisoftcorp Es un programa diseñado para ser ejecutada en teléfonos inteligentes que permite realizar actividades, como acceder a servicios y mantenerse informado. Las primeras aplicaciones aparecieron en los años 90. Pero estas no eran app para teléfonos inteligentes, si no para los analógicos. Pues estas también se consideran aplicaciones. Los editores de tonos, agendas, juegos en las que fueron famosas como snake y el tetris. Estas eran herramientas para personalizar un teléfono. Pues tenía funciones muy parecía comparado con los teléfonos de la actualidad, sin embargo, cuando aparecieron estos teléfonos inteligentes ya se veían de una manera diferentes los analógicos. Hoy en dia han abierto un mercado gigantesco, cuya competencia es tan voraz, que no ha permitido disfrutar de herramientas cada vez práctica y útiles.16

4.2.3 MYSQL Es un sistema de administración de bases de datos relacionales. MySQL es una aplicación que permite gestionar archivos llamados base de datos. En la actualidad existen muchos tipos de bases de datos, desde un simple archivo hasta sistemas relacionales orientados a objetos. MySQL como base de datos relacionales, utiliza varias tablas para guardar y organizar la información. MySQL está escrito en lenguaje C y C++ lo que se destaca por adaptarse en diferentes entornos de desarrollo, permitiendo que lenguajes de programación

15 https://docs.microsoft.com/es-es/office365/admin/microsoft-365-admin-center-preview?view=o365-worldwide 16 Softcorp. (16 de 03 de 2019). ServisoftCorp. Recuperado el 2019 de 11 de 25, de Servisoftcorp: https://www.servisoftcorp.com/definicion-y-como-funcionan-las-aplicaciones-moviles/

22

más utilizados como PHP, Perl y Java y su integración en distintos sistemas operativos.17

4.2.4 LARAVEL Es un frameworks de código abierto fácil de asimilar para PHP. Este es simple y tiene una interfaz elegante y fácil de usar. Fue creado en el año 2011 y este tiene gran impacto como framework como Ruby, Sinatra y ASP.NET MVC. Laravel es un framework que permite el uso de sintaxis más refinada y expresiva para crear código de una forma más sencilla y evitando el código espagueti. Permite multitud de funcionalidades. La mayor parte de su estructura esta compuestas por dependías, lo que implica que el desarrollo de laravel depende del desarrollo de estas. Las características generales del laravel son las siguientes:

Sistema de ruteo, también RESTful

Blade, Motor de plantillas

Peticiones Fluent

Eloquent ORM

Basado en Composer

Soporte para el caché

Soporte para MVC

Usa componentes de Symfony

Adopta las especificaciones PSR-2 y PSR-4.18

4.2.5 BACK-END El Back-end está enfocado en hacer funcionar todo lo que está detrás de un sitio web correctamente. Esta toma los datos los procesa y los envía a un usuario, además se encarga de hacer consultas o peticiones a una base de datos. El back-end cuenta con unas series de lenguajes y herramientas que le ayuda a que cumpla con el desarrollo como PHP, Ruby, Python, JavaScript y entre otros19.

17 esepeStudio. (16 de 08 de 2005). esepestudio. Recuperado el 25 de 11 de 2019, de

esepestudio: https://www.esepestudio.com/noticias/que-es-mysql

18 GARCIA, J. M. (11 de 12 de 2015). arsys. Recuperado el 25 de 11 de 2019, de arsys: arsys.es/blog/programacion/que-es-laravel/#:~:targetText=Laravel%20es%20uno%20de%20los,Sinatra%20y%20ASP.NET%20MVC.

23

4.2.6 FRONT-END El frontend está enfocado en el usuario, es decir todo lo que podemos interactuar y lo que vemos cuando navegamos. Este se encarga de que nuestra página web cause una impresión agradable al usuario, en la cual se utiliza los lenguajes HTML, CSS, Y JAVASCRIPT. En la actualidad hay una gran variedad de frameworks, procesadores y librerías que ayudan en esta tarea.20

19 BENITES, A. G. (s.f.). devcode. Recuperado el 25 de 11 de 2019, de devcode:

https://devcode.la/blog/frontend-y-backend/

20 Benites, A. G. (s.f.). devcode. Recuperado el 25 de 11 de 2019, de devcode: https://devcode.la/blog/frontend-y-backend/

24

5. METODOLOGIA La metodología utilizada en la presente práctica tiene un enfoque cualitativo que busca principalmente la expansión de información. De igual forma, consta de una investigación exploratoria que tiene como objetivo facilitar un acercamiento y comprensión del problema que se esté presentando. Ante lo mencionado para desarrollar el panel administrativo se utilizarán técnicas para la recolección de información como instrumento cualitativo por medio de entrevistas informales, método de intercambio de ideas, opiniones que se da entre una o dos personas y las preguntas se determinan durante el desarrollo de la misma entrevista. Los requerimientos que se recolecte por medio de la entrevista será evidenciados en el diseño de la base de datos y por medios de mockups, para tener un prototipo de lo que se va ser. En la parte de la programación del desarrollo del panel administrativo, se utilizará el framework Laravel en php, y junto con ello estilo CSS, en organización de código HTML y en la parte de lógica JavaScript. Su base de datos estará gestionada en MYSQL. Para generar un código limpio es necesario aplicar una metodología de desarrollo, en este caso usaremos Scrum, teniendo como objetivo la planificación y el control del proyecto dándole prioridad a los cambios que se presenten. Se tiene presente la metodología Scrum basada en SPRINTS, en donde básicamente son tareas puntuales que se asignan en el equipo de trabajo. Una vez finalizado el desarrollo, se procede a realizar pruebas del funcionamiento del panel administrativo, con el fin de dar cumplimiento a los requerimientos funcionales especificados. 5.1 CAPITULO 1 LEVANTAMIENTO DE REQUERIMIENTO En esta etapa de levantamiento información para los requerimientos que se necesita para el desarrollo del panel administrativo, se realizó una encuesta cualitativa exploratoria (Ver Anexo A), en la que fue aplicada al representante legal de la empresa WDC SOLUTIONS ENNGINEERING S.A.S y a sus stakeholders. Cada una de las preguntas realizadas fue muy importante para la realización del desarrollo del panel administrativo, en la que fue directa y objetiva para lograr tener un buen levantamiento de información.

25

Las primeras preguntas que se formularon, fue enfocado a conocer el tiempo que lleva en el mercado, sus objetivos, su misión, visión y la iniciativa de crear esta empresa. En cuanto en realizar el levantamiento de requerimientos funcionales y no funcionales se realizaron preguntas puntuales, en la que los stakeholders intervinieron. Se preguntó que la empresa ofrecía, de qué manera ofrecía los servicios, como atraen los clientes, cuál era el proceso de dar respuesta a peticiones en caso de tener clientes interesado en adquirir un servicio, cuál era el proceso de pago, si había un sistema de calificación de satisfacción y si contaba con personal profesional. Por ende, se realizó con esta información los requerimientos funcionales y no funcionales para el desarrollo de panel administrativo, donde se presentó al representante de la empresa y se agregaron otros requerimientos que se requería para el desarrollo de esta. Nota: el ajuste que se realizó fueron evidenciados en los requerimientos. Tabla 1. Requerimientos funcionales

Requerimiento funcional Descripción

RF1 Crear un usuario

Sesión que le permita al administrador agregar los siguientes atributos: nombre del usuario, correo electrónico, tipo de usuario, contraseña e imagen de la tabla usuarios de la base de datos.

RF2 Modificar un usuario

Sesión que le permita al administrador Alterar los siguientes atributos: nombre del usuario, correo electrónico, tipo de usuario e imagen de la tabla usuarios de la base de datos.

RF3 Eliminar un usuario

Sesión que le permita al administrador eliminar los siguientes atributos: nombre del usuario, correo electrónico, tipo de usuario e imagen de la tabla usuarios de la base de datos.

RF4 Visualizar un usuario

Sesión que le permita al administrador visualizar los siguientes atributos: nombre del usuario, correo electrónico, tipo de usuario e imagen de la tabla usuarios de la base de datos.

RF5 Crear categoría Sesión que le permita al administrador crear los siguientes atributos: nombre de la categoría, descripción e imagen de la tabla categorías de la base de datos.

RF6 Modificar categoría Sesión que le permita al administrador alterar los siguientes atributos: nombre de la categoría, descripción e imagen de la tabla categorías de la base de datos.

RF7 Eliminar categoría Sesión que le permita al administrador eliminar los siguientes atributos: nombre de la categoría, descripción e imagen de la tabla categorías de la base de datos.

RF8 Visualizar categoría Sesión que le permita al administrador visualizar los siguientes atributos: nombre de la categoría, descripción e imagen de la tabla categorías de la base de datos.

26

Continuación Tabla 1

Requerimiento funcional Descripción

RF9 Crear un servicio Sesión que le permita al administrador crear los siguientes atributos: nombre del servicio, estado, descripción, imagen, categoría de la tabla Servicios de la base de datos.

RF10 Modificar un servicio Sesión que le permita al administrador alterar los siguientes atributos: nombre del servicio, estado, descripción, imagen, categoría de la tabla Servicios de la base de datos.

RF11 Eliminar un servicio Sesión que le permita al administrador eliminar los siguientes atributos: nombre del servicio, estado, descripción, imagen, categoría de la tabla Servicios de la base de datos.

RF3.3 Visualizar un servicio

Sesión que le permita al administrador visualizar los siguientes atributos: nombre del servicio, estado, descripción, imagen, categoría de la tabla Servicios de la base de datos.

RF4 Visualizar pago Sesión que le permita al administrador visualizar los siguientes atributos: Estado de pago, usuario, fecha de la tabla pagos de la base de datos.

RF4.1 Visualizar un pago Sesión que le permita al administrador visualizar los siguientes atributos: Estado de pago, usuario, fecha de la tabla pagos de la base de datos

RF5. Visualizar un pedido Sesión que le permita al administrador visualizar los siguientes atributos: usuario, servicio, fecha de creación, calificación de la tabla pedidos de la base de datos.

RF6. Modificar un pedido Sesión que le permita al administrador Modificar los siguientes atributos: usuario, servicio, de la tabla pedidos de la base de datos.

RF7. Visualizar un rol Sesión que le permita al administrador visualizar los siguientes atributos: Id, Nombre, Descripción y fecha de creación, de la tabla rol de la base de datos.

RF8. Modificar un rol Sesión que le permita al administrador Modificar los siguientes atributos: Id, Nombre, Descripción, de la tabla rol de la base de datos.

Fuente: Elaboración propia

Tabla 2. Requerimientos No Funcionales

Requerimientos no funcionales

RNF1 La interfaz del panel administrativo para la gestión de servicio será intuitiva para el cliente.

RNF2 El ingreso al sistema estará restringido bajo contraseñas y usuarios definidos.

RNF3 El panel administrativo no presentara problemas para su manejo de información.

RNF4 El sistema debe brindar comodidad para el administrador.

RNF5 El panel administrativo deberá poderse explotar y administrar empleando cualquier navegador web.

RNF6 Los datos de la aplicación solo podrán ser modificados por personas autorizadas para ello.


27

5.2 DISEÑO DEL SOFTWARE 5.2.1 Capítulo 2 Diseño de Base Datos DIAGRAMA DE CLASES La siguiente imagen 2 es la base de datos que describe la estructura de las clases, atributos, métodos y las relaciones entre cada objeto. Imagen 1. Diseño de base de datos Fuente: Elaboración propia

Interpretación de la imagen 2 diseño de la base de datos:

La tabla Usuarios está relacionada con la tabla Rol_usuario y esta se relaciona con La tabla Roles. Por ende, un usuario puede tener un rol y un rol tiene muchos roles

La tabla Usuarios está relacionada con la tabla Pedidos y está relacionada con la tabla Servicios. por ende, Un usuario puede hacer un pedido de un servicio.

La tabla Usuarios está relacionada con la tabla Pagos, donde un usuario solo debe tener un pago.

La tabla usuarios está relacionada con la tabla Servicios, donde un usuario puede tener muchos servicios.

La tabla servicios está relacionada con la tabla pedidos, donde un servicio puede tener muchos pedidos.

La tabla categorías está relacionada con la tabla servicios, donde una categoría puede tener muchos servicios.

28

5.2.2 Capitulo 3 Diseño de Interfaces Mockups del panel administrativo. Las siguientes ilustraciones son interfaces creado a través de la plataforma Mockflow.com, ayudando a realizar las interfaces del prototipo teniendo en cuenta los requerimientos funcionales y el diseño de la base de datos. Imagen 2. Visual de usuario creado Fuente: Elaboración propia

Tabla 3. Descripción de la imagen visual usuario creado Descripción de la imagen 2: Visual de usuario creado

Atributos

Nombre

Correo electrónico

Descripción

Imagen

Acción

Descripción del Mockups

Vista usuarios, nos permite ver detalladamente la interfaz de una tabla con los usuarios creados.


Imagen 3. Visual de editar usuario


29

Tabla 4. Descripción de la imagen editar usuario Descripción de la imagen 3: Visual de editar usuario

Atributos

Nombre del usuario

Tipo de usuario

Correo electrónico

Imagen


En la imagen 3, se visualiza el módulo de editar los atributos en usuario.


Imagen 4. Visual de usuario Fuente: Elaboración propia

Tabla 5. Descripción de la imagen visual usuario Descripción de la imagen 4: Visual de usuario

Atributos

Nombre del usuario

Tipo de usuario

Correo electrónico

Imagen


En la imagen 4, Se muestra la visual del módulo perfil del usuario.


30

Vista de categoría Imagen 5. Visual de categorías Fuente: Elaboración propia

Tabla 6. Descripción de la imagen visual categorías

Descripción de la imagen 5: Visual de categorías.

Atributos

Nombre

Descripción

Imagen

Acción


En la imagen 5, se visualiza una tabla con las categorías creada.


Imagen 6. Visual de crear categorías Fuente: Elaboración propia

31

Tabla 7. Descripción de la imagen proceso crear categorías. Descripción de la imagen 6: Visual de crear categorías

Atributos

Nombre de la categoría

Descripción

Imagen


En la imagen 6, se muestra la visualización de los campos a llenar para la creación de una categoría.


Imagen 7. Visual de modificar categorías Fuente: Elaboración propia

Tabla 8. Descripción de la imagen visual de modificar categorías Descripción de la imagen 7: Visual de modificar categorías

Atributos


Descripción

Imagen


En la imagen 7, se muestra la visual de modificar una categoría.


32

Imagen 8. Visual de categorías Fuente: Elaboración propia

Tabla 9. Descripción de la imagen de visual de categorías Descripción de la imagen 8: Visual de categorías

Atributos


Descripción

Imagen

Descripción del Mockups En la imagen 8, se muestra la visualización de una categoría ya creada.


Vista de servicios Imagen 9. Visual de servicios creados Fuente: Elaboración propia

33

Tabla 10. Descripción de la imagen visual de servicios creados Descripción de la imagen 9: Visual de servicios creados

Atributos

Nombre

Descripción

Imagen

Estado

Acción


En la imagen 9, se muestra la tabla principal del módulo servicio donde .se visualizan los servicios creados.


Imagen 10. Visual de crear servicios Fuente: Elaboración propia

Tabla 11. Descripción de la imagen visual de crear servicios. Descripción de la imagen 10: Visual de crear servicios.

Atributos

Nombre del servicio

Descripción

Estado

categoría

Imagen


En la imagen 10, se muestra la visualización de los campos a llenar para la creación de un servicio.


34

Imagen 11 visual de editar servicios Fuente: Elaboración propia Tabla 12. Descripción de la imagen editar servicios Descripción de la imagen 11: Visual de editar servicios.

Atributos

Nombre del servicio

Descripción

Estado

categoría

Imagen


En la imagen 11, se muestra la opción de editar los campos de un servicio.

Fuente: Elaboración propia Imagen 12. Visual de servicios Fuente: Elaboración propia

35

Tabla 13. Descripción de la imagen visual de servicios Descripción de la imagen 12: Visual de un servicio.

Atributos

Nombre del servicio

Descripción

Estado

categoría

Imagen


En la imagen 12, se muestra la visualización de un servicio creado.

Fuente: Elaboración propia Vista de pagos Imagen 13. Visual de pagos Fuente: Elaboración propia Tabla 14. Descripción de la imagen de proceso visual pagos Descripción de la imagen 13: Visual pagos.

Atributos

Usuario

transacción

nombre de estado

estado

acción


En la imagen 13, se muestra la tabla principal del módulo pagos donde se visualizaran las transacciones.


36

Imagen 14 visual de un pago

Fuente: Elaboración propia Tabla 15 descripción de la imagen visual de pago Descripción de la imagen 14: Visual de un pago.

Atributos

usuario

transacción

estado


En la imagen 14, se muestra el módulo de un pago.


Vista de pedidos Imagen 15 visual de pedidos realizados Fuente: Elaboración propia

37

Tabla 16. Descripción de la imagen vista de pedidos

Descripción de la imagen 15: vista de pedidos

Atributos

usuario

servicio

creado en

modificado en

calificación

acción


En la imagen 15, se muestra la tabla principal con pedidos.

Fuente: Elaboración propia Imagen 16. Visualización de un pedido Fuente: Elaboración propia Tabla 17 descripción de la imagen visualización de pedido Descripción de la imagen 16: visualización de un pedido

Atributos

usuario

servicio

fecha de creación

calificación


En la imagen 16, se visualiza un pedido.


38

Imagen 17. Visualización de modificar pedidos Fuente: Elaboración propia Tabla 18. Descripción de la imagen visualización de modificar pedidos

Descripción de la imagen 17: visualización de modificar pedido

Atributos

usuario

servicio

fecha de creación

calificación


En la imagen 17, se muestra la visual de modificar un pedido.

Fuente: Elaboración propia Vista de Roles Imagen 18. Visual de roles creados Fuente: Elaboración propia

39

Tabla 19. Descripción de la imagen visual de roles creados

Descripción de la imagen 18: visual de roles creados

Atributos

usuario

servicio

creado en

modificado en

calificación

acción


En la imagen 18, se muestra la tabla principal de roles creados.

Fuente: Elaboración propia Imagen 19. Visual de registro de roles Fuente: Elaboración propia Tabla 20. Descripción de la imagen visual de registro roles Descripción de la imagen 19: visual de un rol

Atributos

id

nombre

descripción

fecha de creación


En la imagen 19, se muestra el módulo de un rol creado.


40

Imagen 20. Visual de editar roles Fuente: Elaboración propia Tabla 21. Visual de editar roles Descripción de la imagen 20: visual de editar roles

Atributos

id

nombre

descripción


En la imagen 20, se muestra la opción de editar un rol.

Fuente: Elaboración propia 5.3 CAPITULO 4 MAQUETACIÓN DE INTERFACES Para el diseño de las interfaces que se realizaron con la herramienta MockupFlow, como prototipo del panel administrativo, se llevó acabo desarrollar la maquetación con lenguaje HTML (ayuda estructurar la página por etiquetas para introducir después el lenguaje de programación), CSS (que se encarga de la decoración de colores, bordes, márgenes, interlineados, fondos y entre otros) y JavaScript (es un lenguaje de programación que se encarga de crear contenido dinámico). Las siguientes imágenes son las vistas del desarrollo de la maquetación, teniendo en cuenta que estas no están programados los módulos.

41

5.3.1 Vista General del Panel Administrativo Imagen 21. Vista general del panel administrativo Fuente: Elaboración propia Tabla 22. Descripción de la imagen 22: Visual general del panel administrativo Descripción de la imagen 21: visual general del panel administrativo.

Se procedió a maquetar las interfaces de los Mockups en lenguaje JavaScript en HTML y CSS para dar una apariencia agradable y poner en ejecución la construcción del panel administrativo.

Se observa el inicio principal del panel administrativo, donde se puede apreciar en la parte izquierda una barra con los módulos: pedidos, categorías, servicios, pagos, usuarios y roles.

Fuente: Elaboración propia 5.3.2 Vista de Usuarios Imagen 22. Vista de usuarios Fuente: Elaboración propia

42

Tabla 23. Descripción de la imagen 23: vista de usuarios Descripción de la imagen 22: vista de usuarios


Se observa el modulo usuario,

Se puede apreciar solo la maquetación sin programar el CRUD.

Fuente: Elaboración propia 5.3.3 Vista de Categorías Imagen 23. Vista general de categorías Fuente: Elaboración propia Tabla 24. Descripción de la imagen 24: vista general de categorías. Descripción de la imagen 23: vista general de categorías.


Se observa el módulo categorías.



43

5.3.4 Vista de Servicios Imagen 24. Vista general de servicios Fuente: Elaboración propia Tabla 25. Vista general de servicios Descripción de la imagen 24: vista general de servicios.


Se observa el módulo servicios.


Fuente: Elaboración propia 5.3.5 Vista de Roles Imagen 25 vista general de roles Fuente: Elaboración propia

44

Tabla 26. Descripción de la imagen 26: vista general de roles. Descripción de la imagen 25: vista general de roles.


Se observa el módulo Roles.



5.3.6 Vista de Pagos Imagen 26. Vista general de pagos Fuente: Elaboración propia

Tabla 27. Descripción de la imagen 27: vista general de pagos. Descripción de la imagen 26: vista general de pagos.


Se observa el módulo pagos.



45

5.3.7 Vista de Pedidos Imagen 27. Vista general de pedidos Fuente: Elaboración propia

Tabla 28. Descripción de la imagen 26: vista general de pedidos. Descripción de la imagen 27: vista general de pedidos.


Se observa el módulo pedido.



5.4 CAPITULO 5 CONEXIÓN BASE DATOS Se creó la conexión de la base de datos de MySQL con Laravel php. Se configuro dentro el proyecto del panel administrativo el archivo.env. Donde se tuvieron en cuenta 5 parámetros básicos de conexión, y son los siguientes:

DB_HOST : Ubicación de la base de datos

DB_Port: interfaz de la cual se va enviar y recibir los diferentes tipos de datos

DB_DATABASE: Nombre de la tabla de la base de datos.

DB_USERNAME: Usuario de la base de datos

DB_PASSWORD: Clave de la base de datos.

46

Imagen 28. Configuración para conecta la base de datos Fuente: Elaboración propia

Al ser configurado se emigraron las tablas para completar la conexión de la base de datos. Imagen 29. Migración de base de datos Fuente: Elaboración propia

5.5 CAPITULO 6 DESARROLLO DE LOS CRUD PARA LOS MODULOS En la parte del Backend que es la lógica del desarrollo de una aplicación, se trabajó con el framework Laravel en PHP, pues permite un uso de sintaxis limpia y expresiva para trabajar código de una forma sencilla, y evitando lo que cualquier desarrollador no quiere un “Código espaguetis”. Además, tiene un soporte robusto para el manejo de base de datos, su encriptación para la seguridad de los datos es recomendada. A la mano con Laravel se trabajó con los lenguajes HTML para maquetar la estructura del contenido, CSS para codificar el diseño y JavaScript para agregar la interacción con el usuario. Por lo tanto, se desarrollaron los CRUD para los módulos Usuarios, Categorías, Servicios, Roles, Pagos y Pedidos. Las siguientes imágenes son el reflejo de los módulos del panel administrativo:

47

5.5.1 Módulo de Usuarios Opción de visualización de usuarios Imagen 30. Opción de visualización de usuarios Fuente: Elaboración propia

Tabla 29. Descripción de la imagen 29: opción de visualización de usuarios. Descripción de la imagen 30: opción de visualización de usuarios.

En la imagen 30, se muestra los atributos nombre y correo electrónico, en donde se seleccionó la opción o acción vista de un usuario.


Opción de editar usuarios Imagen 31. Opción de editar usuarios Fuente: Elaboración propia

Tabla 30. Descripción de la imagen editar usuarios Descripción de la imagen 31: opción de editar usuarios.

En la imagen31, se muestra los atributos nombre de usuario y lista de roles, en donde se podrá editar esto.

Solo el administrador tendrá permisos para editar un usuario.


48

La opción eliminar usuario Imagen 32. Opción de eliminar usuario Fuente: Elaboración propia Tabla 31. Descripción de la imagen 31: opción de eliminar usuarios. Descripción de la imagen 32: opción de eliminar usuarios.

En la imagen32, se muestra una tabla donde se encontrará un listado de usuarios.

En la parte izquierda de la imagen 32, aparece unos botones blancos y rojo donde son las acciones que se pueden ejecutar (ver, editar, eliminar)

Solo el administrador tendrá permisos para eliminar un usuario.

Fuente: Elaboración propia 5.5.2 Módulo de Categorías Opción de Crear Categorías Imagen 33. Opción de crear categorías Fuente: Elaboración propia

49

Tabla 32. Descripción de la imagen 32: opción de crear categorías. Descripción de la imagen 33: opción de crear categorías.

En la imagen 33, se muestra los atributos nombre, descripción e imagen.

En esta opción se creará las categorías, que se visualizan en la app móvil

El administrador solo tendrá la opción de crear categorías.

Fuente: Elaboración propia Opción para visualizar la categoría creada Imagen 34. Opción para visualizar categorías creada Fuente: Elaboración propia Tabla 33. Descripción imagen 33: opción para de visualizar categorías creada. Descripción de la imagen 34: opción para de visualizar categorías creada.

En la imagen 34, se muestra los atributos id, nombre, descripción, imagen, fecha de creación, fecha de modificación.

Se visualizara una categoría creada con su respectiva descripción.


Opción de editar categoría. Imagen 35. Opción de editar categorías Fuente: Elaboración propia

50

Tabla 34. Descripción imagen 34: opción para de editar categorías. Descripción de la imagen 35: opción para de editar categorías.

En la imagen 35, se muestra los atributos id, nombre, descripción, imagen,

En esta opción el administrador podrá editar una categoría en caso de crearse mal.

Fuente: Elaboración propia Se muestra la opción eliminar Imagen 36. Opción de eliminar categorías Fuente: Elaboración propia Tabla 35. Descripción imagen 35: opción eliminar categorías Descripción de la imagen 36: opción eliminar categorías.

En la imagen 36, se muestra una tabla donde se encontrara un listado de categorías.

En la parte izquierda de la imagen 36, aparece unos botones blancos y rojo donde son las acciones que se pueden ejecutar(ver, editar, eliminar)

Solo el administrador tendrá permisos para eliminar una categoría.


5.5.3 Modulo para Servicios Opción para crear servicios Imagen 37. Opción de crear servicios Fuente: Elaboración propia

51

Tabla 36. Descripción de la imagen 36: opción de crear servicios. Descripción de la imagen 37: opción de crear servicios.

En la imagen 37, se muestra los atributos nombre, descripción, imagen, estado, usuario, categoría.

En esta opción se creará un servicio y se le asignará a un usuario como responsable de este.

El administrador solo podrá crear el servicio.


Opción para visualización del servicio creado Imagen 38. Opción para visualizar el servicio creado Fuente: Elaboración propia Tabla 37. Descripción de la imagen 37 Descripción de la imagen 38: opción para visualizar el servicio creado.


En esta opción se creará un servicio y se le asignará a un usuario como responsable de este.

El administrador solo podrá crear el servicio.


Opción de editar el servicio Imagen 39. Opción de editar el servicio Fuente: Elaboración propia

52

Tabla 38. Descripción de la imagen 38: opción de editar el servicio. Descripción de la imagen 39: opción de editar el servicio.


En esta opción se podrá editar el servicio, solo en caso de ser creado mal.

El administrador solo podrá editar el servicio.

Fuente: Elaboración propia Se muestra la opción de eliminar el servicio Imagen 40. Opción de eliminar el servicio Fuente: Elaboración propia Tabla 39 Descripción de la imagen 39: opción de eliminar el servicio. Descripción de la imagen 40: opción de eliminar el servicio.

En la imagen 40, se muestra una tabla donde se encontrará un listado de servicios.


Solo el administrador tendrá permisos para eliminar un servicio.

Fuente: Elaboración propia 5.5.4 Modulo para Roles Opción para crear un Rol Imagen 41. Opción para crear un rol Fuente: Elaboración propia

53

Tabla 40. Descripción de la imagen 40: opción para crear un rol. Descripción de la imagen 41: opción para crear un rol.

En la imagen 41, se muestra los atributos nombre de la etiqueta, descripción, lista de permisos.

En esta opción se le asignara permisos a un usuario, para que pueda atender los movimientos de la App móvil según su servicio,

El administrador solo podrá asignar los roles.

Fuente: Elaboración propia Opción para visualizar el rol Imagen 42. Opción para visual el rol. Fuente: Elaboración propia Tabla 41. Descripción de la imagen 41: opción para visualizar el rol Descripción de la imagen 42: opción para visualizar el rol.

En la imagen 42, se muestra los atributos rol, slug, descripción

En esta opción se visualizara el perfil del usuario.

Fuente: Elaboración propia Opción para editar el rol Imagen 43. Opción para editar el rol


54

Tabla 42. Descripción de la imagen 42: opción de editar el servicio. Descripción de la imagen 43: opción de editar el servicio.

En la imagen 43, se muestra los atributos rol, slug, descripción.

En esta opción se podrá editar los permisos.

El administrador solo podrá editarlo.

Fuente: Elaboración propia Se muestra la opción de eliminar el rol Imagen 44. Opción de eliminar rol Fuente: Elaboración propia

Tabla 43. Descripción de la imagen 42: opción de editar el servicio. Descripción de la imagen 44: opción de eliminar rol.

En la imagen 44, se muestra una tabla donde se encontrará un listado de usuarios a los que se le asignado permisos.


Solo el administrador tendrá permisos para eliminar un usuario.


5.5.5 Módulo de Pedidos Opción de visualizar pedidos Imagen 45. Opción de visualizar pedidos Fuente: Elaboración propia

55

Tabla 44. Descripción de la imagen 44: opción de visualizar pedidos. Descripción de la imagen 45: opción de visualizar pedidos.

En la imagen 45, se muestra los atributos id, idusuario, idservicio, calificación, creado, modificado.

En esta opción se visualizará un pedido de un servicio.

El administrador y el usuario encargado solo podrá ver los pedidos.


Opción de editar un pedido Imagen 46. Opción de editar un pedido Fuente: Elaboración propia

Tabla 45. Descripción de la imagen 45: opción de editar un pedido. Descripción de la imagen 46: opción de editar un pedido.

En la imagen 46, se muestra el atributo usuario, servicio, categoría.

En esta opción el administrador puede cambiar el servicio o la categoría a un cliente en caso de equivocación.


5.6 CAPITULO 7 PRUEBAS De acuerdo a la terminación del desarrollo del panel administrativo de los módulos. Se procedió a realizar pruebas de creación, visualización, edición y eliminación para cada estos como se muestra en el CAPITULO 6 DESARROLLO DE LOS CRUD PARA LOS MODULOS. Pues en este se detectó un error en el módulo pagos, en la cual requería conexión con la App, pues solo se hizo una prueba manual pero este género error, este módulo requiere unos permisos de la app.

56

Imagen 47. Error módulo pagos Fuente: Elaboración propia

57

6. CRONOGRAMA ACTIVIDADES Tabla 46. Cronograma de actividades

Actividades Objetivo Producto Fecha de Entrega

Contacto con la empresa

Aceptación de la práctica.

Conocer la empresa.

Identificar dificultades que se presente actualmente.

Diagnóstico.

Descripción de la problemática.

Formulación del problema.

Justificación.

Objetivos (general, específicos.

Metodología

Cronograma

30/08/2019

Levantamiento de requisitos para el

desarrollo del panel administrativo.

Reunir los stakeholders para realizar preguntas con relación a la empresa.

Levantar información del negocio detalladamente.

Una lista de requerimientos funcionales y no funcionales.

06/09/2019

Diseñar la base de datos para el panel

administrativo.

Construir la base datos de acuerdo a los requerimientos funcionales.

Base de datos.

13/09/2019

Diseñar las interfaces por medio de Mockups

del panel administrativo

Crear las interfaces por medio de Mockups, teniendo en cuenta la base de datos y los requerimientos funcionales.

Diseño del panel administrativo a través de ilustraciones de Mockups.

20/09/2019

Maquetar las interfaces con HTML, CSS y

JavaScript

Crear las interfaces con HTML, CSS y JavaScript, de acuerdo a los Mockups.

Vista de Usuarios, Categorías, Servicios, pagos, pedidos, Rol en HTML, CSS y JavaScript.

27/09/2019

Conectar la base de datos con PHP.

04/10/2019

Desarrollar módulos para la gestión de

pedidos de servicios del panel

administrativo. (crear, modificar, eliminar,

visualizar)

Crear los CRUD para Usuarios, Categorías, Servicios, Roles.

Crear el leer o visualizar de pagos.

Crear modificar, leer o visualizar de pedidos.

Poder crear, visualizar, editar y eliminar los siguientes formularios: Usuarios, Categorías, Servicios, Roles.

Visualizar los pagos.

Visualizar y modificar los pedidos.

25/10/2019

Pruebas

Realizar pruebas de regresión, para probar que un componente tras haber sido modificado, pueda descubrir cualquier defecto.

Obtener un buen panel administrativo para poderlo llevarlo a producción.

08/11/2019


58

7. CONCLUSIÓNES Se pudo concluir que una vez analizado y recopilado la información, que se obtuvieron a través de entrevista, se establecieron los requerimientos funcionales y no funcionales para el desarrollo del panel administrativo. Para este procedimiento se tomó en cuenta el proceso de una investigación exploratoria, en la que se realizaron preguntas abiertas acerca de la empresa, entre las cuáles fueron saber sus inicios y saber al detalle que es lo que ofrecía. De igual forma para el diseño de interfaces de mockups y base de datos, se tuvo en cuenta los requerimientos funcionales y no funcionales que se obtuvieron en la recolección de información, permitiendo garantizar una estructurara organizada en fases de diseño. Las herramientas en la que se realizaron las interfaces fue mockflow21 en línea y para el diseño de base de datos día22 . Se implementaron los requerimientos funcionales para desarrollar los módulos del panel administrativo. En la cual se tuvieron en cuenta el paso a paso de análisis y diseño que se requiere para poder llegar al desarrollo de esta. El framework laravel fue importante para el desarrollo, pues se escogió por su elegancia y sintaxis fácil de expresión. Además, aprendí a organizarme a cómo llevar las tareas de desarrollo para a ver terminado con este, y realizar pruebas que me diera con una finalidad de éxito en mi terminación de práctica.

21 https://mockflow.com/ 22 http://dia-installer.de/index.html.es

https://mockflow.com/

http://dia-installer.de/index.html.es

59

8. RECOMENDACIONES Se debe tener en cuenta que el panel administrativo va ser parte de un ambiente de trabajo, y como precaución se debe establecer un esquema de seguridad integral, que asegurare la base de datos y no exponga su información. Se debe actualizar el panel administrativo cada vez que lo requiere, y protocolo de seguridad.

60

BIBLIOGRAFÍA BENITES, A. G. (s.f.). devcode. Recuperado el 25 de 11 de 2019, de devcode: https://devcode.la/blog/frontend-y-backend/ BRAVO, C. (2019 de 02 de 16). estudioka.es. Recuperado el 04 de 10 de 2019, de estudioka.es: https://estudioka.es/que-es-un-mock-up/#targetText=Los%20Mock%20Ups%20son%20fotomontajes,todos%20los%20gustos%20y%20colores. Codigofacilito. (2019). codigofacilito. Obtenido de codigofacilito: https://codigofacilito.com/articulos/que-es-html COLOMBIA, e. c. (2017 de 03 de 27). crcom.gov.co. Recuperado el 2019 de 11 de 25, de crcom.gov.co: https://www.crcom.gov.co/recursos_user/2017/ComElecPtd_0.pdf developer. (11 de 05 de 2019). developer. Obtenido de developer: https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Qu%C3%A9_es_JavaScript ecommerce. (27 de 03 de 2019). mintic.gov.co. Recuperado el 25 de 11 de 2019, de mintic.gov.co: https://www.mintic.gov.co/portal/604/articles-98220_Inf_eCommerce.pdf EcuRed. (s.f.). ecured.cu. Recuperado el 04 de 10 de 2019, de ecured.cu: https://www.ecured.cu/Requisitos_no_funcionales electronico, c. c. (2019 de 06 de 2019). ccce.org.co. Recuperado el 25 de 11 de 2019, de ccce.org.co: https://www.ccce.org.co/noticias/el-observatorio-ecommerce-presenta-los-resultados-de-sus-estudios-de-medicion-de-oferta-y esepeStudio. (16 de 08 de 2005). esepestudio. Recuperado el 25 de 11 de 2019, de esepestudio: https://www.esepestudio.com/noticias/que-es-mysql GARCIA, J. M. (11 de 12 de 2015). arsys. Recuperado el 25 de 11 de 2019, de arsys: arsys.es/blog/programacion/que-es-laravel/#:~:targetText=Laravel%20es%20uno%20de%20los,Sinatra%20y%20ASP.NET%20MVC. IONOS, D. G. (04 de 09 de 2019). ionos.es. Recuperado el 08 de 11 de 2019, de ionos.es: https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/crud-las-principales-operaciones-de-bases-de-datos/

61

L., v. S. (18 de 04 de 2019). ccce.org.co. Recuperado el 25 de 11 de 2019, de ccce.org.co: https://www.ccce.org.co/sites/default/files/biblioteca/ecommerce-pymes-colombia.pdf LARAVEL. (s.f.). laravel. Recuperado el 20 de 11 de 2019, de laravel: https://laravel.com/ MASADELANTE. (s.f.). masadelante.com. Recuperado el 04 de 10 de 2019, de masadelante.com: https://www.masadelante.com/faqs/base-de-datos obs-edu.com. (2019). OBS. Obtenido de OBS: https://www.obs-edu.com/int/blog-investigacion/marketing-y-comunicacion/stakeholders-ejemplos-para-entender-el-concepto OkHosting. (2018). okhosting. Recuperado el 25 de 11 de 2019, de okhosting: https://okhosting.com/blog/ventajas-del-cpanel/ openwebinars. (19 de 12 de 2018). openwebinars. Obtenido de openwebinars: https://openwebinars.net/blog/que-es-un-sprint-scrum/ PMOinformatica. (6 de 2 de 2017). PMOinformatica.com. Recuperado el 04 de 10 de 2019, de PMOinformatica.com: http://www.pmoinformatica.com/2017/02/requerimientos-funcionales-ejemplos.html#targetText=Requerimientos%20funcionales%3A%20Ejemplos,cuando%20se%20cumplen%20ciertas%20condiciones. RUIZ, A. L. (2018 de 02 de 07). Rankia. Recuperado el 2019 de 11 de 25, de Rankia: https://www.rankia.co/blog/mejores-cdts/3808106-comercio-electronico-definicion-tipos-tendencias SILVA, M. P. (08 de 01 de 2019). portafolio. Recuperado el 25 de 11 de 2019, de portafolio: https://www.portafolio.co/negocios/colombia-cuarto-en-ventas-a-traves-de-ecommerce-532185 Softcorp. (16 de 03 de 2019). ServisoftCorp. Recuperado el 2019 de 11 de 25, de Servisoftcorp: https://www.servisoftcorp.com/definicion-y-como-funcionan-las-aplicaciones-moviles/ w3schools. (2019). w3schools. Obtenido de w3schools: https://www.w3schools.com/css/

62

ANEXOS ANEXOS

63

Anexo A. Metodología cualitativa Las siguientes preguntas que aparecerán a continuación fueron tomadas en cuenta como metodología cualitativa exploratoria para poder conocer la empresa y su problemática. Se aclara que se hicieron dos encuestas una con el asesor y otra con los stakeholders en la cual se tomaron lluvias de ideas para identificar requerimientos funcionales y no funcionales y que se evidencio. Preguntas de diagnóstico de la empresa WDC SOLUTIONS ENGINEERING S.A.S 1. ¿La empresa porque se creó?

2. ¿Cuántos años tiene la empresa de haberse creado?

3. ¿Cuáles son los objetivos de la empresa?

4. ¿Cuál es la misión y la visión de la empresa?

5. ¿La empresa que ofrece?

6. ¿La empresa como ofrece a los clientes sus servicios?

7. ¿La empresa de qué manera atrae a los clientes?

8. ¿La empresa que proceso hace para dar respuesta a las peticiones del cliente?

9. ¿La empresa actualmente cuenta con una herramienta tecnológica para

ofrecer sus servicios?

10. ¿Cómo es la forma de pago de la empresa?

11. ¿la empresa tiene un sistema de calificación de satisfacción?

12. ¿Al obtener un servicio el cliente, se le asigna una persona a cargado al perfil que requiere?

SISTEMA DE CONTROL PARA ADMINISTRACIÓN DE SERVICIOS …

Documents

Transcript of SISTEMA DE CONTROL PARA ADMINISTRACIÓN DE SERVICIOS …