Configuración y Visualización con Interfaz Web para infraestructura de computación distribuida

95 Pages·2017·1.88 MB·Spanish

Memoria del Trabajo Fin de Máster realizado por

Victoria Villa Valle

para la obtención del título de

Máster en Ingeniería de Automatización e Informática Industrial

Configuración y Visualización con Interfaz Web para
infraestructura de computación distribuida

Mayo 2017
UNIVERSIDADDEOVIEDO
EscuelaPolitécnicadeIngenieríadeGijón
Índice
Índicedefiguras I
1. Glosario IV
2. Introducción 1
2.1. Motivación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
2.2. Objetivodeltrabajo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
2.3. Estadodelarte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.3.1. Tecnologíasestándaresenelladodelcliente . . . . . . . . . . . . 6
2.3.2. Tecnologíasnoestándaresenelladodelcliente . . . . . . . . . . . 8
2.3.3. Tecnologíasdelladodelservidor . . . . . . . . . . . . . . . . . . 8
3. Integracióndelsistema 11
4. AngularJS 13
4.1. ArquitecturadeAngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . 14
5. Desarrollodelosmódulospropuestos 22
5.1. Arquitecturadered . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
5.2. Visordearchivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
5.2.1. Adaptacióndelformato . . . . . . . . . . . . . . . . . . . . . . . . 26
5.2.2. Filtros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
5.2.3. Actualizarcontenido . . . . . . . . . . . . . . . . . . . . . . . . . 33
VictoriaVillaValle
UNIVERSIDADDEOVIEDO
EscuelaPolitécnicadeIngenieríadeGijón
5.2.4. Gráfico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
5.3. EditorXML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
5.3.1. ConversiónXMLaJSON . . . . . . . . . . . . . . . . . . . . . . 39
5.3.2. Representacióndelarchivo . . . . . . . . . . . . . . . . . . . . . . 41
5.3.3. Funcionalidades . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
5.4. Menúdeselección . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
6. Rendimientodelsistema 62
7. Resultados 64
8. Discusión 67
9. Trabajofuturo 69
10.ANEXOI:Arquitecturabásicadeunaaplicaciónweb 73
10.1. Arquitecturasconclienteyservidorestáticos . . . . . . . . . . . . . . . . 73
10.2. Arquitecturaconclienteestáticoyservidordinámico . . . . . . . . . . . . 74
10.3. Arquitecturaconclientedinámicoyservidorestático . . . . . . . . . . . . 74
10.4. Arquitecturaconclienteyservidordinámicos . . . . . . . . . . . . . . . . 75
11.ANEXOII:Instalacióndelentorno 77
11.1. Instalacióndenode.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
11.2. Instalacióndenpm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
11.3. InstalacióndeBower . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
11.3.1. Diferenciasentrenpmybower . . . . . . . . . . . . . . . . . . . . 79
VictoriaVillaValle
UNIVERSIDADDEOVIEDO
EscuelaPolitécnicadeIngenieríadeGijón
12.AnexoIII:Cronogramadelproyecto 82
13.AnexoIV:Presupuestodelproyecto 83
ReferenciasBibliográficas 84
VictoriaVillaValle
UNIVERSIDADDEOVIEDO
EscuelaPolitécnicadeIngenieríadeGijón
Índice de figuras
2.1. CienciasqueinfluyenenelDesarrolloWeb . . . . . . . . . . . . . . . . . 2
2.2. EditorXMLactual(I) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2.3. EditorXMLactual(II) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2.4. Visordearchivosactual . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.5. Sistemadecapas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.6. Ejemplo de Hipermedios en la aplicación: Upload sería un POST y Down-
loadseríaunGET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.7. LogotipodeHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.8. LogotipodeCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.9. LogotipodeJavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.1. Ejemplosde“reports” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.2. AplicaciónconPHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.3. AplicaciónconJavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . 12
4.1. ModeloMVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
4.2. ModeloMVVM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4.3. ArquitecturadeAngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . 14
5.1. Distribucióndelcódigofuentedelaaplicación . . . . . . . . . . . . . . . . 22
5.2. ArquitecturadereddelsistemaII . . . . . . . . . . . . . . . . . . . . . . . 23
5.3. ArquitecturadereddelsistemaI . . . . . . . . . . . . . . . . . . . . . . . 24
5.4. Representaciónfinaldelarchivo . . . . . . . . . . . . . . . . . . . . . . . 28
5.5. Filtrosdecoloresaplicados . . . . . . . . . . . . . . . . . . . . . . . . . . 29
VictoriaVillaValle
UNIVERSIDADDEOVIEDO
EscuelaPolitécnicadeIngenieríadeGijón
5.6. Ejemplodefiltradoenunalista . . . . . . . . . . . . . . . . . . . . . . . . 32
5.7. Ejemplodefiltradoporcampodetexto . . . . . . . . . . . . . . . . . . . . 32
5.8. Ejemplodelcalendario . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
5.9. Ejemplodeobjetocomprimido . . . . . . . . . . . . . . . . . . . . . . . 42
5.10. XMLCasosdeuso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
5.11. BotóndeUpload . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
5.12. Funcionalidaddeañadirunnuevoelemento . . . . . . . . . . . . . . . . . 52
5.13. Ejemplodeborrado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
5.14. BotóndeDownloaddelainterfaz . . . . . . . . . . . . . . . . . . . . . . 53
5.15. BotóndeChequeodelformatoXML . . . . . . . . . . . . . . . . . . . . . 54
5.16. Ejemplodemensajesinerrores . . . . . . . . . . . . . . . . . . . . . . . . 56
5.17. Ejemplodemensajeconerrores . . . . . . . . . . . . . . . . . . . . . . . 56
5.18. Ejemplong-blur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
5.19. Botónparamostrarelmenu . . . . . . . . . . . . . . . . . . . . . . . . . . 58
6.1. RendimientoenfuncióndeltamañodePHPvsAngularJS . . . . . . . . . 63
7.1. EditordearchivosXMLfinal . . . . . . . . . . . . . . . . . . . . . . . . . 64
7.2. VisordearchivosXML . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
7.3. Menúdesplegable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
9.1. TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
10.1. Arquitecturaclienteyservidorestáticos . . . . . . . . . . . . . . . . . . . 74
10.2. Arquitecturaclienteestáticoyservidordinámico . . . . . . . . . . . . . . 74
10.3. Arquitecturaclientedinámicoyservidorestático . . . . . . . . . . . . . . 75
10.4. Arquitecturaconclienteyservidordinámico . . . . . . . . . . . . . . . . . 76
VictoriaVillaValle
UNIVERSIDADDEOVIEDO
EscuelaPolitécnicadeIngenieríadeGijón
11.1. Páginaoficialnode.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
11.2. BowervsNpm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
12.1. Cronogramadelproyecto . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
13.1. Presupuestodelproyecto . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
VictoriaVillaValle
UNIVERSIDADDEOVIEDO
EscuelaPolitécnicadeIngenieríadeGijón
1. Glosario
API Application Programming Interface : Conjunto de subrutinas, funciones y proce-
dimientosqueofrececiertabibliotecaparaserutilizadoporotrosoftware.
Ajax : Se trata de una tecnología asíncrona. Los datos adicionales se solicitan al ser-
vidor y se cargan en segundo plano sin interferir con la visualización ni el comporta-
mientodelaaplicación.
BackboneJS:Unodelosprimeroframeworksqueimplementaronelmodelovistacon-
trolador.Permitecrearaplicacionesrápidasperoresultacomplejodeutilizar.
Back-end: Tecnologías que corren del lado del servidor (PHP, Python, Java), la parte
encargada de interactuar con la base de datos, montar la página en un servidor y otras
funcionalidades.
BootStrap : Es un framework originalmente creado por Twitter, que permite crear in-
terfaces web con CSS y JavaScript cuya particularidad es adaptar la interfaz del sitio
webaladeltamañodeldispositivoquesequieravisualizar.
BDD : Behaviour Driven Development es un proceso de Desarrollo del Software que
combina técnicas generales y principios del DGP (Digital Generator Protection) junto
con ideas del diseño guiado por el dominio y análisis de diseño de programas orienta-
dosaSoftware.
DOMDocumentObjectModel:DocumentObjectModel.EsunalibreríaAPIquema-
nipula el documento HTML cargado en el navegador. Permite la gestión de eventos,
insertar y eliminar elementos entre otras funcionalidades.Proporciona un conjunto es-
tándardeobjetospararepresentarHTML,XHTMLyXML.
CSS textitCascading Style Sheets : Se trata del lenguaje utilizado para asignar estilos
ycomosevaapresentarlainformación(encuantoadecisionesvisuales,comopuede
serelcolor)endocumentosHTMLoXML.
Full-Stack: Ambos sistemas, front-end [Glosario 1] y back-end [Glosario 1]. Además
de los componentes encargados de la integración entre ellos y los distintos sistemas
operativos.
Front-end:Tecnologíasquecorrendelladodelcliente,esdecir,delladodelnavegador
(HTML,CSS,JavaScript)
VictoriaVillaValle
UNIVERSIDADDEOVIEDO
EscuelaPolitécnicadeIngenieríadeGijón
MVVM (Model-view-view model): : Un tipo de arquitectura. Separa la interfaz de
usuario de la lógica que hay en ella para implementar funcionalidades.. Facilita la se-
paraciónentreelcódigodeinterfazdeusuarioconaquelquenoseacódigodeinterfaz
deusuario
Plugin:Aplicaciónqueañadeunafuncionalidadadicionalounacaracterísticaalsoft-
ware.Uncomplemento.
SpaguettiCode:Esuntérminopeyorativoparalosprogramasqueestánformadospor
una estructura de control de flujo compleja e incomprensible. Se le llama así por su
similitudaunplatodeespaguetis:hilosintrincadosyanudados.
URI : Identificador de recursos uniforme. Es una cadena de caracteres que identifica
los recursos de una red de forma unívoca. La diferencia respecto a un localizador de
recursos uniforme (URL) es que estos hacen referencia a recursos que pueden variar
coneltiempo.
VictoriaVillaValle
UNIVERSIDADDEOVIEDO
EscuelaPolitécnicadeIngenieríadeGijón Hoja1de86
2. Introducción
2.1. Motivación
Hoy en día, cada vez es más necesario el uso de las tecnologías web tanto en el mundo
empresarial como a la hora de compartir recursos para que otras personas puedan acceder a
ellos. Está demostrado que una página web aumenta el incremento de ventas, además de la
productividad, siendo por tanto necesario conocer el campo de las tecnologías web para su
correctodesarrollo.[1]
Las tecnologías web conectan un conjunto de archivos entrelazados entre sí a los cuales
se puede acceder a partir de una interfaz capaz de conectar dichos ficheros con los usuarios,
haciendoposiblequemillonesdepersonasseancapacesdeconectarsesimultáneamentepara
compartirinformaciónyconocimientos.
A su vez, se deberá presentar la información de forma más ordenada e intuitiva, ya
que una página bien diseñada será más atractiva para el usuario. Existen varias tecnolo-
gíasdentrodeestecampo,destacandodesdelosúltimosañosaquellasdenominadas“Front-
end”[Glosario1].
EldesarrolloFront-endesunaespecialidadparaeldesarrollowebquetrabajalainterfaz
y permite que el usuario pueda interactuar con la web. Utiliza principalmente lenguajes de
marcado y programación. Este último ejecuta las operaciones en el cliente sin necesidad del
uso de servidores externos, es decir, manipula los resultados obtenidos para una visión más
intuitivadelosdatos,evitandodeestaformasobrecargasenelservidor.
Cabe destacar que no hay que confundirlo con el desarrollo Back-end[Glosario1], ya
que este está enfocado únicamente a los lenguajes de programación, es decir, trabajar con
datos internos creando aplicaciones que sean capaces de controlar los datos y mostrar la
informacióndemaneraqueelusuariopuedacomprender.
2.2. Objetivo del trabajo
En el proyecto Sentinel2 E2ESPM (End-To-End System Performance Monitoring) de la
empresa Elecnor Deimos se tiene una interfaz desarrollada con tecnologías anticuadas de
desarrollo de aplicaciones web [2.2,2.3,2.4], siendo en este caso PHP [2.3.3]. Aunque PHP
VictoriaVillaValle