Top Banner
Gestión de incidencias multiplataforma 62 Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA Facultad de Matemáticas e Informática Universidad de Barcelona Gestión de incidencias multiplataforma Álvaro Escurra González Director: Josep Vañó Chic Realizado en: Departamento de Matemáticas e Informática Barcelona, 27 de junio de 2018
74

Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Jun 26, 2020

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 62

Trabajo Final de Grado

GRADO DE INGENIERÍA INFORMÁTICA

Facultad de Matemáticas e Informática

Universidad de Barcelona

Gestióndeincidenciasmultiplataforma

Álvaro Escurra González

Director: Josep Vañó Chic Realizado en: Departamento de Matemáticas e Informática

Barcelona, 27 de junio de 2018

Page 2: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 2

AGRADECIMIENTOS Antetodo,megustaríaagradecerespecialmenteamifamiliaportodoelapoyoqueherecibido

desdeelprimerhastaelúltimodíaenestosúltimosaños.Elesfuerzoyalientodesuperaciónque

mehanofrecidohamerecidolapena.Sinellos,esteobjetivopersonalnolohubieraconseguido.

También,agradeceramitutordelTFGyatodoslosprofesoresdelacarreraportodoloquehe

aprendidodecadaunodeellos.

Porúltimo,amiscompañerosdelacarreraymiscompañerosdetrabajoquehanhechoqueme

inspireenesteproyecto.

Gracias,estetrabajovaporustedes.¡Loconseguimos!

Page 3: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 3

RESUMEN EsteproyectoFinaldeGradoconsisteeneldesarrollodeunaaplicaciónwebparagestionar

incidenciasenempresasqueofrecenServiciodeAtenciónTécnica(SAT).Enestedocumentose

describirátodoelanálisis,eldiseñoylaimplementaciónquesehallevadoacabo.Además,cuenta

conlapuestaenmarchadelaaplicaciónenunentornoreal.

Constantemente,lastecnologíasvancambiandoyesporestoporloqueenesteproyectose

haapostadoporeldesarrollodeunaaplicaciónweb,dondeenlaimplementaciónsehaceusodel

frameworkLaravel5.6dePHPy,paraeldesarrollodelaspáginas,sehautilizadoHTML5,CSS3y

JavaScript, ademásde todas las tecnologíasque la envuelven, comoporejemploAJAX quenos

permitetenerunaaplicacióndinámica.

Laaplicaciónpermitequelosclientes,enestecasousuarios,puedanentrarenlaaplicación

yregistrarnuevasincidencias,asícomoconsultarelprocesoquesellevaacaboalactuarsobre

una de ellas. También, en el lado de la administración, la aplicación permite la gestión de las

incidencias que llevarán a cabo los técnicos, teniendo un claro impacto en la productividad y

optimizacióndeltrabajo.

Lasfuncionalidadesqueproporcionalaaplicaciónsecentranen:lagestióndeincidencias,

permitiendocrear,modificar,asignaryresolver las incidenciasrápidamente; también,permite

gestionarelcalendariodelostécnicosatravésderegistrar,enuncalendariocompartido,aspectos

como:reuniones,desplazamientos,vacaciones,etc.Porotraparte,tambiénsecentraenlagestión

de clientes, la cual permite registrar nuevos clientes o modificar su información básica y su

localización;finalmente,lagestióndeusuariosyperfilesparaquepuedanaccederalaaplicación.

Cabedestacarquelaaplicaciónofrecenotificaciones,tantoporcorreoelectrónicocomodentrode

lamismaaplicación,paraqueelclientesepaencadamomentoeltranscursodesuincidencia,así

comolascomunicacionesquepuedetenerconeltécnico.

Porúltimo,respectoaldiseño,estesecaracterizaporseratractivoyaquepermitequela

usabilidaddelusuarioseacómodayfácil.Además,setratadeundiseñoresponsivequepermite

suusodesdecualquierdispositivomóvil.

Page 4: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 4

RESUM AquestprojecteFinaldeGrauconsisteixeneldesenvolupamentd’unaaplicaciówebpera

gestionar incidències a empreses que ofereixen Servei d’Atenció Tècnica (SAT). En aquest

documentesdescriuràtotl’anàlisi,eldissenyilaimplementacióques’haportataterme.Amés,

comptaamblaposadaenmarxadel’aplicacióaunentornreal.

Constantment,lestecnologiespateixencanvisiésperaquestmotiuqueaquestprojecte

aposta peldesenvolupament d’una aplicacióweb, on per a la seva implementació es faúsdel

frameworkLaravel5.6dePHPy,peldesenvolupamentdelespàgines,s’hautilitzatHTML,CSS3i

JavaScript,amésdetoteslestecnologiesquel’envolten,comperexempleAJAXqueenspermet

tenirunaaplicaciódinàmica.

L’aplicaciópermetqueelsclients,enaquestcaselsusuaris,puguinaccedirdinsl’aplicació

ienregistrarnovesincidències,aixícomconsultarelprocésqueesportaatermeenelmoment

d’actuar sobreaquestes.També,perpartde l’administració, l’aplicaciópermet lagestióde les

incidènciesqueportaranatermeelstècnics,fetquetindràunclarimpacteenlaproductivitati

l’optimitzaciódeltreball.

Les funcionalitats que proporciona l’aplicació es centren en: la gestió d’incidències,

permitent crear, modificar, assignar i resoldre les incidències ràpidament; també, permet

gestionarelcalendaridelstècnicsatravésdelregistre,auncalendaricompartit,d’aspectescom:

reunions,desplaçaments,vacances,etc.D’altrabanda,tambéescentraenlagestiódeclients,el

qualpermetenregistrarnousclientsomodificarlasevainformacióbàsicailasevalocalització.

Caldestacarquel’aplicacióofereixnotificacions,tantpercorreuelectròniccomdinslamateixa

aplicació,amblafinalitatqueelclientsàpigaencadamomenteltranscursdelasevaincidència,

aixícomlescomunicacionsquepottenirambeltècnic.

Finalment,respectealdisseny,aquestescaracteritzapelseuatractiujaquepermetquela

usabilitatdel’usuarisiguicòmodeifàcil.Amés,estractad’undissenyresponsivequepermetel

seuúsdesdequalsevoldispositiumòbil.

Page 5: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 5

ABSTRACT ThisFinalDegreeProjectconsistsofthedevelopmentofawebapplicationtomanage

incidentsincompaniesthatofferTechnicalAttentionService(SAT).Thisdocumentwilldescribe

alltheanalysis,designandimplementationthathasbeencarriedout.Inaddition,ithasthe

implementationoftheapplicationinarealenvironment.

Technologyisinconstantchange,hencewhythisprojecthasoptedforthedevelopmentof

awebapplication,wherethebackendimplementationhasbeenmadeusingtheLaravel5.6PHP

frameworkand,forthefrontenddevelopment,HTML5,CSS3andJavaScripthavebeenchosen,as

wellasallthetechnologiesthatsurroundit,suchasAJAX,whichallowsustohaveadynamic

application.

Theapplicationallows,ononeside,forthecustomerstoreportincidentsandreviewthe

stateandactionsbeingcarriedonthemand,ontheotherside,forthetechnicianstocoordinate

theresponseforthereportedincidents,thushavingapositiveimpactonproductivityandwork

optimization.

Thefunctionalitiesprovidedbytheapplicationarefocusedon:incidentmanagement,

allowingtocreate,modify,assignandsolveincidentsquickly;also,itallowstomanagethe

calendarofthetechniciansthroughregistering,inasharedcalendar,aspectssuchas:meetings,

displacements,vacations,etc.Ontheotherhand,italsofocusesoncustomermanagement,which

allowsregisteringnewclientsormodifyingtheirbasicinformationandlocation;finally,the

managementofusersandprofilessothattheycanaccesstheapplication.

Itshouldbenotedthattheapplicationoffersnotifications,bothbyemailandwithinthe

sameapplication,sothatthecustomerknowsatalltimesthecourseofitsoccurrence,aswellas

communicationsthatmayhavewiththetechnician.

Finally,regardingthevisualdesign,itsfocusoneaseofuseandcomfortabilityallowsforan

attractiveexperiencefortheenduser.Inaddition,itsresponsivedesignallowstheapplicationto

beingusedonanymobiledevice.

Page 6: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 6

Índice 1.INTRODUCCIÓN.........................................................................................................................................................................8

1.1MOTIVACIÓNYCONTEXTODELPROYECTO...............................................................................................................................................81.2DESCRIPCIÓNDELPROYECTO..................................................................................................................................................................101.3OBJETIVOS.................................................................................................................................................................................................101.3.1Objetivosgenerales.........................................................................................................................................................................................101.3.2Objetivosespecíficos.......................................................................................................................................................................................10

1.4METODOLOGÍA..........................................................................................................................................................................................111.5PLANIFICACIÓNTEMPORAL.....................................................................................................................................................................121.5.1Distribucióndeltiempo.................................................................................................................................................................................121.5.2DiagramadeGantt..........................................................................................................................................................................................13

2.ANÁLISISDELSISTEMA........................................................................................................................................................14

2.1REQUISITOSINICIALES.............................................................................................................................................................................142.1.1Requisitosfuncionales...................................................................................................................................................................................142.1.2Requisitosnofuncionales.............................................................................................................................................................................16

2.2CASOSDEUSO...........................................................................................................................................................................................162.2.1Diagramadecasosdeuso............................................................................................................................................................................172.2.2Descripcióntextualdecasosdeuso.......................................................................................................................................................19

3.DISEÑO.....................................................................................................................................................................................32

3.1DECISIONESTECNOLÓGICAS.....................................................................................................................................................................323.2ARQUITECTURADELSOFTWARE..............................................................................................................................................................32

3.2.1Modelo...............................................................................................................................................................................................................333.2.2Vista....................................................................................................................................................................................................................343.2.3Controlador......................................................................................................................................................................................................35

3.3DIAGRAMADECLASES..............................................................................................................................................................................373.4PROTOTIPOS..............................................................................................................................................................................................38

4.IMPLEMENTACIÓN................................................................................................................................................................40

4.1ELMODELO...............................................................................................................................................................................................404.2SISTEMADEAUTENTICACIÓN..................................................................................................................................................................41

Autenticación.............................................................................................................................................................................................................424.3MIDDLEWARE...........................................................................................................................................................................................424.4USABILIDADYDISEÑOADAPTATIVO.......................................................................................................................................................434.5SISTEMADECRUD..................................................................................................................................................................................464.6SUBIRFICHEROS.......................................................................................................................................................................................484.7LLAMADASASÍNCRONASAJAX.................................................................................................................................................................494.8SEGURIDAD...............................................................................................................................................................................................504.9PERMISOS..................................................................................................................................................................................................51

Page 7: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 7

4.10EVENTOS/NOTIFICACIONES................................................................................................................................................................51Notificaciones................................................................................................................................................................................................................52

4.11COMPONENTESDELAAPLICACIÓN.......................................................................................................................................................53Listados........................................................................................................................................................................................................................53Buscadores..................................................................................................................................................................................................................54Widgets........................................................................................................................................................................................................................54Calendario...................................................................................................................................................................................................................55Pop-ups........................................................................................................................................................................................................................55

5.PRUEBASYRESULTADOS....................................................................................................................................................56

6.CONCLUSIONES.......................................................................................................................................................................59

6.1FUTURASAMPLIACIONES.........................................................................................................................................................................59

7.GLOSARIO................................................................................................................................................................................61

8.BIBLIOGRAFÍA........................................................................................................................................................................62

ANEXO.MANUALDEUSUARIO...............................................................................................................................................63

ManualparausuariosSAT......................................................................................................................................................................................63Manualparaclientes.................................................................................................................................................................................................71

Page 8: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 8

1. Introducción

1.1 Motivación y contexto del proyecto

Esteproyectosurgecomounamejoradelaplanificaciónyorganizacióndelastareasdiarias

queserealizaneneldíaadíaenelcontextodeunaempresadedicadaalserviciodemantenimiento

