Page 1
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
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
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
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
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
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
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
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
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
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
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
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
Gestión de incidencias multiplataforma 13
1.5.2 Diagrama de Gantt
Figura3:Planificacióndelproyecto
Page 14
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Gestión de incidencias multiplataforma 62
3.3 Diagrama de clases Elsiguientediagramaserecogetodaslasclasesyatributosdelaaplicaciónylasrelacionesque
existenentreellas.
Figura11:Diagramadeclasesdelaaplicación
Page 38
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Gestión de incidencias multiplataforma 57
Comosepuedeobservarlos4técnicosestándeacuerdodequelagestióndeincidenciasha
cumplidoconsusexpectativasyhaayudadoalaorganizacióndesustareasy/oladesus
compañeros.
Page 58
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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