![Page 1: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/1.jpg)
Desarrollodeunprototipodeaplicaciónwebymóvilparalagestióndeobrasdeinstalacióndefibraóptica-
Parte1.
GradoenIngenieríaInformática
Trabajodefindegrado
Juliode2017,LasPalmasdeGranCanaria
Autor:AlejandroPérezMartínyTutores:Dr.AlexisQuesadaArencibiayD. JonathanAlemánAlemán
![Page 2: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/2.jpg)
AlejandroPérezMartín|2
Resumen
Esteproyectosurgebajolanecesidadderesolucióndeunproblemareal,enuncontextoreal, donde se pretende dar soporte a la gestión de obras de instalación de fibra óptica,permitiendoasí comunicaciónbidireccionaleficienteentre losdiferentes intervinientesde lamisma.
El objetivo de este proyecto es el análisis, diseño e implementación de un panel deadministración que permita la creación y edición de las obras, así como la asignación deempleadosalamismaquellevenacabolastareaspertenecientesaella.
Comoobjetivosecundariosenospresentalaposibilidaddeexperimentarenelcampodeldesarrollohíbridodeaplicacionesparamóviles,asícomoelestudiodediferentestecnologíastotalmentenovedosasparaelautordeestetrabajo.
Abstract
Thisprojectraisesunderthenecessityofarealproblemresolution,inarealcontext,togive support to optical fiber installation works, thus allowing an efficient and bidirectionalcommunicationbetweenallparticipants.
The main objective of this project is an administration panel analysis, design andimplementationthatallowstheworkscreationandediting,aswellastheemployeesallocationtoitthatperformittasks.
Thesecondaryprojectobjectiveistheexperimentingpossibilityinsidethehybridmobileapplicationsdevelopment,aswellas thestudyofdifferent technologies totallynovel for theauthorofthiswork.
![Page 3: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/3.jpg)
AlejandroPérezMartín|3
Índice
Resumen...............................................................................................................................2
Abstract................................................................................................................................2
Índicedeilustraciones...........................................................................................................5
Índicedetablas.....................................................................................................................7
Estructuradeldocumento.....................................................................................................9
1. Bloque1.IntroducciónyContextualización..................................................................10
1.1. Introducción.......................................................................................................10
1.2. Estadoactual......................................................................................................11
1.3. Objetivos............................................................................................................12
1.3.1. Objetivosgenerales..............................................................................................12
1.3.2. Objetivosacadémicos...........................................................................................12
1.4. Normativaylegislación.......................................................................................13
1.4.1. LeydeproteccióndeDatosdeCarácterPersonal................................................13
1.5. Justificacióndelascompetenciasespecíficascubiertas.......................................15
1.5.1. CompetenciascomunesalaIngenieríaInformática.............................................15
1.6. Aportaciones.......................................................................................................17
1.7. Recursos.............................................................................................................18
1.7.1. Recursossoftware................................................................................................18
1.7.2. Recursoshardware...............................................................................................27
1.8. Planificacióntemporal........................................................................................28
2. Bloque2.DesarrollodelProyecto................................................................................30
2.1. Análisis...............................................................................................................30
2.1.1. Primerareuniónycontextualizacióndelproblema..............................................30
2.1.2. Glosariodelenguajepropiodelcontextodelproblema......................................31
2.1.3. Generacióndelprototipo.....................................................................................31
2.1.4. Segundareunión,validaciónyacotaciónderequisitos........................................32
2.1.5. Especificaciónfinalderequisitosyacotacióndelproyecto.................................33
2.1.6. Identificacióndeactoresprincipalesdelsistema.................................................34
2.1.7. Especificaciónydiagramasdecasosdeuso.........................................................35
2.2. Diseño................................................................................................................37
2.2.1. Componentesdelsistema....................................................................................37
2.2.2. UtilizacióndelpatróndediseñoModelo–Vista–Controlador(MVC)................38
2.2.3. DesarrollohíbridoconIonic..................................................................................38
2.2.4. Estructurayentidadesdelabasededatos..........................................................39
![Page 4: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/4.jpg)
AlejandroPérezMartín|4
2.2.5. ArquitecturadelportaldeadministraciónenAngularJS......................................39
2.3. Implementación..................................................................................................41
2.3.1. DesarrollodelaAPIRESTenNode.jsyMongoDB................................................42
2.3.2. Desarrollodelaaplicaciónmóvil..........................................................................48
2.4. Pruebas...............................................................................................................54
3. Bloque3.ConclusionesyTrabajosFuturos...................................................................56
3.1. Conclusionesytrabajosfuturos..........................................................................56
3.1.1. Conclusionessobreeldesarrollodelproyecto.....................................................56
3.1.2. Trabajosfuturos....................................................................................................58
4. Bloque4.FuentesdeInformación................................................................................59
4.1. FuentesdeinformacióndelBloque1.IntroducciónyContextualización..................59
4.2. FuentesdeinformacióndelBloque2.Desarrollodelproyecto............................59
5. Bloque5.Anexos.........................................................................................................60
5.1. Anexo1.Casosdeuso.........................................................................................60
5.2. Anexo2.Manualdeusuariodelpaneldeadministración....................................92
5.3. Anexo3.Manualdeusuariodelaaplicaciónmóvil.............................................97
5.4. Anexo4.Pantallazoscompletosdelademonofunciona..................................105
5.5. Anexo5.EsquemascompletosMongoDB.........................................................107
5.6. Anexo5.DocumentacióndelaAPIREST...........................................................109
![Page 5: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/5.jpg)
AlejandroPérezMartín|5
Índicedeilustraciones
Ilustración1.CapturadelapáginadeincidenciasdeGitHub...............................................19
Ilustración2.Pantallasprincipalesdelprototiponofuncional.............................................32
Ilustración3.Representacióngráficadeunaarquitecturacliente-servidor..........................37
Ilustración4.InteraccióndecomponentesconAngularJS....................................................38
Ilustración5.Diagramadeentidadesdelabasededatos....................................................39
Ilustración6.JerarquíadeficherosdeunaaplicaciónenAngularJS.....................................40
Ilustración7.CaptuadelficherodeconfiguracióndeDocker...............................................42
Ilustración8.Versióninicialdelficheropackage.json..........................................................43
Ilustración9.PeticiónGETalservidorenelpuerto3000......................................................44
Ilustración10.EsquemaresumidodelmodelodeobrasdeMongoose...............................45
Ilustración11.JerarquíadeficherosdelaAPIRESTsiguiendopatrónMVC..........................46
Ilustración12.DiagramadepeticionesHTTPcontoken(JWT).............................................47
Ilustración13.EjemplodepeticiónHTTPutilizandoPostman..............................................47
Ilustración14.Jerarquíadeficherosdelaaplicaciónmóvil..................................................48
Ilustración15.Jerarquíadeficherosdelapáginaprincipaldelaaplicación.........................49
Ilustración16.Modelodedatosdeltipo‘Obra’...................................................................49
Ilustración17.Ficherowork.service.ts.................................................................................50
Ilustración18.Ficherodashboard.ts....................................................................................51
Ilustración19.Ejemploderecepcióndenotificacionespush................................................52
Ilustración20.CapturadelresumendeanálisisdecódigohechoconCodacy......................52
Ilustración21.CapturadelresumendelalcancedeloscomentarioshechoconCompodoc.53
Ilustración22.Ejemplodeltestdecreacióndeunusuario...................................................54
Ilustración23.Capturadelosresultadosdelaspruebasunitarias.......................................55
Ilustración24.Diagramadecasosdeusocompleto.............................................................60
Ilustración25.Pantalladeiniciodelpaneldeadministración..............................................92
Ilustración26.Pantalladelogindelpaneldeadministración...............................................92
Ilustración27.Dashboarddelpaneldeadministración........................................................93
Ilustración28.Creacióndeunaobraenelpaneldeadministración.....................................93
Ilustración29.Creacióndeunaobraenelpaneldeadministración(materiales).................94
Ilustración30.Creacióndeunaobraenelpaneldeadministración(añadiendounatarea).94
Ilustración31.Creacióndeunaobraenelpaneldeadministración(añadiendoarchivos
adjuntos).............................................................................................................................95
Ilustración32.Vistadelapantallausers..............................................................................95
![Page 6: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/6.jpg)
AlejandroPérezMartín|6
Ilustración33.Vistadelapantallamaterials.......................................................................96
Ilustración34.Vistadeedicióndeunaobra........................................................................96
Ilustración35.Iniciodesesiónendelaaplicación...............................................................97
Ilustración36.Vistasdelapantalladeprincipaldelaaplicación(dashboard)......................98
Ilustración37.Pantalladeldetalledeunaobra...................................................................98
Ilustración38.Añadirmaterialesaunaobradesdelaapp...................................................99
Ilustración39.Editarmaterialesdelaobramaterialdesdelaapp.......................................99
Ilustración40.Vistasdellaspantallasdelistadodetareasydetalledeunatarea.............100
Ilustración41.Edicióndeunatareaenlaapp....................................................................100
Ilustración42.Añadiradjuntosaunatarea.......................................................................101
Ilustración43.Capturadelapantallade“Attachments”....................................................101
Ilustración44.Listadodeusuariosyvistadelperfildeunusuario.....................................102
Ilustración45.Edicióndelperfildelusuario......................................................................102
Ilustración46.Vistasdelapantallalapantalladecierredesesión....................................103
Ilustración47.EnvíodenotificacionesPushdesdelaconsoladeGoogleFirebase..............103
Ilustración48.Vistadenotificacionespusheneldispositivodelempleado.......................104
Ilustración47.Primeraspantallasdelademonofuncional...............................................105
Ilustración48.Informacióndelaobraenlademonofuncional.........................................106
Ilustración49.Accionesdisponiblesenunatareaenlademonofuncional........................106
![Page 7: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/7.jpg)
AlejandroPérezMartín|7
Índicedetablas
Tabla1.Planificacióninicial.................................................................................................28
Tabla2.Dedicaciónfinal......................................................................................................28
Tabla3.Glosariodelenguajepropiodelcontextodelproblema..........................................31
Tabla4.Actoresprincipalesdelsistema..............................................................................34
Tabla5.Tabladeespecificacióndeloscasosdeuso............................................................35
Tabla6.Tabladeespecificacióndelcasodeuso"Gestionarempleados".............................36
Tabla7.Casodeuso:Iniciarsesiónenelpaneldeadministración.......................................61
Tabla8.Casodeuso:Crearobra..........................................................................................62
Tabla9.Casodeuso:Gestionarobra...................................................................................63
Tabla10.Gestionartareas...................................................................................................64
Tabla11.Casodeuso:Añadirtarea.....................................................................................65
Tabla12.Casodeuso:Eliminartarea..................................................................................66
Tabla13.Casodeuso:Editartarea......................................................................................67
Tabla14.Casodeuso:Añadirsubtarea...............................................................................68
Tabla15.Casodeuso:Importartareas................................................................................69
Tabla16.Casodeuso:Gestionarmaterial...........................................................................70
Tabla17.Casodeuso:Añadirmaterial................................................................................71
Tabla18.Casodeuso:Editarmaterial.................................................................................72
Tabla19.Casodeuso:Importarmaterial............................................................................73
Tabla20.Casodeuso:Gestionaradjuntos...........................................................................74
Tabla21.Casodeuso:Añadiradjunto.................................................................................75
Tabla22.Casodeuso:Eliminaradjunto..............................................................................76
Tabla23.Casodeuso:Cambiarestadodeunaobra............................................................77
Tabla24.Casodeuso:Certificarobra..................................................................................78
Tabla25.Casodeuso:Registrarempleados........................................................................79
Tabla26.Casodeuso:Gestionarempleados.......................................................................80
Tabla27.Casodeuso:Editarempleado...............................................................................81
Tabla28.Casodeuso:Eliminarempleado...........................................................................82
Tabla29.Casodeuso:Notificarempleado..........................................................................83
Tabla30.Casodeuso:Visualizarempleado.........................................................................84
Tabla31.Casodeuso:IniciarsesiónenlaAPP.....................................................................85
Tabla32.Casodeuso:Visualizarobra.................................................................................86
Tabla33.Casodeuso:Gestionararchivosadjuntosatarea.................................................87
![Page 8: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/8.jpg)
AlejandroPérezMartín|8
Tabla34.Casodeuso:Adjuntararchivo..............................................................................88
Tabla35.Casodeuso:Eliminararchivosdeunatarea.........................................................89
Tabla36.Casodeuso:Añadirtareasaobra(empleado)......................................................90
Tabla37.Casodeuso:Notificarincidencia..........................................................................91
Tabla38.EspecificacióndelaentidadObrasenlabasededatos.......................................107
Tabla39.EspecificacióndelaentidadTareasenlabasededatos......................................108
Tabla40.EspecificacióndelaentidadMaterialenlabasededatos...................................108
Tabla41.EspecificacióndelaentidadUsuariosenlabasededatos...................................108
Tabla42.DocumentacióndeaccesoalaentidadAutenticación........................................109
Tabla43.DocumentacióndeaccesoalaentidadObras.....................................................109
Tabla44.DocumentacióndeaccesoalaentidadMateriales.............................................109
Tabla45.DocumentacióndeaccesoalaentidadUsuarios................................................110
Tabla46.DocumentacióndeaccesoalaentidadSubidasenlaAPIREST...........................110
![Page 9: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/9.jpg)
AlejandroPérezMartín|9
Estructuradeldocumento
Duranteeldesarrollodelamemoria,hemosdecididodividirlaencincograndesbloquesqueabarcanlatotalidaddelproyecto.
1. Bloque1.IntroducciónyContextualización:Enestebloquepresentaremoselproblemaquepretenderesolverelproyectoysucontexto.Además,sepresentanlassolucionesactualesqueutilizanlosusuarios,quéaportaesteproyectoyquécompetenciascubre.
2. Bloque2.Desarrollodelproyecto:Enestebloqueserecogenlasdiferentesfasesporlasquehemospasadoduranteeldesarrollodelproyecto.Losproblemascon losquenoshemosidoencontrandodurantesudesarrolloyquédecisioneshemostomado.
3. Bloque3.ConclusionesyTrabajosFuturos:Alolargodeestebloqueconcluiremoslamemoriareflexionandoacercadequénoshaaportadoesteproyectoysugeriremosquépodríaincluirfuturasversionesdeldesarrollo.
4. Bloque 4. Fuentes de Información: Aquí recogeremos las fuentes de informaciónutilizadasduranteeldesarrollodelproyecto.
5. Bloque5.Anexos:Completaremos lamemoriaa travésde losanexosqueaportaráninformaciónadicionalaconsultarsiellectorlodesea.
Comocomentaremosenlaintroducción,debemosadelantarqueesteproyectohasidodividido desde el principio en tres grandes partes, una conjunta y dos desarrolladas pordiferentesalumnos.Porloqueambasmemoriassiguenunaestructuramuysimilarycompartengrandes similitudes en su desarrollo a excepción del apartado de implementación, trabajosfuturosyaquellosintrínsecamentepersonalescomolasconclusiones.
![Page 10: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/10.jpg)
AlejandroPérezMartín|10
1. Bloque1.IntroducciónyContextualización1.1. Introducción
Es indudable la expansión actual de las tecnologías de la información, esto hacenecesariaunamejorcoberturadelservicioquelascompañíasproveedorasdeinternetbrindanasusclientes.Paraelloenmuchasocasionesserequieredelainstalacióndenuevaslíneasdefibraópticaqueseanaccesiblesparaelcliente.
Para hacernos una idea del número de instalaciones de fibra óptica en España, laoperadoraTelefónicacerroelaño2015entornoalos14millonesdeinmueblescableadosconfibraópticaFTTH.
Estasinstalaciones/obrastienenunadocumentaciónasociadadevitalimportanciaparael desarrollo de lamisma.Muchas veces se transmite esta información entre los diferentesempleadosdelaempresainstaladoradeformaspocoortodoxas,dandolugaramalentendidosy pérdidas de información. Estas pérdidas tienen un impacto directo en su capacidad defacturación,yaquerequierendeestadocumentaciónparaacreditarsuactividad.
Por lo tanto, se hace necesario un medio que permita a las empresas instaladorasgestionaresteflujodeinformaciónsinpérdidasydemaneramásaccesibleyrápida.
Lamotivaciónprincipaldeestetrabajoeslabúsquedadeunamejoradelaorganizacióny gestiónde trabajosenempresas instaladorasde fibraópticamedianteel desarrollodeunportaldeadministraciónquepermitagestionaryasignartareasaempleadosdeunaempresa,asícomoeldesarrollodeunaaplicaciónmóvilpersonalparaquelosempleadospuedanasuvezenviarlainformaciónnecesariaparalacumplimentacióndelamisma.
Desdeelpuntodevistaacadémico,estetrabajonoshapermitidoelaprendizajeypuestaenprácticadelMEANStackqueestá formadoporel conjuntode frameworksy tecnologías:“MongoDB”,“Express.js”,“AngularJS/Angular”,“Node.js”.
Además,escogimosestetrabajoporquenospermitíaabordaryresolverunproblemareal.
Creemosoportunoresaltarqueesteproyectohasidodivididoentresgrandesbloques,uno de ellos desarrollado de forma conjunta por dos alumnos y luego cada uno habiendodesarrolladounbloquedemaneraindependiente.
EsteproyectosecentraeneldesarrolloconjuntodeunaAPIRESTenNode.jsyMongoDByelanálisis,diseñoe implementación individualdeunaaplicaciónmóvil,desarrolladaconelframeworkIonic,necesariaparavisualizacióneinteracciónconlosdatosgeneradosapartirdeun panel de administración creado con AngularJS, siendo este último, desarrollado por micompañeroÁlvaroRomeroPerdomoDesarrollodeaplicaciónwebymóvilparalagestióndelasobrasdeinstalacióndefibraóptica–Parte2.
![Page 11: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/11.jpg)
AlejandroPérezMartín|11
1.2. Estadoactual
Comohemoscitadoanteriormente,lasinstalaciones/obrastienenunadocumentaciónasociadadevitalimportanciaparaeldesarrolloofacturacióndelamisma.
Enesteintercambiodeinformaciónparticipantresagentesprincipalmente:
• Enprimerlugar,laoperadoraquedesearealizarlaobra.• Ensegundolugar,laempresainstaladora.• Entercerlugar,losempleadosdelainstaladoraasignadosadichaobra.
Por lo tanto, cuando hablamos de esta documentación nos referimos a dos tiposfundamentalmente: Una documentación necesaria para el comienzo y desarrollo de la obra(generadaporlaoperadora,dondeseindicanlastareasarealizaryelmaterialautilizardentrodela instalación),yotradocumentaciónnecesariaparalafacturacióndelamisma(generadaporlosempleadosdelainstaladoraqueacreditanlarealizacióndelastareaspertenecientesalaobra).
Actualmente ladocumentaciónnecesariaparaelcomienzoydesarrollode laobraesenviada por parte de la operadora a la instaladora a través del correo electrónico. Estadocumentaciónestáformadapor:
• UnahojadecálculoExceldondeestándescritaslasdiferentestareasarealizarenlaobrayelmaterialasignadoalamisma.
• Unaovariasfotosdelazonadondesevarealizarlaobra.• UnoovariosplanosenPDFdelazonadondesevarealizarlaobra.• Y, opcionalmente, una presentación en PowerPoint donde se muestran diferentes
localizaciones de la obra y permite la desambiguación en la realización de algunastareas.
Ladocumentaciónnecesariapara laclausuraycertificación/facturaciónde laobraesgenerada por los empleados de la instaladora a medida que van finalizando las tareaspertenecientesalamisma.Estadocumentaciónestáformadapor:
• Fotosdondesemuestranlastareaspertenecientesalaobraterminadas.• Datosnuméricos,comoporejemplolongitudrealdecablecolocadoenlainstalación.• Relacióntareas–estadodelastareas.
Actualmenteestadocumentaciónestransmitidaporlosempleadosaljefe/encargadodelaobraatravésdeaplicacionesmóvilesdemensajeríainstantáneacomoWhatsAppoporcorreoelectrónicoenalgunoscasos,debiendoéstealmacenarlainformaciónrecibidaenhojasdecálculoycarpetascreadasenelSistemaOperativodesuordenadorpersonal.Estogenera,en muchos casos, confusión y pérdida de información, ya que no existe ningún tipo desincronizaciónentreladocumentaciónquepuedatenerelencargadoyelempleado.
![Page 12: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/12.jpg)
AlejandroPérezMartín|12
1.3. Objetivos
1.3.1. Objetivosgenerales
Comohemos citado anteriormente, el flujo bidireccional de información relacionadaconunaobra,setransmiteentrelosdiferentesactoresdemanerapocoortodoxa,dandolugara,enalgunoscasos,pérdidadelamismayunagestiónporpartedelencargadodelaobraquesepodríaautomatizar.
Ésteesprecisamenteelobjetivodeestetrabajofindetítulo,automatizartareasquehastaahorarealizabaelencargadodelaobra,proporcionarunmediodetransmisióndelainformaciónmuchomásfiableyqueademássegaranticeelalmacenamientosegurodelamismamedianteunabasededatos.
Paraconseguirestosobjetivossepretende:
• DesarrollarunaAPIRESTenNode.jsyMongoDBquealmacenetantolainformacióndelaobracomotareasasociadasalamisma,empleadosquetrabajanenlaobra,materialnecesarioparallevarlaacabo,ficherosadjuntosyelestadodelaobraentreotros.
• LacreacióndeunportaldeadministraciónenAngularJSquepermitaalencargadodeobras y responsable de la empresa instaladora crear obras a las que asignarletrabajadoresdesuempresa,creartareasysubtareasparalamisma,adjuntarlearchivosnecesariosparadesempeñarlaycontrolarelestadodelaobraentodomomento.
• Analizar,diseñareimplementarunaaplicaciónmóvilconIonicyAngularqueconectealosempleadosconlaAPIRESTdemaneradirectaysencilla,yquelespermitagestionarde manera fácil y eficaz sus tareas, actualizando el estado en que se encuentran,cumplimentando informaciónadicional e/o incorporandoarchivosmultimedia, comopor ejemplo fotografías, que permitirán a los responsables tener una visión másprofundayobjetivadeunaobra.
1.3.2. Objetivosacadémicos
Conrespectoalosobjetivosacadémicosquenoshemosplanteadoenlarealizacióndeestetrabajofindetítulointervienenademásdelosdescritosenel“ReglamentoGeneralparalarealización y evaluación de trabajos de fin de título” nuestro interés en aprender nuevastecnologíascomoelMEANStackenlugardeoptarporotrasmáscomunes.
Además, nos ha servidopara aprender desarrollowebdesdeun punto de vistamásautónomoyenuncontextorealyponerenprácticaconocimientosadquiridosenasignaturascursadasdurantelacarrera.
![Page 13: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/13.jpg)
AlejandroPérezMartín|13
1.4. Normativaylegislación
1.4.1. LeydeproteccióndeDatosdeCarácterPersonal
La Ley Orgánica 15/1999 de 13 de diciembre de Protección de Datos de CarácterPersonal,(LOPD),esunaleyorgánicaespañolaquetieneporobjetogarantizaryproteger,enloque concierne al tratamiento de los datos personales, las libertades públicas y los derechosfundamentales de las personas físicas, y especialmente de su honor, intimidad y privacidadpersonalyfamiliar.FueaprobadaporlasCortesGeneralesel13dediciembrede1999.Estaleysedesarrollafundamentándoseenelartículo18delaconstituciónespañolade1978,sobreelderechoalaintimidadfamiliarypersonalyelsecretodelascomunicaciones.
Su objetivo principal es regular el tratamiento de los datos y ficheros, de carácterpersonal, independientemente del soporte en el cual sean tratados, los derechos de losciudadanossobreellosylasobligacionesdeaquellosqueloscreanotratan.
Esta ley afecta a todos los datos que hacen referencia a personas físicas registradassobrecualquiersoporte,informáticoono.Quedanexcluidasdeestanormativaaquellosdatosrecogidos para uso doméstico, las materias clasificadas del estado y aquellos ficheros querecogen datos sobre Terrorismo y otras formas de delincuencia organizada (no simpledelincuencia).
ApartirdeestaleysecreólaAgenciaEspañoladeProteccióndeDatos,deámbitoestatalquevelaporelcumplimientodeestaLey.
Elórganodecontroldelcumplimientodelanormativadeproteccióndedatosdentrodel territorio español, con carácter general es la Agencia Española de Protección de Datos(AEPD), existiendo otras Agencias de Protección de Datos de carácter autonómico, en lasComunidadesAutónomasdeCataluñayenelPaísVasco.
Las sanciones se dividen en tres grupos dependiendo de la gravedad del hechocometido, siendo España el país de la Unión Europea que tiene las sancionesmás altas enmateriadeproteccióndedatos.Dichassancionesdependendelainfraccióncometida.
Sedividenen:
• Lassancioneslevesvandesde900a40.000€.• Lassancionesgravesvandesde40.001a300.000€.• Lassancionesmuygravesvandesde300.001a600.000€.
Pesealimportedelassanciones,existenmuchasempresasenEspañaquetodavíanosehanadecuadoalamisma,olohanhechodeformaparcialonorevisandeformaperiódicasuadecuación;porloqueresultaesencialelmantenimientoyrevisióndelaadecuaciónrealizada.
Enelsectorpúblico,lacitadaLeyregulaigualmenteelusoymanejodelainformaciónylosficheroscondatosdecarácterpersonalutilizadosportodaslasadministracionespúblicas.
LaAgenciaEspañoladeProteccióndeDatos(AEPD)fuecreadaen1994conformealoestablecidoenladerogadaLORTAD.SusedeseencuentraenMadrid,sibienlasComunidadesAutónomas deMadrid, País Vasco y Cataluña han creado sus propias Agencias de carácterautonómico.
![Page 14: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/14.jpg)
AlejandroPérezMartín|14
Nuestrasaplicacioneshacenusodedatosdecarácterpersonaldesususuarios, talescomosunombre,dirección,fechadenacimiento,puestodetrabajoyactividadenelmismo,etc.EsporelloquedebemostomarnosmuyenseriolaLOPDgarantizandosucumplimientoentodomomentomedianteelusodeunabasededatosrobustayquemantieneestosdatossensiblesencriptados.
Además, los usuarios de dicha aplicación deben conocer en todomomento que susdatospersonalesestánsiendoalmacenadoscomorequisitoparaelusodelamisma.
![Page 15: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/15.jpg)
AlejandroPérezMartín|15
1.5. Justificacióndelascompetenciasespecíficascubiertas
1.5.1. CompetenciascomunesalaIngenieríaInformática
CII01Capacidad para diseñar, desarrollar, seleccionar y evaluar aplicaciones y sistemas
informáticos,asegurandosufiabilidad,seguridadycalidad,conformeaprincipioséticosyalalegislaciónynormativavigente.
Estacompetenciaquedacubiertaporpartedelalumnoporqueenesteproyecto:
• Seharealizadounaetapadeanálisisdóndeserecogieronungrannúmeroderequisitosexpresadosporel“cliente”quegarantizanquelaaplicaciónendesarrollocumple lasexpectativasdelmismo.
• Se realizó un proceso de diseño de la arquitectura del proyecto y de una interfazasociadaquefuevalidadaporel“cliente”.
• La información guardada por la aplicación se encuentra cifrada protegiendo así laintegridaddelaspersonasodelainformaciónqueenellaparticipanatendiendoalaLeydeproteccióndedatos.
CII05Conocimiento, administración y mantenimiento sistemas, servicios y aplicaciones
informáticas.
Estacompetenciaquedacubiertaporpartedelalumnoporqueenesteproyecto:
• Laaplicaciónestádesplegadasobreunentornorobustoytesteadoproporcionadoporel MEAN Stack que asegura el correcto funcionamiento de la aplicación en todomomento.
CII08Capacidadparaanalizar,diseñar,construirymanteneraplicacionesdeformarobusta,
segurayeficiente,eligiendoelparadigmayloslenguajesdeprogramaciónmásadecuados.
Estacompetenciaquedacubiertaporpartedelalumnoporqueenesteproyecto:
• Seharealizadounaetapadeanálisisdóndeserecogieronungrannúmeroderequisitosexpresadosporel“cliente”quegarantizanquelaaplicaciónendesarrollocumple lasexpectativasdelmismo.
• Se realizó un proceso de diseño de la arquitectura del proyecto y de una interfazasociadaquefuevalidadaporel“cliente”.
• SeeligióelestándardedesarrollowebenellenguajedeprogramaciónJavaScript(MEANStack) garantizando así la utilización de un lenguaje con gran cantidad dedocumentaciónaccesibleyunacomunidaddeusuarioscreciente.
![Page 16: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/16.jpg)
AlejandroPérezMartín|16
CII13Conocimiento y aplicación de las herramientas necesarias para el almacenamiento,
procesamientoyaccesoalosSistemasdeinformación,incluidoslosbasadosenweb.
Estacompetenciaquedacubiertaporpartedelalumnoporqueenesteproyecto:
• Seha garantizado la persistenciade losdatos introducidos en lamismamediante lautilizacióndeunabasededatosnorelacionalMongoDB,quepermiteelaccesoalosdatosdemanerarápida,sencillaysegura.
CII16Conocimientoyaplicacióndelosprincipios,metodologíasyciclosdevidadelaingeniería
desoftware.
Estacompetenciaquedacubiertaporpartedelalumnoporqueenesteproyecto:
• Sehanaplicadoprincipiosdelaingenieríadelsoftwaretalescomolamodularidadenlaarquitectura y el código que permiten la ampliación de la herramienta en futurasiteracionesylarefactorizacióndelcódigoparafacilitarsumantenimiento.
CII17Capacidad para diseñar y evaluar interfaces persona computador que garanticen la
accesibilidadyusabilidadalossistemas,serviciosyaplicacionesinformáticas.
Estacompetenciaquedacubiertaporpartedelalumnoporqueenesteproyecto:
• SehahechousodelibreríascomoAngularJSMaterialbasadasenGoogleMaterial,cuyoobjetivoeslaaccesibilidaddelainterfazysuusabilidad.
TFG01Ejercicio original a realizar individualmente y presentar y defender ante un tribunal
universitario,consistenteenunproyectoenelámbitodelastecnologíasespecíficasdelaIngenieríaenInformáticadenaturalezaprofesionalenelquesesinteticenintegrenlascompetenciasadquiridasenlasenseñanzas.
![Page 17: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/17.jpg)
AlejandroPérezMartín|17
1.6. Aportaciones
Esteproyectotrataderesolverunproblemarealatravésdeldesarrollodeunportalwebdeadministración,unaAPIREST yunaaplicaciónmóvil funcionales, intentandoademásrealizarunaaportacióntecnológica,económicaysocial.
Enelplanotecnológicointentamosdarunenfoquemásinnovadoryactualalagestióndeobrasporpartedelaempresainstaladoraaportandounsoftwarecapazde,prácticamente,abstraertantoalempleadocomoaladministradordecomplicadosypocoortodoxosmétodosdetraspasodeinformación,convirtiendoesteprocesoenalgomássimpleyalamismavezmásrobusto. Para conseguir este fin se ha hecho uso de tecnologías actuales en el campo deldesarrollowebtalescomoelStackMEAN.Además, la interfazdeusuariotantodelportaldeadministracióncomodelaaplicaciónmóvilestábasadaenestándaresactualescomoelMaterialDesign.
Desdeelpuntodevistaeconómico,esteproyectopermitealasempresasinstaladorasdefibraópticafacturaralasproveedorasdeinternetdemaneraeficienteeintachableevitandoasípérdidasrealesdedineroparaellasderivadasdelapérdidadeinformaciónnecesariaparalacertificaciónyfacturacióndeunaobradebidaalaformaenqueéstaeragestionada.
Enelámbitosocial laaplicacióntratadefacilitareltrabajoa losempleadosque,a lahoradegenerarinformaciónnecesariaparalacertificación,debíanutilizarvariasaplicacionesen su dispositivo para intercambiarla con el encargado de la obra. Ahora disponen de unaaplicacióncentralizadayespecíficaparaelcontrolde la informaciónque lespermiteahorrartiempoyrealizarlasmismastareasdeunamaneramuchomássencilla.
Desdeelpuntodevistadel encargadode laobra seha facilitadoengranmedidaeltrabajoorganizativoqueéstedebíahacertantoalahoradecomenzarunanuevaobra,comoalahoradecertificarlamisma.
![Page 18: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/18.jpg)
AlejandroPérezMartín|18
1.7. Recursos
1.7.1. Recursossoftware
Acontinuación,seexponenlasherramientassoftwareutilizadasparaeldesarrollodelproyecto.
Sistemasoperativos
ElproyectohasidorealizadoentresentornosdiferentescomosonWindows10,Ubuntu16.04yMacOS.
EnunprincipiosedecidiótrabajarenWindows10yenMacOSparalelamente,perolainstalacióndeMongoDBenLinuxeramuchomásdirectaypresentabamenosproblemasencomparaciónconsuversiónenWindows.
Ante esta diversidad de entornos de desarrollo, se hizo uso de la tecnología decontenedoresdeDockercuyascaracterísticassedescribenacontinuación.
Docker
Docker es una tecnología de código abierto que le permite crear, ejecutar, probar eimplementar aplicaciones distribuidas dentro de contenedores de software. Permiteempaquetarunaaplicaciónenunaunidadestandarizadaparaeldesarrollodesoftware,quecontiene todo lo que necesita para funcionar: código, tiempo de ejecución, herramientas ybibliotecasdelsistema,etc.Dockerpermiteimplementarlasaplicacionesdeformarápida,fiableysistemática,encualquierentorno.
Susprincipalescaracterísticasson:
• Consumepocos recursos, loquepermitedesplegarmultitudde contenedoresenunmismoequipofísico.
• Seeliminaelproblemadedependenciasdelasaplicaciones.• Loscontenedoressonlivianosyfacilitansualmacenaje,transporteydespliegue.• Repositoriodeimágenespúblicosyprivadosdeimágenes.• Multiplataforma,podremosdesplegarnuestroscontenedoresenmultituddeentornos.
![Page 19: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/19.jpg)
AlejandroPérezMartín|19
Sistemadecontroldeversionesdelcódigo,GIT
GitesunsoftwaredecontroldeversionesdiseñadoporLinusTorvalds,pensandoenlaeficienciaylaconfiabilidaddelmantenimientodeversionesdeaplicacionescuandoéstastienenungrannúmerodearchivosdecódigofuente.
Gitsehaconvertidoenunsistemadecontroldeversionesconfuncionalidadplena.HayalgunosproyectosdemucharelevanciaqueyausanGit,enparticular,elgrupodeprogramacióndelnúcleoLinux.
DentrodeGithemosutilizado lametodologíadetrabajo,git-flow.Suscaracterísticasprincipalessonlassiguientes.
Eltrabajoseorganizaendosramasprincipales:
• Ramamaster:cualquiercommitquepongamosenestaramadebeestarpreparadoparasubiraproducción
• Rama develop: rama en la que está el código que conformará la siguiente versiónplanificadadelproyecto
Además de estas dos ramas, se proponen las siguientes ramas auxiliares: Feature,ReleaseyHotfix.
También se ha hecho uso de las Issues de GitHub para llevar un control de loserrores/bugsasolucionarymejorasaimplementarenposterioresversiones.
Ilustración1.CapturadelapáginadeincidenciasdeGitHub
![Page 20: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/20.jpg)
AlejandroPérezMartín|20
Editordetexto/código,VisualStudioCode
VisualStudioCodeesuneditordecódigoopen-sourcedeMicrosoftdisponibleparaMacOS, Linux, y Windows con soporte integrado para Git, auto-detección y auto-completadointeligente para decenas de lenguajes, herramientas de depuración y un amplio abanico deextensiones que convierten a este editor de código en todo un IDE (entorno de desarrollointegrado).
Visual Studio Code está desarrollado íntegramente empleando tecnologías web comoNode.js,TypeScript,JavaScriptyCSSydasoportealenguajescomoCSS,HTML,JavaScript,JSON,Less,Sass,TypeScript,PHP,Python,Ruby,Perl,Objective-C,Java,C#,C++,etc.
Lenguajedeprogramación,JavaScript
JavaScript (abreviadocomúnmente JS)esun lenguajedeprogramación interpretado,dialectodelestándarECMAScript.Sedefinecomoorientadoaobjetos,basadoenprototipos,imperativo,débilmentetipadoydinámico.
Seutilizaprincipalmenteensuformadel ladodelcliente(client-side), implementadocomopartedeunnavegadorwebpermitiendomejorasenlainterfazdeusuarioypáginaswebdinámicas,aunqueexisteunaformadeJavaScriptdelladodelservidor(Server-sideJavaScriptoSSJS).Suusoenaplicacionesexternasalaweb,porejemplo,endocumentosPDF,aplicacionesdeescritorio(mayoritariamentewidgets)estambiénsignificativo.
LascaracterísticasprincipalesdeJavaScriptsonlassiguientes:
• JavaScriptesunlenguajedesecuenciasdecomandosbasadoenobjetoseinterpretado.• Aunque tiene menos capacidades que los lenguajes orientados a objetos de altas
prestacionescomoC++yJava,JavaScriptesmásquesuficientementeeficienteparalospropósitosparalosqueestácreado.
• JavaScriptnoesunaversiónreducidadecualquierotrolenguaje(sóloestárelacionado,distantee indirectamente,conJava,porejemplo),niesunasimplificacióndeningúnlenguaje.
• JavaScript es un lenguaje limitado. Por ejemplo, no es posible escribir aplicacionesindependientesenJavaScriptylacapacidaddelecturayescrituradearchivosesmínima.
• LassecuenciasdecomandosdeJavaScriptsólopuedenejecutarseconun intérprete,quebienpuedeestarenunservidorWeboenunexploradordeWeb.
• JavaScriptesunlenguajeenelquenonecesitadeclararlostiposdedatos.Estosignificaque no es necesario declarar explícitamente los tipos de datos de las variables. Dehecho,noesposibledeclararexplícitamentelostiposdedatosenJavaScript.Másaún,en muchos casos JavaScript realiza conversiones, automáticamente, cuando sonnecesarias.Porejemplo,siintentaagregarunnúmeroaunelementoquecontienetexto(unacadena),elnúmeroseconvierteentexto.
![Page 21: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/21.jpg)
AlejandroPérezMartín|21
Node.js
Node.jsesunentornoentiempodeejecuciónmultiplataforma,decódigoabierto,parala capa del servidor (pero no limitándose a ello) basado en el lenguaje de programaciónECMAScript,asíncrono,conI/OdedatosenunaarquitecturaorientadaaeventosybasadoenelmotorV8deGoogle.
Fuecreadoconelenfoquedeserútilen lacreacióndeprogramasderedaltamenteescalables,como,porejemplo,servidoresweb.FuecreadoporRyanDahlen2009ysuevoluciónestáapadrinadaporlaempresaJoyent,queademástienecontratadoaDahlenplantilla.
Node.js es una forma de ejecutar JavaScript en el servidor, además demuchomás.AdemásdelaaltavelocidaddeejecucióndeJavaScript,laverdaderamagiadetrásdeNode.jsesalgoquesellamaBucledeEventos(EventLoop).
Para escalar grandes volúmenes de clientes, todas las operaciones intensivas I/O enNode.js se llevan a cabo de forma asíncrona. El enfoque tradicional para generar códigoasíncronoesengorrosoycreaunespacioenmemorianotrivialparaungrannúmerodeclientes(cadaclientegeneraunhilo,yelusodememoriadecadaunosesuma).
Paraevitarestaineficiencia,asícomoladificultadconocidadelasaplicacionesbasadasenhilos, (programmingthreadedapplications),Node.jsmantieneunevent loopquegestionatodaslasoperacionesasíncronas.
AngularJS
AngularJS(comunalmentellamado"Angular.js"oensusúltimasversiones,“Angular”),esun frameworkde JavaScriptdecódigoabierto,mantenidoporGoogle,queseutilizaparacrearymanteneraplicacioneswebdeunasolapágina.SuobjetivoesaumentarlasaplicacionesbasadasennavegadorconcapacidaddeModeloVistaControlador(MVC),enunesfuerzoparahacerqueeldesarrolloylaspruebasseanmásfáciles.
La biblioteca lee el HTML que contiene atributos de las etiquetas personalizadasadicionales,entoncesobedecealasdirectivasdelosatributospersonalizados,yunelaspiezasde entrada o salida de la página a un modelo representado por las variables estándar deJavaScript. Los valores de las variables de JavaScript se pueden configurarmanualmente, orecuperadosdelosrecursosJSONestáticosodinámicos.
AngularJS se puede combinar con el entorno en tiempo de ejecución Node.js, elframeworkparaservidorExpress.jsylabasededatosMongoDBparaformarelconjuntoMEAN.
![Page 22: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/22.jpg)
AlejandroPérezMartín|22
MongoDB
MongoDBesunsistemadebasededatosNo-SQLorientadoadocumentos,desarrolladobajoelconceptodecódigoabierto.
Forma parte de la nueva familia de sistemas de base de datosNo-SQL. En lugar deguardarlosdatosentablascomosehaceenlasbasesdedatosrelacionales,MongoDBguardaestructuras dedatos endocumentos similares a JSON conunesquemadinámico (MongoDButilizaunaespecificación llamadaBSON),haciendoque la integraciónde losdatosenciertasaplicacionesseamásfácilyrápida.
LascaracterísticasprincipalesdeMongoDBson:
• De propósito general, casi tan rápida como las bases de datos No-SQL de tipoclave:valor,yconcasitodaslasfuncionalidadesdelasbasesdedatosrelacionales.
• Altadisponibilidad.• Escalabilidad,desdeunservidoraisladoaarquitecturasdistribuidasdegrandesclusters.• Aggregation Framework, procesamiento batch de datos para cálculos agrupados
utilizandooperacionesnativasdeMongoDB.• Autobalanceadodecarga,atravésdedistintosshards.• Replicaciónnativa,sincronizacióndedatosentreservidores.• Seguridad,autenticación,autorización,etc.• Gestiónavanzadadeusuarios.• Recuperaciónautomáticaanteerrores.• Seactualizasindejardedarservicio.• No tiene los cuellos de botella que se producen en las bases de datos relacionales
(RDBMS).• UtilizaobjetosJSONparaguardarytransmitirlainformación.
En el desarrollo de la aplicación utilizamosMongoose comodriver deMongoDB, lo quefacilitólageneracióndemodelosyesquemasqueluegoseveríanreflejadosenlabasededatosdemaneramuchomás clara y directa, así comoproporcionar algunas funciones adicionalescomoelembebidodedocumentosenlasreferenciasdelosesquemas.
Express.js
Express.jsosimplementeExpress,esunframeworkparaeldesarrollodeaplicacioneswebparaNode.jsdistribuidodemaneralibreygratuitabajolicenciaMIT.EstádiseñadoparaconstruiraplicacioneswebyAPIs.SeleconsideraelframeworkdelladodelservidorestándarparaNode.js.Porlotanto,podríamosdecirqueExpress.jsesunainfraestructuradeaplicacioneswebNode.jsmínimayflexiblequeproporcionaunconjuntosólidodecaracterísticasparalasaplicacioneswebymóviles.
![Page 23: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/23.jpg)
AlejandroPérezMartín|23
JSON
JSON, acrónimode JavaScriptObjectNotation, esun formatode texto ligeroparaelintercambiodedatos.JSONesunsubconjuntode lanotaciónliteraldeobjetosdeJavaScriptaunquehoy,debidoasuampliaadopcióncomoalternativaaXML,seconsideraunformatodelenguajeindependiente.
UnadelasventajasdeJSONsobreXMLcomoformatodeintercambiodedatosesqueesmuchomássencilloescribirunanalizadorsintáctico(parser)deJSON.EnJavaScript,untextoJSONsepuedeanalizarfácilmenteusandolafuncióneval,locualhasidofundamentalparaqueJSON haya sido aceptado por parte de la comunidad de desarrolladores AJAX, debido a laubicuidaddeJavaScriptencasicualquiernavegadorweb.
TypeScript
TypeScriptesunlenguajedeprogramacióndecódigoabiertodesarrolladoypresentadopor Microsoft hace unos tres años. Es un superset de JavaScript que esencialmente añadecapacidadesdePOOcomoeseltipadoestáticoyobjetosbasadosenclases.
ExtiendelasintaxisdeJavaScript,pormediodeunlenguajepropioquecompilaficherosen lenguaje JavaScript original, asegurando la compatibilidad con todos los navegadores,servidoresysistemasoperativos.
Ionic
Ionic es un framework open source para el desarrollo de aplicaciones híbridas quepermite crear aplicaciones multiplataforma utilizando HTML5 optimizado para móvil, CSS3,componentesJavaScript,gestosyherramientasparalaconstruccióndeaplicacionesaltamenteinteractivas.ConstruidoconSassyoptimizadoparaAngularconTypeScriptpermiteaseguraraplicacionesrobustas,rápidasyescalables.
Lasaplicacionessonhíbridas,¿Quéquieredecireso?Quepuedesdesarrollarunamismaaplicación y ejecutarla en Android, iOS yWindows Phone sin tener que desarrollarla en elcorrespondientelenguajenativodecadaplataforma.
Unade lascaracterísticasde IonicFrameworkesqueestáconstruidoparaserrápidodebidoalamínimamanipulacióndelDOM,sinutilizarjQueryyconaceleracionesdetransicionesporhardware.
![Page 24: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/24.jpg)
AlejandroPérezMartín|24
Angular
Angularesotroframework,nosimplementeunanuevaversióndeAngularJS.Todosesosproblemas,difícilesdesolucionarconlatecnologíausadaporAngularJShansidolosquehanimpulsadoasuscreadoresadesarrollardesdecerounanuevaversióndelframework.Lanuevaherramientaestápensadaparadarcabidaatodoslosusosdadosporlosdesarrolladores,llevaraJavaScriptaunnuevonivelcomparablealenguajesmástradicionales,siendoademáscapazderesolverdeunamaneraadecuadalasnecesidadesyproblemasdelaprogramacióndelladodelcliente.
Entrelasnuevascaracterísticaspodemosdestacar:
• MejorrendimientoqueAngularJS.• Inyeccióndedependencias.• UsodeTypeScript.• DesarrolloMóvil:Eldesarrollodeaplicacionesdeescritorioesmuchomásfácil
cuandoprimerosemanejanlosproblemasderendimientoeneldesarrollomóvil.• Modularidad:Paradesarrollarunanuevafuncionalidadestaseempaquetaenun
módulo,produciendounnúcleomásligeroymásrápido.• CompilaciónAOT:laaplicaciónestápre-compilada,reduciendoasíeltiempode
cargadelamisma.
HTMLHTML, sigla en inglés de HyperText Markup Language (lenguaje de marcas de
hipertexto),hacereferenciaallenguajedemarcadoparalaelaboracióndepáginasweb.Esunestándarquesirvedereferenciadelsoftwarequeconectaconlaelaboracióndepáginaswebensusdiferentesversiones,defineunaestructurabásicayuncódigo(denominadocódigoHTML)paraladefinicióndecontenidodeunapáginaweb,comotexto,imágenes,videos,juegos,entreotros. Es un estándar a cargo delWorldWideWeb Consortium (W3C) o ConsorcioWWW,organizacióndedicadaalaestandarizacióndecasitodaslastecnologíasligadasalaweb,sobretodo en lo referente a su escritura e interpretación. Se considera el lenguaje web másimportantesiendosuinvencióncrucialenlaaparición,desarrolloyexpansióndelaWorldWideWeb(WWW).Eselestándarquesehaimpuestoenlavisualizacióndepáginaswebyeselquetodoslosnavegadoresactualeshanadoptado.
El lenguajeHTML basa su filosofía dedesarrollo en la diferenciación. Para añadir unelemento externo a la página (imagen, vídeo, script, entre otros.), este no se incrustadirectamenteenelcódigodelapágina,sinoquesehaceunareferenciaalaubicacióndedichoelementomediantetexto.Deestemodo,lapáginawebcontienesolamentetextomientrasquerecaeenelnavegadorweb (interpretadordelcódigo) la tareadeunir todos loselementosyvisualizar la página final. Al ser un estándar,HTML busca ser un lenguaje que permita quecualquierpáginawebescritaenunadeterminadaversión,puedaserinterpretadadelamismaforma(estándar)porcualquiernavegadorwebactualizado.
![Page 25: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/25.jpg)
AlejandroPérezMartín|25
RxJS
ReactiveExtensionforJavaScript(RxJS)esunalibreríaquenospermitetrabajarconflujosde datos asíncronos. Esta librería nos permite crear programasmediante la composición deflujosdedatosasíncronosobasadoseneventos.
Utilizando RxJS se puede representar flujos de datos asíncronos mediante Observables ymanipularestosflujoscondiferentesoperadorescomosifueransimplescoleccionesdedatos.
GitHub
GitHub es una forja (plataforma de desarrollo colaborativo) para alojar proyectos
utilizandoelsistemadecontroldeversionesGit.UtilizaelframeworkRubyonRailsporGitHub,Inc.(anteriormenteconocidacomoLogicalAwesome).Desdeenerode2010,GitHuboperabajoelnombredeGitHub,Inc.Elcódigosealmacenadeformapública,aunquetambiénsepuedehacerdeformaprivada,creandounacuentadepago.
CSS
Hojas de estilo en cascada (o CSS, siglas en inglés de Cascading Stylesheets) es unlenguajedediseñográficoparadefinirycrearlapresentacióndeundocumentoestructuradoescritoenunlenguajedemarcado.Esmuyusadoparaestablecereldiseñovisualdelaspáginasweb, e interfaces de usuario escritas enHTML o XHTML; el lenguaje puede ser aplicado acualquierdocumentoXML,incluyendoXHTML,SVG,XUL,RSS,etcétera.Tambiénpermiteaplicarestilosnovisuales,comolashojasdeestiloauditivas.
JuntoconHTMLyJavaScript,CSSesunatecnologíausadapormuchossitioswebparacrearpáginasvisualmenteatractivas,interfacesdeusuarioparaaplicacionesweb,yGUIsparamuchasaplicacionesmóviles(comoFirefoxOS).
CSS está diseñado principalmente para marcar la separación del contenido deldocumentoylaformadepresentacióndeeste,característicastalescomolascapas,loscoloresy las fuentes. Esta separación busca mejorar la accesibilidad del documento, proveer másflexibilidad y control en la especificación de características, permitir que varios documentosHTMLcompartanunmismoestilousandounasolahojadeestilosseparadaenunarchivo.css,yreducirlacomplejidadylarepeticióndecódigoenlaestructuradeldocumento.
Sass
Sass es un pre-procesador de CSS que nos permiten escribir estilos con una sintaxisparticularymejoradaqueesluegotransformadaacódigoCSSnatural.
La principal ventaja de SASS es la posibilidad de convertir los CSS en algo dinámico.Permite trabajar mucho más rápido en la creación de código con la posibilidad de crearfuncionesquerealicenciertasoperacionesmatemáticasyreutilizarcódigograciasalosmixins,variablesquenospermitenguardarvalores,etc.
![Page 26: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/26.jpg)
AlejandroPérezMartín|26
Libreríasutilizadas
En informática, una librería (del inglés library) es un conjunto de implementacionesfuncionales,codificadasenunlenguajedeprogramación,queofreceunainterfazbiendefinidaparalafuncionalidadqueseinvoca.
Adiferenciadeunprogramaejecutable,elcomportamientoqueimplementaunalibreríano espera ser utilizada de forma autónoma (un programa sí: tiene un punto de entradaprincipal), sino que su fin es ser utilizada por otros programas, independientes y de formasimultánea.Porotraparte,elcomportamientodeunalibreríanotieneporquédiferenciarseendemasíadelquepudieraespecificarseenunprograma.Esmás,unaslibreríaspuedenrequerirde otras para funcionar, pues el comportamiento que definen refina, o altera, elcomportamiento de la biblioteca original; o bien la hace disponible para otra tecnología olenguajedeprogramación.
La libreríade interfacesdeusuarioutilizadaparaeldesarrollo front-enddelpaneldeadministraciónhasidoAngularJSMaterial,unframeworkdeinterfacesdeusuarioadaptadoaAngularJSbasadoenMaterialDesigndeGoogle.Estalibreríafacilitaengranmedidaeltrabajodemaquetación y colocación de elementos enHTML gracias a componentes que siguen elestándarresponsive.
PencilProject
SoftwaredemodeladobajoelestándarUMLutilizadoparaeldiseñodelosdiagramasdecasosdeuso.
StarUML
SoftwaredemodeladobajoelestándarUMLutilizadoparaeldiseñodelosdiagramasdecasosdeuso.
![Page 27: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/27.jpg)
AlejandroPérezMartín|27
UML
El lenguaje unificado demodelado (UML, por sus siglas en inglés, UnifiedModelingLanguage)esellenguajedemodeladodesistemasdesoftwaremásconocidoyutilizadoenlaactualidad;estárespaldadoporelObjectManagementGroup(OMG).
Esunlenguajegráficoparavisualizar,especificar,construirydocumentarunsistema.UMLofreceunestándarparadescribirun"plano"delsistema(modelo), incluyendoaspectosconceptuales tales como procesos, funciones del sistema, y aspectos concretos comoexpresiones de lenguajes de programación, esquemas de bases de datos y compuestosreciclados.
EsimportanteremarcarqueUMLesun"lenguajedemodelado"paraespecificaroparadescribirmétodosoprocesos.Seutilizaparadefinirunsistema,paradetallarlosartefactosenelsistemayparadocumentaryconstruir.Enotraspalabras,esellenguajeenelqueestádescritoelmodelo.
1.7.2. Recursoshardware
Durante el desarrollo del proyecto se utilizaron diferentes equipos (con diferentessistemas operativos) para comprobar el comportamiento del portal de administración endiferentesnavegadores.
Estosequiposutilizadosfuerontresfundamentalmente:
• Portátil HP Pavilion G6 con sistema operativo Ubuntu 16.04 y navegadores MozillaFirefoxyGoogleChrome.
• Ordenador de sobremesa con sistemaoperativoWindows 10 y navegadoresMozillaFirefoxyGoogleChrome.
• PortátilMacbookPro15”consistemaoperativoMacOSSierraynavegadoresGoogleChromeyVivaldi.
![Page 28: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/28.jpg)
AlejandroPérezMartín|28
1.8. Planificacióntemporal
Acontinuación,semuestralaestimacióntemporalinicialqueasignamosalosdiferentesmódulosdeldesarrollodelproyecto,asícomoladedicaciónfinalylavariaciónentreellas.
Fase Duración(horas)
Formaciónypreparacióndelentornodetrabajo
20
Análisisydiseño
30
Desarrolloeimplementación
180
Prueba
20
Documentación
30
Tabla1.Planificacióninicial
Como podemos observar en la primera tabla, estimamos que íbamos a dedicar untiempomayoralapartadodelanálisisdelproblemaydiseñodelasoluciónquealaformaciónyalapreparacióndelentornodetrabajonecesarioparalarealizacióndelproyecto.Alfinal,comopodemos observar en la segunda tabla, estos tiempos se invirtieron, llevándonosaproximadamenteeldobledetiempolapreparacióndelentornodetrabajoquelasetapasdeanálisisydiseño.Estofuedebidoaquesurgieronproblemasdeincompatibilidadconalgunasherramientasqueempleamosalprincipioyporque,enmicaso,nohabía tenidoexperienciaanteriormenteendesarrollarunproyecto.
Fase Duración(horas)
Formaciónypreparacióndelentornodetrabajo
40
Análisisydiseño
20
Desarrolloeimplementación
200
Prueba
10
Documentación
60
Tabla2.Dedicaciónfinal
![Page 29: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/29.jpg)
AlejandroPérezMartín|29
Enunprincipiotambiénestimamosquelarealizacióndeladocumentaciónrelativaalproyectoibaatenerunaduraciónaproximadade30horasypudimosobservarquealfinalestetiemposeextendióengranmedida.
También es interesante remarcar, aunque sea común, que la previsión temporaldestinadaalaimplementacióndelproyectofuequizásalgooptimista.
![Page 30: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/30.jpg)
AlejandroPérezMartín|30
2. Bloque2.DesarrollodelProyecto
2.1. AnálisisEsta etapa tiene por objeto realizar un análisis global del sistema, estableciendo los
requisitos de todos los elementos del sistema y luego asignar al software la parte de losrequisitosqueleafectan.Esteplanteamientodelsistemaesesencialcuandoelsoftwaredebeinterrelacionarseconotroselementos,talescomopersonas,hardwareybasesdedatos.
2.1.1. Primerareuniónycontextualizacióndelproblema
Laetapadeanálisiscomienzacuandotenemoselprimercontactoconelencargadodelaempresainstaladora,cuyoproblemaresolvemosenesteproyecto.Enesareuniónconocemoselproblemadeunamaneraglobalylotomamoscomounaprimeratomadecontactodondeyapodemoscapturaralgunosrequisitosyfamiliarizarnosconelcontextodelmismo.
Enestaprimerareuniónobtuvimosque:
• La empresa actualmente se comunica con sus empleados a través de llamadastelefónicasoatravésdeaplicacionesdemensajeríainstantáneacomoWhatsApp.
• La empresa recibe la información de la obra a través de hojas de cálculo (Excel) ypresentaciones(PowerPoint).
• Cuandolosempleadosterminanunadeterminadatareadelaobradebenfotografiarla.Dicha fotoesenviadaenmúltiples casosal encargadode laobraa travésde correoelectrónicooaplicacionesdemensajeríainstantáneacomoWhatsApp.
• Losempleadosavecessedejanatrásalgunafotooalgunatareasinhacer,porloqueposteriormentedebenvolveralaobra,conlaconsecuentepérdidadetiempo.
• Lafacturadelaobraescalculadaygeneradamanualmenteporelencargadodelaobra.
• Lasobrasestánformadasportareasyademástienenasociadasmaterialesyempleados.
• Es tareadel encargadode la obradibujar sobreplano, las conexionesque sedebenrealizar en la obra, así como por dónde deben pasar los cables, cuántas cajas deconexiónydequétiposonnecesariasenlaobra.
• Porlotanto,unaposibleestructuradelaaplicaciónaprioripodríaserlageneracióndeunportalwebdeadministración(dondeelencargadopuedegenerarlasobrasyasignarempleadosalasmismas)yunaaplicaciónmóvilparalosempleadosdelaobradondepodríanaccederalaobraquetienenasignadaeirnotificandoelprocesodelamisma.
![Page 31: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/31.jpg)
AlejandroPérezMartín|31
2.1.2. Glosariodelenguajepropiodelcontextodelproblema
Palabra Descripción
Obra
Ejecentraldelproyecto,estáformadaporunaomástareas,materialasociadoaellayenlaqueintervienenunoomás
empleados,alfinaldelamismasellevaacabounprocesodecertificaciónporpartedelaempresainstaladoraalaempresa
contratante.
Tarea
Subconjuntopertenecienteaunaobrayquepuedecontenersubtareas.Determinanelestadodefinalizacióndeunaobray
puedensergeneradaporlosempleados.
Certificación
Alfinalizarunaobra,esteeselprocesoporelcuallaempresaquelaharealizado,medianteladocumentacióngeneradade
lafinalizacióndelastareas,finalizalaobraygenerauncertificadoquelepermiteelcobrodelamismaenfunciónde
unbaremo.
Empleado
Personaqueacudealaobraquehasidoasignadateniendoquerealizarlastareaspertenecientesaellaypudiendocrear
nuevastareassifueranecesario.
Encargadodeobra
Personaqueseencargadedardealtalasobrasenelsistemayasignarempleadosaella,unavezterminadalaobrale
corresponderealizarelprocesodecertificación.Tabla3.Glosariodelenguajepropiodelcontextodelproblema
2.1.3. Generacióndelprototipo
Después de esa primera reunión, decidimos, en base a los requisitos capturados,trabajarenunprototipono funcional,de laaplicaciónmóvilpara losempleados,elcualnospermitiríaajustarnuestraposiblesoluciónalarealidadplanteadaporél.ParaelloutilizamoselsoftwarePencil.
Losprototipos sonunavisiónpreliminardel sistema futuroque se implementará. Laelaboración de prototipos de un sistema de información es una técnica valiosa para larecopilaciónrápidadeinformaciónespecíficaacercadelosrequerimientosdeinformacióndelosusuarios.
En nuestro caso, el prototipo recogía una posible interfaz gráfica para la aplicacióndestinadaalosempleadosdelaobra.Enélpodíamosobservarunapequeñapantalladeiniciodesesiónyposteriormenteellistadodeobrasasignadoadichoempleado.
![Page 32: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/32.jpg)
AlejandroPérezMartín|32
Loprimeroqueselemostrabaalempleadoenlaaplicacióneraunapantalladeiniciodesesión donde debía introducir sus credenciales para acceder a la lista de obras que teníaasignada.
Ilustración2.Pantallasprincipalesdelprototiponofuncional
Unavezautenticadoselemostraríaunaseriedeobrasquetendríaasignadas,porpartedeladministrador,pudiendoasíseleccionarlaobraalaquedesearaacceder.
Además,elusuariopodíaordenarlaaparicióndelasobrassegúnsuscampos,comolafecha,elnombreoelidentificadordelamisma.
Al seleccionar una obra el empleado tenía la posibilidad de ver toda la informaciónrelativa a la obra distribuida en la vista a través de pestañas (tareas, ubicación y archivos)totalmentenavegables.
2.1.4. Segundareunión,validaciónyacotaciónderequisitos
Enlasegundareunión,yaconociendoelcontextodelproblemayhabiendotrabajadoenelprototiponofuncionalpudimosconcretarmáslosrequisitosyperfilarnuestravisióndelproblemayunaposiblesolución.Tambiénnossirvióparavalidarlosrequisitosquesurgierondurantelaprimerareunión.
Enestasegundareuniónsurgieron,además,nuevosrequisitos:
• Elencargadode laobradeseadisponerdeunpaneldeadministraciónquerefleje laactividaddecadaempleadoindividualmenteparaasíobservaryevaluarsuevolucióndentrodelaempresa.
![Page 33: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/33.jpg)
AlejandroPérezMartín|33
• Elportaldeadministración,encargadodelageneracióndelasobras,debíapoderautoimportarlastareasatravésdeunExceldadoporlaempresa
• Elempleadopuedeañadirsubtareasaunatareacreadaporél.
• Elempleadodebepodercambiarelestadodelastareasquevayarealizando.
• Notodaslastareastienenporquétenersubtareas.
• Laexistenciadeunsistemadeincidenciasquepermitalacomunicaciónentreempleadoyadministradordemanerabidireccional.
• Sería interesante que la aplicación también funcionara en entornos sin acceso ainternet.
• Se remarcó que en el diseño final se podría incluir, para tareas relacionadas con eltendido del cable, que la aplicación almarcar dos tramos de cable auto calculara ladistanciarealutilizada.
• El encargado de obras nos consultó si, para futuras versiones, sería posible que laaplicaciónautodibujarasobreplanolasconexionesarealizarenlaobraypordóndedebíapasarelcableinstalado.
2.1.5. Especificaciónfinalderequisitosyacotacióndelproyecto
En resumen y como conclusión a la etapa de recogida de requisitos, la solución alproblemapropuestopor el encargadode la empresa instaladorade fibra óptica pasapor eldesarrollodeunportaldeadministraciónquepermita:
• Generar obras a las que poder asignarles empleados, materiales, ficheros adjuntosnecesariosparalarealizacióndelamismayunalistadetareasquepuedencontenersubtareas.Asícomoobservarelestadoderealizacióndelamisma.
• ImportartareasaunaobraatravésdeunExceldado.
• ImportarmaterialaunaobraatravésdeunExceldado.
• Dardealtaanuevosempleadosenlaplataforma.
• Hacerelseguimientodelrendimientodelosempleadosdemaneraindividual.
• Una vez terminada la obra, y haciendo uso de la información aportada por losempleadosa travésde laaplicación, laherramientadeberágenerarunacertificaciónquepermitaalaempresainstaladorafacturar.
• Gestiónde incidenciasrelativasa laobraquepermitan lacomunicaciónbidireccionalentreadministradoryempleado.
![Page 34: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/34.jpg)
AlejandroPérezMartín|34
Asimismo,sedeseaeldesarrollodeunaaplicaciónmóvilparalosempleadosquedebedarleslaposibilidadde:
• Iniciarsesiónenellayteneraccesoalasobrasquetenganasignadas.• Consultarelestadoderealizacióndelamismamediantelalistadetareaspendientes.• Cambiarelestadodeunatareapertenecientealaobra.• Adjuntarinformaciónrelativaalarealizacióndeunatareadentrodelaobraquepermita
lacertificacióndelamisma.• Crearnuevastareas.• Gestiónde incidenciasrelativasa laobraquepermitan lacomunicaciónbidireccional
entreadministradoryempleado.• Laaplicacióndebesermultiplataforma.
Posteriormente a la segunda reunión y debido al gran número de requisitos ya
especificados,decidimosacotarquéaspectosabarcaríanuestroproyecto.Paraellopriorizamosenlosrequisitosycasosdeusomásimportantes,decidimosgenerarundiagramadecasosdeuso,asícomoundocumentoasociadoquenospermitieravisualizarlosdemaneramássencillaynosgarantizaraunavisiónglobaldelproyecto.2.1.6. IdentificacióndeactoresprincipalesdelsistemaDuranteel procesode análisis identificamos los siguientes actoresque interactuarían conelsistema.
Actor Descripción
AdministradorUsuarioprincipaldelsistemaescapazdecrearobrasyasignarempleadosaella,ademáspuedecertificarlasobras.Tambiénpuededardealtaaempleadosdentrodelsistemaatravésdel
paneldeadministración.
Empleado
Usuarioprincipaldelaaplicaciónmóvildelproyectodóndepodráactualizarelestadodeunaobramediantelarealización
detareasquetengaasignadas.Tabla4.Actoresprincipalesdelsistema
![Page 35: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/35.jpg)
AlejandroPérezMartín|35
2.1.7. Especificaciónydiagramasdecasosdeuso
Acontinuación,mostramoslatabladeespecificacióndeloscasosdeusoque,atravésdelaetapadeanálisiscreemosquedeberíancumplirlasaplicacionesdelproyectopararesolverelproblemaensutotalidad.
Actorprincipal CasosdeusoAdministrador 1.IniciarsesiónenpaneldeadministraciónAdministrador 2.Crearobra
Administrador
3.Gestionarobra3.1.Gestionartareas3.1.1.Añadirtarea3.1.2.Eliminartarea3.1.3.Editartarea3.1.3.1.Añadirsubtarea3.2.Importartarea3.3.Gestionarmaterial3.3.1.Añadirmaterial3.3.2.Eliminarmaterial3.4.Importarmaterial3.5.Gestionaradjuntos3.5.1.Añadiradjunto3.5.2.Eliminaradjunto3.6.Cambiarestado(obra)3.7.Certificarobra
Administrador 4.Registrarempleados
Administrador
5.Gestionarempleados5.1.Editarempleado5.2.Eliminarempleado5.3.Notificarempleado5.4.Visualizarempleado
Empleado 6.IniciarsesiónenlaappEmpleado 7.Visualizarobra
Empleado 8.Gestionararchivosadjuntosatarea8.1.Adjuntararchivoadjuntoatarea8.2.Eliminararchivoadjuntoatarea
Empleado 9.AñadirtareaaobraEmpleado 10.Cambiarestado(tarea)Empleado 11.Notificarincidencia
Tabla5.Tabladeespecificacióndeloscasosdeuso Comohemosdichoanteriormente,porcuestióndelimitaciónenelnúmerodehorasdelTFT,debimosacotarquécasosdeusonoseibanaimplementarduranteeldesarrollodelproyecto,estandoestossubrayadosenlatabla2.1.3.
Amododeilustracióntambiénhemosqueridoañadirelcasodeusodeladministrador,Gestionarempleados,aunquelaespecificaciónydiagramacompletospuedeencontrarseenelanexoI.
![Page 36: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/36.jpg)
AlejandroPérezMartín|36
Nombre Gestionarempleados ID 5Creadopor ÁlvaroRomeroPerdomo Fecha 22/10/2016Modif.por ÁlvaroRomeroPerdomo Fechamodif. 22/10/2016
Actorprincipal:
ADMINISTRADORPersonalinvolucradoointereses:
1. ADMINISTRADOR:quierepodereditar/borrarempleadosdelsistema.Descripción:
ElADMINISTRADORpuedeeditarlainformacióndeunempleadoyaexistente,asícomoeliminarelmismosifueranecesario.
Precondición:ElADMINISTRADORdebeestarautenticadoyexistiralmenosunempleadoaeditar/borrarenelsistema.
Postcondición:1. Lainformacióndelempleadoquedaactualizada.2. Elempleadoquedaeliminadodelsistema.
Flujonormal:1. ElADMINISTRADORaccedealportaldeadministración.2. ElADMINISTRADORaccedealavistadelosempleados.3. ElADMINISTRADORseleccionaelempleadoquedeseagestionar.
a. Editarempleado(5.1).b. Borrarempleado(5.2).c. Notificarempleado(5.3).d. Visualizarempleado(5.4).
Flujoalternativo:Tabla6.Tabladeespecificacióndelcasodeuso"Gestionarempleados"
![Page 37: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/37.jpg)
AlejandroPérezMartín|37
2.2. Diseño
Laetapadediseñosedescribecomoelprocesodeaplicardistintastécnicasyprincipiosconelpropósitodedefinirundispositivo,procesoosistemasconlossuficientesdetallescomoparapermitirsudesarrollo.Elobjetivodeldiseñadoresproducirunmodeloorepresentacióndeunaentidadqueseráconstruidamásadelante.
2.2.1. Componentesdelsistema
Durante la fase de análisis identificamos dos grandes módulos software quecomprenderían el proyecto, por un lado, el portal de administración y por otro lado unaaplicaciónmóvil.Estosdosmódulosestaríanalimentadosdeunaúnicabasededatosyambosharíanlaboresdelecturayescriturasobrelamisma,porloquedecidimosquesehacíanecesariala creación de una API REST utilizando para ello el stack MEAN. De este modo tambiéncubriríamoslanecesidaddeaprendizajedenuevastecnologíasdedesarrollowebqueteníamosparaesteproyecto.
Deestamaneradefinimosparaelproyectounaarquitecturacliente-servidor.
Estaarquitecturasedivideendospartesclaramentediferenciadas,laprimeraeslapartedelservidory lasegunda ladeunconjuntodeclientes (siendodos losclientesenestecaso:portaldeadministraciónyaplicaciónparaempleados).
Normalmenteelservidoresunamáquinabastantepotentequeactúadedepósitodedatosyfuncionacomounsistemagestordebasededatos(SGBD).
Porotrolado,losclientessuelenserestacionesdetrabajoquesolicitanvariosserviciosalservidor.
Ambaspartesdebenestarconectadasentresímedianteunared.
Enlailustración3semuestraunarepresentacióngráficadeestetipodearquitectura:
Ilustración3.Representacióngráficadeunaarquitecturacliente-servidor
El cliente realiza peticiones a un servidor y éste le responde ofreciéndole undeterminadoservicio.
![Page 38: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/38.jpg)
AlejandroPérezMartín|38
2.2.2. UtilizacióndelpatróndediseñoModelo–Vista–Controlador(MVC)
Desdeelprincipiodelaetapadediseñodecidimosqueíbamosaconstruirtantoelportaldeadministracióncomolaaplicacióndestinadaalosempleados.Paraello,seharíausodelstackMEAN, por lo que para el lado del cliente construiríamos las aplicaciones en AngularJSimplementando éste el patrón de diseñoModel View Controller (MVC) en el desarrollo deaplicacionesweb.
En el siguiente diagrama podemos observar la interacción entre los diferentescomponentes.
Ilustración4.InteraccióndecomponentesconAngularJS
2.2.3. DesarrollohíbridoconIonic
Para el desarrollo de la aplicación móvil decidimos optar por un desarrollo híbridoporque, aparte de permitirnos cumplir los requisitos del proyecto (compatibilidad en variosdispositivos),cubríamosasílanecesidaddeaprendizajedeldesarrollodeaplicacionesmóviles.
Además, consideramos que el aprendizaje de las tecnologías web sería muchomásrápidoqueelaprendizajedetecnologíasnecesariasparaeldesarrollonativodelasaplicaciones,por loqueéste fueunmotivomásquenoshizodecidirnosporundesarrollohíbridopara laaplicaciónmóvil.
![Page 39: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/39.jpg)
AlejandroPérezMartín|39
2.2.4. Estructurayentidadesdelabasededatos
LasbasesdedatosenMongoDBestánformadasporesquemasenlugardeportablascomo en una base de datos relacional común como puede ser MySQL. Siguiendo estanomenclaturaya travésdel siguientediagrama,nuestrabasededatosestá formadapor lossiguientesesquemas.
Ilustración5.Diagramadeentidadesdelabasededatos
Aunqueenunprincipiononoslohabíamosplanteado,decidimosincluirenlabasededatoselesquemaEquipment,demaneraqueelsistemapudieraalmacenarelmaterialqueseibaañadiendoalasdiferentesobrasyéstepodríaserreutilizado,yaqueserepetíaconbastantefrecuenciaentrelasdiferentesobras.
DebemosañadirqueeldriverMongooseparaNode.jsfacilitóengranmedidalalabordeconexiónconlabasededatos,permitiéndonostrabajarenunentornomuchomáscercanoalaorientacióndeobjetosyhaciendoquelatraducciónenlabasededatosfuerainstantánea.
2.2.5. ArquitecturadelportaldeadministraciónenAngularJS
Comohemoscomentadoanteriormente,decidimosdesarrollarelproyectobajoMEANStackporloqueimplementamoselpaneldeadministracióncomounaaplicaciónenAngularJSqueseconectabaaunaAPIconstruidaenNode.js.
![Page 40: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/40.jpg)
AlejandroPérezMartín|40
Antes de comenzar a trabajar con Angular, decidimos cómo íbamos a organizar laaplicaciónyquéresponsabilidadesibaatenercadafichero.Paraello,consultamoslasformasmáscomunesenlasquesesuelendividirlasaplicacionesenAngularJSyescogimoselPatrónEspecífico,quesepuedeobservaracontinuaciónyquesecaracterizaporsepararlosserviciosyloscontroladoresdeunmismoelementoendistintascarpetas,consiguiendoasíunaseparaciónasuvezdelasresponsabilidadesdecadafichero.
Ilustración6.JerarquíadeficherosdeunaaplicaciónenAngularJS
![Page 41: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/41.jpg)
AlejandroPérezMartín|41
2.3. Implementación
Es el procesode instalar equiposo softwarenuevo, como resultadodeunanálisis ydiseñopreviocomoresultadodelasituaciónomejoramientodelaformadellevaracabounproceso automatizado. Al implementar un sistema lo primero que debemos hacer esasegurarnosquéelsistemaseaoperacionaloquefuncionedeacuerdoalosrequerimientosdelanálisisypermitirquelosusuariospuedanoperarlos.
Antes de comenzar la etapa de implementación decidimos dividirla en tres grandesmódulos:
1. DesarrollodeAPIRESTenMongoDByNode.jsquepermitaelalmacenamientodelosdatosyelintercambiodeinformaciónentrelasdiferentesaplicaciones.
2. Desarrollodeunpaneldeadministraciónquepermitalageneracióndeobras,tareas,empleadosymaterialasociado.
3. Desarrollodeunaaplicaciónmóvilquepermitaalosempleadoslaconsultadelaobraquetenganasignada,asícomoelenvíodeinformaciónrelativaalastareas.
Enestemódulovamosatratar,sobretodo,eldesarrollodelaAPIRESTyelpaneldeadministración. Habiendo sido el primero de los dos desarrollado de manera conjunta y elsegundodemaneraindividual.
En la primeraetapadel desarrollo comenzamos con la configuracióndel servidordeNode.js para la API REST y la creación de la base de datos. Veremos cómo generamos lasentidadesysuscamposenMongoDBatravésdesudriverparaNode.js,Mongoose.TambiénmostraremoslarespuestadenuestraAPIRESTsiendosometidaainterrogacionesHTTP.
En la segunda etapa del desarrollo y ya con la API REST operativa, pasamos a laimplementacióndelaaplicaciónmóvil,dividida,fundamentalmente,entrespartes:
1. Sistemadecontroldeusuarios(loginylogout).2. Visualizacióndelcontenidodelabasededatos(listadodeobrasasignadas,directorio
deempleados,detalledelaobra).3. Gestióndelcontenidoenlabasededatos(edicióndeobrasasignadas).
![Page 42: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/42.jpg)
AlejandroPérezMartín|42
2.3.1. DesarrollodelaAPIRESTenNode.jsyMongoDB
LaprimeraetapadelaimplementacióndelproyectoconsistióeneldesarrollodeunaAPIRESTqueofrecieraunserviciowebaserconsumidotantoporunpaneldeadministracióncomoporunaaplicaciónmóvil.Acontinuación,explicaremosenquéconsistiódichoprocesodedesarrollo.
EntornodedesarrolloconDocker
Comosolucióna lanecesidaddequecadamódulodelproyectofuera independientedecidimos hacer uso de la tecnología de contenedores que ofrece Docker, la cual facilita aldesarrollador trabajar en el entorno necesario independientemente del sistema operativo yevitandolaconfiguraciónmanualdeservidores,basesdedatos,etc.
ParaellosegeneróunarchivodeconfiguracióndeDocker(docker-compose.yml)conelfindeconfigurarcadaunodelosserviciosnecesarios:
• UnservidorNode.jsparalaAPIREST• ServidorApacheparaelpaneldeadministración• ServidorparalabasededatosdeMongoDB
Acontinuación,semuestraunacapturadelarchivodeconfiguraciónquecomponecadaunodelosentornosindividualesdefinidos:
Ilustración7.CaptuadelficherodeconfiguracióndeDocker
![Page 43: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/43.jpg)
AlejandroPérezMartín|43
Primerospasosdeldesarrollode laAPIREST (instalacióndedependenciasyconfiguracióndelservidorNode.js) Como todas estas tecnologías eran nuevas para nosotros, decidimos empezar desdeabajohaciaarriba,porloqueunavezgeneradoeldirectoriodelproyectoyhabiendoiniciadoelrepositorio Git, nos dispusimos a instalar Node.js. Ya finalizada la instalación de Node.js ennuestro ordenador procedimos a generar el fichero package.json, que recoge la meta-informaciónrelacionadaconelproyecto,asícomolasdependenciasqueiránsiendonecesariasalolargodeldesarrollo.Acontinuaciónpodemosverlaversióninicialdelficheropackage.json.
Ilustración8.Versióninicialdelficheropackage.json
Unavezespecificadaslasdependenciasatravésdelficheropackage.jsonprocedimosaejecutarelgestordepaquetesdeNode.js,npm(nodepackagemanager).
Ya instaladas las dependencias de la versión inicial de nuestro proyecto podíamosempezar a configurar el servidor Node.js a través del fichero server.js importando lasdependenciasnecesariasparaelarranquedelmismo,definiendolasrutasdeaccesoHTTPqueva a tener nuestro servidor e indicándole un puerto por el que escuchará la aplicación, ennuestrocasoeltresmil.
TraslanzarelservidordeNode.jspodríamosobservarelsiguientemensajehaciendounapeticiónGETalservidoratravésdelpuerto3000.
![Page 44: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/44.jpg)
AlejandroPérezMartín|44
Ilustración9.PeticiónGETalservidorenelpuerto3000
CreandolosmodelosdenuestraAPIREST
AlahoraderealizarnuestromodeladodedatosparalaAPIRESThemosutilizandoeldriver de MongoDB para Node.js, Mongoose. Hemos decidido usarlo porque aparte deestructurardemejormaneraelaccesoalabasededatosporpartedelservidor,tambiénnospermiteunamejoraenelcódigoyunamayormodularizacióndelmismo.
A continuación, podemos observar el fichero resumido del esquema de Mongoosepropuestoparaelmodeladodelasobras.
![Page 45: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/45.jpg)
AlejandroPérezMartín|45
Ilustración10.EsquemaresumidodelmodelodeobrasdeMongoose
Estosficherosasociadosalmodelodelaaplicacióndecidimosintroducirlosenunnuevodirectorioparaelproyecto,models.PorloqueprontonosdimoscuentadequedebíamosoptarporundesarrolloorientadoalpatróndediseñoMVCdondelasresponsabilidadesestuvieranclaramentediferenciadas.
UtilizacióndelpatróndediseñoModelo–Vista–Controlador(MVC)
Durante el proceso de aprendizaje inicial todas las responsabilidades de la API REST(accesoalabasededatos,gestionarpeticionesHTTP,configuracióndelservidorNode.js,etc.)seencontrabanenunúnicofichero,haciéndonosmásengorrosalalabordemantenimientodelcódigo ymodularidaddelmismopor lo quedurante la implementación final de laAPI RESTdecidimosseguirelpatróndediseñoMVCcomosepuedeobservarenlasiguientejerarquíadeficheros.
![Page 46: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/46.jpg)
AlejandroPérezMartín|46
Ilustración11.JerarquíadeficherosdelaAPIRESTsiguiendopatrónMVC
SistemadeautenticaciónporToken(JWT)
El funcionamientoesel siguiente:elusuarioseautenticaen laaplicaciónconunparusuario/contraseña. A partir de entonces, cada petición HTTP que haga el usuario vaacompañada de un Token en la cabecera. Este Token no esmás que una firma cifrada quepermiteanuestroAPIidentificaralusuario.PeroesteTokennosealmacenaenelservidor,sinoenelladodelcliente(ennuestrocasoLocalStorage)ylaAPIeselqueseencargadedescifrareseTokenyredirigirelflujodelaaplicaciónenunsentidouotro.
Comolostokenssonalmacenadosenelladodelcliente,nohayinformacióndeestadoy la aplicación se vuelve totalmente escalable. Podemos usar la misma API para diferentesaplicaciones(web,mobile,Android,iOS...),tansólodebemospreocuparnosdeenviarlosdatosenformatoJSONygenerarydescifrartokensenlaautenticaciónyposteriorespeticionesHTTP.
En la firmadel tokenporpartedel servidor, se incluyeademás información relativaalusuario, como por ejemplo el rol que tiene dentro de la aplicación, lo cual se emplea pararestringirelaccesoadiversosrecursosdelaAPI,evitandoasí,porejemplo,queunusuariopuedaeliminarobrasousuariossinseradministrador.
![Page 47: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/47.jpg)
AlejandroPérezMartín|47
Ilustración12.DiagramadepeticionesHTTPcontoken(JWT)
PruebasypeticionesalaAPIREST
PosterioralprocesodedesarrolloeimplementacióndelaAPI,lasometimosadiferentespeticiones para comprobar su funcionamiento mediante el software Postman, el cual nospermitíagenerarpeticionesGET,PUT,DELETEoUPDATE,entreotras,contralaAPIdemaneraquepodíamosvercuáleralarespuestadeéstafrenteaesaspeticiones.EnelanexonúmerocincosedetallacompletamentelaestructuradepeticionesqueaceptalaAPI.
Ilustración13.EjemplodepeticiónHTTPutilizandoPostman
![Page 48: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/48.jpg)
AlejandroPérezMartín|48
2.3.2. Desarrollodelaaplicaciónmóvil
Una vez creados los servicios de la API necesarios comenzamos con el desarrollo de laaplicaciónmóvildelostrabajadores,quelespermitiráaccederalainformacióndelasobrasque,previamentecreadasatravésdelpaneldeadministración,tenganasignadas,asícomomodificarsuinformaciónenprodecumplimentarlamayorcantidaddedatosposible.Comohemosdichoanteriormente este trabajo se centra en específico enel desarrollo tantode laAPIREST, yadescrito,comoeneldesarrollodelaaplicaciónmóvil.
Estructurainicialyvistaprincipal,elDashboard
Trasunasegundareuniónygraciasalademonofuncionalpropuesta,identificamosque,paraelusuario finalde laaplicación, la informaciónmás relevantealaccedera laaplicacióndebía ser la relativa a las obras que el propio empleado tuviera asignadas, por lo que seestablecióestavistacomolaprincipaldelaaplicación.
Parasudesarrolloysiguiendo laestructuraproporcionadaporelclientede terminaldeIonic, se comenzó generando las distintas páginas/pantallas que compondrían la aplicación.SiguiendolasdirectricesdelaIngenieríadelSoftware,concretamentedeldesarrollobasadoencomponentes,yelcódigolimpio,secrearondiversosdirectoriosdondeiránsituadoscadaunode los ficheros correspondientes a cada página. A continuación, mostramos la jerarquía deficherosfinalresultante:
Ilustración14.Jerarquíadeficherosdelaaplicaciónmóvil
![Page 49: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/49.jpg)
AlejandroPérezMartín|49
Dentro de la carpeta src/pages/dashboardy al igual que en el resto de carpetas de laspáginas,encontraremosunarchivoTypeScript(.ts)quecontendrátodalalógicadepágina,asícomosusestilosenSass(archivo.scss)ylaplantilladelcomponenteenHTML(archivo.html).
Ilustración15.Jerarquíadeficherosdelapáginaprincipaldelaaplicación
Modelosdedatos
AprovechandounadelascaracterísticasdeTypeScriptcomoeseltipadodedatos,sehancreadodistintosmodelosdedatosutilizadosendistintospuntosdelaaplicaciónconelfindedetectarerroresdecódigoentiempodecompilaciónyasíevitarlosdurantelaejecucióndelaaplicación.Acontinuación,semuestraunejemplodeunodelosmodelosdedatosdefinidos.
Ilustración16.Modelodedatosdeltipo‘Obra’
ServiciosyconexiónalaAPI
Los servicios utilizados por los distintos componentes de la aplicación albergan laresponsabilidaddeconexiónalaAPIyporlotantoelaccesoalabasededatos.Estosserviciossoninyectadoshaciendousodelpatróndeinyeccióndedependencias(DI)acadaunodelos
![Page 50: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/50.jpg)
AlejandroPérezMartín|50
componentes. A continuación, podemos observar un fragmento del fichero del servicioencargadodelaconexiónconlainformaciónrelativaalasobrasenlaAPI,work.service.ts.
Ilustración17.Ficherowork.service.ts
ComopodemosobservarelficheroguardagransimilitudconlainterfazdescritaporlaAPI.
Unavezcreadoslosmétodosdeaccesoalosservicios,sólotendríamosqueinstanciarlosysuscribirnosalosmismosparaobtenerlasrespuestasenviadasporlaAPI.
En nuestro caso, hacemos uso del servicio de las obras desde la página principal de laaplicaciónparamostrarellistadocompletodeobrasasignadasalempleado.
AmododeejemplomostramoslainstanciaciónysuscripciónalservicioatravésdelmétodofetchWorks().
![Page 51: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/51.jpg)
AlejandroPérezMartín|51
Ilustración18.Ficherodashboard.ts
ProcesodeLoginyautenticaciónenelpaneldeadministración
Unavezimplementadalapáginaprincipal,latareamásrelevanteaacometerconsistiríaendesarrollarelcontroldeaccesoalamisma.
Paraellogeneramosunavistadenombrelogin,quesemostraríaantesquelapantallaprincipalyseríalaencargadadeobtenerlosdatosnecesariosparaautenticaralusuarioenelsistemay,porende,teneraccesoalosserviciosdelaAPI.
NotificacionesPush
UnafuncionalidadbastanteútileslaincorporacióndenotificacionesPush,quenosonmásquemensajesdirectosalosdispositivosmóvilesquetenganinstaladalaaplicación.Paraello,sehahechousodelserviciodenotificacionesFirebaseCloudMessagingdeGoogle.
Algunosdelosusosdeesteserviciopodríanserporejemplolanotificacióndecambiosenunaobraoenviarunavisourgentea todos losempleados.En las siguientescapturaspuedeverseunejemplodeestetipodenotificaciones:
![Page 52: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/52.jpg)
AlejandroPérezMartín|52
Ilustración19.Ejemploderecepcióndenotificacionespush
Documentacióndelcódigo
Conelobjetivodemejorar ladocumentacióndelcódigoyconlaventajadeusarGithubcomoserviciodehospedajedenuestrocódigo,hemoshechousodeCodacy,queofreceanálisisde código, documentación y estilo del proyecto. Los resultados obtenidos se muestran acontinuación.
Ilustración20.CapturadelresumendeanálisisdecódigohechoconCodacy
![Page 53: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/53.jpg)
AlejandroPérezMartín|53
AdemásdeCodacy,sehaincorporadodocumentacióndelaaplicaciónmóvildelproyectocon laherramientaCompodoc,quegeneradeformaautomáticaunresumende losdistintoscomponentesdelaaplicaciónhaciendousodeloscomentariosincluidosenelcódigoduranteeldesarrollo.Ennuestrocasosehaobtenidounporcentajedel100%encuantoalalcancedeladocumentacióndelcódigo,elcualseharealizadosiguiendolasdirectricesdelestándarJSDoc.
Ilustración21.CapturadelresumendelalcancedeloscomentarioshechoconCompodoc
![Page 54: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/54.jpg)
AlejandroPérezMartín|54
2.4. Pruebas
Entodoprocesodedesarrollodesoftwareesnecesariounaetapaconsistenteeneltesteooverificacióndelcorrectofuncionamientodelaaplicaciónqueseestédesarrollando.EnnuestrocasodecidimostestearfuncionamientodelaAPIenelaccesoalabasededatosyoperacionessobrelamisma(creación,actualizaciónyeliminación),paraelloutilizamosunalibreríallamadaMochaquenosfacilitalaejecucióndetestsunitariosasíncronos.
AntesdepoderutilizarlalibreríaMochahizofaltalainstalacióndelpaqueteshould,quepermitelautilizacióndedirectivasdetipoassertparalaverificacióndelosdatosobtenidosdelaconsultaalabasededatos.
A modo de ejemplo hemos decidido adjuntar el fichero encargado de comprobar elcorrecto funcionamiento de las operaciones de inserción, actualización y eliminación deusuariosdentrodelabasededatos.
Ilustración22.Ejemplodeltestdecreacióndeunusuario
Debidoaquealahoradeejecutarlostestsseproducenoperacionessobrelabasededatos,decidimoshaceréstassobreunabasededatosdestinadaalostests.Deestamaneranosaseguramosdequenosepierdenomodificandatosenelprocesodecomprobación.
Atravésdelterminal,ejecutamoslostestsrelativosalasoperacionesconusuariosobteniendolasiguienterespuestaenconsola.
![Page 55: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/55.jpg)
AlejandroPérezMartín|55
Ilustración23.Capturadelosresultadosdelaspruebasunitarias
![Page 56: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/56.jpg)
AlejandroPérezMartín|56
3. Bloque3.ConclusionesyTrabajosFuturos3.1. Conclusionesytrabajosfuturos
Como colofón, en este bloque comentaremos, qué ha supuesto para nosotros eldesarrollodelproyecto,sihemoscumplidonuestrasexpectativasformativas,yquéconclusionesextraemosdeltrabajoenequipoderivadodelacomparticióndelproyectoentredosalumnos.
Finalmente,indicaremosquéfuncionalidadeshanquedadopendientesdedesarrollaracausade la limitacióntemporalyunabateríadepropuestasdemejoraatenerencuentaenfuturasiteracionesdeldesarrollo.
3.1.1. Conclusionessobreeldesarrollodelproyecto
En líneas generales, puedo decir que estoy satisfecho con el trabajo desarrollado.Inicialmentenocontabaconexperienciapreviaendesarrollossimilares,aunquesípartíaconnocionesbásicasenalgunasdelastecnologíasempleadas,porloquehasupuestoungranretoelhaberllegadoahastaestepuntodeconsecución.
Además,mehaayudadoareforzarlosconocimientosadquiridosdurantelacarrerayaque he podido participar en todas las etapas del desarrollo de un producto software,iniciándomeconelanálisis,captaciónderequisitos,diseñoeimplementación(tantoback-endcomofront-end),hastaterminarconladocumentación.Todoestoharesultadomássencilloeinteresante al contar con un problema real de un cliente con el que hemos tenido queinteractuar durante las diversas etapas del desarrollo, lo cual ha proporcionado un primeracercamientoaloquepodríaserunfuturoentornolaboral.
Atodoestohayqueañadirelaprendizajedenuevastecnologíasqueadíadehoytienengranpesoenelmarcodeldesarrollosoftware,comoporejemploelframeworkAngular,delcuálhepodidoversuevoluciónyaqueeldesarrollodelaaplicaciónseinicióconsuversióninicial,AngularJS/Angular1,yluegofuemigradoasuversiónmásreciente,Angular4.Estamigración,aunqueexitosa,supusoungranesfuerzodeimplementaciónyaprendizajedebidoalasmásquenotablesdiferenciasentreambasversiones.
Endefinitiva,estoyorgullosodel resultado finaldel trabajoymásaúnde lasnuevashabilidadesquemehaotorgadoeldesarrollodelmismo.
![Page 57: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/57.jpg)
AlejandroPérezMartín|57
Conclusionesderivadasdelacomparticióndeltrabajofindetítulo
Respecto al trabajo en equipo, ha sido de gran ayuda contar con el apoyo de micompañero,quedurantelasdistintasfasesdeldesarrollohasidoresolutivoconlasdiferentesdudasquehansurgido,ademásdeaportarotropuntodevistaantelaresolucióndeproblemasalosquenoshemosenfrentado.
Encuantoalomásinteresantedeestaexperienciadetrabajoenequipo,amiparecer,hasidoelmanejodelcontroldeversionesGitconGitHub,conelquenohabíatenidoexperienciaentrabajoscolaborativosydelquehemosaprovechadolamayoríadefuncionalidadesofrecidasdecaraalagestióndetareas,comoeselcasodelas‘Issues’,quenoshansidodegranayudaalahoradegestionarlastareasadesarrollar,documentarerroresynuevasfuncionalidades,asícomollevaruncontroldelaevolucióndelasmismas.
Ademásdeestoydebidoaladiferenciadelossistemasoperativosqueempleamosparaeldesarrollo,hemoshechousodeunadelastecnologíasquemássuenanhoyendíacomoesDocker,locualnoshapermitidocontarconunentornodetrabajohomogéneoeindependientedelsistemautilizado.
Para finalizar, quiero agradecer tanto a mi compañero como a los tutores la ayudaprestadadurantetodalasfasesderealizacióndelproyecto,quesinella,habríasidomuchomásdifícilhaberpodidofinalizarlo.
Resultadosobtenidos
Enesteapartadoharemosunbreverecorridopor losobjetivospropuestosparaesteproyectoyveremossiestossehanvistocubiertosdemanerasatisfactoria.
Como citamos en el apartado de objetivos del proyecto, la comunicación entre losempleadosdelasobrasyeladministradordelasmismasserealizabademanerapocoortodoxa,resultando,enmuchoscasosenerroresenlatransmisióndelainformaciónoenlapérdidadelamisma.Conlacreacióndelaaplicaciónparalosempleadosdelasobras,esteobjetivosehavistocubiertoyaquepermitealempleadoguardarinformacióndelastareasquevayarealizandoenunaobrademanerainmediatayeficaz.
Además,mediantelacreacióndeunpaneldeadministración,elencargadodelaobrapuedevisualizaren todomomentoel estadoactualde laobrayasignardemaneraefectivaempleadosaunadeterminadaobra.
Todoestohasupuestounavanceparalaempresaencargadadelainstalacióndelafibraóptica, tanto en la manera de comunicarse internamente con sus empleados como en lacapacidaddecertificacióndelasobrasunavezéstashanfinalizado,nodandolugarapérdidasdeinformaciónqueperjudicaranlacertificacióndelaobray,porlotanto,sufacturaciónporpartedelaempresainstaladora.
![Page 58: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/58.jpg)
AlejandroPérezMartín|58
3.1.2. Trabajosfuturos
Apesardequecreemosquelosrequisitosprincipalespararesolverelproblemapropuestohanquedadosatisfechosatravésdelarealizacióndelproyecto,esciertoque,conmotivodelalimitacióntemporalquesuponeeltrabajofindegrado,hanquedadoalgunosflecossueltosarealizarenfuturasiteracionesdelproyecto.Acontinuación,hacemosreferenciaaellos:
• Automatizacióndelprocesodecertificaciónatravésdelpaneldeadministración.• ImportacióndetareasatravésdeunExceldado.• ImportacióndematerialatravésdeunExceldado.• Autoacotaciónytrazadodeplanosdados.• Chatocomunicacióndirectaentreempleadoyadministradoratravésdeambas
aplicaciones.• Cálculodeestadísticasrelacionadasconelrendimientodelempleado.• Sistemadealmacenamientotemporalenlaaplicaciónmóvilparatrabajarsin
conexiónyposteriorsincronizacióndelosdatos.• Mejoradeldiseñodealgunasvistas.• Publicarelservicioenunentornowebaccesibleexternamente.
Asimismo,queríamosexpresarunaseriedepropuestasdemejoraquesepodríanincluirtambiénensucesivasiteracionesdelproyecto,peroquesonaccesoriasalaresolucióndelproblemaprincipalpropuestoparaéste:
• Abstracciónquepermitalavinculacióndelaaplicaciónavariasempresasinstaladorassimultáneamente.
• ActualizarelportaldeadministraciónalasversionesrecientesdeAngular.• Implementacióndeestadísticasrelacionadasconelvolumendedatosmanejadopor
laaplicación.• Envíodeemailsdenotificaciónatravésdelpaneldeadministraciónaotras
compañíasparanotificarincidencias.• Implementacióndeestadísticasrelacionadasalflujoeconómicoderivadodela
certificacióndelasobras.
![Page 59: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/59.jpg)
AlejandroPérezMartín|59
4. Bloque4.FuentesdeInformación
4.1. FuentesdeinformacióndelBloque1.IntroducciónyContextualización• https://www.adslzone.net/2016/04/01/asi-queda-la-cobertura-despliegue-actual-la-
fibra-optica-espana/• https://www.genbeta.com/actualidad/asi-si-microsoft-visual-studio-code-gratuito-y-
tambien-disponible-en-linux-y-os-x• https://es.wikipedia.org/wiki/JavaScript• http://edumatica.ing.ula.ve/edumatica/Teleclases/Tecniweb/Ingenieria%20Web/Telec
lase/Ejecucion/Practicas/JavaScript/Paginas/CaracteristicasGenerales.htm• https://es.wikipedia.org/wiki/Node.js• https://es.wikipedia.org/wiki/AngularJS• http://www.intelygenz.es/introduccion-a-reactive-programming-con-rxjs-por-gustavo-
marin/• https://es.wikipedia.org/wiki/Biblioteca_(inform%C3%A1tica)• https://es.wikipedia.org/wiki/MongoDB• https://en.wikipedia.org/wiki/Express.js• http://expressjs.com/es/• http://www.mongodbspain.com/es/2014/08/17/mongodb-characteristics-future/• https://es.wikipedia.org/wiki/JSON• https://es.wikipedia.org/wiki/Git• http://aprendegit.com/que-es-git-flow/• https://es.wikipedia.org/wiki/HTML• https://es.wikipedia.org/wiki/Hoja_de_estilos_en_cascada• https://es.wikipedia.org/wiki/GitHub• https://openwebinars.net/blog/docker-que-es-sus-principales-caracteristicas/• https://es.wikipedia.org/wiki/Ley_Org%C3%A1nica_de_Protecci%C3%B3n_de_Datos_
de_Car%C3%A1cter_Personal_(Espa%C3%B1a)• https://carlosazaustre.es/blog/que-es-la-autenticacion-con-token/
4.2. FuentesdeinformacióndelBloque2.Desarrollodelproyecto• http://vilmarygalindez.blogspot.com.es/2011/02/fases-del-diseno.html• https://silkeguabylopez20.wordpress.com/2013/05/01/desarrollo-de-prototipos/• http://equipo.altran.es/desarrollo-aplicaciones-hibridas-moviles-ionic-framework/• https://es.wikipedia.org/wiki/Modelo%E2%80%93vista%E2%80%93controlador• https://carlosazaustre.es/blog/como-crear-una-api-rest-usando-node-js/• https://desarrolloweb.com/articulos/uso-bower-gestor-dependencias.html• http://blog.ionic.io/10-minutes-with-ionic-2-using-the-camera-with-ionic-native/• https://ionicframework.com/docs/
![Page 60: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/60.jpg)
AlejandroPérezMartín|60
5. Bloque5.Anexos
5.1. Anexo1.Casosdeuso
Acontinuación,presentamoseldiagramacompletodecasosdeusodelproyectodondese muestran todas las interacciones que pueden realizar los diferentes actores con lasaplicaciones,asícomoeldocumentodeespecificacióndetodosloscasosdeusodelproyecto.
Ilustración24.Diagramadecasosdeusocompleto
![Page 61: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/61.jpg)
AlejandroPérezMartín|61
Nombre Iniciarsesiónenelpaneldeadministración ID 1
Creadopor ÁlvaroRomeroPerdomo Fecha 22/10/2016
Modif.por ÁlvaroRomeroPerdomo Fechamodif. 27/01/2017
Actorprincipal:ADMINISTRADOR
Personalinvolucradoointereses:1. ADMINISTRADOR:quiereaccederalpaneldeadministración.
Descripción:ElADMINISTRADOR,enelpaneldeadministración,accedealsistemahaciendousodesuscredenciales.
Precondición:ElADMINISTRADORdebeestarregistradoenelsistemapreviamente.
Postcondición:ElADMINISTRADOResredirigidoalpaneldeadministración.
Flujonormal:1. ElADMINISTRADORabreelpaneldeadministraciónweb.2. ElADMINISTRADORintroducesuscredenciales(usuarioycontraseña).3. ElADMINISTRADOResconducidoalpanelprincipaldeadministración.
Flujoalternativo:2.a.Credencialesnoválidas:
2.a.1.Elsistemamuestraunmensajedeerror.Tabla7.Casodeuso:Iniciarsesiónenelpaneldeadministración
![Page 62: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/62.jpg)
AlejandroPérezMartín|62
Nombre Crearobra ID 2
Creadopor AlejandroPérezMartín Fecha 22/10/2016
Modif.por ÁlvaroRomeroPerdomo Fechamodif. 27/01/2017
Actorprincipal:ADMINISTRADOR
Personalinvolucradoointereses:1. ADMINISTRADOR:quierepodercrearobras.
Descripción:ElADMINISTRADORcreaunaobraparaasignarla,almenos,aunempleado.
Precondición:1. ElADMINISTRADORdebeestarautenticado,accederalpaneldeadministraciónydebe
pulsarelbotón“Crearobra”.
Postcondición:LaobraseguardaenlabasededatosyesaccesibleparaelEMPLEADOdesdeelpaneldetrabajodelaaplicaciónmóvilyparaelADMINISTRADORdesdeelpaneldeprincipal.
Extensiones:1. Añadirtarea(3.1.1)2. Importartarea(3.2)3. Añadirmaterial(3.3.1)4. Importarmaterial(3.4)5. Añadiradjunto(3.5.1)6. Cambiarestadodelaobra(3.6)
Flujonormal:1. ElADMINISTRADORaccedealformulariodecreacióndeobrasatravésdelainterfaz.2. ElADMINISTRADORintroducelosdatosrequeridosenelformulariobásicodecreaciónde
unaobrayalterminarpulsaen“Continuar”.3. Elsistemaguardaesainformaciónbásicaenlabasededatos.4. ElADMINISTRADOResredirigidoalagestión/edicióndelaobra.Estaaccióninvolucralos
siguientescasosdeuso:a. Añadirtarea(3.1.1)b. Importartareas(3.2)c. Añadirmaterial(3.3.1)d. Importarmaterial(3.4)e. Añadiradjunto(3.5.1)f. Cambiarestadodelaobra(3.6)
5. ElADMINISTRADORpulsaelbotón“Finalizar”.
Flujoalternativo:Tabla8.Casodeuso:Crearobra
![Page 63: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/63.jpg)
AlejandroPérezMartín|63
Nombre Gestionarobra ID 3
Creadopor AlejandroPérezMartín Fecha 22/10/2016
Modif.por ÁlvaroRomeroPerdomo Fechamodif. 27/01/2017
Actorprincipal:ADMINISTRADOR
Personalinvolucradoointereses:1. ADMINISTRADOR:quierepodergestionarlasobras.
Descripción:ElADMINISTRADOReditaunaobrayacreada.
Precondición:ElADMINISTRADORdebeestarautenticadoylaobradebeestarcreadapreviamente.
Postcondición:Lainformacióndelaobraesmodificada.
Flujonormal:1. ElADMINISTRADORaccedealportalwebypulsasobreunadelasobrasdellistado.2. ElADMINISTRADOResconducidoalavistadelosdetallesdelaobra.3. ElADMINISTRADORpulsaelbotón“Modificarobra”queapareceenestavistayaccedeal
formulariodeedicióndeobrasatravésdelainterfaz.4. ElADMINISTRADORmodifica/añadelosdatosrequeridosenelformulariodeediciónde
obras.Estaaccióninvolucralossiguientescasosdeuso:a. Gestionartareas(3.1)b. Importartareas(3.2)c. Gestionarmaterial(3.3)d. Importarmaterial(3.4)e. Gestionaradjuntos(3.5)f. Cambiarestado(3.6)g. Añadirsubtarea(3.7)
5. ElADMINISTRADORpulsaelbotón“Guardar”.
Flujoalternativo:4.a.Erroresdevalidacióndecampos:
4.a.1.SemuestraunmensajedeerroralADMINISTRADORatravésdelainterfaz.Tabla9.Casodeuso:Gestionarobra
![Page 64: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/64.jpg)
AlejandroPérezMartín|64
Nombre Gestionartareas ID 3.1
Creadopor ÁlvaroRomeroPerdomo Fecha 27/01/2017
Modif.por ÁlvaroRomeroPerdomo Fechamodif. 27/01/2017
Actorprincipal:ADMINISTRADOR
Personalinvolucradoointereses:1. ADMINISTRADOR:quierepodergestionarlastareasdeunaobra.
Descripción:ElADMINISTRADORpuedecrear,editaroeliminartareaspertenecientesaunaobraatravésdeldiálogodegestionartareaoenelmomentodecreacióndelaobra.
Precondición:ElADMINISTRADORdebeestarautenticadoylaobradebeestarcreadapreviamenteoestarelADMINISTRADORenelformulariodecreacióndeobras.
Postcondición:Lainformacióndelaobrarelativaalatareasemodificaenlabasededatos.
Flujonormal:1. ElADMINISTRADORseencuentraenelformulariodecreación/edicióndeobras.2. ElADMINISTRADORpulsasobreelbotón“Añadirtarea”.3. ElADMINISTRADORcompletaloscamposdelformulariorequeridos.4. ElADMINISTRADORpulsaelbotón“Aceptar”ylatareaesañadidaalalistadetareas.
a. Lospasos2-4puedenrepetirsetantasvecescomotareasnecesiteañadirelADMINISTRADOR.
5. ElADMINISTRADORpuedeeditaresatareasilodesea,eliminarlaocontinuarsiloprefiere.
6. ElADMINISTRADORpulsaelbotón“Siguiente”yesdirigidoalsiguientepasodelformulariodecreacióndeobras.
Flujoalternativo:3.a.Erroresdevalidacióndecampos:
3.a.1.SemuestraunmensajedeerroralADMINISTRADORatravésdelainterfaz.Tabla10.Gestionartareas
![Page 65: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/65.jpg)
AlejandroPérezMartín|65
Nombre Añadirtarea ID 3.1.1
Creadopor AlejandroPérezMartín Fecha 22/10/2016
Modif.por ÁlvaroRomeroPerdomo Fechamodif. 27/01/2017
Actorprincipal:ADMINISTRADOR
Personalinvolucradoointereses:1. ADMINISTRADOR:quiereañadirtareasaunaobra.
Descripción:ElADMINISTRADORmedianteelformulariodecreación/edicióndeobrasañadetareasalamisma.
Precondición:ElADMINISTRADORdebeestarautenticadoylaobradebeestarcreadapreviamenteoestarelADMINISTRADORenelformulariodecreacióndeobras.
Postcondición:Latareaseañadealaobraysemodificaenlabasededatos.
Flujonormal:1. ElADMINISTRADORseencuentraenelformulariodecreacióndeobrasoeneldeedición
deobras.2. ElADMINISTRADORpulsasobreelbotón“Añadirtarea”.3. ElADMINISTRADORcompletaloscamposdelformulariorequeridos.4. ElADMINISTRADORpulsaelbotón“Aceptar”ylatareaesañadidaalalistadetareas.
a. Lospasos2-4puedenrepetirsetantasvecescomotareasnecesiteañadirelADMINISTRADOR.
5. ElADMINISTRADORpulsaelbotón“Siguiente”yesdirigidoalsiguientepasodelformulariodecreacióndeobras.
Flujoalternativo:3.a.Erroresdevalidacióndecampos:
3.a.1.SemuestraunmensajedeerroralADMINISTRADORatravésdelainterfaz.Tabla11.Casodeuso:Añadirtarea
![Page 66: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/66.jpg)
AlejandroPérezMartín|66
Nombre Eliminartarea ID 3.1.2
Creadopor ÁlvaroRomeroPerdomo Fecha 27/01/2017
Modif.por ÁlvaroRomeroPerdomo Fechamodif. 09/02/2017
Actorprincipal:ADMINISTRADOR
Personalinvolucradoointereses:1. ADMINISTRADOR:quiereeliminartareasdeunaobra.
Descripción:ElADMINISTRADORmedianteelformulariodecreaciónoedicióndeobraseliminatareasdelamisma.
Precondición:ElADMINISTRADORdebeestarautenticadoylaobradebeestarcreadapreviamenteoestarelADMINISTRADORenelformulariodecreación/edicióndeobras.
Postcondición:Latareaseeliminadelaobraenlabasededatos.
Flujonormal:1. ElADMINISTRADORseencuentraenelformulariodecreación/edicióndeobras.2. ElADMINISTRADORpulsasobreelbotón“Eliminartarea”.3. ElADMINISTRADORpulsaelbotón“Confirmar”ylatareaeseliminadadelabasededatos.
Flujoalternativo:
Tabla12.Casodeuso:Eliminartarea
![Page 67: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/67.jpg)
AlejandroPérezMartín|67
Nombre Editartarea ID 3.1.3
Creadopor ÁlvaroRomeroPerdomo Fecha 27/01/2017
Modif.por ÁlvaroRomeroPerdomo Fechamodif. 27/01/2017
Actorprincipal:ADMINISTRADOR
Personalinvolucradoointereses:1. ADMINISTRADOR:quiereeditartareasdeunaobra.
Descripción:ElADMINISTRADORmedianteelformulariodeedicióndetareaseditatareasdeunaobra.
Precondición:ElADMINISTRADORdebeestarautenticadoylaobradebeestarcreadapreviamenteoestarelADMINISTRADORenelformulariodecreación/edicióndeobras.
Postcondición:Latareaasignadaaunaobraseeliminadelabasededatos.
Flujonormal:1. ElADMINISTRADORseencuentraenelformulariodecreacióndeobrasoediciónde
obras.2. ElADMINISTRADORpulsasobreelbotón“Editartarea”.3. ElADMINISTRADOReditaloscamposdelatareaenelformularioquesemuestra.4. ElADMINISTRADORpulsaelbotón“Aceptar”ylatareaeseditada.
Flujoalternativo:
Tabla13.Casodeuso:Editartarea
![Page 68: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/68.jpg)
AlejandroPérezMartín|68
Nombre Añadirsubtarea ID 3.1.3.1
Creadopor ÁlvaroRomeroPerdomo Fecha 27/01/2017
Modif.por ÁlvaroRomeroPerdomo Fechamodif. 09/02/2017
Actorprincipal:ADMINISTRADOR
Personalinvolucradoointereses:1. ADMINISTRADOR:quiereañadirsubtareasaunatarea.
Descripción:ElADMINISTRADORmedianteelformulariodeedicióndetareasañadesubtareasalamisma.
Precondición:ElADMINISTRADORdebeestarautenticadoelsistemayencontrarseenelformulariodecreación/edicióndetareas.
Postcondición:Lasubtareaseañadealatareaysemodificaenlabasededatos.
Flujonormal:1. ElADMINISTRADORseencuentraenelformulariodecreacióndeobrasoeneldeedición
deobras.2. ElADMINISTRADORpulsasobreelbotón“Editartarea”.3. ElADMINISTRADORpulsasobreelbotón“Añadirsubtarea”.4. ElADMINISTRADORseleccionadeundesplegable,entrelostiposdesubtareaspresentes
enlabasededatos,lasubtareaaañadir.a. Lospasos3y4puedenrepetirsetantasvecescomosubtareasnecesiteañadirelADMINISTRADOR.
5. ElADMINISTRADORpulsaelbotón“Finalizar”yterminalaedicióndelatarea.
Flujoalternativo:
Tabla14.Casodeuso:Añadirsubtarea
![Page 69: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/69.jpg)
AlejandroPérezMartín|69
Nombre Importartareas ID 3.2
Creadopor AlejandroPérezMartín Fecha 22/10/2016
Modif.por AlejandroPérezMartín Fechamodif. 22/10/2016
Actorprincipal:ADMINISTRADOR
Personalinvolucradoointereses:1. ADMINISTRADOR:quiereimportartareasaunaobra.
Descripción:ElADMINISTRADORmedianteelformulariodecreaciónoedicióndeobrasimportatareasalamisma.
Precondición:ElADMINISTRADORdebeestarautenticadoylaobradebeestarcreadapreviamenteoestarelADMINISTRADORenelformulariodecreacióndeobras.
Postcondición:Lainformacióndelaobrasemodificaenlabasededatos.
Flujonormal:1. ElADMINISTRADORseencuentraenelformulariodecreacióndeobras.2. ElADMINISTRADORpulsasobreelbotón“Importartareas”.3. ElADMINISTRADORseleccionaunarchivoExcel(.xlso<.csv)desuequipodondese
encuentranlastareasquequiereimportar.4. Elsistemaanalizaelarchivoyautomáticamenteañadelastareasencontradasalalistade
tareas.5. ElADMINISTRADORpuedeseguirañadiendotareascomosedescribeenelcasodeuso
“3.1.1.Añadirtareas”.6. ElADMINISTRADORpulsaelbotón“Siguiente”yesdirigidoalsiguientepasodel
formulariodecreación/edicióndeobras.
Flujoalternativo:1.a.ElADMINISTRADORaccedealportalwebypulsasobreunadelasobrasparaeditarsustareas.3.a.Erroresdevalidacióndecampos:
3.a.1.SemuestraunmensajedeerroralADMINISTRADORatravésdelainterfaz.Tabla15.Casodeuso:Importartareas
![Page 70: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/70.jpg)
AlejandroPérezMartín|70
Nombre Gestionarmaterial ID 3.3
Creadopor ÁlvaroRomeroPerdomo Fecha 27/01/2017
Modif.por ÁlvaroRomeroPerdomo Fechamodif. 09/02/2017
Actorprincipal:ADMINISTRADOR
Personalinvolucradoointereses:1. ADMINISTRADOR:quieregestionarelmaterialdeunaobra.
Descripción:ElADMINISTRADORmedianteelformulariodecreaciónoedicióndeobraseditaelmaterialdelamisma.
Precondición:ElADMINISTRADORdebeestarautenticadoylaobradebeestarcreadapreviamenteoestarelADMINISTRADORenelformulariodecreacióndeobras.
Postcondición:Lainformacióndelmaterialdelaobrasemodificaenlabasededatos.
Flujonormal:1. ElADMINISTRADORseencuentraenelformulariodecreaciónoedicióndeobras.2. ElADMINISTRADORaccedealmódulodegestióndematerialesdóndepuedeeliminar
materialexistenteoañadirmaterialnuevo.3. ElADMINISTRADORpulsaelbotón“Finalizar”ylainformacióndelaobrasealmacenaen
labasededatos.
Flujoalternativo:
Tabla16.Casodeuso:Gestionarmaterial
![Page 71: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/71.jpg)
AlejandroPérezMartín|71
Nombre Añadirmaterial ID 3.3.1
Creadopor AlejandroPérezMartín Fecha 22/10/2016
Modif.por AlejandroPérezMartín Fechamodif. 22/10/2016
Actorprincipal:ADMINISTRADOR
Personalinvolucradoointereses:1. ADMINISTRADOR:quiereañadirmaterialaunaobra.
Descripción:ElADMINISTRADORmedianteelformulariodecreaciónoedicióndeobrasañadematerialalamisma.
Precondición:ElADMINISTRADORdebeestarautenticadoylaobradebeestarcreadapreviamenteoestarelADMINISTRADORenelformulariodecreacióndeobras.
Postcondición:Lainformacióndelaobrasemodificaenlabasededatos.
Flujonormal:1. ElADMINISTRADORseencuentraenelformulariodecreaciónoedicióndeobras.2. ElADMINISTRADORpulsasobreelbotón“Añadirmaterial”.3. ElADMINISTRADORcompletaloscamposdelformulariorequeridos.4. ElADMINISTRADORpulsaelbotón“Aceptar”yelmaterialesañadidoalalistade
materiales.a. Lospasos2-4puedenrepetirsetantasvecescomomaterialnecesiteañadirelADMINISTRADOR.
5. ElADMINISTRADORpulsaelbotón“Siguiente”yesdirigidoalsiguientepasodelformulariodecreación/edicióndeobras.
Flujoalternativo:
Tabla17.Casodeuso:Añadirmaterial
![Page 72: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/72.jpg)
AlejandroPérezMartín|72
Nombre Eliminarmaterial ID 3.3.2
Creadopor ÁlvaroRomeroPerdomo Fecha 27/01/2017
Modif.por ÁlvaroRomeroPerdomo Fechamodif. 27/01/2017
Actorprincipal:ADMINISTRADOR
Personalinvolucradoointereses:1. ADMINISTRADOR:quiereeliminarmaterialdeunaobra.
Descripción:ElADMINISTRADORmedianteelformulariodecreaciónoedicióndeobraseliminamaterialasociadoalamisma.
Precondición:ElADMINISTRADORdebeestarautenticadoylaobradebeestarcreadapreviamenteoestarelADMINISTRADORenelformulariodecreaciónoedicióndeobras.
Postcondición:Lainformacióndelaobrasemodificaenlabasededatos.
Flujonormal:1. ElADMINISTRADORseencuentraenelformulariodecreaciónoedicióndeobras.2. ElADMINISTRADORpulsasobreelbotón“Eliminarmaterial”.3. ElADMINISTRADORpulsaelbotón“Finalizar”yelmaterialasociadoalaobraseelimina
delabasededatos.
Flujoalternativo:
Tabla18.Casodeuso:Editarmaterial
![Page 73: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/73.jpg)
AlejandroPérezMartín|73
Nombre Importarmaterial ID 3.4
Creadopor AlejandroPérezMartín Fecha 22/10/2016
Modif.por ÁlvaroRomeroPerdomo Fechamodif. 09/02/2017
Actorprincipal:ADMINISTRADOR
Personalinvolucradoointereses:1. ADMINISTRADOR:quiereimportarmaterialaunaobra.
Descripción:ElADMINISTRADORmedianteelformulariodecreaciónoedicióndeobrasimportamaterialesalamisma.
Precondición:ElADMINISTRADORdebeestarautenticadoylaobradebeestarcreadapreviamenteoestarelADMINISTRADORenelformulariodecreacióndeobras.
Postcondición:Lainformacióndelaobrasemodificaenlabasededatos.
Flujonormal:1. ElADMINISTRADORseencuentraenelformulariodecreacióndeobras.2. ElADMINISTRADORpulsasobreelbotón“Importarmaterial”.3. ElADMINISTRADORseleccionaunarchivoExcel(.xlso.csv)desuequipodondese
encuentranlosmaterialesquequiereimportar.4. Elsistemaanalizaelarchivoyautomáticamenteañadelosmaterialesencontradosala
listademateriales.5. ElADMINISTRADORpuedeseguirañadiendomaterialcomosedescribeenelcasodeuso
“3.3.1.Añadirmaterial”.6. ElADMINISTRADORpulsaelbotón“Siguiente”yesdirigidoalsiguientepasodel
formulariodecreación/edicióndeobras.
Flujoalternativo:
Tabla19.Casodeuso:Importarmaterial
![Page 74: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/74.jpg)
AlejandroPérezMartín|74
Nombre Gestionaradjuntos ID 3.5
Creadopor AlejandroPérezMartín Fecha 27/01/2017
Modif.por AlejandroPérezMartín Fechamodif. 27/01/2017
Actorprincipal:ADMINISTRADOR
Personalinvolucradoointereses:1. ADMINISTRADOR:quieregestionararchivosadjuntosaunaobra.
Descripción:ElADMINISTRADORmedianteelformulariodecreaciónoedicióndeobrasgestionalosarchivosadjuntosalamisma.
Precondición:ElADMINISTRADORdebeestarautenticadoylaobradebeestarcreadapreviamenteoestarelADMINISTRADORenelformulariodecreaciónoedicióndeobras.
Postcondición:Lainformacióndelaobrasemodificaenlabasededatos.
Flujonormal:1. ElADMINISTRADORseencuentraenelformulariodecreaciónoedicióndeobras.2. ElADMINISTRADORaccedealmódulodeedicióndeadjuntosdeunaobradondepuede
añadirunnuevoarchivooeliminarlosexistentes.3. ElADMINISTRADORpulsaelbotón“Finalizar”ylainformacióndelaobrasealmacenaen
labasededatos.
Flujoalternativo:
Tabla20.Casodeuso:Gestionaradjuntos
![Page 75: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/75.jpg)
AlejandroPérezMartín|75
Nombre Añadiradjunto ID 3.5.1
Creadopor AlejandroPérezMartín Fecha 22/10/2016
Modif.por ÁlvaroRomeroPerdomo Fechamodif. 27/01/2017
Actorprincipal:ADMINISTRADOR
Personalinvolucradoointereses:1. ADMINISTRADOR:quiereañadirarchivosadjuntosaunaobra.
Descripción:ElADMINISTRADORmedianteelformulariodecreaciónoedicióndeobrasañadearchivosadjuntosalamisma.
Precondición:ElADMINISTRADORdebeestarautenticadoylaobradebeestarcreadapreviamenteoestarelADMINISTRADORenelformulariodecreaciónoedicióndeobras.
Postcondición:Lainformacióndelaobrasemodificaenlabasededatos.
Flujonormal:1. ElADMINISTRADORseencuentraenelformulariodecreaciónoedicióndeobras.2. ElADMINISTRADORpulsasobreelbotón“Añadiradjunto”.3. ElADMINISTRADORseleccionaunarchivodesuequipoquequieraadjuntaralaobra.4. Elsistemaadjuntaelarchivosiesdeunformatoválido.
a. Lospasos2-4puedenrepetirsetantasvecescomoarchivosadjuntosnecesiteañadirelADMINISTRADOR.
5. ElADMINISTRADORpulsaelbotón“Siguiente”yesdirigidoalsiguientepasodelformulariodecreación/edicióndeobras.
Flujoalternativo:
Tabla21.Casodeuso:Añadiradjunto
![Page 76: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/76.jpg)
AlejandroPérezMartín|76
Nombre Eliminaradjunto ID 3.5.2
Creadopor AlejandroPérezMartín Fecha 22/10/2016
Modif.por AlejandroPérezMartín Fechamodif. 27/01/2017
Actorprincipal:ADMINISTRADOR
Personalinvolucradoointereses:1. ADMINISTRADOR:quiereeliminararchivosadjuntosdeunaobra.
Descripción:ElADMINISTRADORmedianteelformulariodecreaciónoedicióndeobraseliminaarchivosadjuntosalamisma.
Precondición:ElADMINISTRADORdebeestarautenticadoylaobradebeestarcreadapreviamenteoestarelADMINISTRADORenelformulariodecreacióndeobras.
Postcondición:Lainformacióndelaobrasemodificaenlabasededatos.
Flujonormal:1. ElADMINISTRADORseencuentraenelformulariodecreaciónoedicióndeobras.2. ElADMINISTRADORaccedealapestañadeedicióndeadjuntosaesaobra.3. ElADMINISTRADORpulsasobreelbotón“Eliminaradjunto”.
a. Elpaso3sepuederepetirtantasvecescomoarchivosadjuntosnecesiteeliminarelADMINISTRADOR.
4. ElADMINISTRADORpulsaelbotón“Finalizar”ylainformacióndelaobraseactualizaenlabasededatos.
Flujoalternativo:
Tabla22.Casodeuso:Eliminaradjunto
![Page 77: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/77.jpg)
AlejandroPérezMartín|77
Nombre Cambiarestadodeunaobra ID 3.6
Creadopor AlejandroPérezMartín Fecha 22/10/2016
Modif.por AlejandroPérezMartín Fechamodif. 22/10/2016
Actorprincipal:ADMINISTRADOR
Personalinvolucradoointereses:1. ADMINISTRADOR:quierecambiarelestadodeunaobra.
Descripción:ElADMINISTRADORmedianteundesplegabletendrálaopcióndecambiarelestadoenqueseencuentraunaobra(Pendiente,EncursoyFinalizada).
Precondición:ElADMINISTRADORdebeestarautenticadoylaobradebeestarcreadapreviamente.
Postcondición:Lainformacióndelaobrasemodificaenlabasededatos.
Flujonormal:1. ElADMINISTRADORseencuentraenellistadodeobras.2. ElADMINISTRADORpulsaelcampodesplegable“Estado”deunaobra.3. ElADMINISTRADORseleccionaunodelosestadosdelaobra.4. ElSISTEMAautomáticamentecambiaelvalordelestadodelaobraenlabasededatos
Flujoalternativo:3.a.Sielestadoseleccionadoes“Finalizada”laobrasemoveráautomáticamenteallistadodeobrasterminadas.
Tabla23.Casodeuso:Cambiarestadodeunaobra
![Page 78: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/78.jpg)
AlejandroPérezMartín|78
Nombre Certificarobra ID 3.7
Creadopor AlejandroPérezMartín Fecha 13/12/2016
Modif.por AlejandroPérezMartín Fechamodif. 13/12/2016
Actorprincipal:ADMINISTRADOR
Personalinvolucradoointereses:ADMINISTRADOR:quierepodercertificarunaobra.
Descripción:ElADMINISTRADORatravésdelavistadelaobratendráaccesoalacertificaciónpormediodeunbotón.
Precondición:ElADMINISTRADORdebeestarautenticado,laobradebeestarcreadayfinalizadapreviamente.
Postcondición:Segeneraunficherodecertificación.
Flujonormal:1. ElADMINISTRADORseencuentraenellistadodeobras.2. ElADMINISTRADORseleccionaunaobraquedeseecertificar.3. ElADMINISTRADORpulsaelbotóndecertificarobra.4. ElSISTEMAgeneralosficherosasociadosalacertificación.
Flujoalternativo:3.a.Sielestadoseleccionadonoes“Finalizada”,selemostraráunmensajealusuarioindicandoquenopuedecertificarlaobra.
Tabla24.Casodeuso:Certificarobra
![Page 79: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/79.jpg)
AlejandroPérezMartín|79
Nombre Registrarempleados ID 4
Creadopor ÁlvaroRomeroPerdomo Fecha 22/10/2016
Modif.por ÁlvaroRomeroPerdomo Fechamodif. 22/10/2016
Actorprincipal:ADMINISTRADOR
Personalinvolucradoointereses:1. ADMINISTRADOR:quierepoderregistrarempleadosenelsistema.2. EMPLEADO:quierequeelADMINISTRADORpuedadarledealtaenelsistemayasípoder
registrarsuactividadcomoEMPLEADO.
Descripción:ElADMINISTRADORpuederegistrarempleadosdedistintosperfilesdeempleadoqueposteriormentepodráeditaroeliminar.Estosempleadospodránserasignadosaobrasporpartedeladministradoryéstepodráasimismorealizarunseguimientoprofesionaldelempleado.
Precondición:ElADMINISTRADORdebeestarautenticado.
Postcondición:Elusuarioquedainsertadoenelsistema.
Flujonormal:1. ElADMINISTRADORaccedealportaldeadministración.2. ElADMINISTRADORaccedealformularioderegistrodeempleadoatravésdelainterfaz.3. ElADMINISTRADORintroducelosdatosrequeridosenelformularioderegistrode
empleado.4. ElADMINISTRADORintroduce,entrelosdatosrequeridos,elroldelempleado.5. Elempleadoquedaregistradoenelsistema.
Flujoalternativo:3.a.Erroresdevalidacióndecampos:
3.a.1.SemuestraunmensajedeerroralADMINISTRADORatravésdelainterfaz.3.a.2.SepermitealADMINISTRADORvolverarellenarloscamposerróneos.
Tabla25.Casodeuso:Registrarempleados
![Page 80: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/80.jpg)
AlejandroPérezMartín|80
Nombre Gestionarempleados ID 5
Creadopor ÁlvaroRomeroPerdomo Fecha 22/10/2016
Modif.por ÁlvaroRomeroPerdomo Fechamodif. 22/10/2016
Actorprincipal:ADMINISTRADOR
Personalinvolucradoointereses:1. ADMINISTRADOR:quierepodereditar/borrarempleadosdelsistema.
Descripción:ElADMINISTRADORpuedeeditarlainformacióndeunempleadoyaexistente,asícomoeliminarelmismosifueranecesario.
Precondición:ElADMINISTRADORdebeestarautenticadoyexistiralmenosunempleadoaeditar/borrarenelsistema.
Postcondición:1. Lainformacióndelempleadoquedaactualizada.2. Elempleadoquedaeliminadodelsistema.
Flujonormal:1. ElADMINISTRADORaccedealportaldeadministración.2. ElADMINISTRADORaccedealavistadelosempleados.3. ElADMINISTRADORseleccionaelempleadoquedeseagestionar.
a. Editarempleado(5.1).b. Borrarempleado(5.2).c. Notificarempleado(5.3).d. Visualizarempleado(5.4).
Flujoalternativo:Tabla26.Casodeuso:Gestionarempleados
![Page 81: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/81.jpg)
AlejandroPérezMartín|81
Nombre Editarempleado ID 5.1
Creadopor ÁlvaroRomeroPerdomo Fecha 22/10/2016
Modif.por ÁlvaroRomeroPerdomo Fechamodif. 22/10/2016
Actorprincipal:ADMINISTRADOR
Personalinvolucradoointereses:ADMINISTRADOR:quierepodereditarempleadosdelsistema.
Descripción:ElADMINISTRADORpuedeeditarlainformacióndeunempleadoyaexistente.
Precondición:ElADMINISTRADORdebeestarautenticadoyexistiralmenosunempleadoenelsistema.
Postcondición:1. Lainformacióndelempleadoquedaactualizada.
Flujonormal:1. ElADMINISTRADORaccedealportaldeadministración.2. ElADMINISTRADORaccedealavistadelosempleados.3. ElADMINISTRADORseleccionaelempleadoquedeseaeditar.4. ElADMINISTRADORaccedealformulariodeedicióndelempleadoatravésdelainterfaz.5. ElADMINISTRADORintroduceloscamposquedeseaeditardelempleado.6. ElADMINISTRADORfinalizalaedicióndelainformacióndelempleado.7. Lainformaciónquedaactualizadaenelsistema.
Flujoalternativo:5.1.Erroresdevalidacióndecampos:
5.1.a.SemuestraunmensajedeerroralADMINISTRADORatravésdelainterfaz.5.1.b.SepermitealADMINISTRADORvolverarellenarloscamposerróneos.
Tabla27.Casodeuso:Editarempleado
![Page 82: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/82.jpg)
AlejandroPérezMartín|82
Nombre Eliminarempleado ID 5.2
Creadopor ÁlvaroRomeroPerdomo Fecha 22/10/2016
Modif.por ÁlvaroRomeroPerdomo Fechamodif. 22/10/2016
Actorprincipal:ADMINISTRADOR
Personalinvolucradoointereses:ADMINISTRADOR:quierepoderborrarempleadosdelsistema.
Descripción:ElADMINISTRADORpuedeeliminarunempleadodelsistema.
Precondición:ElADMINISTRADORdebeestarautenticadoyexistiralmenosunempleadoaeliminarenelsistema.
Postcondición:1. Elempleadoquedaeliminadodelsistema.
Flujonormal:1. ElADMINISTRADORaccedealportaldeadministración.2. ElADMINISTRADORaccedealavistadelosempleados.3. ElADMINISTRADORseleccionaelempleadoquedeseaeliminar.4. ElADMINISTRADOReliminaalempleadodelsistemaatravésdelainterfaz.5. ElADMINISTRADORconfirmalaeliminacióndelempleado.6. Elempleadoquedaeliminadodelsistema.
Flujoalternativo:5.1.ElADMINISTRADORdecidenoconfirmarlaeliminación:
5.1.a.Elsistemavuelvealavistadelosempleados.Tabla28.Casodeuso:Eliminarempleado
![Page 83: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/83.jpg)
AlejandroPérezMartín|83
Nombre Notificarempleado ID 5.3
Creadopor ÁlvaroRomeroPerdomo Fecha 22/10/2016
Modif.por ÁlvaroRomeroPerdomo Fechamodif. 22/10/2016
Actorprincipal:ADMINISTRADOR
Personalinvolucradoointereses:1. ADMINISTRADOR:quierepodernotificaralosempleados.2. EMPLEADO:elempleadodeseapoderrecibirnotificacionesentiemporeal.
Descripción:ElADMINISTRADORenviarunmensajeaunempleadoenconcretoatravésdelportalweb.Elempleadorecibiráunanotificaciónentiemporealenlaaplicaciónmóvil.
Precondición:ElADMINISTRADORdebeestarautenticadoyelsistemadebeteneralmenosunempleadoanotificar.
Postcondición:ElEMPLEADOrecibeunanotificaciónentiemporealenlaaplicaciónmóvil.
Flujonormal:1. ElADMINISTRADORaccedealportaldeadministración.2. ElADMINISTRADORaccedealavistadelosempleados.3. ElADMINISTRADORseleccionaelempleadoquedeseanotificar.4. ElADMINISTRADORenvíaelmensajealEMPLEADO.5. ElEMPLEADOrecibeunanotificaciónenlaaplicaciónmóvil.
Flujoalternativo:5.1.Cuerpodelmensajevacío:
5.1.a.SemuestraalADMINISTRADORunmensajedeerrorindicandoquedebeintroducirelcuerpodelmensaje.
Tabla29.Casodeuso:Notificarempleado
![Page 84: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/84.jpg)
AlejandroPérezMartín|84
Nombre Visualizarempleado ID 5.4
Creadopor ÁlvaroRomeroPerdomo Fecha 22/12/2016
Modif.por ÁlvaroRomeroPerdomo Fechamodif. 22/12/2016
Actorprincipal:ADMINISTRADOR
Personalinvolucradoointereses:1. ADMINISTRADOR:quierepodervisualizarelrendimientodelosempleados.
Descripción:ElADMINISTRADORvisualizaelrendimientodelosempleados,dondeobservalaactividaddeéstecomotrabajador,lasobrasenlasquehaparticipado,etc...
Precondición:ElADMINISTRADORdebeestarautenticadoyelsistemadebeteneralmenosunempleadoavisualizar.
Postcondición:
Flujonormal:1. ElADMINISTRADORaccedealportaldeadministración.2. ElADMINISTRADORaccedealavistadelosempleados.3. ElADMINISTRADORseleccionaelempleadoquedeseavisualizar.
Flujoalternativo:Tabla30.Casodeuso:Visualizarempleado
![Page 85: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/85.jpg)
AlejandroPérezMartín|85
Nombre IniciarsesiónenlaAPP ID 6
Creadopor ÁlvaroRomeroPerdomo Fecha 27/01/2017
Modif.por ÁlvaroRomeroPerdomo Fechamodif. 27/01/2017
Actorprincipal:EMPLEADO
Personalinvolucradoointereses:1. EMPLEADO:quiereaccederalpanelprincipaldelaaplicaciónmóvil.
Descripción:ElEMPLEADOejecutalaaplicaciónmóvilyaccedealsistemahaciendousodesuscredenciales.
Precondición:ElEMPLEADOdebeestarregistradopreviamente.
Postcondición:ElEMPLEADOesredirigidoalpanelprincipaldelaaplicaciónmóvil.
Flujonormal:1. ElEMPLEADOabrelaaplicaciónmóvil.2. ElEMPLEADOintroducesuscredenciales(usuarioycontraseña).3. ElEMPLEADOesconducidoalpanelprincipaldondeverásusobrasasignadas.
Flujoalternativo:2.a.Credencialesnoválidas:
2.a.1.Elsistemamuestraunmensajedeerror.Tabla31.Casodeuso:IniciarsesiónenlaAPP
![Page 86: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/86.jpg)
AlejandroPérezMartín|86
Nombre Visualizarobra ID 7
Creadopor ÁlvaroRomeroPerdomo Fecha 22/10/2016
Modif.por ÁlvaroRomeroPerdomo Fechamodif. 22/10/2016
Actorprincipal:EMPLEADO
Personalinvolucradoointereses:1. EMPLEADO:quierepodervisualizarlasobrasquetieneasignadasenlaaplicaciónmóvil.
Descripción:ElEMPLEADOpuedevisualizarlasobrasquetengaasignadas,asícomotodaladocumentaciónasociada(datostalescomoladirección,elidentificador,estadoactualdelaobra…)ylalistadetareasarealizar.
Precondición:ElADMINISTRADORdebeestarautenticadoyelsistemadebetenerunempleado,unaobrayéstadebeestarasignadaadichoempleado.
Postcondición:
Flujonormal:1. ElEMPLEADOaccedealaaplicaciónmóvil.2. ElEMPLEADOaccedealapantallaprincipaldelaaplicación(dashboard).3. AlEMPLEADOselepresentanlasobrasquetieneasignadas.4. ElEMPLEADOaccedealaobraqueelijaatravésdelainterfaz.5. ElEMPLEADOvisualizalainformaciónrelativaalaobra(datostalescomoladirección,el
identificador,estadoactualdelaobra…).
Flujoalternativo:Tabla32.Casodeuso:Visualizarobra
![Page 87: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/87.jpg)
AlejandroPérezMartín|87
Nombre Gestionararchivosadjuntosatarea ID 8
Creadopor ÁlvaroRomeroPerdomo Fecha 22/10/2016
Modif.por ÁlvaroRomeroPerdomo Fechamodif. 22/10/2016
Actorprincipal:EMPLEADO
Personalinvolucradoointereses:1. EMPLEADO:quierepoderadjuntaroeditarinformaciónderespaldodelarealizaciónde
sustareas.
Descripción:ElEMPLEADOpuedeadjuntaroeditarinformaciónderespaldodelarealizacióndesustareasatravésdelaaplicación.
Precondición:Elsistemadebetenerunempleado,unaobrayéstadebeestarasignadaadichoempleado.Además,laobradebeteneralmenosunatareadelaquesequieraadjuntaroeditarinformaciónderespaldo.
Postcondición:1. Lainformaciónquedaregistradaenelsistema.2. Lainformaciónquedaborradadelsistema.
Flujonormal:1. ElEMPLEADOaccedealaaplicaciónmóvil.2. ElEMPLEADOaccedealapantallaprincipaldelaaplicación(dashboard).3. AlEMPLEADOselepresentanlasobrasquetieneasignadas.4. ElEMPLEADOaccedealaobraqueelijaatravésdelainterfaz.5. ElEMPLEADOaccedealmódulocorrespondientealastareasdedichaobra.6. ElEMPLEADOaccedealatareaquedesea.7. ElEMPLEADOselecciona:
a. Adjuntararchivoatarea.b. Editararchivodetarea.
Flujoalternativo:Tabla33.Casodeuso:Gestionararchivosadjuntosatarea
![Page 88: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/88.jpg)
AlejandroPérezMartín|88
Nombre Adjuntararchivo ID 8.1
Creadopor ÁlvaroRomeroPerdomo Fecha 22/10/2016
Modif.por ÁlvaroRomeroPerdomo Fechamodif. 22/10/2016
Actorprincipal:EMPLEADO
Personalinvolucradoointereses:1. ADMINISTRADOR:quierepoderdisponerdeinformaciónderespaldodelarealizaciónde
lastareasporpartedelosempleados.2. EMPLEADO:quierepoderadjuntarinformaciónderespaldodelarealizacióndesustareas.
Descripción:ElEMPLEADOpuedeadjuntarinformaciónderespaldodelarealizacióndesustareasatravésdelaaplicación.
Precondición:Elsistemadebetenerunempleado,unaobrayéstadebeestarasignadaadichoempleado.Además,laobradebeteneralmenosunatareadelaquesequieraadjuntarinformaciónderespaldo.
Postcondición:1. Lainformaciónquedaregistradaenelsistema.
Flujonormal:1. ElEMPLEADOaccedealaaplicaciónmóvil.2. ElEMPLEADOaccedealapantallaprincipaldelaaplicación(dashboard).3. AlEMPLEADOselepresentanlasobrasquetieneasignadas.4. ElEMPLEADOaccedealaobraqueelijaatravésdelainterfaz.5. ElEMPLEADOaccedealmódulocorrespondientealastareasdedichaobra.6. ElEMPLEADOaccedealatareaquedesea.7. ElEMPLEADOseleccionaadjuntararchivoatarea.8. ElEMPLEADOseleccionaelarchivoaadjuntardesusistemaoperativodesdeeldiálogode
adjuntararchivo.9. Elarchivoadjuntoasociadoalatareaquedaregistradoenelsistema.
Flujoalternativo:Tabla34.Casodeuso:Adjuntararchivo
![Page 89: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/89.jpg)
AlejandroPérezMartín|89
Nombre Eliminararchivodeunatarea ID 8.2
Creadopor ÁlvaroRomeroPerdomo Fecha 22/10/2016
Modif.por ÁlvaroRomeroPerdomo Fechamodif. 22/10/2016
Actorprincipal:EMPLEADO
Personalinvolucradoointereses:1. EMPLEADO:quierepodereliminararchivosadjuntosaunatarea.
Descripción:ElEMPLEADOpuedeeliminararchivosadjuntosaunatarea.
Precondición:ElEMPLEADOdebeestarautenticadoyexistirunaobraasignadaadichoempleado.Además,laobradebeteneralmenosunatareaconinformaciónadjuntaqueeliminar.
Postcondición:1. Lainformaciónquedaeliminada.
Flujonormal:1. ElEMPLEADOaccedealaaplicaciónmóvil.2. ElEMPLEADOaccedealapantallaprincipaldelaaplicación(dashboard).3. AlEMPLEADOselepresentanlasobrasquetieneasignadas.4. ElEMPLEADOaccedealaobraqueelijaatravésdelainterfaz.5. ElEMPLEADOaccedealmódulocorrespondientealastareasdedichaobra.6. ElEMPLEADOaccedealatareaquedesea.7. ElEMPLEADOseleccionaverarchivosadjuntos.8. ElEMPLEADOseleccionaelarchivoaeliminar.9. Elarchivoadjuntoasociadoalatareavaasereliminado.10. ElEMPLEADOconfirmalaaccióndeeliminarelarchivoadjunto.11. Elarchivoseeliminadelsistema.
Flujoalternativo:10.1.ElEMPLEADOnoconfirmalaaccióndeeliminarelarchivoadjunto.
10.1.a.ElsistemadevuelvealEMPLEADOalapantalladevisualizacióndearchivosadjuntos.
Tabla35.Casodeuso:Eliminararchivosdeunatarea
![Page 90: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/90.jpg)
AlejandroPérezMartín|90
Nombre Añadirtareasaobra(empleado) ID 9
Creadopor ÁlvaroRomeroPerdomo Fecha 22/10/2016
Modif.por ÁlvaroRomeroPerdomo Fechamodif. 22/10/2016
Actorprincipal:EMPLEADO
Personalinvolucradoointereses:1. EMPLEADO:quiereañadirtareasaunaobra.
Descripción:ElEMPLEADOpuedeañadirtareasdesdelaaplicaciónmóvilalaobraquetieneasignadasifueranecesario.
Precondición:ElEMPLEADOdebeestarautenticadoytenerunaobraasignadaalaqueañadirleunanuevatarea.
Postcondición:Lainformacióndelaobrasemodificaenlabasededatosconlatareaañadida.
Flujonormal:1. ElEMPLEADOaccedealaaplicaciónmóvil.2. ElEMPLEADOaccedealapantallaprincipaldelaaplicación(dashboard).3. AlEMPLEADOselepresentanlasobrasquetieneasignadas.4. ElEMPLEADOaccedealaobraqueelijaatravésdelainterfaz.5. ElEMPLEADOaccedealformulariodeañadirunanuevatareaatravésdelainterfaz.6. ElEMPLEADOespecificainformaciónrelativaalatareaatravésdeloscamposindicados.7. ElEMPLEADOfinalizalacreacióndelatareamedianteelbotón“finalizar”.8. Latareaquedaregistradaenelsistema.
Flujoalternativo:6.1.Erroresdevalidacióndecampos:
6.1.a.SemuestraunmensajedeerroralEMPLEADOatravésdelainterfaz.6.1.b.SepermitealEMPLEADOvolverarellenarloscamposerróneos.
Tabla36.Casodeuso:Añadirtareasaobra(empleado)
![Page 91: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/91.jpg)
AlejandroPérezMartín|91
Nombre Notificarincidencia ID 11
Creadopor ÁlvaroRomeroPerdomo Fecha 22/10/2016
Modif.por ÁlvaroRomeroPerdomo Fechamodif. 22/10/2016
Actorprincipal:EMPLEADO
Personalinvolucradoointereses:1. EMPLEADO:quierepodernotificarincidenciasdelaobraaladministrador.
Descripción:ElEMPLEADOpuedenotificarincidenciasdeunaobraaladministrador.
Precondición:Elsistemadebecontenerunaobraasignadaadichoempleado.
Postcondición:LanotificaciónquedaregistradaporelEMPLEADOenlabasededatos.
Flujonormal:1. ElEMPLEADOaccedealaaplicaciónmóvil.2. ElEMPLEADOaccedealapantallaprincipaldelaaplicaciónmóvil(dashboard).3. AlEMPLEADOselepresentanlasobrasquetieneasignadas.4. ElEMPLEADOaccedealaobraqueelijaatravésdelainterfaz.5. ElEMPLEADOaccedealavistadelalistadetareas.6. ElEMPLEADOaccedealdiálogodecambiodeestadodelatareaatravésdelainterfaz.7. ElEMPLEADOespecificaelestadoquedeseaasignaralatarea.8. ElEMPLEADOfinalizalaedicióndelestadomedianteelbotón“guardartarea”.9. Latareaquedaregistradaenelsistema.
Flujoalternativo:Tabla37.Casodeuso:Notificarincidencia
![Page 92: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/92.jpg)
AlejandroPérezMartín|92
5.2. Anexo2.Manualdeusuariodelpaneldeadministración
Enestemanualsepretendedaralusuariounavisióngeneralacercadecómoutilizarelpaneldeadministraciónymostrarlesusprincipalesfuncionalidades.
A continuación, se muestra la pantalla de inicio o presentación de la aplicación alaccederaella.
Ilustración25.Pantalladeiniciodelpaneldeadministración
Elsiguientepasoconsistiríaenhacerloginenlaaplicaciónsiemprequetuviéramosunacuentacomoadministradorenella.
Ilustración26.Pantalladelogindelpaneldeadministración
![Page 93: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/93.jpg)
AlejandroPérezMartín|93
A continuación, se le presenta al usuario la pantalla principal del panel deadministración,eldashboarddondesemuestranlasobraspresentesenelsistema,pudiendoeditarlasocrearunanueva.
Tambiénenestapantallaelusuariopuedeverlosusuariosymaterialesdelsistema.
Ilustración27.Dashboarddelpaneldeadministración
A travésdelbotónCREATEWORKde laanteriorpantalla, accederíamosa la vistadecreacióndeobra.Enestepuntodeberíamosrellenarloscamposquesenospresentanatravésdelaspestañaspodríamosañadirtambiénlosmateriales,lastareasylosarchivosadjuntosderelevanciaparadichaobra.
Ilustración28.Creacióndeunaobraenelpaneldeadministración
![Page 94: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/94.jpg)
AlejandroPérezMartín|94
Ilustración29.Creacióndeunaobraenelpaneldeadministración(materiales)
Ilustración30.Creacióndeunaobraenelpaneldeadministración(añadiendounatarea)
![Page 95: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/95.jpg)
AlejandroPérezMartín|95
Ilustración31.Creacióndeunaobraenelpaneldeadministración(añadiendoarchivosadjuntos)
En la pantalla users podemos consultar los usuarios actuales del sistema y hacerbúsquedasatravésdelbuscadordeunusuarioenconcreto.Atravésdeestapantallatambiénpodemoseditarlosusuariosactualesdelsistema.
Ilustración32.Vistadelapantallausers
![Page 96: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/96.jpg)
AlejandroPérezMartín|96
Enlapantallamaterialspodemosconsultarlosmaterialesactualesdelsistema.Atravésdeestapantallatambiénpodemoseditarlosusuariosmaterialesdelsistemayañadirnuevosalsistema.
Ilustración33.Vistadelapantallamaterials
A través del dashboard podemos acceder a la pantalla de edición de una obraseleccionándolaatravésdeltoolbaraladerechadecadauna.Enestavistapodemosvolverarellenar los campos que quedaron incompletos en el momento de creación de la obra ocambiarlosanuestroantojo,paraellosólotenemosquerecordarguardarlaobraantesdesalirmedianteeliconoflotantedeabajoderecha.
Ilustración34.Vistadeedicióndeunaobra
![Page 97: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/97.jpg)
AlejandroPérezMartín|97
5.3. Anexo3.Manualdeusuariodelaaplicaciónmóvil
Estemanualdetallaelusogeneralasícomolasdistintasfuncionalidadesdelaaplicaciónmóvil.
Acontinuaciónsemuestralapantallainicialquesemuestraalabrirlaaplicaciónenlacualsepidenlascredencialesdeaccesoalamisma.
Ilustración35.Iniciodesesiónendelaaplicación
Tras acceder con un usuario previamente creado en el panel de administración sepresentalapantallaprincipal(dashboard)delaaplicaciónenlaquesemuestraunlistadodelasdistintasobrasenlasqueunusuariotienetareasuobrasdirectamenteasignadas.Estelistadoademás,estáclasificadoenpestañasenfuncióndelestadodelaobraeinclusopermitefiltrarlasobrasatravésbuscador.
![Page 98: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/98.jpg)
AlejandroPérezMartín|98
Ilustración36.Vistasdelapantalladeprincipaldelaaplicación(dashboard)
Alpulsarsobraunadelasobrasdellistadoseabrirálapantalladeldetalledelaobracorrespondiente.
En esta pantalla se presentan además otras dos pestañas además de la descripcióngeneraldelaobra,comosonlaspestañasdeTareas(Tasks)yAdjuntos(Attachments),
Ilustración37.Pantalladeldetalledeunaobra
![Page 99: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/99.jpg)
AlejandroPérezMartín|99
Paraañadirmaterialesaunaobra,bastaconpulsarelbotón“AddMaterial”,queabriráunaventanadeedicióndematerialesqueunavezhechaslasmodificacionespuedenguardarseloscambiospulsandoenelbotóndeguardarenlapartesuperiorderecha.
Ilustración38.Añadirmaterialesaunaobradesdelaapp
Losmaterialespuedensereditados/eliminadosúnicamenteporelusuarioqueloscrea,paraello,hayquedeslizareldedodederechaaizquierdasobrelatareaaeditarcomosemuestraacontinuaciónparaqueaparezcanestasopciones.
Ilustración39.Editarmaterialesdelaobramaterialdesdelaapp
![Page 100: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/100.jpg)
AlejandroPérezMartín|100
Alpulsarsobrelapestañatareaseneldetalledeunaobra,semostraráellistadodelasdistintas tareasquehay creadasen laobra.Al pulsar sobreellas se abriráotrapantalla coninformaciónsobrelamisma.
Ilustración40.Vistasdellaspantallasdelistadodetareasydetalledeunatarea
Lastareassólopuedensereditadasporlosusuariosqueesténasignadosalamisma,parahacerlo,hayquepulsarsobreeliconodeediciónjuntoaltítulodelatarea.
Ilustración41.Edicióndeunatareaenlaapp
![Page 101: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/101.jpg)
AlejandroPérezMartín|101
A la tarea se pueden adjuntar imágenes y archivos presentes en el dispositivo delempleadoypuedenañadirsepulsandoelbotón“Addattachment”.
Ilustración42.Añadiradjuntosaunatarea
La última pestaña del detalle de una obra es la de “Attachments”, en la que seencuentran losdocumentosadjuntosagregadosporelusuarioadministrador. Estosarchivospuedendescargarsepulsandoelbotón“Download”queseencuentrabajocadaadjunto.
Ilustración43.Capturadelapantallade“Attachments”
![Page 102: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/102.jpg)
AlejandroPérezMartín|102
Otradelasopcionesdisponiblesesellistadodeusuariosdelaaplicación,muyútilparael empleado en caso de que necesite el teléfono u otra información de contacto de algún
compañero.Sepuedeaccederpulsandoelicono visibleenlapantalla“dashboard”.
Ilustración44.Listadodeusuariosyvistadelperfildeunusuario
Unusuario también puede acceder a su perfil pulsando el icono , donde seráposiblequeeditesusdatospersonaleseimagendeperfil.
Ilustración45.Edicióndelperfildelusuario
![Page 103: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/103.jpg)
AlejandroPérezMartín|103
Porúltimo,parasalirde laaplicaciónesnecesariopulsarelbotóndesalidaqueseencuentraenpantallaprincipal“dashboard”.Siseconfirmalasalida,elusuarioseráredirigidoalapantalladeiniciodesesión.
Ilustración46.Vistasdelapantallalapantalladecierredesesión
Elenvíodenotificacionespushalaappserealizadesdelasección‘Notificaciones’delaconsola de Firebase de Google, a la que se puede acceder desde este enlace:https://console.firebase.google.com/
Ilustración47.EnvíodenotificacionesPushdesdelaconsoladeGoogleFirebase
![Page 104: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/104.jpg)
AlejandroPérezMartín|104
Laformaenquedichasnotificacionessemostraráneneldispositivodelempleadopuedeapreciarseenlasiguienteilustración:
Ilustración48.Vistadenotificacionespusheneldispositivodelempleado
![Page 105: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/105.jpg)
AlejandroPérezMartín|105
5.4. Anexo4.Pantallazoscompletosdelademonofunciona
Acontinuación,mostramoscapturasdepantallasquemuestranlademonofuncionalcompletapresentadaenlasegundareunióndurantelaetapadeanálisis.
Lasprimeraspantallascorrespondenaliniciodesesiónporpartedelempleadodentrodelaaplicaciónundesglosedelasobrasquetieneasignadasordenadasporfecha.
Unavezhaseleccionadounapasaríamosa la tercerapantalla,dondepuedeobtenerinformaciónrelativaalastareasdelaobra(consideramoslastareascomoaquelloquedeseaverprimerounempleadoalaccederaunaobra).
Ilustración49.Primeraspantallasdelademonofuncional
![Page 106: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/106.jpg)
AlejandroPérezMartín|106
Ilustración50.Informacióndelaobraenlademonofuncional
Ilustración51.Accionesdisponiblesenunatareaenlademonofuncional
![Page 107: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/107.jpg)
AlejandroPérezMartín|107
5.5. Anexo5.EsquemascompletosMongoDB
Acontinuación,semuestralaestructuraqueconcebimosenunprimermomentoparalabasededatosdondepodemosverlasdiferentesentidadesquelaconformanyloscamposporlosqueestáncompuestos.
Obras(Works)
Field Type Description
id String Workidentifier(autogenerated)
work_id String Workidentifier
name String Workname
description String Workdescription
created_on Date Workcreationdateandtime
created_by Object<User> Workcreatoridentifier
last_update Date Worklatestupdate
deadline Date Workdeadline
address String Workaddress
city String Workcity
postal_code Integer Workpostalcode
location Object<String-Longitude,Latitude> Worklocation
tasks Array<Tasks> Worktaskslist
equipment Array<Equipment> Workequipmentlist
attachments Object<String-Filepath> Workattachments
employees Array<Employees> Workassignedemployees
state String Finished/Inprogress/Pending/Cancelled
Tabla38.EspecificacióndelaentidadObrasenlabasededatos
![Page 108: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/108.jpg)
AlejandroPérezMartín|108
Tareas(Tasks)
Field Type Description
id String Taskidentifier
name String Getallcurrenttask
description String Getinfofromacertaintask
last_update Date Tasklatestupdate
deadline Date Taskdeadlinedate
state String Finished/Inprogress/Pending/CancelledTabla39.EspecificacióndelaentidadTareasenlabasededatos
Material(Equipment)
Field Type Description
id String Taskidentifier
name String Getallcurrenttask
description String GetinfofromacertaintaskTabla40.EspecificacióndelaentidadMaterialenlabasededatos
Usuarios(Users)
Field Type Description
id String Useridentifier
name String Username
full_name String Userfullname
role String Employer/Employee/Admin
bio String Userbiography
phone Integer Userphonenumber
email String Useremail(forlogin)
password String Encodedpassword
salt String Passwordsalt
Tabla41.EspecificacióndelaentidadUsuariosenlabasededatos
![Page 109: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/109.jpg)
AlejandroPérezMartín|109
5.6. Anexo5.DocumentacióndelaAPIREST
Acontinuación,sedescriben lasdiferentesoperacionespullypusha laAPIRESTy larespuestadadaporellaencadacaso.
Autenticación(Authentication)
Ruta Método Descripción
/api/login POST Autenticaunusuarioenelsistema
/api/register POST Registraunnuevousuarioenelsistema
Tabla42.DocumentacióndeaccesoalaentidadAutenticación
Obras(Works)
Ruta Método Descripción
/api/works GET Obtienetodaslasobras
/api/works POST Creaunaobraenlabasededatos
/api/works DELETE Eliminatodaslasobrasdelabasededatos
/api/works/:id GET ObtienelaobraconelIDindicado
/api/works/:id PUT Actualizalosdatosdeunaobra
/api/works/:id DELETE EliminalaobraconelIDindicado
/api/works/user/:id GET Obtienelasobrasasociadasaunempleado
Tabla43.DocumentacióndeaccesoalaentidadObras
Materiales(Materials)
Ruta Método Descripción
/api/materials GET Obtienetodoslosmaterialesexistentes
/api/materials POST Creaunnuevomaterialenlabasededatos
/api/materials/:id GET ObtieneelmaterialconelIDindicado
/api/materials/:id PUT Actualizalosdatosdeunmaterial
/api/materials/:id DELETE EliminaelmaterialconelIDindicado
/api/materials/search POST Obtienelosmaterialesfiltradosporelnombreindicado
Tabla44.DocumentacióndeaccesoalaentidadMateriales
![Page 110: Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … · 2020-02-27 · de aplicación web y móvil para la gestión de obras de instalación de](https://reader033.vdocuments.co/reader033/viewer/2022041911/5e6758e670b68c048349411e/html5/thumbnails/110.jpg)
AlejandroPérezMartín|110
Usuarios(Users)
Subidas(Uploads)
Ruta Método Descripción
/api/upload POST Subeunarchivoalsistema
/api/upload DELETE Eliminaunarchivodelassubidasdelsistema
Tabla46.DocumentacióndeaccesoalaentidadSubidasenlaAPIREST
Ruta Método Descripción
/api/users GET Obtieneellistadodeusuarios
/api/users POST Creaunnuevousuarioenlabasededatos
/api/users/:id GET ObtieneelusuarioconelIDindicado
/api/users/:id PUT Actualizalosdatosdeunusuario
/api/users/:id DELETE EliminaelusuarioconelIDindicado
/api/users/search POST Obtienelosusuariosfiltradosporelnombreindicado
Tabla45.DocumentacióndeaccesoalaentidadUsuarios