informático.

Lasempresasqueofrecenesteserviciopuedenllegaratenermúltiplesincidenciasaldía;las

cualestienendiferentesnivelesdeprioridad(desdemínimahastaurgentes),oinclusoincidencias

querequierendesplazamientodelostécnicoshastalalocalizacióndelcliente.Siaestoleañadimos

que se trata de una empresa con una gran cartera de clientes, el volumen de incidencias se

multiplica.Porlotanto,seconvierteenunanecesidadtenerunbuensistemacapazdegestionarlas

y organizarlas, asignando a los empleados encargados de resolverlas; permitiendo, de esta

manera,obtenerlamayorproductividaddelostrabajadoresy,enconsecuencia,asegurarlamayor

satisfaccióndelosclientes.

Generalmente, existen muchas aplicaciones de software dedicadas a cubrir estas

necesidades,perosetratadesistemascomplejosconunsinfíndecaracterísticasquecomplican

su utilidad. Además, lamayoría limitan su acceso desde diferentes dispositivos, es decir, son

softwaresdeescritorio,conlocualnopermitensuusofueradelaoficina.

Laformadetrabajarestácambiandoysenecesitanaplicacionesquepuedanresponderde

formaágilaloscambiosynecesidadesdelasempresas,yquefacilitenlagestióndesusdemandas.

Debidoaesto,esteproyectoconsisteenoptimizarlarespuestadeestetipodesoftwareparaque

ésteseaunaherramientasencillacapazdeconectarsedesdediferentesdispositivos,facilitandola

comunicaciónyeldesarrollodelastareas.

Después de investigar sobre los diferentes softwares existentes con esta finalidad, he

encontradoquepresentandiferentesproblemasporloscualessurgelanecesidaddeoptimizarlos.

Unode losproblemasmás comunesque seencuentranen lasempresasquedisponendeeste

sistemaesqueelsoftwarequedaobsoletoporelpasodeltiempoydelasnuevastecnologíasen

potencia.

Adentrándomeenuncasoconcreto,unaempresadedicadaalserviciodemantenimiento

informáticoquehepodidoanalizarhatenidoesteproblemay,enconsecuencia,esteproblemaha

obligado a que sus trabajadores tengan una comunicación vía correo electrónico sobre las

Page 9: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 9

actuacionesquellevanacabosobreunaincidencia,hechoquealargoplazoralentizaodificultael

trabajo.Paraqueestosepuedaentendermejor,voyaespecificarelejemplodeestaempresa:

Estaempresa,recibeunnúmeroconsiderabledellamadasaldíaquesonatendidasporlos

mismostécnicos.Setratadellamadasdeclientesque,obienquierencomentarnuevasincidencias

quesedebenllevaracabo,obiensonllamadaspreguntadosobreelestadodesuincidencia(que

previamente los técnicos han recogido vía mail). El problema se encuentra en que, si las

incidenciassonrecogidasvíamail,estoscorreosdeformafrecuentequedantraspapeladosenla

bandejadeentradadelcorreo.Esteesunproblemabastantegrave,yaquedebemosrecurrirala

búsqueda del correo específico, cosa que puede originar una gran pérdida de tiempo y los

resultadosdeoptimizaciónyproductividadnosonsiemprelosdeseados.

Otroproblemaderivadodelagestióndelasincidenciasvíacorreoelectrónicosepuededar

a la hora de reasignar incidencias. Es decir, se puede dar el caso de que el técnico principal

asignadoalaincidencianohayapodidofinalizarlay,porXmotivo,seveaobligadoatraspasarlaa

otro técnico. En este caso, al no tener ningún registro sobre ella, la comunicación sobre las

actuacionesquesehanllevadoacaboesobienporvíamailobiendeformaoral,corriendoel

riesgodeperderdetallesoinformaciónrelevanteque,enconsecuencia,haránqueelnuevotécnico

asignado tengaque llamaral clientenuevamenteparaque le resuelva lasdudasalrespectoo,

incluso,paraqueleindiquedóndecontinuar.

Porúltimo,existelaposibilidaddequeunaincidenciaseconvierta,también,enunevento

programadoparaunafechaenconcreto.Habitualmente,paracubrirestanecesidad,laempresa

haceusodelcalendariodeOutlook.Unadelaslimitacionesqueesterecursopresentaesquenoes

posible consultar los eventos programados desde otros dispositivos. En consecuencia, si un

técnicotieneprogramadaunavisita,muchasveceslosdemáscompañerosnotienenconstancia

deello,porlotanto,desconocensuubicaciónysuhoradellegada;teniendounimpactonegativo

enlaorganizacióndelequipodetrabajo.

Como se ha comentado antes, la empresa hace uso de una aplicación que ha quedado

obsoleta. En ella se pueden picar las incidencias, pero resulta incómodo la manera de

introducirlas,pocointuitivaynollegaasatisfacerlosproblemasquesurgenactualmenteeneldía

adíadelostrabajadores.

Personalmente, la realización de este proyecto supone un reto, dada la complejidad que

implicaoptimizarlaorganizacióndeltrabajoyelmanejodelosdiferentesusuariosenunamisma

plataformadestinadaaunaempresaconunacarteradeclienteselevada.

Page 10: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 10

1.2 Descripción del proyecto

Elproyectoconsisteenunaaplicaciónwebmultiplataformaque,graciasaunamejoradela

organización,optimizarálagestióndeincidenciasllevadaacaboporelequipodetécnicosdentro

deunentornoempresarial.

Este programa permitirá la introducción de nuevas incidencias, ya sea desde el espacio

proporcionadaparasusclientescomoeldelosmismostécnicos,sifueranecesario,permitiendo

elregistrodetodoslosestadosporlosquepasaunaincidenciahastaelmomentodesuresolución.

Demanera simultánea, también establece comunicacióncon los clientesque seránnotificados

sobreelestadodesuincidencia.

Para acceder a la aplicación se requiere de autenticación (usuario y contraseña). Esta

permitiráelaccesoaunespaciodondeelusuariotendrádisponiblediferentescontenidos,que

dependerándesuperfilasignado.

Porotraparte,podrántrabajardesdecualquierdispositivomóviloescritorio,desdedonde

tendrán acceso a todas las funcionalidades de la aplicación: podrán consultar sus tareas, los

eventos programados, realizar gestiones sobre las incidencias, acceder a las fichas del cliente,

buscaryverloshistóricosdelasincidencias,etc.

1.3 Objetivos

1.3.1 Objetivos generales

Elobjetivoprincipaldelaaplicaciónesmejorarlaproductividaddeltrabajoatravésdela

optimizacióndelagestióndeincidenciasesunaempresaSAT.Esdecir,llevarelcontroltotalsobre

todaslasincidenciasdesusclientes,facilitarasusclienteselpoderaccederalaaplicaciónpara

queconsultenoingresennuevosregistrosy,sobretodo,podersatisfacertodaslasnecesidadesde

lostécnicos.

Endefinitiva,lafinalidaddelaherramientaesproporcionarlaayudanecesariaparaquela

productividaddeltrabajoseafavorableparalaempresa.

1.3.2 Objetivos específicos

ElobjetivoprincipaldeesteTrabajoFinaldeGradoesprofundizaryadquirirconocimiento

sobreeldesarrollodesoftwarequeimplicaelanálisis,eldiseñoylaimplementación.

Page 11: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 11

Además, poner en práctica el conocimiento adquirido durante toda la carrera desde la

planificación, metodologías, uso de patrones, etc. Así como trabajar en nuevas y sofisticadas

tecnologíaseneldesarrolloweb.

Lasherramientasparaconseguirlosobjetivosdeseadossonlossiguientes:

- FrameworkLaraveldePHP

- MySql.

- FrameworkBootstrap,yelusodeAjaxqueharánquelausabilidaddelusuarioseamás

cómoda,ligerayagradable.

1.4 Metodología

LametodologíautilizadaseráelModeloincrementalbásicoodesarrolloincremental.Esta

metodologíasecaracterizaporproporcionarfuncionalidadesbásicasdemanerarápidacomo,por

ejemplo, el sistemade autenticación de usuarios o funcionalidades de la aplicación. También,

conllevaaunbajoriesgodeerrores.

Seguidamente,sedetallaenlafigura1elmodeloincrementaleneltiempodelproyecto.

Figura1:Modeloincremental

Planificación Introducción

Modelado Análisis,diseño

Construcción Código,pruebas

Despliegue Entrega

Page 12: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 12

1.5 Planificación temporal

1.5.1 Distribución del tiempo

Enlafigura2semuestralaplanificaciónquesellevaráacaboenesteproyecto,asícomo

lasentregas.

Figura2:Hitosydistribucióntemporaldelproyecto

Page 13: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 13

1.5.2 Diagrama de Gantt

Figura3:Planificacióndelproyecto

Page 14: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 14

2. Análisis del sistema

2.1 Requisitos iniciales

Enlossiguientesapartadossedescribiránenelescenario,lasfuncionalidadesadesarrollar

enestaaplicaciónytodaslasnecesidadesdelcliente.

2.1.1 Requisitos funcionales

Seguidamente se detallarán todas las funcionalidades agrupadas por módulos y los

diferentesrolesenelsistema.

Gestión de incidencias

• Crear,modificaroborrarincidenciasatravésdeláreaprivadadelosagentesodesdeel

áreaprivadadelosclientes.

• Poder seleccionar el tipo de prioridad, reproducibilidad y de otros datos que puedan

ayudaralosagentes.

• Poder asignar las incidencias a los agentes. El administrador podrá asignar una omás

incidenciasy/olosagentesseráncapacesdeautoasignárselas.

• También, se tiene que poder crear incidencias que sean del tipo evento para poder

gestionarlaprogramacióndiariadelosagentes.

• Enuna incidencia se podrá añadir archivos adjuntos y/o comentarios, de estamanera,

mantendremosunacomunicacióndirectaconelcliente.

• Enunaincidenciasepodránañadirvariasactuaciones,asíquedaráunregistrodetodaslas

actuacionesquesehanllevadoacabo.

• Unavezsesolucioneuna incidencia,elsistemaserácapazdenotificaralclienteconun

mensajequelellegaráasupaneldecontroly,también,víacorreoelectrónico.

• Poderverunlistadodiariodetodaslasincidenciasasignadasaunagente,lasincidencias

quenosehancumplidoolasincidenciassinasignación.

• Poderfiltrarporfecha,porcliente,porlaprioridadodemáscaracterísticas.

• Podercrearcategoríasparagestionarsupropiaáreadetrabajodecadaagente.

Gestión de clientes

• Crear,modificaroborrarclientes,añadirsusdatosprincipalesysuubicación.

Page 15: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 15

• Poderverunlistadodetodoslosclientesactivosono.

• Estostendránunpaneldeadministraciónparaquepuedancrearincidencias.

Gestión de calendarios

• Crear,modificaroborrarunevento.

• Poderasignareventos.

• Añadirnotificacionessiseleasignaauntrabajadoroauncliente.

• Tenercompartidoelcalendariocontodoslostrabajadores.

• Poder ver como administrador todos los eventos programados de mi equipo y, como

agente,podervermiagendaprogramada.

Gestión de Usuarios

• Podercrear,modificaroborrarusuarios.

• Poderseleccionareltipodeusuario.

• Verunlistadodelosagentes.

Gestión de ajustes

• Podergestionarlasnotificacionesdelosusuarios,esdecir,habilitarydeshabilitartantolas

notificacionesquelleganenlaaplicacióncomolacomunicaciónvíaemail.

• Podergestionarelperfildelusuario,pudiendocambiarelnombreocontraseña.

Roles / Actores:

• Administrador:personaconaccesocompletoatodaslasfuncionalidadesdelaaplicación.

Capazdecrearusuarios,clientes,asignartareas,programarcalendariosymonitorizaral

equipo.

• Operario/agente: persona con acceso a todo lo relacionado con las incidencias, ver o

