Asistente virtual para un sistema de...

Asistente virtual para

un sistema de

información

Grado en Ingeniería Multimedia

Trabajo Fin de Grado

Autor: Pablo Guijarro Marco

Tutor/es: Gustavo Candela Romero María Dolores Sáez Fernández Enero 2020

Asistente virtual para un sistemade informacion

Desarrollo de un asistente virtual que facilite la comunicacion con elusuario en la Biblioteca Virtual Miguel de Cervantes

AutorPablo Guijarro Marco

DirectoresGustavo Candela Romero

Departamento del Lenguajes y Sistemas Informaticos

Marıa Dolores Saez FernandezDepartamento del Lenguajes y Sistemas Informaticos

Grado en Ingenierıa Multimedia

ALICANTE, 12 de enero de 2020

Resumen

Actualmente, el acceso a los sistemas de informacion debe ser facil, rapido e intuitivo.Numerosas instituciones han publicado sus datos en abierto como por ejemplo bibliotecasnacionales, instituciones de patrimonio cultural, agencias estatales de meteorologıa, redessociales, Wikidata y ayuntamientos. Sin embargo, el acceso a estos nuevos repositorios dedatos abiertos no es sencillo por la necesidad de saber utilizar el lenguaje de consulta debase de datos SPARQL y ser capaz de entender como esta la informacion estructuradapara poder comprender como acceder a la que se necesita. Este Trabajo Fin de Grado(TFG) se basa en bibliotecas virtuales/digitales que ofrecen contenido mediante datosabiertos como informacion sobre obras y autores.

El trabajo pretende reutilizar y facilitar el acceso a estos recursos que ofrecen lasbibliotecas virtuales. En la ultima decada estan cobrando relevancia los chatbots y losasistentes virtuales en el mundo del e-learning ya que permiten al usuario interactuarmediante lenguaje natural con ellos. Estos son capaces de ofrecer el contenido de lasbibliotecas virtuales de manera rapida al igual que de informar al usuario de lo que ofrecela biblioteca con tan solo mantener una conversacion con ellos. Empresas como Google,Apple o Amazon estan apostando por esta nueva tecnologıa aplicandola en algunos desus productos ya que el uso de un asistente virtual va mas alla de poder ofrecer losrecursos de una biblioteca virtual o de un sitio web en especıfico. Pueden tener otrasfuncionalidades que usan repositorios externos para enriquecer las respuestas que ofreceel asistente.

El objetivo principal de este TFG es crear un asistente virtual que ofrezca tantofuncionalidades que permitan acceder a los recursos de un sistema de informacion comofuncionalidades que ofrezcan informacion util para la vida cotidiana de los usuarios.Ademas, se ha anadido una funcionalidad adicional con el objetivo de permitir a losadministradores del sistema monitorizar mediante cuadros de mando la frecuencia deuso del asistente y de sus funcionalidades.

Para llevar a cabo este asistente virtual se ha utilizado tanto el repositorio de datosabiertos de la Biblioteca Virtual Miguel de Cervantes (BVMC), ya que se ha elegidocomo sistema de informacion para el cual realizar el asistente, como tambien Wikidata.

Se ha validado el asistente tras la realizacion de pruebas unitarias y de una evaluacioncon varios usuarios reales. En conclusion, es un proyecto que ofrece un asistente virtualcomo alternativa a la hora de obtener los recursos de la BVMC, entre otras funcionali-dades, que utiliza multitud de tecnologıas tanto para su parte del backend como para la

vi

del frontend y que hace uso de numerosos servicios de terceros para ello.

Preambulo

Vivimos en una sociedad en la cual la gente esta acostumbrada a obtener lo que deseade una manera simple, comoda y sencilla gracias a la evolucion de la tecnologıa. Porejemplo, el acceso a Internet ha facilitado el consumo de todo tipo de productos de unaforma flexible y rapida.

En este contexto, actualmente estan teniendo mucho exito los asistentes virtuales,ya que facilitan la obtencion de informacion y el tramite dentro de una web o de unaapp. En resumen, ofrecen facilidad y rapidez para que las personas encuentren lo quebuscan o realicen la accion que quieren dentro de un sitio web. En este sentido, unasistente virtual permite interactuar con el usuario mediante el uso del lenguaje naturalsimulando el comportamiento de una persona.

Por este motivo principalmente he decidido realizar un asistente virtual que facilite elacceso de informacion a los usuarios de la BVMC, entre otros servicios. El objetivo deeste TFG es disenar e implementar una API para darle sustento al asistente, entrenar alasistente para que pueda responder correctamente a las peticiones del usuario, consumirdatos de terceros como, por ejemplo, de la propia biblioteca y dotarle de un buen disenopara mejorar la experiencia de usuario.

A mis padres, a mi hermana y a mis abuelos por haber creıdo desde el principio en mı y quesin su apoyo no habrıa podido llegar hasta este punto de la carrera. A mis amigos por estar

siempre ahı cuando les he necesitado y me han orientado cuando no encontraba como salir delpaso en situaciones difıciles que se me han presentado durante el transcurso de esta carrera.

Tambien agradecer a mis tutores por formar parte de este ultimo proyecto antes de salir almundo laboral y a todos los profesores con los que he aprendido y han hecho que hoy en dıa sea

capaz de realizar este trabajo.

ix

Algun dıa seremos capaces de alcanzar la inmortalidad.Haremos copias de nuestros cerebros. Puede que los creemos

en un laboratorio o que, simplemente, descarguemos su contenidoen un ordenador.

Marvin Minsky.

xi

Indice general

Resumen V

1. Introduccion 1

2. Viabilidad 52.1. Modelo de negocio, Lean Canvas . . . . . . . . . . . . . . . . . . . . . . . 5

2.1.1. Segmentos de mercado . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.1.2. Problema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.1.3. Propuesta de valor unica . . . . . . . . . . . . . . . . . . . . . . . . 7

2.1.4. Solucion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

2.1.5. Canales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

2.1.6. Estructura de costes . . . . . . . . . . . . . . . . . . . . . . . . . . 8

2.1.7. Metricas clave . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

2.1.8. Fuentes de ingreso . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.1.9. Ventaja especial . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

2.2. Analisis DAFO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

2.2.1. Debilidades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

2.2.2. Amenazas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.2.3. Fortalezas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.2.4. Oportunidades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

2.3. Analisis de los riesgos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

3. Objetivos 153.1. Generales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

3.2. Especıficos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

4. Marco Teorico 174.1. Asistentes virtuales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

4.2. Fuentes de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

4.2.1. La Web Semantica y la definicion de los datos . . . . . . . . . . . . 20

4.2.2. Bibliotecas digitales . . . . . . . . . . . . . . . . . . . . . . . . . . 23

4.2.3. Wikidata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

4.3. Tecnologıas para implementar un asistente virtual . . . . . . . . . . . . . 27

4.3.1. Dialogflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

4.4. Tecnologıas para implementar el backend y el frontend . . . . . . . . . . . 30

4.4.1. Servicios a utilizar de terceros . . . . . . . . . . . . . . . . . . . . . 32

xiii

xiv Indice general

4.5. UX y diseno . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

5. Metodologıa 35

6. Analisis y especificacion 396.1. Perspectiva de producto . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

6.2. Funciones del producto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

6.3. Restricciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

6.4. Requisitos especıficos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

6.4.1. Requerimientos funcionales . . . . . . . . . . . . . . . . . . . . . . 41

6.4.2. Requerimientos no funcionales . . . . . . . . . . . . . . . . . . . . 45

6.4.3. Diagrama de casos de uso . . . . . . . . . . . . . . . . . . . . . . . 46

7. Diseno 497.1. Arquitectura seleccionada . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

7.2. Tecnologıas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

7.3. Diagrama de clases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

7.4. Mockups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

8. Implementacion 638.1. Backend Parte 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

8.2. Frontend Parte 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

8.3. Backend Parte 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

8.4. Frontend Parte 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

8.5. Backend Parte 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

8.6. Frontend Parte 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

8.7. Backend Parte 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

9. Pruebas y validacion 939.1. Pruebas unitarias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

9.2. Casos de prueba . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

9.2.1. Evaluacion a nivel de sesion . . . . . . . . . . . . . . . . . . . . . . 96

9.2.2. Evaluacion a nivel de turno . . . . . . . . . . . . . . . . . . . . . . 97

10.Resultados 99

11.Conclusiones 10711.1. Conclusiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

11.2. Lıneas de trabajo futuras . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

Bibliografıa 113

A. Anexo I. Esquema de base de datos 115

B. Anexo II. Informe de Toggl 117

Indice general xv

C. Anexo III. Consultas SPARQL 123C.1. Para Wikidata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123C.2. Para la BVMC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

D. Anexo IV. Intenciones implementadas 127

E. Anexo V. Paso a produccion 137E.1. Configurar e instalar el backend. Laravel, Express+Node.js y Grafana. . . 137E.2. Configurar e instalar el frontend. Angular. . . . . . . . . . . . . . . . . . . 138E.3. Comprobar errores. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138E.4. Building. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138E.5. Ultima comprobacion de errores. . . . . . . . . . . . . . . . . . . . . . . . 138

F. Anexo VI. Correo recibido de Twitter 139

Indice de figuras

2.1. Analisis Lean Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.2. Analisis DAFO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

4.1. Asistentes virtuales mas utilizados a principios de 2019 . . . . . . . . . . . 184.2. Comparacion entre Google Assistant, Siri y Alexa . . . . . . . . . . . . . . 194.3. Ejemplo que muestra como se convierte una consulta SQL a SPARQL . . 234.4. Funcionamiento del KB Lab Bot . . . . . . . . . . . . . . . . . . . . . . . 26

5.1. Visualizacion del repositorio del proyecto desde GitKraken . . . . . . . . . 38

6.1. Diagrama de casos de uso . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

7.1. Arquitectura REST orientada a servicios . . . . . . . . . . . . . . . . . . . 507.2. Tecnologıas utilizadas en el proyecto . . . . . . . . . . . . . . . . . . . . . 517.3. Diagrama de clases del proyecto . . . . . . . . . . . . . . . . . . . . . . . . 547.4. Mockup version movil 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 557.5. Mockup version movil 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 567.6. Mockup version movil 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 577.7. Mockup version escritorio 1 . . . . . . . . . . . . . . . . . . . . . . . . . . 587.8. Mockup version escritorio 2 . . . . . . . . . . . . . . . . . . . . . . . . . . 597.9. Mockup version escritorio 3 . . . . . . . . . . . . . . . . . . . . . . . . . . 60

8.1. Ejemplos de los cuadros de mando implementados en Grafana . . . . . . . 92

9.1. Pruebas unitarias pasadas con exito . . . . . . . . . . . . . . . . . . . . . 959.2. Resultados de la evaluacion a nivel de sesion . . . . . . . . . . . . . . . . . 96

10.1. Diseno final del asistente en la web de desarrollo de la BVMC . . . . . . . 9910.2. Diseno final del asistente cuando esta cerrado . . . . . . . . . . . . . . . . 10010.3. Diseno final del asistente cuando esta abierto . . . . . . . . . . . . . . . . 10010.4. Ejemplos de varias respuestas del asistente . . . . . . . . . . . . . . . . . . 10110.5. Funcionalidad buscar obras de un autor en concreto . . . . . . . . . . . . 10110.6. Respuestas del asistente sobre Miguel de Cervantes Saavedra . . . . . . . 10210.7. Funcionalidad mostrar vıdeos de YouTube de la BVMC . . . . . . . . . . 10210.8. Funcionalidad mostrar ultimos tweets de la BVMC . . . . . . . . . . . . . 10310.9. Buscar obras en un idioma concreto y prediccion del tiempo en Espana . . 103

A.1. Base de datos MySQL del proyecto . . . . . . . . . . . . . . . . . . . . . . 115

xvii

xviii Indice de figuras

B.1. Informe de Toggl 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117B.2. Informe de Toggl 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118B.3. Informe de Toggl 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119B.4. Informe de Toggl 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120B.5. Informe de Toggl 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121B.6. Informe de Toggl 6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

D.1. Intents implementados en Dialogflow para el asistente 1 . . . . . . . . . . 127D.2. Intents implementados en Dialogflow para el asistente 2 . . . . . . . . . . 128D.3. Intents implementados en Dialogflow para el asistente 3 . . . . . . . . . . 129D.4. Intents implementados en Dialogflow para el asistente 4 . . . . . . . . . . 130D.5. Intents implementados en Dialogflow para el asistente 5 . . . . . . . . . . 131D.6. Intents implementados en Dialogflow para el asistente 6 . . . . . . . . . . 132D.7. Intents implementados en Dialogflow para el asistente 7 . . . . . . . . . . 133D.8. Intents implementados en Dialogflow para el asistente 8 . . . . . . . . . . 134D.9. Intents implementados en Dialogflow para el asistente 9 . . . . . . . . . . 135

F.1. Correo recibido de Twitter . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

Indice de tablas

2.1. Riesgos sobre la organizacion . . . . . . . . . . . . . . . . . . . . . . . . . 122.2. Riesgos sobre los requerimientos . . . . . . . . . . . . . . . . . . . . . . . 122.3. Riesgos sobre la tecnologıa . . . . . . . . . . . . . . . . . . . . . . . . . . . 132.4. Riesgos sobre la estimacion . . . . . . . . . . . . . . . . . . . . . . . . . . 132.5. Riesgos sobre las herramientas . . . . . . . . . . . . . . . . . . . . . . . . 142.6. Riesgos sobre el personal . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

6.1. Requerimiento funcional mantener una conversacion . . . . . . . . . . . . 416.2. Requerimiento funcional resolver dudas . . . . . . . . . . . . . . . . . . . 416.3. Requerimiento funcional conocer prediccion del tiempo . . . . . . . . . . . 416.4. Requerimiento funcional informar sobre Miguel de Cervantes . . . . . . . 426.5. Requerimiento funcional consultar obras disponibles en un idioma en con-

creto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426.6. Requerimiento funcional consultar ediciones de El Quijote . . . . . . . . . 426.7. Requerimiento funcional solicitar prediccion horoscopo . . . . . . . . . . . 426.8. Requerimiento funcional realizar traducciones . . . . . . . . . . . . . . . . 436.9. Requerimiento funcional busquedas de contenido de la BVMC . . . . . . . 436.10. Requerimiento funcional mostrar ultimos tweets de la BVMC . . . . . . . 436.11. Requerimiento funcional mostrar vıdeos del canal de YouTube de la BVMC 436.12. Requerimiento funcional solicitar noticias de actualidad . . . . . . . . . . 446.13. Requerimiento funcional realizar busquedas de paginas web . . . . . . . . 446.14. Requerimiento funcional registrar accion . . . . . . . . . . . . . . . . . . . 446.15. Requerimiento funcional generar cuadros de mando . . . . . . . . . . . . . 446.16. Requerimiento no funcional disponibilidad . . . . . . . . . . . . . . . . . . 456.17. Requerimiento no funcional seguridad . . . . . . . . . . . . . . . . . . . . 456.18. Requerimiento no funcional rendimiento . . . . . . . . . . . . . . . . . . . 456.19. Requerimiento no funcional multiplataforma . . . . . . . . . . . . . . . . . 466.20. Requerimiento no funcional ofrecer interfaz atractiva . . . . . . . . . . . . 46

9.1. Resultados de la evaluacion a nivel de turno . . . . . . . . . . . . . . . . . 97

xix

Indice de Listados

8.1. Primeras lıneas del archivo .env del proyecto Laravel . . . . . . . . . . . . 638.2. API Agente Catalina Dialogflow . . . . . . . . . . . . . . . . . . . . . . . 658.3. Solicitud de datos a Wikidata . . . . . . . . . . . . . . . . . . . . . . . . . 668.4. Solicitud de datos a AEMET . . . . . . . . . . . . . . . . . . . . . . . . . 678.5. Solicitud de datos a la BVMC . . . . . . . . . . . . . . . . . . . . . . . . . 688.6. Proxy BVMC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 688.7. Pedir prediccion del horoscopo . . . . . . . . . . . . . . . . . . . . . . . . 708.8. Detectar idioma del texto a traducir . . . . . . . . . . . . . . . . . . . . . 708.9. Traducir texto a otro idioma . . . . . . . . . . . . . . . . . . . . . . . . . 718.10. Buscar noticias de actualidad . . . . . . . . . . . . . . . . . . . . . . . . . 718.11. Obtener vıdeos del canal de YouTube de la BVMC . . . . . . . . . . . . . 718.12. Obtener resultados de una busqueda de paginas web . . . . . . . . . . . . 728.13. Backend creado para hacer llamadas a la API de Twitter (server.js) . . . 748.14. Backend creado para hacer llamadas a la API de Twitter (config.js) . . . 748.15. Backend creado para hacer llamadas a la API de Twitter (functions.js) . . 758.16. Llamadas al backend para obtener los ultimos tweets de la BVMC . . . . 768.17. Codigo HTML para poner un ancla a una respuesta del asistente . . . . . 778.18. Codigo TypeScript para poner un ancla a una respuesta del asistente . . . 778.19. Codigo TypeScript para hacer funcionar el enlace ancla anadido . . . . . . 778.20. Codigo HTML para visualizar elemento 3D . . . . . . . . . . . . . . . . . 788.21. Codigo anadido en TypeScript para visualizar elemento 3D . . . . . . . . 788.22. Usar clickOutside para saber si se ha hecho click fuera del asistente . . . . 798.23. Servicio para usar el motor grafico 1 . . . . . . . . . . . . . . . . . . . . . 808.24. Servicio para usar el motor grafico 2 . . . . . . . . . . . . . . . . . . . . . 818.25. Servicio para usar el motor grafico 3 . . . . . . . . . . . . . . . . . . . . . 828.26. Modelo BusquedasAutor . . . . . . . . . . . . . . . . . . . . . . . . . . . . 848.27. Controlador BusquedasAutor . . . . . . . . . . . . . . . . . . . . . . . . . 858.28. Anadir las rutas para el controlador BusquedasAutor . . . . . . . . . . . . 858.29. Migracion BusquedasAutor . . . . . . . . . . . . . . . . . . . . . . . . . . 868.30. Factory BusquedasAutor . . . . . . . . . . . . . . . . . . . . . . . . . . . . 878.31. Seeder BusquedasAutor . . . . . . . . . . . . . . . . . . . . . . . . . . . . 878.32. Servicio BusquedasAutor . . . . . . . . . . . . . . . . . . . . . . . . . . . . 888.33. Usar desde TypeScript el servicio BusquedasAutor . . . . . . . . . . . . . 898.34. Consulta SQL para obtener datos de la tabla interactions desde Grafana . 90

9.1. Unit Testing: BusquedasAutorTest . . . . . . . . . . . . . . . . . . . . . . 94

xxi

xxii Indice de Listados

C.1. Consulta SPARQL a Wikidata (Obras de Miguel de Cervantes Saavedra) 123C.2. Consulta SPARQL a Wikidata (Padres de Miguel de Cervantes Saavedra) 123C.3. Consulta SPARQL a Wikidata (Nacimiento Miguel de Cervantes Saavedra)124C.4. Consulta SPARQL a Wikidata (Muerte Miguel de Cervantes Saavedra) . 124C.5. Consulta SPARQL a Wikidata (Foto Miguel de Cervantes Saavedra) . . . 124C.6. Consulta SPARQL a Wikidata (Informacion variada sobre Miguel de Cer-

vantes Saavedra) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125C.7. Consulta SPARQL a la BVMC (Ediciones de la obra El ingenioso hidalgo

Don Quijote de la Mancha) . . . . . . . . . . . . . . . . . . . . . . . . . . 125C.8. Consulta SPARQL a la BVMC (Obras almacenadas de cada idioma) . . . 126C.9. Consulta SPARQL a la BVMC (Buscar obra; Ejemplo El ingenioso hidalgo

Don Quijote de la Mancha) . . . . . . . . . . . . . . . . . . . . . . . . . . 126C.10.Consulta SPARQL a la BVMC (Buscar autor; Ejemplo Lope de Vega) . . 126C.11.Consulta SPARQL a la BVMC (Buscar obras de cierto autor; Ejemplo

Lope de Vega) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

1. Introduccion

Vivimos en un mundo de constante transformacion digital impulsado en los ultimosanos por la evolucion del movil y la Inteligencia Artificial (IA).

Los chatbots son solo un componente del entorno de IA y estan apareciendo a unritmo rapido en toda la industria de la comunicacion. Estos bots simples ayudan aresponder preguntas y completar tareas repetitivas en nombre de las empresas paraque los empleados puedan ser lo mas productivos posible en el trabajo y los clientespuedan disfrutar de un mejor servicio. De hecho, podemos ver evidencia de IA en casitodos los entornos, desde nuestras interacciones con asistentes virtuales como Cortanade Microsoft y Siri de Apple hasta nuestras conversaciones con chatbots.

Esto ha supuesto un gran impacto hacia el lado del cliente sobre todo debido a laconstante disponibilidad, a su respuesta instantanea y a su facil acceso. Los chatbotspueden estar operativos los 365 dıas del ano y las 24 horas del dıa, lo que les permiteatender a sus clientes incluso mientras los miembros realizan otras tareas.

Los consumidores contemporaneos desean resultados inmediatos y se apoyan en lasempresas que ofrecen rapidez. Un estudio sobre la experiencia del usuario de chatbotdescubrio que al 40 por ciento de los consumidores no les importa si un humano o unchatbot responde a sus preguntas siempre que reciban ayuda rapida1. Ademas, los usua-rios pueden acceder facilmente a los chatbots y se alejan cada vez mas de las consultastelefonicas tradicionales ya que desean que todo sea accesible al instante.

Hay diversos estudios que demuestran que la incorporacion de la atencion al clientehabilitada por IA ha hecho que las empresas hayan ahorrado hasta un 30 por ciento encostos. Ademas el uso de chatbots tambien puede impulsar el numero de ventas de unacompanıa. [Entrepreneur.com, 2018]

Todo esto es posible debido a que en el ambito de la empresa actualmente se utilizaInternet para almacenar informacion y distribuir la misma. Esto se ha ido incrementandoen los ultimos anos de tal forma que existen muy pocas empresas, cada vez menos, queno tienen su propia pagina web o aplicacion de movil desde la cual poder administrary controlar su negocio. Desde estas paginas web y aplicaciones moviles las empresaspueden saber si estan habiendo perdidas, ganancias o incluso que trabajadores producenmas que otros. Toda esta informacion se almacena en la base de datos perteneciente ala propia empresa.

1https://www.hubspot.com/stories/artificial-intelligence

1

2

Hoy en dıa podemos contar con asistentes virtuales que aprovechan dicha informacionpara ofrecer una mejor experiencia de usuario. Son capaces de encontrar y acceder a in-formacion de manera rapida y eficaz con tan solo pedırselo mediante el lenguaje natural,es decir, mediante un mensaje de texto que escribe el usuario. Ademas, los asistentesvirtuales pueden proporcionar muchos otros tipos de servicios de soporte a los usuarioso clientes, como soporte administrativo, resolucion de problemas tecnicos, ayuda conaportes creativos y adquisicion de clientes potenciales.

Las caracterısticas principales de los asistentes virtuales son que se encuentran dispo-nibles las 24 horas del dıa a diferencia de las personas y que ademas, con las innovacionesmas recientes en sus habilidades y servicios, facilitan la expansion de cualquier negocio.

En definitiva, en cualquier campo o industria se ha aceptado que la implementacionde estrategias inteligentes ası como la gestion adecuada del tiempo y los recursos son losdos factores mas importantes para el exito. Pero hoy en dıa, a pesar del hecho de quela tecnologıa esta evolucionando a un ritmo acelerado, los duenos de los negocios y lasempresas estan cada vez mas ocupados. Tienen mas cosas que hacer y administrar eltiempo de manera eficiente es casi imposible para ellos solos. Esta es la principal razonpor la cual los asistentes virtuales se estan volviendo tan populares.

Tienen las habilidades y la experiencia necesarias para realizar tareas que los asistentesnormales no pueden hacer, y han demostrado ser capaces de manejar trabajos de maneraefectiva y rapida. Este ano ha habido una creciente competencia en los negocios en lınea,y cada vez mas personas asumen el riesgo de convertirse en emprendedores. Debido aque los asistentes virtuales son tan efectivos y utiles, especialmente para las pequenasempresas, tendran aun mas demanda de aquı en adelante. Tener un asistente virtualpuede agilizar el proceso de trabajo hasta el punto en el que este fluye casi sin problemas,y para un negocio que acaba de comenzar, esto es algo crucial. [Squarefishinc.com, 2018]

Existen tres diferencias fundamentales entre los asistentes virtuales y los chatbots: laforma de desarrollo de estas tecnologıas es distinta, no llevan a cabo las mismas funcionesy no se desarrollan en el mismo entorno.

La principal diferencia es que los asistentes virtuales son creados por las grandescompanıas tecnologicas con una ambicion muy concreta: convertirse en nuestro asistentepersonal, resolviendo todas las dudas que puedan surgir en cualquier momento. De todasformas, cualquier companıa puede poner en marcha un chatbot. Para ello lo unico quenecesita es ponerse en contacto con empresas especializadas que se encarguen de sucreacion y entrenamiento. El objetivo de estas empresas a la hora de crear el asistentees dinamizar sus comunicaciones empresariales y automatizar la relacion con los clienteen un formato conversacional al que todos estamos acostumbrados, el chat.

Otra de las diferencias es que si bien el objetivo de los asistentes virtuales es amplio, elde los chatbots es mas especıfico. Los chatbots se crean con la finalidad de resolver unaaccion clara con un objetivo concreto. Suele estar enfocada a la resolucion de preguntas

Introduccion 3

frecuentes, aligerar el grueso de trabajo a los centros de contacto o la captacion de leads.

Y ademas la otra diferencia se resume en que a pesar de que ambos han nacido comoconsecuencia del auge de la tecnologıa conversacional, chatbots y asistentes virtualesno se integran en los mismos entornos. Mientras que los asistentes virtuales nacen ensı mismos como una nueva aplicacion en el movil y se alojan en un entorno completa-mente novedoso que ya se conoce como Home Speakers o Home Devices, como GoogleHome, Amazon Echo o HomePod de Apple, los chatbots se desarrollan en paginas webs,apps de mensajerıa, redes sociales o aplicaciones. Estos dispositivos son una nueva pla-taforma por explotar para la introduccion de chatbots y convertirse en el alma de losSmart Speakers, que pronto formaran parte del mobiliario habitual de cualquier hogar.[Foromarketing.com, 2018]

