Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … ·...

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.


Í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


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


Í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


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


Í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


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


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.


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.


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.


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.


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.


Nuestrasaplicacioneshacenusodedatosdecarácterpersonaldesususuarios, talescomosunombre,dirección,fechadenacimiento,puestodetrabajoyactividadenelmismo,etc.EsporelloquedebemostomarnosmuyenseriolaLOPDgarantizandosucumplimientoentodomomentomedianteelusodeunabasededatosrobustayquemantieneestosdatossensiblesencriptados.

Además, los usuarios de dicha aplicación deben conocer en todomomento que susdatospersonalesestánsiendoalmacenadoscomorequisitoparaelusodelamisma.


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.


• Laaplicaciónestádesplegadasobreunentornorobustoytesteadoproporcionadoporel MEAN Stack que asegura el correcto funcionamiento de la aplicación en todomomento.

CII08Capacidadparaanalizar,diseñar,construirymanteneraplicacionesdeformarobusta,

segurayeficiente,eligiendoelparadigmayloslenguajesdeprogramaciónmásadecuados.


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


CII13Conocimiento y aplicación de las herramientas necesarias para el almacenamiento,

procesamientoyaccesoalosSistemasdeinformación,incluidoslosbasadosenweb.


• Seha garantizado la persistenciade losdatos introducidos en lamismamediante lautilizacióndeunabasededatosnorelacionalMongoDB,quepermiteelaccesoalosdatosdemanerarápida,sencillaysegura.

CII16Conocimientoyaplicacióndelosprincipios,metodologíasyciclosdevidadelaingeniería

desoftware.


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


• SehahechousodelibreríascomoAngularJSMaterialbasadasenGoogleMaterial,cuyoobjetivoeslaaccesibilidaddelainterfazysuusabilidad.

TFG01Ejercicio original a realizar individualmente y presentar y defender ante un tribunal

universitario,consistenteenunproyectoenelámbitodelastecnologíasespecíficasdelaIngenieríaenInformáticadenaturalezaprofesionalenelquesesinteticenintegrenlascompetenciasadquiridasenlasenseñanzas.


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.


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.


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


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.


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.


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.


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.


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.


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.


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.


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.


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


Enunprincipiotambiénestimamosquelarealizacióndeladocumentaciónrelativaalproyectoibaatenerunaduraciónaproximadade30horasypudimosobservarquealfinalestetiemposeextendióengranmedida.

También es interesante remarcar, aunque sea común, que la previsión temporaldestinadaalaimplementacióndelproyectofuequizásalgooptimista.


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.


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.


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.


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


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


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.


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"


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.


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.


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.


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


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


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


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.


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.


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.


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.


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


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


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


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


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:


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


AdemásdeCodacy,sehaincorporadodocumentacióndelaaplicaciónmóvildelproyectocon laherramientaCompodoc,quegeneradeformaautomáticaunresumende losdistintoscomponentesdelaaplicaciónhaciendousodeloscomentariosincluidosenelcódigoduranteeldesarrollo.Ennuestrocasosehaobtenidounporcentajedel100%encuantoalalcancedeladocumentacióndelcódigo,elcualseharealizadosiguiendolasdirectricesdelestándarJSDoc.

Ilustración21.CapturadelresumendelalcancedeloscomentarioshechoconCompodoc


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.


Ilustración23.Capturadelosresultadosdelaspruebasunitarias


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.


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.


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.


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/


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


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


Nombre Crearobra ID 2

Creadopor AlejandroPérezMartín Fecha 22/10/2016



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


Nombre Gestionarobra ID 3




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


Nombre Gestionartareas ID 3.1




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.


3.a.1.SemuestraunmensajedeerroralADMINISTRADORatravésdelainterfaz.Tabla10.Gestionartareas


Nombre Añadirtarea ID 3.1.1




Personalinvolucradoointereses:1. ADMINISTRADOR:quiereañadirtareasaunaobra.

Descripción:ElADMINISTRADORmedianteelformulariodecreación/edicióndeobrasañadetareasalamisma.


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.


3.a.1.SemuestraunmensajedeerroralADMINISTRADORatravésdelainterfaz.Tabla11.Casodeuso:Añadirtarea