programarsucalendario,verlosusuariosregistradosenlaaplicaciónyconsultarlasfichas

delosclientes.

• Cliente:personaconaccesoalapartadodeincidencias.Tambiénpodráaccederasuperfil,

dondepodrámodificarsusdatosyajustarlasnotificacionesdelsistema.

Page 16: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 16

2.1.2 Requisitos no funcionales

Losrequisitosnofuncionalessonaquellasfuncionesquenoseconsideranenlosrequisitos

fundamentalesdelaaplicación,talescomolaseguridaddelaaplicaciónolausabilidadydiseño

deesta.Seguidamentesedetallarálosrequisitosnofuncionalesquesetendránencuenta:

Requisitos de seguridad

• Elaccesoalaaplicación:sóloseráexclusivoparalosagentesdelaempresaylosclientes.

Porelloelsistemasedotarádeunsistemadeautenticaciónconunusuarioycontraseña

únicos.

• InyeccionesSQL:yaquelaaplicaciónhaceusodedatossensibles,comoseríaelcasode

losdatosde losclienteso laspropias incidencias.Otrapreventivaqueseusaráes lade

sanearlosinputsdelosformularios.

• AtaquesCrosssitescripting(XXS):esimportantetenerencuentaestosataquesparaasí

prevenirqueterceraspersonaspuedanrobarinformaciónsensible,secuestrarsesionesde

usuariososubyugarlaintegridaddelsistema.

Requisitos de interfaz Interfazdiseñadaparavistaescritorio:

• Lasdiferentesinterfacesdelaaplicaciónwebsedotaránconunestilominimalistaycon

diseñosamigablesqueharánqueelusuariopuedaaccederatodoelcontenidodemanera

fácileintuitiva.

• Se usará la tecnología Ajax para mostrar, consultar y grabar datos de manera ágil y

asíncrona,sinqueelusuariotengaqueesperaraquesecarguenlaspantallas.

• Seusarálavistaadaptativaparacualquierdimensióndepantalla,responsivewebdesign.

2.2 Casos de uso

Unavezhayamosdefinidolosactoresylosrequerimientosfuncionalesynofuncionalesde

nuestraaplicaciónvamosadesarrollarlosdiferentescasosdeusosdelsistema.

Page 17: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 17

2.2.1 Diagrama de casos de uso

Sistema de autenticación

Figura4:Diagramadecasodeuso-Autenticación

Sistema de Incidencias

Figura5:Diagramadecasodeuso-Incidencias

Page 18: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 18

Sistema de Clientes

Figura6:Diagramadecasodeuso-Clientes

Sistema de Calendarios

Figura7:Diagramadecasodeuso-Calendarios

Sistema de Usuarios

Figura8:Diagramadecasodeuso-Usuarios

Page 19: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 19

Sistema de Ajustes

Figura9:Diagramadecasodeuso-Ajustes

2.2.2 Descripción textual de casos de uso

Seguidamentesedetallaráloscasosdeusotextualesdelaaplicación.

UC01:Iniciarsesión

Descripción: Permitealosactoresiniciarsesiónenelsistema.

Actores: Administrador,agentesyclientes.

Pre-condición: • Losactoreshandeaccederalapáginaprincipal

• Tienenqueestarregistradosenelsistema,medianteUC19:

crearusuario

Flujoprincipal: 1. Elactoraccedealapáginaprincipaldeiniciodesesión

2. Elsistemamuestraunformulariopidiendoelnombrede

usuariooe-mailyunacontraseña

3. ElactorintroducelosdatosyhaceclicenEntrar.

4. Elsistemavalidalosdatosymuestraelpanelprincipalde

cadaactor.

Flujoalternativo 4a.Silosdatosnosonválidosnopuedeentrarenelsistema.

Post-condición: Elsistemacompruebalosdatosymuestraparacadaactorsupanel

principal.

UC02:RecuperarcontraseñaDescripción: Permitealosactoresrecuperarsucontraseñaenelsistema

Actores: Administrador,agentesyclientes.

Pre-condición: • Losactoreshandeaccederalapáginaprincipal

• Losactorestienenqueestarregistradosenelsistema,

medianteUC19:crearusuario

Page 20: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 20

Flujoprincipal: 1. Elactorseleccionalaopciónderecuperarcontraseña

2. Elsistemapediráelemaildelactor

3. Elactorintroducesuemail

4. Elsistemaenviaráunemailconunlinkparaintroducirla

nuevacontraseña.

Post-condición: Elsistemaenvíaunemailconunlinkpararestablecerla

contraseñaymuestralavistadelUC01.

UC03:CerrarsesiónDescripción: Permitealosactorescerrarlasesiónenlaaplicación

Actores: Administrador,agentesyclientes

Pre-condición: • LosactoreshandehaberrealizadoelUC01:Iniciarsesión

Flujoprincipal: 1. Elactordesdecualquierpartedelsistema,enlaparte

superiorseleccionalaopciónLogout

2. Elsistemacierralasesióndelactor

Post-condición: Elsistemaredirigeautomáticamentealapáginaprincipal.

UC04:CrearincidenciaDescripción: Permitecrearincidencias.

Actores: Clientes

Pre-condición: • LosactoreshandehaberrealizadoelUC01:Iniciarsesión

Flujoprincipal: 1. Elsistemamuestraenlaparteizquierdalaopciónde

Incidencias

2. ElactorseleccionaralaopciónCrearincidencia

3. Elsistemamostraráunpop-upconunformularioparacrearla

incidencia.

a) Elsistemamuestradoscamposrequeridoscomoeltítuloy

ladescripcióndelaincidencia,tambiénmuestracomo

opcionaleslasopcionesdeañadirsistemaoperativo,la

reproducibilidaddelaincidenciaylaprioridad.

b) Elsistemamostraráunaopciónparacategorizarla

incidencia

c) ElsistemamostrarálaopcióndeUC04:Crearcategorías

d) Elsistemamostrarálaopcióndeañadirloauncalendario

Page 21: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 21

4. ElactorrellenalosdatosyhaceclicenCrear.

Post-condición: Unavezguardadalaincidencia,elsistemaenviaráunanotificación

yvolveráallistadodeincidencias.

UC5:GestionarincidenciaDescripción: Permitegestionarlasincidencias.

Actores: Administradoresylosagentes

Pre-condición: • LosactoreshandehaberrealizadoelUC01:Iniciarsesión

Flujoprincipal: 1. ElactorseleccionalaopcióndeIncidencias,enelmenúlateral

2. Elsistemamuestratodaslasincidenciasquesehancreadoylas

ordenaporfechadescendiente.

3. Elsistemamuestraopciónfiltrarincidencias,crear,editar,

borrar

Post-condición: -

UC06:BuscarincidenciaDescripción: Permitebuscaryfiltrarincidencias

Actores: Administrador,agentesyclientes

Pre-condición: • LosactoreshandehaberrealizadoelUC01:Iniciarsesión

• HaberrealizadoalgunaUC07:Crearincidencia

Flujoprincipal: 1) Elsistemapordefectomostraráunlistadodetodaslas

incidenciasylaopcióndebuscarofiltrarincidencias.

2) Elactorseleccionaenlapartesuperiorlaopcióndebuscary

insertaelparámetrodebúsqueda

3) Elsistemadevuelvelosregistrossegúnelparámetrode

búsquedayvuelvealpunto1.

4) Elactorseleccionalaopcióndefiltrar.

5) Elsistemamostraráunpequeñoformularioconlosfiltrosde

búsqueda.

6) Elactorfiltra

7) Elsistemadevuelvelosregistrossegúnelfiltrado.

Post-condición: Elsistemacompruebaqueexistendichosparámetrosdebúsqueda

ydevuelvelosregistros.

Page 22: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 22

UC07:CrearincidenciaDescripción: Permitecrearincidencias.

Actores: Administradoryagentes

Pre-condición: • LosactoreshandehaberrealizadoelUC01:Iniciarsesión

Flujoprincipal: 1. Elsistemamuestraenlaparteizquierdalaopciónde

Incidencias

2. Elactorseleccionalaopción

3. ElsistemamuestralaopcióndeCrearincidencia

4. ElactorseleccionaralaopciónCrearincidencia

5. Elsistemamostraráunpop-upconunformularioparacrearla

incidencia.

e) Elsistemamuestradoscamposrequeridoscomoeltítuloy

ladescripcióndelaincidencia,tambiénmuestracomo

opcionaleslasopcionesdeañadirteléfono,sistema

operativo,lareproducibilidaddelaincidencia,laprioridady

elestadodelaincidencia.

f) Elsistemamostrarálaopcióndeasignaraunagente

g) Elsistemamostraráunaopciónparacategorizarla

incidencia

h) Elsistemamostrarálaopcióndeañadirloauncalendario

6. ElactorrellenalosdatosyhaceclicenCrear.

Post-condición: Unavezguardadalaincidencia,elsistemaenviaráunanotificación

yvolveráallistadodeincidencias.

UC08:SeleccionarclienteDescripción: Permiteasignarlaincidenciaauncliente

Actores: Administradoryagentes

Pre-condición: • LosactoreshandehaberrealizadoelUC01:Iniciarsesión

• Sololopuedenhacerlosadministradoresyagentes

Flujoprincipal: 1) Elsistemamuestraunlistadocontodaslasincidencias

2) Elactorseleccionaincidencia

3) Elsistemaabrelaincidenciaenunpop-upconelformulario

4) ElactorseleccionaaunclienteenelcampodeClienteyhace

clicenguardar.

Page 23: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 23

7. Elsistemadevuelveunmensajedesatisfacción

Post-condición: Elsistemaguardalaincidenciayañadeenelhistóricodelcliente

UC09:AsignaragenteDescripción: Permiteasignarunaincidenciaaunagente.

Actores: Administradoryagentes

Pre-condición: • LosactoreshandehaberrealizadoelUC01:Iniciarsesión

• HaberrealizadoalgunaUC05:Crearincidencia

Flujoprincipal: 5) Elsistemamuestraunlistadocontodaslasincidencias

6) Elactorseleccionaincidencia

7) Elsistemaabrelaincidenciaenunpop-upconelformulario

8) ElactorseleccionaaunusuarioenelcampodeAsignarayhace

clicenguardar.

9) Elsistemadevuelveunmensajedesatisfacción

Post-condición: Elsistemaasignalaincidencia,ynotificaalagentequeseleha

asignadolaincidencia.

UC10:Modificarincidencia

Descripción: Permitemodificar,actualizarlasincidencias

Actores: Administradoresyagentes

Pre-condición: • LosactoreshandehaberrealizadoelUC01:Iniciarsesión

• HaberrealizadoalgunaUC05:Crearincidencia

Flujoprincipal: 1. Elsistemamuestraunlistadocontodaslasincidencias.

2. Elactorseleccionaunadeellas.

3. Elsistemamuestralainformacióncompletadelaincidenciaen

formadepop-up.

4. Elactoractualizalosdatosdelaincidenciayhaceclicen

Guardar.

5. Elsistemaguardalosdatosydevuelveunmensajede

satisfacción.

Post-condición: Elsistemacompruebaquelosdatosrequeridossecumplan,delo

contrarionoguardalaincidencia.

Page 24: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 24

Sisecumplenelsistemaguardalamodificaciónysiesnecesario

notificaalcliente.

UC11:Borrarincidencia

Descripción: Permiteborrarunaincidencia

Actores: Administradoresyagentes

Pre-condición: • LosactoreshandehaberrealizadoelUC01:Iniciarsesión

• HaberrealizadoalgunaUC05:Crearincidencia

Flujoprincipal: 1) Losactoresseleccionanunaincidencia

2) Elsistemamuestraunpop-upconlainformacióndela

incidenciayunbotóndeBorrar.

3) LosactoreshacenclicenBorrar

4) Elsistemadevuelveunmensajedesatisfacción.

Post-condición: Elsistemaborralaincidenciadelsistemayactualizaellistado.

UC12:Crearcliente

Descripción: Permitecrearclientesdentrodelaaplicación.