Existen, ademas, multitud de instituciones que publican datos abiertos. Tanto algunosasistentes virtuales como chatbots consumen este tipo de datos para ofrecer respuestasal usuario mas elaboradas y con informacion actualizada[Link.springer.com, 2019]. Unejemplo son las bibliotecas digitales, como la BVMC, y Wikidata. Estos datos son com-plejos de reutilizar debido a que se precisan conocimientos del lenguaje de consulta paraweb semantica SPARQL. Hay una nueva tendencia que promueve la reutilizacion de lascolecciones digitales publicadas por organizaciones de patrimonio cultural como archivos,museos y bibliotecas denominada GLAM Labs2.

De forma paralela, han aparecido numerosas plataformas que facilitan la creacion ypublicacion de chatbots y de asistentes virtuales. Estas pueden ser frameworks, herra-mientas online o lenguajes de programacion. Tras el desarrollo de uno de ellos, se ha devalidar realizando pruebas unitarias y pruebas con usuarios reales.

Este proyecto consiste en el desarrollo de un asistente virtual basado en la BVMC.Al ser creado concretamente para el sitio web de la biblioteca este proyecto podrıaconsiderarse un chatbot pero, como ademas de ofrecer las funcionalidades de resolverdudas y ofrecer contenido de la biblioteca tambien tiene otras implementadas para suuso cotidiano por parte de los usuarios, se le ha considerado un asistente virtual.

La propuesta, por tanto, esta enfocada a integrar un asistente virtual para optimizarlos procesos de busqueda de la BVMC. Principalmente para ayudar a las personas quetienen dificultades para orientarse en su web pero tambien para agilizar este trabajoa cualquier usuario que utilice sus servicios. Al asistente se le ha llamado Catalina enhonor a quien fue la esposa de Miguel de Cervantes. El asistente facilita el acceso a todala informacion de la biblioteca y ademas la completa gracias a lo que nos ofrece Wikidatay a varias APIs externas con las que se comunica.

2https://glamlabs.io/

2. Viabilidad

Se ha realizado un estudio de viabilidad del proyecto con el objetivo de definir cadauno de los puntos clave del sistema. Examinar a fondo todas las cuestiones y evaluar suprobabilidad de exito antes de iniciar el proyecto nos hace tener una mejor perspectivadel mismo y aumentar la probabilidad de exito al descubrir los distintos factores que,desde el principio, podrıa afectar al proyecto y perjudicar a sus resultados.

2.1. Modelo de negocio, Lean Canvas

Figura 2.1.: Analisis Lean Canvas

Para ello se utiliza Lean Canvas, que es una plantilla de plan de negocios de 1 pagi-na que ayuda a deconstruir una idea en sus supuestos clave utilizando 9 bloques de

5

6 2.1. Modelo de negocio, Lean Canvas

construccion basicos. [Ask.leanstack.com, 2019]

El Lean Canvas propuesto para el proyecto queda reflejado en la Figura 2.1.

2.1.1. Segmentos de mercado

Los segmentos de mercado es una especie de clasificacion de los clientes que va a tenernuestro negocio. Basicamente es responder a la pregunta ¿Que caracterısticas debetener una persona o empresa para convertirse en mi cliente potencial?[Emprender-facil.com, 2018]

Tal como senala su nombre, los early adopters son aquellos primeros clientes queadoptan un producto determinado. Los early adopters tienen problemas especıficos yestan a la busqueda de productos que puedan solucionarlos, por ello son los primerosclientes. A ellos no les importa si el producto es perfecto, incluso estan dispuestos aescribir acerca del producto para dar ideas de como mejorarlo, es decir crean unfeedback con la empresa. [Destinonegocio.com, 2015]

Para el asistente los early adopters, o usuarios ideales, serıan clientes de bibliotecasvirtuales con un catalogo online. Basicamente son usuarios de las bibliotecas.

Este asistente virtual va a estar disenado en concreto para la BVMC pero tambienpodrıa modficarse ligeramente para poder ser utilizado en otras bibliotecas virtuales.

2.1.2. Problema

Basicamente en esta seccion se trata de identificar cuales son los problemas que miproducto resuelve al usuario y al cliente ya que los problemas de los clientes serandistintos a los problemas de los usuarios. En este caso el problema que podrıan tenerlos clientes serıa tener interfaces costosas y difıciles de adaptar a la actualidad para dara nuestros usuarios mucha informacion que no se sabe que esta. Por ello la decision deintegrar el asistente puede arreglar esto.

En cambio los problemas que el asistente resuelve a los usuarios son la dificultad deencontrar la informacion que el usuario desea, ademas de agilizar el proceso, y eldesconocimiento por parte del mismo de conocer que les ofrece la web.

Cuando un usuario interacciona con el buscador y no encuentra el contenido que estabuscando o este se encuentra incompleto este se frustra por lo tanto no se encontrarasatisfecho sobre la experiencia que ha tenido. Esto lleva a un desconocimiento de si elcontenido es optimo, entendible y de buena calidad. Por ello a traves del asistente sebusca resolver este problema.

Viabilidad 7

2.1.3. Propuesta de valor unica

La propuesta de valor unica debe definir los productos o servicios que se ofrecen a unsegmento de clientes pero, sin embargo, no se han de destacar sus caracterısticas sinomas bien se ha de hacer hincapie en los beneficios que les aportamos a los clientes y enlos factores que nos diferencian de la competencia. [Emprender-facil.com, 2019]

Por ello indicar que el asistente ofrece acceso rapido a la informacion de la biblioteca,otros servicios para uso cotidiano, monitorizacion del uso del asistente a losadministradores y resolucion de dudas. Todo esto es lo que propone el proyecto queaportara ese beneficio al usuario y que nos diferenciara de otros asistentes virtuales ychatbots para bibliotecas virtuales.

2.1.4. Solucion

Para obtener una solucion al problema con el que se pueden encontrar los clientesesta el realizar una interfaz atractiva de cara al usuario y trabajar su funcionamientointerno para poder ofrecer la informacion, la cual puede desconocer el usuario, de unamanera sencilla y eficaz mejorando ası la UX (experiencia de usuario).

Respecto a solucionar los problemas que podrıan tener los usuarios, el asistenteagiliza las busquedas de los recursos que tiene la biblioteca mediante el uso del lenguajenatural ya que la base de toda relacion humana es la comunicacion y si dotamos a laweb de esta ayudara no solo a personas con un gran desconocimiento de la informaticay la web sino tambien a aquellos usuarios mas comodos y que deseen tenerlo todo a sualcance con el menor numero de clics posibles. Ademas tiene la capacidad de resolverdudas al usuario acerca del sitio web. Es necesario entrenar al asistente virtual paramejorar el numero de respuestas validas que este sea capaz de devolver al usuario.

Registrar y poder analizar los eventos o interacciones que hacen los usuarios esnecesario para que la comunidad de la biblioteca virtual siga creciendo ya que permitesaber si realmente el asistente esta siendo utilizado o no y lo mismo para cada uno delos servicios que este ofrece. Conocer esta informacion ayuda a los administradores aplantearse si el asistente necesita ser modificado, actualizado o esta teniendo exito.Esta informacion recogida es monitorizada mediante cuadros de mando para facilitarsu visualizacion y entendimiento.

Ademas hay diversas funcionalidades exclusivas del asistente que ofrecen informacionpara uso cotidiano como, por ejemplo, la posibilidad de obtener la prediccion deltiempo en Espana o de traducir un texto a otro idioma.

8 2.1. Modelo de negocio, Lean Canvas

2.1.5. Canales

Lo primero a tener en cuenta es que es exclusivamente online ya que sera unicamenteaccesible desde la propia web corporativa de la BVMC.

Ademas se utilizaran las RRSS (Redes sociales) para anunciar la disponibilidad delnuevo servicio de asistencia virtual para aquellos que no sepan de su existencia. Estoultimo se realizara en cuanto este disponible dicho asistente. Esto se anunciara sobretodo a traves de Twitter ya que es una de las redes sociales mas utilizadas por labiblioteca.

2.1.6. Estructura de costes

El mayor coste para este trabajo se centra en el valor del tiempo. Estudio de latecnologıa, el tiempo que dura el desarrollo del mismo y la realizacion de pruebas paraası validar el proyecto.

Si se quisiera mas adelante mantener el proyecto actualizado y con la idea demonetizarlo ya a los costes previos se les anadirıan costes de recursos humanos,licencias y servidores.

2.1.7. Metricas clave

Se generan un conjunto muy reducido de indicadores que luego ayudan a la toma dedecisiones, estos son los KPIs:

El numero de usuarios que han utilizado el asistente virtual durante un ciertoperiodo de tiempo.

El siguiente es la cantidad de veces que se ha solicitado realizar busquedas de unautor a traves del asistente virtual durante un cierto periodo de tiempo.

La cantidad de veces que se ha solicitado realizar busquedas de una obra a travesdel asistente virtual durante un cierto periodo de tiempo.

La cantidad de veces que se ha solicitado realizar busquedas de las obras decierto autor a traves del asistente virtual durante un cierto periodo de tiempo.

La cantidad de veces que se ha solicitado realizar busquedas de paginas web enInternet a traves del asistente virtual durante un cierto periodo de tiempo.

La cantidad de veces que se han solicitado las diferentes ediciones del quijotealmacenadas en la biblioteca a traves del asistente virtual durante un ciertoperiodo de tiempo.

Viabilidad 9

La cantidad de veces que se ha solicitado la prediccion diaria del horoscopo atraves del asistente virtual durante un cierto periodo de tiempo.

La cantidad de veces que se han solicitado noticias de actualidad a traves delasistente virtual durante un cierto periodo de tiempo.

La cantidad de veces que se han solicitado las obras almacenadas en la bibliotecaen un idioma en concreto a traves del asistente virtual durante un cierto periodode tiempo.

La cantidad de veces que se ha solicitado la prediccion del tiempo en Espana deldıa actual o del dıa siguiente a traves del asistente virtual durante un ciertoperiodo de tiempo.

La cantidad de veces que se ha solicitado realizar una traduccion de un texto atraves del asistente virtual durante un cierto periodo de tiempo.

La cantidad de veces que se han solicitado los ultimos tweets publicados en lacuenta de Twitter de la BVMC a traves del asistente virtual durante un ciertoperiodo de tiempo.

La cantidad de veces que se han solicitado vıdeos publicados en la cuenta deYouTube de la BVMC a traves del asistente virtual durante un cierto periodo detiempo.

La cantidad de veces que se han solicitado datos de Wikidata a traves delasistente virtual durante un cierto periodo de tiempo.

Se comenzara a ver si hay o no hay una mayor interaccion con el contenido a travesdel asistente. Si hay una mayor interaccion con el contenido significara que se habranmejorado alguna de sus decadencias y ahora es una web que ha facilitado el acceso asus recursos y que estos son consultados con mas frecuencia. Si aumentan las visitas ala web y el tiempo de estancia de los usuarios en la misma significara que el asistenteha cumplido con su fin.

Anadir que el periodo de tiempo del que se muestren los datos referenciados en losKPIs se podra modificar libremente en los cuadros de mando resultantes de losmismos. Estos fueron implementados con la ayuda de la herramienta Grafana a la cualse hara referencia mas adelante.

2.1.8. Fuentes de ingreso

Aunque inicialmente este trabajo es academico y no tiene caracter economico, seidentifica una forma de monetizar el producto. Esta consiste en su integracion endiferentes bibliotecas virtuales. Si en la BVMC tiene exito otras bibliotecas virtuales

10 2.2. Analisis DAFO

podrıan solicitar un servicio similar para ellas. Tan solo habrıa que adaptar ligeramenteel asistente y sin mucho trabajo contarıan con una nueva version para cada una de ellas.

2.1.9. Ventaja especial

Empresas de gran relevancia han apostado por esta tecnologıa como Google, Apple,Amazon o Microsoft con sus asistentes virtuales (Asistente de Google, Siri, Alexa yCortana respectivamente). Ademas se cuenta con contenido de la BVMC y deWikidata de donde el asistente sacara toda la informacion necesaria sobre los autores ysus obras literarias.

2.2. Analisis DAFO

El DAFO (iniciales de Debilidades, Amenazas, Fortalezas y Oportunidades) es unaherramienta que permite al empresario realizar un analisis de la realidad de su empresa,marca o producto para ası poder tomar decisiones de futuro. [Dafo.ipyme.org, 2019]

En mi caso lo utilizare para analizar este proyecto. El analisis DAFO realizado es elque se ve reflejado en la Figura 2.2.

2.2.1. Debilidades

Aun esta en desarrollo este tipo de tecnologıa y por lo tanto puede evolucionarmucho de aquı a futuros anos. Ademas es bastante innovador el tener un asistentevirtual disponible para la pagina web de una empresa y no muchas lo tienen, por ellolas empresas todavıa no creen que pueda ser un canal. Ademas creen que pueden quitarpuestos de trabajo de los departamentos de Call Center.

Viabilidad 11

Figura 2.2.: Analisis DAFO

2.2.2. Amenazas

La primera de todas es la competencia ya que es posible que otras empresasempiecen a hacer asistentes virtuales para otras bibliotecas virtuales y el valor anadidoque ofrece en la BVMC desaparezca. Otra amenaza es que esta hecho unicamente parabibliotecas virtuales por lo que no serıa extendible a otros mercados. Ademas tambienes muy importante el tema de la seguridad para que no puedan modificar desde fuerael comportamiento del asistente ni robar informacion privada a traves del mismo.

2.2.3. Fortalezas

Mejora la experiencia de usuario actual en la biblioteca virtual ya que facilita elacceso al contenido mediante lenguaje natural y gracias a esto tambien proporcionainformacion extra obtenida de APIs externas como la de Wikidata. Esto hace que lacomunicacion con el usuario sea mas eficiente y personalizada ya que el asistente puedecontestar a millones de usuarios al mismo tiempo y llevar conversacionesindependientes con cada uno de ellos.

12 2.3. Analisis de los riesgos

2.2.4. Oportunidades

Desde el asistente virtual se puede saber cuales son los tramites y busquedas masrealizadas por los usuarios desde este al igual que otra informacion valiosa para losadministradores de la biblioteca. Este servicio que ofrece el asistente tambienaumentara la satisfaccion de los usuarios con respecto a lo que ofrece la web sin elmismo. El asistente ademas completara la informacion de la biblioteca con los datosque ofrece la API de Wikidata. Anadir que encima los usuarios estan, ya hoy en dıa,acostumbrados a usar los chats.

2.3. Analisis de los riesgos

ORGANIZACIONAL

Posible riesgo Probabilidad Efectos

Mala planificacion Moderada Serio

Tabla 2.1.: Riesgos sobre la organizacion

REQUERIMIENTOS

Posible riesgo Probabilidad Efectos Estrategias

BBDD: modificaciones en datos o tablas Moderada Catastrofico

1.Prevencion:Testeo y

corregir errores.2.Minimizacion:Hacerla lo masflexible posible

3.Plan decontingencia: se

redisena elmodelo.

Tabla 2.2.: Riesgos sobre los requerimientos

Viabilidad 13

TECNOLOGIA

Posible riesgo Probabilidad Efectos Estrategias

Dialogflow Baja Catastrofico

1.Prevencion:Hacer estudioexhaustivo y

testeo.2.Minimizacion:

Hacer unaplanificacion a

corto plazo3.Plan de

contingencia:pedir opinion a

una personaexterna.

Laravel Baja Serio

Angular Baja Serio

Express.js+Node.js Baja Serio

MySQL Baja Serio

SPARQL Moderada Serio

Grafana Baja Serio

Three.js Baja Serio

Tabla 2.3.: Riesgos sobre la tecnologıa

ESTIMACION


Mala organizacion de preferencias Baja Serio

Adicion de nuevas tareas Moderada Serio

Tabla 2.4.: Riesgos sobre la estimacion

14 2.3. Analisis de los riesgos

HERRAMIENTAS


Toggl: Version gratuita incompleta Alta Tolerable

Git: Falta de formacion Moderada Tolerable

Visual Studio Code: Mal manejo del programa Baja Tolerable

Postman: Falta de experiencia al utilizarlo Baja Tolerable

Apache y MySQL: Errores con el servidor y la BBDD locales Baja Serio

Blender: Necesidad de trabajar el modelado 3D Moderada Tolerable

Tabla 2.5.: Riesgos sobre las herramientas

PERSONAS


Errores en programacion Moderada Tolerable

Falta de conocimientos Moderada Serio

Tiempo limitado Moderada Serio

Enfermedad Muy baja Tolerable

Tabla 2.6.: Riesgos sobre el personal

3. Objetivos

En este capıtulos se mencionan los objetivos generales y especıficos planteados paraeste TFG.

3.1. Generales

El objetivo general del proyecto es crear un asistente virtual para la BVMC quemejore la experiencia de usuario del sitio web y facilite el acceso a los usuarios.

3.2. Especıficos

El objetivo general mencionado en la seccion anterior se puede dividir en 5 objetivosespecıficos:

1. Realizar un estudio sobre el uso de asistentes virtuales en bibliotecas digitales ysus contenidos.

2. Definir un conjunto de intenciones enfocado al dominio de bibliotecas quesatisfagan las consultas de los usuarios.

3. Disenar e implementar un asistente que facilite el acceso a la informacion de unabiblioteca digital, consultando repositorios de datos abiertos enlazados.

4. Realizar la validacion del asistente virtual a partir de un conjunto de usuarios.

5. Implementar un panel de administracion para el asistente virtual.

15

4. Marco Teorico

En este capıtulo se revisa el estado de la cuestion sobre desarrollar un asistentevirtual que utilice datos abiertos para el sistema de informacion elegido para el trabajo,la BVMC.

4.1. Asistentes virtuales

Un asistente virtual ayuda a los usuarios de sistemas computacionales,automatizando y realizando tareas con la mınima interaccion hombre-maquina.Basicamente es un agente de software. Una persona se comunica usando la voz omediante texto por lo tanto la interaccion que se da entre una persona y un asistentevirtual debe ser igual de natural. El usuario envıa un mensaje y el asistente virtual loprocesa, interpreta y responde de la misma manera. [Wikipedia.org, 2020]

La mayorıa de asistentes virtuales y casualmente todos los de mayor exito tienentanto nombre como timbre de voz femenino. Esto es debido a ciertos estudios quedemuestran que las mujeres sienten mas confianza hablando con un asistente femeninoy que los hombres se sienten mas atraıdos a utilizarlo de esta manera tambien.Basicamente se basa en la psicologıa humana el hecho de tomar la decision de poner unnombre femenino al asistente, se sabe que la gente lo va a utilizar mas y hay datosestadısticos que confirman esta teorıa por lo cual como interesa que el asistente seautilizado pues se le denomina con un nombre femenino.

Segun una encuesta realizada a principios de 2019 cerca del 90 por ciento de losencuestados afirman que prefieren el asistente virtual Siri, propiedad de Apple, en suvida diaria, mientras que un 11,6 por ciento opta por el asistente de Google, un 9,8 porciento por Alexa (Amazon), un 8,9 por ciento Cortana (Microsoft), un 6,5 por cientoBixby (Samsung) y un 2,5 por ciento Aura (Movistar). [Ipmark.com, 2019]

Si comparamos los 4 asistentes mas utilizados segun esta encuesta podemos sacarciertas conclusiones. Todos estan siendo mejorados en cuanto a su comprension comoen cuanto a las respuestas que ofrecen a los usuarios para sus preguntas. Estaconstante mejora es posible gracias a las empresas internacionales mas grandes queutilizan a personas para mejorar su IA.

17

18 4.1. Asistentes virtuales

Figura 4.1.: Asistentes virtuales mas utilizados a principios de 2019

En diciembre de 2018 se le hicieron 800 preguntas tanto a Amazon Alexa como aApple Siri, a Google Assistant y a Microsoft Cortana. Google respondio el 88 porciento de las preguntas correctamente, mientras que Apple obtuvo el 75 por ciento,Alexa obtuvo el 72.5 por ciento y Cortana entro con el 63 por ciento. Sin embargo, laprueba fue en altavoces inteligentes y no en telefonos inteligentes.

Ası que se realizo una prueba similar de inteligencia, pero esta vez se centrounicamente en las capacidades de asistente en el telefono y ademas ya no evaluaron aCortana porque Microsoft decidio el ano pasado que ya no era un competidor conAlexa, Google Assistant y Siri.

La eliminacion de Cortana y el aislamiento de los asistentes al uso de telefonosinteligentes no han cambiado el orden de las clasificaciones.

El Asistente de Google sigue en la cima, pero ahora con un puntaje de 92.9 porciento por responder preguntas correctamente. Siri responde correctamente el 83.1 porciento de las preguntas, mientras que Alexa obtiene el 79.8 por ciento de respuestas

Marco Teorico 19

correctas. [Zdnet.com, 2019]

Figura 4.2.: Comparacion entre Google Assistant, Siri y Alexa

Como se puede observar en la Figura 4.2, Google Assistant supera a los otros dos entodo excepto a Siri en comandos. A Alexa se le permite quedar por debajo de los demaspor el hecho de no estar integrada en dispositivos moviles, cosa que tanto GoogleAssistant en Android como Siri en iOS lo estan. Alexa vive en una aplicacion deterceros que puede enviar mensajes de voz y llamar a otros dispositivos Alexa pero nopuede enviar mensajes de texto, correos electronicos o realizar una llamada telefonica.

Los asistentes virtuales tambien son muy utiles en el area de la educacion. Puedenmejorar la comunicacion entre alumnos y profesores ademas de falicitar ciertostramites. Dos ejemplos son:

Tutor-bots1: La comunicacion entre alumnos y profesores en las universidades seha basado en la comunicacion presencial y tutorıas virtuales. Esta comunicacion,en general, se retrasa en el tiempo. Ultimamente, gracias a los avances en IA, loschatbots se han convertido en una realidad en las aplicaciones de mensajerıa y enlas redes sociales. Con respecto a la aplicacion de las TIC en un contextoeducativo, y en el caso particular de UACloud en la Universidad de Alicante, laaplicacion de este chatbot en la ensenanza facilita el trabajo de los profesoresproporcionando respuestas inmediatas a los alumnos. Este prototipo de chatbotse ha entrenado a traves de un conjunto de tutorıas. Estas tutorıas han sido

1http://rua.ua.es/dspace/handle/10045/99373

20 4.2. Fuentes de datos

facilitadas por distintos profesores. Tras la realizacion de un analisis de lastutorıas, se han disenado los distintos flujos de conversacion. Segun el tipo detutorıa se han extraıdo y clasificado las distintas frases de entrenamiento han sidoextraıdas y clasificadas. Esto ha permitido finalmente establecer las diferentesintenciones.

Chatbot UA2: Aitana es la nueva herramienta que han desarrollado desde laEscuela Politecnica Superior y el Grupo de Procesamiento y Sistemas deInformacion a peticion del Vicerrectorado de Campus y Tecnologıa y a la cual losestudiantes ya pueden acceder a traves de Telegram para guiarlos en el procesode matrıcula, capaz de realizar analisis del lenguaje y comprender lo que busca elusuario mientras interactua con este. Ahora mismo las funcionalidades que cubreAitana se centran en ayudar con el proceso de matriculacion, informar de ladocumentacion necesaria, sobre las notas de corte o las becas.

4.2. Fuentes de datos

Instituciones de todo tipo han comenzado a publicar sus datos en abierto pudiendoser reutilizados de multiples formas. Los repositorios basados en Web Semanticaproporcionan una fuente rica para alimentar y entrenar un asistente virtual. Un claroejemplo son las bibliotecas nacionales que ofrecen su contenido para que aplicacionesde terceros puedan acceder a el y utilizarlo.

Las instituciones relacionadas con el patrimonio cultural recientemente se hancentrado en la reutilizacion de sus colecciones digitales organizadas por la comunidadGLAM Labs. En este contexto, un Lab es un espacio fısico o digital para el desarrollo yla experimentacion de las nuevas ideas a traves del pensamiento disruptivo y lageneracion de oportunidades.

4.2.1. La Web Semantica y la definicion de los datos

La Web ha ido cambiando la forma en la que la sociedad trabaja y comunica.Permite la comunicacion con cualquier persona del mundo en cualquier momento deldıa y a muy bajo coste. Tambien se pueden realizar transacciones economicas a travesde Internet y acceder a millones de recursos independientemente de nuestro idioma ysituacion geografica. Los factores comentados han contribuido al exito de la Web pero,al mismo tiempo, tambien han originado sus principales problemas: sobrecarga deinformacion y heterogeneidad de fuentes de informacion con el consiguiente problemade interoperabilidad.

2https://web.ua.es/es/actualidad-universitaria/2019/julio19/8-14/un-sistema-de-inteligencia-artificial-guiara-a-los-alumnos-en-el-proceso-de-matriculacion-en-la-universidad-de-alicante.html

Marco Teorico 21

La Web Semantica permite a los usuarios delegar tareas en software resolviendo asıestos dos problemas. El software es capaz de procesar, razonar y combinar con sucontenido ademas de realizar deducciones logicas para resolver de manera automaticaproblemas cotidianos.

La Web Semantica es, por lo tanto, una Web extendida dotada de mayor significadoen la que cualquier usuario en Internet podra encontrar respuestas a sus preguntas deforma mas sencilla y veloz gracias a una informacion mucho mejor definida. Al dotar ala Web de mas semantica se pueden obtener soluciones a problemas habituales en labusqueda de informacion gracias a que este tipo de webs utilizan una infraestructuracomun. Esta arquitectura hace posible compartir, procesar y transferir informacion deforma sencilla. Todos los problemas que puede ocasionar una Web carente desemantica, debido a la dificultad que algunas veces puede tener el buscar ciertainformacion, se resuelven gracias a esta Web extendida y basada en el significado quese apoya en lenguajes universales. [W3c.es, 2005]

Para obtener una adecuada definicion de los datos, la Web Semantica utilizaesencialmente RDF, SPARQL y OWL, mecanismos que ayudan a convertir la Web enuna infraestructura global con la posibilidad de compartir y reutilizar documentos ydatos entre diferentes tipos de usuarios:

Resource Description Framework (RDF) es un mecanismo que proporcionainformacion descriptiva simple sobre los recursos que se encuentran en la Web.Este se utiliza en catalogos de libros, directorios, colecciones personales demusica, fotos, eventos, etc.

SPARQL Protocol and RDF Query Language (SPARQL) es un lenguaje deconsulta sobre los recursos RDF. Permite hacer busquedas y obtener los recursosde la Web Semantica incluso utilizando distintas fuentes datos.

Web Ontology Language (OWL) sirve para desarrollar vocabulario o temasespecıficos a los que asociar los recursos. Lo que hace, basicamente, esproporcionar un lenguaje para definir ontologıas estructuradas que pueden serutilizadas a traves de diferentes sistemas. Las ontologıas son utilizadas poraplicaciones que necesitan compartir informacion especıfica aunque tambien porlos usuarios y las bases de datos. Varios ejemplos serıan en campos determinadoscomo el de las finanzas, medicina, deporte, etc. ya que estas se encargan dedefinir terminos que se utilizan para representar y describir un area deconocimiento. Las ontologıas incluyen definiciones de conceptos basicos de uncampo determinado y las relaciones entre ellos.