Nombre Eliminartarea ID 3.1.2




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


Nombre Editartarea ID 3.1.3




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


Nombre Añadirsubtarea ID 3.1.3.1




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


Nombre Importartareas ID 3.2


Modif.por AlejandroPérezMartín Fechamodif. 22/10/2016


Personalinvolucradoointereses:1. ADMINISTRADOR:quiereimportartareasaunaobra.

Descripción:ElADMINISTRADORmedianteelformulariodecreaciónoedicióndeobrasimportatareasalamisma.


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


Nombre Gestionarmaterial ID 3.3




Personalinvolucradoointereses:1. ADMINISTRADOR:quieregestionarelmaterialdeunaobra.

Descripción:ElADMINISTRADORmedianteelformulariodecreaciónoedicióndeobraseditaelmaterialdelamisma.


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


Nombre Añadirmaterial ID 3.3.1




Personalinvolucradoointereses:1. ADMINISTRADOR:quiereañadirmaterialaunaobra.

Descripción:ElADMINISTRADORmedianteelformulariodecreaciónoedicióndeobrasañadematerialalamisma.



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


Nombre Eliminarmaterial ID 3.3.2




Personalinvolucradoointereses:1. ADMINISTRADOR:quiereeliminarmaterialdeunaobra.

Descripción:ElADMINISTRADORmedianteelformulariodecreaciónoedicióndeobraseliminamaterialasociadoalamisma.

Precondición:ElADMINISTRADORdebeestarautenticadoylaobradebeestarcreadapreviamenteoestarelADMINISTRADORenelformulariodecreaciónoedicióndeobras.


Flujonormal:1. ElADMINISTRADORseencuentraenelformulariodecreaciónoedicióndeobras.2. ElADMINISTRADORpulsasobreelbotón“Eliminarmaterial”.3. ElADMINISTRADORpulsaelbotón“Finalizar”yelmaterialasociadoalaobraseelimina

delabasededatos.

Flujoalternativo:

Tabla18.Casodeuso:Editarmaterial


Nombre Importarmaterial ID 3.4




Personalinvolucradoointereses:1. ADMINISTRADOR:quiereimportarmaterialaunaobra.

Descripción:ElADMINISTRADORmedianteelformulariodecreaciónoedicióndeobrasimportamaterialesalamisma.



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


Nombre Gestionaradjuntos ID 3.5




Personalinvolucradoointereses:1. ADMINISTRADOR:quieregestionararchivosadjuntosaunaobra.

Descripción:ElADMINISTRADORmedianteelformulariodecreaciónoedicióndeobrasgestionalosarchivosadjuntosalamisma.



Flujonormal:1. ElADMINISTRADORseencuentraenelformulariodecreaciónoedicióndeobras.2. ElADMINISTRADORaccedealmódulodeedicióndeadjuntosdeunaobradondepuede

añadirunnuevoarchivooeliminarlosexistentes.3. ElADMINISTRADORpulsaelbotón“Finalizar”ylainformacióndelaobrasealmacenaen

labasededatos.

Flujoalternativo:

Tabla20.Casodeuso:Gestionaradjuntos


Nombre Añadiradjunto ID 3.5.1




Personalinvolucradoointereses:1. ADMINISTRADOR:quiereañadirarchivosadjuntosaunaobra.

Descripción:ElADMINISTRADORmedianteelformulariodecreaciónoedicióndeobrasañadearchivosadjuntosalamisma.



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


Nombre Eliminaradjunto ID 3.5.2




Personalinvolucradoointereses:1. ADMINISTRADOR:quiereeliminararchivosadjuntosdeunaobra.

Descripción:ElADMINISTRADORmedianteelformulariodecreaciónoedicióndeobraseliminaarchivosadjuntosalamisma.



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


Nombre Cambiarestadodeunaobra ID 3.6




Personalinvolucradoointereses:1. ADMINISTRADOR:quierecambiarelestadodeunaobra.

Descripción:ElADMINISTRADORmedianteundesplegabletendrálaopcióndecambiarelestadoenqueseencuentraunaobra(Pendiente,EncursoyFinalizada).

Precondición:ElADMINISTRADORdebeestarautenticadoylaobradebeestarcreadapreviamente.


