Desarrollo de un prototipo de aplicación web y móvil para la gestión de obras de instalación de fibra óptica : parte 1
Abstract
Este proyecto surge bajo la necesidad de resolución de un problema real, en un contexto real, donde se pretende dar soporte a la gestión de obras de instalación de fibra óptica, permitiendo asÌ comunicación bidireccional eficiente entre los diferentes intervinientes de la misma. El objetivo de este proyecto es el análisis, diseÒo e implementación de un panel de administración que permita la creación y edición de las obras, asÌ como la asignación de empleados a la misma que lleven a cabo las tareas pertenecientes a ella. Como objetivo secundario se nos presenta la posibilidad de experimentar en el campo del desarrollo híbrido de aplicaciones para móviles, asÌ como el estudio de diferentes tecnologías totalmente novedosas para el autor de este trabajo.
Full text
! ! ! Desarrollo!de!un!prototipo! de!aplicación!web!y!móvil! para!la!gestión!de!obras!de! instalación!de!fibra!óptica!-! Parte!1.! ! ! ! ! ! Grado!en!Ingeniería!Informática! Trabajo!de!fin!de!grado! Julio!de!2017,!Las!Palmas!de!Gran!Canaria! ! ! ! ! ! ! Autor:!Alejandro!Pérez!Martín!y!Tutores:!Dr.!Alexis!Quesada!Arencibia!y!D.!Jonathan!Alemán! Alemán!
Alejandro!Pérez!Martín!|!2! ! Resumen' ! Este!proyecto!surge!bajo!la!necesidad!de!resolución!de!un!problema!real,!en!un!contexto! real,! donde! se! pretende! dar! soporte! a! la! gestión! de! obras! de! instalación! de! fibra! óptica,! permitiendo!así!comunicación!bidireccional!eficiente!entre!los!diferentes!intervinientes!de!la! misma.! El!objetivo!de!este!proyecto!es!el!análisis,!diseño!e!implementación!de!un!panel!de! administración! que! permita! la! creación! y! edición! de! las! obras,! así! como! la! asignación! de! empleados!a!la!misma!que!lleven!a!cabo!las!tareas!pertenecientes!a!ella.!! Como!objetivo!secundario!se!nos!presenta!la!posibilidad!de!experimentar!en!el!campo! del!desarrollo!híbrido!de!aplicaciones!para!móviles,!así!como!el!estudio!de!diferentes!tecnologías! totalmente!novedosas!para!el!autor!de!este!trabajo.! ! Abstract' ! This!project!raises!under!the!necessity!of!a!real!problem!resolution,!in!a!real!context,!to! give! support! to! optical! fiber! installation! works,! thus! allowing! an! efficient! and! bidirectional! communication!between!all!participants.! The! main! objective! of! this! project! is! an! administration! panel! analysis,! design! and! implementation!that!allows!the!works!creation!and!editing,!as!well!as!the!employees!allocation! to!it!that!perform!it!tasks.! The!secondary!project!objective!is!the!experimenting!possibility!inside!the!hybrid!mobile! applications!development,!as!well!as!the!study!of!different!technologies!totally!novel!for!the! author!of!this!work.! !
Alejandro!Pérez!Martín!|!3! ! Índice' Resumen!...............................................................................................................................!2! Abstract!................................................................................................................................!2! Índice!de!ilustraciones!...........................................................................................................!5! Índice!de!tablas!.....................................................................................................................!7! Estructura!del!documento!.....................................................................................................!9! 1.!Bloque!1.!Introducción!y!Contextualización!..................................................................!10! 1.1.!Introducción!.......................................................................................................!10! 1.2.!Estado!actual!......................................................................................................!11! 1.3.!Objetivos!............................................................................................................!12! 1.3.1.!Objetivos!generales!..............................................................................................!12! 1.3.2.!Objetivos!académicos!...........................................................................................!12! 1.4.!Normativa!y!legislación!.......................................................................................!13! 1.4.1.!Ley!de!protección!de!Datos!de!Carácter!Personal!................................................!13! 1.5.!Justificación!de!las!competencias!específicas!cubiertas!.......................................!15! 1.5.1.!Competencias!comunes!a!la!Ingeniería!Informática!.............................................!15! 1.6.!Aportaciones!.......................................................................................................!17! 1.7.!Recursos!.............................................................................................................!18! 1.7.1.!Recursos!software!................................................................................................!18! 1.7.2.!Recursos!hardware!...............................................................................................!27! 1.8.!Planificación!temporal!........................................................................................!28! 2.!Bloque!2.!Desarrollo!del!Proyecto!................................................................................!30! 2.1.!Análisis!...............................................................................................................!30! 2.1.1.!Primera!reunión!y!contextualización!del!problema!..............................................!30! 2.1.2.!Glosario!de!lenguaje!propio!del!contexto!del!problema!......................................!31! 2.1.3.!Generación!del!prototipo!.....................................................................................!31! 2.1.4.!Segunda!reunión,!validación!y!acotación!de!requisitos!........................................!32! 2.1.5.!Especificación!final!de!requisitos!y!acotación!del!proyecto!.................................!33! 2.1.6.!Identificación!de!actores!principales!del!sistema!.................................................!34! 2.1.7.!Especificación!y!diagramas!de!casos!de!uso!.........................................................!35! 2.2.!Diseño!................................................................................................................!37! 2.2.1.!Componentes!del!sistema!....................................................................................!37! 2.2.2.!Utilización!del!patrón!de!diseño!Modelo!–!Vista!–!Controlador!(MVC)!................!38! 2.2.3.!Desarrollo!híbrido!con!Ionic!..................................................................................!38! 2.2.4.!Estructura!y!entidades!de!la!base!de!datos!..........................................................!39!
Alejandro!Pérez!Martín!|!4! ! 2.2.5.!Arquitectura!del!portal!de!administración!en!AngularJS!......................................!39! 2.3.!Implementación!..................................................................................................!41! 2.3.1.!Desarrollo!de!la!API!REST!en!Node.js!y!MongoDB!................................................!42! 2.3.2.!Desarrollo!de!la!aplicación!móvil!..........................................................................!48! 2.4.!Pruebas!...............................................................................................................!54! 3.!Bloque!3.!Conclusiones!y!Trabajos!Futuros!...................................................................!56! 3.1.!Conclusiones!y!trabajos!futuros!..........................................................................!56! 3.1.1.!Conclusiones!sobre!el!desarrollo!del!proyecto!.....................................................!56! 3.1.2.!Trabajos!futuros!....................................................................................................!58! 4.!Bloque!4.!Fuentes!de!Información!................................................................................!59! 4.1.!Fuentes!de!información!del!Bloque!1.!Introducción!y!Contextualización!..................!59! 4.2.!Fuentes!de!información!del!Bloque!2.!Desarrollo!del!proyecto!............................!59! 5.!Bloque!5.!Anexos!.........................................................................................................!60! 5.1.!Anexo!1.!Casos!de!uso!.........................................................................................!60! 5.2.!Anexo!2.!Manual!de!usuario!del!panel!de!administración!....................................!92! 5.3.!Anexo!3.!Manual!de!usuario!de!la!aplicación!móvil!.............................................!97! 5.4.!Anexo!4.!Pantallazos!completos!de!la!demo!no!funciona!..................................!105! 5.5.!Anexo!5.!Esquemas!completos!MongoDB!.........................................................!107! 5.6.!Anexo!5.!Documentación!de!la!API*REST!...........................................................!109! ! ' '
Alejandro!Pérez!Martín!|!5! ! Índice'de'ilustraciones' Ilustración!1.!Captura!de!la!página!de!incidencias!de!GitHub!...............................................!19! Ilustración!2.!Pantallas!principales!del!prototipo!no!funcional!.............................................!32! Ilustración!3.!Representación!gráfica!de!una!arquitectura!cliente-servidor!..........................!37! Ilustración!4.!Interacción!de!componentes!con!AngularJS!....................................................!38! Ilustración!5.!Diagrama!de!entidades!de!la!base!de!datos!....................................................!39! Ilustración!6.!Jerarquía!de!ficheros!de!una!aplicación!en!AngularJS!.....................................!40! Ilustración!7.!Captua!del!fichero!de!configuración!de!Docker!...............................................!42! Ilustración!8.!Versión!inicial!del!fichero!package.json!..........................................................!43! Ilustración!9.!Petición!GET!al!servidor!en!el!puerto!3000!......................................................!44! Ilustración!10.!!Esquema!resumido!del!modelo!de!obras!de!Mongoose!...............................!45! Ilustración!11.!Jerarquía!de!ficheros!de!la!API!REST!siguiendo!patrón!MVC!..........................!46! Ilustración!12.!Diagrama!de!peticiones!HTTP!con!token!(JWT)!.............................................!47! Ilustración!13.!Ejemplo!de!petición!HTTP!utilizando!Postman!..............................................!47! Ilustración!14.!Jerarquía!de!ficheros!de!la!aplicación!móvil!..................................................!48! Ilustración!15.!Jerarquía!de!ficheros!de!la!página!principal!de!la!aplicación!.........................!49! Ilustración!16.!Modelo!de!datos!del!tipo!‘Obra’!...................................................................!49! Ilustración!17.!Fichero!work.service.ts!.................................................................................!50! Ilustración!18.!Fichero!dashboard.ts!....................................................................................!51! Ilustración!19.!Ejemplo!de!recepción!de!notificaciones!push!................................................!52! Ilustración!20.!Captura!del!resumen!de!análisis!de!código!hecho!con!Codacy!......................!52! Ilustración!21.!!Captura!del!resumen!del!alcance!de!los!comentarios!hecho!con!Compodoc!.!53! Ilustración!22.!Ejemplo!del!test!de!creación!de!un!usuario!...................................................!54! Ilustración!23.!Captura!de!los!resultados!de!las!pruebas!unitarias!.......................................!55! Ilustración!24.!Diagrama!de!casos!de!uso!completo!.............................................................!60! Ilustración!25.!Pantalla!de!inicio!del!panel!de!administración!..............................................!92! Ilustración!26.!Pantalla!de!login!del!panel!de!administración!...............................................!92! Ilustración!27.!Dashboard!del!panel!de!administración!........................................................!93! Ilustración!28.!Creación!de!una!obra!en!el!panel!de!administración!.....................................!93! Ilustración!29.!Creación!de!una!obra!en!el!panel!de!administración!(materiales)!.................!94! Ilustración!30.!Creación!de!una!obra!en!el!panel!de!administración!(añadiendo!una!tarea)!.!94! Ilustración!31.!Creación!de!una!obra!en!el!panel!de!administración!(añadiendo!archivos! adjuntos)!.............................................................................................................................!95! Ilustración!32.!Vista!de!la!pantalla!users!..............................................................................!95!
Alejandro!Pérez!Martín!|!6! ! Ilustración!33.!Vista!de!la!pantalla!materials!.......................................................................!96! Ilustración!34.!Vista!de!edición!de!una!obra!........................................................................!96! Ilustración!35.!Inicio!de!sesión!en!de!la!aplicación!...............................................................!97! Ilustración!36.!Vistas!de!la!pantalla!de!principal!de!la!aplicación!(dashboard)!......................!98! Ilustración!37.!Pantalla!del!detalle!de!una!obra!...................................................................!98! Ilustración!38.!Añadir!materiales!a!una!obra!desde!la!app!...................................................!99! Ilustración!39.!Editar!materiales!de!la!obra!material!desde!la!app!.......................................!99! Ilustración!40.!Vistas!del!las!pantallas!de!listado!de!tareas!y!detalle!de!una!tarea!.............!100! Ilustración!41.!Edición!de!una!tarea!en!la!app!....................................................................!100! Ilustración!42.!Añadir!adjuntos!a!una!tarea!.......................................................................!101! Ilustración!43.!Captura!de!la!pantalla!de!“Attachments”!....................................................!101! Ilustración!44.!Listado!de!usuarios!y!vista!del!perfil!de!un!usuario!.....................................!102! Ilustración!45.!Edición!del!perfil!del!usuario!......................................................................!102! Ilustración!46.!Vistas!de!la!pantalla!la!pantalla!de!cierre!de!sesión!....................................!103! Ilustración!47.!Envío!de!notificaciones!Push!desde!la!consola!de!Google!Firebase!..............!103! Ilustración!48.!Vista!de!notificaciones!push!en!el!dispositivo!del!empleado!.......................!104! Ilustración!47.!Primeras!pantallas!de!la!demo!no!funcional!...............................................!105! Ilustración!48.!Información!de!la!obra!en!la!demo!no!funcional!.........................................!106! Ilustración!49.!Acciones!disponibles!en!una!tarea!en!la!demo!no!funcional........................!106! ' ' '
Alejandro!Pérez!Martín!|!7! ! Índice'de'tablas' ' Tabla!1.!Planificación!inicial!.................................................................................................!28! Tabla!2.!Dedicación!final!......................................................................................................!28! Tabla!3.!Glosario!de!lenguaje!propio!del!contexto!del!problema!..........................................!31! Tabla!4.!Actores!principales!del!sistema!..............................................................................!34! Tabla!5.!Tabla!de!especificación!de!los!casos!de!uso!............................................................!35! Tabla!6.!Tabla!de!especificación!del!caso!de!uso!"Gestionar!empleados"!.............................!36! Tabla!7.!Caso!de!uso:!Iniciar!sesión!en!el!panel!de!administración!.......................................!61! Tabla!8.!Caso!de!uso:!Crear!obra!..........................................................................................!62! Tabla!9.!Caso!de!uso:!Gestionar!obra!...................................................................................!63! Tabla!10.!Gestionar!tareas!...................................................................................................!64! Tabla!11.!Caso!de!uso:!Añadir!tarea!.....................................................................................!65! Tabla!12.!Caso!de!uso:!Eliminar!tarea!..................................................................................!66! Tabla!13.!Caso!de!uso:!Editar!tarea!......................................................................................!67! Tabla!14.!Caso!de!uso:!Añadir!subtarea!...............................................................................!68! Tabla!15.!Caso!de!uso:!Importar!tareas!................................................................................!69! Tabla!16.!Caso!de!uso:!Gestionar!material!...........................................................................!70! Tabla!17.!Caso!de!uso:!Añadir!material!................................................................................!71! Tabla!18.!Caso!de!uso:!Editar!material!.................................................................................!72! Tabla!19.!Caso!de!uso:!Importar!material!............................................................................!73! Tabla!20.!Caso!de!uso:!Gestionar!adjuntos!...........................................................................!74! Tabla!21.!Caso!de!uso:!Añadir!adjunto!.................................................................................!75! Tabla!22.!Caso!de!uso:!Eliminar!adjunto!..............................................................................!76! Tabla!23.!Caso!de!uso:!Cambiar!estado!de!una!obra!............................................................!77! Tabla!24.!Caso!de!uso:!Certificar!obra!..................................................................................!78! Tabla!25.!Caso!de!uso:!Registrar!empleados!........................................................................!79! Tabla!26.!Caso!de!uso:!Gestionar!empleados!.......................................................................!80! Tabla!27.!Caso!de!uso:!Editar!empleado!...............................................................................!81! Tabla!28.!Caso!de!uso:!Eliminar!empleado!...........................................................................!82! Tabla!29.!Caso!de!uso:!Notificar!empleado!..........................................................................!83! Tabla!30.!Caso!de!uso:!Visualizar!empleado!.........................................................................!84! Tabla!31.!Caso!de!uso:!Iniciar!sesión!en!la!APP!.....................................................................!85! Tabla!32.!Caso!de!uso:!Visualizar!obra!.................................................................................!86! Tabla!33.!Caso!de!uso:!Gestionar!archivos!adjuntos!a!tarea!.................................................!87!
Alejandro!Pérez!Martín!|!8! ! Tabla!34.!Caso!de!uso:!Adjuntar!archivo!..............................................................................!88! Tabla!35.!Caso!de!uso:!Eliminar!archivos!de!una!tarea!.........................................................!89! Tabla!36.!Caso!de!uso:!Añadir!tareas!a!obra!(empleado)!......................................................!90! Tabla!37.!Caso!de!uso:!Notificar!incidencia!..........................................................................!91! Tabla!38.!Especificación!de!la!entidad!Obras!en!la!base!de!datos!.......................................!107! Tabla!39.!Especificación!de!la!entidad!Tareas!en!la!base!de!datos!......................................!108! Tabla!40.!Especificación!de!la!entidad!Material!en!la!base!de!datos!...................................!108! Tabla!41.!Especificación!de!la!entidad!Usuarios!en!la!base!de!datos!...................................!108! Tabla!42.!Documentación!de!acceso!a!la!entidad!Autenticación!........................................!109! Tabla!43.!Documentación!de!acceso!a!la!entidad!Obras!.....................................................!109! Tabla!44.!Documentación!de!acceso!a!la!entidad!Materiales!.............................................!109! Tabla!45.!Documentación!de!acceso!a!la!entidad!Usuarios!................................................!110! Tabla!46.!Documentación!de!acceso!a!la!entidad!Subidas!en!la!API!REST!...........................!110! ' '
Alejandro!Pérez!Martín!|!9! ! Estructura'del'documento' ! Durante!el!desarrollo!de!la!memoria,!hemos!decidido!dividirla!en!cinco!grandes!bloques! que!abarcan!la!totalidad!del!proyecto.! 1. Bloque!1.!Introducción!y!Contextualización:!En!este!bloque!presentaremos!el!problema! que!pretende!resolver!el!proyecto!y!su!contexto.!Además,!se!presentan!las!soluciones! actuales!que!utilizan!los!usuarios,!qué!aporta!este!proyecto!y!qué!competencias!cubre.! 2. Bloque!2.!Desarrollo!del!proyecto:!En!este!bloque!se!recogen!las!diferentes!fases!por! las!que!hemos!pasado!durante!el!desarrollo!del!proyecto.!Los!problemas!con!los!que! nos!hemos!ido!encontrando!durante!su!desarrollo!y!qué!decisiones!hemos!tomado.! 3. Bloque!3.!Conclusiones!y!Trabajos!Futuros:!A!lo!largo!de!este!bloque!concluiremos!la! memoria!reflexionando!acerca!de!qué!nos!ha!aportado!este!proyecto!y!sugeriremos!qué! podría!incluir!futuras!versiones!del!desarrollo.! 4. Bloque! 4.!Fuentes! de! Información:! Aquí! recogeremos! las! fuentes! de! información! utilizadas!durante!el!desarrollo!del!proyecto.! 5. Bloque!5.!Anexos:!Completaremos!la!memoria!a!través!de!los!anexos!que!aportarán! información!adicional!a!consultar!si!el!lector!lo!desea.! ! Como!comentaremos!en!la!introducción,!debemos!adelantar!que!este!proyecto!ha!sido! dividido! desde! el! principio! en! tres! grandes! partes,! una! conjunta! y! dos! desarrolladas! por! diferentes!alumnos.!Por!lo!que!ambas!memorias!siguen!una!estructura!muy!similar!y!comparten! grandes! similitudes! en!su! desarrollo! a! excepción! del! apartado! de! implementación,! trabajos! futuros!y!aquellos!intrínsecamente!personales!como!las!conclusiones.! '!
Alejandro!Pérez!Martín!|!16! ! CII13' Conocimiento! y! aplicación! de! las! herramientas! necesarias! para! el! almacenamiento,! procesamiento!y!acceso!a!los!Sistemas!de!información,!incluidos!los!basados!en!web.! Esta!competencia!queda!cubierta!por!parte!del!alumno!porque!en!este!proyecto:! • Se!ha!garantizado!la!persistencia!de!los!datos!introducidos!en!la!misma!mediante!la! utilización!de!una!base!de!datos!no!relacional!MongoDB,!que!permite!el!acceso!a!los! datos!de!manera!rápida,!sencilla!y!segura.! ! CII16' Conocimiento!y!aplicación!de!los!principios,!metodologías!y!ciclos!de!vida!de!la!ingeniería! de!software.! Esta!competencia!queda!cubierta!por!parte!del!alumno!porque!en!este!proyecto:! • Se!han!aplicado!principios!de!la!ingeniería!del!software!tales!como!la!modularidad!en!la! arquitectura! y! el! código! que! permiten! la! ampliación! de! la! herramienta! en! futuras! iteraciones!y!la!refactorización!del!código!para!facilitar!su!mantenimiento.! ! CII17' Capacidad! para! diseñar! y! evaluar! interfaces! persona! computador! que! garanticen! la! accesibilidad!y!usabilidad!a!los!sistemas,!servicios!y!aplicaciones!informáticas.! Esta!competencia!queda!cubierta!por!parte!del!alumno!porque!en!este!proyecto:! • Se!ha!hecho!uso!de!librerías!como!AngularJS!Material!basadas!en!Google!Material,!cuyo! objetivo!es!la!accesibilidad!de!la!interfaz!y!su!usabilidad.! ! TFG01' Ejercicio! original! a! realizar! individualmente! y! presentar! y! defender! ante! un! tribunal! universitario,!consistente!!!en!!!un!!!proyecto!!!en!!!el!!!ámbito!!!de!!!las!tecnologías!!!específicas!!! de!!!la!!!Ingeniería!!!en!!!Informática!!!de!!!naturaleza!profesional!en!el!que!se!sinteticen!integren! las!competencias!adquiridas!en!las!enseñanzas.! !
Alejandro!Pérez!Martín!|!17! ! 1.6. Aportaciones' ! Este!proyecto!trata!de!resolver!un!problema!real!a!través!del!desarrollo!de!un!portal! web!de!administración,!una!API!REST!y!una!aplicación!móvil!funcionales,!intentando!además! realizar!una!aportación!tecnológica,!económica!y!social.! En!el!plano!tecnológico!intentamos!dar!un!enfoque!más!innovador!y!actual!a!la!gestión! de!obras!por!parte!de!la!empresa!instaladora!aportando!un!software!capaz!de,!prácticamente,! abstraer!tanto!al!empleado!como!al!administrador!de!complicados!y!poco!ortodoxos!métodos! de!traspaso!de!información,!convirtiendo!este!proceso!en!algo!más!simple!y!a!la!misma!vez!más! robusto.! Para! conseguir! este! fin! se! ha! hecho! uso! de! tecnologías! actuales! en! el! campo! del! desarrollo!web!tales!como!el!Stack!MEAN.!Además,!la!interfaz!de!usuario!tanto!del!portal!de! administración!como!de!la!aplicación!móvil!está!basada!en!estándares!actuales!como!el!Material! Design.! Desde!el!punto!de!vista!económico,!este!proyecto!permite!a!las!empresas!instaladoras! de!fibra!óptica!facturar!a!las!proveedoras!de!internet!de!manera!eficiente!e!intachable!evitando! así!pérdidas!reales!de!dinero!para!ellas!derivadas!de!la!pérdida!de!información!necesaria!para!la! certificación!y!facturación!de!una!obra!debida!a!la!forma!en!que!ésta!era!gestionada.! En!el!ámbito!social!la!aplicación!trata!de!facilitar!el!trabajo!a!los!empleados!que,!a!la! hora!de!generar!información!necesaria!para!la!certificación,!debían!utilizar!varias!aplicaciones! en! su! dispositivo! para! intercambiarla! con! el! encargado! de! la! obra.! Ahora! disponen! de! una! aplicación!centralizada!y!específica!para!el!control!de!la!información!que!les!permite!ahorrar! tiempo!y!realizar!las!mismas!tareas!de!una!manera!mucho!más!sencilla.!! Desde!el!punto!de!vista!del!encargado!de!la!obra!se!ha!facilitado!en!gran!medida!el! trabajo!organizativo!que!éste!debía!hacer!tanto!a!la!hora!de!comenzar!una!nueva!obra,!como!a! la!hora!de!certificar!la!misma.! !
Alejandro!Pérez!Martín!|!18! ! 1.7. Recursos' ! 1.7.1. Recursos'software' ! A!continuación,!se!exponen!las!herramientas!software!utilizadas!para!el!desarrollo!del! proyecto.! ! Sistemas'operativos' ' El!proyecto!ha!sido!realizado!en!tres!entornos!diferentes!como!son!Windows!10,!Ubuntu! 16.04!y!Mac!OS.! En!un!principio!se!decidió!trabajar!en!Windows!10!y!en!Mac!OS!paralelamente,!pero!la! instalación!de!MongoDB!en!Linux!era!mucho!más!directa!y!presentaba!menos!problemas!en! comparación!con!su!versión!en!Windows.! Ante! esta! diversidad! de! entornos! de! desarrollo,! se! hizo! uso! de! la! tecnología! de! contenedores!de!Docker!cuyas!características!se!describen!a!continuación.! ' Docker' ' Docker!es! una! tecnología! de! código! abierto! que! le! permite! crear,! ejecutar,! probar! e! implementar! aplicaciones! distribuidas! dentro! de! contenedores! de! software.! Permite! empaquetar!una!aplicación!en!una!unidad!estandarizada!para!el!desarrollo!de!software,!que! contiene! todo! lo! que! necesita! para! funcionar:! código,! tiempo! de! ejecución,! herramientas! y! bibliotecas!del!sistema,!etc.!Docker!permite!implementar!las!aplicaciones!de!forma!rápida,!fiable! y!sistemática,!en!cualquier!entorno.! Sus!principales!características!son:! • Consume!pocos!recursos,!lo!que!permite!desplegar!multitud!de!contenedores!en!un! mismo!equipo!físico.! • Se!elimina!el!problema!de!dependencias!de!las!aplicaciones.! • Los!contenedores!son!livianos!y!facilitan!su!almacenaje,!transporte!y!despliegue.! • Repositorio!de!imágenes!públicos!y!privados!de!imágenes.! • Multiplataforma,!podremos!desplegar!nuestros!contenedores!en!multitud!de!entornos.! ! ! ! '
Alejandro!Pérez!Martín!|!19! ! Sistema'de'control'de'versiones'del'código,'GIT' ' Git!es!un!software!de!control!de!versiones!diseñado!por!Linus!Torvalds,!pensando!en!la! eficiencia!y!la!confiabilidad!del!mantenimiento!de!versiones!de!aplicaciones!cuando!éstas!tienen! un!gran!número!de!archivos!de!código!fuente.!! Git!se!ha!convertido!en!un!sistema!de!control!de!versiones!con!funcionalidad!plena.!Hay! algunos!proyectos!de!mucha!relevancia!que!ya!usan!Git,!en!particular,!el!grupo!de!programación! del!núcleo!Linux.! Dentro!de!Git!hemos!utilizado!la!metodología!de!trabajo,!git-flow.!Sus!características! principales!son!las!siguientes.! El!trabajo!se!organiza!en!dos!ramas!principales:! • Rama!master:!cualquier!commit!que!pongamos!en!esta!rama!debe!estar!preparado!para! subir!a!producción! • Rama! develop:! rama! en! la! que! está! el! código! que! conformará! la! siguiente! versión! planificada!del!proyecto! Además! de! estas! dos! ramas,! se! proponen! las! siguientes! ramas! auxiliares:! Feature,! Release!y!Hotfix.! También! se! ha! hecho! uso! de! las! Issues! de! GitHub!para! llevar! un! control! de! los! errores/bugs!a!solucionar!y!mejoras!a!implementar!en!posteriores!versiones.! ! Ilustración!1.!Captura!de!la!página!de!incidencias!de!GitHub!
Alejandro!Pérez!Martín!|!20! ! ! Editor'de'texto/código,'Visual'Studio'Code' ' Visual!Studio!Code!es!un!editor!de!código!open-source!de!Microsoft!disponible!para!Mac! OS,! Linux,! y! Windows! con! soporte! integrado! para! Git,! auto-detección! y! auto-completado! inteligente! para! decenas!de! lenguajes,! herramientas!de! depuración!y!un! amplio!abanico!de! extensiones! que! convierten! a! este! editor! de! código! en! todo! un! IDE! (entorno! de! desarrollo! integrado).! Visual! Studio! Code!está! desarrollado! íntegramente! empleando! tecnologías! web! como! Node.js,!TypeScript,!JavaScript!y!CSS!y!da!soporte!a!lenguajes!como!CSS,!HTML,!JavaScript,!JSON,! Less,!Sass,!TypeScript,!PHP,!Python,!Ruby,!Perl,!Objective-C,!Java,!C#,!C++,!etc.! ! Lenguaje'de'programación,'JavaScript' ' JavaScript!(abreviado!comúnmente!JS)!es!un!lenguaje!de!programación!interpretado,! dialecto!del!estándar!ECMAScript.!Se!define!como!orientado!a!objetos,!basado!en!prototipos,! imperativo,!débilmente!tipado!y!dinámico.!! Se!utiliza!principalmente!en!su!forma!del!lado!del!cliente!(client-side),!implementado! como!parte!de!un!navegador!web!permitiendo!mejoras!en!la!interfaz!de!usuario!y!páginas!web! dinámicas,!aunque!existe!una!forma!de!JavaScript!del!lado!del!servidor!(Server-side!JavaScript!o! SSJS).!Su!uso!en!aplicaciones!externas!a!la!web,!por!ejemplo,!en!documentos!PDF,!aplicaciones! de!escritorio!(mayoritariamente!widgets)!es!también!significativo.! Las!características!principales!de!JavaScript!son!las!siguientes:! • JavaScript!es!un!lenguaje!de!secuencias!de!comandos!basado!en!objetos!e!interpretado.! • Aunque! tiene! menos! capacidades! que! los! lenguajes! orientados! a! objetos!de! altas! prestaciones!como!C++!y!Java,!JavaScript!es!más!que!suficientemente!eficiente!para!los! propósitos!para!los!que!está!creado.! • JavaScript!no!es!una!versión!reducida!de!cualquier!otro!lenguaje!(sólo!está!relacionado,! distante!e!indirectamente,!con!Java,!por!ejemplo),!ni!es!una!simplificación!de!ningún! lenguaje.! • JavaScript!es! un! lenguaje! limitado.! Por! ejemplo,! no! es! posible! escribir! aplicaciones! independientes!en!JavaScript!y!la!capacidad!de!lectura!y!escritura!de!archivos!es!mínima.! • Las!secuencias!de!comandos!de!JavaScript!sólo!pueden!ejecutarse!con!un!intérprete,! que!bien!puede!estar!en!un!servidor!Web!o!en!un!explorador!de!Web.! • JavaScript!es!un!lenguaje!en!el!que!no!necesita!declarar!los!tipos!de!datos.!Esto!significa! que! no! es! necesario! declarar! explícitamente! los! tipos! de! datos! de! las! variables.! De! hecho,!no!es!posible!declarar!explícitamente!los!tipos!de!datos!en!JavaScript.!Más!aún,! en!muchos! casos! JavaScript!realiza! conversiones,! automáticamente,! cuando! son! necesarias.!Por!ejemplo,!si!intenta!agregar!un!número!a!un!elemento!que!contiene!texto! (una!cadena),!el!número!se!convierte!en!texto.!! ! ! '
Alejandro!Pérez!Martín!|!21! ! Node.js' ' Node.js!es!un!entorno!en!tiempo!de!ejecución!multiplataforma,!de!código!abierto,!para! la! capa! del! servidor! (pero! no! limitándose! a! ello)! basado! en! el! lenguaje! de! programación! ECMAScript,!asíncrono,!con!I/O!de!datos!en!una!arquitectura!orientada!a!eventos!y!basado!en! el!motor!V8!de!Google.!! Fue!creado!con!el!enfoque!de!ser!útil!en!la!creación!de!programas!de!red!altamente! escalables,!como,!por!ejemplo,!servidores!web.!Fue!creado!por!Ryan!Dahl!en!2009!y!su!evolución! está!apadrinada!por!la!empresa!Joyent,!que!además!tiene!contratado!a!Dahl!en!plantilla.! Node.js!es!una!forma!de!ejecutar!JavaScript!en!el!servidor,!además! de! mucho!más.! Además!de!la!alta!velocidad!de!ejecución!de!JavaScript,!la!verdadera!magia!detrás!de!Node.js!es! algo!que!se!llama!Bucle!de!Eventos!(Event!Loop).!! Para!escalar!grandes!volúmenes!de!clientes,!todas!las!operaciones!intensivas!I/O!en! Node.js! se! llevan! a! cabo! de! forma! asíncrona.! El! enfoque! tradicional! para! generar! código! asíncrono!es!engorroso!y!crea!un!espacio!en!memoria!no!trivial!para!un!gran!número!de!clientes! (cada!cliente!genera!un!hilo,!y!el!uso!de!memoria!de!cada!uno!se!suma).!! Para!evitar!esta!ineficiencia,!así!como!la!dificultad!conocida!de!las!aplicaciones!basadas! en!hilos,!(programming!threaded!applications),!Node.js!mantiene!un!event!loop!que!gestiona! todas!las!operaciones!asíncronas.! ! AngularJS' ' AngularJS!(comunalmente!llamado!"Angular.js"!o!en!sus!últimas!versiones,!“Angular”),! es!un!framework!de!JavaScript!de!código!abierto,!mantenido!por!Google,!que!se!utiliza!para! crear!y!mantener!aplicaciones!web!de!una!sola!página.!Su!objetivo!es!aumentar!las!aplicaciones! basadas!en!navegador!con!capacidad!de!Modelo!Vista!Controlador!(MVC),!en!un!esfuerzo!para! hacer!que!el!desarrollo!y!las!pruebas!sean!más!fáciles.! La! biblioteca! lee! el! HTML!que! contiene! atributos! de! las! etiquetas! personalizadas! adicionales,!entonces!obedece!a!las!directivas!de!los!atributos!personalizados,!y!une!las!piezas! de! entrada! o! salida! de! la! página! a! un! modelo! representado! por! las! variables! estándar! de! JavaScript.! Los! valores! de! las! variables! de! JavaScript!se! pueden! configurar! manualmente,! o! recuperados!de!los!recursos!JSON!estáticos!o!dinámicos.! AngularJS!se! puede! combinar! con! el! entorno! en! tiempo! de! ejecución! Node.js,! el! framework!para!servidor!Express.js!y!la!base!de!datos!MongoDB!para!formar!el!conjunto!MEAN.! ! !
Alejandro!Pérez!Martín!|!22! ! MongoDB' ' MongoDB!es!un!sistema!de!base!de!datos!No-SQL!orientado!a!documentos,!desarrollado! bajo!el!concepto!de!código!abierto.! Forma!parte!de! la!nueva!familia!de!sistemas!de! base!de!datos!No-SQL.! En! lugar!de! guardar!los!datos!en!tablas!como!se!hace!en!las!bases!de!datos!relacionales,!MongoDB!guarda! estructuras!de!datos!en!documentos!similares!a!JSON!con!un!esquema!dinámico!(MongoDB! utiliza!una!especificación!llamada!BSON),!haciendo!que!la!integración!de!los!datos!en!ciertas! aplicaciones!sea!más!fácil!y!rápida.! Las!características!principales!de!MongoDB!son:! • De! propósito! general,! casi! tan! rápida! como! las! bases! de! datos! No-SQL!de! tipo! clave:valor,!y!con!casi!todas!las!funcionalidades!de!las!bases!de!datos!relacionales.! • Alta!disponibilidad.! • Escalabilidad,!desde!un!servidor!aislado!a!arquitecturas!distribuidas!de!grandes!clusters.! • Aggregation! Framework,! procesamiento! batch!de! datos! para! cálculos! agrupados! utilizando!operaciones!nativas!de!MongoDB.! • Auto!balanceado!de!carga,!a!través!de!distintos!shards.! • Replicación!nativa,!sincronización!de!datos!entre!servidores.! • Seguridad,!autenticación,!autorización,!etc.! • Gestión!avanzada!de!usuarios.! • Recuperación!automática!ante!errores.! • Se!actualiza!sin!dejar!de!dar!servicio.! • No! tiene! los! cuellos! de! botella! que! se! producen! en! las! bases! de! datos! relacionales! (RDBMS).! • Utiliza!objetos!JSON!para!guardar!y!transmitir!la!información.! En!el!desarrollo!de!la!aplicación!utilizamos!Mongoose!como!driver!de!MongoDB,!lo!que! facilitó!la!generación!de!modelos!y!esquemas!que!luego!se!verían!reflejados!en!la!base!de!datos! de!manera!mucho!más!clara!y!directa,!así!como!proporcionar!algunas!funciones!adicionales! como!el!embebido!de!documentos!en!las!referencias!de!los!esquemas.! ! Express.js' ' Express.js!o!simplemente!Express,!es!un!framework!para!el!desarrollo!de!aplicaciones! web!para!Node.js!distribuido!de!manera!libre!y!gratuita!bajo!licencia!MIT.!Está!diseñado!para! construir!aplicaciones!web!y!APIs.!Se!le!considera!el!framework!del!lado!del!servidor!estándar! para!Node.js.!Por!lo!tanto,!podríamos!decir!que!Express.js!es!una!infraestructura!de!aplicaciones! web!Node.js!mínima!y!flexible!que!proporciona!un!conjunto!sólido!de!características!para!las! aplicaciones!web!y!móviles.! ! !
Alejandro!Pérez!Martín!|!23! ! JSON' ' JSON,!acrónimo!de!JavaScript!Object!Notation,!es!un!formato!de!texto!ligero!para!el! intercambio!de!datos.!JSON!es!un!subconjunto!de!la!notación!literal!de!objetos!de!JavaScript! aunque!hoy,!debido!a!su!amplia!adopción!como!alternativa!a!XML,!se!considera!un!formato!de! lenguaje!independiente.! Una!de!las!ventajas!de!JSON!sobre!XML!como!formato!de!intercambio!de!datos!es!que! es!mucho!más!sencillo!escribir!un!analizador!sintáctico!(parser)!de!JSON.!En!JavaScript,!un!texto! JSON!se!puede!analizar!fácilmente!usando!la!función!eval,!lo!cual!ha!sido!fundamental!para!que! JSON!haya! sido! aceptado! por! parte! de! la! comunidad! de! desarrolladores! AJAX,! debido! a! la! ubicuidad!de!JavaScript!en!casi!cualquier!navegador!web.! ! TypeScript' ' TypeScript!es!un!lenguaje!de!programación!de!código!abierto!desarrollado!y!presentado! por! Microsoft! hace! unos! tres! años.! Es! un! superset!de! JavaScript! que! esencialmente! añade! capacidades!de!POO!como!es!el!tipado!estático!y!objetos!basados!en!clases.! Extiende!la!sintaxis!de!JavaScript,!por!medio!de!un!lenguaje!propio!que!compila!ficheros! en! lenguaje! JavaScript! original,! asegurando! la! compatibilidad! con! todos! los! navegadores,! servidores!y!sistemas!operativos.! ! Ionic' ! Ionic!es! un! framework! open! source! para! el! desarrollo! de! aplicaciones! híbridas! que! permite! crear! aplicaciones! multiplataforma! utilizando! HTML5!optimizado! para! móvil,! CSS3,! componentes!JavaScript,!gestos!y!herramientas!para!la!construcción!de!aplicaciones!altamente! interactivas.!Construido!con!Sass!y!optimizado!para!Angular!con!TypeScript!permite!asegurar! aplicaciones!robustas,!rápidas!y!escalables.! Las!aplicaciones!son!híbridas,!¿Qué!quiere!decir!eso?!Que!puedes!desarrollar!una!misma! aplicación! y! ejecutarla! en! Android,! iOS! y! Windows! Phone! sin! tener! que! desarrollarla! en! el! correspondiente!lenguaje!nativo!de!cada!plataforma.! Una!de!las!características!de!Ionic!Framework!es!que!está!construido!para!ser!rápido! debido!a!la!mínima!manipulación!del!DOM,!sin!utilizar!jQuery!y!con!aceleraciones!de!transiciones! por!hardware.! ! ! '
Alejandro!Pérez!Martín!|!24! ! Angular' ' Angular!es!otro!framework,!no!simplemente!una!nueva!versión!de!AngularJS.!Todos!esos! problemas,!difíciles!de!solucionar!con!la!tecnología!usada!por!AngularJS!han!sido!los!que!han! impulsado!a!sus!creadores!a!desarrollar!desde!cero!una!nueva!versión!del!framework.!La!nueva! herramienta!está!pensada!para!dar!cabida!a!todos!los!usos!dados!por!los!desarrolladores,!llevar! a!JavaScript!a!un!nuevo!nivel!comparable!a!lenguajes!más!tradicionales,!siendo!además!capaz! de!resolver!de!una!manera!adecuada!las!necesidades!y!problemas!de!la!programación!del!lado! del!cliente.! Entre!las!nuevas!características!podemos!destacar:! • Mejor!rendimiento!que!AngularJS.! • Inyección!de!dependencias.! • Uso!de!TypeScript.! • Desarrollo!Móvil:!El!desarrollo!de!aplicaciones!de!escritorio!es!mucho!más!fácil! cuando!primero!se!manejan!los!problemas!de!rendimiento!en!el!desarrollo!móvil.! • Modularidad:!Para!desarrollar!una!nueva!funcionalidad!esta!se!empaqueta!en!un! módulo,!produciendo!un!núcleo!más!ligero!y!más!rápido.! • Compilación!AOT:!la!aplicación!está!pre-compilada,!reduciendo!así!el!tiempo!de! carga!de!la!misma.! ! ! HTML' ' HTML,! sigla! en! inglés! de! HyperText!Markup!Language!(lenguaje! de! marcas! de! hipertexto),!hace!referencia!al!lenguaje!de!marcado!para!la!elaboración!de!páginas!web.!Es!un! estándar!que!sirve!de!referencia!del!software!que!conecta!con!la!elaboración!de!páginas!web!en! sus!diferentes!versiones,!define!una!estructura!básica!y!un!código!(denominado!código!HTML)! para!la!definición!de!contenido!de!una!página!web,!como!texto,!imágenes,!videos,!juegos,!entre! otros.! Es! un! estándar! a! cargo! del! World!Wide!Web!Consortium! (W3C)! o! Consorcio! WWW,! organización!dedicada!a!la!estandarización!de!casi!todas!las!tecnologías!ligadas!a!la!web,!sobre! todo! en! lo! referente! a! su! escritura! e! interpretación.! Se! considera! el! lenguaje! web! más! importante!siendo!su!invención!crucial!en!la!aparición,!desarrollo!y!expansión!de!la!World!Wide! Web!(WWW).!Es!el!estándar!que!se!ha!impuesto!en!la!visualización!de!páginas!web!y!es!el!que! todos!los!navegadores!actuales!han!adoptado.! El!lenguaje!HTML!basa!su!filosofía!de!desarrollo!en!la!diferenciación.!Para!añadir!un! elemento! externo! a! la! página! (imagen,! vídeo,! script,! entre! otros.),! este! no! se! incrusta! directamente!en!el!código!de!la!página,!sino!que!se!hace!una!referencia!a!la!ubicación!de!dicho! elemento!mediante!texto.!De!este!modo,!la!página!web!contiene!solamente!texto!mientras!que! recae!en!el!navegador!web!(interpretador!del!código)!la!tarea!de!unir!todos!los!elementos!y! visualizar! la! página! final.! Al! ser! un! estándar,! HTML!busca! ser! un! lenguaje! que! permita! que! cualquier!página!web!escrita!en!una!determinada!versión,!pueda!ser!interpretada!de!la!misma! forma!(estándar)!por!cualquier!navegador!web!actualizado.! ! !
Alejandro!Pérez!Martín!|!25! ! RxJS' ' Reactive!Extension!for!JavaScript!(RxJS)!es!una!librería!que!nos!permite!trabajar!con!flujos! de!datos!asíncronos.!Esta!librería!nos!permite!crear!programas!mediante!la!composición!de! flujos!de!datos!asíncronos!o!basados!en!eventos.! Utilizando! RxJS!se! puede! representar! flujos! de! datos! asíncronos! mediante! Observables! y! manipular!estos!flujos!con!diferentes!operadores!como!si!fueran!simples!colecciones!de!datos.! ! GitHub' ' GitHub! es! una! forja! (plataforma! de! desarrollo! colaborativo)! para! alojar! proyectos! utilizando!el!sistema!de!control!de!versiones!Git.!Utiliza!el!framework!Ruby!on!Rails!por!GitHub,! Inc.!(anteriormente!conocida!como!Logical!Awesome).!Desde!enero!de!2010,!GitHub!opera!bajo! el!nombre!de!GitHub,!Inc.!El!código!se!almacena!de!forma!pública,!aunque!también!se!puede! hacer!de!forma!privada,!creando!una!cuenta!de!pago.! ' CSS' ' Hojas! de! estilo! en! cascada! (o! CSS,! siglas! en! inglés! de! Cascading!Stylesheets)! es! un! lenguaje!de!diseño!gráfico!para!definir!y!crear!la!presentación!de!un!documento!estructurado! escrito!en!un!lenguaje!de!marcado.!Es!muy!usado!para!establecer!el!diseño!visual!de!las!páginas! web,! e! interfaces! de! usuario! escritas! en! HTML!o! XHTML;! el! lenguaje! puede! ser! aplicado! a! cualquier!documento!XML,!incluyendo!XHTML,!SVG,!XUL,!RSS,!etcétera.!También!permite!aplicar! estilos!no!visuales,!como!las!hojas!de!estilo!auditivas.! Junto!con!HTML!y!JavaScript,!CSS!es!una!tecnología!usada!por!muchos!sitios!web!para! crear!páginas!visualmente!atractivas,!interfaces!de!usuario!para!aplicaciones!web,!y!GUIs!para! muchas!aplicaciones!móviles!(como!Firefox!OS).! CSS!está! diseñado! principalmente! para! marcar! la! separación! del!contenido! del! documento!y!la!forma!de!presentación!de!este,!características!tales!como!las!capas,!los!colores! y! las! fuentes.! Esta! separación! busca! mejorar! la! accesibilidad! del! documento,! proveer! más! flexibilidad!y!control!en!la!especificación!de!características,!permitir!que! varios! documentos! HTML!compartan!un!mismo!estilo!usando!una!sola!hoja!de!estilos!separada!en!un!archivo!.css,! y!reducir!la!complejidad!y!la!repetición!de!código!en!la!estructura!del!documento.! ! Sass' ' Sass! es! un!pre-procesador! de! CSS! que! nos! permiten! escribir! estilos! con! una! sintaxis! particular!y!mejorada!que!es!luego!transformada!a!código!CSS!natural.! 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! crear! funciones!que!realicen!ciertas!operaciones!matemáticas!y!reutilizar!código!gracias!a!los!mixins,! variables!que!nos!permiten!guardar!valores,!etc.!
Alejandro!Pérez!Martín!|!32! ! Lo!primero!que!se!le!mostraba!al!empleado!en!la!aplicación!era!una!pantalla!de!inicio!de! sesión! donde! debía! introducir! sus! credenciales! para! acceder! a! la! lista! de! obras! que! tenía! asignada.! ! Ilustración!2.!Pantallas!principales!del!prototipo!no!funcional! Una!vez!autenticado!se!le!mostraría!una!serie!de!obras!que!tendría!asignadas,!por!parte! del!administrador,!pudiendo!así!seleccionar!la!obra!a!la!que!deseara!acceder.! Además,!el!usuario!podía!ordenar!la!aparición!de!las!obras!según!sus!campos,!como!la! fecha,!el!nombre!o!el!identificador!de!la!misma.! Al!seleccionar!una!obra!el!empleado!tenía!la!posibilidad!de!ver!toda!la!información! relativa! a! la! obra! distribuida! en! la! vista! a! través! de! pestañas! (tareas,! ubicación! y! archivos)! totalmente!navegables.! ! ' 2.1.4. Segunda'reunión,'validación'y'acotación'de'requisitos' ! En!la!segunda!reunión,!ya!conociendo!el!contexto!del!problema!y!habiendo!trabajado! en!el!prototipo!no!funcional!pudimos!concretar!más!los!requisitos!y!perfilar!nuestra!visión!del! problema!y!una!posible!solución.!También!nos!sirvió!para!validar!los!requisitos!que!surgieron! durante!la!primera!reunión.! En!esta!segunda!reunión!surgieron,!además,!nuevos!requisitos:! • El!encargado!de!la!obra!desea!disponer!de!un!panel!de!administración!que!refleje!la! actividad!de!cada!empleado!individualmente!para!así!observar!y!evaluar!su!evolución! dentro!de!la!empresa.!
Alejandro!Pérez!Martín!|!33! ! • El!portal!de!administración,!encargado!de!la!generación!de!las!obras,!debía!poder!auto! importar!las!tareas!a!través!de!un!Excel!dado!por!la!empresa!! • El!empleado!puede!añadir!subtareas!a!una!tarea!creada!por!él.! • El!empleado!debe!poder!cambiar!el!estado!de!las!tareas!que!vaya!realizando.! • No!todas!las!tareas!tienen!por!qué!tener!subtareas.! • La!existencia!de!un!sistema!de!incidencias!que!permita!la!comunicación!entre!empleado! y!administrador!de!manera!bidireccional.! • Sería! interesante! que! la! aplicación! también! funcionara! en! entornos! sin! acceso! a! internet.! • Se!remarcó! que! en!el!diseño!final!se!podría!incluir,!para! tareas!relacionadas!con!el! tendido!del!cable,!que!la!aplicación!al!marcar!dos!tramos!de!cable!auto!calculara!la! distancia!real!utilizada.! • El! encargado! de! obras! nos! consultó! si,! para! futuras! versiones,! sería! posible! que! la! aplicación!auto!dibujara!sobre!plano!las!conexiones!a!realizar!en!la!obra!y!por!dónde! debía!pasar!el!cable!instalado.! ! 2.1.5. Especificación'final'de'requisitos'y'acotación'del'proyecto' ! En! resumen! y! como! conclusión! a! la! etapa! de! recogida! de! requisitos,! la! solución! al! problema!propuesto!por!el!encargado!de!la!empresa!instaladora!de!fibra!óptica!pasa!por!el! desarrollo!de!un!portal!de!administración!que!permita:! • Generar! obras! a! las! que! poder! asignarles! empleados,! materiales,! ficheros!adjuntos! necesarios!para!la!realización!de!la!misma!y!una!lista!de!tareas!que!pueden!contener! subtareas.!Así!como!observar!el!estado!de!realización!de!la!misma.! • Importar!tareas!a!una!obra!a!través!de!un!Excel!dado.! • Importar!material!a!una!obra!a!través!de!un!Excel!dado.! • Dar!de!alta!a!nuevos!empleados!en!la!plataforma.! • Hacer!el!seguimiento!del!rendimiento!de!los!empleados!de!manera!individual.! • Una! vez! terminada! la! obra,! y! haciendo! uso! de! la! información! aportada! por! los! empleados!a!través!de!la!aplicación,!la!herramienta!deberá!generar!una!certificación! que!permita!a!la!empresa!instaladora!facturar.! • Gestión!de!incidencias!relativas!a!la!obra!que!permitan!la!comunicación!bidireccional! entre!administrador!y!empleado.!
Alejandro!Pérez!Martín!|!34! ! Asimismo,!se!desea!el!desarrollo!de!una!aplicación!móvil!para!los!empleados!que!debe! darles!la!posibilidad!de:! • Iniciar!sesión!en!ella!y!tener!acceso!a!las!obras!que!tengan!asignadas.! • Consultar!el!estado!de!realización!de!la!misma!mediante!la!lista!de!tareas!pendientes.! • Cambiar!el!estado!de!una!tarea!perteneciente!a!la!obra.! • Adjuntar!información!relativa!a!la!realización!de!una!tarea!dentro!de!la!obra!que!permita! la!certificación!de!la!misma.! • Crear!nuevas!tareas.! • Gestión!de!incidencias!relativas!a!la!obra!que!permitan!la!comunicación!bidireccional! entre!administrador!y!empleado.! • La!aplicación!debe!ser!multiplataforma.! ! Posteriormente! a! la! segunda! reunión! y! debido! al! gran! número! de! requisitos! ya! especificados,!decidimos!acotar!qué!aspectos!abarcaría!nuestro!proyecto.!Para!ello!priorizamos! en!los!requisitos!y!casos!de!uso!más!importantes,!decidimos!generar!un!diagrama!de!casos!de! uso,!así!como!un!documento!asociado!que!nos!permitiera!visualizarlos!de!manera!más!sencilla! y!nos!garantizara!una!visión!global!del!proyecto.! ! 2.1.6. Identificación'de'actores'principales'del'sistema' ! Durante!el!proceso!de!análisis!identificamos!los!siguientes!actores!que!interactuarían!con!el! sistema.! ! Actor! Descripción! ! Administrador! Usuario!principal!del!sistema!es!capaz!de!crear!obras!y!asignar! empleados!a!ella,!además!puede!certificar!las!obras.!También! puede!dar!de!alta!a!empleados!dentro!del!sistema!a!través!del! panel!de!administración.! ! Empleado! Usuario!principal!de!la!aplicación!móvil!del!proyecto!dónde! podrá!actualizar!el!estado!de!una!obra!mediante!la!realización! de!tareas!que!tenga!asignadas.! Tabla!4.!Actores!principales!del!sistema! ' ! '
Alejandro!Pérez!Martín!|!35! ! 2.1.7. Especificación'y'diagramas'de'casos'de'uso' ! A!continuación,!mostramos!la!tabla!de!especificación!de!los!casos!de!uso!que,!a!través! de!la!etapa!de!análisis!creemos!que!deberían!cumplir!las!aplicaciones!del!proyecto!para!resolver! el!problema!en!su!totalidad. Actor!principal! Casos!de!uso! Administrador 1.!!!!!!Iniciar!sesión!en!panel!de!administración! Administrador 2.!!!!!!Crear!obra! Administrador 3.!!!!!!Gestionar!obra! 3.1.!!!!Gestionar!tareas! 3.1.1.!Añadir!tarea! 3.1.2.!Eliminar!tarea! 3.1.3.!Editar!tarea! 3.1.3.1.!Añadir!subtarea! 3.2.!!!!Importar!tarea! 3.3.!!!!Gestionar!material! 3.3.1.!Añadir!material! 3.3.2.!Eliminar!material! 3.4.!!!!Importar!material! 3.5.!!!!Gestionar!adjuntos! 3.5.1.!Añadir!adjunto! 3.5.2.!Eliminar!adjunto! 3.6.!!!!Cambiar!estado!(obra)! 3.7.!!!!Certificar!obra! Administrador 4.!!!!!!Registrar!empleados! Administrador 5.!!!!!!Gestionar!empleados! 5.1.!!!!!!Editar!empleado! 5.2.!!!!!!Eliminar!empleado! 5.3.!!!!!!Notificar!empleado! 5.4.!!!!!!Visualizar!empleado! Empleado 6.!!!!!!Iniciar!sesión!en!la!app! Empleado 7.!!!!!!Visualizar!obra! Empleado 8.!!!!!!Gestionar!archivos!adjuntos!a!tarea! 8.1.!Adjuntar!archivo!adjunto!a!tarea! 8.2.!Eliminar!archivo!adjunto!a!tarea! Empleado 9.!!!!!!Añadir!tarea!a!obra! Empleado 10.!!!!!Cambiar!estado!(tarea)! Empleado 11.!!!!!Notificar!incidencia! Tabla!5.!Tabla!de!especificación!de!los!casos!de!uso ! !Como!hemos!dicho!anteriormente,!por!cuestión!de!limitación!en!el!número!de!horas! del!TFT,!debimos!acotar!qué!casos!de!uso!no!se!iban!a!implementar!durante!el!desarrollo!del! proyecto,!estando!estos!subrayados!en!la!tabla!2.1.3.! !A!modo!de!ilustración!también!hemos!querido!añadir!el!caso!de!uso!del!administrador,! Gestionar!empleados,!aunque!la!especificación!y!diagrama!completos!puede!encontrarse!en!el! anexo!I.!
Alejandro!Pérez!Martín!|!36! ! Nombre! Gestionar!empleados! ID! 5! Creado!por! Álvaro!Romero!Perdomo! Fecha! 22/10/2016! Modif.!por! Álvaro!Romero!Perdomo! Fecha!modif.! 22/10/2016! ! Actor!principal:! ADMINISTRADOR! Personal!involucrado!o!intereses:! 1. ADMINISTRADOR:!quiere!poder!editar/borrar!empleados!del!sistema.! Descripción:! El!ADMINISTRADOR!puede!editar!la!información!de!un!empleado!ya!existente,!así!como! eliminar!el!mismo!si!fuera!necesario.!! Precondición:! El!ADMINISTRADOR!debe!estar!autenticado!y!existir!al!menos!un!empleado!a! editar/borrar!en!el!sistema.! Postcondición:! 1. La!información!del!empleado!queda!actualizada.! 2. El!empleado!queda!eliminado!del!sistema.! Flujo!normal:! 1. El!ADMINISTRADOR!accede!al!portal!de!administración.! 2. El!ADMINISTRADOR!accede!a!la!vista!de!los!empleados.! 3. El!ADMINISTRADOR!selecciona!el!empleado!que!desea!gestionar.! a. Editar!empleado!(5.1).! b. Borrar!empleado!(5.2).! c. Notificar!empleado!(5.3).! d. Visualizar!empleado!(5.4).! Flujo!alternativo:! Tabla!6.!Tabla!de!especificación!del!caso!de!uso!"Gestionar!empleados"! ' '
Alejandro!Pérez!Martín!|!37! ! 2.2. Diseño' ! La!etapa!de!diseño!se!describe!como!el!proceso!de!aplicar!distintas!técnicas!y!principios! con!el!propósito!de!definir!un!dispositivo,!proceso!o!sistemas!con!los!suficientes!detalles!como! para!permitir!su!desarrollo.!El!objetivo!del!diseñador!es!producir!un!modelo!o!representación! de!una!entidad!que!será!construida!más!adelante.!! ! 2.2.1. Componentes'del'sistema' ! Durante! la! fase! de! análisis! identificamos! dos! grandes! módulos! software! que! comprenderían! el! proyecto,! por! un! lado,! el! portal! de! administración! y! por! otro! lado! una! aplicación!móvil.!Estos!dos!módulos!estarían!alimentados!de!una!única!base!de!datos!y!ambos! harían!labores!de!lectura!y!escritura!sobre!la!misma,!por!lo!que!decidimos!que!se!hacía!necesaria! la! creación! de! una! API! REST! utilizando! para! ello! el! stack! MEAN.! De! este! modo! también! cubriríamos!la!necesidad!de!aprendizaje!de!nuevas!tecnologías!de!desarrollo!web!que!teníamos! para!este!proyecto.! De!esta!manera!definimos!para!el!proyecto!una!arquitectura!cliente-servidor.! Esta!arquitectura!se!divide!en!dos!partes!claramente!diferenciadas,!la!primera!es!la!parte! del!servidor!y!la!segunda!la!de!un!conjunto!de!clientes!(siendo!dos!los!clientes!en!este!caso:!! portal!de!administración!y!aplicación!para!empleados).!! Normalmente!el!servidor!es!una!máquina!bastante!potente!que!actúa!de!depósito!de! datos!y!funciona!como!un!sistema!gestor!de!base!de!datos!(SGBD).!! Por!otro!lado,!los!clientes!suelen!ser!estaciones!de!trabajo!que!solicitan!varios!servicios! al!servidor.!! Ambas!partes!deben!estar!conectadas!entre!sí!mediante!una!red.! En!la!ilustración!3!se!muestra!una!representación!gráfica!de!este!tipo!de!arquitectura:! ! Ilustración!3.!Representación!gráfica!de!una!arquitectura!cliente-servidor! ! El! cliente! realiza! peticiones! a! un! servidor! y! éste! le! responde! ofreciéndole! un! determinado!servicio.!
Alejandro!Pérez!Martín!|!38! ! ! 2.2.2. Utilización'del'patrón'de'diseño'Modelo'–'Vista'–'Controlador'(MVC)' ! Desde!el!principio!de!la!etapa!de!diseño!decidimos!que!íbamos!a!construir!tanto!el!portal! de!administración!como!la!aplicación!destinada!a!los!empleados.!Para!ello,!se!haría!uso!del!stack! MEAN,! por! lo! que! para! el! lado! del! cliente! construiríamos! las! aplicaciones! en! AngularJS! implementando! éste! el! patrón! de! diseño! Model! View! Controller! (MVC)! en! el! desarrollo! de! aplicaciones!web.! En! el! siguiente! diagrama! podemos! observar! la! interacción! entre! los! diferentes! componentes.! ! Ilustración!4.!Interacción!de!componentes!con!AngularJS! ' 2.2.3. Desarrollo'híbrido'con'Ionic' ! Para! el! desarrollo! de! la! aplicación! móvil! decidimos! optar! por! un! desarrollo! híbrido! porque,!aparte!de! permitirnos!cumplir!los!requisitos!del! proyecto!(compatibilidad!en!varios! dispositivos),!cubríamos!así!la!necesidad!de!aprendizaje!del!desarrollo!de!aplicaciones!móviles.! Además,!consideramos! que! el! aprendizaje! de! las! tecnologías! web! sería! mucho! más! rápido!que!el!aprendizaje!de!tecnologías!necesarias!para!el!desarrollo!nativo!de!las!aplicaciones,! por!lo!que!éste!fue!un!motivo!más!que!nos!hizo!decidirnos!por!un!desarrollo!híbrido!para!la! aplicación!móvil.! !
Alejandro!Pérez!Martín!|!39! ! 2.2.4. Estructura'y'entidades'de'la'base'de'datos' ! Las!bases!de!datos!en!MongoDB!están!formadas!por!esquemas!en!lugar!de!por!tablas! como! en! una! base! de! datos! relacional! común! como! puede! ser! MySQL.!Siguiendo! esta! nomenclatura!y!a!través!del!siguiente!diagrama,!nuestra!base!de!datos!está!formada!por!los! siguientes!esquemas.! ! ! Ilustración!5.!Diagrama!de!entidades!de!la!base!de!datos! ! Aunque!en!un!principio!no!nos!lo!habíamos!planteado,!decidimos!incluir!en!la!base!de! datos!el!esquema!Equipment,!de!manera!que!el!sistema!pudiera!almacenar!el!material!que!se! iba!añadiendo!a!las!diferentes!obras!y!éste!podría!ser!reutilizado,!ya!que!se!repetía!con!bastante! frecuencia!entre!las!diferentes!obras.! !Debemos!añadir!que!el!driver!Mongoose!para!Node.js!facilitó!en!gran!medida!la!labor! de!conexión!con!la!base!de!datos,!permitiéndonos!trabajar!en!un!entorno!mucho!más!cercano! a!la!orientación!de!objetos!y!haciendo!que!la!traducción!en!la!base!de!datos!fuera!instantánea.! ! 2.2.5. Arquitectura'del'portal'de'administración'en'AngularJS' ! Como!hemos!comentado!anteriormente,!decidimos!desarrollar!el!proyecto!bajo!MEAN! Stack!por!lo!que!implementamos!el!panel!de!administración!como!una!aplicación!en!AngularJS! que!se!conectaba!a!una!API!construida!en!Node.js.! ! !
Alejandro!Pérez!Martín!|!40! ! Antes! de! comenzar! a! trabajar! con! Angular,! decidimos! cómo! íbamos! a! organizar! la! aplicación!y!qué!responsabilidades!iba!a!tener!cada!fichero.!Para!ello,!consultamos!las!formas! más!comunes!en!las!que!se!suelen!dividir!las!aplicaciones!en!AngularJS!y!escogimos!el!Patrón! Específico,!que!se!puede!observar!a!continuación!y!que!se!caracteriza!por!separar!los!servicios!y! los!controladores!de!un!mismo!elemento!en!distintas!carpetas,!consiguiendo!así!una!separación! a!su!vez!de!las!responsabilidades!de!cada!fichero.! ! Ilustración!6.!Jerarquía!de!ficheros!de!una!aplicación!en!AngularJS! !
Alejandro!Pérez!Martín!|!41! ! 2.3. Implementación ! ! Es!el!proceso!de!instalar!equipos!o!software!nuevo,!como!resultado!de!un!análisis!y! diseño!previo!como!resultado!de!la!situación!o!mejoramiento!de!la!forma!de!llevar!a!cabo!un! proceso! automatizado.! Al! implementar! un! sistema! lo! primero! que! debemos! hacer! es! asegurarnos!qué!el!sistema!sea!operacional!o!que!funcione!de!acuerdo!a!los!requerimientos!del! análisis!y!permitir!que!los!usuarios!puedan!operarlos.! Antes! de! comenzar! la! etapa! de! implementación! decidimos! dividirla! en! tres! grandes! módulos:! 1. Desarrollo!de!API!REST!en!MongoDB!y!Node.js!que!permita!el!almacenamiento!de!los! datos!y!el!intercambio!de!información!entre!las!diferentes!aplicaciones.! 2. Desarrollo!de!un!panel!de!administración!que!permita!la!generación!de!obras,!tareas,! empleados!y!material!asociado.! 3. Desarrollo!de!una!aplicación!móvil!que!permita!a!los!empleados!la!consulta!de!la!obra! que!tengan!asignada,!así!como!el!envío!de!información!relativa!a!las!tareas.! En!este!módulo!vamos!a!tratar,!sobre!todo,!el!desarrollo!de!la!API!REST!y!el!panel!de! administración.! Habiendo! sido! el! primero! de! los! dos! desarrollado! de! manera! conjunta! y! el! segundo!de!manera!individual.! En!la!primera!etapa!del!desarrollo!comenzamos!con!la!configuración!del!servidor!de! Node.js!para! la! API! REST! y! la! creación! de! la! base! de! datos.! Veremos! cómo! generamos! las! entidades!y!sus!campos!en!MongoDB!a!través!de!su!driver!para!Node.js,!Mongoose.!También! mostraremos!la!respuesta!de!nuestra!API!REST!siendo!sometida!a!interrogaciones!HTTP.! En! la! segunda! etapa! del! desarrollo! y! ya! con! la! API!REST!operativa,! pasamos! a! la! implementación!de!la!aplicación!móvil,!dividida,!fundamentalmente,!en!tres!partes:! 1. Sistema!de!control!de!usuarios!(login!y!logout).! 2. Visualización!del!contenido!de!la!base!de!datos!(listado!de!obras!asignadas,!directorio! de!empleados,!detalle!de!la!obra).! 3. Gestión!del!contenido!en!la!base!de!datos!(edición!de!obras!asignadas).! ! !
Alejandro!Pérez!Martín!|!48! ! 2.3.2. Desarrollo'de'la'aplicación'móvil' ! Una!vez!creados!los!servicios!de!la!API!necesarios!comenzamos!con!el!desarrollo!de!la! aplicación!móvil!de!los!trabajadores,!que!les!permitirá!acceder!a!la!información!de!las!obras!que,! previamente!creadas!a!través!del!panel!de!administración,!tengan!asignadas,!así!como!modificar! su!información!en!pro!de!cumplimentar!la!mayor!cantidad!de!datos!posible.!Como!hemos!dicho! anteriormente!este!trabajo!se!centra!en!específico!en!el!desarrollo!tanto!de!la!API!REST,!ya! descrito,!como!en!el!desarrollo!de!la!aplicación!móvil.! ! Estructura'inicial'y'vista'principal,'el'Dashboard! ' Tras!una!segunda!reunión!y!gracias!a!la!demo!no!funcional!propuesta,!identificamos!que,! para!el!usuario!final!de!la!aplicación,!la!información!más!relevante!al!acceder!a!la!aplicación! debía! ser! la! relativa! a! las! obras! que! el! propio! empleado! tuviera! asignadas,! por! lo! que! se! estableció!esta!vista!como!la!principal!de!la!aplicación.!! Para!su!desarrollo!y!siguiendo!la!estructura!proporcionada!por!el!cliente!de!terminal!de! Ionic,!se! comenzó! generando! las! distintas! páginas/pantallas! que! compondrían! la! aplicación.! Siguiendo!las!directrices!de!la!Ingeniería!del!Software,!concretamente!del!desarrollo!basado!en! componentes,!y!el!código!limpio,!se!crearon!diversos!directorios!donde!irán!situados!cada!uno! de! los! ficheros! correspondientes! a! cada! página.! A! continuación,! mostramos! la! jerarquía! de! ficheros!final!resultante:! ! Ilustración!14.!Jerarquía!de!ficheros!de!la!aplicación!móvil! !
Alejandro!Pérez!Martín!|!49! ! Dentro!de!la!carpeta!src/pages/dashboard!y!al!igual!que!en!el!resto!de!carpetas!de!las! páginas,!encontraremos!un!archivo!TypeScript!(.ts)!que!contendrá!toda!la!lógica!de!página,!así! como!sus!estilos!en!Sass!(archivo!.scss)!y!la!plantilla!del!componente!en!HTML!(archivo!.html).! ' Ilustración!15.!Jerarquía!de!ficheros!de!la!página!principal!de!la!aplicación! ! ' Modelos'de'datos' ' Aprovechando!una!de!las!características!de!TypeScript!como!es!el!tipado!de!datos,!se!han! creado!distintos!modelos!de!datos!utilizados!en!distintos!puntos!de!la!aplicación!con!el!fin!de! detectar!errores!de!código!en!tiempo!de!compilación!y!así!evitarlos!durante!la!ejecución!de!la! aplicación.!A!continuación,!se!muestra!un!ejemplo!de!uno!de!los!modelos!de!datos!definidos. ' ! Ilustración!16.!Modelo!de!datos!del!tipo!‘Obra’! ! Servicios'y'conexión'a'la'API' ' Los! servicios! utilizados! por! los! distintos! componentes! de! la! aplicación! albergan! la! responsabilidad!de!conexión!a!la!API!y!por!lo!tanto!el!acceso!a!la!base!de!datos.!Estos!servicios! son!inyectados!haciendo!uso!del!patrón!de!inyección!de!dependencias!(DI)!a!cada!uno!de!los!
Alejandro!Pérez!Martín!|!50! ! componentes.! A! continuación,! podemos! observar! un! fragmento! del! fichero! del! servicio! encargado!de!la!conexión!con!la!información!relativa!a!las!obras!en!la!API,!work.service.ts.! ! Ilustración!17.!Fichero!work.service.ts! ! Como!podemos!observar!el!fichero!guarda!gran!similitud!con!la!interfaz!descrita!por!la!API.! Una!vez!creados!los!métodos!de!acceso!a!los!servicios,!sólo!tendríamos!que!instanciarlos!y! suscribirnos!a!los!mismos!para!obtener!las!respuestas!enviadas!por!la!API.!! En!nuestro!caso,!hacemos!uso!del!servicio!de!las!obras!desde!la!página!principal!de! la! aplicación!para!mostrar!el!listado!completo!de!obras!asignadas!al!empleado.!! A!modo!de!ejemplo!mostramos!la!instanciación!y!suscripción!al!servicio!a!través!del!método! fetchWorks().!
Alejandro!Pérez!Martín!|!51! ! ! Ilustración!18.!Fichero!dashboard.ts! ' Proceso'de'Login!'y'autenticación'en'el'panel'de'administración' ' Una!vez!implementada!la!página!principal,!la!tarea!más!relevante!a!acometer!consistiría! en!desarrollar!el!control!de!acceso!a!la!misma.! Para!ello!generamos!una!vista!de!nombre!login,!que!se!mostraría!antes!que!la!pantalla! principal!y!sería!la!encargada!de!obtener!los!datos!necesarios!para!autenticar!al!usuario!en!el! sistema!y,!por!ende,!tener!acceso!a!los!servicios!de!la!API.! ' Notificaciones'Push' ' Una!funcionalidad!bastante!útil!es!la!incorporación!de!notificaciones!Push,!que!no!son! más!que!mensajes!directos!a!los!dispositivos!móviles!que!tengan!instalada!la!aplicación.!Para! ello,!se!ha!hecho!uso!del!servicio!de!notificaciones!Firebase!Cloud!Messaging!de!Google.!! Algunos!de!los!usos!de!este!servicio!podrían!ser!por!ejemplo!la!notificación!de!cambios!en! una!obra!o!enviar!un!aviso!urgente!a!todos!los!empleados.!En!las!siguientes!capturas!puede! verse!un!ejemplo!de!este!tipo!de!notificaciones:!
Alejandro!Pérez!Martín!|!52! ! !! ! Ilustración!19.!Ejemplo!de!recepción!de!notificaciones!push! ! Documentación'del'código' ' Con!el!objetivo!de!mejorar!la!documentación!del!código!y!con!la!ventaja!de!usar!Github! como!servicio!de!hospedaje!de!nuestro!código,!hemos!hecho!uso!de!Codacy,!que!ofrece!análisis! de! código,! documentación! y! estilo! del! proyecto.! Los! resultados! obtenidos! se! muestran! a! continuación.! ! Ilustración!20.!Captura!del!resumen!de!análisis!de!código!hecho!con!Codacy! !
Alejandro!Pérez!Martín!|!53! ! Además!de!Codacy,!se!ha!incorporado!documentación!de!la!aplicación!móvil!del!proyecto! con!la!herramienta!Compodoc,!que!genera!de!forma!automática!un!resumen!de!los!distintos! componentes!de!la!aplicación!haciendo!uso!de!los!comentarios!incluidos!en!el!código!durante! el!desarrollo.!En!nuestro!caso!se!ha!obtenido!un!porcentaje!del!100%!en!cuanto!al!alcance!de!la! documentación!del!código,!el!cual!se!ha!realizado!siguiendo!las!directrices!del!estándar!JSDoc.! ! Ilustración!21.!!Captura!del!resumen!del!alcance!de!los!comentarios!hecho!con!Compodoc! ! !
Alejandro!Pérez!Martín!|!54! ! 2.4. Pruebas' ! En!todo!proceso!de!desarrollo!de!software!es!necesario!una!etapa!consistente!en!el!testeo! o!verificación!del!correcto!funcionamiento!de!la!aplicación!que!se!esté!desarrollando.!En!nuestro! caso!decidimos!testear!funcionamiento!de!la!API!en!el!acceso!a!la!base!de!datos!y!operaciones! sobre!la!misma!(creación,!actualización!y!eliminación),!para!ello!utilizamos!una!librería!llamada! Mocha!que!nos!facilita!la!ejecución!de!tests!unitarios!asíncronos.! Antes!de!poder!utilizar!la!librería!Mocha!hizo!falta!la!instalación!del!paquete!should,!que! permite!la!utilización!de!directivas!de!tipo!assert!para!la!verificación!de!los!datos!obtenidos!de! la!consulta!a!la!base!de!datos.! A! modo! de! ejemplo! hemos! decidido! adjuntar! el! fichero! encargado! de! comprobar! el! correcto! funcionamiento! de! las! operaciones! de! inserción,!actualización! y! eliminación! de! usuarios!dentro!de!la!base!de!datos.! ! Ilustración!22.!Ejemplo!del!test!de!creación!de!un!usuario ! Debido!a!que!a!la!hora!de!ejecutar!los!tests!se!producen!operaciones!sobre!la!base!de! datos,!decidimos!hacer!éstas!sobre!una!base!de!datos!destinada!a!los!tests.!De!esta!manera! nos!aseguramos!de!que!no!se!pierden!o!modifican!datos!en!el!proceso!de!comprobación.!! !! A!través!del!terminal,!ejecutamos!los!tests!relativos!a!las!operaciones!con!usuarios! obteniendo!la!siguiente!respuesta!en!consola. ''
Alejandro!Pérez!Martín!|!55! ! ! Ilustración!23.!Captura!de!los!resultados!de!las!pruebas!unitarias! ! !
Alejandro!Pérez!Martín!|!56! ! 3. Bloque'3.'Conclusiones'y'Trabajos'Futuros' ' 3.1. Conclusiones'y'trabajos'futuros' ! Como! colofón,! en! este! bloque! comentaremos,! qué! ha! supuesto! para! nosotros! el! desarrollo!del!proyecto,!si!hemos!cumplido!nuestras!expectativas!formativas,!y!qué!conclusiones! extraemos!del!trabajo!en!equipo!derivado!de!la!compartición!del!proyecto!entre!dos!alumnos.! Finalmente,!indicaremos!qué!funcionalidades!han!quedado!pendientes!de!desarrollar!a! causa!de!la!limitación!temporal!y!una!batería!de!propuestas!de!mejora!a!tener!en!cuenta!en! futuras!iteraciones!del!desarrollo.! ! 3.1.1. Conclusiones'sobre'el'desarrollo'del'proyecto' ! En! líneas! generales,! puedo! decir! que! estoy! satisfecho! con! el! trabajo! desarrollado.! Inicialmente!no!contaba!con!experiencia!previa!en!desarrollos!similares,!aunque!sí!partía!con! nociones!básicas!en!algunas!de!las!tecnologías!empleadas,!por!lo!que!ha!supuesto!un!gran!reto! el!haber!llegado!a!hasta!este!punto!de!consecución.! Además,!me!ha!ayudado!a!reforzar!los!conocimientos!adquiridos!durante!la!carrera!ya! que! he!podido! participar!en! todas! las! etapas! del! desarrollo! de! un! producto! software,! iniciándome!con!el!análisis,!captación!de!requisitos,!diseño!e!implementación!(tanto!back-end! como!front-end),!hasta!terminar!con!la!documentación.!Todo!esto!ha!resultado!más!sencillo!e! interesante! al! contar! con! un! problema! real! de! un! cliente! con! el! que! hemos! tenido! que! interactuar! durante! las! diversas! etapas! del! desarrollo,! lo! cual! ha! proporcionado! un! primer! acercamiento!a!lo!que!podría!ser!un!futuro!entorno!laboral.! A!todo!esto!hay!que!añadir!el!aprendizaje!de!nuevas!tecnologías!que!a!día!de!hoy!tienen! gran!peso!en!el!marco!del!desarrollo!software,!como!por!ejemplo!el!framework!Angular,!del!cuál! he!podido!ver!su!evolución!ya!que!el!desarrollo!de!la!aplicación!se!inició!con!su!versión!inicial,! AngularJS/Angular!1,!y!luego!fue!migrado!a!su!versión!más!reciente,!Angular!4.!Esta!migración,! aunque!exitosa,!supuso!un!gran!esfuerzo!de!implementación!y!aprendizaje!debido!a!las!más!que! notables!diferencias!entre!ambas!versiones.! En!definitiva,!estoy!orgulloso!del!resultado!final!del!trabajo!y!más!aún!de!las!nuevas! habilidades!que!me!ha!otorgado!el!desarrollo!del!mismo.!! '
Alejandro!Pérez!Martín!|!57! ! Conclusiones'derivadas'de'la'compartición'del'trabajo'fin'de'título' ! Respecto! al! trabajo! en! equipo,! ha! sido! de! gran! ayuda! contar! con! el! apoyo! de! mi! compañero,!que!durante!las!distintas!fases!del!desarrollo!ha!sido!resolutivo!con!las!diferentes! dudas!que!han!surgido,!además!de!aportar!otro!punto!de!vista!ante!la!resolución!de!problemas! a!los!que!nos!hemos!enfrentado.! En!cuanto!a!lo!más!interesante!de!esta!experiencia!de!trabajo!en!equipo,!a!mi!parecer,! ha!sido!el!manejo!del!control!de!versiones!Git!con!GitHub,!con!el!que!no!había!tenido!experiencia! en!trabajos!colaborativos!y!del!que!hemos!aprovechado!la!mayoría!de!funcionalidades!ofrecidas! de!cara!a!la!gestión!de!tareas,!como!es!el!caso!de!las!‘Issues’,!que!nos!han!sido!de!gran!ayuda!a! la!hora!de!gestionar!las!tareas!a!desarrollar,!documentar!errores!y!nuevas!funcionalidades,!así! como!llevar!un!control!de!la!evolución!de!las!mismas.! Además!de!esto!y!debido!a!la!diferencia!de!los!sistemas!operativos!que!empleamos!para! el!desarrollo,!hemos!hecho!uso!de!una!de!las!tecnologías!que!más!suenan!hoy!en!día!como!es! Docker,!lo!cual!nos!ha!permitido!contar!con!un!entorno!de!trabajo!homogéneo!e!independiente! del!sistema!utilizado.! Para! finalizar,! quiero! agradecer! tanto! a! mi! compañero! como! a! los! tutores! la! ayuda! prestada!durante!toda!las!fases!de!realización!del!proyecto,!que!sin!ella,!habría!sido!mucho!más! difícil!haber!podido!finalizarlo.! ! Resultados'obtenidos' ! En!este!apartado!haremos!un!breve!recorrido!por!los!objetivos!propuestos!para!este! proyecto!y!veremos!si!estos!se!han!visto!cubiertos!de!manera!satisfactoria.! Como! citamos! en! el! apartado! de! objetivos! del! proyecto,! la! comunicación! entre! los! empleados!de!las!obras!y!el!administrador!de!las!mismas!se!realizaba!de!manera!poco!ortodoxa,! resultando,!en!muchos!casos!en!errores!en!la!transmisión!de!la!información!o!en!la!pérdida!de! la!misma.!Con!la!creación!de!la!aplicación!para!los!empleados!de!las!obras,!este!objetivo!se!ha! visto!cubierto!ya!que!permite!al!empleado!guardar!información!de!las!tareas!que!vaya!realizando! en!una!obra!de!manera!inmediata!y!eficaz.! Además,!mediante!la!creación!de!un!panel!de!administración,!el!encargado!de!la!obra! puede!visualizar!en!todo!momento!el!estado!actual!de!la!obra!y!asignar!de!manera!efectiva! empleados!a!una!determinada!obra.! Todo!esto!ha!supuesto!un!avance!para!la!empresa!encargada!de!la!instalación!de!la!fibra! óptica,! tanto! en! la! manera! de! comunicarse! internamente! con! sus! empleados! como! en! la! capacidad!de!certificación!de!las!obras!una!vez!éstas!han!finalizado,!no!dando!lugar!a!pérdidas! de!información!que!perjudicaran!la!certificación!de!la!obra!y,!por!lo!tanto,!su!facturación!por! parte!de!la!empresa!instaladora.! !
Alejandro!Pérez!Martín!|!64! ! Nombre! Gestionar!tareas! ID! 3.1! Creado!por! Álvaro!Romero!Perdomo! Fecha! 27/01/2017! Modif.!por! Álvaro!Romero!Perdomo! Fecha!modif.! 27/01/2017! ! Actor!principal:! ADMINISTRADOR! Personal!involucrado!o!intereses:! 1. ADMINISTRADOR:!quiere!poder!gestionar!las!tareas!de!una!obra.! Descripción:! El!ADMINISTRADOR!puede!crear,!editar!o!eliminar!tareas!pertenecientes!a!una!obra!a! través!del!diálogo!de!gestionar!tarea!o!en!el!momento!de!creación!de!la!obra.! Precondición:! El!ADMINISTRADOR!debe!estar!autenticado!y!la!obra!debe!estar!creada!previamente!o! estar!el!ADMINISTRADOR!en!el!formulario!de!creación!de!obras.! Postcondición:! La!información!de!la!obra!relativa!a!la!tarea!se!modifica!en!la!base!de!datos.! Flujo!normal:! 1. El!ADMINISTRADOR!se!encuentra!en!el!formulario!de!creación/edición!de!obras.! 2. El!ADMINISTRADOR!pulsa!sobre!el!botón!“Añadir!tarea”.! 3. El!ADMINISTRADOR!completa!los!campos!del!formulario!requeridos.! 4. El!ADMINISTRADOR!pulsa!el!botón!“Aceptar”!y!la!tarea!es!añadida!a!la!lista!de!tareas.! a. Los!pasos!2-4!pueden!repetirse!tantas!veces!como!tareas!necesite!añadir!el! ADMINISTRADOR.! 5. El!ADMINISTRADOR!puede!editar!esa!tarea!si!lo!desea,!eliminarla!o!continuar!si!lo! prefiere.! 6. El!ADMINISTRADOR!pulsa!el!botón!“Siguiente”!y!es!dirigido!al!siguiente!paso!del! formulario!de!creación!de!obras.! Flujo!alternativo:! 3.a.!Errores!de!validación!de!campos:! 3.a.1.!Se!muestra!un!mensaje!de!error!al!ADMINISTRADOR!a!través!de!la!interfaz.! Tabla!10.!Gestionar!tareas! ! !
Alejandro!Pérez!Martín!|!65! ! Nombre! Añadir!tarea! ID! 3.1.1! Creado!por! Alejandro!Pérez!Martín! Fecha! 22/10/2016! Modif.!por! Álvaro!Romero!Perdomo! Fecha!modif.! 27/01/2017! ! Actor!principal:! ADMINISTRADOR! Personal!involucrado!o!intereses:! 1. ADMINISTRADOR:!quiere!añadir!tareas!a!una!obra.! Descripción:! El!ADMINISTRADOR!mediante!el!formulario!de!creación/edición!de!obras!añade!tareas!a!la! misma.! Precondición:!El!ADMINISTRADOR!debe!estar!autenticado!y!la!obra!debe!estar!creada! previamente!o!estar!el!ADMINISTRADOR!en!el!formulario!de!creación!de!obras.! Postcondición:! La!tarea!se!añade!a!la!obra!y!se!modifica!en!la!base!de!datos.! Flujo!normal:! 1. El!ADMINISTRADOR!se!encuentra!en!el!formulario!de!creación!de!obras!o!en!el!de!edición! de!obras.! 2. El!ADMINISTRADOR!pulsa!sobre!el!botón!“Añadir!tarea”.! 3. El!ADMINISTRADOR!completa!los!campos!del!formulario!requeridos.! 4. El!ADMINISTRADOR!pulsa!el!botón!“Aceptar”!y!la!tarea!es!añadida!a!la!lista!de!tareas.! a. Los!pasos!2-4!pueden!repetirse!tantas!veces!como!tareas!necesite!añadir!el! ADMINISTRADOR.! 5. El!ADMINISTRADOR!pulsa!el!botón!“Siguiente”!y!es!dirigido!al!siguiente!paso!del! formulario!de!creación!de!obras.! Flujo!alternativo:! 3.a.!Errores!de!validación!de!campos:! 3.a.1.!Se!muestra!un!mensaje!de!error!al!ADMINISTRADOR!a!través!de!la!interfaz.! Tabla!11.!Caso!de!uso:!Añadir!tarea! ! !
Alejandro!Pérez!Martín!|!66! ! Nombre! Eliminar!tarea! ID! 3.1.2! Creado!por! Álvaro!Romero!Perdomo! Fecha! 27/01/2017! Modif.!por! Álvaro!Romero!Perdomo! Fecha!modif.! 09/02/2017! ! Actor!principal:! ADMINISTRADOR! Personal!involucrado!o!intereses:! 1. ADMINISTRADOR:!quiere!eliminar!tareas!de!una!obra.! Descripción:! El!ADMINISTRADOR!mediante!el!formulario!de!creación!o!edición!de!obras!elimina!tareas! de!la!misma.! Precondición:! El!ADMINISTRADOR!debe!estar!autenticado!y!la!obra!debe!estar!creada!previamente!o! estar!el!ADMINISTRADOR!en!el!formulario!de!creación/edición!de!obras.! Postcondición:! La!tarea!se!elimina!de!la!obra!en!la!base!de!datos.! Flujo!normal:! 1. El!ADMINISTRADOR!se!encuentra!en!el!formulario!de!creación/edición!de!obras.! 2. El!ADMINISTRADOR!pulsa!sobre!el!botón!“Eliminar!tarea”.! 3. El!ADMINISTRADOR!pulsa!el!botón!“Confirmar”!y!la!tarea!es!eliminada!de!la!base!de!datos.! Flujo!alternativo:! ! Tabla!12.!Caso!de!uso:!Eliminar!tarea! ! !
Alejandro!Pérez!Martín!|!67! ! Nombre! Editar!tarea! ID! 3.1.3! Creado!por! Álvaro!Romero!Perdomo! Fecha! 27/01/2017! Modif.!por! Álvaro!Romero!Perdomo! Fecha!modif.! 27/01/2017! ! Actor!principal:! ADMINISTRADOR! Personal!involucrado!o!intereses:! 1. ADMINISTRADOR:!quiere!editar!tareas!de!una!obra.! Descripción:! El!ADMINISTRADOR!mediante!el!formulario!de!edición!de!tareas!edita!tareas!de!una!obra.! Precondición:! El!ADMINISTRADOR!debe!estar!autenticado!y!la!obra!debe!estar!creada!previamente!o! estar!el!ADMINISTRADOR!en!el!formulario!de!creación/edición!de!obras.! Postcondición:! La!tarea!asignada!a!una!obra!se!elimina!de!la!base!de!datos.! Flujo!normal:! 1. El!ADMINISTRADOR!se!encuentra!en!el!formulario!de!creación!de!obras!o!edición!de! obras.! 2. El!ADMINISTRADOR!pulsa!sobre!el!botón!“Editar!tarea”.! 3. El!ADMINISTRADOR!edita!los!campos!de!la!tarea!en!el!formulario!que!se!muestra.! 4. El!ADMINISTRADOR!pulsa!el!botón!“Aceptar”!y!la!tarea!es!editada.! Flujo!alternativo:! ! Tabla!13.!Caso!de!uso:!Editar!tarea !
Alejandro!Pérez!Martín!|!68! ! Nombre! Añadir!subtarea! ID! 3.1.3.1! Creado!por! Álvaro!Romero!Perdomo! Fecha! 27/01/2017! Modif.!por! Álvaro!Romero!Perdomo! Fecha!modif.! 09/02/2017! ! Actor!principal:! ADMINISTRADOR! Personal!involucrado!o!intereses:! 1. ADMINISTRADOR:!quiere!añadir!subtareas!a!una!tarea.! Descripción:! El!ADMINISTRADOR!mediante!el!formulario!de!edición!de!tareas!añade!subtareas!a!la! misma.! Precondición:! El!ADMINISTRADOR!debe!estar!autenticado!el!sistema!y!encontrarse!en!el!formulario!de! creación/edición!de!tareas.! Postcondición:! La!subtarea!se!añade!a!la!tarea!y!se!modifica!en!la!base!de!datos.! Flujo!normal:! 1. El!ADMINISTRADOR!se!encuentra!en!el!formulario!de!creación!de!obras!o!en!el!de!edición! de!obras.! 2. El!ADMINISTRADOR!pulsa!sobre!el!botón!“Editar!tarea”.! 3. El!ADMINISTRADOR!pulsa!sobre!el!botón!“Añadir!subtarea”.! 4. El!ADMINISTRADOR!selecciona!de!un!desplegable,!entre!los!tipos!de!subtareas!presentes! en!la!base!de!datos,!la!subtarea!a!añadir.! a. Los!pasos!3!y!4!pueden!repetirse!tantas!veces!como!subtareas!necesite!añadir!el! ADMINISTRADOR.! 5. El!ADMINISTRADOR!pulsa!el!botón!“Finalizar”!y!termina!la!edición!de!la!tarea.! Flujo!alternativo:! ! Tabla!14.!Caso!de!uso:!Añadir!subtarea! ! ! ! ! !
Alejandro!Pérez!Martín!|!69! ! Nombre! Importar!tareas! ID! 3.2! Creado!por! Alejandro!Pérez!Martín! Fecha! 22/10/2016! Modif.!por! Alejandro!Pérez!Martín! Fecha!modif.! 22/10/2016! ! Actor!principal:! ADMINISTRADOR! Personal!involucrado!o!intereses:! 1. ADMINISTRADOR:!quiere!importar!tareas!a!una!obra.! Descripción:! El!ADMINISTRADOR!mediante!el!formulario!de!creación!o!edición!de!obras!importa!tareas! a!la!misma.! Precondición:! El!ADMINISTRADOR!debe!estar!autenticado!y!la!obra!debe!estar!creada!previamente!o! estar!el!ADMINISTRADOR!en!el!formulario!de!creación!de!obras.! Postcondición:! La!información!de!la!obra!se!modifica!en!la!base!de!datos.! Flujo!normal:! 1. El!ADMINISTRADOR!se!encuentra!en!el!formulario!de!creación!de!obras.! 2. El!ADMINISTRADOR!pulsa!sobre!el!botón!“Importar!tareas”.! 3. El!ADMINISTRADOR!selecciona!un!archivo!Excel!(.xls!o!<.csv)!de!su!equipo!donde!se! encuentran!las!tareas!que!quiere!importar.! 4. El!sistema!analiza!el!archivo!y!automáticamente!añade!las!tareas!encontradas!a!la!lista!de! tareas.! 5. El!ADMINISTRADOR!puede!seguir!añadiendo!tareas!como!se!describe!en!el!caso!de!uso! “3.1.1.!Añadir!tareas”.! 6. El!ADMINISTRADOR!pulsa!el!botón!“Siguiente”!y!es!dirigido!al!siguiente!paso!del! formulario!de!creación/edición!de!obras.! Flujo!alternativo:! 1.a.!El!ADMINISTRADOR!accede!al!portal!web!y!pulsa!sobre!una!de!las!obras!para!editar! sus!tareas.! 3.a.!Errores!de!validación!de!campos:! 3.a.1.!Se!muestra!un!mensaje!de!error!al!ADMINISTRADOR!a!través!de!la!interfaz.! Tabla!15.!Caso!de!uso:!Importar!tareas! ! !
Alejandro!Pérez!Martín!|!70! ! Nombre! Gestionar!material! ID! 3.3! Creado!por! Álvaro!Romero!Perdomo! Fecha! 27/01/2017! Modif.!por! Álvaro!Romero!Perdomo! Fecha!modif.! 09/02/2017! ! Actor!principal:! ADMINISTRADOR! Personal!involucrado!o!intereses:! 1. ADMINISTRADOR:!quiere!gestionar!el!material!de!una!obra.! Descripción:! El!ADMINISTRADOR!mediante!el!formulario!de!creación!o!edición!de!obras!edita!el! material!de!la!misma.! Precondición:! El!ADMINISTRADOR!debe!estar!autenticado!y!la!obra!debe!estar!creada!previamente!o! estar!el!ADMINISTRADOR!en!el!formulario!de!creación!de!obras.! Postcondición:! La!información!del!material!de!la!obra!se!modifica!en!la!base!de!datos.! Flujo!normal:! 1. El!ADMINISTRADOR!se!encuentra!en!el!formulario!de!creación!o!edición!de!obras.! 2. El!ADMINISTRADOR!accede!al!módulo!de!gestión!de!materiales!dónde!puede!eliminar! material!existente!o!añadir!material!nuevo.! 3. El!ADMINISTRADOR!pulsa!el!botón!“Finalizar”!y!la!información!de!la!obra!se!almacena!en! la!base!de!datos.! Flujo!alternativo:! ! Tabla!16.!Caso!de!uso:!Gestionar!material! ! ! ! ! ! ! !
Alejandro!Pérez!Martín!|!71! ! Nombre! Añadir!material! ID! 3.3.1! Creado!por! Alejandro!Pérez!Martín! Fecha! 22/10/2016! Modif.!por! Alejandro!Pérez!Martín! Fecha!modif.! 22/10/2016! ! Actor!principal:! ADMINISTRADOR! Personal!involucrado!o!intereses:! 1. ADMINISTRADOR:!quiere!añadir!material!a!una!obra.! Descripción:! El!ADMINISTRADOR!mediante!el!formulario!de!creación!o!edición!de!obras!añade!material! a!la!misma.! Precondición:! El!ADMINISTRADOR!debe!estar!autenticado!y!la!obra!debe!estar!creada!previamente!o! estar!el!ADMINISTRADOR!en!el!formulario!de!creación!de!obras.! Postcondición:! La!información!de!la!obra!se!modifica!en!la!base!de!datos.! Flujo!normal:! 1. El!ADMINISTRADOR!se!encuentra!en!el!formulario!de!creación!o!edición!de!obras.! 2. El!ADMINISTRADOR!pulsa!sobre!el!botón!“Añadir!material”.! 3. El!ADMINISTRADOR!completa!los!campos!del!formulario!requeridos.! 4. El!ADMINISTRADOR!pulsa!el!botón!“Aceptar”!y!el!material!es!añadido!a!la!lista!de! materiales.! a. Los!pasos!2-4!pueden!repetirse!tantas!veces!como!material!necesite!añadir!el! ADMINISTRADOR.! 5. El!ADMINISTRADOR!pulsa!el!botón!“Siguiente”!y!es!dirigido!al!siguiente!paso!del! formulario!de!creación/edición!de!obras.! Flujo!alternativo:! ! Tabla!17.!Caso!de!uso:!Añadir!material! ! ! ! !
Alejandro!Pérez!Martín!|!72! ! ! Nombre! Eliminar!material! ID! 3.3.2! Creado!por! Álvaro!Romero!Perdomo! Fecha! 27/01/2017! Modif.!por! Álvaro!Romero!Perdomo! Fecha!modif.! 27/01/2017! ! Actor!principal:! ADMINISTRADOR! Personal!involucrado!o!intereses:! 1. ADMINISTRADOR:!quiere!eliminar!material!de!una!obra.! Descripción:! El!ADMINISTRADOR!mediante!el!formulario!de!creación!o!edición!de!obras!elimina! material!asociado!a!la!misma.! Precondición:! El!ADMINISTRADOR!debe!estar!autenticado!y!la!obra!debe!estar!creada!previamente!o! estar!el!ADMINISTRADOR!en!el!formulario!de!creación!o!edición!de!obras.! Postcondición:! La!información!de!la!obra!se!modifica!en!la!base!de!datos.! Flujo!normal:! 1. El!ADMINISTRADOR!se!encuentra!en!el!formulario!de!creación!o!edición!de!obras.! 2. El!ADMINISTRADOR!pulsa!sobre!el!botón!“Eliminar!material”.! 3. El!ADMINISTRADOR!pulsa!el!botón!“Finalizar”!y!el!material!asociado!a!la!obra!se!elimina! de!la!base!de!datos.! Flujo!alternativo:! ! Tabla!18.!Caso!de!uso:!Editar!material! ! ! ! ! ! ! !
Alejandro!Pérez!Martín!|!73! ! Nombre! Importar!material! ID! 3.4! Creado!por! Alejandro!Pérez!Martín! Fecha! 22/10/2016! Modif.!por! Álvaro!Romero!Perdomo! Fecha!modif.! 09/02/2017! ! Actor!principal:! ADMINISTRADOR! Personal!involucrado!o!intereses:! 1. ADMINISTRADOR:!quiere!importar!material!a!una!obra.! Descripción:! El!ADMINISTRADOR!mediante!el!formulario!de!creación!o!edición!de!obras!importa! materiales!a!la!misma.! Precondición:! El!ADMINISTRADOR!debe!estar!autenticado!y!la!obra!debe!estar!creada!previamente!o! estar!el!ADMINISTRADOR!en!el!formulario!de!creación!de!obras.! Postcondición:! La!información!de!la!obra!se!modifica!en!la!base!de!datos.! Flujo!normal:! 1. El!ADMINISTRADOR!se!encuentra!en!el!formulario!de!creación!de!obras.! 2. El!ADMINISTRADOR!pulsa!sobre!el!botón!“Importar!material”.! 3. El!ADMINISTRADOR!selecciona!un!archivo!Excel!(.xls!o!.csv)!de!su!equipo!donde!se! encuentran!los!materiales!que!quiere!importar.! 4. El!sistema!analiza!el!archivo!y!automáticamente!añade!los!materiales!encontrados!a!la! lista!de!materiales.! 5. El!ADMINISTRADOR!puede!seguir!añadiendo!material!como!se!describe!en!el!caso!de!uso! “3.3.1.!Añadir!material”.! 6. El!ADMINISTRADOR!pulsa!el!botón!“Siguiente”!y!es!dirigido!al!siguiente!paso!del! formulario!de!creación/edición!de!obras.! Flujo!alternativo:! ! Tabla!19.!Caso!de!uso:!Importar!material! ! !
Alejandro!Pérez!Martín!|!80! ! Nombre! Gestionar!empleados! ID! 5! Creado!por! Álvaro!Romero!Perdomo! Fecha! 22/10/2016! Modif.!por! Álvaro!Romero!Perdomo! Fecha!modif.! 22/10/2016! ! Actor!principal:! ADMINISTRADOR! Personal!involucrado!o!intereses:! 1. ADMINISTRADOR:!quiere!poder!editar/borrar!empleados!del!sistema.! Descripción:! El!ADMINISTRADOR!puede!editar!la!información!de!un!empleado!ya!existente,!así!como! eliminar!el!mismo!si!fuera!necesario.!! Precondición:! El!ADMINISTRADOR!debe!estar!autenticado!y!existir!al!menos!un!empleado!a! editar/borrar!en!el!sistema.! Postcondición:! 1. La!información!del!empleado!queda!actualizada.! 2. El!empleado!queda!eliminado!del!sistema.! Flujo!normal:! 1. El!ADMINISTRADOR!accede!al!portal!de!administración.! 2. El!ADMINISTRADOR!accede!a!la!vista!de!los!empleados.! 3. El!ADMINISTRADOR!selecciona!el!empleado!que!desea!gestionar.! a. Editar!empleado!(5.1).! b. Borrar!empleado!(5.2).! c. Notificar!empleado!(5.3).! d. Visualizar!empleado!(5.4).! Flujo!alternativo:! Tabla!26.!Caso!de!uso:!Gestionar!empleados!
Alejandro!Pérez!Martín!|!81! ! Nombre! Editar!empleado! ID! 5.1! Creado!por! Álvaro!Romero!Perdomo! Fecha! 22/10/2016! Modif.!por! Álvaro!Romero!Perdomo! Fecha!modif.! 22/10/2016! ! Actor!principal:! ADMINISTRADOR! Personal!involucrado!o!intereses:! ADMINISTRADOR:!quiere!poder!editar!empleados!del!sistema.! Descripción:! El!ADMINISTRADOR!puede!editar!la!información!de!un!empleado!ya!existente.!! Precondición:! El!ADMINISTRADOR!debe!estar!autenticado!y!existir!al!menos!un!empleado!en!el!sistema.! Postcondición:! 1. La!información!del!empleado!queda!actualizada.! Flujo!normal:! 1. El!ADMINISTRADOR!accede!al!portal!de!administración.! 2. El!ADMINISTRADOR!accede!a!la!vista!de!los!empleados.! 3. El!ADMINISTRADOR!selecciona!el!empleado!que!desea!editar.! 4. El!ADMINISTRADOR!accede!al!formulario!de!edición!del!empleado!a!través!de!la!interfaz.! 5. El!ADMINISTRADOR!introduce!los!campos!que!desea!editar!del!empleado.! 6. El!ADMINISTRADOR!finaliza!la!edición!de!la!información!del!empleado.! 7. La!información!queda!actualizada!en!el!sistema.! Flujo!alternativo:! 5.1.!Errores!de!validación!de!campos:! 5.1.a.!Se!muestra!un!mensaje!de!error!al!ADMINISTRADOR!a!través!de!la!interfaz.! 5.1.b.!Se!permite!al!ADMINISTRADOR!volver!a!rellenar!los!campos!erróneos.! Tabla!27.!Caso!de!uso:!Editar!empleado! ! !
Alejandro!Pérez!Martín!|!82! ! Nombre! Eliminar!empleado! ID! 5.2! Creado!por! Álvaro!Romero!Perdomo! Fecha! 22/10/2016! Modif.!por! Álvaro!Romero!Perdomo! Fecha!modif.! 22/10/2016! ! Actor!principal:! ADMINISTRADOR! Personal!involucrado!o!intereses:! ADMINISTRADOR:!quiere!poder!borrar!empleados!del!sistema.! Descripción:! El!ADMINISTRADOR!puede!eliminar!un!empleado!del!sistema.!! Precondición:! El!ADMINISTRADOR!debe!estar!autenticado!y!existir!al!menos!un!empleado!a!eliminar!en! el!sistema.! Postcondición:! 1. El!empleado!queda!eliminado!del!sistema.! Flujo!normal:! 1. El!ADMINISTRADOR!accede!al!portal!de!administración.! 2. El!ADMINISTRADOR!accede!a!la!vista!de!los!empleados.! 3. El!ADMINISTRADOR!selecciona!el!empleado!que!desea!eliminar.! 4. El!ADMINISTRADOR!elimina!al!empleado!del!sistema!a!través!de!la!interfaz.! 5. El!ADMINISTRADOR!confirma!la!eliminación!del!empleado.! 6. El!empleado!queda!eliminado!del!sistema.! Flujo!alternativo:! 5.1.!El!ADMINISTRADOR!decide!no!confirmar!la!eliminación:! 5.1.a.!El!sistema!vuelve!a!la!vista!de!los!empleados.! Tabla!28.!Caso!de!uso:!Eliminar!empleado! !!
Alejandro!Pérez!Martín!|!83! ! Nombre! Notificar!empleado! ID! 5.3! Creado!por! Álvaro!Romero!Perdomo! Fecha! 22/10/2016! Modif.!por! Álvaro!Romero!Perdomo! Fecha!modif.! 22/10/2016! ! Actor!principal:! ADMINISTRADOR! Personal!involucrado!o!intereses:! 1. ADMINISTRADOR:!quiere!poder!notificar!a!los!empleados.! 2. EMPLEADO:!el!empleado!desea!poder!recibir!notificaciones!en!tiempo!real.! Descripción:! El!ADMINISTRADOR!enviar!un!mensaje!a!un!empleado!en!concreto!a!través!del!portal! web.!El!empleado!recibirá!una!notificación!en!tiempo!real!en!la!aplicación!móvil.! Precondición:! El!ADMINISTRADOR!debe!estar!autenticado!y!el!sistema!debe!tener!al!menos!un! empleado!a!notificar.! Postcondición:! El!EMPLEADO!recibe!una!notificación!en!tiempo!real!en!la!aplicación!móvil.! Flujo!normal:! 1. El!ADMINISTRADOR!accede!al!portal!de!administración.! 2. El!ADMINISTRADOR!accede!a!la!vista!de!los!empleados.! 3. El!ADMINISTRADOR!selecciona!el!empleado!que!desea!notificar.! 4. El!ADMINISTRADOR!envía!el!mensaje!al!EMPLEADO.! 5. El!EMPLEADO!recibe!una!notificación!en!la!aplicación!móvil.! Flujo!alternativo:! 5.1.!Cuerpo!del!mensaje!vacío:! 5.1.a.!Se!muestra!al!ADMINISTRADOR!un!mensaje!de!error!indicando!que!debe! introducir!el!cuerpo!del!mensaje.! Tabla!29.!Caso!de!uso:!Notificar!empleado! ! ! ! ! !
Alejandro!Pérez!Martín!|!84! ! Nombre! Visualizar!empleado! ID! 5.4! Creado!por! Álvaro!Romero!Perdomo! Fecha! 22/12/2016! Modif.!por! Álvaro!Romero!Perdomo! Fecha!modif.! 22/12/2016! ! Actor!principal:! ADMINISTRADOR! Personal!involucrado!o!intereses:! 1. ADMINISTRADOR:!quiere!poder!visualizar!el!rendimiento!de!los!empleados.! Descripción:! El!ADMINISTRADOR!visualiza!el!rendimiento!de!los!empleados,!donde!observa!la!actividad! de!éste!como!trabajador,!las!obras!en!las!que!ha!participado,!etc...! Precondición:! El!ADMINISTRADOR!debe!estar!autenticado!y!el!sistema!debe!tener!al!menos!un! empleado!a!visualizar.! Postcondición:! Flujo!normal:! 1. El!ADMINISTRADOR!accede!al!portal!de!administración.! 2. El!ADMINISTRADOR!accede!a!la!vista!de!los!empleados.! 3. El!ADMINISTRADOR!selecciona!el!empleado!que!desea!visualizar.! Flujo!alternativo:! Tabla!30.!Caso!de!uso:!Visualizar!empleado! !!
Alejandro!Pérez!Martín!|!85! ! Nombre! Iniciar!sesión!en!la!APP! ID! 6! Creado!por! Álvaro!Romero!Perdomo! Fecha! 27/01/2017! Modif.!por! Álvaro!Romero!Perdomo! Fecha!modif.! 27/01/2017! ! Actor!principal:! EMPLEADO! Personal!involucrado!o!intereses:! 1. EMPLEADO:!quiere!acceder!al!panel!principal!de!la!aplicación!móvil.! Descripción:! El!EMPLEADO!ejecuta!la!aplicación!móvil!y!accede!al!sistema!haciendo!uso!de!sus! credenciales.! Precondición:! El!EMPLEADO!debe!estar!registrado!previamente.! Postcondición:! El!EMPLEADO!es!redirigido!al!panel!principal!de!la!aplicación!móvil.! Flujo!normal:! 1. El!EMPLEADO!abre!la!aplicación!móvil.! 2. El!EMPLEADO!introduce!sus!credenciales!(usuario!y!contraseña).! 3. El!EMPLEADO!es!conducido!al!panel!principal!donde!verá!sus!obras!asignadas.! Flujo!alternativo:! 2.a.!Credenciales!no!válidas:! 2.a.1.!El!sistema!muestra!un!mensaje!de!error.! Tabla!31.!Caso!de!uso:!Iniciar!sesión!en!la!APP! !!
Alejandro!Pérez!Martín!|!86! ! Nombre! Visualizar!obra! ID! 7! Creado!por! Álvaro!Romero!Perdomo! Fecha! 22/10/2016! Modif.!por! Álvaro!Romero!Perdomo! Fecha!modif.! 22/10/2016! ! Actor!principal:! EMPLEADO! Personal!involucrado!o!intereses:! 1. EMPLEADO:!quiere!poder!visualizar!las!obras!que!tiene!asignadas!en!la!aplicación!móvil.! Descripción:! El!EMPLEADO!puede!visualizar!las!obras!que!tenga!asignadas,!así!como!toda!la! documentación!asociada!(datos!tales!como!la!dirección,!el!identificador,!estado!actual!de! la!obra!…)!y!la!lista!de!tareas!a!realizar.!! Precondición:! El!ADMINISTRADOR!debe!estar!autenticado!y!el!sistema!debe!tener!un!empleado,!una! obra!y!ésta!debe!estar!asignada!a!dicho!empleado.! Postcondición:! Flujo!normal:! 1. El!EMPLEADO!accede!a!la!aplicación!móvil.! 2. El!EMPLEADO!accede!a!la!pantalla!principal!de!la!aplicación!(dashboard).! 3. Al!EMPLEADO!se!le!presentan!las!obras!que!tiene!asignadas.! 4. El!EMPLEADO!accede!a!la!obra!que!elija!a!través!de!la!interfaz.! 5. El!EMPLEADO!visualiza!la!información!relativa!a!la!obra!(datos!tales!como!la!dirección,!el! identificador,!estado!actual!de!la!obra…).! Flujo!alternativo:! Tabla!32.!Caso!de!uso:!Visualizar!obra! ! ! ! ! ! ! ! !
Alejandro!Pérez!Martín!|!87! ! Nombre! Gestionar!archivos!adjuntos!a!tarea! ID! 8! Creado!por! Álvaro!Romero!Perdomo! Fecha! 22/10/2016! Modif.!por! Álvaro!Romero!Perdomo! Fecha!modif.! 22/10/2016! ! Actor!principal:! EMPLEADO! Personal!involucrado!o!intereses:! 1. EMPLEADO:!quiere!poder!adjuntar!o!editar!información!de!respaldo!de!la!realización!de! sus!tareas.! Descripción:! El!EMPLEADO!puede!adjuntar!o!editar!información!de!respaldo!de!la!realización!de!sus! tareas!a!través!de!la!aplicación.!! Precondición:! El!sistema!debe!tener!un!empleado,!una!obra!y!ésta!debe!estar!asignada!a!dicho! empleado.!Además,!la!obra!debe!tener!al!menos!una!tarea!de!la!que!se!quiera!adjuntar!o! editar!información!de!respaldo.! Postcondición:! 1. La!información!queda!registrada!en!el!sistema.! 2. La!información!queda!borrada!del!sistema.! Flujo!normal:! 1. El!EMPLEADO!accede!a!la!aplicación!móvil.! 2. El!EMPLEADO!accede!a!la!pantalla!principal!de!la!aplicación!(dashboard).! 3. Al!EMPLEADO!se!le!presentan!las!obras!que!tiene!asignadas.! 4. El!EMPLEADO!accede!a!la!obra!que!elija!a!través!de!la!interfaz.! 5. El!EMPLEADO!accede!al!módulo!correspondiente!a!las!tareas!de!dicha!obra.! 6. El!EMPLEADO!accede!a!la!tarea!que!desea.! 7. El!EMPLEADO!selecciona:! a. Adjuntar!archivo!a!tarea.! b. Editar!archivo!de!tarea.! Flujo!alternativo:! Tabla!33.!Caso!de!uso:!Gestionar!archivos!adjuntos!a!tarea! !!
Alejandro!Pérez!Martín!|!88! ! Nombre! Adjuntar!archivo! ID! 8.1! Creado!por! Álvaro!Romero!Perdomo! Fecha! 22/10/2016! Modif.!por! Álvaro!Romero!Perdomo! Fecha!modif.! 22/10/2016! ! Actor!principal:! EMPLEADO! Personal!involucrado!o!intereses:! 1. ADMINISTRADOR:!quiere!poder!disponer!de!información!de!respaldo!de!la!realización!de! las!tareas!por!parte!de!los!empleados.! 2. EMPLEADO:!quiere!poder!adjuntar!información!de!respaldo!de!la!realización!de!sus!tareas.! Descripción:! El!EMPLEADO!puede!adjuntar!información!de!respaldo!de!la!realización!de!sus!tareas!a! través!de!la!aplicación.!! Precondición:! El!sistema!debe!tener!un!empleado,!una!obra!y!ésta!debe!estar!asignada!a!dicho! empleado.!Además,!la!obra!debe!tener!al!menos!una!tarea!de!la!que!se!quiera!adjuntar! información!de!respaldo.! Postcondición:! 1. La!información!queda!registrada!en!el!sistema.! Flujo!normal:! 1. El!EMPLEADO!accede!a!la!aplicación!móvil.! 2. El!EMPLEADO!accede!a!la!pantalla!principal!de!la!aplicación!(dashboard).! 3. Al!EMPLEADO!se!le!presentan!las!obras!que!tiene!asignadas.! 4. El!EMPLEADO!accede!a!la!obra!que!elija!a!través!de!la!interfaz.! 5. El!EMPLEADO!accede!al!módulo!correspondiente!a!las!tareas!de!dicha!obra.! 6. El!EMPLEADO!accede!a!la!tarea!que!desea.! 7. El!EMPLEADO!selecciona!adjuntar!archivo!a!tarea.! 8. El!EMPLEADO!selecciona!el!archivo!a!adjuntar!de!su!sistema!operativo!desde!el!diálogo!de! adjuntar!archivo.! 9. El!archivo!adjunto!asociado!a!la!tarea!queda!registrado!en!el!sistema.! ! Flujo!alternativo:! Tabla!34.!Caso!de!uso:!Adjuntar!archivo! !!
Alejandro!Pérez!Martín!|!89! ! Nombre! Eliminar!archivo!de!una!tarea! ID! 8.2! Creado!por! Álvaro!Romero!Perdomo! Fecha! 22/10/2016! Modif.!por! Álvaro!Romero!Perdomo! Fecha!modif.! 22/10/2016! ! Actor!principal:! EMPLEADO! Personal!involucrado!o!intereses:! 1. EMPLEADO:!quiere!poder!eliminar!archivos!adjuntos!a!una!tarea.! Descripción:! El!EMPLEADO!puede!eliminar!archivos!adjuntos!a!una!tarea.!! Precondición:! El!EMPLEADO!debe!estar!autenticado!y!existir!una!obra!asignada!a!dicho!empleado.! Además,!la!obra!debe!tener!al!menos!una!tarea!con!información!adjunta!que!eliminar.! Postcondición:! 1. La!información!queda!eliminada.! Flujo!normal:! 1. El!EMPLEADO!accede!a!la!aplicación!móvil.! 2. El!EMPLEADO!accede!a!la!pantalla!principal!de!la!aplicación!(dashboard).! 3. Al!EMPLEADO!se!le!presentan!las!obras!que!tiene!asignadas.! 4. El!EMPLEADO!accede!a!la!obra!que!elija!a!través!de!la!interfaz.! 5. El!EMPLEADO!accede!al!módulo!correspondiente!a!las!tareas!de!dicha!obra.! 6. El!EMPLEADO!accede!a!la!tarea!que!desea.! 7. El!EMPLEADO!selecciona!ver!archivos!adjuntos.! 8. El!EMPLEADO!selecciona!el!archivo!a!eliminar.! 9. El!archivo!adjunto!asociado!a!la!tarea!va!a!ser!eliminado.! 10. El!EMPLEADO!confirma!la!acción!de!eliminar!el!archivo!adjunto.! 11. El!archivo!se!elimina!del!sistema.! ! Flujo!alternativo:! 10.1.!!!!El!EMPLEADO!no!confirma!la!acción!de!eliminar!el!archivo!adjunto.! 10.1.a.!El!sistema!devuelve!al!EMPLEADO!a!la!pantalla!de!visualización!de!archivos! adjuntos.! Tabla!35.!Caso!de!uso:!Eliminar!archivos!de!una!tarea! !
Alejandro!Pérez!Martín!|!96! ! En!la!pantalla!materials!podemos!consultar!los!materiales!actuales!del!sistema.!A!través! de!esta!pantalla!también!podemos!editar!los!usuarios!materiales!del!sistema!y!añadir!nuevos!al! sistema.! ! Ilustración!33.!Vista!de!la!pantalla!materials! !! A! través! del! dashboard! podemos! acceder! a! la! pantalla! de! edición! de! una! obra! seleccionándola!a!través!del!toolbar!a!la!derecha!de!cada!una.!En!esta!vista!podemos!volver!a! rellenar! los! campos! que! quedaron! incompletos! en! el! momento! de! creación! de! la! obra! o! cambiarlos!a!nuestro!antojo,!para!ello!sólo!tenemos!que!recordar!guardar!la!obra!antes!de!salir! mediante!el!icono!flotante!de!abajo!derecha.! ! Ilustración!34.!Vista!de!edición!de!una!obra! ! ' !
Alejandro!Pérez!Martín!|!97! ! 5.3. 'Anexo'3.'Manual'de'usuario'de'la'aplicación'móvil' ! Este!manual!detalla!el!uso!general!así!como!las!distintas!funcionalidades!de!la!aplicación! móvil.! A!continuación!se!muestra!la!pantalla!inicial!que!se!muestra!al!abrir!la!aplicación!en!la! cual!se!piden!las!credenciales!de!acceso!a!la!misma.! ! Ilustración!35.!Inicio!de!sesión!en!de!la!aplicación! Tras! acceder! con! un! usuario! previamente! creado! en! el! panel! de! administración! se! presenta!la!pantalla!principal!(dashboard)!de!la!aplicación!en!la!que!se!muestra!un!listado!de!las! distintas!obras!en!las!que!un!usuario!tiene!tareas!u!obras!directamente!asignadas.!Este!listado! además,!está!clasificado!en!pestañas!en!función!del!estado!de!la!obra!e!incluso!permite!filtrar! las!obras!a!través!buscador.!
Alejandro!Pérez!Martín!|!98! ! ! ! Ilustración!36.!Vistas!de!la!pantalla!de!principal!de!la!aplicación!(dashboard)! ! Al!pulsar!sobra!una!de!las!obras!del!listado!se!abrirá!la!pantalla!del!detalle!de!la!obra! correspondiente.! En! esta! pantalla! se! presentan! además! otras! dos! pestañas! además! de! la! descripción! general!de!la!obra,!como!son!las!pestañas!de!Tareas!(Tasks)!y!Adjuntos!(Attachments),!! ! ! Ilustración!37.!Pantalla!del!detalle!de!una!obra!
Alejandro!Pérez!Martín!|!99! ! Para!añadir!materiales!a!una!obra,!basta!con!pulsar!el!botón!“Add!Material”,!que!abrirá! una!ventana!de!edición!de!materiales!que!una!vez!hechas!las!modificaciones!pueden!guardarse! los!cambios!pulsando!en!el!botón!de!guardar!en!la!parte!superior!derecha.! ! ! Ilustración!38.!Añadir!materiales!a!una!obra!desde!la!app! Los!materiales!pueden!ser!editados/eliminados!únicamente!por!el!usuario!que!los!crea,! para!ello,!hay!que!deslizar!el!dedo!de!derecha!a!izquierda!sobre!la!tarea!a!editar!como!se!muestra! a!continuación!para!que!aparezcan!estas!opciones.! ! Ilustración!39.!Editar!materiales!de!la!obra!material!desde!la!app!
Alejandro!Pérez!Martín!|!100! ! Al!pulsar!sobre!la!pestaña!tareas!en!el!detalle!de!una!obra,!se!mostrará!el!listado!de!las! distintas!tareas!que!hay!creadas!en!la!obra.!Al!pulsar!sobre!ellas!se!abrirá!otra!pantalla!con! información!sobre!la!misma.! ! ! Ilustración!40.!Vistas!del!las!pantallas!de!listado!de!tareas!y!detalle!de!una!tarea! Las!tareas!sólo!pueden!ser!editadas!por!los!usuarios!que!estén!asignados!a!la!misma,! para!hacerlo,!hay!que!pulsar!sobre!el!icono!de!edición!junto!al!título!de!la!tarea.! ! ! Ilustración!41.!Edición!de!una!tarea!en!la!app!
Alejandro!Pérez!Martín!|!101! ! A!la!tarea!se! pueden!adjuntar!imágenes!y!archivos!presentes!en!el!dispositivo!del! empleado!y!pueden!añadirse!pulsando!el!botón!“Add!attachment”.! ! ! Ilustración!42.!Añadir!adjuntos!a!una!tarea! La! última! pestaña! del! detalle! de! una! obra! es! la! de! “Attachments”,! en! la! que! se! encuentran!los!documentos!adjuntos!agregados!por!el!usuario!administrador.!Estos!archivos! pueden!descargarse!pulsando!el!botón!“Download”!que!se!encuentra!bajo!cada!adjunto.! ! Ilustración!43.!Captura!de!la!pantalla!de!“Attachments”!
Alejandro!Pérez!Martín!|!102! ! Otra!de!las!opciones!disponibles!es!el!listado!de!usuarios!de!la!aplicación,!muy!útil!para! el! empleado! en! caso! de! que! necesite! el! teléfono! u! otra! información! de! contacto! de! algún! compañero.!Se!puede!acceder!pulsando!el!icono! !visible!en!la!pantalla!“dashboard”.! ! ! Ilustración!44.!Listado!de!usuarios!y!vista!del!perfil!de!un!usuario! Un!usuario!también!puede!acceder!a!su!perfil!pulsando!el!icono! !,!donde!será! posible!que!edite!sus!datos!personales!e!imagen!de!perfil.! ! ! Ilustración!45.!Edición!del!perfil!del!usuario!
Alejandro!Pérez!Martín!|!103! ! Por!último,!para!salir!de!la!aplicación!es!necesario!pulsar!el!botón!de!salida!que!se! encuentra!en!pantalla!principal!“dashboard”.!Si!se!confirma!la!salida,!el!usuario!será!redirigido! a!la!pantalla!de!inicio!de!sesión.! ! Ilustración!46.!Vistas!de!la!pantalla!la!pantalla!de!cierre!de!sesión! ! El!envío!de!notificaciones!push!a!la!app!se!realiza!desde!la!sección!‘Notificaciones’!de!la! consola! de! Firebase! de! Google,! a! la! que! se! puede! acceder! desde! este! enlace:! https://console.firebase.google.com/! ! Ilustración!47.!Envío!de!notificaciones!Push!desde!la!consola!de!Google!Firebase!
Alejandro!Pérez!Martín!|!104! ! La!forma!en!que!dichas!notificaciones!se!mostrarán!en!el!dispositivo!del!empleado! puede!apreciarse!en!la!siguiente!ilustración:! !! ! Ilustración!48.!Vista!de!notificaciones!push!en!el!dispositivo!del!empleado! ! ! ! '
Alejandro!Pérez!Martín!|!105! ! 5.4. Anexo'4.'Pantallazos'completos'de'la'demo'no'funciona' ! A!continuación,!mostramos!capturas!de!pantallas!que!muestran!la!demo!no!funcional! completa!presentada!en!la!segunda!reunión!durante!la!etapa!de!análisis.! Las!primeras!pantallas!corresponden!al!inicio!de!sesión!por!parte!del!empleado!dentro! de!la!aplicación!un!desglose!de!las!obras!que!tiene!asignadas!ordenadas!por!fecha.!! Una!vez!ha!seleccionado!una!pasaríamos!a!la!tercera!pantalla,!donde!puede!obtener! información!relativa!a!las!tareas!de!la!obra!(consideramos!las!tareas!como!aquello!que!desea! ver!primero!un!empleado!al!acceder!a!una!obra).! ! Ilustración!49.!Primeras!pantallas!de!la!demo!no!funcional!