A continuacion se explican con mayor claridad los dos primeros mecanismos, esdecir, el que la manera de ordenar la informacion almacenada sea mediante tripletas enRDF y el que para consultar estos datos se utilice el lenguaje SPARQL:


RDF es un conjunto de especificaciones de la World Wide Web Consortium(W3C) que se diseno en sus orıgenes para metadatos como un modelo de datos.Se ha llegado a utilizar, para la descripcion conceptual o modelado de lainformacion, como un metodo general que se implementa en los recursos web.Este utiliza una variedad de notaciones de sintaxis y formatos de serializacion dedatos. Los enfoques de modelado conceptual clasicos como entidad-relacion odiagramas de clases son similares al del modelo de datos RDF. Esto se debe a quese basa en la idea de hacer declaraciones sobre los recursos (en particular,recursos web) en forma de expresiones sujeto-predicado-objeto. Estas expresionesson conocidos como triples o tripletas en terminologıa RDF. El sujeto indica elrecurso y el predicado denota rasgos o aspectos del recurso y ademas expresa unarelacion entre el sujeto y el objeto. Por ejemplo, una forma de representar la ideade El cielo tiene el color azul en RDF es como la tripleta de un sujeto que denotael cielo, un predicado que denota tiene el color y un objeto que denota azul. Porlo tanto RDF cambia objeto por sujeto que se utilizarıa en la notacion clasica deun modelo entidad-atributo-valor en diseno orientado a objetos, objeto (el cielo),atributo (color) y el valor (azul). RDF es un modelo abstracto que tiene variosformatos de serializacion, por lo que la forma particular en que se codifica unatripleta varıa de un formato a otro. Anadir que este mecanismo es un importantecomponente de la actividad de la Web Semantica de W3C ya que permiteevolucionar la Web convencional permitiendo almacenar, intercambiar y utilizarinformacion que es legible por maquinas que se distribuyen a traves de la Web, loque a su vez, permite que los usuarios sean capaces de manejar la informacioncon mayor eficiencia y seguridad. El modelo de datos simple de RDF y lacapacidad de modelar diferentes conceptos abstractos, tambien ha permitido quecrezca su uso en la gestion de aplicaciones que no estan relacionadas con laactividad de la Web Semantica. [W3.org, 2014]

Por otro lado, SPARQL es un lenguaje estandarizado para la consulta de grafosRDF. Se encuentra normalizado por el RDF Data Access Working Group(DAWG) del W3C. En el desarrollo de la Web Semantica es necesaria estatecnologıa y se constituyo como recomendacion oficial del W3C. Como sucedecon SQL, es necesario que se distinga entre el motor para el almacenamiento yrecuperacion de los datos y el lenguaje de consulta. Debido a esto, existendiversas implementaciones de SPARQL. Estas generalmente estan ligadas aentornos de desarrollo y plataforma tecnologicas. Supuestamente SPARQL soloincorpora funciones para la recuperacion de sentencias RDF pero algunaspropuestas tambien incluyen operaciones para el mantenimiento (creacion,modificacion y borrado) de datos. [W3.org, 2013]

Marco Teorico 23

Figura 4.3.: Ejemplo que muestra como se convierte una consulta SQL a SPARQL

En la Figura 4.3 se observa como serıa tanto con el lenguaje de consulta SQL(arriba) como con el lenguaje de consulta SPARQL (abajo) solicitar el nombre, la edady el tipo de empleado de las personas registradas en la base de datos (en el caso deSQL) o en el repositorio de datos abiertos (en el caso de SPARQL). En el caso de laconsulta SQL se relacionan las tablas Persona y Empleado mediante el identificador yaque se tiene una clave ajena. En el caso de SPARQL se basa en las tripletas RDF parallegar a conectar los datos y mostrar finalmente lo que se solicita.

4.2.2. Bibliotecas digitales

Numerosas bibliotecas han publicado sus datos en abierto con el objetivo de serreutilizadas y enriquecidas como por ejemplo:

Biblioteca Nacional de Espana (BNE)3: La BNE consiste en un organismoautonomo encargado del deposito de todo el patrimonio bibliografico ydocumental de Espana. Esta dedicada a reunir, catalogar y conservar fondosbibliograficos. La BNE custodia alrededor de treinta millones de publicacionesproducidas en territorio nacional. Las publicaciones almacenadas datan desdecomienzos del siglo XVIII hasta la actualidad. Estas son libros, revistas, mapas,grabados, dibujos, partituras y folletos. La BNE difunde este patrimoniobibliografico a traves de su catalogo y de la elaboracion de la BibliografıaEspanola y desarrolla servicios al publico que van desde los servicios deinformacion bibliografica especializada y el prestamo interbibliotecario, a las salasde consulta y los servicios a distancia a traves su pagina web. La biblioteca

3http://datos.bne.es/inicio.html


propone al usuario un nuevo modo de acercarse a las colecciones y recursos de laBNE. Esta es mediante la publicacion de sus datos como Linked Open Data,basado en tecnologıas y estandares de la Web. Dispone de su propio SPARQLendpoint para facilitar el acceso desde aplicaciones remotas.

Biblioteca Nacional de Francia (BNF)4: Se estima que cuenta con treinta millonesde volumenes. La BNF ofrece sus recursos reuniendo en una sola pagina toda lainformacion de sus diversos catalogos, ası como su biblioteca digital Gallica. Paraello se utilizan herramientas basadas en Web Semantica, como SPARQL, desdelas cuales se tiene acceso a sus datos abiertos.

BVMC5: Es un proyecto de biblioteca digital a gran escala, alojado y mantenidopor la Universidad de Alicante. Comprende el repositorio de acceso abierto masgrande de textos y literatura historicos digitalizados en espanol del mundoiberoamericano. Cuando se lanzo oficialmente en 1999, la BVMC fue el primerarchivo digital de textos en espanol en Internet, reproduciendo inicialmente unas2.000 obras individuales de 400 de los autores mas importantes de la literaturaespanola, latinoamericana e hispana. Desde su inicio, en 1999, esta biblioteca haoptado por aplicar un marcado estructural basado en XML y el esquema decodificacion TEI para la creacion de sus documentos. Actualmente su catalogoesta compuesto por 230.000 registros bibliograficos, de los cuales unos 60.000 sonlibros, aunque tambien ofrece estudios crıticos y de investigacion, materialeshistoricos, periodicos y revistas, audiovisuales, vıdeos en lengua de signosespanola, archivos sonoros, etc. Las entradas en el catalogo se han migradorecientemente a una nueva relacion de base de datos cuyo modelo de datos seadhiere a los modelos conceptuales promovidos por la Federacion Internacional deAsociaciones e Instituciones de Bibliotecas (IFLA), en particular, segun lasespecificaciones FRBR y FRAD. El contenido de la base de datos ha sidomapeado posteriormente a tripletas RDF que emplean basicamente elvocabulario RDA (Descripcion de recursos y acceso) para describir las entidades,ası como sus propiedades y relaciones. A esta descripcion semantica del catalogobasada en RDF se puede acceder de manera online a traves de una interfaz queadmite la navegacion y la busqueda de informacion. Debido a su naturalezaabierta, estos datos publicos se pueden vincular y utilizar facilmente para nuevasaplicaciones creadas por desarrolladores e instituciones externas.[Semanticwebjournal.net, 2016]

British National Bibliography (BNB)6: La BNB registra la actividad editorial delReino Unido y la Republica de Irlanda. Tradicionalmente se incluıan unicamentetrabajos impresos pero recientemente se ha extendido a publicaciones electronicaso digitales. El conjunto de datos incluye metadatos sobre libros ya publicados y

4https://data.bnf.fr/5http://data.cervantesvirtual.com/blog/6https://bnb.data.bl.uk/

Marco Teorico 25

sobre libros en preparacion, publicaciones de revistas o de periodicos, etc. LinkedOpen BNB ofrece gran parte de la bibliografıa nacional britanica completa.Incluye libros publicados (incluidas monografıas publicadas a lo largo deltiempo), publicaciones en serie y libros nuevos y futuros que representanaproximadamente 4,4 millones de registros. Estos datos abiertos vinculados estandisponibles a traves de los servicios SPARQL. Se proporcionan dos interfacesdiferentes para acceder a ellos: un editor SPARQL online y un servicio endpointcon SPARQL para consultas remotas.

Los repositorios de datos abiertos publicados por las bibliotecas pueden ser una fuentede conocimiento para poder proporcionar informacion a los usuarios y ofrecerles susservicios. Sin estas bases de conocimiento los asistentes no tendrıan ninguna formarapida, sencilla y efectiva de obtener informacion actualizada sobre obras y autores porlo que serıan mucho mas tediosos de desarrollar. Las bibliotecas todavıa no explotan enforma de chatbot sus repositorios semanticos. Sin embargo, algunos ejemplos como KBLab bot7 sı lo hacen. KB Lab bot accede a una seleccion de imagenes que estandisponibles en el sitio web Geheugen van Nederland (Memoria de los Paıses Bajos).Este sitio web es una base de datos que contiene pinturas, dibujos, fotografıas,esculturas, ceramicas, sellos, carteles y recortes de periodicos de mas de un centenar demuseos, archivos y bibliotecas holandesas. Ademas, las imagenes mostradas desde KBLab Bot estan libres de derechos de autor.

7https://lab.kb.nl/tool/kb-lab-bot


Figura 4.4.: Funcionamiento del KB Lab Bot

En la Figura 4.48 se observa a KB Lab Bot funcionando desde un dispositivo movil.El usuario le solicita una imagen y este se la muestra.

Remarcando la reutilizacion de las colecciones digitales, recientemente ha sidopublicado el libro Open a GLAM Lab [Mahey et al., 2019] que describe el concepto delaboratorio en una institucion de patrimonio cultural, los pasos para crearlo y unconjunto de ejemplos y casos de uso.

8https://www.kb.nl/blogs/digitale-geesteswetenschappen/the-making-of-the-kb-lab-bot

Marco Teorico 27

4.2.3. Wikidata

Wikidata es una base abierta de conocimiento libre que puede ser leıda y editada portanto seres humanos como por boots. [Wikidata.org, 2019] Sus principales objetivosson el almacenamiento central para los datos estructurados de sus proyectos hermanosWikimedia (Wikipedia, Wikivoyage. . . ), proporcionar un sistema colaborativo paraalmacenar informacion estructurada, incluye interrelaciones con otros conjuntos dedatos abiertos y proporcionar una interfaz publica para realizar consultas ricas endatos.

Un ejemplo de asistente virtual que utiliza informacion de Wikidata es Chatbol[Segura et al., 2018]. Chatbol es un chatbot social relacionado con el futbol. Tienecomo objetivo responder una amplia variedad de preguntas relacionadas con la ligaespanola de futbol. Se comunica mediante texto con los usuarios. Uno de loscomponentes principales de Chatbol, un bloque NLU, esta capacitado para extraer losintents y las entidades asociadas relacionadas con preguntas de los usuarios sobrejugadores de futbol, equipos, entrenadores y partidos. La informacion para lasentidades se obtiene haciendo consultas SPARQL al sitio de Wikidata en tiempo real.Tras ello, los datos recuperados se utilizan para actualizar las respuestas especıficas delchatbot. Como estrategia alternativa, se incorporo un motor de conversacion basado enla recuperacion al sistema del chatbot. Este permite una mayor variedad y libertad derespuestas, tambien orientadas al futbol, para el caso en el que el modulo NLU no pudoresponder con gran confianza al usuario. La base de datos de respuesta basada en larecuperacion se compone de conversaciones reales recopiladas tanto de un canal defutbol IRC como de extractos relacionados con el futbol seleccionados en subtıtulos depelıculas, extraıdos de la base de datos de OpenSubtitles.

4.3. Tecnologıas para implementar un asistente virtual

Hay multitud de maneras distintas de desarrollar un asistente virtual. Una de ellases utilizando ciertas plataformas como Xenioo9 para chatbots y Voiceflow10 paravoicebots. La parte negativa de estas plataformas es que la mayorıa estan orientadas ausuarios no tecnicos y eso suele conllevar que el bot viva en sus servidores. Por ello lomas probable es que no interese que el funcionamiento de un chatbot dependa de unaempresa que podrıa no durar mucho.

Para bots pequenos o que se basen principalmente en proveer contenido, utilizar unaplataforma es ideal, la logica del bot es muy sencilla de estructurar, en muchas sefacilita un motor de entendimiento y se puede publicar en varios canales con solopulsar un boton.

9https://www.xenioo.com/en/10https://www.voiceflow.com/

28 4.3. Tecnologıas para implementar un asistente virtual

Sin embargo, es interesante utilizar un framework de desarrollo para casos mascomplejos. Por ejemplo cuando usan una base de datos, servicios especıficos o seimplementan con otro software. Los frameworks que hoy en dıa destacan mas y sonmas competitivos serıan Microsoft Bot Framework11, Dialogflow12 y Amazon Lex13. Elprimero es la solucion mas completa y es ideal para grandes empresas condesarrolladores que buscan personalizaciones serias y capacidades robustas. Tambien esla mas potente, con un arsenal de conectividad detras. El segundo es el servicio deprocesamiento y entendimiento de lenguaje natural que pertenece a Google, con menosherramientas que su competidor de Microsoft, pero a su favor Dialogflow tiene que esmas ligero y sencillo de utilizar y que ofrece las funcionalidades necesarias paradesarrollar un asistente virtual de calidad. Y el tercero es la solucion de Amazon paracompetir en el sector de los chatbots, a pesar de ser los lıderes del mercado envoicebots con Alexa, tener un servicio para plataformas de texto tambien es muyimportante para no quedarse atras. [Planetachatbot.com, 2019]

Hay otras herramientas para el desarrollo de asistentes virtuales, especializados enE-commerce, como por ejemplo Chatfuel, Bot para Facebook Messenger, Bots deTelegram, ChatScript, Chattypeople, Pandorabots, Botsify y Rebot.me.[Ecommerce-nation.es, 2018]

Por otro lado, Tensorflow es una librerıa de codigo abierto desarrollada por Googlepara aprendizaje automatico. [Tensorflow.org, 2020] Esta librerıa fue creada para podersatisfacer las necesidades de aquellos sistemas que buscan ser capaces de detectar ydescifrar correlaciones y patrones analogos al aprendizaje y razonamiento utilizado porlos seres humanos. Por ello, utilizando Tensorflow, es posible construir y entrenar redesneuronales. Actualmente es utilizado tanto en la investigacion como en los productosde Google frecuentemente reemplazando el rol de su predecesor de codigo cerrado,DistBelief. TensorFlow fue originalmente desarrollado por el equipo de Google Brainpara uso interno en Google antes de ser publicado bajo la licencia de codigo abiertoApache 2.0 en 2015.

Los lenguajes de programacion mas utilizados para el desarrollo de asistentesvirtuales son JAVA, Clojure, Python, C++, PHP, Ruby y Lisp.[Chatbotslife.com, 2019]

4.3.1. Dialogflow

Dialogflow tiene soporte para varios idiomas y edicion de codigo en lınea ademas deun SDK en multiples lenguajes de programacion. [Dialogflow.com, 2020]

11https://dev.botframework.com/12https://dialogflow.com/13https://aws.amazon.com/es/lex/

Marco Teorico 29

Ofrece dos APIs muy utiles:

Detect Intent API: para consultar la intencion del usuario en un texto desdecualquier medio externo.

Agent API: para cambiar dinamicamente el agente, pudiendo crear intenciones aconvenniencia sin tener que utilizar la interfaz web.

Ademas se puede alojar el bot en Google Cloud y ampliar su funcionalidadaprovechando todas las herramientas de esta plataforma. Por ejemplo se puede utilizarAutoML para cargar un dataset de conversaciones y hacer que el chatbot aprenda deellas.

Un punto importante a destacar aquı es Chatbase. Google ya es un experto enanalisis web y de usuarios gracias a su plataforma Google Analytics y con Chatbaseprovee una funcionalidad y visibilidad similares pero para chatbots, proporcionando deesta manera informacion sobre cuando, como y quien esta utilizando tu chatbot.

Despliegue en plataformas de mensajerıa

Con la funcion de integraciones se puede desplegar el chatbot en un monton deplataformas al igual que su competidor de Microsoft, pero lo que mas cabe a destacarde Dialogflow en este aspecto es que permite convertir el chatbot en un voicebotintegrandolo con Google Assistant. Tambien se puede hacer que este sea compatiblecon Alexa exportando el modelo del bot. Esta ultima funcion puede ahorrar muchotrabajo, aunque no funciona a la perfeccion, a la hora de hacer un chatbotmultiplataforma. Solo utilizando Dialogflow se puede hacer un chatbot que funcione enlas principales plataformas de mensajerıa, en una de las principales plataformas de vozy que ademas hace mas facil el desarrollo de un skill de Alexa.

Entendimiento de lenguaje natural

Esta es la parte principal de Dialogflow, su servicio de entendimiento de lenguajenatural es muy facil de usar, en gran parte por lo sencilla e intuitiva que es su interfaz,crear una conversacion es muy rapido y hay muchas opciones por defecto que sepueden reutilizar. Un herramienta interesante que provee es el Knowledge Connector,que permite al chatbot escanear documentos y artıculos para dar respuestasautomatizadas, aunque esta opcion solo funciona en bots en ingles de momento.

30 4.4. Tecnologıas para implementar el backend y el frontend

4.4. Tecnologıas para implementar el backend y el frontend

Hay multitud de frameworks que permiten implementar hoy en dıa tanto la parte delbackend como la del frontend en una aplicacion web. Para seleccionar las tecnologıasmas adecuadas para un proyecto se han de estudiar las diferentes caracterısticas queofrecen los frameworks y cuales son los objetivos del proyecto que se va a desarrollar.Cada framework se basa en un lenguaje de programacion en especıfico. Es muyimportante tener en cuenta este lenguaje y valorar si facilitara o complicara eldesarrollo del proyecto que se quiere llevar a cabo, pero tambien hay que ser conscientede cual es el grado de conocimiento que se tiene del mismo a la hora de elegir unatecnologıa. Por ultimo se ha considerar el nivel de compatibilidad que tiene latecnologıa elegida para desarrollar el backend con la elegida para el frontend.

A continuacion se muestran las distintas tecnologıas que pueden ser utilizadas parael desarrollo del backend:

Laravel: Es un framework de codigo abierto que sirve para desarrollaraplicaciones y servicios web con PHP 5 y PHP 7. Su filosofıa es desarrollar, deforma elegante y simple, codigo PHP. Tiene una gran influencia de frameworkscomo Sinatra, Ruby on Rails y ASP.NET MVC. Fue creado en 2011. Esta hechopara arquitectura Modelo Vista Controlador (MVC). Resuelve necesidadesactuales como autenticacion de usuarios y manejo de eventos. Ademas, esteframework cuenta con un soporte robusto para manejo de bases de datos y conun codigo modular y extensible por medio de un administrador de paquetes.[Laravel.com, 2020]

Express.js+Node.js14: Express.js es un framework para Node.js que sirve paraayudarnos a crear aplicaciones web en menos tiempo del habitual ya que nosproporciona funcionalidades como el enrutamiento, opciones para gestionarsesiones y cookies y muchas mas. Express.js esta basado en Connect. Connect esun framework basado en http para Node.js. Podemos decir que Connect, apartede sumarle nuevas funcionalidades, tiene todas las opciones del modulo http queviene por defecto con Node. Tambien, Express hace lo mismo con Connect. Porello tenemos un framwork ligero, rapido y muy util. [Enekodelatorre.com, 2016]Node.js es un entorno en tiempo de ejecucion multiplataforma para la capa delservidor sobre todo, de codigo abierto,pero no limitandose a ello. Fue creado conel enfoque de ser util en la creacion de programas de red altamente escalables,como por ejemplo, servidores web. Esta basado en el lenguaje de programacionECMAScript, asıncrono, con I/O de datos en una arquitectura orientada aeventos y basado en el motor V8 de Google.

Django: Django es un framework de aplicaciones web gratuito y de codigo abiertoescrito en Python. Respeta el patron de diseno conocido como

14https://expressjs.com/es/

Marco Teorico 31

Modelo–vista–template. Facilitar la creacion de sitios web complejos es la metafundamental de Django. Django pone enfasis en la conectividad, la reutilizacion yla extensibilidad de componentes. Promueve, ademas, el desarrollo rapido y elevitar la repeticion de codigo. Python es usado en todas las partes del framework,incluso en configuraciones, archivos, y en los modelos de datos.[Djangoproject.com, 2020]

Ruby on Rails: Es un framework escrito en el lenguaje de programacion Ruby deaplicaciones web de codigo abierto. Este sigue la arquitectura MVC. Trata decombinar la simplicidad con la posibilidad de desarrollar aplicaciones del mundoreal con un mınimo de configuracion y escribiendo menos codigo que con otrosframeworks. Rails hace uso de la metaprogramacion que permite el lenguaje deprogramacion Ruby. Esto resulta en una sintaxis muy legible para muchos de sususuarios. Rails se distribuye a traves de RubyGems. Este ultimo es el formatooficial de paquete y canal de distribucion de bibliotecas y aplicaciones Ruby.[Rubyonrails.org, 2020]

MySQL15: Es un sistema de gestion de bases de datos relacional y es consideradacomo la base de datos mas popular de codigo abierto. Tambien es una de las maspopulares en general junto a Oracle y Microsoft SQL Server, sobre todo paraentornos de desarrollo web.

MongoDB16: Es un sistema de base de datos NoSQL. Esta orientado adocumentos de codigo abierto. MongoDB guarda estructuras de datos BSON(que es una especificacion muy similar a JSON) con un esquema dinamico en vezde, como se hace en las bases de datos relacionales, guardar los datos en tablas.Esto hace que la integracion de los datos en ciertas aplicaciones sea mas facil yrapida. Es una base de datos con multiples funcionalidades y adecuada para suuso en produccion. Esta base de datos es muy utilizada en la industria.

Grafana: Grafana es un software libre que esta basado en licencia de Apache 2.0.Este permite la visualizacion y el formato de datos metricos. Ademas se puedencrear cuadros de mando y graficos a partir de multiples fuentes, incluidas basesde datos de series de tiempo como Graphite, InfluxDB y OpenTSDB.[Grafana.com, 2020]

Con respecto a las tecnologıas que existen para implementar la parte del frontend sedetallan las siguientes:

Angular: Es un framework para aplicaciones web desarrollado en TypeScript.Este es mantenido por Google y ademas es de codigo abierto. Se utiliza paramantener y crear aplicaciones web de una sola pagina. Su objetivo, en un esfuerzopara hacer que el desarrollo web y las pruebas sean mas faciles, es aumentar las

15https://www.mysql.com/16https://www.mongodb.com/es

32 4.4. Tecnologıas para implementar el backend y el frontend

aplicaciones basadas en navegador con capacidad de Modelo Vista Controlador(MVC). La biblioteca lee el HTML que puede contener ciertos atributos de lasetiquetas personalizadas adicionales. Tras esto obedece a las directivas de losatributos personalizados y se encarga de unir las piezas de entrada o salida de lapagina a un modelo representado por las variables estandar de JavaScript.Angular utiliza las propiedades de sus clases tipo Componentes para hacer elbinding de los datos. En dichas clases tenemos propiedades (variables) y metodos(funciones a llamar). Angular, a pesar de ser incompatible con su predecesor, esla evolucion de AngularJS. [Angular.io, 2020]

React: Es una biblioteca Javascript de codigo abierto. Fue disenada para podercrear interfaces de usuario. Su principal objetivo es el de facilitar el desarrollo deaplicaciones en una sola pagina. React trata de ayudar a los desarrolladores aconstruir aplicaciones que usan datos que van cambiando todo el tiempo. Suobjetivo es ser facil de combinar, sencillo y declarativo. React solo maneja lainterfaz de usuario en una aplicacion ya que serıa la Vista en un contexto en elque se use el patron MVC o Modelo-vista-modelo de vista (MVVM). Tambienpuede ser utilizado con las extensiones de React-based que se encargan de laspartes no-UI (que no forman parte de la interfaz de usuario) de una aplicacionweb. [Es.reactjs.org, 2020]

Vue.js: Es un framework escrito en JavaScript de codigo abierto que se basa en elpatron MVVM. Sirve para construir interfaces de usuario y aplicaciones de unasola pagina. Es muy simple de utilizar e integrar con otros proyectos. Estadisenado desde el inicio para ser adoptado incrementalmente. [Vuejs.org, 2020]

Three.js: Es una biblioteca escrita en JavaScript para crear y mostrar graficosanimados por ordenador en 3D en un navegador Web. Ademas puede serutilizada en conjuncion con el elemento canvas de HTML5, SVG o WebGL. Elcodigo fuente se encuentra alojado en un repositorio en GitHub. Actualmente esconsiderada como una de las bibliotecas mas importantes para la creacion deanimaciones en WebGL. Este tipo de bibliotecas de alto nivel como SceneJS,Three.js o GlgE, PhiloGL u otras, permiten al autor, crear complejasanimaciones en 3D, listas para ser mostradas en el navegador. Esto permitehacerlo sin el esfuerzo que se requerirıa, para el caso de una aplicacionindependiente o tradicional, con el uso de plugins. [Threejs.org, 2020]

4.4.1. Servicios a utilizar de terceros

Al tratarse este TFG de un asistente virtual y no de un chatbot se han de anadirdiversas funcionalidades que los usuarios puedan utilizar en su dıa a dıa, a parte de lasque ya ofrecen los servicios de la BVMC, Wikidata y Dialogflow comentadospreviamente en este mismo capıtulo.

Marco Teorico 33

Se valoraron los siguientes servicios de terceros a la hora de anadir nuevasfuncionalidades al asistente:

AEMET OpenData: Es un API REST (Application Programming Interface.REpresentational State Transfer) desde el cual se pueden descargar los datosexplicitados en el Anexo II de la resolucion de 30 de diciembre de 2015 deAEMET (Agencia Estatal de Meteorologıa) gratuitamente, por la que seestablecen los precios publicos que han de regir la prestacion de serviciosmeteorologicos y climatologicos. [Aemet.es, 2020]

Horoscopo-cli17: API REST que permite visualizar el horoscopo del dıa para unsigno especıfico en los siguientes aspectos: amor, dinero y salud.