Actores: Administradores

Pre-condición: LosactoreshandehaberrealizadoelUC01:Iniciarsesión

Flujoprincipal: 1. ElsistemamuestraenlaparteizquierdalaopcióndeClientes

2. ElactorseleccionarálaopciónCrearCliente

3. Elsistemamuestraunpop-upconunformulariopidiendolos

siguientesdatos:

a. Nombre

b. Descripción

c. Tipodesuscripción

d. Localización

e. Ysiestáactivoono

4. ElactorrellenalosdatosyhaceclicenGuardar.

5. Elsistemaguardalosdatosydevuelveunmensajede

satisfacción.

Post-condición: Elsistemaguardaelnuevocliente

Page 25: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 25

UC13:Buscarcliente

Descripción: Permitebuscaruncliente

Actores: Administradoresyagentes

Pre-condición: • LosactoreshandehaberrealizadoelUC01:Iniciarsesión

• HaberrealizadoalgúnUC11:Crearcliente

Flujoprincipal: 1. ElsistemamuestralaopcióndeClienteenelmenúizquierdo

2. Elactorseleccionadichaopción.

3. Elsistemadevuelveellistadodeclientesconlaopciónde

Buscarcliente.

4. Elactorescribeunparámetrodebúsquedayhaceclicen

buscar.

5. Elsistemadevuelvelosregistrosqueseasemejanala

búsqueda.

Post-condición: Elsistemacompruebaydevuelveelregistroenellistadode

clientes.

UC14:Modificarcliente

Descripción: Permitemodificarlosdatosdelosclientes

Actores: Administradores

Pre-condición: • LosactoreshandehaberrealizadoelUC01:Iniciarsesión

• HaberrealizadoalgúnUC11:Crearcliente

Flujoprincipal: 1. Elsistemamuestraunlistadocontodaslosclientes.

2. Elactorseleccionauncliente

3. Elsistemamuestralainformacióncompletadelclienteen

formadepop-up.

4. ElactoractualizalosdatosdelclienteyhaceclicenGuardar.

5. Elsistemaguardalosdatosydevuelveunmensajede

satisfacción.

Post-condición: Elsistemacompruebaquelosdatosrequeridossecumplan,delo

contrarionoguardaelcliente.

Sisecumplenelsistemaguardalamodificación.

UC15:Borrarcliente

Descripción: Permiteborraruncliente

Page 26: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 26

Actores: Administradores

Pre-condición: • LosactoreshandehaberrealizadoelUC01:Iniciarsesión

• HaberrealizadoalgunaUC11:Crearcliente

Flujoprincipal: 1) Elsistemamuestraellistadodeclientesconunaopciónala

derechadeborrar.

2) Elactorhaceclicenborrar.

3) Elsistemadevuelveunmensajedesatisfacción.

Post-condición: Elsistemaborraelclientedelsistemayactualizaellistado.

UC16:Crearcalendario

Descripción: Permitecrearnuevoseventosdeincidencias

Actores: Administradoresyagentes

Pre-condición: LosactoreshandehaberrealizadoelUC01:Iniciarsesión

Flujoprincipal: 1. Elsistemamuestraenlaparteizquierdalaopciónde

Calendarioytambiénmuestraunapequeñaopciónalrealizarel

UC05:Crearincidencia.

2. ElactorseleccionarálaopciónCrearnuevoevento

3. Elsistemamuestraunpop-upconunformulariopidiendolos

siguientesdatos:

a. Título

b. Descripción

c. Aquienleasignaelevento

d. Fechadeinicioyfechafin

4. ElactorrellenalosdatosyhaceclicenGuardar.

5. Elsistemaguardalosydevuelveunmensajedesatisfacción.

Post-condición: Elsistemaguardaelnuevoeventoynotificaalagentequeseleha

asignadoelevento.

UC17:Modificarcalendario

Descripción: Permitemodificaruneventoprogramado

Actores: Administradoresyagentes

Pre-condición: • LosactoreshandehaberrealizadoelUC01:Iniciarsesión

• HaberrealizadoalgúnUC15:Crearcalendario

Page 27: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 27

Flujoprincipal: 1. Elsistemamuestrauncalendariocontodosloseventos

programados.

2. Elactorseleccionaunevento

3. Elsistemamuestralainformacióncompletadeleventoen

formadepop-up.

4. ElactoractualizalosdatosdeleventoyhaceclicenGuardar.

5. Elsistemaguardalosdatosydevuelveunmensajede

satisfacción.

Post-condición: Elsistemacompruebaquelosdatosrequeridossecumplan,delo

contrarionoguardaelevento.

Sisecumplenelsistemaguardalamodificación.

UC18:Borrarcalendario

Descripción: Permiteborraruneventoprogramado

Actores: Administradoresyagentes

Pre-condición: • LosactoreshandehaberrealizadoelUC01:Iniciarsesión

• HaberrealizadoalgunaUC15:Crearcalendario

Flujoprincipal: 1) Elsistemamuestraelcalendariodeloseventosconunaopción

aladerechadeborrar.

2) Elactorhaceclicenborrar.

3) Elsistemadevuelveunmensajedesatisfacción.

Post-condición: Elsistemaborraeleventodelsistemayactualizaelcalendario.

UC19:Crearusuario

Descripción: Permitecrearnuevosagentesdentrodelaaplicación.

Actores: Administradoresyagentes

Pre-condición: LosactoreshandehaberrealizadoelUC01:Iniciarsesión

Flujoprincipal: 1. ElsistemamuestraenlaparteizquierdalaopcióndeUsuarios

2. ElactorseleccionarálaopciónCrearusuario

3. Elsistemamuestraunpop-upconunformulariopidiendolos

siguientesdatos:

a. Nombre

b. Correoelectrónico

Page 28: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 28

c. Teléfono

d. Contraseña

e. Eltipoderol

f. Ysiestáactivoono

4. ElactorrellenalosdatosyhaceclicenGuardar.

5. Elsistemaguardalosdatosydevuelveunmensajede

satisfacción.

Post-condición: Elsistemacompruebaquelosdatosrequeridossecumplan,delo

contrarionocreaelnuevousuario.

Sisecumplenelsistemalocrea.

UC20:Buscarusuario

Descripción: Permitebuscarunagente

Actores: Administradoresyagentes

Pre-condición: • LosactoreshandehaberrealizadoelUC01:Iniciarsesión

• HaberrealizadoalgúnUC19:Crearusuario

Flujoprincipal: 1. ElsistemamuestralaopcióndeUsuariosenelmenúizquierdo

2. Elactorseleccionadichaopción.

3. Elsistemamuestraunlistadocontodoslosagentesactivosyla

opcióndeBuscaragente.

4. Elactorescribeunparámetrodebúsquedayhaceclicen

buscar.

5. Elsistemadevuelvelosregistrosqueseasemejanala

búsqueda,enformatodelista.

Post-condición: Elsistemacompruebaydevuelveelregistroenellistadode

agentes.

UC21:Modificarusuario

Descripción: Permitemodificarlosdatosdelosclientes

Actores: Administradoresyagentes

Pre-condición: • LosactoreshandehaberrealizadoelUC01:Iniciarsesión

• HaberrealizadoalgúnUC19:CrearUsuario

Flujoprincipal: 1. Elsistemamuestraunlistadocontodoslosusuarios.

Page 29: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 29

2. Elactorseleccionaunagente

3. Elsistemamuestralainformacióncompletadelagenteen

formadepop-up.

4. ElactoractualizalosdatosdelagenteyhaceclicenGuardar.

5. Elsistemaguardalosdatosydevuelveunmensajede

satisfacción.

Post-condición: Elsistemacompruebaquelosdatosrequeridossecumplan,delo

contrarionoguardaelagente.

Sisecumplenelsistemaguardalamodificación.

UC22:Borrarusuario

Descripción: Permiteborrarunagente

Actores: Administradores

Pre-condición: • LosactoreshandehaberrealizadoelUC01:Iniciarsesión

• HaberrealizadoalgunaUC19:Crearagente

Flujoprincipal: 1) Elsistemamuestraellistadodeusuariosconunaopciónala

derechadeborrar.

2) Elactorhaceclicenborrar.

3) Elsistemadevuelveunmensajedesatisfacción.

Post-condición: Elsistemaborraelagentedelsistemayactualizaellistado.

UC23:Modificardatos

Descripción: Permitealosusuariosdelsistemaactualizarsusdatosbásicos.

Actores: Administrador,agentesyclientes

Pre-condición: LosactoreshandehaberrealizadoelUC01:Iniciarsesión

Flujoprincipal: 1. ElsistemamuestralaopcióndeEditarperfilenelmenú

izquierdo

2. Elactorseleccionadichaopción.

3. Elsistemamuestratodalainformacióndelusuarioenun

formulario

4. ElactormodificasusdatosyhaceclicenActualizar

5. Elsistemaguardalanuevamodificaciónymuestraunmensaje

desatisfacción

Page 30: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 30

Post-condición: Elsistemaguardalanuevamodificacióndelusuario.

UC24:Ajustarnotificaciones

Descripción: Permitealosusuariosdelaaplicaciónpoderhabilitaro

deshabilitarlasnotificacionesdeescritorio

Actores: Administradores,agentesyclientes

Pre-condición: LosactoreshandehaberrealizadoelUC01:Iniciarsesión

Flujoprincipal: 1. ElsistemamuestralaopcióndeAjustesenelmenúizquierdo

2. Elactorseleccionadichaopción.

3. Elsistemamuestrauninputdehabilitar/deshabilitar

notificaciones

4. Elusuarioseleccionaalgunadelasopciones

5. Elsistemaguardalanuevaconfiguración

Post-condición: Elsistemaguardalaconfiguracióndelactor.

UC25:Reasignarincidencias

Descripción: Permitealosadministradoreselvolcadodetodasounadelas

incidenciasaotroagente.

Actores: Administrador

Pre-condición: • LosactoreshandehaberrealizadoelUC01:Iniciarsesión

• HaberrealizadoalgúnUC05:Crearincidencia

• HaberrealizadoalgúnUC19:Crearusuario

Flujoprincipal: 1. ElsistemamuestralaopcióndeAjustesenelmenúizquierdo

2. Elactorseleccionadichaopción.

3. ElsistemamuestraunapartadodeVolcadodeincidencias

4. Elactorseleccionaunagente

5. Elsistemadevuelvetodaslasincidenciasdedichoagenteyun

listadodeagentesalquequeremosvolcarlasincidencias

6. Elactorseleccionaunaotodaslasincidencias,y

posteriormenteseleccionaalagentealquequeremosvolcarlas

incidencias

Page 31: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 31

7. Elsistemaasignasdichasasignacionesalnuevoagentey

muestraunmensajedesatisfacción

Post-condición: Elsistemaguardalasasignaciones,ynotificaalnuevoagente.

UC26:GestionarcategoríasDescripción: Permitegestionarcategoríasparalasincidencias.

Actores: Administradores

Pre-condición: • LosactoreshandehaberrealizadoelUC01:Iniciarsesión

Flujoprincipal: 4. ElactorseleccionalaopcióndeAjustedeincidencias

5. Elsistemamuestraenlapartederechaunlistadoconlas

categorías

6. Elsistemamuestraopcióndeañadiromodificarunacategoría

Post-condición: -

UC27:GestionarestadosDescripción: Permitegestionarestadosparalasincidencias.

Actores: Administradores

Pre-condición: • LosactoreshandehaberrealizadoelUC01:Iniciarsesión

Flujoprincipal: 7. ElactorseleccionalaopcióndeAjustedeincidencias

8. Elsistemamuestraenlapartederechaunlistadoconlos

estados

9. Elsistemamuestraopcióndeañadiromodificarunacategoría

Post-condición: -

Page 32: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 32

3. Diseño

3.1 Decisiones tecnológicas Considerandotodoslosrequisitos, funcionalesyno funcionales,y teniendoencuenta los