Flujonormal:1. ElADMINISTRADORseencuentraenellistadodeobras.2. ElADMINISTRADORpulsaelcampodesplegable“Estado”deunaobra.3. ElADMINISTRADORseleccionaunodelosestadosdelaobra.4. ElSISTEMAautomáticamentecambiaelvalordelestadodelaobraenlabasededatos

Flujoalternativo:3.a.Sielestadoseleccionadoes“Finalizada”laobrasemoveráautomáticamenteallistadodeobrasterminadas.

Tabla23.Casodeuso:Cambiarestadodeunaobra


Nombre Certificarobra ID 3.7




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


Nombre Registrarempleados ID 4




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.


3.a.1.SemuestraunmensajedeerroralADMINISTRADORatravésdelainterfaz.3.a.2.SepermitealADMINISTRADORvolverarellenarloscamposerróneos.

Tabla25.Casodeuso:Registrarempleados


Nombre Gestionarempleados ID 5




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


Nombre Editarempleado ID 5.1




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


Nombre Eliminarempleado ID 5.2




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


Nombre Notificarempleado ID 5.3




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


Nombre Visualizarempleado ID 5.4




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


Nombre IniciarsesiónenlaAPP ID 6



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


Nombre Visualizarobra ID 7




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


Nombre Gestionararchivosadjuntosatarea ID 8




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


Nombre Adjuntararchivo ID 8.1




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


Nombre Eliminararchivodeunatarea ID 8.2




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


Nombre Añadirtareasaobra(empleado) ID 9




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)


Nombre Notificarincidencia ID 11




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


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


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


Ilustración29.Creacióndeunaobraenelpaneldeadministración(materiales)

Ilustración30.Creacióndeunaobraenelpaneldeadministración(añadiendounatarea)


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


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


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.


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


Paraañadirmaterialesaunaobra,bastaconpulsarelbotón“AddMaterial”,queabriráunaventanadeedicióndematerialesqueunavezhechaslasmodificacionespuedenguardarseloscambiospulsandoenelbotóndeguardarenlapartesuperiorderecha.

Ilustración38.Añadirmaterialesaunaobradesdelaapp

Losmaterialespuedensereditados/eliminadosúnicamenteporelusuarioqueloscrea,paraello,hayquedeslizareldedodederechaaizquierdasobrelatareaaeditarcomosemuestraacontinuaciónparaqueaparezcanestasopciones.

Ilustración39.Editarmaterialesdelaobramaterialdesdelaapp


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


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”


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


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


Laformaenquedichasnotificacionessemostraráneneldispositivodelempleadopuedeapreciarseenlasiguienteilustración:

Ilustración48.Vistadenotificacionespusheneldispositivodelempleado


5.4. Anexo4.Pantallazoscompletosdelademonofunciona

Acontinuación,mostramoscapturasdepantallasquemuestranlademonofuncionalcompletapresentadaenlasegundareunióndurantelaetapadeanálisis.

Lasprimeraspantallascorrespondenaliniciodesesiónporpartedelempleadodentrodelaaplicaciónundesglosedelasobrasquetieneasignadasordenadasporfecha.

Unavezhaseleccionadounapasaríamosa la tercerapantalla,dondepuedeobtenerinformaciónrelativaalastareasdelaobra(consideramoslastareascomoaquelloquedeseaverprimerounempleadoalaccederaunaobra).

Ilustración49.Primeraspantallasdelademonofuncional


Ilustración50.Informacióndelaobraenlademonofuncional

Ilustración51.Accionesdisponiblesenunatareaenlademonofuncional


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


Tareas(Tasks)


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)


id String Taskidentifier

name String Getallcurrenttask

description String GetinfofromacertaintaskTabla40.EspecificacióndelaentidadMaterialenlabasededatos

Usuarios(Users)


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


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)


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


/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


Usuarios(Users)

Subidas(Uploads)


/api/upload POST Subeunarchivoalsistema

/api/upload DELETE Eliminaunarchivodelassubidasdelsistema

Tabla46.DocumentacióndeaccesoalaentidadSubidasenlaAPIREST


/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

Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … ·...

Documents

Transcript of Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de … ·...