Cloud Translation: La API de Cloud Translation pertenece a Google y puedetraducir dinamicamente texto entre miles de pares de idiomas. Tambien permitela integracion de manera programatica de sitios web y programas con el serviciode traduccion. Cloud Translation forma parte de la familia mas amplia de la APIde Cloud Machine Learning. [Cloud.google.com, 2020]

Yandex: La API en cuestion proporciona acceso al servicio de traduccionautomatica en lınea de Yandex. Admite mas de 90 idiomas y puede traducirpalabras separadas o textos completos. La API permite incrustar el servicio enuna aplicacion movil o servicio web para usuarios finales. Tambien permitetraducir grandes cantidades de texto, como documentacion tecnica.[Tech.yandex.com, 2020]

Twitter API: Twitter permite acceder a partes de sus servicios mediante su APIpara permitir a las personas crear software que se integre con Twitter. Los datosde Twitter son unicos y se extraen a partir de datos de la mayorıa de las otrasplataformas sociales porque reflejan informacion que los usuarios decidencompartir de forma publica. Su API ofrece acceso amplio a los datos de Twitterque los usuarios han decidido compartir con el mundo. Twitter tambien escompatible con APIs que permiten a los usuarios administrar su propiainformacion de Twitter que no es publica (como los Mensajes directos) yofrecerla a los desarrolladores que ellos han autorizado a administrarla.[Developer.twitter.com, 2020]

Trawlingweb.com: Es una API de noticias y datos sociales, una alternativa real ala API de Google News y a las APIs sociales. [Trawlingweb.com, 2020]

Bing Web Search API: API desarrollada por Microsoft. Permite incorporar elservicio de busqueda inteligente a las aplicaciones. Tambien permite combinarmillones de paginas web, imagenes, vıdeos y noticias en los resultados de lasbusquedas. [Azure.microsoft.com, 2020]

17https://github.com/joacorandom/horoscopo-cli

34 4.5. UX y diseno

FAROO API18: FAROO es un motor de busqueda web. La funcionalidad debusqueda de FAROO se basa en la busqueda de igual a igual (P2P), las opinionesy la atencion generadas por los usuarios, y la popularidad de la pagina webbasada en los usuarios. La API de FAROO permite a los desarrolladores accedere integrar la funcionalidad de busqueda de FAROO con otras aplicaciones. Elmetodo API disponible muestra resultados de busqueda, resultados de noticias ytemas de tendencias. [Programmableweb.com, 2012]

4.5. UX y diseno

La experiencia de usuario (UX) es una de las partes mas importantes a tener encuenta cuando se desarrolla cualquier herramienta virtual o programa para asegurar eluso del mismo por multitud de usuarios. El usuario busca entender con apenas unmınimo de esfuerzo que puede hacer con la aplicacion o sistema virtual que tienedelante y como ha de hacerlo. Por ello en toda plataforma o aplicacion web hay querealizar un diseno intuitivo y practico que ademas resulte atractivo para el usuario. Escrucial una buena experiencia de usuario en los asistentes virtuales para que lasinteracciones con la tecnologıa de IA sean lo mas sencillas posible.

La libreria Three.js permite mostrar un elemento circular 3D en movimientomientras el asistente se encuentra cerrado o minimizado y ası de esta forma llamar laatencion del usuario para que haga click en el y comience a utilizar sus servicios.Ademas, al abrirlo el asistente se muestra con la interfaz de un chat que permite que elusuario sepa donde ha de escribir y como ha de enviar sus mensajes. Tambien se veclaramente que mensajes pertenecen al usuario y cuales al asistente puesto que sealinean a la derecha o a la izquierda en la ventana del chat respectivamente.

18https://rapidapi.com/faroo/api/faroo-web-search/

5. Metodologıa

Para el desarrollo de este proyecto se ha utilizado la metodologıa Scrum. Estametodologıa se caracteriza por basarse en una estructura de desarrollo incremental,esto es, cualquier ciclo de desarrollo del producto y/o servicio se desgrana en pequenosproyectos divididos en distintas etapas: analisis, desarrollo y testing. En la etapa dedesarrollo se encuentran lo que se conoce como iteraciones del proceso o Sprint, esdecir, entregas regulares y parciales del producto final.

Esta metodologıa permite abordar proyectos complejos que exigen una flexibilidad yuna rapidez esencial a la hora de ejecutar los resultados. La estrategia ira orientada agestionar y normalizar los errores que se puedan producir en desarrollos demasiadolargos a traves de reuniones frecuentes para asegurar el cumplimiento de los objetivosestablecidos. [Iebschool.com, 2019]

Estas reuniones presenciales se han llevado a cabo con los tutores asignados alproyecto con una frecuencia mensual. Tambien se ha tenido comunicacion con ellosmediante correo electronico semanalmente.

Es cierto que no se trata de un proyecto en el que haya implicado un equipo ya quees individual pero se puede considerar que se ha utilizado Scrum debido a laposibilidad de comunicarse con los tutores para ir ajustando detalles del proyectoconforme a su desarrollo.

El proyecto se ha planificado mediante el uso de Hitos y Sprints. Cada Hito tieneaproximadamente una duracion mensual estimada. A su vez cada Hito esta compuestopor sprints semanales por lo que cada Hito esta formado mas o menos por 4 sprints. Aestos sprints se les denomina iteraciones. Ademas, todas las tareas y el tiempo que seha dedicado han sido registrados con la herramienta online Toggl. En el Anexo II (B)se encuentra el informe obtenido de esta herramienta.

Para el Hito 0 (09/09/2019-29/09/2019) se debıan cumplir los objetivos decomenzar con la memoria y de preparar el proyecto Laravel sobre el que construirel resto de funcionalidades. Respecto al primer objetivo se tuvo que aprender autilizar LaTeX debido a que la plantilla proporcianada para la realizacion de lamemoria estaba en este formato. La escritura y edicion de la memoria se harealizado a traves de la plataforma online Overleaf. Durante la primera iteraciono semana se realizo la portada, los preambulos, agradecimientos y citas celebres,la introduccion y se comenzo el apartado Modelo de negocio. Durante la segunda

35

36

iteracion se termino el apartado Modelo de negocio (Lean Canvas, analisis DAFOy analisis de riesgos) y se instalo todo lo necesario para poder crear y desarrollarel proyecto Laravel. Ademas se marcaron los objetivos del proyecto tantogenerales como especıficos y estos se anadieron a la memoria. La tercera y ultimaiteracion de este Hito consistio en crear y establecer la estructura inicial de laAPI RESTful en el proyecto Laravel. Se realizaron pruebas para comprobar quese inyectaban datos en la base de datos local creada para el proyecto con exito ytambien si se podıan obtener los mismos. Para esto se creo un modelo y uncontrolador de prueba y se prepararon una llamada GET y una llamada POSTpara el mismo. Ademas tambien se creo un repositorio1 en GitHub en el cual sefue guardando y actualizando el proyecto constantemente mediante el uso deGitKraken.

Para el Hito 1 (30/09/2019-03/11/2019) se debıan cumplir los objetivos deavanzar en la memoria, desarrollar los intents basicos en Dialogflow, integrarAngular en el proyecto Laravel para comenzar el desarrollo de la parte del cliente,realizar una version inicial de la interfaz del asistente en el proyecto Angular yconectarlo con Dialogflow y consumir datos de la BVMC, de Wikidata, entreotros servicios. En la primera iteracion se creo el asistente en Dialogflow y seimplementaron los intents basicos para el mismo (SmallTalk...). De esta manerael asistente ya era capaz de responder a las preguntas y expresiones tıpicas que lepodrıa escribir un usuario (¿Como te llamas?, Te quiero, Me caes genial...).Ademas se integro informacion sobre la BVMC por si el usuario le preguntaba yası que el asistente fuese capaz de responderle correctamente. Tambien se realizoel apartado Marco Teorico de la memoria. En la segunda iteracion se integroAngular en el proyecto, se realizo una primera version de la interfaz del asistente,se conecto Angular con la API de Dialogflow para que desde la interfaz delproyecto se enviasen mensajes a Dialogflow y este devolviese la respuesta delasistente mostrandose en la interfaz tambien y se implemento en Angular lamanera de coger datos de Wikidata mediante consultas en SPARQL. En losultimos dıas de la iteracion se practico la realizacion de consultas con SPARQL aWikidata y se comenzaron a realizar intents en Dialogflow que pedıan datos aWikidata para elaborar las respuestas del asistente. En la tercera iteracion secontinuo la implementacion de intents en Dialogflow que consumıan datos deWikidata, mas concretamente consumıan datos sobre el autor Miguel deCervantes Saavedra. Tambien se aprendio a consumir datos de la API deAEMET (Agencia Estatal de Meteorologıa) para poder ofrecer el tiempo actual atraves del asistente y se prepararon intents para ello. En la cuarta iteracion seimplemento en Angular la manera de obtener datos de la BVMC tambienmediante SPARQL. Ademas se realizaron intents en dialogflow que utilizabandatos obtenidos de la BVMC para elaborar sus respuestas. En la ultima iteracionde este Hito se realizaron los apartados Metodologıa y Analisis y especificacion de

1https://github.com/PabloGuijarroMarco/APIRestful

Metodologıa 37

la memoria. Tambien se comenzo con los apartados Diseno e Implementacion.

Para el Hito 2 (04/11/2019-01/12/2019) se debıa cumplir el objetivo de concluircon el desarrollo del proyecto, mas concretamente, acabar el diseno de la interfaz,terminar con la implementacion de la base de datos y de los cuadros de mando eimplementar las funcionalidades del asistente restantes tanto relacionadas con loque ofrece la BVMC (por ejemplo, buscar autores, obras y obras por autor) comode algunas mas que consumıan otros servicios de terceros (traducir a multitud deidiomas el texto que desee el usuario, consultar el horoscopo del dıa, realizarbusquedas de paginas web, consultar noticias de actualidad y poder acceder acontenido de las redes sociales de Twitter y YouTube de la BVMC). En laprimera iteracion se integro la funcionalidad de consultar el horoscopo del dıa yla de traducir. En la segunda iteracion se implementaron las funcionalidades debuscar autores, de buscar obras, de realizar busquedas de paginas web, de buscarnoticias de actualidad y de ofrecer vıdeos y los ultimos tweets de las cuentasoficiales de YouTube y Twitter de la BVMC. Tambien se anadieron intentsinformativos sobre la BVMC como por ejemplo para mostrar sus redes sociales.En la tercera iteracion se solucionaron algunos fallos de comportamiento y dediseno que tenıa el asistente y ademas se implemento la funcionalidad de buscarobras de un autor en concreto. Tambien se mejoro el flujo conversacional quetenıa el asistente. En la cuarta iteracion se cambiaron los colores de la interfaz delasistente por los colores corporativos de la BVMC, se integro la librerıa Three.jsal proyecto Angular, se diseno con el programa Blender el modelo 3D a mostrarcuando el asistente esta cerrado, se integro este en la interfaz, se terminaron deimplementar los modelos, las rutas y los controladores en el proyecto Laravel, secreo la base de datos final, se preparo al asistente para que se registrasen lasacciones que los usuarios hacıan al utilizarlo y se anadio Grafana mostrando loscuadros de mando debido a su conexion con la base de datos del proyecto.

Para el Hito 3 (02/12/2019-29/12/2019) se debıan cumplir los objetivos derealizar las pruebas del proyecto (Unit Testing que se puede ver en la seccion 9.1y Test Cases que se pueden ver en la seccion 9.2), corregir los fallos del proyectoencontrados en las pruebas y terminar la memoria, preparar la defensa delproyecto y realizar el poster para la misma. En la primera iteracion se realizaronlas pruebas unitarias en el proyecto Laravel (Unit Testing) y se comenzaron aactualizar y corregir las secciones ya realizadas de la memoria en hitos anteriores.En la segunda iteracion se terminaron de actualizar y de corregir estas seccionesy se terminaron las secciones incompletas de la memoria. Ademas, se realizo laevaluacion de usuarios del proyecto (Test Cases). En la tercera iteracion secorrigieron los fallos detectados en los testeos del proyecto, se realizo el posterpara la defensa del proyecto y se volvio a repasar la memoria corrigiendo losultimos detalles. En la cuarta y ultima iteracion se preparo la entrega delproyecto y la defensa del mismo.

38

Figura 5.1.: Visualizacion del repositorio del proyecto desde GitKraken

Para la gestion del proyecto se utilizo un control de versiones que permite registrarlos cambios realizados sobre el proyecto a lo largo del tiempo de tal manera que esposible recuperar versiones especıficas mas adelante. Dicho control de versiones se usapara acceder al registro de modificaciones sobre un fichero. Esto permite ver loscomentarios asociados a cada modificacion y la persona que la ha realizado. Ademasexiste la posibilidad de regresar al estado anterior de un fichero o conjunto de ficherosy se pueden crear ramas para gestionar cambios que finalmente se mezclaran con larama principal. La herramienta que se utiliza es GitKraken, una interfaz graficamultiplataforma para git desarrollada con Electron. De forma muy sencilla se puedellevar el completo seguimiento de los repositorios, gestionar las ramas y tags existentes,consultar el historial de trabajo y commits, entre otras acciones. Esta se enlaza conGitHub para evitar el uso de la consola ya que de forma visual y por medio de clicks serealizan de una manera mucho mas sencilla. Finalmente la visualizacion de las ramas yel historial de commits se mejora con esta herramienta que por consola resulta complejode entender. [Platzi.com, 2017] La Figura 5.1. muestra los ultimos commits realizadosen el proyecto en el momento en el que se realizo la captura. Ademas se aprecia que elrepositorio estaba totalmente actualizado a lo que habıa en local en ese momento.

6. Analisis y especificacion

En este capıtulo se describen todos aquellos factores que afectan al producto y a susrequisitos sin describir los requerimientos. Ademas, este capıtulo tambien incluye ladescripcion de los requisitos especıficos.

6.1. Perspectiva de producto

El sistema es un producto disenado para trabajar en un entorno online, por lo que suutilizacion es de forma descentralizada y no dependiente de otros sistemas. El sistemapermite al usuario tanto resolver dudas acerca del sitio web de la BVMC comointeractuar con el contenido, en este caso obras, datos informativos, poemas, libros...

Se puede estudiar la frecuencia de uso por parte de los usuarios del asistente y de susfuncionalidades gracias a los cuadros de mando. Esto permite poder sacar conclusionespara futuras mejoras del asistente. Para ofrecer las distintas funcionalidades, el sistemase nutrira tanto de APIs e informacion de terceros como de la misma biblioteca.

6.2. Funciones del producto

El asistente virtual dispone de distintas funcionalidades que son accesibles para todoaquel que visite el sitio web de la BVMC:

Mantener una conversacion.

Resolver dudas acerca de la BVMC.

Pedir la prevision del tiempo del dıa de hoy o del dıa siguiente para Espana.

Solicitar informacion sobre la vida de Miguel de Cervantes (lugar de nacimiento,sus obras, imagenes. . . ).

Solicitar todas las obras disponibles en la BVMC en un idioma concreto.

Acceder a todas las ediciones existentes de El Quijote.

39

40 6.3. Restricciones

Ofrecer una interfaz grafica que combina elementos 2D con elementos 3D.

Solicitar la prevision diaria del horoscopo.

Traducir un texto a otro idioma.

Buscar autores, obras o las obras de un autor en concreto.

Mostrar los ultimos tweets publicados en la cuenta de Twitter de la BVMC.

Mostrar vıdeos subidos al canal de YouTube de la BVMC.

Solicitar noticias nacionales e internacionales de actualidad.

Buscar paginas web con el motor de busqueda integrado en el asistente.

Ademas, los administradores del sistema tendran acceso a cuadros de mandos que lespermitiran monitorizar el uso del asistente virtual y de sus distintas funcionalidades.De esta manera, se podran identificar las funcionalidades mas utilizadas y la frecuenciapara realizar mejoras.

6.3. Restricciones

El sistema necesita de una base de datos (BD) para registrar la actividad de losusuarios a traves del asistente y ası poder generar los cuadros de mando.

Los lenguajes de programacion empleados seran: HTML5, CSS3, PHP y JS apartir de frameworks.

Uso de APIs externas y obtencion de datos mediante SPARQL.

Analisis y especificacion 41

6.4. Requisitos especıficos

6.4.1. Requerimientos funcionales

Requisito RF-1

Nombre Mantener una conversacion

Descripcion Es la posibilidad de enviar mensajes al asistente y recibir las respuestas del mismo.

Estas respuestas han de ser acordes a lo expresado por el usuario.

Prioridad Muy alta

Tabla 6.1.: Requerimiento funcional mantener una conversacion

Requisito RF-2

Nombre Resolver dudas

Descripcion Resolver dudas acerca de la web realizando una pregunta al asistente.

Prioridad Alta

Tabla 6.2.: Requerimiento funcional resolver dudas

Requisito RF-3

Nombre Conocer prediccion del tiempo

Descripcion Solicitar la prediccion del tiempo del dıa o del dıa siguiente.

Prioridad Media

Tabla 6.3.: Requerimiento funcional conocer prediccion del tiempo

42 6.4. Requisitos especıficos

Requisito RF-4

Nombre Informar sobre Miguel de Cervantes

Descripcion Solicitar informacion sobre Miguel de Cervantes.

Prioridad Alta

Tabla 6.4.: Requerimiento funcional informar sobre Miguel de Cervantes

Requisito RF-5

Nombre Consultar obras disponibles en cierto idioma

Descripcion Dar acceso a las obras almacenadas en la BVMC en un idioma en concreto.

Prioridad Muy alta

Tabla 6.5.: Requerimiento funcional consultar obras disponibles en un idioma en concreto

Requisito RF-6

Nombre Consultar ediciones del Quijote

Descripcion Solicitar todas las ediciones de El Quijote almacenadas en la BVMC.

Prioridad Muy alta

Tabla 6.6.: Requerimiento funcional consultar ediciones de El Quijote

Requisito RF-7

Nombre Solicitar prediccion horoscopo

Descripcion Solicitar la prediccion diaria del horoscopo.

Prioridad Media

Tabla 6.7.: Requerimiento funcional solicitar prediccion horoscopo


Requisito RF-8

Nombre Realizar traducciones

Descripcion Posibilidad de traducir un texto a otro idioma.

Prioridad Media

Tabla 6.8.: Requerimiento funcional realizar traducciones

Requisito RF-9

Nombre Realizar busquedas de contenido de la BVMC

Descripcion Posibilidad de buscar autores, obras y las obras de un autor registradas en la BVMC.

Prioridad Muy Alta

Tabla 6.9.: Requerimiento funcional busquedas de contenido de la BVMC

Requisito RF-10

Nombre Mostrar ultimos tweets de la BVMC

Descripcion Mostrar los ultimos tweets publicados en la cuenta de Twitter de la BVMC.

Prioridad Alta

Tabla 6.10.: Requerimiento funcional mostrar ultimos tweets de la BVMC

Requisito RF-11

Nombre Mostrar vıdeos del canal de YouTube de la BVMC

Descripcion Mostrar vıdeos subidos al canal de YouTube de la BVMC.

Prioridad Alta

Tabla 6.11.: Requerimiento funcional mostrar vıdeos del canal de YouTube de la BVMC


Requisito RF-12

Nombre Solicitar noticias de actualidad

Descripcion Solicitar noticias actuales publicadas en Internet.

Prioridad Media

Tabla 6.12.: Requerimiento funcional solicitar noticias de actualidad

Requisito RF-13

Nombre Realizar busquedas de paginas web

Descripcion Solicitar resultados web utilizando el motor de busqueda integrado en el asistente.

Prioridad Media

Tabla 6.13.: Requerimiento funcional realizar busquedas de paginas web

Requisito RF-14

Nombre Registrar accion

Descripcion Registrar en la base de datos las acciones que realiza el usuario.

Prioridad Alta

Tabla 6.14.: Requerimiento funcional registrar accion

Requisito RF-15

Nombre Generar cuadros de mando

Descripcion Mostrar el registro almacenado en la base de datos de forma visual.

Prioridad Alta

Tabla 6.15.: Requerimiento funcional generar cuadros de mando


6.4.2. Requerimientos no funcionales

Requisito RNF-1

Nombre Disponibilidad

Descripcion El sistema podra ser utilizado 24 horas al dıa, 7 dıas a la semana y por infinitud de usuarios a la vez.

Prioridad Muy alta

Tabla 6.16.: Requerimiento no funcional disponibilidad

Requisito RNF-2

Nombre Seguridad

Descripcion Todas las peticiones son a APIs externas con una gran seguridad (API Keys, permisos...)

Prioridad Muy alta

Tabla 6.17.: Requerimiento no funcional seguridad

Requisito RNF-3

Nombre Rendimiento

Descripcion Capacidad del asistente de responder en tiempo real a los mensajes del usuario.

Prioridad Muy alta

Tabla 6.18.: Requerimiento no funcional rendimiento


Requisito RNF-4

Nombre Multiplataforma

Descripcion Interfaz preparada para ser visualizada en escritorio y dispositivos moviles.

Prioridad Muy alta

Tabla 6.19.: Requerimiento no funcional multiplataforma

Requisito RNF-5

Nombre Ofrecer interfaz atractiva

Descripcion Implementar la interfaz combinando elementos 2D con otros 3D.

Prioridad Alta

Tabla 6.20.: Requerimiento no funcional ofrecer interfaz atractiva

6.4.3. Diagrama de casos de uso

Un diagrama de casos de uso tiene la caracterıstica principal de ser un diagrama enel cual se presenta a los usuarios finales del sistema y que, ademas, trata de recogertodas las maneras en las que los usuarios interactuaran con la aplicacion.

Este tipo de diagrama forma parte de los diagramas de comportamiento. Estosmuestran de forma visual y sencilla como funciona el sistema para que todas laspersonas involucradas en el proyecto lo entiendan. [Openclassrooms.com, 2018]

En la Figura 6.1 se puede observar la interaccion que el sistema le permite al usuarioy como los administradores de la BVMC pueden consultar gracias a los cuadros demando cuando y para que se ha utilizado el asistente.


Figura 6.1.: Diagrama de casos de uso

7. Diseno

En este capıtulo se describe la arquitectura propuesta para el desarrollo de estetrabajo.

7.1. Arquitectura seleccionada

Para alcanzar los objetivos planteados en el capıtulo 3, se ha implementado unaarquitectura orientada a servicios en un modelo multicapa que se describe con detalleen la Figura 7.1. Se pueden observar en ella las capas que componen la arquitecturaplanteada. Se ha conseguido una arquitectura escalable, flexible y debilmente acopladaque facilita la interaccion con diferentes sistemas.

Para la integracion de la arquitectura se ha optado, tras un proceso de analisisprevio, por un sistema REST. Existen multitud de ventajas en este tipo de sistemascomo la separacion entre el cliente y el servidor, la visibilidad, fiabilidad y escalabilidady, ademas, la API REST siempre es independiente del tipo de plataformas o lenguajes.[Bbvaopen4u.com, 2016]

La capa de presentacion es la interfaz de usuario encargada de la visualizacion de losdatos. La siguiente es la capa de servicios que pone a disposicion de los usuarios lasfuncionalidades ofrecidas en forma de servicios web. La capa intermedia o de negociogestiona la logica de la aplicacion estableciendo las reglas y las transformaciones de lainformacion que fluye a traves del sistema. Con ella se comunica tanto la capa deservicios como el cliente.

La capa de acceso a datos es la encargada de la comunicacion con la capa de datosformada por las diferentes fuentes de datos, en este caso una base de datos relacional.Una de las ventajas de este tipo de arquitectura es la independencia de cada una de lascapas, lo que facilita la mantenibilidad y reutilizacion de componentes software.

Ademas, el protocolo REST facilita que los desarrollos de las diferentes partes de unproyecto se puedan dar de manera independiente.

49

50 7.1. Arquitectura seleccionada

Figura 7.1.: Arquitectura REST orientada a servicios

Diseno 51

7.2. Tecnologıas

En la Figura 7.2 se observan las distintas tecnologıas utilizadas en el desarrollo deltrabajo y su relacion entre ellas.

Figura 7.2.: Tecnologıas utilizadas en el proyecto

52 7.2. Tecnologıas

Las tecnologıas utilizadas se pueden dividir en tres grandes grupos: backend,frontend y servicios de terceros.

A continuacion, se detallan las tecnologıas pertenecientes a cada uno de ellos. Enprimer lugar, las tecnologıas que se han utilizado en la parte del backend:

Laravel: En este proyecto se ha utilizado para desarrollar una API RESTful parapoder almacenar en una base de datos MySQL todas las acciones que realizan losusuarios para su posterior monitorizacion mediante cuadros de mando.

MySQL: Se ha creado una base de datos de este tipo para obtener un registro delas acciones realizadas por los usuarios a traves del asistente virtual. Este registrose utiliza para generar cuadros de mando para que los administradores analicen yestudien el uso que se le da al asistente.

Grafana: Este software se utiliza para generar los cuadros de mando basandose enlos datos recogidos en la base de datos comentada anteriormente.

Express.js+Node.js: Se han utilizado para la creacion de un pequeno servidordesde el cual enviar a Twitter las API Keys ofrecidas por ellos y ası, manteniendouna sesion iniciada, poder solicitarle autorizacion para comenzar a realizarllamadas a su API.

Con respecto a las tecnologıas que se han utilizado en la parte del frontend sedetallan las siguientes:

Angular: En este proyecto se ha utilizado Angular para dotar al asistente virtualde una interfaz ademas de para consumir datos y servicios de terceros. A travesde TypeScript altera el contenido de ciertos mensajes de los que envıa el asistenteal usuario para incluir en ellos los datos que ha recibido Angular de servicios deterceros y ası poder dar una respuesta mas realista y actualizada al usuario.Tambien se utiliza para realizar las llamadas pertinentes a la API RESTful creadacon Laravel, mencionada anterioremente, para ası ir almacenando en la base dedatos del proyecto las acciones que realiza el usuario mediante el asistente.

Three.js: Se ha utilizado esta librerıa para mejorar la apariencia de la interfaz delasistente dotandole de ciertos elementos en 3D.

Por ultimo, los servicios de terceros utilizados:

Dialogflow: Se encarga de recibir el mensaje del usuario y de devolverle unarespuesta acorde al mensaje recibido.

BVMC: Se ha utilizado en este proyecto para dotar al asistente de la posibilidadde otorgarle al usuario el contenido que ofrece la biblioteca con tan solo pedırselo

Diseno 53

mediante lenguaje natural. Se utiliza su punto de acceso SPARQL1 para poderrealizar las consultas a su repositorio de datos abiertos y ası construir varias delas respuestas del asistente.

Wikidata: Se ha utilizado en este proyecto para obtener datos actualizados acercade Miguel de Cervantes y permitirle ası al asistente responder a preguntas acercadel mismo e incluso darle la posibilidad al usuario de pedir una foto de este.

