Post on 10-Mar-2020
Desarrollodeunprototipodeaplicaciónwebymóvilparalagestióndeobrasdeinstalacióndefibraóptica-
Parte1.
GradoenIngenieríaInformática
Trabajodefindegrado
Juliode2017,LasPalmasdeGranCanaria
Autor:AlejandroPérezMartínyTutores:Dr.AlexisQuesadaArencibiayD. JonathanAlemánAlemán
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.
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
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
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
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
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
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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
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.
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"
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.
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.
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.
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
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).
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
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.
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.
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.
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.
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
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
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
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().
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:
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
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
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.
AlejandroPérezMartín|55
Ilustración23.Capturadelosresultadosdelaspruebasunitarias
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.
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.
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.
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/
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
AlejandroPérezMartín|94
Ilustración29.Creacióndeunaobraenelpaneldeadministración(materiales)
Ilustración30.Creacióndeunaobraenelpaneldeadministración(añadiendounatarea)
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
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
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.
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
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
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
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”
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
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
AlejandroPérezMartín|104
Laformaenquedichasnotificacionessemostraráneneldispositivodelempleadopuedeapreciarseenlasiguienteilustración:
Ilustración48.Vistadenotificacionespusheneldispositivodelempleado
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
AlejandroPérezMartín|106
Ilustración50.Informacióndelaobraenlademonofuncional
Ilustración51.Accionesdisponiblesenunatareaenlademonofuncional
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
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
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
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