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


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!


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.


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.


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.


Í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


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


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


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.


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.


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


1.5 Planificación temporal

1.5.1 Distribución del tiempo

Enlafigura2semuestralaplanificaciónquesellevaráacaboenesteproyecto,asícomo

lasentregas.

Figura2:Hitosydistribucióntemporaldelproyecto


1.5.2 Diagrama de Gantt

Figura3:Planificacióndelproyecto


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.


• 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.


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.


2.2.1 Diagrama de casos de uso

Sistema de autenticación

Figura4:Diagramadecasodeuso-Autenticación

Sistema de Incidencias

Figura5:Diagramadecasodeuso-Incidencias


Sistema de Clientes

Figura6:Diagramadecasodeuso-Clientes

Sistema de Calendarios

Figura7:Diagramadecasodeuso-Calendarios

Sistema de Usuarios

Figura8:Diagramadecasodeuso-Usuarios


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


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


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


4. ElactorrellenalosdatosyhaceclicenCrear.

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

yvolveráallistadodeincidencias.

UC5:GestionarincidenciaDescripción: Permitegestionarlasincidencias.

Actores: Administradoresylosagentes


Flujoprincipal: 1. ElactorseleccionalaopcióndeIncidencias,enelmenúlateral

2. Elsistemamuestratodaslasincidenciasquesehancreadoylas

ordenaporfechadescendiente.

3. Elsistemamuestraopciónfiltrarincidencias,crear,editar,

borrar

Post-condición: -

UC06:BuscarincidenciaDescripción: Permitebuscaryfiltrarincidencias



• 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.


UC07:CrearincidenciaDescripción: Permitecrearincidencias.

Actores: Administradoryagentes



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



• Sololopuedenhacerlosadministradoresyagentes

Flujoprincipal: 1) Elsistemamuestraunlistadocontodaslasincidencias

2) Elactorseleccionaincidencia

3) Elsistemaabrelaincidenciaenunpop-upconelformulario

4) ElactorseleccionaaunclienteenelcampodeClienteyhace

clicenguardar.


7. Elsistemadevuelveunmensajedesatisfacción

Post-condición: Elsistemaguardalaincidenciayañadeenelhistóricodelcliente

UC09:AsignaragenteDescripción: Permiteasignarunaincidenciaaunagente.




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



Flujoprincipal: 1. Elsistemamuestraunlistadocontodaslasincidencias.

2. Elactorseleccionaunadeellas.

3. Elsistemamuestralainformacióncompletadelaincidenciaen

formadepop-up.

4. Elactoractualizalosdatosdelaincidenciayhaceclicen

Guardar.

5. Elsistemaguardalosdatosydevuelveunmensajede

satisfacción.

Post-condición: Elsistemacompruebaquelosdatosrequeridossecumplan,delo

contrarionoguardalaincidencia.


Sisecumplenelsistemaguardalamodificaciónysiesnecesario

notificaalcliente.

UC11:Borrarincidencia

Descripción: Permiteborrarunaincidencia




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.


satisfacción.

Post-condición: Elsistemaguardaelnuevocliente


UC13:Buscarcliente

Descripción: Permitebuscaruncliente



• 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



• HaberrealizadoalgúnUC11:Crearcliente

Flujoprincipal: 1. Elsistemamuestraunlistadocontodaslosclientes.

2. Elactorseleccionauncliente

3. Elsistemamuestralainformacióncompletadelclienteen

formadepop-up.

4. ElactoractualizalosdatosdelclienteyhaceclicenGuardar.


satisfacción.


contrarionoguardaelcliente.

Sisecumplenelsistemaguardalamodificación.

UC15:Borrarcliente

Descripción: Permiteborraruncliente




• HaberrealizadoalgunaUC11:Crearcliente

Flujoprincipal: 1) Elsistemamuestraellistadodeclientesconunaopciónala

derechadeborrar.

2) Elactorhaceclicenborrar.


Post-condición: Elsistemaborraelclientedelsistemayactualizaellistado.

UC16:Crearcalendario

Descripción: Permitecrearnuevoseventosdeincidencias




Calendarioytambiénmuestraunapequeñaopciónalrealizarel

UC05:Crearincidencia.

2. ElactorseleccionarálaopciónCrearnuevoevento


siguientesdatos:

a. Título

b. Descripción

c. Aquienleasignaelevento

d. Fechadeinicioyfechafin


5. Elsistemaguardalosydevuelveunmensajedesatisfacción.

Post-condición: Elsistemaguardaelnuevoeventoynotificaalagentequeseleha

asignadoelevento.

UC17:Modificarcalendario

Descripción: Permitemodificaruneventoprogramado



• HaberrealizadoalgúnUC15:Crearcalendario


Flujoprincipal: 1. Elsistemamuestrauncalendariocontodosloseventos

programados.

2. Elactorseleccionaunevento

3. Elsistemamuestralainformacióncompletadeleventoen

formadepop-up.

4. ElactoractualizalosdatosdeleventoyhaceclicenGuardar.


satisfacción.


contrarionoguardaelevento.


UC18:Borrarcalendario

Descripción: Permiteborraruneventoprogramado



• HaberrealizadoalgunaUC15:Crearcalendario

Flujoprincipal: 1) Elsistemamuestraelcalendariodeloseventosconunaopción

aladerechadeborrar.



Post-condición: Elsistemaborraeleventodelsistemayactualizaelcalendario.

UC19:Crearusuario

Descripción: Permitecrearnuevosagentesdentrodelaaplicación.



Flujoprincipal: 1. ElsistemamuestraenlaparteizquierdalaopcióndeUsuarios