AEMET OpenData: Se ha utilizado en este proyecto para dotar al asistente de laopcion de informar al usuario acerca de la prediccion del tiempo en espana deldıa actual o del dıa siguiente.

Horoscopo-cli: Se ha utilizado para poder ofrecer el horoscopo diario a traves delasistente.

Yandex: Se ha utilizado para implementarle al asistente la funcionalidad detraducir.

Twitter API: Se ha utilizado para que el asistente sea capaz de mostrar losultimos Tweets publicados por la BVMC en su cuenta de Twitter.

Trawlingweb.com: Se ha utilizado para que el asistente pueda mostrarte noticiasde actualidad y vıdeos subidos por la BVMC en su canal oficial de YouTube.

FAROO API: Se ha utilizado para que se puedan realizar busquedas de paginasweb a traves del asistente, lo unico negativo es que las busquedas han de ser enexclusiva en ingles. Los resultados devueltos por tanto tambien son paginas eneste idioma.

1data.cervantesvirtual.com/sparql

54 7.3. Diagrama de clases

7.3. Diagrama de clases

Un diagrama de clases dentro del Lenguaje Unificado de Modelado (UML), eningenierıa de software, es un tipo de diagrama de estructura estatica que describe laestructura de un sistema. Ademas muestra las clases del sistema, sus atributos,operaciones (o metodos), y las relaciones entre los objetos. [Wikipedia.org, 2019a]

En la figura 7.3 se puede observar la estructura del proyecto. La clase interfaz estaconectada con el resto de clases en las que se almacenan las acciones realizadas por elusuario desde el asistente.

Figura 7.3.: Diagrama de clases del proyecto

Diseno 55

7.4. Mockups

Los siguientes mockups se han realizado con la ayuda de la herramienta onlineBotsociety. Se ha creado una demo para la version movil2 y otra para la version deescritorio3.

Figura 7.4.: Mockup version movil 1

2https://app.botsociety.io/s/5dbacacaf7e56854c74ab005?p=9964926023bd4fdeec1dc6861197c48b6461f92fdesktop=false3https://app.botsociety.io/s/5dbacacaf7e56854c74ab005?p=9964926023bd4fdeec1dc6861197c48b6461f92fdesktop=true

56 7.4. Mockups


Diseno 57


58 7.4. Mockups

Figura 7.7.: Mockup version escritorio 1

Diseno 59


60 7.4. Mockups


Diseno 61

Botsociety es una plataforma que permite hacer mockups de chatbots y asistentesvirtuales para simular la conversacion que podrıa tener el bot con un futuro cliente.Por ello se ha utilizado esta herramienta online para crear los mockups y ası utilizarloscomo guıa para realizar el diseno final del asistente. [Planetachatbot.com, 2017]

8. Implementacion

Para mejor comprension de esta seccion se ha preferido describir la implementaciondividiendola en dos partes Backend y Frontend. Ambas partes se han implementado deforma simultanea, segun la planificacion descrita en el capıtulo 5. En el texto se alternade una parte a otra priorizando segun las necesidades.

8.1. Backend Parte 1

En primer lugar, se instalo el software necesario para poder desarrollar esta parte delproyecto y las herramientas necesarias para mas adelante desarrollar el frontend (PHPcon XAMPP, Composer, Visual Studio Code, Node, NPM y Postman). Despues seobtuvo la estructura completa de Laravel y se instalaron todas sus dependencias pormedio de composer obteniendo como resultado la estructura basica de la API RESTful.Se copio el proyecto dentro de la carpeta xampp/htdocs/ de XAMPP, programa queme permite utilizar Apache y MySQL para el proyecto en local.

Tras esto, se actualizo el archivo .env del proyecto Laravel agregando el dominio dedesarrollo del sistema y configurando las variables de entorno para ası permitir alproyecto conectarse con el servidor y base de datos locales que ofrece XAMPP.

Listado 8.1: Primeras lıneas del archivo .env del proyecto Laravel

1 APP_NAME=Laravel

2 APP_ENV=local

3 APP_KEY =...

4 APP_DEBUG=true

5 APP_LOG_LEVEL=debug

6 APP_URL=http :// localhost :4200

7 API_URL=http :// apirestful.test

8

9 DB_CONNECTION=mysql

10 DB_HOST =127.0.0.1

11 DB_PORT =3306

12 DB_DATABASE=homestead

13 DB_USERNAME=root

14 DB_PASSWORD=

15 ...

63

64 8.2. Frontend Parte 1

Para que esta conexion se diese tambien se modifico un archivo del sistema deWindows y otro de XAMPP agregandoles tambien el dominio de desarrollo delsistema. Tambien se modifico la configuracion de las rutas para el proyecto Laravel yası poder distinguir las rutas para hacer peticiones a la API de las rutas de la web. Deesta manera se dejo configurada la estructura del proyecto.

A continuacion, se comenzo a disenar el modelo de datos y end-points en unborrador pero, debido a que el proyecto apenas habıa comenzado a desarrollarse y nose sabıan que funcionalidades se le podrıan acabar implementando al asistente en sutotalidad. De todas formas se comprobo que la API estaba bien conectada a la base dedatos local de XAMPP y si era capaz de realizar correctamente tanto peticiones GETcomo peticiones POST.

Para ello se comenzo a crear la estructura inicial de la API RESTful, es decir, tantola estructura inicial de los modelos y sus migraciones como la de los controladores y lasrutas de recurso para cada controlador. Se decidio crear tan solo un modelo y uncontrolador para comprobar que funcionaba la API, el resto se dejaron para masadelante. Ademas se prepararon sus rutas correspondientes para realizar las peticiones.En este momento se instalo GitKraken para conectarlo con un nuevo repositorio enGitHub para este proyecto y ası poder mantener un control de las versiones del mismodurante su desarrollo. Se anadieron entonces los atributos al modelo de ejemplo que sehabıa creado y se preparo la migracion del mismo para poder crear su tablacorrespondiente en la base de datos. Tambien se implemento una semilla para probar ainsertar datos a la tabla una vez creada. Estos datos a insertar mediante la semilla segeneran automaticamente gracias a la librerıa faker de Laravel. Se cambio la zonahoraria del proyecto modificando en la lınea ’timezone’ su valor ’UTC’ por’Europe/Madrid’ situada en el archivo app.php dentro de la carpeta config. Tras estose comprobo que funcionaba correctamente la migracion a la base de datos y seimplementaron los metodos Index y Store del controlador de ejemplo. Estos son losmetodos que se ejecutan al realizar las peticiones GET y POST respectivamente.

Se comprobo utilizando Postman que las rutas para realizar las peticiones GET yPOST del controlador de ejemplo funcionaban correctamente. Al realizar la peticionGET se obtenıan todos los datos de la tabla creada en la base de datos local y alrealizar la peticion POST se insertaba una nueva fila de datos en la tabla con exito. Eneste momento se decidio comenzar con el desarrollo del Frontend.

8.2. Frontend Parte 1

Lo primero que se hizo fue crear un nuevo agente en Dialogflow. Al agente o asistentevirtual se le anadieron un conjunto de intents conocidos en Dialogflow como Small Talkque conforman las preguntas basicas que se le podrıan realizar al asistente. Variosejemplos serıan preguntas como ¿Como te llamas?, ¿Quien es tu jefe? o ¿Tienes novio?.

Implementacion 65

Este tipo de preguntas suelen ser habituales en la interaccion con un asistente virtual.

Small Talk es un agente compilado previamente, denominado en Dialogflow comoprebuilt agent, que se usa para proporcionar respuestas a conversaciones informales.Esta caracterıstica puede mejorar en gran medida la experiencia del usuario, ya quecubre preguntas comunes que pueden no estar relacionadas con los intents del agente.[Cloud.google.com, 2019] Los intents de este prebuilt agent se transfirieron al agente deeste proyecto aunque solo disponıan de las preguntas que le podrıa hacer un usuario yno de las respuestas que el asistente les debıa devolver. Por ello se reviso cada intentanadiendole una o diversas respuestas a las que se les dieron forma de tal manera quese notara que era un asistente para la BVMC y no para otra web o plataforma. Entotal el asistente dispone de un total de 83 intents (83 preguntas con su respuesta orespuestas preprogramadas) de Small Talk para conversaciones informales. En el AnexoIV (D) se pueden observar estos intents.

Tambien se anadieron intents informativos sobre la biblioteca y sobre el nombre delasistente para dar respuesta a los usuarios.

Tras configurar el asistente se comenzo a integrar Angular dentro del proyectoLaravel. Se instalo el framework y se creo un proyecto dentro de la carpeta resources/del proyecto Laravel al que se le llamo frontend. El proyecto Angular se encuentradentro de la ruta resources/frontend dentro de la carpeta raız del proyecto Laravel. Acontinuacion, se instalaron los modulos necesarios para poder consumir de la API deDialogflow y ası conectar el proyecto con el agente que se habıa creado previamente. Elobjetivo era el poder enviar desde el proyecto Angular mensajes a Dialogflow y que esteenviase la respuesta del asistente a Angular. Para ello se siguieron una serie de pasos:

1. En primer lugar se realizo la instalacion de librerıas necesarias para la integraciondel chatbot y la creacion del componente chat (la librerıa api-ai-javascript, elcomponente chat, el modulo chat y el servicio chat).

2. A continuacion, en el componente principal de Angular, se exporto el modulochat.

3. Se puso en environments.ts el id de la API de Dialogflow correspondiente alagente/asistente del proyecto.

Listado 8.2: API Agente Catalina Dialogflow

1 export const environment = {

2 production: false ,

3 dialogflow :{

4 angularBot: ’0092682309 cb43b9bdbb77a732f09484 ’

5 }

6 };


4. El servicio de chat (chat.service.ts) hace que la API llame a Dialogflow paraobtener los datos de nuestro chatbot. Se creo la clase ‘Message’ para dar formatoa los mensajes que aparezcan. Se inicializa Dialogflow con el token de la API. Secrea un array de mensajes y el metodo ‘converse’ anade los mensajes al array, queaccede a la API y devuelve la respuesta del bot en el mismo array.

5. Para anadir nuevos valores al array se utiliza un operador ‘scan’. Cada vez que seemita un mensaje, se concatenara al anterior.

6. En el HTML del componente chat se usa ‘ngClass’ para cada mensaje paraaplicar en el una clase condicional ‘to’ o ‘from’ para determinar si el mensajeproviene del usuario o del chatbot. Con ‘ngModel’ creamos un formulario queenvıa el mensaje cuando se pulse la tecla ‘Enter’.

7. Por ultimo se le dio un estilo sencillo a la interfaz mediante CSS el cual se ha idopuliendo y actualizando constantemente. Se tuvo en cuenta el diseno previorealizado en los Mockups mostrados en el capıtulo 7.

Tras comprobar que se enviaban los mensajes introducidos en la interfaz aDialogflow y que Angular recibıa y mostraba la respuesta de este, se decidio comenzara implementar intents mas elaborados que consumiesen servicios de terceros, talescomo Wikidata o la propia BVMC, para ası ofrecer respuestas continuamenteactualizadas en tiempo real. Si la informacion varıa en Wikidata o en la bibliotecatambien cambiara la respuesta ofrecida por el asistente sin necesidad de realizar ninguncambio en el mismo. Ası siempre la informacion ofrecida al usuario a traves delasistente se mantiene actualizada.

Se decidio comenzar por obtener datos de Wikidata para realizar intentsinformativos acerca de Miguel de Cervantes Saavedra. Para ello se desarrollo elsiguiente codigo en el archivo TypeScript del componente chat:

Listado 8.3: Solicitud de datos a Wikidata

1 this.fullUrl = this.endpointUrl + ’?query=’ +

encodeURIComponent( this.sparqlQuery );

2 let requestHeaders: any = { ’Accept ’: ’application/sparql -

results+json ’ };

3 let responseLogin = fetch(this.fullUrl , {

4 method: ’POST ’,

5 headers: requestHeaders

6 }).then( body => body.json() ).then( json => {

7 var { head: { vars }, results } = json;

8 this.resultData = results.bindings;

9 } );

Implementacion 67

En el listado 8.3, la variable endpointUrl contiene la direccion web a la que le hacemosla peticion POST, en este caso serıa a https://query.wikidata.org/sparql. Comose puede observar se utiliza SPARQL para realizar la consulta a la base de datos deWikidata y por ello se necesita anadir la variable sparqlQuery en la cual se introduce laconsulta que deseamos realizar en cada una de las peticiones. Ambas variables vanprecedidas de this. en el codigo debido a que se han declarado fuera de la funcion encuestion y por ello se les ha de llamar de esta manera. Gracias a esto pueden seraccedidas desde cualquier funcion del mismo archivo TypeScript.

Los resultados de la peticion POST se almacenan en una variable a la que se le hallamado resultData. Cada consulta realizada con exito devuelve a Angular los datossolicitados a Wikidata y estos son convertidos en un archivo JSON para facilitar suposterior acceso y uso.

Se crearon un total de 14 intents que sacaban datos de Wikidata para informar sobreMiguel de Cervantes Saavedra. Por ejemplo, el asistente da respuesta a preguntas sobreel como cual fue la causa de su muerte, cuando y donde nacio, cuales fueron las obrasque escribio...

Durante la implementacion de los intents mencionados anteriormente tambien secomenzo a estudiar como poder anadir la funcionalidad al asistente de mostrarle laprevision del tiempo al usuario si este se lo pedıa. Para ello se decidio utilizar la APIde datos abiertos que ofrece AEMET (Agencia Estatal de Meteorologıa). En este casose tuvo que solicitar una API Key de acceso que facilitan por correo electronico. Ellistado de codigo 8.4 muestra como realizar una peticion GET utilizando su API.

Listado 8.4: Solicitud de datos a AEMET

1 this.http.get(’https :// opendata.aemet.es/opendata/api /.../?

api_key =... ’).subscribe(data => {

2 this.resultData=data;

3 let url = this.resultData.datos;

4 });

Fue necesario instalar un modulo de Angular para hacer peticiones HTTP llamadoHttpClient. Este modulo permite crear una variable (en este caso se llama http) desdela que se puede realizar una peticion de cualquier tipo, en este caso una peticion GET.En la url de la peticion se ha puesto ... en dos partes ya que ahı variara la informacionde una peticion a otra. En los primeros puntos suspensivos se aclararıa que es lo queestas solicitando de la API de AEMET y en los segundos se pondrıa la API Keyfacilitada por AEMET en el correo electronico para poder ası consumir datos de suAPI.

Se prepararon 2 intents que utilizaban la API de AEMET, uno para ofrecer laprediccion del tiempo de Espana del dıa actual y otra para la prediccion del tiempo de

https://query.wikidata.org/sparql


Espana del dıa siguiente al actual. Los datos devueltos en JSON de la peticion GET sealmacenan en la variable resultData y mas adelante se almacena en otra variable unaurl (por eso se ha llamado ası a la nueva variable) que nos envıa a la prediccion deltiempo solicitada. En vez de dar la informacion en formato JSON para posteriormenteser parseada y tratada, AEMET manda un enlace que redirige a un texto en el que seexplica la prediccion solicitada. Este enlace es el que devuelve el asistente cuando se lesolicita la prediccion del tiempo.

A continuacion, se procedio a consumir datos de la BVMC. Para ello se desarrollo elsiguiente codigo:

Listado 8.5: Solicitud de datos a la BVMC

1 this.fullUrl = ’/bvmc -lod/repositories/data ’ + ’?query=’ +

encodeURIComponent( this.sparqlQuery );

2 let requestHeaders: any = { ’Accept ’: ’application/sparql -results

+json ’,’content -type ’: ’application/x-www -form -urlencoded;

charset=UTF -8’ };

3 let responseLogin = fetch(this.fullUrl , {

4 method: ’POST ’,

5 headers: requestHeaders

6 }).then( body => body.json() ).then( json => {

7 var { head: { vars }, results } = json;

8 this.resultData = results.bindings;

9 });

Al igual que para hacer peticiones a Wikidata, la BVMC utiliza SPARQL por lo queen la variable sparqlQuery va la consulta pertinente. Los resultados (el JSON devueltopor la peticion) se almacenan en la variable resultData. En un primer momento, nofuncionaba este codigo debido a que saltaba un error de AccessControlCors por usardiferentes dominios. Esto sucedıa por haber creado un pequeno servicio que realizabala peticion y lo devolvıa como respuesta. La forma en la que se soluciono el problemafue con la implementacion de un proxy en el proyecto Angular:

Listado 8.6: Proxy BVMC

1 {

2 "/bvmc -lod /*":{

3 "target ": "http :// data.cervantesvirtual.com",

4 "secure ": false ,

5 "changeOrigin ": true

6 }

7 }

Este codigo permite que el navegador deje que se reciban datos del sitio web de laBVMC y se encuentra en un archivo que se creo entonces situado en la raız del

Implementacion 69

proyecto Angular (en la carpeta frontend) al que se le llamo proxy.conf.json. Tras estose modifico en el archivo package.json, situado tambien en la raız del proyecto Angular,la lınea ”start”: ”ng serve”quedandose ”start”: ”ng serve –proxy-configproxy.conf.json”. Esto se modifico para que cada vez que se inicie el proyecto Angularcon el comando npm start en la consola, este tome en cuenta el proxy desarrollado yası evitar el error de AccessControlCors. Antes de este arreglo el comando que seutilizaba para ejecutar el proyecto Angular era ng serve.

Teniendo este error solucionando y cogiendo ası datos de la BVMC sin ningunproblema se continuo con la implementacion de intents. Se comenzo por uno paraofrecer al usuario todas las versiones registradas en la BVMC del Quijote. Despues seentreno al asistente para que fuese capaz de ofrecer las obras almacenadas en el idiomaque pida el usuario en la BVMC. Es decir, si el usuario le pide al asistente las obrasalmacenadas en la BVMC en valenciano este le ofrecera acceder a solo las obras que labiblioteca posee en valenciano. Esto lo hace con todos los idiomas disponibles en latotalidad de obras almacenadas en la biblioteca. Tambien a modo informativo elusuario le puede preguntar por este numero total de idiomas en los que posee obras labiblioteca.

Aclarar que tanto para los datos obtenido de la BVMC como para los de Wikidata olos de la API de AEMET se sigue el siguiente proceso para que el asistente sea capazde mostrar estos datos en sus respuestas:

1. Se prepara una respuesta especıfica en el intent desde Dialogflow que se utilizapara identificar desde Angular que es una respuesta que precisa de datos deterceros. Por ejemplo, puede devolver un mensaje que fuese NacimientoMiguel.

2. En el HTML del componente chat se dividen los mensajes recibidos porDialogflow en 2 clases. La primera es un conjunto de mensajes que se hanespecificado en el HTML de antemano (teniendo en cuenta la respuesta que se hapreparado en Dialogflow) y la segunda es el resto de mensajes no especificados enel HTML. Los del segundo grupo se muestran directamente en la interfaz (larespuesta que devuelve Dialogflow), sin embargo los del primer grupo semodifican. Siguiendo con el ejemplo, se preparara el HTML con un *ngIf deAngular para que si el mensaje recibido de Dialogflow es NacimientoMiguel estemensaje (que pertenece al primer grupo) se tenga que modificar. Si el mensaje escualquier otro que no se encuentre especificado en el *ngIf entonces pertenece alsegundo grupo.

3. Al pertenecer al primer grupo se manda el mensaje recibido de Dialogflow a unafuncion creada en el archivo TypeScript del componente chat. Esto es posibledebido a que gracias al ciclo de vida (Lifecycle Hooks) de Angular llamadongDoCheck(), situado en el archivo TypeScript del componente del chat, elprograma esta constantemente buscando un elemento HTML que tenga un idconcreto especıficado previamente. Este id se les anade a los mensajes que


pertenecen al primer grupo en el HTML. En ese momento ngDoCheck() envıaeste mensaje a la funcion que se encargue de solicitar los datos de terceroscorrespondientes.

4. Dependiendo de cual sea el mensaje se realiza una peticion para Wikidata, parala BVMC o para AEMET. Esta peticion se realiza y, tras ello, se elabora unarespuesta fija con ciertos datos o enlaces variables que dependeran de losresultados de la peticion. Por ejemplo: Miguel de Cervantes nacio en el ano X enY. Parte del mensaje es estatico pero el ano (la X) y el lugar (la Y) son datoscogidos del resultado de la peticion, por lo que si estos datos son actualizados enel sitio del que se han solicitado tambien se actualiza esta respuesta. Estotambien sucede con enlaces como los de la prediccion del tiempo. Por eso si se lepide al asistente la prediccion de dıa de hoy siempre devuelve el enlace que ofrecela prediccion del dıa actual ya que esto es lo que le devuelve la API de AEMET yesta se actualiza cada dıa.

Se anadio la funcionalidad de poder ofrecer la prediccion diaria del horoscopo paraun signo especıfico en los aspectos del amor, dinero y salud. Para ello se utilizo la APIhoroscopo-cli1. Para mostrar los resultados en las respuestas del asistente se utilizan losmismos pasos que para la prediccion del tiempo, la biblioteca y Wikidata. Tambien seutiliza lo mismo para el resto de funcionalidades.

Listado 8.7: Pedir prediccion del horoscopo

1 this.http.get(’https :// api.adderou.cl/tyaas/’).subscribe(data => {


3 });

En los resultados devuelve la prediccion diaria de cada uno de los signos. Dependiendode cual haya pedido el usuario, desde TypeScript se prepara la respuesta del asistentecon la prediccion de un signo u otro.

Despues se implemento la funcionalidad de realizar traducciones. Para ello se utilizola API de Yandex que permite detectar el idioma del texto que se quiere traducir ytraducir este a otro idioma de los 90 idiomas disponibles para ello. De los siguientesmetodos con el primero se detecta el idioma del texto a traducir y con el segundo serealiza la traduccion.

Listado 8.8: Detectar idioma del texto a traducir

1 this.http.get(’https :// translate.yandex.net/api/v1.5/tr.json/

detect?key =’+...+ ’& text = ’+...).subscribe(data => {


3 });

1https://github.com/joacorandom/horoscopo-cli

Implementacion 71

Listado 8.9: Traducir texto a otro idioma

1 this.http.get(’https :// translate.yandex.net/api/v1.5/tr.json/

translate?key= ’+...+’& text = ’+...+’& lang=’+this.resultData.lang

+’-’+...).subscribe(data => {


3 });

En el primer metodo los puntos suspensivos representan a la API Key que proporcionaYandex al registrarse para utilizar su API y los segundos el texto del que se quieredetectar el idioma. En el segundo metodo los primeros puntos suspensivos representana la API Key ya mencionada, los segundos el texto a traducir y los terceros el idiomaal que se quiere traducir el texto. La variable this.resultData.lang contiene el idiomadetectado en el primer metodo y por tanto es el idioma en el que se encuentra el textodel que se va a realizar la traduccion.

Tras esto se arreglaron algunos fallos de la interfaz del asistente como evitar que sepuedan mandar mensajes en blanco. Tambien se implementaron las funcionalidades debuscar autor y de buscar obra de las almacenadas en la BVMC. Para ello se utilizaronnuevas consultas SPARQL, como en las funcionalidades de buscar obras en ciertoidioma o de solicitar las ediciones de la obra El ingenioso hidalgo Don Quijote de laMancha, que se comentan en el Anexo III (C). El codigo de TypeScript para realizarlas llamadas es el mismo utilizado en las otras funcionalidades que solicitan datos a labiblioteca.

Se comenzo a utilizar la API de trawlingweb.com para poder implementar lasfuncionalidades de buscar noticias de actualidad y de solicitar vıdeos de YouTube delcanal de la BVMC.

Listado 8.10: Buscar noticias de actualidad

1 this.http.get(’https :// api.trawlingweb.com/? token =’+...+ ’&q=& order

=desc&ts =1572562800000 ’).subscribe(data => {


3 });

Listado 8.11: Obtener vıdeos del canal de YouTube de la BVMC

1 this.http.get(’https :// youtube.trawlingweb.com/search /? token

= ’+...+ ’&q=biblioteca %20virtual %20miguel %20de %20cervantes ’).

subscribe(data => {


3 });

Los resultados en ambos casos son filtrados ya que devuelven algunos resultados queno son lo que se desea mostrar. En el primer caso, tras filtrar, solo imprime noticias que


esten en castellano y en el segundo caso solo muestra vıdeos que han sido subidos alcanal oficial de la BVMC. Si no se filtrasen mostrarıa noticias en multitud de idiomas yse mostrarıan vıdeos que, aunque tengan en su mayorıa que ver con la BVMC, no estansubidos en el canal oficial de la biblioteca. Anadir que en los puntos suspensivos deambas llamadas va el token que trawlingweb.com ofrece al desarrollador.

Tras esto se implemento la funcionalidad de realizar busquedas de paginas web. Paraello se utiliza Faroo API ya que no se encontraron mas APIs gratuitas o que noexigiesen introducir una tarjeta de credito para comenzar su uso gratuito. Esta APIofrece realizar busquedas web en ingles unicamente, por ello esta funcionalidad soloesta disponible en este idioma.

Listado 8.12: Obtener resultados de una busqueda de paginas web

1 fetch(" https ://faroo -faroo -web -search.p.rapidapi.com/api?q="+... ,

{

2 "method ": "GET",

3 "headers ": {

4 "x-rapidapi -host": "faroo -faroo -web -search.p.

rapidapi.com",

5 "x-rapidapi -key": "..."

6 },

7 "mode": "cors"

8 })

9 .then(function(response) {

10 return response.text();

11 })

12 .then(function(text) {

13 let obj = JSON.parse(text);

14 })

15 .catch(function(error) {

16 console.log(’Request failed ’, error)

17 });

Para realizar la llamada a FAROO API se utiliza el metodo fetch(). En el se indicala url a la que se va a realizar la llamada, que va a ser una peticion GET, las cabecerasy cors. Si falla la peticion se muestra el error en la consola. Si por lo contrario serealiza con exito se devuelve text del contenido de la respuesta y se parsea a JSONpara el posterior uso y manejo de los resultados. Anadir que en los primeros puntossuspensivos van las palabras clave con las que realizar la busqueda de paginas web y enlos segundos va la API Key necesaria para utilizar la API. El uso de FAROO API esfacilitado por RapidAPI2 que es un buscador de APIs gratuitas para desarrolladores yhace de intermediario en las llamadas de este servicio.

2https://rapidapi.com/

Implementacion 73