dispositivosenlosqueseejecutarálaaplicación,lasdecisionestecnológicasparaeldesarrollode

laaplicaciónwebsonlassiguientes:

Después de analizar los diferentes tipos de lenguajes de programación y los requisitos

funcionalesdelaaplicación,sehadecididoutilizarelframeworkLaravel5.6hechoenPHP.Una

de las decisiones principales es que es código abierto, llevamuchos años como lenguaje para

desarrollaraplicacionesweb,existenmuchoscomponentesylapuestaenmarchaenunentorno

realesmuyfácil.También,nospermitecrearlaaplicacióndeformasencillayordenadasiguiendo

elpatrónMVCynosofreceseguridadcontraposiblesataques.

OtracaracterísticaimportantedelframeworkesquedisponedesupropioORM,quecrea

objetosvirtualessobrelabasededatosrelacionalyhacequelainteracciónconlabasededatos

seaorientadaaobjetos.Esmodulableyconunampliosistemadepaquetescomoporejemplola

autenticación.Yporúltimoelusodemiddlewares,quenospermitiránfiltrarlaspeticionesHTTP.

EncuantoeldiseñodelainterfazdeusuarioseutilizaráelframeworkBootstrap4yaque

podemosre-utilizarloscomponentesHTMLyCSSquenosofrece.

ParadarledinamismoalaaplicaciónseusaráellenguajedeprogramaciónJavaScriptjunto

alalibreríajQueryyelusodelatecnologíaAJAX.

ParalapersistenciadedatosseusaráStructuredQueryLanguage(SQL)yelmotordebase

dedatosMySQL.

3.2 Arquitectura del software LaarquitecturadelaaplicaciónsebaseenelpatrónModelo-Vista-Controlador(MVC)que

separalalógicadecontrol,losdatosdelaaplicaciónylainterfazdeusuario.

Enlafigura10semuestraunejemplodelflujoqueserealizacuandoelusuariohaceuna

peticiónHTTP.

Page 33: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 33

Figura10:PeticiónHTTP

Acontinuación,explicaremosendetalleestos3componentes.

3.2.1 Modelo

AntesdeexplicarqueesunModelo,seharáunpequeñoincisosobrelamaneradetrabajar

conlapersistenciadedatosenLaravel.

Lasmigracionesesunsistemadecontroldeversióndelabasededatos.Loutilizamospara

definirloscamposdeunatablaoenalgunamodificaciónenelfuturo.

Porejemplo,paracrearunanuevatablausaremoslasiguientelíneadecomando,graciasa

laherramientaArtisan:

Este comando generara un fichero PHP con dos métodos: el método up() es el que se

encargarádecrearloscamposdelatablayelmétododown()quesirveparaeliminarloscampos

deunatablaotodaunatabla.

Parapoderejecutarlamigraciónbastaconescribirlasiguientelíneadecomando:

Estecomandoejecutará lamigraciónycreará las tablasy/omodificacionesen labasede

datos.

LainteracciónconlabasededatosesmuysencillautilizandolaherramientaEloquentORM

(MapeoObjeto-Relacional),unatécnicadeprogramaciónquenospermiteunificarlosdatosde

programacióndeobjetosconunabasededatosrelacional.

CadatabladenuestraaplicacióncorrespondeaunmodeloqueseguardancomoclasesenPHP.

php artisan make:migrate create_bug_table –create=bugs

php artisan make:migrate

Page 34: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 34

3.2.2 Vista

Lasvistassonlapartequeelusuarioverádenuestraaplicación,generalmentesonHTML,

CSS,JavaScriptycódigoPHPparamostrarinformacióndenuestraaplicación.

Para tener una estructura ordenada con las vistas utilizaremos elmotor de plantillas o

Templates,quepermitemodularizarsegmentosdecódigoparaqueestosnoserepitanencada

vista.

Utilizaremos la libreríaBlade, que es elmotor de plantillas que nos permitemezclarde

maneralimpiaestructurasdecontrolyvariablesdePHP.

Estas plantillas tienen que tener la extensión *.blade.php. El código que utilizará Blade