2. ElactorseleccionarálaopciónCrearusuario


siguientesdatos:

a. Nombre

b. Correoelectrónico


c. Teléfono

d. Contraseña

e. Eltipoderol

f. Ysiestáactivoono



satisfacción.


contrarionocreaelnuevousuario.

Sisecumplenelsistemalocrea.

UC20:Buscarusuario

Descripción: Permitebuscarunagente



• HaberrealizadoalgúnUC19:Crearusuario

Flujoprincipal: 1. ElsistemamuestralaopcióndeUsuariosenelmenúizquierdo


3. Elsistemamuestraunlistadocontodoslosagentesactivosyla

opcióndeBuscaragente.

4. Elactorescribeunparámetrodebúsquedayhaceclicen

buscar.

5. Elsistemadevuelvelosregistrosqueseasemejanala

búsqueda,enformatodelista.

Post-condición: Elsistemacompruebaydevuelveelregistroenellistadode

agentes.

UC21:Modificarusuario

Descripción: Permitemodificarlosdatosdelosclientes



• HaberrealizadoalgúnUC19:CrearUsuario

Flujoprincipal: 1. Elsistemamuestraunlistadocontodoslosusuarios.


2. Elactorseleccionaunagente

3. Elsistemamuestralainformacióncompletadelagenteen

formadepop-up.

4. ElactoractualizalosdatosdelagenteyhaceclicenGuardar.


satisfacción.


contrarionoguardaelagente.


UC22:Borrarusuario

Descripción: Permiteborrarunagente



• HaberrealizadoalgunaUC19:Crearagente

Flujoprincipal: 1) Elsistemamuestraellistadodeusuariosconunaopciónala

derechadeborrar.



Post-condición: Elsistemaborraelagentedelsistemayactualizaellistado.

UC23:Modificardatos

Descripción: Permitealosusuariosdelsistemaactualizarsusdatosbásicos.



Flujoprincipal: 1. ElsistemamuestralaopcióndeEditarperfilenelmenú

izquierdo


3. Elsistemamuestratodalainformacióndelusuarioenun

formulario

4. ElactormodificasusdatosyhaceclicenActualizar

5. Elsistemaguardalanuevamodificaciónymuestraunmensaje

desatisfacción


Post-condición: Elsistemaguardalanuevamodificacióndelusuario.

UC24:Ajustarnotificaciones

Descripción: Permitealosusuariosdelaaplicaciónpoderhabilitaro

deshabilitarlasnotificacionesdeescritorio

Actores: Administradores,agentesyclientes


Flujoprincipal: 1. ElsistemamuestralaopcióndeAjustesenelmenúizquierdo


3. Elsistemamuestrauninputdehabilitar/deshabilitar

notificaciones

4. Elusuarioseleccionaalgunadelasopciones

5. Elsistemaguardalanuevaconfiguración

Post-condición: Elsistemaguardalaconfiguracióndelactor.

UC25:Reasignarincidencias

Descripción: Permitealosadministradoreselvolcadodetodasounadelas

incidenciasaotroagente.

Actores: Administrador


• HaberrealizadoalgúnUC05:Crearincidencia

• HaberrealizadoalgúnUC19:Crearusuario

Flujoprincipal: 1. ElsistemamuestralaopcióndeAjustesenelmenúizquierdo


3. ElsistemamuestraunapartadodeVolcadodeincidencias

4. Elactorseleccionaunagente

5. Elsistemadevuelvetodaslasincidenciasdedichoagenteyun

listadodeagentesalquequeremosvolcarlasincidencias

6. Elactorseleccionaunaotodaslasincidencias,y

posteriormenteseleccionaalagentealquequeremosvolcarlas

incidencias


7. Elsistemaasignasdichasasignacionesalnuevoagentey

muestraunmensajedesatisfacción

Post-condición: Elsistemaguardalasasignaciones,ynotificaalnuevoagente.

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



Flujoprincipal: 4. ElactorseleccionalaopcióndeAjustedeincidencias

5. Elsistemamuestraenlapartederechaunlistadoconlas

categorías

6. Elsistemamuestraopcióndeañadiromodificarunacategoría

Post-condición: -

UC27:GestionarestadosDescripción: Permitegestionarestadosparalasincidencias.



Flujoprincipal: 7. ElactorseleccionalaopcióndeAjustedeincidencias

8. Elsistemamuestraenlapartederechaunlistadoconlos

estados

9. Elsistemamuestraopcióndeañadiromodificarunacategoría

Post-condición: -


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.


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


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.


• 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.


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


3.3 Diagrama de clases Elsiguientediagramaserecogetodaslasclasesyatributosdelaaplicaciónylasrelacionesque

existenentreellas.

Figura11:Diagramadeclasesdelaaplicación


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:


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.


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’);

}


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();


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.


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).


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


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


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.


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


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.


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).


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


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


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


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


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


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


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.


Comosepuedeobservarlos4técnicosestándeacuerdodequelagestióndeincidenciasha

cumplidoconsusexpectativasyhaayudadoalaorganizacióndesustareasy/oladesus

compañeros.


Porotrolado,el50%delostécnicoscreenqueenocasionesesconvenientedequeel

clienteestéaltantodeltranscursodesuincidenciayelotro50%piensaquepuedeser

beneficiosoparaambaspartes.

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

poseelaaplicaciónconunabuenausabilidadyel25%restantecreequedeberíaaúnmejorarse.


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.


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.


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.


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/


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:


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


¿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


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?


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.


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


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


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


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:


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


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


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

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

Documents