Tras esto se comenzo a implementar la funcionalidad de acceder a la API de Twitterpara obtener los ultimos tweets de la cuenta oficial de la BVMC. Para ello primero setuvo que crear una cuenta como desarrollador explicando a Twitter para que se iba autilizar su API. A Twitter no le quedo claro e insistieron enviando un correo para quese les explicara con mas detalle para que se querıan solicitar API Keys para utilizar laAPI. El correo que envio Twitter es el que se muestra en el Anexo VI (F). Twitteracabo dando permiso y acceso a su API mediante API Keys y Tokens que fueronrecibidos por correo electronico.

Para poder realizar llamadas a la API de Twitter se requiere, por seguridad,mantener iniciada una sesion en un servidor desde el cual enviar las claves obtenidas enel correo de Twitter mencionado anteriormente y a cambio recibir una nueva clave deautorizacion. Con esta ultima clave ya se pueden obtener los ultimos tweets de lacuenta oficial de la BVMC. En el momento en el que se cierra la sesion, la clave deautorizacion deja de ser valida por lo que este servidor ha de estar funcionando en todomomento mientras se utiliza el asistente para que funcionen las llamadas a la API deTwitter. Se realizo un pequeno backend utilizando Node.js para crear este servidor yası poder hacer las llamadas a la API de Twitter.

74 8.3. Backend Parte 2


Lo primero que se hizo fue crear una nueva carpeta llamada backend dentro deresources/frontend. En esta carpeta se instalo Express.js y algunos comandos que seiban a utilizar ejecutando en la consola ’npm install express request body-parser–save-dev’. Express.js es un framework para Node.js que sirve para ayudarnos a crearaplicaciones web en menos tiempo ya que nos proporciona funcionalidades como elenrutamiento, opciones para gestionar sesiones y cookies... Tras la instalacion se creoun nuevo archivo dentro de la carpeta backend llamado server.js en el que se indicotodo lo que se debe ejecutar al iniciar este servidor y las rutas disponibles con susrespectivas funciones a ejecutar cuando se les llama.

Listado 8.13: Backend creado para hacer llamadas a la API de Twitter (server.js)

1 var express = require(’express ’);

2 var bodyParser = require(’body -parser ’);

3 var cors = require(’cors ’);

4 var functions = require (’./functions ’);

5

6 var app=express ();

7

8 app.use(bodyParser.urlencoded ({ extended: true}));

9 app.use(cors());

10 app.post(’/authorize ’, functions.authorize);

11 app.post(’/search ’, functions.search);

12

13 app.listen (3000);

Tras esto se creo otro archivo en la carpeta backend al que se le llamo config.js en elque se escribieron las API Keys que Twitter habıa dado en su correo. Estas se ponenen donde se encuentran los puntos suspensivos. La variable bearertoken se deja vacıapuesto que es donde se almacena posteriormente la clave de autorizacion que trasenviar las API Keys Twitter nos devuelve y con la que ya se nos permite realizarllamadas a la API de Twitter.

Listado 8.14: Backend creado para hacer llamadas a la API de Twitter (config.js)

1 var appsettings = {

2 consumerKey: ’...’,

3 consumersecret: ’...’,

4 bearertoken: ’’

5 };

6

7 module.exports = appsettings;

Despues se creo un nuevo archivo, tambien en la carpeta backend, al que se le puso

Implementacion 75

de nombre functions.js y en el que se encuentran las funciones que se encargan derealizar las llamadas a la API de Twitter. La primera se encarga de solicitar el bearertoken mencionado anterioremente y para ello le envıa las API Keys que se encuentranen el archivo config.js. La segunda se encarga de obtener los ultimos tweets de lacuenta oficial de la BVMC. Esta ultima envıa el bearer token obtenido en la primerafuncion para ası poder obtener los tweets debido a que este token le dice a la API quetenemos autorizacion para recibirlos.

Listado 8.15: Backend creado para hacer llamadas a la API de Twitter (functions.js)

1 var request = require(’request ’);

2 var config = require (’./config ’);

3

4 functions = {

5 authorize: function(req ,res) {

6 var header = config.consumerKey +’:’+config.consumersecret;

7 var encheader = new Buffer(header).toString(’base64 ’);

8 var finalheader = ’Basic ’ + encheader;

9 request.post(’https :// api.twitter.com/oauth2/token ’, {form

: {’grant_type ’: ’client_credentials ’},

10 headers: {Authorization: finalheader }}, function(error ,

response , body){

11 if(error)

12 console.log(error);

13 else {

14 config.bearertoken=JSON.parse(body).access_token;

15 res.json({ success: true , data:config.bearertoken })

;

16 }

17 })

18 },

19 search: function(req ,res){

20 var bearerheader = ’Bearer ’ + config.bearertoken;

21 request.get(’https :// api.twitter.com /1.1/ statuses/

user_timeline.json?screen_name=FBVMC ’, {headers :{

Authorization: bearerheader }}, function(error , body ,

response){

22 if(error)

23 console.log(error);

24 else {

25 res.json({ success: true , data: JSON.parse(body.

body)});

26 }

27 })

28 }

29 }

30

31 module.exports = functions;


Para ejecutar este servidor y que la funcionalidad de obtener los ultimos tweets de lacuenta de la BVMC vaya correctamente se ha de abrir un segundo terminal en laconsola (el primero estarıa ejecutando el proyecto Angular), situarse en la carpetaresources/frontend/backend del proyecto y ejecutar el comando ’node server.js’. Eneste momento se estara ejecutando el servidor y en consecuencia la funcionalidad deTwitter puede ser utilizada desde el frontend sin ningun problema.


Una vez se tuvo el backend para consumir de la API de Twitter listo para serutilizado se procedio a preparar las llamadas desde el frontend a este backend.

Listado 8.16: Llamadas al backend para obtener los ultimos tweets de la BVMC

1 var headers = new Headers ();

2 headers.append(’Content -Type ’, ’application/x-www -form -urlencoded

’);

3 this.http.post(’http :// localhost :3000/ authorize ’,{headers: headers

}).subscribe(data => {

4 var headers = new Headers ();

5 headers.append(’Content -Type ’, ’application/x-www -form -

urlencoded ’);

6 this.http.post(’http :// localhost :3000/ search ’, {headers:

headers }).subscribe(data => {


8 });

9 });

Primero se realiza la llamada para obtener en el backend el bearer token y luego serealiza la llamada para obtener los ultimos tweets de la BVMC y entonces el backenddevuelve la respuesta al frontend. Desde el frontend ya se preparan los tweetsobtenidos para ser mostrados en la respuesta del asistente.

Despues se anadieron dos intents informativos en Dialogflow sobre cuales son lasredes sociales de la BVMC y sobre donde se pueden ver las ultimas novedades de labiblioteca. Tambien se realizaron unos ajustes en las busquedas de autores y de obrasimplementados anteriormente.

Tras esto se implemento la funcionalidad de buscar las obras de un autor enconcreto. Al igual que en todas las llamadas a la BVMC lo unico que varıa es laconsulta SPARQL de las que se habla en el Anexo III (C). Tambien se anadieronanclas en ciertos mensajes largos de los devueltos por el asistente para que al usuariose le muestre el inicio del mensaje en la interfaz en vez del final. Por cada ancla seanade el siguiente codigo en el HTML del componente del chat en Angular:

Implementacion 77

Listado 8.17: Codigo HTML para poner un ancla a una respuesta del asistente

1 <a href ="# Ancla" id=’idancla ’><span id=’anclado ’></span ></a>

En cada ancla tiene que variar tanto el href como los id, por ejemplo anadiendoles unnumero que se incremente en cada ancla nueva (Ancla1, idancla1, anclado1). Siguiendocon el ejemplo, en el TypeScript lo que se ha de anadir es lo siguiente:

Listado 8.18: Codigo TypeScript para poner un ancla a una respuesta del asistente

1 document.getElementById (’...’).innerHTML=’<a name="Ancla" id="a

"></a> ’+...;

Se coge mediante el DOM el mensaje que contiene la respuesta del asistente y secambia su HTML como se puede ver arriba. El valor de name debe ser el mismo que elde href en el HTML pero sin la almohadilla.

Como hay que esperar a que se haya mostrado el mensaje de respuesta del asistentemodificado por pantalla para que funcione el ancla se utiliza la funcion de TypeScriptsetTimeout(). Esta permite que el ancla funcione porque si se intenta utilizar lafuncion click() del DOM antes de que se le haya anadido el ancla a la respuesta delasistente esta fallara y sera como si no hubiera un ancla (al usuario se le mostrarıa elfinal del mensaje en la interfaz en vez del principio).

Listado 8.19: Codigo TypeScript para hacer funcionar el enlace ancla anadido

1 setTimeout (() => {

2 document.getElementById(’anclado ’).click ();

3 }, 10);

El parametro con valor 10 del ejemplo son los milisegundos que se espera el programa aejecutar el codigo del interior de la funcion setTimeout. Este numero se puede cambiarpor uno mayor u otro menor dependiendo del tiempo de espera que se quiera. Tambiense mejoro el flujo conversacional del asistente desde Dialogflow para que resultasetodavıa mas natural seguir una conversacion con el mismo.

Tras esto se comenzo a pulir el diseno del asistente mediante el CSS del componentedel chat en Angular. Se opto por el uso de los colores corporativos de la BVMC (sobretodo el color con identificador b21f1f) y su diseno se hizo tan simple e intuitivo como elde un chat. De esta forma el usuario sabe donde ha de escribir los mensajes y comoenviarlos sin tener que pensar demasiado. Ademas las respuestas por parte delasistente aparecen englobadas de un color diferente a las preguntas del usuario paraque sean faciles de distinguir unas de otras. Aparte de por el color tambien sediferencian unos mensajes de otros por su posicion dentro de la caja del chat (unospegados a la izquierda y los otros pegados a la derecha). Tambien se anadio una


pequena animacion a la hora de abrir el asistente. Esta consiste en una transicion quepermite que la caja del chat vaya apareciendo suavemente desde no haber nada hastaaparecer por completo (justo lo contrario a cuando algo se va desvaneciendo).

Entonces se utilizo la librerıa Three.js para cuando la caja del chat esta cerradadarle un toque llamativo y diferente. Three.js es una librerıa escrita en JavaScript paracrear y mostrar graficos animados por ordenador en 3D en un navegador Web y puedeser utilizada en conjuncion con el elemento canvas de HTML5, SVG o WebGL. Parainstalar la librerıa Three.js en el proyecto Angular se ejecuto el siguiente comando en laconsola ’npm i ng-three’. Tambien cambie en el archivo tsconfig.app.json situado en laraız del proyecto Angular la lınea ”types”: [] por ”types”: [”webgl2”] para poderinstalar WebGL2 (la ultima version) en el proyecto y ası permitir que funcione lalibrerıa al completo. WebGL es una especificacion estandar que define una APIimplementada en JavaScript para la renderizacion de graficos en 3D dentro decualquier navegador web[Khronos.org, 2020]. Esta tecnologıa es en la que se basa lalibrerıa Three.js para funcionar.

En el HTML del componente chat se creo un elemento canvas para poder visualizaren el el elemento 3D a anadir.

Listado 8.20: Codigo HTML para visualizar elemento 3D

1 <div class ="engine -wrapper">

2 <canvas #rendererCanvas id=" renderCanvas"></canvas >

3 </div >

En el TypeScript del componente chat se importaron algunos modulos y servicios.Tambien se creo un elemento canvas para luego mostrar la escena 3D en el HTML (almodificar este elemento canvas se modifica el que se ha anadido previamente en elHTML), luego se anadio en el constructor el nuevo servicio para utilizar la librerıa yademas se preparo el programa para que nada mas cargar el codigo se cree la escena enel canvas y se comience a ejecutar la animacion del elemento 3D. Esto ultimo es graciasal uso del metodo ngOnInit() de los ciclos de vida de Angular.

Listado 8.21: Codigo anadido en TypeScript para visualizar elemento 3D

1 import { Injectable , ElementRef , OnDestroy , NgZone } from ’

@angular/core ’;

2 import { EngineService } from ’./engine.service ’;

3

4 public rendererCanvas: ElementRef <HTMLCanvasElement >;

5 constructor(

6 ...

7 private engServ: EngineService ,

8 ...

9 ){}

10 ngOnInit (){

Implementacion 79

11 ...

12 this.engServ.createScene(this.rendererCanvas);

13 this.engServ.animate ();

14 }

Las 2 lıneas de codigo anadidas en el metodo ngOnInit() al principio estaban situadasal principio del metodo pero esto bloqueaba el mostar en la interfaz tanto los mensajesenviados a Dialogflow como los recibidos del mismo. Esto ocurrıa porque el programatrataba de cargar la escena 3D primero de todo y como el elemento que se muestra secarga de un archivo JSON externo pues tardaba un poco en cargarse y mientras secargaba, el programa sufrıa un error y por ello el resto del codigo del metodongOnInit() era ignorado. En este codigo que se ignoraba se encontraba el que permiteque los mensajes del asistente se muestren en la interfaz. La solucion al problema fuedejar la carga de la escena 3D para lo ultimo en este metodo (por eso se pusieron alfinal las lıneas como se puede ver arriba).

Al comienzo no se sabıa de la existencia de este error porque, a pesar de tener laslıneas al principio del metodo, funcionaba todo bien debido a que antes de cargar elelemento 3D definitivo desde un archivo JSON se probo la librerıa Three.js pintandodirectamente con codigo un cubo 3D en la escena. Como el programa no tenıa que leerun archivo JSON externo no se necesitaba esperar a que este cargase y por ello no seproducıa ningun error que hiciera que se ignorasen el resto de las lıneas del metodongOnInit().

Aclarar, antes de explicar el funcionamiento del servicio del motor grafico(EngineService) creado para utilizar Three.js, que mientras en el canvas se dibujaba elcubo 3D de prueba se prepararon tanto este elemento como la caja del chat para serresponsive (resoluciones para tablets y dispositivos moviles) mediante CSS usandomedia queries. Tambien se preparo para que si se hace click fuera del chat, mientrasesta abierto, este se cierre y vuelva a aparecer el elemento 3D. Al volver a hacer clicksobre el elemento 3D el chat se abre manteniendo la conversacion que se habıa tenidocon el mismo antes de cerrarse. Para esto ultimo se instalo en el proyecto Angularmediante el comando ’npm i ng-click-outside’ un modulo que permite almacenar en unevento si se ha hecho click fuera de cierto elemento HTML o si se ha hecho click sobreel mismo.

Listado 8.22: Usar clickOutside para saber si se ha hecho click fuera del asistente

1 <div (clickOutside)=" onClickedOutsideChat($event)">

2 ...

3 </div >

Despues ya en la funcion onClickedOutsideChat(e) situada en el archivo TypeScript delcomponente chat se le indica al programa que la caja del chat se tiene que ocultar yque el elemento 3D se tiene que mostrar.


El servicio del motor grafico tiene varios metodos pero antes se ha de importar lalibrerıa Three.js en el servicio y preparar todos los elementos que se van a utilizar en laescena 3D que posteriormente se mostrara en el elemento canvas situado en el HTML.

Listado 8.23: Servicio para usar el motor grafico 1

1 import * as THREE from ’three ’;

2 import { Injectable , ElementRef , OnDestroy , NgZone } from ’

@angular/core ’;

3

4 @Injectable ({

5 providedIn: ’root ’

6 })

7 export class EngineService implements OnDestroy {

8 private canvas;

9 private renderer: THREE.WebGLRenderer;

10 private camera: THREE.PerspectiveCamera;

11 private scene: THREE.Scene;

12 private light: THREE.AmbientLight;

13 private loader: THREE.ObjectLoader;

14

15 private cube: THREE.Mesh;

16

17 private frameId: number = null;

18

19 public constructor(private ngZone: NgZone) {}

20

21 public ngOnDestroy () {

22 if (this.frameId != null) {

23 cancelAnimationFrame(this.frameId);

24 }

25 }

Despues se encuentra el metodo para crear la escena. Este metodo lo primero que hacees coger la referencia del elemento canvas y lo preparamos para que se puedan mostrarelementos 3D en el. Despues se le indica el ancho y el alto, se crea la escena y se creauna camara con vista en perpectiva. Se le indica la posicion que va a tener la camaradentro de la escena y se anade la camara a la escena. Despues se crea una luz deambiente para iluminar toda la escena. Tambien se le indica una posicion y se anade ala escena. Tras esto se carga la textura que tendra el elemento 3D y se crea un materialcon la misma. Tras esto se procede a cargar el objeto 3D de un archivo JSONexportado desde el programa Blender. Por ultimo se crea una malla con la geometrıacargada del archivo JSON y con el material que contiene la textura cargada tambienpreviamente. Se esperan 400 milisegundos con la funcion setTimeout() para que le detiempo al programa a cargar la geometrıa y la textura para formar la malla y entoncesse anade esta a la escena.

Implementacion 81


1 createScene(canvas: ElementRef <HTMLCanvasElement >): void {

2 // The first step is to get the reference of the

canvaselement from our HTML document

3 this.canvas = document.getElementById(’renderCanvas ’);

4 this.renderer = new THREE.WebGLRenderer ({

5 canvas: this.canvas ,

6 alpha: true , // transparent background

7 antialias: true // smooth edges

8 });

9 this.renderer.setSize(window.innerWidth /9, window.innerHeight

/9);

10 // create the scene

11 this.scene = new THREE.Scene();

12 this.camera = new THREE.PerspectiveCamera(

13 75, window.innerWidth / window.innerHeight , 0.1, 1000

14 );

15 this.camera.position.z = 1.2;

16 this.scene.add(this.camera);

17 // soft white light

18 this.light = new THREE.AmbientLight( 0x404040 );

19 this.light.position.z = 10;

20 this.scene.add(this.light);

21 var texture = new THREE.TextureLoader ().load( ’assets/

TexturaMoneda.png ’ );

22 // immediately use the texture for material creation

23 var material2 = new THREE.MeshBasicMaterial( { map: texture }

);

24 // Loader

25 var loader = new THREE.BufferGeometryLoader ();

26 var mesh;

27 // load a resource

28 loader.load(

29 // resource URL

30 ’assets/moneda55.json ’,

31 // onLoad callback

32 function (geometry) {

33 // create a mesh with the geometry

34 // and a material , and add it to the scene

35 mesh = new THREE.Mesh(geometry , material2);

36 }

37 );

38 setTimeout (() => {

39 this.cube=mesh;

40 this.scene.add(this.cube);

41 }, 400);

42 }


Tras su creacion la escena se ha de renderizar en el canvas. Como el elemento 3D va aestar girando constantemente, la renderizacion se realiza para cada uno de los framesde la animacion. Tambien se tiene en cuenta que el tamano de la ventana del navegadorpuede ser modificado en cualquier momento y por ello se utiliza la funcion resize() paraque en ningun momento el elemento 3D quede distorsionado y siempre mantenga susproporciones originales pero disminuyendo o aumentando de tamano dependiendo de sise ha reducido o aumentado el tamano de la ventana del navegador. En el metodorender() se puede apreciar que la malla esta viendose constantemente afectada por lamatriz de rotacion que posee la librerıa three.js. A nivel interno Three.js lo que hace esmultiplicar la matriz de la malla por la de rotacion que tiene almacenada aumentandoconstantemente su valor en 0.01 como se ve en el codigo. Esta multiplicacion hace quela malla vaya rotando. Anadir ademas que unicamente rota sobre el eje Y.


1 animate (): void {

2 // We have to run this outside angular zones ,

3 // because it could trigger heavy changeDetection cycles.

4 this.ngZone.runOutsideAngular (() => {

5 if (document.readyState !== ’loading ’) {

6 this.render ();

7 } else {

8 window.addEventListener(’DOMContentLoaded ’, () => {

9 this.render ();

10 });

11 }

12 window.addEventListener(’resize ’, () => {

13 this.resize ();

14 });

15 });

16 }

17

18 render () {

19 this.frameId = requestAnimationFrame (() => {

20 this.render ();

21 });

22 this.cube.rotation.y += 0.01;

23 this.renderer.render(this.scene , this.camera);

24 }

25

26 resize () {

27 const width = window.innerWidth /9;

28 const height = window.innerHeight /9;

29 this.camera.aspect = width / height;

30 this.camera.updateProjectionMatrix ();

31 this.renderer.setSize( width , height );

32 }

33 }

Implementacion 83

Para la creacion del objeto 3D se utilizo Blender. En este programa tambien secoloco la textura sobre el objeto generando ası coordenadas de textura. Estascoordenadas permiten que al cargar la geometrıa y la textura desde Angular conThree.js, la textura siga colocada sobre el objeto de la misma manera que estabacolocada en Blender en el momento en el que fue exportado. Para exportar el objeto3D de Blender a un archivo JSON se tuvo que anadir un plugin puesto que elprograma de por sı no tiene esta opcion.

En este momento se decidio continuar con la parte de Laravel del backend para asıregistrar las acciones de los usuarios en el asistente y poder implementar con estosdatos los cuadros de mando con Grafana.



Como ya estaban todas las funcionalidades implementadas del asistente se procedioa disenar la base de datos definitiva para el registro de las acciones del usuario. Sedecidio que habrıan 14 tablas independientes unas de otras completamente y que enestas solo se almacenarıa un id incremental y la fecha con la hora a la que se habıarealizado la accion en cuestion desde el asistente. Estas tablas son busquedasautor,busquedasinternet, busquedasobras, busquedasobrasdeautor, edicionesquijote,horoscopo, interactions, news, obrasporidioma, predicciontiempo, translation, twitter,wikidata y youtube. El esquema de base de datos se puede ver mejor en el Anexo I (A).Basicamente hay una tabla por funcionalidad en las que se registra cada vez que se lesolicita la funcionalidad al asistente y aparte una tabla llamada interactions queregistra cada vez que un usuario manda su primer mensaje al asistente.

Puesto que en todas las tablas se va a almacenar lo mismo (solo cambian susnombres) se va a tomar de ejemplo busquedasautor y se van a mostrar todos los pasosque se han seguido hasta crear la tabla, anadirle unas filas iniciales y hacer quefuncionen las llamadas a la API desde Angular.

Primero se crearon los modelos en el proyecto Laravel para cada una de las tablas.Para ello se utilizo un comando, que para el ejemplo serıa ’php artisan make:modelBusquedasAutor’, el cual se ejecuta en la consola estando situado en la carpeta raız delproyecto. Como no se necesita enviar datos posteriormente a la hora de crear unanueva fila en la tabla, el modelo queda vacıo sin ningun atributo.

Listado 8.26: Modelo BusquedasAutor

1 <?php

2

3 namespace App;

4

5 use Illuminate\Database\Eloquent\Model;

6

7 class BusquedasAutor extends Model

8 {

9 protected $table = ’busquedasautor ’;

10 protected $fillable = [

11

12 ];

13 }

Despues se crearon los controladores mediante el comando ’php artisan make:controllerBusquedasAutor/BusquedasAutorController -r’. Finalmente no se utilizo ningunmetodo POST a pesar de que al comienzo del proyecto se habıa probado sufuncionamiento. Esto se decidio debido a que al no necesitar enviar datos a la hora de

Implementacion 85

crear filas nuevas en las tablas es mas correcto utilizar el metodo GET create(). Elmetodo index() recoge todo el contenido de la tabla y lo muestra. Se pensaba queGrafana lo iba a utilizar y por eso se implemento pero al final no era necesario. Altratar de realizar las llamdas desde Angular daba un error de CORS y por eso seanadio en la respuesta dada por el controlador el header(’Access-Control-Allow-Origin’,’*’) arreglando ası el problema.

Listado 8.27: Controlador BusquedasAutor

1 ...

2 use App\BusquedasAutor;

3 ...

4 /**

5 * Display a listing of the resource.

6 *

7 * @return \Illuminate\Http\Response

8 */

9 public function index()

10 {

11 $busquedasautor = BusquedasAutor ::all();

12 return response ()->json($busquedasautor)->header(’Access -

Control -Allow -Origin ’, ’*’);

13 }

14

15 /**

16 * Show the form for creating a new resource.

17 *

18 * @return \Illuminate\Http\Response

19 */

20 public function create ()

21 {

22 $busquedaautor =BusquedasAutor :: create ();

23 return response ()->json($busquedaautor)->header(’Access -

Control -Allow -Origin ’, ’*’);

24 }

25 ...

Tras esto se crearon las rutas para cada controlador. Para ello se anadio la siguientelınea para cada controlador en el archivo api.php situado en la carpeta routes:

Listado 8.28: Anadir las rutas para el controlador BusquedasAutor

1 Route :: resource(’busquedasautor ’, ’BusquedasAutor\

BusquedasAutorController ’);


Despues se prepararon las migraciones a la base de datos con el siguiente comando’php artisan make:migration busquedasautor’. En estas se indican las columnas que sedesea tener en la tabla (un id incremental por cada fila insertada y la fecha con la horaa la que se a insertado el dato a la tabla).

Listado 8.29: Migracion BusquedasAutor

1 <?php

2

3 use Illuminate\Support\Facades\Schema;

4 use Illuminate\Database\Schema\Blueprint;

5 use Illuminate\Database\Migrations\Migration;

6

7 class CreateBusquedasautorTable extends Migration

8 {

9 /**

10 * Run the migrations.

11 *

12 * @return void

13 */

14 public function up()

15 {

16 Schema :: create(’busquedasautor ’, function (Blueprint

$table) {

17 $table ->increments(’id ’);

18 $table ->timestamps ();

19 });

20 }

21

22 /**

23 * Reverse the migrations.

24 *

25 * @return void

26 */

27 public function down()

28 {

29 Schema :: dropIfExists(’busquedasautor ’);

30 }

31 }

Implementacion 87

En este momento se empezaron a preparar los factories y los seeders que permitenanadir varias filas a las distintas tablas de la base de datos. Ası se puede probar sifunciona el anadir filas a las tablas recien creadas. Para ello se han de modificar dosarchivos. En el primero, que es el archivo ModelFactory.php situado en la carpetadatabase/factories, se ha de anadir el siguiente codigo para cada una de las tablas.

Listado 8.30: Factory BusquedasAutor

1 $factory ->define(App\BusquedasAutor ::class , function (Faker\

Generator $faker) {

2 return [

3 ];

4 });

En el segundo, que es el archivo DatabaseSeeder.php situado en database/seeds, se hade anadir el siguiente codigo para cada una de las tablas. En este caso se le indico quese anadan 10 filas nuevas al ejecutar el seeder.

Listado 8.31: Seeder BusquedasAutor

1 ...

2 use App\BusquedasAutor;

3 ...

4 BusquedasAutor :: truncate ();

5 $cantidadBusquedasAutor = 10;

6 factory(BusquedasAutor ::class , $cantidadBusquedasAutor)->create ();

7 ...

Tras esto se ejecuto el comando ’php artisan migrate:refresh –seed’ (teniendo Apache yMySQL funcionando con XAMPP) para crear las tablas y probar la insercion de lasfilas. Como todo funcionaba correctamente se procedio a realizar las llamadas en elfrontend para que cuando los usuarios solicitasen las funcionalidades al asistente seregistraran estas en la base de datos.