empezaráporlossímbolos@o{{.

Con Blade podemos mostrar datos y programar estructuras de control, tales como

condiciones.También,podemosirrecorriendoelArraydedatosconlautilizacióndebuclesdel

tipo for, while o foreach. Otra característica es que Blade se encarga de escapar el resultado

llamandoahtmlentitiesparaprevenirerroresysobretodoataquesdeltipoCross-sitescripting

(XSS).Si,porlocontrario,noqueremosescaparlosdatostendríamosquellamarasíalasvariables:

{{!!$miVariable!!}}

Acontinuación,sedescribirácadavistadelaaplicación:

Inicio de sesión

• Páginaquepermitiráalosusuariosentrardentrodelaaplicación.

Dashboard - Página principal

• Página quemostrará de forma rápida las incidencias nuevas, activas, las que están sin

asignarylasurgentes.

• Unwidgetquemostraráloseventosenformadelistadelusuariodelaaplicación.

• Otrowidgetdondemostrarálainformacióndelasactividadesdelosagentesyporúltimo

unTime-linecontodoelhistóricodeestadosquepasaunaincidencia.

Gestión de incidencias

• Listadode incidencias:Página donde semostrará un buscador avanzado y un listado

completo de todas las incidencias del sistema (estosdiferentes tipos tendrán una vista

parcialcadauna).También,seencuentralaopcióndecrearunanuevaincidencia.Aeste

apartado tendrán acceso todos los usuarios registrados, pero dependiendo del rol, se

ocultaráomostraránalgunasopciones.

Page 35: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 35

• Modificar/verincidencia:Páginadeltipovistaparcial(parcial-view)dondesemostrará

enformademodalconlainformacióndeunaincidencia.

• Ajustedeincidencias:PáginadeajustesdeincidenciasdondeelAdministradorpodráre-

asignarincidencias,crearcategoríasy/oestadosdeunaincidencia.

Gestión de calendarios

• Listadodeeventos:Páginadondesemostraráuncalendarioconloseventosprogramados

porlosusuarios.

• Modificar/verevento:Páginadeltipovistaparcialdondesemostraráenformademodal

todalainformacióndelevento.

Gestión de clientes

• Listadodeclientes:Páginadondesemostraráenformadelistatodoslosclientesdela

aplicación.

• Modificar/vercliente:Páginadeltipovistaparcialdondesemostraráenformademodal

todalainformacióndelcliente.

Gestión de usuarios

• Listadodeusuarios:Páginadondesemostraráenformadelistatodoslosusuariosdela

aplicación.

• Modificar / verusuario:Página del tipo vista parcial donde semostrará en formade

modaltodalainformacióndelusuario.

Gestión de ajustes

• Página donde semostrará un formulario para poder cambiar la información básica del

usuario y, también, las preferencias de habilitar o deshabilitar las notificaciones del

sistema.

3.2.3 Controlador

Loscontroladoressirvenparaorganizarysepararelcódigoycrearclasesquenosayudena

agrupartodoslosrecursosdeunafuncionalidad.Esaquídondesepondrátodalalógicadeuna

funcionalidad.

Loscontroladoressealmacenanenlacapetaapp/Http/controllersydebemosañadirelsufijo

ControllercomoporejemploBugsController.

Veamoscómofuncionauncontroladoryporquénoshacefaltaenestaaplicación.

Page 36: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 36

SupongamosquequeremosmostrarlainformacióndeunBugenconcreto,loqueharíamos

eshacerlapeticiónpasándoleunID,porejemplo.Y,seguidamente,unmétodoparaquenossirva

el recurso que estamos solicitando. Estemétodo se encargará de buscar en elmodeloBug, y

retornaralavistasusdatos.

ParaorganizarlaspeticionesquesehacenporHTTP,Laravelusaelrecursorutas(Routes).

Acontinuación,explicaremosbrevementeenquéconsisteesterecurso.

Rutas

Todaslasrutasdelaaplicaciónsedefinenenelsiguientedirectorioroutes/web.php.Como

bienloindicasunombre,estonosayudaráaenrutartodaslaspeticionesHTTPqueserealicenen

nuestraaplicación.Porejemplo,sielusuarioaccedealarutaHttp://localhost/admin/bugsysilo

tenemosdefinidocomounapeticiónGET,estenosservirálapeticiónqueestamosrealizando.Por

locontrario,nosdevolveráunerrorHTTP404(páginanoencontrada).

También, podemos añadir parámetros en nuestras rutas. Como por ejemplo, obtener

informacióndetalladadeunregistro,bajolapeticiónGET.

LasrutastrabajanconlossiguientesverbosHTTP:

GET POST PUT DELETE PATCH

Page 37: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 62

3.3 Diagrama de clases Elsiguientediagramaserecogetodaslasclasesyatributosdelaaplicaciónylasrelacionesque

existenentreellas.

Figura11:Diagramadeclasesdelaaplicación

Page 38: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 38

3.4 Prototipos Enelsiguienteapartadosemostraránalgunosprototiposde lasvistasy losdiseñosmás

representativos de la aplicación. Estos diseños no son los definitivos, son solo de carácter

informativo.Deestamanera,mantenemosalclientefinalconunaorientaciónhaciadóndevala

aplicación.

Figura12:Prototipodeldashboard

Enlafigura12,elobjetivoesmostrarlealagenteunavisióngeneralsobreeltrabajodiario

quedebedesempeñary,también,unrecordatoriodeloseventosquetengaprogramado.

Estediseñoessimple,peroalavezeficazyaquenosdalamínimainformaciónnecesaria.

Figura13:PrototipodelapáginadeBugs

Enlafigura13,semuestraelprototipodelapantalladeBugs,dondesemostraráunfiltrado

avanzadoparabuscarlos.ParamostrartodoslosBugs,seañadiránpestañascomo,porejemplo:

Page 39: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 39

misincidencias,todaslasincidencias,lasqueestánsinasignarylascompletadas;dondeencada

unadeellasapareceráunlistadocondiferentesacciones.

Porejemplo,paraloslistadosdemisincidenciasytodaslasincidencias,elusuariopodráver

la informaciónbásicaypodrá completar la incidenciaa travésdeunbotónvisibleen laparte

izquierda.

Enelcasodequeestemosvisualizandolapestañadeincidenciassinasignar,aparecerála

informaciónbásicayunbotónde“Asignármelaamí”.Dondeelusuarioharáclicyestaaparecerá

enellistadodemisincidencias.

Tambiéndispondrá,enlapartesuperiorizquierda,unbotónparaañadirnuevasincidencias.

Figura14:PrototipodevisualizacióndeunBug

Enlafigura14,semuestraelprototipodevisualizacióndeunbugenconcreto.Laideaes

mostrar losdatosdinámicamente, en formadepopup (modal).También, tendremospestañas

dondeencadaunadeellasmostraremosdiferentesopciones.

Enlaprimerapestañasemostrarálainformacióncompletadelaincidencia;enlasiguiente

pestaña, se mostrará un mapa con la información del cliente al que se le ha asignado dicha

incidencia;enunatercerapestañasepodrángestionarlasactuaciones;y,porúltimo,unacuarta

pestañadondesepodrángestionarlasnotasoarchivosadjuntos.

Page 40: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 40

4. Implementación Unavezdefinidoelanálisisyeldiseño,enesteapartado,explicaremostodoeldesarrollode

loscomponentesdelaaplicación,desdecómoseentraenlaaplicaciónconlosdistintosrolesde

la plataforma, pasando por la seguridad en cuanto a la protección de datos hasta las

funcionalidadesdelproyecto.

4.1 El modelo

Relaciones

Enestaaplicaciónesnecesariotenervariasrelacionesentretablas.Porejemplo,larelación

unoauno,hasOnehacereferenciaaqueunusuariodelaaplicaciónsólotieneunaconfiguración

enelsistema.

Figura15:RelaciónhasOne

Otrarelaciónmuyusual,eslarelacióndeunoamuchas,hasManny,quehacereferenciasi

unBugtieneunaomuchasActuaciones.

Figura16:RelaciónhasMany

Unavezsedefinenlasrelacionesentremodelos,tenemosquetenerencuentaquesedebe

añadirlarelacióninversa,porejemplo,comohemosvisto,unBugpuedetenervariasActuaciones,

ahoradentrodelmodeloActuacionestenemosqueañadirelmétodobelongsTo.

Figura17:Ejemplodelarelacióninversa

Public function bug(){

Return $this->belongsTo(‘App\Bug’);

}

Page 41: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 41

Para obtener datos de las relaciones basta con llamar almétodo que hace referencia al

modelorelacionadoyaccederemosasusatributos,porejemplo,sideunusuarioquierosabersi

tienehabilitadalasnotificacionesvíacorreo,loharíamosselasiguientemanera:

Figura18:obtenemosunBooleanoparasabersipodemosnotificaralusuario1.

Uso de los modelos

Unavezhemosdefinidotodoslosmodelos,yapodemoscomenzaratrabajarconellos:crear

nuevosregistros,modificarlosoborrarlos;y,también,recuperartodoslosregistrosdelabasede

datos.

Veamosunejemplosencillosobrecómorecuperartodaslasincidencias:

Conelmétodoall()sepuedenrecuperartodoslosregistrosdelatablaBug,estemétodonos

retornaratodoslosdatosenformadeunarray.EstoequivalealaconsultaSELECT*FROMbugs;

Figura19:devuelvetodaslasincidencias

También,podemoshacervariosfiltrospararecuperarlosdatosquenosinteresen,porejemplo,

podemosbuscarporelestadodeunaincidencia,ordenarlos,etc.

Figura20:Enesteejemplohacemosunabúsquedadetodoslosbugsconelestadoiguala5.

Algunosmétodosquepodemosrealizaralosmodelosserían:

All() Where() Find() Max() Min()

Avg() Sum() Get() Save() Delete()

4.2 Sistema de autenticación Comoencualquierplataformaquerequiereelmanejodeusuarios,esmuy importanteel

sistemadeiniciodesesión,yaqueesnecesarioparaempezaratrabajarconlaaplicación.

Elframeworknosdotadeestecomponente,pero,enestecaso,hemoshecholassiguientes

modificaciones:

$canNotify = User::find(1)->settings()->newBugMail;

$allBugs = Bug:all();

$myCompletedBugs = Bug::where(‘status_id’,5)->get();

Page 42: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 42

Autenticación

Comobienhemoscomentadoantes,hemoshecholamodificaciónparaquesololosusuarios

“activos”enlaplataformapuedanaccederaella.

Para ello, hemos sobrescrito elmétodo credentials()de los diferentes servicios que nos

brindael framework, a este tipodeserviciosse les llamaFacades.Deestamanera, aparte de

comprobarlascredencialesdelusuario,comprobamossiestáactivoono.

Unavezelusuariohayapasadolaautenticación,enelmétodoautheticated()aplicaremosla

lógicapararedirigiralusuarioenfuncióndesuperfil,yaseaalpaneldeadministracióndelos

agentesoalpaneldeadministracióndelosclientes.

Figura21:Formulariodeaccesoalaaplicación

4.3 Middleware Losmiddlewaressonunservicioquenosayudaráahacerunfiltradoatodaslaspeticiones

HTTPqueserealizanenlaaplicación.Apartedelmiddlewaredeautenticaciónqueverificasiel

usuarioestaautenticadoenlaaplicación,crearemosotrasparacomprobartressupuestoscasos:

elintentodeaccederazonasrestringidas,elintentodeaccederarecursosqueelusuarionotiene

permisos y, también, el intento de consultar datos que no pertenezcan a la organización del

usuario.

Estosmiddlewaressepuedenimplementaranivelderutasodecontrolador.

Page 43: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 43

Figura22:Ejemplodelmiddlewareretornandoelerror403

Figura23:EjemplodemiddlewareretornandounJSON

4.4 Usabilidad y diseño adaptativo Sehapuestoespecialénfasisenlausabilidadyaccesibilidaddelaaplicaciónweb.Elobjetivo

marcadoesqueelusuariofinalseacapazdealcanzarsusobjetivosconelmínimoesfuerzo,pero

alavez,obteniendounosresultadosóptimos.

Ladistribucióndelcontenidosebasaenunabarravertical,alojadaalaparteizquierdadela

pantalla,dondeaparecerátodoelmenúdelaaplicación;yenunabarrahorizontal,enlaparte

superior de la pantalla, donde se muestran las notificaciones y la foto de perfil del usuario

autenticado.Enlapartecentralesdondemostraremostodoelcontenido,deformamayoritaria,

enformadelistaoenpaneles(widgets).

Page 44: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 44

Figura24:Páginaprincipaldespuésdehaberseautenticadoenlaaplicación

Figura25:Páginadeincidencias

Porotraparte,sehaimplementadoentodalaaplicacióneldiseñoadaptativo,debidoaque

laaplicaciónvadirigidaalosagentes.Comosehacomentadoanteriormente,hayvecesquelos

agentestienenquedesplazarseavisitaralosclientesy,deestamanera,mientrasseencuentran

fueradelaoficina,tienenlaposibilidaddeconectarsedesdesumóviloTablet.Eldiseñoadaptativo

Page 45: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 45

permite el uso de la aplicación con un diseño adaptado a las dimensiones de la pantalla,

disponiendodelasmismasopcionesquedisponemosaccediendodesdeelordenador.Enlafigura

26sepuedevercómoseríalavistadesdeundispositivomóvil:

Figura26:PáginadeBugsvistadesdeundispositivomóvil

Además,sepuedeobservarqueelmenúprincipalhaquedadoreducidoyocultoenlaparte

superiordeldispositivodebidoalasdimensionesdelapantalla.

Enlafigura27sepuedeobservarcómoseadaptalavistaalasdimensionesdeunaTablet.

Figura27:Páginadedashboardvistadesdeunatablet

Page 46: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 46

4.5 Sistema de CRUD Lasacciones:crear,leer,actualizaroborrar(delassiglasCread,Read,Update,Delete)son

básicas en esta aplicación. Con estas accionespodemos crear nuevos registros,modificarloso

borrarlasincidencias,losusuarios,loseventosylosclientesenlaaplicación.

TodasestasaccionessehacenatravésdellamadasAjax,quedetallaremosenotroapartado.

Acontinuación,semostraráelCRUDdelmódulodeincidencias:

Para crear una nueva incidencia debemos hacer clic en el botón izquierdo de la parte

superior.Unavezhayamoshechoclic,seabriráunpop-upconelformulariodecrearunanueva

incidencia(figura28).

Figura28:pop-upparacrearunanuevaincidencia.

Para leer y/omodificar un registrode la aplicación semostrará siempreun listadocon

todoslosregistros.Paraaccederaunodeellos,bastaconhacerclicsobreeltítulodelaincidencia.

Unavezhechoelclic,seabriráelpop-upcondichainformación.Apartedelainformaciónbásica

de la incidencia, se muestran las pestañas de información del cliente, actuaciones sobre la

incidenciayficherosadjuntos.

Page 47: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 47

Figura29:Listadodeincidencias

Figura30:Pop-upconlainformacióndeunaincidencia

Paraborrar un registro, basta con abrir una incidencia y hacer clic en el botónDelete,

seguidamente haremos la llamada al controlador para borrar las relaciones que tienen una

incidencia tales como las actuaciones, el historial de estados, los ficheros adjuntos y después

borraremoselregistro.

Figura31:Pop-updeconfirmaciónalborrarunaincidencia

Page 48: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 48

4.6 Subir ficheros Alahoradeañadirnuevasincidencias,aveces,elclientenecesitaadjuntarunacapturade

pantalla del error en cuestión o alguna documentación extra que pueda servirde ayuda a los

técnicos a la hora de resolverla. Por ello, se ha habilitado la posibilidad de subir ficheros y

adjuntarlosaunaincidencia,losformatosquepermitelasubidadeficherosson .pdf, .jpeg, .jpg,

.png,.doc,.docx,.xlsy.xlsx.

Estosficherossealmacenanenelservidorenlacarpeta/public/storageysonaccesiblesa

travésdelacarpeta/storage.

Figura32:Listadodenotasyficherosadjuntos

Hayquedestacarque,cuandohayalgúnficheroadjuntoquehayasubidoelclientedesdesu

plataformaoelagente,estostienenunpequeño iconodeavisotantoenel listadodetodas las

incidenciascomoalahoradeabrirunadeellas.

Figura33:Iconodeavisodeficherosadjuntosalabrirunaincidencia.

Page 49: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 49

4.7 Llamadas asíncronas Ajax TodoelcontenidodinámicoestaráservidomediantelatecnologíaAJAX.Alserunaaplicación

quevaaestarencontinuomovimientoesimportantequelascargasdecontenidonodificultenla

experienciadelusuario.

Estatecnologíatrabajaráenelladodelcliente(navegador),porlotanto,noralentizaremos

lawebalconectarnosconelservidor.

Pararealizarunabúsqueda,tradicionalmenteloqueseharíaespasarlosparámetrospor

GET, es decir los parámetros enviados por la url, y el servidor nos devolvería los resultados

refrescandotodalapáginaweb.Estopuedellegarasermolestositenemosqueiractualizandola

página cada vez que no encontremos resultados. Para evitar el ir refrescando la página y

recargando recursos innecesariamente, con AJAX solo cargamos el contenido que estemos

solicitandoalservidor.

PasamoslosparámetrosyhacemoslapeticiónGETasíncronamentesinqueelusuariofinal

sedécuentayelresultadodelservidorlocapturamosmedianteelmétodosuccess(response)de

AJAX.EstemétodonosdevuelvelarespuestaenformadeJSONymediantejQuerylomostramos

enHTML.

Noobstante,sitenemosungranregistrodedatosynoavisamosalusuariofinalqueseestá

trabajandoenello,porejemploalahoradebuscar,haremosusodelmétodobeforeSend()para

avisarqueseestárealizandosupetición.

Figura34:Loaderspinner,elementoCSS

ParalasaccionesdeenviardatosyqueelservidorlosguardetambiénharemosusodeAJAX.

CuandoabrimoselpopupdenuevoregistroenviamosnuestrosdatosporPOST;sisedieraalgún

erroralpasarlosdatos,enestecaso,elservidornosdevolveráunmensajeylomostraremossin

necesidaddevolverarecargartodoslosrecursos(Figura35).

Page 50: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 50

Figura35:Respuestadelservidorvalidandolaentradadedatos

4.8 Seguridad Entodoslosformulariosdondeelusuariofinalentradatosalsistema,sehaprevenidola

seguridadcontrainyeccionesSQL,quepuedenponerenpeligrolosdatosdelaaplicación,ylos

ataquesdetipoXSS,quehabíamoscomentadoanteriormente,quepuedenalterarlaintegridadde

nuestraaplicación.

VeamosunejemplodeXSS:enestecaso,hemosentradocomotítulounscriptconunalert

deJavaScript,pero,también,podemoshacerunaredirecciónaotraweb,cambiarelcontenidode

lawebolaincrustacióndeiframes.

Figura36:EjemplodeataqueXSSdeJavaScript

Page 51: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 51

4.9 Permisos Lospermisosdeaccionesoaccesosaunrecursodelaaplicaciónpasaránprimeroporuna

pequeñacomparacióndepermisoscomolosdeadministrador,agente,informadoryclienteque

sehandefinidoenlaaplicación.

Cuando un usuario determinado inicia sesión, dependiendo del perfil, se mostrarán

diferentesopciones.Enelcasodeunadministrador,porejemplo,tendráaccesototalatodaslas

funcionalidades,encambio,enelcasodeunclientesuaccesoestarálimitado.

Noobstante,estossonsimplescondicionesenlavista,paraqueenlapáginanosemuestren

dichasopciones,peroapartedeesto, también lo controlamosaniveldemiddlewaredonde se

filtranlaspeticionesysedecidesidaronoacceso.

4.10 Eventos / Notificaciones Loseventossonmuyútilesenlaaplicación.Estossehanimplementadoparapoderescuchar

todoloquepasadentrodelamismacomo,porejemplo:cuandounaincidencialahacreadoun

cliente, cuando asignamos una incidencia a un agente o cuando creamos un evento en el

calendario.

Estoesmuyútilyaque,dealgunamanera,nospermitesepararlalógicadelaaplicacióny

crearuneventoconvarios“oyentes”porseparadoymantenerlimpionuestrocódigo.

Figura37:Menúdenavegación

delperfiladministradoroagente

Figura38:Menúdenavegación

delperfilcliente

Page 52: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 52

Porejemplo,cuandounaincidenciasecreaenlaaplicaciónqueremoshacervariasgestiones

enellacomo,porejemplo,añadirloalhistóricoynotificar(tantoporlaaplicacióncomopore-

mail).Porello,llamamosaleventoBugCreated,quetienevarios“oyentes”queseencargaránde

escucharyaplicarestalógica.

Figura39:E-maildenotificacióncuandounaincidenciasehacreado

Notificaciones

Respectoalasnotificacionesdelaaplicación,cuandoelagenteestéautenticadoytengaalgún

tipo de notificación, la aplicación actualizará el título del navegador con el número de

notificacionesquetengayavisaráconunbrevesonido.

También,enlabarradenavegación,eneliconodel“sobre”apareceráunsímboloqueavisa

delasnotificacionespendientesdever.

Figura40:Avisodenotificaciones

Page 53: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 53

Figura41:Notificacionesdeunclienteenlaaplicación

4.11 Componentes de la aplicación

Listados

En lo que se refiere la gestión de incidencias y/u otros apartados donde se necesite la

visualizacióndetodoslosregistrosseguiránelmismoformato.Todasellassemostraránenforma

delistacondiferentesopcionesqueelusuariopodrárealizar.

Enestecaso,enlasgestionesdeincidencias,semuestraunlistadoconlainformaciónbásica

delasincidenciascomoelnombre,elestado,laprioridad,cuandosehacreado,lasvecesqueel

clientenoshadadountoqueylasopcionesrápidasquesepuedenrealizarsinlanecesidadde

abrirunaincidencia(porejemplo,accederrápidamentealosarchivosadjuntos,añadirunnuevo

toqueocompletarlaincidencia).

Figura42:Listadoderegistrosdelasincidencias

Page 54: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 54

Buscadores

Loslistadosdisponendeunbuscadorsencillo,setratadeuncampodetextojustoarribade

cadatabla.Estebuscador,usalatecnologíadejQueryquehacelabúsquedaenelladodelcliente

sinhacerningunallamadaalservidor,porloquelamaneradebuscaresrápida.

Además,disponedeunabúsquedaavanzadacon la finalidaddesimplificarel tiempoala

horaderealizarlabúsquedadeincidencias.

Este sí que hace uso a llamadas del servidor ya que podemos filtrar por estados, por

reproducibilidad,porprioridades,categorías,porunclienteenespecíficoysobretodoporfecha

operiodosdefechas.

Aúnquecomohemoscomentado,lasllamadassonalservidor,peroalhacerusodeAjaxlas

llamadasnodificultanalausabilidaddelusuario.

Figura43:Buscadoravanzadodeincidencias

Widgets

Loswidgetsseusaránparamostrar informaciónrápidaalusuario.Suutilidadsebasaen

mostrarunapinceladaodatosimportantesdeinformaciónsobreeventospróximos,actividades

quehaceelusuario,etc.

Figura44:Widgettimeline

Page 55: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 55

Calendario

Altrabajarconfechasenlaaplicaciónsobrelosrequerimientosymovimientosquehacen

los agentes, se ha implementado un calendario común para todos los trabajadores donde su

principaltareaesmostrar,enformadecalendario,loseventosprogramadosdecadaunodeellos.

Aquíelusuariopodráañadirnuevoseventosdel tiporeunión,vacacionesuotros.También,se

mostraránaquílasincidenciasprogramadasconunafechaenconcreto.

Figura45:Pantallageneraldelcalendario

Pop-ups

Lamaneratradicionaldecualquieraplicaciónparamostrarlainformacióndetalladadeun

registroesredirigiralusuarioaunanuevavistacontodalainformacióny,después,setieneque

volveralavistaanteriorparaconsultartodoellistadoderegistroy/oaccederaotroregistro.

Parasolucionarestetipodenavegabilidadyhacerlomáscómodoyrápidoalusuariosehan

implementado las vistas parciales o pop-ups. Esta solución, evita todo esto haciendo que la

informaciónseabraenlamismapáginaenformadediálogooModal.

Figura46:Modalmostrandolainformacióndelcliente

Page 56: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 56

5. Pruebas y resultados Despuésdelafasedeimplementaciónsellevóacabolapuestaenmarchadelaaplicacióna

unaempresaITqueofreceelservicioSAT.Trasdossemanasdepruebasenunentornoreal,4

técnicos pudieron probar con total libertad la aplicación y posteriormente se ha realizado un

cuestionarioparasaberelgradodesatisfaccióndelosobjetivosestablecidos.

Page 57: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 57

Comosepuedeobservarlos4técnicosestándeacuerdodequelagestióndeincidenciasha

cumplidoconsusexpectativasyhaayudadoalaorganizacióndesustareasy/oladesus

compañeros.

Page 58: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 58

Porotrolado,el50%delostécnicoscreenqueenocasionesesconvenientedequeel

clienteestéaltantodeltranscursodesuincidenciayelotro50%piensaquepuedeser

beneficiosoparaambaspartes.

Y,porúltimoreferentealausabilidaddelaaplicación,el75%delostécnicoscreenquesí

poseelaaplicaciónconunabuenausabilidadyel25%restantecreequedeberíaaúnmejorarse.

Page 59: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 62

6. Conclusiones ConsideroquelosobjetivosespecíficosdescritosenlaintroduccióndeesteProyectoFinal

deGradohansidosatisfactoriamentecumplidosgraciasalosconocimientospreviosadquiridos

en el grado, así como la experiencia en el desarrollo de software que he conseguido en el

transcursodeldesarrollodelaaplicación.

He podido profundizar de manera positiva todo lo relacionado con la arquitectura de

softwarey,sobretodo,laimportanciaquetieneunbuendiseñoenlaarquitectura,yaqueayuda

aquelaimplementaciónseamásfácil.Sobreelusodeunframeworkyelconjuntodetecnologías

que lo envuelven, he podido comprobar que usar el patrón MVC hace que el programa sea

modulableyescalableparafuturasampliacionesomejoras.

Enloquerespectaconlaaplicaciónwebylosobjetivosgenerales,sehaconseguidoagilizar

eltiempoderespuestayaquelamayorpartedegestiónlahacemosenelladodelnavegadory

sólo recurrimos al servidor para consumir datos o insertar nuevos registros. También, la

usabilidaddelaaplicación,tantoenescritoriocomoendispositivosmóviles,haayudadoaquela

usabilidaddeusuarioseacómodayfácildeusar.

Porotrolado,sehaconseguidoagilizaraúnmáslastareasdelostécnicosgraciasalacceso

delosclientesenlaplataformaparaqueellosmismopuedancrearincidenciasy,deestamanera,

lostécnicosahorraneltiempodecrearlas.

Otropuntofavorabledelaaplicacióneselhechoqueseamultiplataforma,esdecir,lapodrán

usarfueradelaoficinaconcualquierdispositivoquetengaconexiónainternet.Estacaracterística

esimportanteyaquelostécnicosavecesestánenmovimientoynecesitanconsultarinformación.

Laproductividaddetrabajoesmuchomejoryaquesepuedereasignarincidenciasparaque

otrotécnicolacontinúeygraciasalasactuacionesonotasquepuedenadjuntarlosclientes,el

técnicoreasignadosabrápordondecontinuar.

Finalmente,quieroresaltarlapuestaenmarchadeesteproyectoenunentornorealdónde

técnicosinformáticoshanhechousodelaaplicaciónysehapodidocomprobarquelaherramienta

cumplecontodoslosrequisitosiniciales.

6.1 Futuras ampliaciones Graciasalapuestaenmarchasehandetectadomejorasparapoderintegraral100%esta

aplicaciónenunentornorealyfuncional.

Page 60: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 60

Enloquerespectaalagestióndeincidenciasseríainteresanteañadirgeolocalizacióndel

dispositivo.Estaampliaciónseríamuyútilyaque,silaincidenciarequiereeldesplazamiento,el

técnicopodríaconsultarsuubicaciónenelmapaypodríagenerarunarutahacialalocalización

delcliente.

Porotrolado,sepodríaimplementarlafacturacióndelasincidenciasunavezfinalizadasya

queelsistemaguardatodaslasactuacionesquesehanllevadoacaboynotificavíaemailalcliente

delcierredelaincidencia.Seríainteresantequesepudieraemitirautomáticamentelafacturayse

cargaraelreciboporelbancodeformaautomática.

Por último, en cuanto a la aplicaciónweb, sería interesante implementar un sistema de

notificacionesPush. Los técnicos son notificados vía email sobre alguna actualización o nuevo

registrodeincidencias,perosielagentenoestápendientedelemailonoestáautenticadoenla

aplicación no podrá saber si hay nuevas incidencias. Por ello, con las notificaciones Push

podríamosavisarlesyasíestaríanpendientessobreloqueocurreencadamomento.

Parafinalizar,esimportantetenerseguridadconlastransferenciasdedatosqueviajanentre

elnavegadoryelservidor.Actualmente,estamosusandoelprotocoloHTTP,estoquieredecirque

lastransferenciasnotienenningúntipodeseguridadypodríamossufrirataquesdeltipo“manin

themiddle”dondepodemoscorrerelriesgodequeelatacanteobtengacredencialesoinformación

confidencial.Debidoaesto,sepodríaimplementarelprotocoloHTTPS,detalmaneraquelosdatos

setransferiríancifradosypodríamosprevenirestosataques.

Page 61: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 61

7. Glosario AJAX: Asynchronous JavaScript And XML. Es una técnica de desarrollo de web para crear

aplicacionesinteractivassinlanecesidaddevolveracargarelcontenido.

Artisan:Esunainterfazdelíneadecomandosqueofreceunconjuntodecomandosqueayudana

realizardiferentestareasduranteeldesarrollodelaaplicación

Backoffice:EnelentornoIThacereferenciaatodaslastareasdelagestióndeunaempresa.

Framework:Esunpatrónoesqueletoparaeldesarrolloy/oimplementacióndeunaaplicación.

CSS:CascadingStyleSheets.Esunlenguajedediseñoquepermitetenerunaaparienciaagradable

alahoradediseñarunapáginaweb.

HTML:HyperTextMarkupLanguage.Lenguajedemarcasparalaelaboracióndepáginasweb.

Javascript:Esunlenguajedeprogramacióninterpretadoenelladodelcliente,permitemejorar

lainterfazdeusuarioyhacerpáginasdinámicas.

JSON:JavascriptObjetNotation.Esunformatodetextoparaelintercambiodedatos.

Jquery:Esunabibliotecade Javascript,que suprimera funciónessimplificar lamanipulación

DOM,deAJAXymanejodeeventos.

MVC:Modelo,vista,controlador.Esunestilodearquitecturadesoftwarequeseparalalógicade

negocio,lainterfazdelusuarioylapersistenciadedatos.

MYSQL:Sistemadegestióndebasededatosrelacional.

PHP:Hypertextprepocessor.Esunlenguajedeprogramacióndecódigoabierto,utilizandoparael

desarrollodeaplicacionesweb.Interpretadoaladodelservidor,perosepuedeincrustarenHTML.

Responsivewebdesign:Diseñodewebadaptable,esunafilosofíadediseñowebcuyoobjetivo

esadaptarlasvistasHTMLalosdiferentestamañosdelosnavegadoresymóviles.

SAT:ServiciodeAsistenciaTécnica.Hace referenciaaldepartamentooempresaqueofrece un

serviciodeatencióntécnica,enestecasoparaelsectorIT.

Template:Esunconjuntodearchivosquedeterminanlaestructurayelaspectodeunaaplicación

web

ORM:ObjectRelationalMapping.Esunatécnicadeprogramaciónparaconvertirdatosentreel

lenguajedeprogramaciónylautilizacióndeunabasededatos.

Widget:EnelentornoIT,esunapequeñaaplicacióndondesemuestracontenidoenalgúnlugar

delapáginaweb.

Page 62: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 62

8. Bibliografía Bootstrap. (s.f). Documentation v4.1. Recuperado el 1 de junio del 2018 de

https://getbootstrap.com/docs/4.1/getting-started/introduction/

Joanna Ngai (2017). How to be a Design Usability Champ. Recuperado el 8 de marzo del 2018 de

https://webdesign.tutsplus.com/articles/how-to-be-a-design-usability-champ--cms-29610

Kscarfone & more. (2015). MVC architecture. Recuperado el 15 de marzo del 2018 de

https://developer.mozilla.org/en-

US/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture

Mehdi Achour & more. (2018). PHP Manual. Recuperado 2 de abril del 2018 de

http://php.net/manual/en/index.php

Laravel. (s.f.). Documentación oficial Laravel 5.6. Recuperado 22 de marzo del 2018 de

https://laravel.com/docs/5.6

The jQuery Foundation. (s.f). Ajax. Recuperado 5 de abril del 2018 de

http://api.jquery.com/category/ajax/

Page 63: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 63

Anexo. Manual de usuario EstemanualvadirigidoalostrabajadoresqueprestanelservicioSATyparalosclientesque

usaránestaherramientacomoplataformapararegistrarincidencias.

Manual para usuarios SAT

1. Acceder a la aplicación

ParahacerusodelaaplicaciónaccedealasiguienteURL:http://bt.accon.com/

Seguidamente,introducetuusuarioycontraseña:

Usuario:[email protected]

Contraseña:12345aA

Unavezintroducidolosdatosdeacceso,hazclicenelbotónLogin.

Figura21:Formulariodeaccesoalaplataforma

2. Crear una Incidencias

Enesteapartadosemostrarácomoregistrarunanuevaincidencia.

Paraello,enelmenúlateraldelaparteizquierda,hazclicenBugs,yseguidamenteenBugList.

Unavezdentro,hazclicenelbotónNewreport.

Figura49:Botónpararegistrarunaincidencia

A continuación, se mostrará el siguiente pop-up dónde introduciremos toda la información

necesaria.

Loscamposrequeridosson:

Page 64: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 64

1. Título:describireltítulodelaincidencia

2. Descripción:describirelproblemadelaincidencia.

3. Teléfono:delapersonaquereportalaincidencia

4. Email:delapersonaquereportalaincidencia

5. SO:sistemaoperativo

6. Asignara

7. Cliente

8. Categoría

9. Estado

10. Prioridad

11. Reproducibilidad

12. Esenremoto

13. Esevento

a. Fechainicio

b. Fechafin

El resto de los campos no son obligatorios, pero se recomienda rellenarlos para así tener la

máximainformacióndelaincidencia.

Parafinalizar,hazclicenSavechanges.

Figura50:Formularioparacrearunanuevaincidencia

Page 65: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 65

¿Cómo cambiar el estado de una incidencia?

Paraello,hazclicsobreunaincidenciadisponibleenellistadodeMycurrentbugsoAll

bugs.

Figura51:Listadodeincidenciaconeltooltip

Seguidamenteseabrirálaincidenciaenformadepop-up.

Unavezabierto,enelselectordeStatus,seleccionaelestadoyparafinalizarhazclicenel

botónSavechanges.

Figura52:Semuestraelselectorparacambiarelestadodelaincidencia

Asignar o re-asignar incidencia

Paraasignaroreasignarunaincidencia,existenvariasformasdehacerlo.

Lopodemoshacercuandoseestáregistradounanuevaincidencia,siqueremosmodificarla,

consultarla.

Paraello,enelpop-updelaincidencia,seleccionamosaquienasignamoslaincidenciaenel

selectordeAssignto.

Figura53:selectorparacambiardeasignación

Page 66: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 66

Desdeelapartadodeadministración

Tambiénexistelaposibilidaddereasignarlasincidencias.Paraello,enelmenúlateralhaz

clicenBugsyseguidamenteenBugsettings.

Figura54:SubmenúdeBugs

Acontinuación,enelwidgetReassingbugs, semuestradoscolumnas.Unadeellases los

usuariosconsusincidenciasyenlaotracolumnalostécnicosalosquereasignarlaincidencia.

Parahacerlareasignación,siguelossiguientespasos:

1. En la columna izquierda, haz clic sobre un trabajador, seguidamente se muestra sus

incidencias.Hazclicenlasincidenciasareasignar.

2. Seguidamente,enlacolumnaderecha,seleccionaaltrabajador.

3. Yporúltimo,hazclicenelbotónReassign.

Figura55:Volcadodere-asignacióndeincidencias

Cerrar una incidencia

Enesteapartado,veremoscómodarporfinalizadaunaincidencia.

Sepuedehacerdedosformas,unadeellasesabrirlaincidenciaycambiarelestado,como

sehacomentadoenelapartado¿Cómocambiarelestadodeunaincidencia?

Page 67: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 67

Laotramaneraesdesdeellistadodeincidencias.Paraello,enlaúltimacolumna,hazclicen

elbotónCheck.

Figura56:Opcionesdeunaincidencia.

3. Gestionar calendario

Enesteapartado,podemosconsultar loseventosprogramadosde los técnicosy también

podemosregistrarnuevoseventos.

ParaaccederalapartadodeCalendario,hazclicenelmenúlateralenlaopciónCalendar.

Figura57:Pantalladecalendario

Registrar un evento

Paraello,hazclicenelbotónNewevent,queseencuentraenlapartesuperiordelapantalla.

Seguidamentesemostraráunpop-upconlossiguientescamposarellenar:

1. Título:títulodelevento

2. Descripción:descripcióndelevento

3. Asignara:aquepersonaqueremosasignaresteevento

4. Tipo:tipodelevento,puedeserreunión,vacacionesuotros.

5. Empieza:fechayhoradelevento

6. Finaliza:fechayhoradelevento

Unavezrellenados,hazclicenelbotónSavechangespararegistrarelevento.

Page 68: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 68

Figura58:Pop-uppararegistrarunnuevoevento

4. Gestionar clientes

Enesteapartadopodemosver todos los clientes registradosen laplataformay crearun

nuevocliente.

ParaaccederalapartadodeClientes,hazclicenelmenúlateralenlaopcióndeCostumers.

Figura60:Pantalladeclientes

Registrar cliente

Paraello,hazclicenelbotónNewcostumer.Queseencuentraen lapartesuperiorde la

pantalla.

Seguidamentesemostraráunpop-upconlossiguientesdatosarellenar:

1. Nombre:nombredelcliente

2. Descripción:informaciónrelevantedelcliente

3. Teléfono

4. Tipodesuscripción:losdiferentestiposdeservicios

5. Localización:paraañadirlageolocalizacióndelcliente

Page 69: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 69

6. Siesactivo

ParaguardaralclientehazclicenelbotónSavechanges.

Figura61:Pop-uppararegistrarunnuevocliente

5. Gestionar usuarios

Enesteapartadopodemosvertodoslosusuariosregistradosenlaplataformaycrearun

nuevousuario.

ParaaccederalapartadodeUsuarios,hazclicenelmenúlateralenlaopciónUsers.

Figura62:pantalladeusuarios

Registrar usuario

Enesteapartadopodemosregistrarusuarioscondiferentesperfilesdentrodelaaplicación.

Paraello,hazclicenelbotónNewuser.Queseencuentraenlapartesuperiordelapantalla.

Seguidamentesemostraráunpop-upconlossiguientesdatosarellenar:

1. Nombre

2. Email

3. Teléfono

Page 70: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 70

4. Contraseña

5. Cliente:seleccionarelcliente

6. Role:seleccionarelrolenlaaplicación

7. Siestáactivo

Figura63:Pop-uppararegistrarunnuevousuario

6. Settings

Enesteapartadopodemosvercomomodificarlainformacióndeusuarioycomoajustarlas

notificaciones.

ParaaccederalapartadoseAjustes,hazclicenelmenúlateralenlaopciónSettings.

Figura64:Pantalladeajustesdelusuario

Modificar el perfil

Paraello,hazclicenlapestañaProfilesettings,seguidamentesemostraráelformulario

paramodificarlosdatosdeperfil:

1. Nombrequesemostraraenlaaplicación

2. Teléfono

3. Contraseña

Page 71: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 71

4. Confirmacióndecontraseña

Unavezintroducidoloscampos,paraguardarhazclicenelbotónSavechanges.

Figura65:Formulariodeedicióndelperfil

Modificar los ajustes de notificación

Paraello,hazclicenlapestañaNotificationssettings,seguidamentesemuestraenformade

tablatodoslosajustesdeavisoquepodemosactivar/desactivar.

Paraguardarloscambios,hazclicenelbotónSaveChanges.

Figura66:Formulariodeajustedenotificaciones

Manual para clientes

1. Acceder a la aplicación

ParahacerusodelaaplicaciónaccedealasiguienteURL:http://bt.accon.com/

Seguidamente,introducetuusuarioycontraseña:

Page 72: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 72

Usuario:[email protected]

Contraseña:12345aA

Unavezintroducidolosdatosdeacceso,hazclicenelbotónLogin.

Figura21:Formulariodeaccesoalaplataforma

2. Crear una Incidencias

Enesteapartadosemostrarácomoregistrarunanuevaincidencia.

Paraello,enelmenúlateraldelaparteizquierda,hazclicenBugs,yseguidamenteenBugList.

Unavezdentro,hazclicenelbotónNewreport.

Figura49:Botónpararegistrarunaincidencia

Acontinuación,semostraráelsiguientepop-updóndeintroduciremostodalainformación

necesaria.

Loscamposrequeridosson:

1. Título:describireltítulodelaincidencia

2. Descripción:describirelproblemadelaincidencia.

3. SO:sistemaoperativo

4. Categoría

5. Prioridad

6. Reproducibilidad

7. Archivosadjuntos

8. Siesevento

a. Fechainicio

b. Fechafin

Page 73: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 73

Elrestodeloscamposnosonobligatorios,peroserecomiendarellenarlosparaasítenerla

máximainformacióndelaincidencia.

Parafinalizar,hazclicenSavechanges.

Figura50:Formularioparacrearunanuevaincidencia

3. Settings

Enesteapartadopodemosvercomomodificarlainformacióndeusuarioycomoajustarlas

notificaciones.

ParaaccederalapartadoseAjustes,hazclicenelmenúlateralenlaopciónSettings.

Figura64:Pantalladeajustesdelusuario

Modificar el perfil

Paraello,hazclicenlapestañaProfilesettings,seguidamentesemostraráelformulariopara

modificarlosdatosdeperfil:

1. Nombrequesemostraraenlaaplicación

Page 74: Trabajo Final de Grado GRADO DE INGENIERÍA INFORMÁTICA ...diposit.ub.edu/dspace/bitstream/2445/130981/2/memoria.pdfPor último, respecto al diseño, este se caracteriza por ser atractivo

Gestión de incidencias multiplataforma 74

2. Teléfono

3. Contraseña

4. Confirmacióndecontraseña

Unavezintroducidoloscampos,paraguardarhazclicenelbotónSavechanges.

Figura65:Formulariodeedicióndelperfil

Modificar los ajustes de notificación

Paraello,hazclicenlapestañaNotificationssettings,seguidamentesemuestraenformade

tablatodoslosajustesdeavisoquepodemosactivar/desactivar.

Paraguardarloscambios,hazclicenelbotónSaveChanges.

Figura66:Formulariodeajustedenotificaciones