Se crearon los servicios en el proyecto Angular para poder realizar las llamadas alproyecto Laravel. Para ello se utilizo el comando ’ng generate service busquedasautor’(continuamos con el ejemplo de la tabla busquedasautor). De los dos archivos que secrean para cada servicio en el proyecto Angular el que hay que modificar esbusquedasautor.service.ts.

Listado 8.32: Servicio BusquedasAutor

1 import { Injectable } from ’@angular/core ’;

2 import { Http } from ’@angular/http ’;

3 import { Observable } from ’rxjs ’;

4 import { HttpClient , HttpHeaders , HttpResponse , HttpErrorResponse

} from ’@angular/common/http ’;

5

6 @Injectable ({

7 providedIn: ’root ’

8 })

9 export class BusquedasautorService {

10

11 constructor(private http: Http) { }

12 newBusquedaAutor (): Observable <any > {

13 let headers;

14 headers = new HttpHeaders ().set(’Content -Type ’, ’application

/json ’);

15 return this.http.get(’http :// apirestful.test/busquedasautor/

create ’, headers);

16 }

17

18 getBusquedasAutor (): Observable <any > {

19 let headers;

20 headers = new HttpHeaders ().set(’Content -Type ’, ’application

/json ’);

21 return this.http.get(’http :// apirestful.test/busquedasautor ’,

headers);

22 }

23 }

Estos metodos son a los que se debe llamar desde el archivo TypeScript delcomponente chat, mas concretamente al de newBusquedaAutor() que registra en labase de datos cada vez que se utiliza la funcionalidad de buscar autores del asistente(crea una nueva fila en la tabla busquedasautor). El otro metodo no se llega a utilizaraunque se implemento por si acaso Grafana necesitaba que se le enviasen los datosdesde la API pero finalmente no fue ası. Mas adelante se explica el funcionamiento deGrafana y como este accede a los datos almacenados en la base de datos.

Implementacion 89

Tras preparar los servicios para todas las tablas se actualizo el archivo TypeScriptdel componente chat para que justo al realizar cada una de las funcionalidades delasistente se llamara al servicio y se registrase la accion en la base de datos. En el casodel ejemplo de busquedasautor se anadio el siguiente codigo:

Listado 8.33: Usar desde TypeScript el servicio BusquedasAutor

1 ...

2 import { BusquedasAutorService } from ’src/app/busquedasautor.

service ’;

3 ...

4 constructor(

5 ...

6 public busquedasautorService: BusquedasAutorService ,

7 ...

8 ) {}

9 ...

10 this.busquedasautorService.newBusquedaAutor ().subscribe(

11 response => {

12 console.log(response);

13 },

14 error => {

15 console.log( <any > error);

16 }

17 );

18 ...

A falta de alguna pequena mejora del diseno y del arreglo de algunos pequenos erroresde funcionamiento encontrados durante el testeo del proyecto, el frontend seencontraba terminado. Se procedio a integrar Grafana en el proyecto y a hacer que estese conectara con la base de datos MySQL.


Una buena forma de saber si el asistente realizado en este proyecto esta cumpliendosu cometido es mediante la monitorizacion a traves de cuadros de mando del uso delmismo. Por ello se realizo una API con el framework Laravel para ası poder almacenaren una base de datos las acciones que los usuarios realizan a traves del asistente virtualCatalina.

Estos datos registrados se muestran en cuadros de mando gracias a Grafana.Grafana es un software libre que esta basado en licencia de Apache 2.0. Este permite lavisualizacion y el formato de datos metricos. Ademas se pueden crear cuadros demando y graficos a partir de multiples fuentes, incluidas bases de datos de series detiempo como Graphite, InfluxDB y OpenTSDB.


Para anadir esta funcionalidad al proyecto se descargo Grafana3 de su pagina weboficial y se descomprio la carpeta con los archivos en el directorio resources delproyecto. Para ejecutarlo se debe estar situado desde la consola en la carpetaresources/grafana-6.5.1/bin y ejecutar el comando ’./grafana-server’. Se accedio aGrafana desde http://localhost:3000/login y se inicio sesion con la cuenta admin con lacontrasena de admin. Esta cuenta venıa por defecto y una vez se inicio sesion secambio la contrasena de la cuenta.

Tras esto se anadio la base de datos a Grafana, se le indico que era MySQL y que suhost era localhost:3306 (como esta configurado en el archivo .env situado en la raız delproyecto Laravel). Por ultimo se le indico cual era el nombre de la base de datos delproyecto. Tras esto se guardo la configuracion con exito y ya se tenıa Grafanaconectado a la base de datos del proyecto.

Solo faltaba crear los dashboards o cuadros de mando con los datos de cada tabla. Ala izquierda hay un signo + en el que al hacer click da la opcion de crear un nuevodashboard. Se va a explicar de ejemplo el cuadro de mando al que se le llamo Usuariosque han utilizado el asistente. Su consulta SQL serıa la siguiente:

Listado 8.34: Consulta SQL para obtener datos de la tabla interactions desde Grafana

1 SELECT

2 $__timeGroupAlias(created_at ,1h),

3 count(id) AS "Usuarios"

4 FROM interactions

5 WHERE

6 $__timeFilter(created_at)

7 GROUP BY 1

8 ORDER BY $__timeGroup(created_at ,1h)

Esto se hizo con cada tabla y en algun caso se muestran los resultados de varias tablasen un mismo cuadro de mando. Un ejemplo serıa un cuadro de mando llamadoBusquedas reallizadas en la BVMC a traves del asistente. En este se realizan 3consultas SQL independientes para mostrar los registros almacenados en las tablas debusquedasautor, busquedasobras y busquedasobrasdeautor. Como son 3funcionalidades que utilizan datos de la BVMC y todas consisten en realizar busquedasse decidio mostrarlas en el mismo cuadro de mando. El otro caso en el que se muestrandatos de mas de una tabla de la base de datos serıa el cuadro de mando llamadoConsultas al contenido de las redes sociales de la BVMC a traves del asistente. En estese muestran tanto lo que se ha registrado en la tabla twitter y en la tabla youtube. Entotal se implementaron 11 cuadros de mando o dashboards.

Los administradores de la BVMC pueden acceder en cualquier momento a estoscuadros de mando y modificar algunos de sus parametros (modificar el margen de

3https://grafana.com/

Implementacion 91

tiempo del que se muestran los datos en el eje X) para poder analizar y llegar aconclusiones sobre la efectividad real del asistente virtual y su uso. En estos cuadros demando se plasman todas las acciones que se han realizado utilizando el asistente y enque momento.

Los cuadros de mando implementados fueron los siguientes:

Usuarios que han utilizado el asistente

Busquedas realizadas en la BVMC a traves del asistente

Solicitudes de las obras disponibles en la BVMC en cierto idioma desde elasistente

Solicitudes de las ediciones del Quijote a la BVMC a traves del asistente

Consultas al contenido de las redes sociales de la BVMC a traves del asistente

Solicitudes de la prediccion diaria del horoscopo a traves del asistente

Solicitudes de busqueda de paginas web a traves del asistente

Solicitudes de noticias de actualidad al asistente

Traducciones solicitadas al asistente

Solicitudes de la prediccion del tiempo en Espana a AEMET a desde el asistente

Solicitudes de informacion a Wikidata (Miguel de Cervantes) desde el asistente

Todos estos datos que se muestran en los cuadros de mando son la visualizacion delregistro de las acciones realizadas por el usuario a traves del asistente. Toda nuevaaccion que realicen los usuarios se vera reflejada automaticamente en el cuadro demando correspondiente sin necesidad de realizar cambio alguno. En la Figura 8.1 sepueden observar 3 de estos cuadros de mando implementados. Con esto laimplementacion del proyecto quedo completamente terminada y ya solo faltaba realizarlas pruebas y la validacion, las cuales se ven en el siguiente capıtulo.


Figura 8.1.: Ejemplos de los cuadros de mando implementados en Grafana

9. Pruebas y validacion

Una vez se termino de implementar el asistente se realizaron las pruebas yvalidaciones. La idea es demostrar que no solo se ha generado la herramienta esperadasino que ademas es fiable y robusta. Se ha de validar finalmente y ver que resuelve elproblema analizado y propuesto de una forma aceptable. Se han realizado tantopruebas unitarias (unit testing) como con usuarios finales (test cases).

9.1. Pruebas unitarias

En programacion, realizar una prueba unitaria sirve para comprobar el correctofuncionamiento de una unidad de codigo. Por ejemplo, esta unidad de codigo en disenofuncional o estructurado equivale a una funcion o a un procedimiento. Sin embargo, enlo que es diseno orientado a objetos equivale a una clase. Esto sirve para asegurar quecada unidad funcione eficientemente y correctamente por separado. Ademas deverificar que el codigo hace lo que tiene que hacer, verificamos que sean correctos losnombres y tipos de los parametros enviados y el tipo de dato que se devuelve en lallamada, entre otros.

Se deben cumplir los siguientes requisitos para que una prueba unitaria tenga lacalidad suficiente:

Automatizable: Esto es especialmente util para integracion continua. No deberıarequerirse una intervencion manual.

Completas: Deben cubrir la mayor cantidad de codigo.

Reutilizables o Repetibles: Es util para integracion continua. No se deben crearpruebas que solo se puedan ejecutar una sola vez.

Independientes: La ejecucion de una prueba no debe afectar a la ejecucion deotra.

Profesionales: Las pruebas deben ser consideradas igual que el codigo, con lamisma profesionalidad, documentacion, etc.

A pesar de que estos requisitos no tienen que ser cumplidos al pie de la letra, serecomienda siempre seguirlos o de lo contrario las pruebas pierden parte de su funcion.

93

94 9.1. Pruebas unitarias

[Wikipedia.org, 2019c]

Se ejecuto en el proyecto Laravel el comando ’php artisan make:testNombreTablaTest’ para crear los archivos de testing. Se fue variando el nombre del testdependiendo del nombre de la tabla de la que se iban a comprobar el realizar lasllamadas desde la API. Estos archivos se crean en la carpeta tests/Feature. En elejemplo se muestran las pruebas para las llamadas a la tabla busquedasautor:

Listado 9.1: Unit Testing: BusquedasAutorTest

1 <?php

2

3 namespace Tests\Feature;

4

5 use Tests\TestCase;

6 use Illuminate\Foundation\Testing\WithoutMiddleware;

7 use Illuminate\Foundation\Testing\DatabaseMigrations;

8 use Illuminate\Foundation\Testing\DatabaseTransactions;

9

10 class BusquedasAutorTest extends TestCase

11 {

12 /**

13 * A basic test example.

14 *

15 * @return void

16 */

17 public function testGetAll ()

18 {

19 $response = $this ->get(env(’API_URL ’) . ’/busquedasautor ’)

;

20 $response ->assertStatus (200);

21 }

22 public function testCreate ()

23 {

24 $response = $this ->get(env(’API_URL ’) . ’/busquedasautor/

create ’);

25 $response ->assertStatus (200);

26 }

27 }

El proceso consiste en dos pruebas, la primera comprueba si se obtienen todos losdatos de la tabla busquedasautor con exito y la segunda si se inserta una nueva fila enla tabla con exito. Para comprobar que se pasan con exito todas las pruebas (en totalse crearon 28 pruebas unitarias; estas 2 mismas pruebas por cada una de las 14 tablasde la base de datos) se ha de ejecutar el siguiente comando en la consola’vendor/bin/phpunit’. En la Figura 9.1 se puede ver que pasan correctamente todas laspruebas unitarias del proyecto.

Pruebas y validacion 95

Figura 9.1.: Pruebas unitarias pasadas con exito

9.2. Casos de prueba

Un test case o caso de prueba es un conjunto de condiciones o variables, eningenierıa del software, bajo las cuales un analista determinara si una aplicacion, unsistema software (software system), o una caracterıstica de estos es parcial ocompletamente satisfactoria. [Wikipedia.org, 2019b]

Para los test cases de este proyecto se utilizo el mismo estandar que siguieron loscreadores de Chatbol, mencionado previamente en la subseccion 4.2.3.

Las pautas seguidas a la hora de realizar los test cases han sido:

Los usuarios han interactuado directamente con el asistente.

Se ha mantenido un contexto de conversacion diferente para cada usuario que harealizado el testeo.

Se han evaluado las respuestas del asistente.

Ademas indicar que, al igual que chatbol, el protocolo de evaluacion utilizado para elasistente sigue el marco de evaluacion de tareas compartidas de WOCHAT1:

Evaluacion a nivel de sesion: Responder a una encuesta de satisfaccion delusuario despues de interactuar con el asistente (8 preguntas cerradas y 3preguntas abiertas).

Evaluacion a nivel de turno: Anotar la efectividad de las respuestas del asistente(valida, aceptable o no valida).

La evaluacion ha de ser realizada por 6 usuarios diferentes.

1http://workshop.colips.org/wochat/main sharedtask.html

96 9.2. Casos de prueba

9.2.1. Evaluacion a nivel de sesion

Estas preguntas se centran principalmente en el aspecto de la experiencia del usuarioa la hora de interactuar con el asistente, ası como en el rendimiento general delsistema. Las respuestas a las preguntas pueden ser de manera incremental muy raravez, rara vez, a veces, frecuentemente y muy frecuentemente. En la Figura 9.2 semuestran las respuestas de cada uno de los 6 usuarios a las 8 preguntas cerradas que seles realizaron tras que estos probaran el asistente:

Figura 9.2.: Resultados de la evaluacion a nivel de sesion

En las preguntas abiertas, los usuarios comentaron las fortalezas y las debilidades delasistente. Respecto a las fortalezas, los usuarios mencionaron que el asistente pudoproporcionar de forma rapida el contenido de la BVMC y que tambien pudo ofrecerlesinformacion practica para el dıa a dıa (sus vidas cotidianas). Respecto a las debilidades,los usuarios mencionaron que para saber utilizar sin dificultades el asistente se necesitaalgo de tiempo ya que al principio les cuesta un poco familiarizarse con el.

Pruebas y validacion 97

9.2.2. Evaluacion a nivel de turno

Para la evaluacion a nivel de turno, se han juntado las puntuaciones a las respuestasdel asistente que los usuarios anotaban en cada turno de la sesion de dialogo con elasistente. La puntuacion dada a cada respuesta podıa ser valida, aceptable o no valida.Esta puntuacion variaba de acuerdo a su idoneidad percibida y con respecto a larespuesta recibida y el contexto del dialogo.

Los resultados del testeo fueron los que se muestran en la Tabla 9.1:

Respuestas validas Aceptables No validas

45 (64.28 %) 17 (24.28 %) 8 (11.42 %)

Tabla 9.1.: Resultados de la evaluacion a nivel de turno

Definiendo respuestas apropiadas como la suma de las validas y de las aceptables, elasistente tendrıa un 88.56 por ciento de respuestas apropiadas.

Tras los resultados obtenidos se procedio a pulir el flujo conversacional de maneraque el porcentaje de respuestas no validas disminuyera.

10. Resultados

Como se puede observar en la Figura 10.1, se han adoptado los estilos de la web dedesarrollo de la BVMC1.

Figura 10.1.: Diseno final del asistente en la web de desarrollo de la BVMC

1http://data.cervantesvirtual.com/blog/

99

100

Cuando el asistente esta cerrado su icono va rotando sobre sı mismo para capturar laatencion del usuario. Esta rotacion la hace de forma suave para que tampoco resultemolesta para el mismo:

Figura 10.2.: Diseno final del asistente cuando esta cerrado

Al hacer clic sobre este icono el asistente se abre mostrando la caja del chat paracomenzar a ser utilizado:

Figura 10.3.: Diseno final del asistente cuando esta abierto

Resultados 101

A continuacion se muestra el uso de algunas de las funcionalidades del asistente. Enla Figura 10.4 se puede ver lo entrenado que ha quedado el asistente para responder amultitud de comentarios y preguntas que le realice el usuario.

Figura 10.4.: Ejemplos de varias respuestas del asistente

En la Figura 10.5 se puede ver la funcionalidad de buscar las obras de un autor enconcreto.

Figura 10.5.: Funcionalidad buscar obras de un autor en concreto

102

En la Figura 10.6 se puede ver respuestas del asistente sobre Miguel de CervantesSaavedra elaboradas con informacion obtenida desde Wikidata.

Figura 10.6.: Respuestas del asistente sobre Miguel de Cervantes Saavedra

En la Figura 10.7 se puede ver la funcionalidad de mostrar vıdeos que ha subido laBVMC a su canal de YouTube.

Figura 10.7.: Funcionalidad mostrar vıdeos de YouTube de la BVMC

Resultados 103

En la Figura 10.8 se puede ver la funcionalidad de mostrar los ultimos tweets que hapublicado la BVMC en su cuenta oficial de Twitter.

Figura 10.8.: Funcionalidad mostrar ultimos tweets de la BVMC

En la Figura 10.9 se puede ver las funcionalidades de solicitar las obras almacenadasen la BVMC en un idioma concreto y la prediccion del tiempo para Espana.

Figura 10.9.: Buscar obras en un idioma concreto y prediccion del tiempo en Espana

104

Se ha logrado un asistente virtual con multitud de funcionalidades tanto paraobtener de manera rapida contenido de la BVMC como para obtener informacion utilpara el dıa a dıa en otras areas. Ademas cuenta con un diseno atractivo y simple quehace que la experiencia de usuario (UX) sea bastante buena. Anadir que este esresponsive y se adapta a cualquier dispositivo movil o tablet.

Tambien ha sido testeado por varios usuarios reales los cuales han salido muysatisfechos de la experiencia. Todas las acciones realizadas por los usuarios en elasistente quedan registradas en la base de datos MySQL del proyecto permitiendomostrar a los administradores estos datos en forma de graficos (cuadros de mando odashboards) a traves de la herramienta Grafana anadida en el proyecto.

Los costes temporales planificados y los reales han sido muy similares puesto que seplanifico dejando algo de margen para el error y este ha permitido que se llegue a losplazos planificados desde el comienzo. A nivel de funcionalidades implementadas no sehan tenido que limitar puesto que conforme se ha ido desarrollando el asistente estas sehan ido eligiendo e integrando una a una.

En este proyecto se han utilizado multitud de conocimientos adquiridos a lo largo dela carrera, mas concretamente en las asignaturas de:

E-Learning.

Sistemas Multimedia Avanzados.

Sistemas Multimedia Basados en Internet.

Gestion de Contenidos Multimedia.

Negocio y Multimedia.

Programacion del Cliente Web.

Analisis y Especificacion de Sistemas Multimedia.

Fundamentos de las Bases de Datos.

Diseno de Bases de Datos Multimedia.

Tratamiento de Graficos Avanzados.

Fundamentos del Diseno Grafico.

Sistemas Distribuidos.

Usabilidad y Accesibilidad.

Proyectos Multimedia.

Resultados 105

Graficos por Computador.

Diseno de Sistemas Multimedia.

11. Conclusiones

En este apartado se recogen las conclusiones extraıdas del proyecto. Ademas, seincluyen lıneas de trabajo futuro para continuar y mejorar el proyecto.

11.1. Conclusiones

Todos los objetivos planteados para el proyecto en el capıtulo 3 se han cubierto. Elasistente de la BVMC facilita un acceso a los contenidos de la biblioteca como tambiena informacion de noticias, redes sociales, etc.

El sistema creado proporciona un panel de administracion para identificar lasfuncionalidades mas consultadas.

Es un proyecto que utiliza multitud de tecnologıas tanto para su parte del backendcomo para la del frontend como tambien numerosos servicios de terceros. Ademas, seha creado una API RESTful y una base de datos que permiten registrar las accionesque los usuarios realizan a traves del asistente. El frontend se comunica tanto con lapropia API RESTful del proyecto como con los servicios de terceros. En lo que respectaa los servicios de terceros, cabe destacar la BVMC y Wikidata de los cuales se obtienendatos mediante consultas SPARQL.

Personalmente es un proyecto que utiliza conocimientos que abarcan casi la mayorıade los contenidos del grado, incluso en el tratamiento de graficos 3D o el analisis denegocio. Estoy satisfecho con el resultado y con la experiencia adquirida con eldesarrollo, gracias a los cuales tanto a nivel de diseno como a nivel interno defuncionamiento mis conocimientos han aumentado.

11.2. Lıneas de trabajo futuras

Entre las diferentes lıneas de trabajo futuro se encuentran las siguientes:

Mejorar el flujo conversacional del asistente para que este devuelva una mayorcantidad de respuestas validas o al menos aceptables al usuario.

Implementar la opcion de enviar mensajes al asistente a traves de la voz y que el

107

108 11.2. Lıneas de trabajo futuras

asistente tambien sea capaz de responder por voz.

Hacer que el asistente sea capaz de obtener recursos de otras bibliotecas virtualestambien.

Solicitar nueva informacion de Wikidata o de la BVMC mediante laimplementacion de consultas SPARQL mas complejas a las ya utilizadas.

Bibliografıa

[Aemet.es, 2020] Aemet.es (2020). Aemet opendata.http://www.aemet.es/es/datos abiertos/AEMET OpenData. Online; last updated2020.

[Angular.io, 2020] Angular.io (2020). Angular (framework). https://angular.io/.Online; last updated 2020.

[Ask.leanstack.com, 2019] Ask.leanstack.com (2019). What is a lean canvas?.http://ask.leanstack.com/en/articles/901274-what-is-a-lean-canvas. Online; lastupdated 28-october-2019.

[Azure.microsoft.com, 2020] Azure.microsoft.com (2020). Bing web search.https://azure.microsoft.com/es-es/services/cognitive-services/bing-web-search-api/.Online; last updated 2020.

[Bbvaopen4u.com, 2016] Bbvaopen4u.com (2016). Api rest: que es y cuales son susventajas en el desarrollo de proyectos. https://bbvaopen4u.com/es/actualidad/api-rest-que-es-y-cuales-son-sus-ventajas-en-el-desarrollo-de-proyectos. Online; lastupdated 23-march-2016.

[Chatbotslife.com, 2019] Chatbotslife.com (2019). Top 7 programming languages todevelop an ai-powered chatbot. https://chatbotslife.com/top-7-programming-languages-to-develop-an-ai-powered-chatbot-f253e728845c. Online; last updated6-june-2019.

[Cloud.google.com, 2019] Cloud.google.com (2019). Agentes compilados previamente ysmall talk. https://cloud.google.com/dialogflow/docs/agents-prebuilt?hl=es-419.Online; last updated 9-july-2019.

[Cloud.google.com, 2020] Cloud.google.com (2020). Documentacion de cloudtranslation. https://cloud.google.com/translate/docs/?hl=Es. Online; last updated2020.

[Dafo.ipyme.org, 2019] Dafo.ipyme.org (2019). Herramienta dafo.https://dafo.ipyme.org/Home. Online; last updated 2019.

[Destinonegocio.com, 2015] Destinonegocio.com (2015). La importancia de los clientesearly adopters. https://destinonegocio.com/pe/negocio-por-internet-pe-pe/la-

109

110 Bibliografıa

importancia-de-los-clientes-early-adopters/. Online; last updated2015.

[Developer.twitter.com, 2020] Developer.twitter.com (2020). Docs.https://developer.twitter.com/en/docs. Online; last updated 2020.

[Dialogflow.com, 2020] Dialogflow.com (2020). Dialogflow. https://dialogflow.com/.Online; last updated 2020.

[Djangoproject.com, 2020] Djangoproject.com (2020). Django.https://www.djangoproject.com/. Online; last updated 2020.

[Ecommerce-nation.es, 2018] Ecommerce-nation.es (2018). Las 10 mejoresherramientas para crear chatbots en ecommerce.https://www.ecommerce-nation.es/herramientas-crear-chatbots-ecommerce/. Online;last updated 16-may-2018.

[Emprender-facil.com, 2018] Emprender-facil.com (2018). Segmento de clientes canvas¿que es? ¿como se definen? etc.https://www.emprender-facil.com/es/segmento-de-clientes-canvas/. Online; lastupdated 22-february-2018.

[Emprender-facil.com, 2019] Emprender-facil.com (2019). La propuesta de valor:Modelos de negocio a fondo.https://www.emprenderalia.com/modelos-de-negocio-la-propuesta-de-valor/. Online;last updated 2019.

[Enekodelatorre.com, 2016] Enekodelatorre.com (2016). ¿que es express.js? instalaciony primeros pasos. https://enekodelatorre.com/expressjs-instalacion-primeros-pasos/.Online; last updated 29-october-2016.

[Entrepreneur.com, 2018] Entrepreneur.com (2018). How ai is changing the face ofcustomer service. https://www.entrepreneur.com/article/321730. Online; lastupdated 15-october-2018.

[Es.reactjs.org, 2020] Es.reactjs.org (2020). React. https://es.reactjs.org/. Online; lastupdated 2020.

[Es.slideshare.net, 2011] Es.slideshare.net (2011). Bases de datos temporales.https://es.slideshare.net/elaragon/bases-de-datos-temporales. Online; last updated27-january-2011.

[Foromarketing.com, 2018] Foromarketing.com (2018). ¿en que se diferencian loschatbots de los asistentes virtuales?.https://www.foromarketing.com/diferencias-chatbot-asistente-virtual/. Online; lastupdated 27-june-2018.

Bibliografıa 111

[Grafana.com, 2020] Grafana.com (2020). Grafana. https://grafana.com/. Online; lastupdated 2020.

[Iebschool.com, 2019] Iebschool.com (2019). Las metodologıas agiles mas utilizadas ysus ventajas dentro de la empresa.https://www.iebschool.com/blog/que-son-metodologias-agiles-agile-scrum/. Online;last updated 15-march-2019.

[Ipmark.com, 2019] Ipmark.com (2019). Los asistentes virtuales, utilizados en 4,3millones de hogares.https://ipmark.com/los-asistentes-virtuales-utilizados-en-43-millones-de-hogares/.Online; last updated 10-april-2019.

[Khronos.org, 2020] Khronos.org (2020). Webgl overview.https://www.khronos.org/webgl/. Online; last updated 2020.

[Laravel.com, 2020] Laravel.com (2020). Laravel. https://laravel.com/. Online; lastupdated 2020.

[Link.springer.com, 2019] Link.springer.com (2019). Open data chatbot.https://link.springer.com/chapter/10.1007/978-3-030-32327-1 22. Online; lastupdated 12-october-2019.

[Mahey et al., 2019] Mahey, M., Al-Abdulla, A., Ames, S., Bray, P., Candela, G.,Chambers, S., Derven, C., Dobreva-McPherson, M., Gasser, K., Karner, S., Kokegei,K., Laursen, D., Potter, A., Straube, A., Wagner, S.-C., Wilms, L. with forewordsby: Al-Emadi, T. A., Broady-Preston, J., Landry, P., and Papaioannou, G. (2019).Open a GLAM Lab. Digital Cultural Heritage Innovation Labs, Book Sprint, Doha,Qatar, 23-27 September 2019.

[Openclassrooms.com, 2018] Openclassrooms.com (2018). Diagramas de casos de uso.https://openclassrooms.com/en/courses/4990961-planea-tu-proyecto-con-uml/4996511-diagramas-de-casos-de-uso. Online; last updated30-march-2018.

[Planetachatbot.com, 2017] Planetachatbot.com (2017). Botsociety: como hacer unmockup de un chatbot. https://planetachatbot.com/botsociety-como-hacer-mockup-de-chatbot-7677c8da7d39. Online; last updated5-september-2017.

[Planetachatbot.com, 2019] Planetachatbot.com (2019). Los mejores frameworks dedesarrollo de chatbots. https://planetachatbot.com/mejores-frameworks-de-desarrollo-de-chatbots-7160c59b1ac4. Online; last updated14-june-2019.

[Platzi.com, 2017] Platzi.com (2017). Gitkraken: La interfaz grafica multiplataformapara git. https://platzi.com/tutoriales/1557-git-github/2207-git-kraken-la-interfaz-

112 Bibliografıa

grafica-multiplataforma-para-git/. Online; last updated2017.

[Programmableweb.com, 2012] Programmableweb.com (2012). Faroo api.https://www.programmableweb.com/api/faroo. Online; last updated 5-august-2012.

[Rubyonrails.org, 2020] Rubyonrails.org (2020). Ruby on rails.https://rubyonrails.org/. Online; last updated 2020.

[Segura et al., 2018] Segura, C., Palau, A., Luque, J., Costa-jussa, M. R., and Banchs,R. E. (2018). Chatbol, a chatbot for the spanish ”la liga”. In 9th InternationalWorkshop on Spoken Dialogue System Technology, IWSDS 2018, Singapore, April18-20, 2018, pages 319–330.

[Semanticwebjournal.net, 2016] Semanticwebjournal.net (2016). Migration of a librarycatalogue into rda linked open data. http://www.semantic-web-journal.net/content/migration-library-catalogue-rda-linked-open-data-0. Online; lastupdated 9-january-2016.

[Squarefishinc.com, 2018] Squarefishinc.com (2018). Why you need a virtual assistantin 2019. https://www.squarefishinc.com/why-you-need-a-virtual-assistant-in-2019/.Online; last updated 22-june-2018.

[Tech.yandex.com, 2020] Tech.yandex.com (2020). Translate api/documentation.https://tech.yandex.com/translate/doc/dg/concepts/about-docpage/. Online; lastupdated 2020.

[Tensorflow.org, 2020] Tensorflow.org (2020). Tensorflow.https://www.tensorflow.org/. Online; last updated 2020.

[Threejs.org, 2020] Threejs.org (2020). Three.js. https://threejs.org/. Online; lastupdated 2020.

[Trawlingweb.com, 2020] Trawlingweb.com (2020). News & social data api.https://trawlingweb.com/home. Online; last updated 2020.

[Vuejs.org, 2020] Vuejs.org (2020). Vue.js. https://vuejs.org/. Online; last updated2020.

[W3c.es, 2005] W3c.es (2005). Guıa breve de web semantica.https://www.w3c.es/Divulgacion/GuiasBreves/WebSemantica.html. Online; lastupdated 2005.

[W3.org, 2013] W3.org (2013). Sparql 1.1 query language.https://www.w3.org/TR/sparql11-query/. Online; last updated 21-march-2013.

[W3.org, 2014] W3.org (2014). Resource description framework (rdf).

Bibliografıa 113

https://www.w3.org/RDF/. Online; last updated 25-february-2014.

[Wikidata.org, 2019] Wikidata.org (2019). Wikidata.https://www.wikidata.org/wiki/Wikidata:Main Page. Online; last updated 2019.

[Wikipedia.org, 2019a] Wikipedia.org (2019a). Class diagram.https://en.wikipedia.org/wiki/Class diagram. Online; last updated 5-december-2019.

[Wikipedia.org, 2019b] Wikipedia.org (2019b). Test case.https://en.wikipedia.org/wiki/Test case. Online; last updated 3-december-2019.

[Wikipedia.org, 2019c] Wikipedia.org (2019c). Unit testing.https://en.wikipedia.org/wiki/Unit testing. Online; last updated 12-december-2019.

[Wikipedia.org, 2020] Wikipedia.org (2020). Virtual assistant.https://en.wikipedia.org/wiki/Virtual assistant. Online; last updated2-january-2020.

[Zdnet.com, 2019] Zdnet.com (2019). Apple siri vs amazon alexa vs google assistant:Tests reveal which is smartest. https://www.zdnet.com/article/apple-siri-vs-amazon-alexa-vs-google-assistant-tests-reveal-which-is-smartest/. Online; last updated16-august-2019.

A. Anexo I. Esquema de base de datos

Una Base de Datos Historica es aquella en la cual se inserta informacion y jamas semodifica ni se borra. [Es.slideshare.net, 2011] Su caracterıstica principal es lapersistencia. Esta es la accion de preservar la informacion de forma permanente(guardarla), pero a su vez tambien se puede recuperar la informacion (leerla) para queesta pueda ser utilizada. Este es el caso de la base de datos realizada en este proyectoya que se ha creado para obtener un registro sobre el uso del asistente y estos datosnunca se borran o actualizan. Basicamente se realiza una peticion GET a la API cadavez que un usuario realiza cierta accion a traves del asistente virtual y esta quedaregistrada en su debida tabla. No se utiliza POST debido a que no se envıan desde elasistente datos para almacenar en la base de datos, simplemente se ordena que se creeuna fila nueva con el id que le toque. Cada vez que se anade una nueva fila a una tabla,su id sera el valor del id de la fila anterior incrementado por 1. Si la tabla esta vacıa elid de la primera fila que se inserte sera 1.

Figura A.1.: Base de datos MySQL del proyecto

115

116

Como se puede observar en la Figura A.1 tenemos diferentes tablas en la base dedatos del proyecto sin ninguna relacion entre sı. Esta base de datos es basicamente unregistro de las acciones que los usuarios realizan a traves del asistente. Por cada accionse almacena en su respectiva tabla un identificador y un tipo de dato datetime en elque se almacena la hora y el dıa en el que se ha realizado esta accion. No tenemosconstancia de quien es el usuario que ha realizado la accion puesto que el asistente estadisponible para cualquiera que entre a la web por lo que no tenemos por que tenerdatos de este. Por este motivo no existe otra columna en la tabla donde se guardeinformacion del usuario ni existe una tabla Usuario con la que relacionarse.

Anadir que se trata de una base de datos no relacional puesto que no existe ningunarelacion entre sus tablas. Aunque MySQL se suele utilizar para bases de datosrelacionales, se escogio debido a lo sencillo que resulta su uso y a su buenacompatibilidad con Laravel. Esta informacion almacenada en la base de datos se utilizapara generar cuadros de mando, mediante la herramienta Grafana, para losadministradores de la biblioteca. Esto les permite observar y analizar de forma graficalas interacciones que han tenido los usuarios con el asistente y ası estudiar quefuncionalidades del asistente desechar por su poco uso y cuales mejorar por su grandemanda.

B. Anexo II. Informe de Toggl

Summary ReportSeptember 09, 2019 – December 29, 2019

TOTAL HOURS: 301:47:55

41.7 h

33.3 h

25.0 h

16.7 h

8.3 h

0.0 h

6:5

7 9:5

5

7:2

0 10

:52

9:4

6

9:5

1

19

:01

16

:03

18

:18

32

:16

16

:09

31

:12

23

:24

40

:57

32

:02

17

:38

9/9 -

9/15

9/23 -

9/29

10/7 -

10/13

10/21 -

10/27

11/4 -

11/10

11/18 -

11/24

12/2 -

12/8

12/16 -

12/22

PROJECT DURATION

TFG 301:47:55

TIME ENTRY DURATION

Acabar memoria 55:17:25

Corregir memoria 38:34:23

Avanzar en la memoria 21:13:06

Hacer peticiones desde Angular a Laravel 13:37:16

Hacer póster 13:09:50

Implementar la posibilidad de traducir desde el asistente 10:39:38

Nuevos itents BVMC 10:08:11

Realizar búsquedas de webs (Como Google desde el asistente)+Empezar apreparar consumir del twitter de la BVMC

8:49:44

Creando itents que utilicen Wikidata 7:52:48

Mejorar diseño del asistente (CSS, Three.js...) 6:46:56

Apartado Marco Teórico de la memoria 6:17:34

Acabar memoria+Test Cases 5:52:23

Fix errores+Nuevas consultas SPARQL para la BVMC 5:44:16

Mejorar funcionamiento del asistente 5:23:10

Nuevos itents para la BVMC+API noticias 5:19:59

Page 1/6Pabloguijarro96's workspace

Figura B.1.: Informe de Toggl 1

117

118

Aprender a consumir datos de la BVMC e intentando coger los datos desdeAngular

5:10:37

Desarrollo del comportamiento básico del asistente virtual (Small Talk etc) 4:34:29

Nuevos itents para la BVMC 4:09:54

Consumir del twitter de la BVMC 3:39:05

Hacer e integrar modelo 3D para cuando esté el asistente minimizado 3:32:56

Implementar base de datos final 3:20:16

Mejorando el comportamiento del asistente (nuevos itents con o sinWikidata)/Consumir api AEMET para el tiempo

3:18:02

Plantilla latex; comenzar a redactar 3:02:31

Other time entries 56:13:26

PROJECT - TIME ENTRY DURATION

TFG 301:47:55

Acabar memoria 55:17:25

Acabar memoria+Test Cases 5:52:23

Análisis DAFO 1:56:14

Análisis de riesgos 2:43:44

Apartado Marco Teórico de la memoria 6:17:34

API Noticias y Youtube canal de la BVMC 2:48:51

Aprender a consumir datos de la BVMC e intentando coger los datos desde Angular 5:10:37

Aprendiendo a coger datos de Wikidata desde Angular 1:49:33

Aprendiendo a usar SPARQL 0:46:53

Aprendiendo a usar SPARQL y empezar a ir metiendo información de wikidata en Dialogflow 2:08:33

Aprendiendo a utilizar los Webhooks de Dialogflow 0:17:03

Page 2/6Pabloguijarro96's workspace


Anexo II. Informe de Toggl 119

Arreglar errores 1:52:20

Arreglar fallos de algunas funcionalidades del asistente tras incorporar lo de Twitter 0:32:15

Arreglos en la memoria 0:42:06

Avanzar en la memoria 21:13:06

Bloquear el enviar un mensaje hasta que se pueda hacer una búsqueda de nuevo 0:33:12

Buscar obras de un autor en concreto 2:42:56

Consumir API horóscopos 2:28:46

Consumir del twitter de la BVMC 3:39:05

Consumir del twitter de la BVMC+Itent informativo de las redes sociales de la BVMC 1:44:16

Corregir memoria 38:34:23

Creando factories para insertar información en la Base de Datos 0:37:25

Creando itents que utilicen Wikidata 7:52:48

Creando la estructura inicial de la APIRestful (Ejemplo de modelo, controlador y rutas) 0:31:47

Creando repositorio 0:18:04

Creando y Estableciendo la Estructura Inicial de la API RESTful 0:59:36

Cuerpo de la memoria (Lean Canvas) 2:54:39

Desarrollo del comportamiento básico del asistente virtual (Small Talk etc) 4:34:29

Page 3/6


Pabloguijarro96's workspace


120

Descubriendo y configurando la estructura del proyecto 0:48:17

Diseñando modelo de datos y end-points para la API RESTful (Genéricos) 0:25:40

Diseñar modelo de base de datos 0:38:12

Diseño chat component 1:47:26

Diseño chat component y hacer que Angular consuma desde la API de Dialogflow 0:59:19

Fix errores+Nuevas consultas SPARQL para la BVMC 5:44:16

Generando la estructura de la base de datos con el ejemplo 0:20:47

Hacer e integrar modelo 3D para cuando esté el asistente minimizado 3:32:56

Hacer peticiones desde Angular a Laravel 13:37:16

Hacer póster 13:09:50

Implementando el modelo de ejemplo 0:16:02

Implementando operaciones del controlador de ejemplo 1:16:34

Implementar base de datos final 3:20:16

Implementar la posibilidad de traducir desde el asistente 10:39:38

Integrar Angular en la API hecha con Laravel 0:38:28

Introducción y comenzar a redactar el cuerpo de la memoria 1:00:46

Ir mirando un poco cómo integrar Three.js en Angular 1:00:36

Page 4/6




Anexo II. Informe de Toggl 121

Ir viendo cómo conectar Grafana a la base de datos hecha desde Laravel 0:22:05

Laravel Realizar la API (Instalación de lo necesario) 0:52:32

Lean Canvas 2:56:04

Mejorando el comportamiento del asistente (nuevos itents con o sin Wikidata)/Consumir api AEMET para el tiempo 3:18:02

Mejorar búsqueda por autor 0:21:57

Mejorar diseño del asistente (CSS, Three.js...) 6:46:56

Mejorar funcionamiento del asistente 5:23:10

Nuevos intents AEMET y BVMC 1:41:20

Nuevos itents BVMC 10:08:11

Nuevos itents BVMC y algunas mejoras en diseño y experiencia de usuario 2:01:10

Nuevos itents informativos de la BVMC y del mismo asistente. Fix de errores. 1:52:44

Nuevos itents para la BVMC 4:09:54

Nuevos itents para la BVMC+API noticias 5:19:59

Objetivos 0:44:59

Plantilla latex; comenzar a redactar 3:02:31

Probando el funcionamiento de las rutas del controlador 1:28:26

Pruebas unitarias Laravel 1:08:28

Page 5/6




122

Pulir flujo conversacional del asistente+Nuevos itents informativos biblioteca 1:50:45

Realizar búsquedas de webs (Como Google desde el asistente)+Empezar a preparar consumir del twitter de la BVMC 8:49:44

Retoques en la memoria 0:17:53

Ver cómo conectar grafana a la base de datos MySQL 0:11:42

Ver cómo conectar grafana a la base de datos MySQL y crear cuadros de mando (Dashboards) 2:43:01

Created with toggl.com Page 6/6




C. Anexo III. Consultas SPARQL

Se han utilizado distintas consultas SPARQL para obtener los recursos de la BVMCy para obtener la informacion de Wikidata. A continuacion se muestran estas consultas.

C.1. Para Wikidata

Listado C.1: Consulta SPARQL a Wikidata (Obras de Miguel de Cervantes Saavedra)

1 SELECT ?item ?itemLabel

2 WHERE

3 {

4 ?item wdt:P50 wd:Q5682.

5 SERVICE wikibase:label { bd:serviceParam wikibase:language "[

AUTO_LANGUAGE],es". }

6 }

Listado C.2: Consulta SPARQL a Wikidata (Padres de Miguel de Cervantes Saavedra)

1 SELECT ?item ?itemLabel

2 WHERE

3 {

4 ?item wdt:P40 wd:Q5682.

5 SERVICE wikibase:label { bd:serviceParam wikibase:language "[

AUTO_LANGUAGE],es". }

6 }

123

124 C.1. Para Wikidata

Listado C.3: Consulta SPARQL a Wikidata (Nacimiento Miguel de Cervantes Saavedra)

1 SELECT ?item ?itemLabel ?placeLabel ?date

2 WHERE

3 {

4 ?item wdt:P31 wd:Q5 .

5 ?item wdt:P735 wd:Q15620295.

6 ?item wdt:P734 wd:Q37222317.

7 ?item wdt:P19 ?place.

8 ?item wdt:P569 ?date.

9 SERVICE wikibase:label { bd:serviceParam wikibase:language "es

". }

10 }

Listado C.4: Consulta SPARQL a Wikidata (Muerte Miguel de Cervantes Saavedra)

1 SELECT ?item ?itemLabel ?placeLabel ?date

2 WHERE

3 {


5 ?item wdt:P735 wd:Q15620295.

6 ?item wdt:P734 wd:Q37222317.

7 ?item wdt:P20 ?place.

8 ?item wdt:P570 ?date.

9 SERVICE wikibase:label { bd:serviceParam wikibase:language "es

". }

10 }

Listado C.5: Consulta SPARQL a Wikidata (Foto Miguel de Cervantes Saavedra)

1 SELECT ?item ?itemLabel ?image

2 WHERE {


4 ?item wdt:P735 wd:Q15620295.

5 ?item wdt:P734 wd:Q37222317.

6 ?item wdt:P18 ?image.

7 SERVICE wikibase:label { bd:serviceParam wikibase:language "es".

}

8 }

Anexo III. Consultas SPARQL 125

Listado C.6: Consulta SPARQL a Wikidata (Informacion variada sobre Miguel de Cer-vantes Saavedra)

1 PREFIX entity: <http :// www.wikidata.org/entity/>

2 #partial results

3

4 SELECT ?propUrl ?propLabel ?valUrl ?valLabel ?picture

5 WHERE

6 {

7 hint:Query hint:optimizer ’None ’ .

8 { BIND(entity:Q5682 AS ?valUrl) .

9 BIND("N/A" AS ?propUrl ) .

10 BIND(" identity"@en AS ?propLabel ) .

11 }

12 UNION

13 { entity:Q5682 ?propUrl ?valUrl .

14 ?property ?ref ?propUrl .

15 ?property rdf:type wikibase:Property .

16 ?property rdfs:label ?propLabel

17 }

18

19 ?valUrl rdfs:label ?valLabel

20 FILTER (LANG(? valLabel) = ’es ’) .

21 OPTIONAL{ ?valUrl wdt:P18 ?picture .}

22 FILTER (lang(? propLabel) = ’es ’ )

23 }

24 ORDER BY ?propUrl ?valUrl

25 LIMIT 200

C.2. Para la BVMC

Listado C.7: Consulta SPARQL a la BVMC (Ediciones de la obra El ingenioso hidalgoDon Quijote de la Mancha)

1 PREFIX rdam: <http :// rdaregistry.info/Elements/m/>

2 SELECT ?m ?title

3 WHERE {

4 ?m rdam:workManifested <http :// data.cervantesvirtual.com/work

/2904 > .

5 ?m rdam:title ?title .

6 }

126 C.2. Para la BVMC

Listado C.8: Consulta SPARQL a la BVMC (Obras almacenadas de cada idioma)

1 PREFIX rdf: <http :// www.w3.org /1999/02/22 -rdf -syntax -ns#>

2 PREFIX madsrdf: <http :// www.loc.gov/mads/rdf/v1#>

3 PREFIX dc: <http :// purl.org/dc/elements /1.1/>

4 SELECT ?language (COUNT(? manifestation) AS ?no_manifestations) ?

code

5 WHERE {

6 ?language rdf:type madsrdf:Language .

7 ?language madsrdf:code ?code .

8 ?manifestation dc:language

9 ?language

10 }

11 GROUP BY ?language ?code

Listado C.9: Consulta SPARQL a la BVMC (Buscar obra; Ejemplo El ingenioso hidalgoDon Quijote de la Mancha)


2 PREFIX rdfs: <http :// www.w3.org /2000/01/rdf -schema#>

3 SELECT ?obra ?nombreobra

4 WHERE {

5 ?obra rdfs:label ?nombreobra . FILTER regex ((? nombreobra), "El

ingenioso hidalgo Don Quijote de la Mancha", "i") .

6 }

Listado C.10: Consulta SPARQL a la BVMC (Buscar autor; Ejemplo Lope de Vega)



3 SELECT ?autor ?nombreautor

4 WHERE {

5 ?autor rdfs:label ?nombreautor . FILTER regex ((? nombreautor), "

Vega , Lope de", "i") .

6 }

Listado C.11: Consulta SPARQL a la BVMC (Buscar obras de cierto autor; EjemploLope de Vega)


2 SELECT ?autor ?nombreautor ?obra ?titulo

3 WHERE {

4 ?autor rdfs:label ?nombreautor . FILTER regex ((? nombreautor), "

Vega , Lope de", "i") .

5 ?autor <http :// rdaregistry.info/Elements/a/authorOf > ?obra

.

6 ?obra rdfs:label ?titulo.

7 }

D. Anexo IV. Intenciones implementadas

Como se puede observar en las siguientes Figuras el asistente esta formado por 176intenciones/intents distintos (8 paginas de 20 intents y una ultima de 16 intents).Algunos tienen en su nombre el prefijo agent, otros bib, otros Default y otros smalltalk.Cada uno de estos grupos se explica a continuacion de las Figuras.

Figura D.1.: Intents implementados en Dialogflow para el asistente 1

127

128


Anexo IV. Intenciones implementadas 129


130


132


134


136

Los que comienzan con el prefijo agent son los encargados de las funcionalidadespara uso cotidiano, como por ejemplo solicitar la prediccion del tiempo, y otros paraofrecer informacion al usuario sobre el asistente o para completar los intents deSmallTalk. Los del prefijo bib son los que componen las funcionalidades relacionadascon la BVMC y con Wikidata. Los precedidos por Default son intents que vienen enDialogflow para su uso por defecto, uno para dar la bienvenida al usuario y otro paraser capaz de responder al usuario cuando el asistente no entiende el mensaje delmismo. Por ultimo tenemos los de prefijo smalltalk que dan respuesta a preguntas mashabituales, las cuales anaden inteligencia a nuestro asistente.

Tambien se podrıan agrupar los intents en los siguientes 3 grupos, por un lado los deuso general y por otro los de consumo de datos abiertos de la BVMC y Wikidata. Losde consumo de datos abiertos de la BVMC serıan el intent bib.info.cuantosidiomas,bib.obrasdeunautor, bib.quijote.ediciones y los precedidos por bib.obras y porbib.search. Los de consumo de datos abiertos de Wikidata serıan los intents de nombrebib.info.migueldecervantes.x (variando x dependiendo de que informacion muestra elintent) y el intent bib.info.migueldecervantesobras. El resto son los de uso general(informacion sobre la BVMC y el uso del asistente, resto de funcionalidades ySmallTalk).

E. Anexo V. Paso a produccion

Para hacer un primer despliegue del proyecto primero se clona el proyecto de Git.Para ello antes que nada se ha de tener configurado el servidor all que vamos a subirlo.Para hacer la clonacion, nos ubicamos en el directorio del servidor donde lo queremos yejecutamos el comando:

’git clone https://github.com/PabloGuijarroMarco/APIRestful’.

Tras tener clonado el proyecto en el directorio deseado se tienen que descargar einstalar las dependencias de Laravel y Angular. Primero se hace con Laravel.

E.1. Configurar e instalar el backend. Laravel,Express+Node.js y Grafana.

Lo primero es modificar las variables de entorno del archivo .env cambiando las urlsdel servidor local por las del servidor de produccion.

Con estas variables globales podemos indicarle a la API tanto la direccion web dondese visualizara el proyecto como la conexion con la base de datos.

Despues se comienzan a descargar e instalar las dependencias de Laravel medianteComposer en el directorio del proyecto en produccion con el comando: ’composerupdate’. Una vez se hace esto, se puede establecer la llave de la aplicacion de Laravel aun string aleatorio con el comando: php artisan key:generate.

Ya se tiene el proyecto listo para migrar las tablas de las bases de datos. Podemosmigrar tablas en caso de que se haya anadido una nueva o en general cualquier tabla dela base de datos haya sido modificada y se necesite nuevos campos, aunque en este casoal tratarse del primer despliegue, ejecutaremos simplemente el comando: ’php artisanmigrate’.

Tambien se han que configurar e instalar las dependencias tanto de Grafana, paraque los administradores puedan visualizar los cuadros de mando, como del pequenobackend que funciona con Node.js y Express, para que el frontend pueda consumirdatos de la API de Twitter.

137

138 E.2. Configurar e instalar el frontend. Angular.

E.2. Configurar e instalar el frontend. Angular.

De la misma forma que se ha hecho con el backend, en el caso de Angular seconfiguraran primero las variables globales del proyecto localizadas en.../APIRestful/resources/frontend/src/environments/environment.ts de manera que seprepare el frontend para que pueda acceder a las rutas de la API desde cualquier partey a las credenciales para conectarse desde el dominio del servidor de produccion.

Tras esto, se descargan las dependencias de Angular con el gestor NPM en lasiguiente ruta .../APIRestful/resources/frontend/ con el siguiente comando: ’npmupdate; npm install’.

E.3. Comprobar errores.

Una vez se han realizado las tareas anteriores se tiene que comprobar si el sistemafunciona correctamente. Para ello se comprobara que la API rest sigue funcionandocomo deberıa ejecutando los test unitarios de los que se dispone (unit testing). Si todosellos funcionan perfectamente significara que la API funciona correctamente.

E.4. Building.

Cuando se haya comprobado que la API funciona correctamente, ejecutaremos ngserve en distintos puertos para desplegar nuestras aplicaciones en localhost escogiendoun puerto diferente para cada una de ellas. Por ejemplo, se ejecuta el comando ’ngserve –port 4200’ para la url en produccion del frontend en.../APIRestful/resources/frontend y se ejecuta el comando ’ng serve –port 4201’ parala url en produccion de Grafana en .../APIRestful/resources/grafana-6.5.1.

Tras esto, se ha de utilizar el asistente para comprobar que todo funcionacorrectamente. Una vez hayamos verificado que tanto las funcionalidades del asistentecomo los cuadros de Grafana funcionan correctamente, ejecutaremos ’ng build’ paraconstruir ambas aplicaciones y dejarlas desplegadas en el servidor.

E.5. Ultima comprobacion de errores.

Una vez se haya terminado de buildear el proyecto se ha de entrar desde el navegadory comprobar que todo funciona como deberıa. Si ese es el caso el asistente estara listo.En caso contrario se debe ver cual es el error y repetir el procedimiento de despliegue.

F. Anexo VI. Correo recibido de Twitter

Figura F.1.: Correo recibido de Twitter

Se contesto al correo explicando que el unico proposito de usar la API de Twitter espoder obtener los tweets mas recientes de una cuenta y poder mostrarlos en el asistentevirtual del proyecto. Tambien se aclaro que no se tenıa intencion de analizar nada deTwitter ni la intencion de tuitear o retuitear o dar me gusta al contenido. Por ultimose les explico de que se trataba de un proyecto universitario y como se iban a mostraral usuario los tweets obtenidos. Finalmente Twitter respondio al correo dando permisoy acceso a su API mediante API Keys y Tokens.

139

Asistente virtual para un sistema de...

Documents

Transcript of Asistente virtual para un sistema de...