Asistente Virtual para Un Sistema de Informacion GUIJARRO MARCO PABLO

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 sistema
de información
Desarrollo de un asistente virtual que facilite la comunicación con el
usuario en la Biblioteca Virtual Miguel de Cervantes
Autor
Pablo Guijarro Marco
Directores
Gustavo Candela Romero
Departamento del Lenguajes y Sistemas Informáticos
Marı́a Dolores Sáez Fernández
Departamento del Lenguajes y Sistemas Informáticos
Grado en Ingenierı́a Multimedia
ALICANTE, 12 de enero de 2020

Resumen
Actualmente, el acceso a los sistemas de información debe ser fácil, rápido e intuitivo.
Numerosas instituciones han publicado sus datos en abierto como por ejemplo bibliotecas
nacionales, instituciones de patrimonio cultural, agencias estatales de meteorologı́a, redes
sociales, Wikidata y ayuntamientos. Sin embargo, el acceso a estos nuevos repositorios de
datos abiertos no es sencillo por la necesidad de saber utilizar el lenguaje de consulta de
base de datos SPARQL y ser capaz de entender cómo está la información estructurada
para poder comprender cómo acceder a la que se necesita. Este Trabajo Fin de Grado
(TFG) se basa en bibliotecas virtuales/digitales que ofrecen contenido mediante datos
abiertos como información sobre obras y autores.
El trabajo pretende reutilizar y facilitar el acceso a estos recursos que ofrecen las
bibliotecas virtuales. En la última década están cobrando relevancia los chatbots y los
asistentes virtuales en el mundo del e-learning ya que permiten al usuario interactuar
mediante lenguaje natural con ellos. Estos son capaces de ofrecer el contenido de las
bibliotecas virtuales de manera rápida al igual que de informar al usuario de lo que ofrece
la biblioteca con tan solo mantener una conversación con ellos. Empresas como Google,
Apple o Amazon están apostando por esta nueva tecnologı́a aplicándola en algunos de
sus productos ya que el uso de un asistente virtual va más allá de poder ofrecer los
recursos de una biblioteca virtual o de un sitio web en especı́fico. Pueden tener otras
funcionalidades que usan repositorios externos para enriquecer las respuestas que ofrece
el asistente.
El objetivo principal de este TFG es crear un asistente virtual que ofrezca tanto
funcionalidades que permitan acceder a los recursos de un sistema de información como
funcionalidades que ofrezcan información útil para la vida cotidiana de los usuarios.
Además, se ha añadido una funcionalidad adicional con el objetivo de permitir a los
administradores del sistema monitorizar mediante cuadros de mando la frecuencia de
uso del asistente y de sus funcionalidades.
Para llevar a cabo este asistente virtual se ha utilizado tanto el repositorio de datos
abiertos de la Biblioteca Virtual Miguel de Cervantes (BVMC), ya que se ha elegido
como sistema de información para el cual realizar el asistente, como también Wikidata.
Se ha validado el asistente tras la realización de pruebas unitarias y de una evaluación

con varios usuarios reales. En conclusión, es un proyecto que ofrece un asistente virtual
como 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.
Preámbulo
Vivimos en una sociedad en la cual la gente está acostumbrada a obtener lo que desea
de una manera simple, cómoda y sencilla gracias a la evolución de la tecnologı́a. Por
ejemplo, el acceso a Internet ha facilitado el consumo de todo tipo de productos de una
forma flexible y rápida.
En este contexto, actualmente están teniendo mucho éxito los asistentes virtuales,
ya que facilitan la obtención de información y el trámite dentro de una web o de una
app. En resumen, ofrecen facilidad y rapidez para que las personas encuentren lo que
buscan o realicen la acción que quieren dentro de un sitio web. En este sentido, un
asistente virtual permite interactuar con el usuario mediante el uso del lenguaje natural
simulando el comportamiento de una persona.
Por este motivo principalmente he decidido realizar un asistente virtual que facilite el
acceso de informacion a los usuarios de la BVMC, entre otros servicios. El objetivo de
este TFG es diseñar e implementar una API para darle sustento al asistente, entrenar al
asistente para que pueda responder correctamente a las peticiones del usuario, consumir
datos de terceros como, por ejemplo, de la propia biblioteca y dotarle de un buen diseño
para 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 que
sin 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 del
paso en situaciones difı́ciles que se me han presentado durante el transcurso de esta carrera.
También agradecer a mis tutores por formar parte de este último proyecto antes de salir al
mundo 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
Algún 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 contenido
en un ordenador.
Marvin Minsky.
xi
Índice general
Resumen V
1. Introducción 1
2. Viabilidad 5
2.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 única . . . . . . . . . . . . . . . . . . . . . . . . 7
2.1.4. Solución . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.1.5. Canales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.1.6. Estructura de costes . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.1.7. Métricas clave . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.1.8. Fuentes de ingreso . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.1.9. Ventaja especial . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.2. Análisis DAFO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.2.1. Debilidades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.2.2. Amenazas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.2.3. Fortalezas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.2.4. Oportunidades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.3. Análisis de los riesgos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3. Objetivos 15
3.1. Generales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.2. Especı́ficos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
4. Marco Teórico 17
4.1. Asistentes virtuales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4.2. Fuentes de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.2.1. La Web Semántica y la definición 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 Índice general
4.5. UX y diseño . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
5. Metodologı́a 35
6. Análisis y especificación 39
6.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. Diseño 49
7.1. Arquitectura seleccionada . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
7.2. Tecnologı́as . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
7.3. Diagrama de clases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
7.4. Mockups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
8. Implementación 63
8.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 validación 93
9.1. Pruebas unitarias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
9.2. Casos de prueba . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
9.2.1. Evaluación a nivel de sesión . . . . . . . . . . . . . . . . . . . . . . 96
9.2.2. Evaluación a nivel de turno . . . . . . . . . . . . . . . . . . . . . . 97
10.Resultados 99
11.Conclusiones 107
11.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

Índice general xv
C. Anexo III. Consultas SPARQL 123

C.1. Para Wikidata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
C.2. Para la BVMC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
D. Anexo IV. Intenciones implementadas 127
E. Anexo V. Paso a producción 137

E.1. Configurar e instalar el backend. Laravel, Express+Node.js y Grafana. . . 137
E.2. Configurar e instalar el frontend. Angular. . . . . . . . . . . . . . . . . . . 138
E.3. Comprobar errores. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
E.4. Building. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
E.5. Última comprobación de errores. . . . . . . . . . . . . . . . . . . . . . . . 138
F. Anexo VI. Correo recibido de Twitter 139

Índice de figuras
2.1. Análisis Lean Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2.2. Análisis DAFO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
4.1. Asistentes virtuales más utilizados a principios de 2019 . . . . . . . . . . . 18

4.2. Comparación entre Google Assistant, Siri y Alexa . . . . . . . . . . . . . . 19
4.3. Ejemplo que muestra cómo se convierte una consulta SQL a SPARQL . . 23
4.4. Funcionamiento del KB Lab Bot . . . . . . . . . . . . . . . . . . . . . . . 26
5.1. Visualización del repositorio del proyecto desde GitKraken . . . . . . . . . 38
6.1. Diagrama de casos de uso . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
7.1. Arquitectura REST orientada a servicios . . . . . . . . . . . . . . . . . . . 50

7.2. Tecnologı́as utilizadas en el proyecto . . . . . . . . . . . . . . . . . . . . . 51
7.3. Diagrama de clases del proyecto . . . . . . . . . . . . . . . . . . . . . . . . 54
7.4. Mockup versión móvil 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
7.7. Mockup versión escritorio 1 . . . . . . . . . . . . . . . . . . . . . . . . . . 58
8.1. Ejemplos de los cuadros de mando implementados en Grafana . . . . . . . 92
9.1. Pruebas unitarias pasadas con éxito . . . . . . . . . . . . . . . . . . . . . 95

9.2. Resultados de la evaluación a nivel de sesión . . . . . . . . . . . . . . . . . 96
10.1. Diseño final del asistente en la web de desarrollo de la BVMC . . . . . . . 99

10.2. Diseño final del asistente cuando está cerrado . . . . . . . . . . . . . . . . 100
10.3. Diseño final del asistente cuando está abierto . . . . . . . . . . . . . . . . 100
10.4. Ejemplos de varias respuestas del asistente . . . . . . . . . . . . . . . . . . 101
10.5. Funcionalidad buscar obras de un autor en concreto . . . . . . . . . . . . 101
10.6. Respuestas del asistente sobre Miguel de Cervantes Saavedra . . . . . . . 102
10.7. Funcionalidad mostrar vı́deos de YouTube de la BVMC . . . . . . . . . . 102
10.8. Funcionalidad mostrar últimos tweets de la BVMC . . . . . . . . . . . . . 103
10.9. Buscar obras en un idioma concreto y predicción del tiempo en España . . 103
A.1. Base de datos MySQL del proyecto . . . . . . . . . . . . . . . . . . . . . . 115
xvii
xviii Índice de figuras
B.1. Informe de Toggl 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

D.1. Intents implementados en Dialogflow para el asistente 1 . . . . . . . . . . 127

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

Índice de tablas
2.1. Riesgos sobre la organización . . . . . . . . . . . . . . . . . . . . . . . . . 12

2.2. Riesgos sobre los requerimientos . . . . . . . . . . . . . . . . . . . . . . . 12
2.3. Riesgos sobre la tecnologı́a . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.4. Riesgos sobre la estimación . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.5. Riesgos sobre las herramientas . . . . . . . . . . . . . . . . . . . . . . . . 14
2.6. Riesgos sobre el personal . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
6.1. Requerimiento funcional mantener una conversación . . . . . . . . . . . . 41

6.2. Requerimiento funcional resolver dudas . . . . . . . . . . . . . . . . . . . 41
6.3. Requerimiento funcional conocer predicción del tiempo . . . . . . . . . . . 41
6.4. Requerimiento funcional informar sobre Miguel de Cervantes . . . . . . . 42
6.5. Requerimiento funcional consultar obras disponibles en un idioma en con-
creto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
6.6. Requerimiento funcional consultar ediciones de El Quijote . . . . . . . . . 42
6.7. Requerimiento funcional solicitar predicción horóscopo . . . . . . . . . . . 42
6.8. Requerimiento funcional realizar traducciones . . . . . . . . . . . . . . . . 43
6.9. Requerimiento funcional búsquedas de contenido de la BVMC . . . . . . . 43
6.10. Requerimiento funcional mostrar últimos tweets de la BVMC . . . . . . . 43
6.11. Requerimiento funcional mostrar vı́deos del canal de YouTube de la BVMC 43
6.12. Requerimiento funcional solicitar noticias de actualidad . . . . . . . . . . 44
6.13. Requerimiento funcional realizar búsquedas de páginas web . . . . . . . . 44
6.14. Requerimiento funcional registrar acción . . . . . . . . . . . . . . . . . . . 44
6.15. Requerimiento funcional generar cuadros de mando . . . . . . . . . . . . . 44
6.16. Requerimiento no funcional disponibilidad . . . . . . . . . . . . . . . . . . 45
6.17. Requerimiento no funcional seguridad . . . . . . . . . . . . . . . . . . . . 45
6.18. Requerimiento no funcional rendimiento . . . . . . . . . . . . . . . . . . . 45
6.19. Requerimiento no funcional multiplataforma . . . . . . . . . . . . . . . . . 46
6.20. Requerimiento no funcional ofrecer interfaz atractiva . . . . . . . . . . . . 46
9.1. Resultados de la evaluación a nivel de turno . . . . . . . . . . . . . . . . . 97
xix
Índice de Listados
8.1. Primeras lı́neas del archivo .env del proyecto Laravel . . . . . . . . . . . . 63

8.2. API Agente Catalina Dialogflow . . . . . . . . . . . . . . . . . . . . . . . 65
8.3. Solicitud de datos a Wikidata . . . . . . . . . . . . . . . . . . . . . . . . . 66
8.4. Solicitud de datos a AEMET . . . . . . . . . . . . . . . . . . . . . . . . . 67
8.5. Solicitud de datos a la BVMC . . . . . . . . . . . . . . . . . . . . . . . . . 68
8.6. Proxy BVMC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
8.7. Pedir predicción del horóscopo . . . . . . . . . . . . . . . . . . . . . . . . 70
8.8. Detectar idioma del texto a traducir . . . . . . . . . . . . . . . . . . . . . 70
8.9. Traducir texto a otro idioma . . . . . . . . . . . . . . . . . . . . . . . . . 71
8.10. Buscar noticias de actualidad . . . . . . . . . . . . . . . . . . . . . . . . . 71
8.11. Obtener vı́deos del canal de YouTube de la BVMC . . . . . . . . . . . . . 71
8.12. Obtener resultados de una búsqueda de páginas web . . . . . . . . . . . . 72
8.13. Backend creado para hacer llamadas a la API de Twitter (server.js) . . . 74
8.14. Backend creado para hacer llamadas a la API de Twitter (config.js) . . . 74
8.15. Backend creado para hacer llamadas a la API de Twitter (functions.js) . . 75
8.16. Llamadas al backend para obtener los últimos tweets de la BVMC . . . . 76
8.17. Código HTML para poner un ancla a una respuesta del asistente . . . . . 77
8.18. Código TypeScript para poner un ancla a una respuesta del asistente . . . 77
8.19. Código TypeScript para hacer funcionar el enlace ancla añadido . . . . . . 77
8.20. Código HTML para visualizar elemento 3D . . . . . . . . . . . . . . . . . 78
8.21. Código añadido en TypeScript para visualizar elemento 3D . . . . . . . . 78
8.22. Usar clickOutside para saber si se ha hecho click fuera del asistente . . . . 79
8.23. Servicio para usar el motor gráfico 1 . . . . . . . . . . . . . . . . . . . . . 80
8.26. Modelo BusquedasAutor . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
8.27. Controlador BusquedasAutor . . . . . . . . . . . . . . . . . . . . . . . . . 85
8.28. Añadir las rutas para el controlador BusquedasAutor . . . . . . . . . . . . 85
8.29. Migración BusquedasAutor . . . . . . . . . . . . . . . . . . . . . . . . . . 86
8.30. Factory BusquedasAutor . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
8.31. Seeder BusquedasAutor . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
8.32. Servicio BusquedasAutor . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
8.33. Usar desde TypeScript el servicio BusquedasAutor . . . . . . . . . . . . . 89
8.34. Consulta SQL para obtener datos de la tabla interactions desde Grafana . 90
9.1. Unit Testing: BusquedasAutorTest . . . . . . . . . . . . . . . . . . . . . . 94
xxi
xxii Índice de Listados
C.1. Consulta SPARQL a Wikidata (Obras de Miguel de Cervantes Saavedra) 123

C.2. Consulta SPARQL a Wikidata (Padres de Miguel de Cervantes Saavedra) 123
C.3. Consulta SPARQL a Wikidata (Nacimiento Miguel de Cervantes Saavedra)124
C.4. Consulta SPARQL a Wikidata (Muerte Miguel de Cervantes Saavedra) . 124
C.5. Consulta SPARQL a Wikidata (Foto Miguel de Cervantes Saavedra) . . . 124
C.6. Consulta SPARQL a Wikidata (Información variada sobre Miguel de Cer-
vantes Saavedra) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
C.7. Consulta SPARQL a la BVMC (Ediciones de la obra El ingenioso hidalgo
Don Quijote de la Mancha) . . . . . . . . . . . . . . . . . . . . . . . . . . 125
C.8. Consulta SPARQL a la BVMC (Obras almacenadas de cada idioma) . . . 126
C.9. Consulta SPARQL a la BVMC (Buscar obra; Ejemplo El ingenioso hidalgo
Don Quijote de la Mancha) . . . . . . . . . . . . . . . . . . . . . . . . . . 126
C.10.Consulta SPARQL a la BVMC (Buscar autor; Ejemplo Lope de Vega) . . 126
C.11.Consulta SPARQL a la BVMC (Buscar obras de cierto autor; Ejemplo
Lope de Vega) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
1. Introducción
Vivimos en un mundo de constante transformación digital impulsado en los últimos

años por la evolución del móvil y la Inteligencia Artificial (IA).
Los chatbots son solo un componente del entorno de IA y están apareciendo a un

ritmo rápido en toda la industria de la comunicación. Estos bots simples ayudan a
responder preguntas y completar tareas repetitivas en nombre de las empresas para
que los empleados puedan ser lo más productivos posible en el trabajo y los clientes
puedan disfrutar de un mejor servicio. De hecho, podemos ver evidencia de IA en casi
todos los entornos, desde nuestras interacciones con asistentes virtuales como Cortana
de 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 la
constante disponibilidad, a su respuesta instantánea y a su fácil acceso. Los chatbots
pueden estar operativos los 365 dı́as del año y las 24 horas del dı́a, lo que les permite
atender a sus clientes incluso mientras los miembros realizan otras tareas.
Los consumidores contemporáneos desean resultados inmediatos y se apoyan en las

empresas que ofrecen rapidez. Un estudio sobre la experiencia del usuario de chatbot
descubrió que al 40 por ciento de los consumidores no les importa si un humano o un
chatbot responde a sus preguntas siempre que reciban ayuda rápida1 . Además, los usua-
rios pueden acceder fácilmente a los chatbots y se alejan cada vez más de las consultas
telefónicas tradicionales ya que desean que todo sea accesible al instante.
Hay diversos estudios que demuestran que la incorporación de la atención al cliente

habilitada por IA ha hecho que las empresas hayan ahorrado hasta un 30 por ciento en
costos. Además el uso de chatbots también puede impulsar el número de ventas de una
compañı́a. [Entrepreneur.com, 2018]
Todo esto es posible debido a que en el ámbito de la empresa actualmente se utiliza

Internet para almacenar información y distribuir la misma. Esto se ha ido incrementando
en los últimos años de tal forma que existen muy pocas empresas, cada vez menos, que
no tienen su propia página web o aplicación de móvil desde la cual poder administrar
y controlar su negocio. Desde estas páginas web y aplicaciones móviles las empresas
pueden saber si están habiendo pérdidas, ganancias o incluso qué trabajadores producen
más que otros. Toda esta información se almacena en la base de datos perteneciente a
la propia empresa.
1
https://www.hubspot.com/stories/artificial-intelligence
1
2
Hoy en dı́a podemos contar con asistentes virtuales que aprovechan dicha información
para ofrecer una mejor experiencia de usuario. Son capaces de encontrar y acceder a in-
formación de manera rápida y eficaz con tan sólo pedı́rselo mediante el lenguaje natural,
es decir, mediante un mensaje de texto que escribe el usuario. Además, los asistentes
virtuales pueden proporcionar muchos otros tipos de servicios de soporte a los usuarios
o clientes, como soporte administrativo, resolución de problemas técnicos, ayuda con
aportes creativos y adquisición 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 además, con las innovaciones
más recientes en sus habilidades y servicios, facilitan la expansión de cualquier negocio.
En definitiva, en cualquier campo o industria se ha aceptado que la implementación

de estrategias inteligentes ası́ como la gestión adecuada del tiempo y los recursos son los
dos factores más importantes para el éxito. Pero hoy en dı́a, a pesar del hecho de que
la tecnologı́a está evolucionando a un ritmo acelerado, los dueños de los negocios y las
empresas están cada vez más ocupados. Tienen más cosas que hacer y administrar el
tiempo de manera eficiente es casi imposible para ellos solos. Esta es la principal razón
por la cual los asistentes virtuales se están volviendo tan populares.
Tienen las habilidades y la experiencia necesarias para realizar tareas que los asistentes
normales no pueden hacer, y han demostrado ser capaces de manejar trabajos de manera
efectiva y rápida. Este año ha habido una creciente competencia en los negocios en lı́nea,
y cada vez más personas asumen el riesgo de convertirse en emprendedores. Debido a
que los asistentes virtuales son tan efectivos y útiles, especialmente para las pequeñas
empresas, tendrán aún más demanda de aquı́ en adelante. Tener un asistente virtual
puede 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: la
forma de desarrollo de estas tecnologı́as es distinta, no llevan a cabo las mismas funciones
y no se desarrollan en el mismo entorno.
La principal diferencia es que los asistentes virtuales son creados por las grandes
compañı́as tecnológicas con una ambición muy concreta: convertirse en nuestro asistente
personal, resolviendo todas las dudas que puedan surgir en cualquier momento. De todas
formas, cualquier compañı́a puede poner en marcha un chatbot. Para ello lo único que
necesita es ponerse en contacto con empresas especializadas que se encarguen de su
creación y entrenamiento. El objetivo de estas empresas a la hora de crear el asistente
es dinamizar sus comunicaciones empresariales y automatizar la relación con los cliente
en 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, el
de los chatbots es más especı́fico. Los chatbots se crean con la finalidad de resolver una
acción clara con un objetivo concreto. Suele estar enfocada a la resolución de preguntas
Introducción 3
frecuentes, aligerar el grueso de trabajo a los centros de contacto o la captación de leads.
Y además la otra diferencia se resume en que a pesar de que ambos han nacido como
consecuencia del auge de la tecnologı́a conversacional, chatbots y asistentes virtuales
no se integran en los mismos entornos. Mientras que los asistentes virtuales nacen en
sı́ mismos como una nueva aplicación en el móvil y se alojan en un entorno completa-
mente novedoso que ya se conoce como Home Speakers o Home Devices, como Google
Home, Amazon Echo o HomePod de Apple, los chatbots se desarrollan en páginas webs,
apps de mensajerı́a, redes sociales o aplicaciones. Estos dispositivos son una nueva pla-
taforma por explotar para la introducción de chatbots y convertirse en el alma de los
Smart Speakers, que pronto formarán parte del mobiliario habitual de cualquier hogar.
[Foromarketing.com, 2018]
Existen, además, multitud de instituciones que publican datos abiertos. Tanto algunos
asistentes virtuales como chatbots consumen este tipo de datos para ofrecer respuestas
al usuario más elaboradas y con información actualizada[Link.springer.com, 2019]. Un
ejemplo 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 para
web semántica SPARQL. Hay una nueva tendencia que promueve la reutilización de las
colecciones 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 creación y

publicación de chatbots y de asistentes virtuales. Estas pueden ser frameworks, herra-
mientas online o lenguajes de programación. Tras el desarrollo de uno de ellos, se ha de
validar 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ı́a
considerarse un chatbot pero, como además de ofrecer las funcionalidades de resolver
dudas y ofrecer contenido de la biblioteca también tiene otras implementadas para su
uso 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 optimizar
los procesos de búsqueda de la BVMC. Principalmente para ayudar a las personas que
tienen dificultades para orientarse en su web pero también para agilizar este trabajo
a cualquier usuario que utilice sus servicios. Al asistente se le ha llamado Catalina en
honor a quien fue la esposa de Miguel de Cervantes. El asistente facilita el acceso a toda
la información de la biblioteca y además la completa gracias a lo que nos ofrece Wikidata
y a varias APIs externas con las que se comunica.
2
https://glamlabs.io/
2. Viabilidad
Se ha realizado un estudio de viabilidad del proyecto con el objetivo de definir cada

uno de los puntos clave del sistema. Examinar a fondo todas las cuestiones y evaluar su
probabilidad de éxito antes de iniciar el proyecto nos hace tener una mejor perspectiva
del mismo y aumentar la probabilidad de éxito 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.: Análisis Lean Canvas
Para ello se utiliza Lean Canvas, que es una plantilla de plan de negocios de 1 pági-
na que ayuda a deconstruir una idea en sus supuestos clave utilizando 9 bloques de
5
6 2.1. Modelo de negocio, Lean Canvas
construcción básicos. [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 clasificación de los clientes que va a tener
nuestro negocio. Básicamente es responder a la pregunta ¿Qué caracterı́sticas debe
tener una persona o empresa para convertirse en mi cliente potencial?
[Emprender-facil.com, 2018]
Tal como señala su nombre, los early adopters son aquellos primeros clientes que
adoptan un producto determinado. Los early adopters tienen problemas especı́ficos y
están a la búsqueda de productos que puedan solucionarlos, por ello son los primeros
clientes. A ellos no les importa si el producto es perfecto, incluso están dispuestos a
escribir acerca del producto para dar ideas de cómo mejorarlo, es decir crean un
feedback con la empresa. [Destinonegocio.com, 2015]
Para el asistente los early adopters, o usuarios ideales, serı́an clientes de bibliotecas
virtuales con un catálogo online. Básicamente son usuarios de las bibliotecas.
Este asistente virtual va a estar diseñado en concreto para la BVMC pero también
podrı́a modficarse ligeramente para poder ser utilizado en otras bibliotecas virtuales.
2.1.2. Problema
Básicamente en esta sección se trata de identificar cuales son los problemas que mi
producto resuelve al usuario y al cliente ya que los problemas de los clientes serán
distintos a los problemas de los usuarios. En este caso el problema que podrı́an tener
los clientes serı́a tener interfaces costosas y difı́ciles de adaptar a la actualidad para dar
a nuestros usuarios mucha información que no se sabe que está. Por ello la decisión de
integrar el asistente puede arreglar esto.
En cambio los problemas que el asistente resuelve a los usuarios son la dificultad de
encontrar la información que el usuario desea, además de agilizar el proceso, y el
desconocimiento por parte del mismo de conocer qué les ofrece la web.
Cuando un usuario interacciona con el buscador y no encuentra el contenido que esta

buscando o este se encuentra incompleto este se frustra por lo tanto no se encontrará
satisfecho sobre la experiencia que ha tenido. Esto lleva a un desconocimiento de si el
contenido es óptimo, entendible y de buena calidad. Por ello a través del asistente se
busca resolver este problema.
Viabilidad 7
2.1.3. Propuesta de valor única
La propuesta de valor única debe definir los productos o servicios que se ofrecen a un
segmento de clientes pero, sin embargo, no se han de destacar sus caracterı́sticas sino
más bien se ha de hacer hincapié en los beneficios que les aportamos a los clientes y en
los factores que nos diferencian de la competencia. [Emprender-facil.com, 2019]
Por ello indicar que el asistente ofrece acceso rápido a la información de la biblioteca,
otros servicios para uso cotidiano, monitorización del uso del asistente a los
administradores y resolución de dudas. Todo esto es lo que propone el proyecto que
aportará ese beneficio al usuario y que nos diferenciará de otros asistentes virtuales y
chatbots para bibliotecas virtuales.
2.1.4. Solución
Para obtener una solución al problema con el que se pueden encontrar los clientes
está el realizar una interfaz atractiva de cara al usuario y trabajar su funcionamiento
interno para poder ofrecer la información, la cual puede desconocer el usuario, de una
manera sencilla y eficaz mejorando ası́ la UX (experiencia de usuario).
Respecto a solucionar los problemas que podrı́an tener los usuarios, el asistente
agiliza las búsquedas de los recursos que tiene la biblioteca mediante el uso del lenguaje
natural ya que la base de toda relación humana es la comunicación y si dotamos a la
web de esta ayudará no solo a personas con un gran desconocimiento de la informática
y la web sino también a aquellos usuarios más cómodos y que deseen tenerlo todo a su
alcance con el menor número de clics posibles. Además tiene la capacidad de resolver
dudas al usuario acerca del sitio web. Es necesario entrenar al asistente virtual para
mejorar el número de respuestas válidas que este sea capaz de devolver al usuario.
Registrar y poder analizar los eventos o interacciones que hacen los usuarios es
necesario para que la comunidad de la biblioteca virtual siga creciendo ya que permite
saber si realmente el asistente está siendo utilizado o no y lo mismo para cada uno de
los servicios que este ofrece. Conocer esta información ayuda a los administradores a
plantearse si el asistente necesita ser modificado, actualizado o está teniendo éxito.
Esta información recogida es monitorizada mediante cuadros de mando para facilitar
su visualización y entendimiento.
Además hay diversas funcionalidades exclusivas del asistente que ofrecen información
para uso cotidiano como, por ejemplo, la posibilidad de obtener la predicción del
tiempo en España 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́ únicamente

accesible desde la propia web corporativa de la BVMC.
Además se utilizaran las RRSS (Redes sociales) para anunciar la disponibilidad del
nuevo servicio de asistencia virtual para aquellos que no sepan de su existencia. Esto
último se realizará en cuanto esté disponible dicho asistente. Esto se anunciará sobre
todo a través de Twitter ya que es una de las redes sociales más utilizadas por la
biblioteca.
2.1.6. Estructura de costes
El mayor coste para este trabajo se centra en el valor del tiempo. Estudio de la
tecnologı́a, el tiempo que dura el desarrollo del mismo y la realización de pruebas para
ası́ validar el proyecto.
Si se quisiera más adelante mantener el proyecto actualizado y con la idea de

monetizarlo ya a los costes previos se les añadirı́an costes de recursos humanos,
licencias y servidores.
2.1.7. Métricas clave
Se generan un conjunto muy reducido de indicadores que luego ayudan a la toma de

decisiones, estos son los KPIs:
El número de usuarios que han utilizado el asistente virtual durante un cierto

periodo de tiempo.
El siguiente es la cantidad de veces que se ha solicitado realizar búsquedas de un

autor a través del asistente virtual durante un cierto periodo de tiempo.
La cantidad de veces que se ha solicitado realizar búsquedas de una obra a través

del asistente virtual durante un cierto periodo de tiempo.
La cantidad de veces que se ha solicitado realizar búsquedas de las obras de

cierto autor a través del asistente virtual durante un cierto periodo de tiempo.
La cantidad de veces que se ha solicitado realizar búsquedas de páginas web en

Internet a través del asistente virtual durante un cierto periodo de tiempo.
La cantidad de veces que se han solicitado las diferentes ediciones del quijote
almacenadas en la biblioteca a través del asistente virtual durante un cierto
periodo de tiempo.
Viabilidad 9
La cantidad de veces que se ha solicitado la predicción diaria del horóscopo a

través del asistente virtual durante un cierto periodo de tiempo.
La cantidad de veces que se han solicitado noticias de actualidad a través del

asistente virtual durante un cierto periodo de tiempo.
La cantidad de veces que se han solicitado las obras almacenadas en la biblioteca

en un idioma en concreto a través del asistente virtual durante un cierto periodo
de tiempo.
La cantidad de veces que se ha solicitado la predicción del tiempo en España del

dı́a actual o del dı́a siguiente a través del asistente virtual durante un cierto
periodo de tiempo.
La cantidad de veces que se ha solicitado realizar una traducción de un texto a

través del asistente virtual durante un cierto periodo de tiempo.
La cantidad de veces que se han solicitado los últimos tweets publicados en la

cuenta de Twitter de la BVMC a través del asistente virtual durante un cierto
periodo de tiempo.
La cantidad de veces que se han solicitado vı́deos publicados en la cuenta de

YouTube de la BVMC a través del asistente virtual durante un cierto periodo de
tiempo.
La cantidad de veces que se han solicitado datos de Wikidata a través del

asistente virtual durante un cierto periodo de tiempo.
Se comenzará a ver si hay o no hay una mayor interacción con el contenido a través
del asistente. Si hay una mayor interacción con el contenido significará que se habrán
mejorado alguna de sus decadencias y ahora es una web que ha facilitado el acceso a
sus recursos y que estos son consultados con más frecuencia. Si aumentan las visitas a
la web y el tiempo de estancia de los usuarios en la misma significará que el asistente
ha cumplido con su fin.
Añadir que el periodo de tiempo del que se muestren los datos referenciados en los
KPIs se podrá modificar libremente en los cuadros de mando resultantes de los
mismos. Estos fueron implementados con la ayuda de la herramienta Grafana a la cual
se hará referencia más adelante.
2.1.8. Fuentes de ingreso
Aunque inicialmente este trabajo es académico y no tiene carácter económico, se

identifica una forma de monetizar el producto. Esta consiste en su integración en
diferentes bibliotecas virtuales. Si en la BVMC tiene éxito otras bibliotecas virtuales
10 2.2. Análisis DAFO
podrı́an solicitar un servicio similar para ellas. Tan sólo habrı́a que adaptar ligeramente
el asistente y sin mucho trabajo contarı́an con una nueva versión 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 y
Cortana respectivamente). Además se cuenta con contenido de la BVMC y de
Wikidata de donde el asistente sacará toda la información necesaria sobre los autores y
sus obras literarias.
2.2. Análisis DAFO
El DAFO (iniciales de Debilidades, Amenazas, Fortalezas y Oportunidades) es una

herramienta que permite al empresario realizar un análisis 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 análisis DAFO realizado es el

que 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 evolucionar
mucho de aquı́ a futuros años. Además es bastante innovador el tener un asistente
virtual disponible para la página web de una empresa y no muchas lo tienen, por ello
las empresas todavı́a no creen que pueda ser un canal. Además creen que pueden quitar
puestos de trabajo de los departamentos de Call Center.
Viabilidad 11
Figura 2.2.: Análisis DAFO
2.2.2. Amenazas
La primera de todas es la competencia ya que es posible que otras empresas

empiecen a hacer asistentes virtuales para otras bibliotecas virtuales y el valor añadido
que ofrece en la BVMC desaparezca. Otra amenaza es que está hecho únicamente para
bibliotecas virtuales por lo que no serı́a extendible a otros mercados. Además también
es muy importante el tema de la seguridad para que no puedan modificar desde fuera
el comportamiento del asistente ni robar información privada a través del mismo.
2.2.3. Fortalezas
Mejora la experiencia de usuario actual en la biblioteca virtual ya que facilita el

acceso al contenido mediante lenguaje natural y gracias a esto también proporciona
información extra obtenida de APIs externas como la de Wikidata. Esto hace que la
comunicación con el usuario sea más eficiente y personalizada ya que el asistente puede
contestar a millones de usuarios al mismo tiempo y llevar conversaciones
independientes con cada uno de ellos.
12 2.3. Análisis de los riesgos
2.2.4. Oportunidades
Desde el asistente virtual se puede saber cuáles son los trámites y búsquedas más
realizadas por los usuarios desde este al igual que otra información valiosa para los
administradores de la biblioteca. Este servicio que ofrece el asistente también
aumentará la satisfacción de los usuarios con respecto a lo que ofrece la web sin el
mismo. El asistente además completará la información de la biblioteca con los datos
que ofrece la API de Wikidata. Añadir que encima los usuarios están, ya hoy en dı́a,
acostumbrados a usar los chats.
2.3. Análisis de los riesgos
ORGANIZACIONAL
Posible riesgo Probabilidad Efectos
Mala planificación Moderada Serio
Tabla 2.1.: Riesgos sobre la organización
REQUERIMIENTOS
Posible riesgo Probabilidad Efectos Estrategias
1.Prevención:
Testeo y
corregir errores.
2.Minimización:
Hacerla lo más
BBDD: modificaciones en datos o tablas Moderada Catastrófico
flexible posible
3.Plan de
contingencia: se
rediseña el
modelo.
Tabla 2.2.: Riesgos sobre los requerimientos
Viabilidad 13
TECNOLOGÍA
Posible riesgo Probabilidad Efectos Estrategias
1.Prevención:
Hacer estudio
exhaustivo y
testeo.
2.Minimización:
Hacer una
Dialogflow Baja Catastrófico planificación a
corto plazo
3.Plan de
contingencia:
pedir opinión a
una persona
externa.
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
ESTIMACIÓN
Mala organización de preferencias Baja Serio
Adición de nuevas tareas Moderada Serio
Tabla 2.4.: Riesgos sobre la estimación

14 2.3. Análisis de los riesgos
HERRAMIENTAS
Toggl: Versión gratuita incompleta Alta Tolerable
Git: Falta de formación 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 programación 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 para

este TFG.
3.1. Generales
El objetivo general del proyecto es crear un asistente virtual para la BVMC que
mejore la experiencia de usuario del sitio web y facilite el acceso a los usuarios.
3.2. Especı́ficos
El objetivo general mencionado en la sección anterior se puede dividir en 5 objetivos

especı́ficos:
1. Realizar un estudio sobre el uso de asistentes virtuales en bibliotecas digitales y

sus contenidos.
2. Definir un conjunto de intenciones enfocado al dominio de bibliotecas que

satisfagan las consultas de los usuarios.
3. Diseñar e implementar un asistente que facilite el acceso a la información de una

biblioteca digital, consultando repositorios de datos abiertos enlazados.
4. Realizar la validación del asistente virtual a partir de un conjunto de usuarios.
5. Implementar un panel de administración para el asistente virtual.
15
4. Marco Teórico
En este capı́tulo se revisa el estado de la cuestión sobre desarrollar un asistente

virtual que utilice datos abiertos para el sistema de información 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 interacción hombre-máquina.
Básicamente es un agente de software. Una persona se comunica usando la voz o
mediante texto por lo tanto la interacción que se da entre una persona y un asistente
virtual debe ser igual de natural. El usuario envı́a un mensaje y el asistente virtual lo
procesa, interpreta y responde de la misma manera. [Wikipedia.org, 2020]
La mayorı́a de asistentes virtuales y casualmente todos los de mayor éxito tienen

tanto nombre como timbre de voz femenino. Esto es debido a ciertos estudios que
demuestran que las mujeres sienten más confianza hablando con un asistente femenino
y que los hombres se sienten más atraı́dos a utilizarlo de esta manera también.
Básicamente se basa en la psicologı́a humana el hecho de tomar la decisión de poner un
nombre femenino al asistente, se sabe que la gente lo va a utilizar más y hay datos
estadı́sticos que confirman esta teorı́a por lo cual como interesa que el asistente sea
utilizado pues se le denomina con un nombre femenino.
Según una encuesta realizada a principios de 2019 cerca del 90 por ciento de los
encuestados afirman que prefieren el asistente virtual Siri, propiedad de Apple, en su
vida diaria, mientras que un 11,6 por ciento opta por el asistente de Google, un 9,8 por
ciento por Alexa (Amazon), un 8,9 por ciento Cortana (Microsoft), un 6,5 por ciento
Bixby (Samsung) y un 2,5 por ciento Aura (Movistar). [Ipmark.com, 2019]
Si comparamos los 4 asistentes más utilizados según esta encuesta podemos sacar
ciertas conclusiones. Todos están siendo mejorados en cuanto a su comprensión como
en cuanto a las respuestas que ofrecen a los usuarios para sus preguntas. Esta
constante mejora es posible gracias a las empresas internacionales más grandes que
utilizan a personas para mejorar su IA.
17
18 4.1. Asistentes virtuales
Figura 4.1.: Asistentes virtuales más utilizados a principios de 2019
En diciembre de 2018 se le hicieron 800 preguntas tanto a Amazon Alexa como a

Apple Siri, a Google Assistant y a Microsoft Cortana. Google respondió el 88 por
ciento 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, la
prueba fue en altavoces inteligentes y no en teléfonos inteligentes.
Ası́ que se realizó una prueba similar de inteligencia, pero esta vez se centró
únicamente en las capacidades de asistente en el teléfono y además ya no evaluaron a
Cortana porque Microsoft decidió el año pasado que ya no era un competidor con
Alexa, Google Assistant y Siri.
La eliminación de Cortana y el aislamiento de los asistentes al uso de teléfonos

inteligentes no han cambiado el orden de las clasificaciones.
El Asistente de Google sigue en la cima, pero ahora con un puntaje de 92.9 por
ciento por responder preguntas correctamente. Siri responde correctamente el 83.1 por
ciento de las preguntas, mientras que Alexa obtiene el 79.8 por ciento de respuestas
Marco Teórico 19
correctas. [Zdnet.com, 2019]
Figura 4.2.: Comparación entre Google Assistant, Siri y Alexa
Como se puede observar en la Figura 4.2, Google Assistant supera a los otros dos en
todo excepto a Siri en comandos. A Alexa se le permite quedar por debajo de los demás
por el hecho de no estar integrada en dispositivos móviles, cosa que tanto Google
Assistant en Android como Siri en iOS lo están. Alexa vive en una aplicación de
terceros que puede enviar mensajes de voz y llamar a otros dispositivos Alexa pero no
puede enviar mensajes de texto, correos electrónicos o realizar una llamada telefónica.
Los asistentes virtuales también son muy útiles en el área de la educación. Pueden
mejorar la comunicación entre alumnos y profesores además de falicitar ciertos
trámites. Dos ejemplos son:
Tutor-bots1 : La comunicación entre alumnos y profesores en las universidades se

ha basado en la comunicación presencial y tutorı́as virtuales. Esta comunicación,
en general, se retrasa en el tiempo. Últimamente, gracias a los avances en IA, los
chatbots se han convertido en una realidad en las aplicaciones de mensajerı́a y en
las redes sociales. Con respecto a la aplicación de las TIC en un contexto
educativo, y en el caso particular de UACloud en la Universidad de Alicante, la
aplicación de este chatbot en la enseñanza facilita el trabajo de los profesores
proporcionando respuestas inmediatas a los alumnos. Este prototipo de chatbot
se ha entrenado a través de un conjunto de tutorı́as. Estas tutorı́as han sido
1
http://rua.ua.es/dspace/handle/10045/99373
20 4.2. Fuentes de datos
facilitadas por distintos profesores. Tras la realización de un análisis de las

tutorı́as, se han diseñado los distintos flujos de conversación. Según el tipo de
tutorı́a se han extraı́do y clasificado las distintas frases de entrenamiento han sido
extraı́das y clasificadas. Esto ha permitido finalmente establecer las diferentes
intenciones.
Chatbot UA2 : Aitana es la nueva herramienta que han desarrollado desde la

Escuela Politécnica Superior y el Grupo de Procesamiento y Sistemas de
Información a petición del Vicerrectorado de Campus y Tecnologı́a y a la cual los
estudiantes ya pueden acceder a través de Telegram para guiarlos en el proceso
de matrı́cula, capaz de realizar análisis del lenguaje y comprender lo que busca el
usuario mientras interactúa con este. Ahora mismo las funcionalidades que cubre
Aitana se centran en ayudar con el proceso de matriculación, informar de la
documentación 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 pudiendo
ser reutilizados de múltiples formas. Los repositorios basados en Web Semántica
proporcionan una fuente rica para alimentar y entrenar un asistente virtual. Un claro
ejemplo son las bibliotecas nacionales que ofrecen su contenido para que aplicaciones
de terceros puedan acceder a él y utilizarlo.
Las instituciones relacionadas con el patrimonio cultural recientemente se han

centrado en la reutilización de sus colecciones digitales organizadas por la comunidad
GLAM Labs. En este contexto, un Lab es un espacio fı́sico o digital para el desarrollo y
la experimentacion de las nuevas ideas a través del pensamiento disruptivo y la
generación de oportunidades.
4.2.1. La Web Semántica y la definición de los datos
La Web ha ido cambiando la forma en la que la sociedad trabaja y comunica.

Permite la comunicación con cualquier persona del mundo en cualquier momento del
dı́a y a muy bajo coste. También se pueden realizar transacciones económicas a través
de Internet y acceder a millones de recursos independientemente de nuestro idioma y
situación geográfica. Los factores comentados han contribuido al éxito de la Web pero,
al mismo tiempo, también han originado sus principales problemas: sobrecarga de
información y heterogeneidad de fuentes de información con el consiguiente problema
de interoperabilidad.
2
https://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 Teórico 21
La Web Semántica permite a los usuarios delegar tareas en software resolviendo ası́
estos dos problemas. El software es capaz de procesar, razonar y combinar con su
contenido además de realizar deducciones lógicas para resolver de manera automática
problemas cotidianos.
La Web Semántica es, por lo tanto, una Web extendida dotada de mayor significado
en la que cualquier usuario en Internet podrá encontrar respuestas a sus preguntas de
forma más sencilla y veloz gracias a una información mucho mejor definida. Al dotar a
la Web de más semántica se pueden obtener soluciones a problemas habituales en la
búsqueda de información gracias a que este tipo de webs utilizan una infraestructura
común. Esta arquitectura hace posible compartir, procesar y transferir información de
forma sencilla. Todos los problemas que puede ocasionar una Web carente de
semántica, debido a la dificultad que algunas veces puede tener el buscar cierta
información, se resuelven gracias a esta Web extendida y basada en el significado que
se apoya en lenguajes universales. [W3c.es, 2005]
Para obtener una adecuada definición de los datos, la Web Semántica utiliza
esencialmente RDF, SPARQL y OWL, mecanismos que ayudan a convertir la Web en
una infraestructura global con la posibilidad de compartir y reutilizar documentos y
datos entre diferentes tipos de usuarios:
Resource Description Framework (RDF) es un mecanismo que proporciona

información descriptiva simple sobre los recursos que se encuentran en la Web.
Este se utiliza en catálogos de libros, directorios, colecciones personales de
música, fotos, eventos, etc.
SPARQL Protocol and RDF Query Language (SPARQL) es un lenguaje de

consulta sobre los recursos RDF. Permite hacer búsquedas y obtener los recursos
de la Web Semántica incluso utilizando distintas fuentes datos.
Web Ontology Language (OWL) sirve para desarrollar vocabulario o temas

especı́ficos a los que asociar los recursos. Lo que hace, básicamente, es
proporcionar un lenguaje para definir ontologı́as estructuradas que pueden ser
utilizadas a través de diferentes sistemas. Las ontologı́as son utilizadas por
aplicaciones que necesitan compartir información especı́fica aunque también por
los usuarios y las bases de datos. Varios ejemplos serı́an en campos determinados
como el de las finanzas, medicina, deporte, etc. ya que estas se encargan de
definir términos que se utilizan para representar y describir un área de
conocimiento. Las ontologı́as incluyen definiciones de conceptos básicos de un
campo determinado y las relaciones entre ellos.
A continuación se explican con mayor claridad los dos primeros mecanismos, es

decir, el que la manera de ordenar la información almacenada sea mediante tripletas en
RDF 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 diseño en sus orı́genes para metadatos como un modelo de datos.
Se ha llegado a utilizar, para la descripción conceptual o modelado de la
información, como un método general que se implementa en los recursos web.
Este utiliza una variedad de notaciones de sintaxis y formatos de serialización de
datos. Los enfoques de modelado conceptual clásicos como entidad-relación o
diagramas de clases son similares al del modelo de datos RDF. Esto se debe a que
se basa en la idea de hacer declaraciones sobre los recursos (en particular,
recursos web) en forma de expresiones sujeto-predicado-objeto. Estas expresiones
son conocidos como triples o tripletas en terminologı́a RDF. El sujeto indica el
recurso y el predicado denota rasgos o aspectos del recurso y además expresa una
relación entre el sujeto y el objeto. Por ejemplo, una forma de representar la idea
de El cielo tiene el color azul en RDF es como la tripleta de un sujeto que denota
el cielo, un predicado que denota tiene el color y un objeto que denota azul. Por
lo tanto RDF cambia objeto por sujeto que se utilizarı́a en la notación clásica de
un modelo entidad-atributo-valor en diseño orientado a objetos, objeto (el cielo),
atributo (color) y el valor (azul). RDF es un modelo abstracto que tiene varios
formatos de serialización, por lo que la forma particular en que se codifica una
tripleta varı́a de un formato a otro. Añadir que este mecanismo es un importante
componente de la actividad de la Web Semántica de W3C ya que permite
evolucionar la Web convencional permitiendo almacenar, intercambiar y utilizar
información que es legible por máquinas que se distribuyen a través de la Web, lo
que a su vez, permite que los usuarios sean capaces de manejar la información
con mayor eficiencia y seguridad. El modelo de datos simple de RDF y la
capacidad de modelar diferentes conceptos abstractos, también ha permitido que
crezca su uso en la gestión de aplicaciones que no están relacionadas con la
actividad de la Web Semántica. [W3.org, 2014]
Por otro lado, SPARQL es un lenguaje estandarizado para la consulta de grafos

RDF. Se encuentra normalizado por el RDF Data Access Working Group
(DAWG) del W3C. En el desarrollo de la Web Semántica es necesaria esta
tecnologı́a y se constituyó como recomendación oficial del W3C. Como sucede
con SQL, es necesario que se distinga entre el motor para el almacenamiento y
recuperación de los datos y el lenguaje de consulta. Debido a esto, existen
diversas implementaciones de SPARQL. Estas generalmente están ligadas a
entornos de desarrollo y plataforma tecnológicas. Supuestamente SPARQL sólo
incorpora funciones para la recuperación de sentencias RDF pero algunas
propuestas también incluyen operaciones para el mantenimiento (creación,
modificación y borrado) de datos. [W3.org, 2013]
Marco Teórico 23
Figura 4.3.: Ejemplo que muestra cómo 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 edad
y el tipo de empleado de las personas registradas en la base de datos (en el caso de
SQL) o en el repositorio de datos abiertos (en el caso de SPARQL). En el caso de la
consulta SQL se relacionan las tablas Persona y Empleado mediante el identificador ya
que se tiene una clave ajena. En el caso de SPARQL se basa en las tripletas RDF para
llegar 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 ser
reutilizadas y enriquecidas como por ejemplo:
Biblioteca Nacional de España (BNE)3 : La BNE consiste en un organismo

autónomo encargado del depósito de todo el patrimonio bibliográfico y
documental de España. Está dedicada a reunir, catalogar y conservar fondos
bibliográficos. La BNE custodia alrededor de treinta millones de publicaciones
producidas en territorio nacional. Las publicaciones almacenadas datan desde
comienzos del siglo XVIII hasta la actualidad. Estas son libros, revistas, mapas,
grabados, dibujos, partituras y folletos. La BNE difunde este patrimonio
bibliográfico a través de su catálogo y de la elaboración de la Bibliografı́a
Española y desarrolla servicios al público que van desde los servicios de
información bibliográfica especializada y el préstamo interbibliotecario, a las salas
de consulta y los servicios a distancia a través su página web. La biblioteca
3
http://datos.bne.es/inicio.html
propone al usuario un nuevo modo de acercarse a las colecciones y recursos de la

BNE. Esta es mediante la publicación de sus datos como Linked Open Data,
basado en tecnologı́as y estándares de la Web. Dispone de su propio SPARQL
endpoint para facilitar el acceso desde aplicaciones remotas.
Biblioteca Nacional de Francia (BNF)4 : Se estima que cuenta con treinta millones
de volúmenes. La BNF ofrece sus recursos reuniendo en una sola página toda la
información de sus diversos catálogos, ası́ como su biblioteca digital Gallica. Para
ello se utilizan herramientas basadas en Web Semántica, como SPARQL, desde
las cuales se tiene acceso a sus datos abiertos.
BVMC5 : Es un proyecto de biblioteca digital a gran escala, alojado y mantenido

por la Universidad de Alicante. Comprende el repositorio de acceso abierto más
grande de textos y literatura históricos digitalizados en español del mundo
iberoamericano. Cuando se lanzó oficialmente en 1999, la BVMC fue el primer
archivo digital de textos en español en Internet, reproduciendo inicialmente unas
2.000 obras individuales de 400 de los autores más importantes de la literatura
española, latinoamericana e hispana. Desde su inicio, en 1999, esta biblioteca ha
optado por aplicar un marcado estructural basado en XML y el esquema de
codificación TEI para la creación de sus documentos. Actualmente su catálogo
está compuesto por 230.000 registros bibliográficos, de los cuales unos 60.000 son
libros, aunque también ofrece estudios crı́ticos y de investigación, materiales
históricos, periódicos y revistas, audiovisuales, vı́deos en lengua de signos
española, archivos sonoros, etc. Las entradas en el catálogo se han migrado
recientemente a una nueva relación de base de datos cuyo modelo de datos se
adhiere a los modelos conceptuales promovidos por la Federación Internacional de
Asociaciones e Instituciones de Bibliotecas (IFLA), en particular, según las
especificaciones FRBR y FRAD. El contenido de la base de datos ha sido
mapeado posteriormente a tripletas RDF que emplean básicamente el
vocabulario RDA (Descripción de recursos y acceso) para describir las entidades,
ası́ como sus propiedades y relaciones. A esta descripción semántica del catálogo
basada en RDF se puede acceder de manera online a través de una interfaz que
admite la navegación y la búsqueda de información. Debido a su naturaleza
abierta, estos datos públicos se pueden vincular y utilizar fácilmente para nuevas
aplicaciones creadas por desarrolladores e instituciones externas.
[Semanticwebjournal.net, 2016]
British National Bibliography (BNB)6 : La BNB registra la actividad editorial del

Reino Unido y la República de Irlanda. Tradicionalmente se incluı́an únicamente
trabajos impresos pero recientemente se ha extendido a publicaciones electrónicas
o digitales. El conjunto de datos incluye metadatos sobre libros ya publicados y
4
https://data.bnf.fr/
5
http://data.cervantesvirtual.com/blog/
6
https://bnb.data.bl.uk/
Marco Teórico 25
sobre libros en preparación, publicaciones de revistas o de periódicos, etc. Linked

Open BNB ofrece gran parte de la bibliografı́a nacional británica completa.
Incluye libros publicados (incluidas monografı́as publicadas a lo largo del
tiempo), publicaciones en serie y libros nuevos y futuros que representan
aproximadamente 4,4 millones de registros. Estos datos abiertos vinculados están
disponibles a través de los servicios SPARQL. Se proporcionan dos interfaces
diferentes para acceder a ellos: un editor SPARQL online y un servicio endpoint
con SPARQL para consultas remotas.
Los repositorios de datos abiertos publicados por las bibliotecas pueden ser una fuente
de conocimiento para poder proporcionar información a los usuarios y ofrecerles sus
servicios. Sin estas bases de conocimiento los asistentes no tendrı́an ninguna forma
rápida, sencilla y efectiva de obtener información actualizada sobre obras y autores por
lo que serı́an mucho más tediosos de desarrollar. Las bibliotecas todavı́a no explotan en
forma de chatbot sus repositorios semánticos. Sin embargo, algunos ejemplos como KB
Lab bot7 sı́ lo hacen. KB Lab bot accede a una selección de imágenes que están
disponibles 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, cerámicas, sellos, carteles y recortes de periódicos de más de un centenar de
museos, archivos y bibliotecas holandesas. Además, las imágenes mostradas desde KB
Lab Bot están libres de derechos de autor.
7
https://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 móvil.

El usuario le solicita una imagen y este se la muestra.
Remarcando la reutilización de las colecciones digitales, recientemente ha sido

publicado el libro Open a GLAM Lab [Mahey et al., 2019] que describe el concepto de
laboratorio en una institución de patrimonio cultural, los pasos para crearlo y un
conjunto de ejemplos y casos de uso.
8
https://www.kb.nl/blogs/digitale-geesteswetenschappen/the-making-of-the-kb-lab-bot
Marco Teórico 27
4.2.3. Wikidata
Wikidata es una base abierta de conocimiento libre que puede ser leı́da y editada por
tanto seres humanos como por boots. [Wikidata.org, 2019] Sus principales objetivos
son el almacenamiento central para los datos estructurados de sus proyectos hermanos
Wikimedia (Wikipedia, Wikivoyage. . . ), proporcionar un sistema colaborativo para
almacenar información estructurada, incluye interrelaciones con otros conjuntos de
datos abiertos y proporcionar una interfaz pública para realizar consultas ricas en
datos.
Un ejemplo de asistente virtual que utiliza información de Wikidata es Chatbol

[Segura et al., 2018]. Chatbol es un chatbot social relacionado con el fútbol. Tiene
como objetivo responder una amplia variedad de preguntas relacionadas con la liga
española de fútbol. Se comunica mediante texto con los usuarios. Uno de los
componentes principales de Chatbol, un bloque NLU, está capacitado para extraer los
intents y las entidades asociadas relacionadas con preguntas de los usuarios sobre
jugadores de fútbol, equipos, entrenadores y partidos. La información para las
entidades 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 del
chatbot. Como estrategia alternativa, se incorporó un motor de conversación basado en
la recuperación al sistema del chatbot. Este permite una mayor variedad y libertad de
respuestas, también orientadas al fútbol, para el caso en el que el módulo NLU no pudo
responder con gran confianza al usuario. La base de datos de respuesta basada en la
recuperación se compone de conversaciones reales recopiladas tanto de un canal de
fútbol IRC como de extractos relacionados con el fútbol seleccionados en subtı́tulos de
pelı́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 ellas

es utilizando ciertas plataformas como Xenioo9 para chatbots y Voiceflow10 para
voicebots. La parte negativa de estas plataformas es que la mayorı́a están orientadas a
usuarios no técnicos y eso suele conllevar que el bot viva en sus servidores. Por ello lo
más probable es que no interese que el funcionamiento de un chatbot dependa de una
empresa que podrı́a no durar mucho.
Para bots pequeños o que se basen principalmente en proveer contenido, utilizar una
plataforma es ideal, la lógica del bot es muy sencilla de estructurar, en muchas se
facilita un motor de entendimiento y se puede publicar en varios canales con solo
pulsar un botón.
9
https://www.xenioo.com/en/
10
https://www.voiceflow.com/
28 4.3. Tecnologı́as para implementar un asistente virtual
Sin embargo, es interesante utilizar un framework de desarrollo para casos más

complejos. Por ejemplo cuando usan una base de datos, servicios especı́ficos o se
implementan con otro software. Los frameworks que hoy en dı́a destacan más y son
más competitivos serı́an Microsoft Bot Framework11 , Dialogflow12 y Amazon Lex13 . El
primero es la solución más completa y es ideal para grandes empresas con
desarrolladores que buscan personalizaciones serias y capacidades robustas. También es
la más potente, con un arsenal de conectividad detrás. El segundo es el servicio de
procesamiento y entendimiento de lenguaje natural que pertenece a Google, con menos
herramientas que su competidor de Microsoft, pero a su favor Dialogflow tiene que es
más ligero y sencillo de utilizar y que ofrece las funcionalidades necesarias para
desarrollar un asistente virtual de calidad. Y el tercero es la solución de Amazon para
competir en el sector de los chatbots, a pesar de ser los lı́deres del mercado en
voicebots con Alexa, tener un servicio para plataformas de texto también es muy
importante para no quedarse atrás. [Planetachatbot.com, 2019]
Hay otras herramientas para el desarrollo de asistentes virtuales, especializados en

E-commerce, como por ejemplo Chatfuel, Bot para Facebook Messenger, Bots de
Telegram, ChatScript, Chattypeople, Pandorabots, Botsify y Rebot.me.
[Ecommerce-nation.es, 2018]
Por otro lado, Tensorflow es una librerı́a de código abierto desarrollada por Google
para aprendizaje automático. [Tensorflow.org, 2020] Esta librerı́a fue creada para poder
satisfacer las necesidades de aquellos sistemas que buscan ser capaces de detectar y
descifrar correlaciones y patrones análogos al aprendizaje y razonamiento utilizado por
los seres humanos. Por ello, utilizando Tensorflow, es posible construir y entrenar redes
neuronales. Actualmente es utilizado tanto en la investigación como en los productos
de Google frecuentemente reemplazando el rol de su predecesor de código cerrado,
DistBelief. TensorFlow fue originalmente desarrollado por el equipo de Google Brain
para uso interno en Google antes de ser publicado bajo la licencia de código abierto
Apache 2.0 en 2015.
Los lenguajes de programación más utilizados para el desarrollo de asistentes

virtuales son JAVA, Clojure, Python, C++, PHP, Ruby y Lisp.
[Chatbotslife.com, 2019]
4.3.1. Dialogflow
Dialogflow tiene soporte para varios idiomas y edición de código en lı́nea además de
un SDK en múltiples lenguajes de programación. [Dialogflow.com, 2020]
11
https://dev.botframework.com/
12
https://dialogflow.com/
13
https://aws.amazon.com/es/lex/
Marco Teórico 29
Ofrece dos APIs muy útiles:
Detect Intent API: para consultar la intención del usuario en un texto desde
cualquier medio externo.
Agent API: para cambiar dinámicamente el agente, pudiendo crear intenciones a

convenniencia sin tener que utilizar la interfaz web.
Además se puede alojar el bot en Google Cloud y ampliar su funcionalidad

aprovechando todas las herramientas de esta plataforma. Por ejemplo se puede utilizar
AutoML para cargar un dataset de conversaciones y hacer que el chatbot aprenda de
ellas.
Un punto importante a destacar aquı́ es Chatbase. Google ya es un experto en

análisis web y de usuarios gracias a su plataforma Google Analytics y con Chatbase
provee una funcionalidad y visibilidad similares pero para chatbots, proporcionando de
esta manera información sobre cuándo, cómo y quién está utilizando tu chatbot.
Despliegue en plataformas de mensajerı́a
Con la función de integraciones se puede desplegar el chatbot en un montón de

plataformas al igual que su competidor de Microsoft, pero lo que más cabe a destacar
de Dialogflow en este aspecto es que permite convertir el chatbot en un voicebot
integrándolo con Google Assistant. También se puede hacer que este sea compatible
con Alexa exportando el modelo del bot. Esta última función puede ahorrar mucho
trabajo, aunque no funciona a la perfección, a la hora de hacer un chatbot
multiplataforma. Sólo utilizando Dialogflow se puede hacer un chatbot que funcione en
las principales plataformas de mensajerı́a, en una de las principales plataformas de voz
y que además hace más fácil el desarrollo de un skill de Alexa.
Entendimiento de lenguaje natural
Esta es la parte principal de Dialogflow, su servicio de entendimiento de lenguaje

natural es muy fácil de usar, en gran parte por lo sencilla e intuitiva que es su interfaz,
crear una conversación es muy rápido y hay muchas opciones por defecto que se
pueden reutilizar. Un herramienta interesante que provee es el Knowledge Connector,
que permite al chatbot escanear documentos y artı́culos para dar respuestas
automatizadas, aunque esta opción sólo funciona en bots en inglés 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 del
backend como la del frontend en una aplicación web. Para seleccionar las tecnologı́as
más adecuadas para un proyecto se han de estudiar las diferentes caracterı́sticas que
ofrecen los frameworks y cuáles son los objetivos del proyecto que se va a desarrollar.
Cada framework se basa en un lenguaje de programación en especı́fico. Es muy
importante tener en cuenta este lenguaje y valorar si facilitará o complicará el
desarrollo del proyecto que se quiere llevar a cabo, pero también hay que ser consciente
de cuál es el grado de conocimiento que se tiene del mismo a la hora de elegir una
tecnologı́a. Por último se ha considerar el nivel de compatibilidad que tiene la
tecnologı́a elegida para desarrollar el backend con la elegida para el frontend.
A continuación se muestran las distintas tecnologı́as que pueden ser utilizadas para
el desarrollo del backend:
Laravel: Es un framework de código abierto que sirve para desarrollar

aplicaciones y servicios web con PHP 5 y PHP 7. Su filosofı́a es desarrollar, de
forma elegante y simple, código PHP. Tiene una gran influencia de frameworks
como Sinatra, Ruby on Rails y ASP.NET MVC. Fue creado en 2011. Está hecho
para arquitectura Modelo Vista Controlador (MVC). Resuelve necesidades
actuales como autenticación de usuarios y manejo de eventos. Además, este
framework cuenta con un soporte robusto para manejo de bases de datos y con
un código 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 para

ayudarnos a crear aplicaciones web en menos tiempo del habitual ya que nos
proporciona funcionalidades como el enrutamiento, opciones para gestionar
sesiones y cookies y muchas más. Express.js está basado en Connect. Connect es
un framework basado en http para Node.js. Podemos decir que Connect, aparte
de sumarle nuevas funcionalidades, tiene todas las opciones del módulo http que
viene por defecto con Node. También, Express hace lo mismo con Connect. Por
ello tenemos un framwork ligero, rápido y muy útil. [Enekodelatorre.com, 2016]
Node.js es un entorno en tiempo de ejecución multiplataforma para la capa del
servidor sobre todo, de código abierto,pero no limitándose a ello. Fue creado con
el enfoque de ser útil en la creación de programas de red altamente escalables,
como por ejemplo, servidores web. Está basado en el lenguaje de programación
ECMAScript, ası́ncrono, con I/O de datos en una arquitectura orientada a
eventos y basado en el motor V8 de Google.
Django: Django es un framework de aplicaciones web gratuito y de código abierto

escrito en Python. Respeta el patrón de diseño conocido como
14
https://expressjs.com/es/
Marco Teórico 31
Modelo–vista–template. Facilitar la creación de sitios web complejos es la meta

fundamental de Django. Django pone énfasis en la conectividad, la reutilización y
la extensibilidad de componentes. Promueve, además, el desarrollo rápido y el
evitar la repetición de código. 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 programación Ruby de

aplicaciones web de código abierto. Este sigue la arquitectura MVC. Trata de
combinar la simplicidad con la posibilidad de desarrollar aplicaciones del mundo
real con un mı́nimo de configuración y escribiendo menos código que con otros
frameworks. Rails hace uso de la metaprogramación que permite el lenguaje de
programación Ruby. Esto resulta en una sintaxis muy legible para muchos de sus
usuarios. Rails se distribuye a través de RubyGems. Este último es el formato
oficial de paquete y canal de distribución de bibliotecas y aplicaciones Ruby.
[Rubyonrails.org, 2020]
MySQL15 : Es un sistema de gestión de bases de datos relacional y es considerada

como la base de datos más popular de código abierto. También es una de las más
populares en general junto a Oracle y Microsoft SQL Server, sobre todo para
entornos de desarrollo web.
MongoDB16 : Es un sistema de base de datos NoSQL. Está orientado a

documentos de código abierto. MongoDB guarda estructuras de datos BSON
(que es una especificación muy similar a JSON) con un esquema dinámico en vez
de, como se hace en las bases de datos relacionales, guardar los datos en tablas.
Esto hace que la integración de los datos en ciertas aplicaciones sea más fácil y
rápida. Es una base de datos con múltiples funcionalidades y adecuada para su
uso en producción. 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 visualización y el formato de datos métricos. Además se pueden
crear cuadros de mando y gráficos a partir de múltiples fuentes, incluidas bases
de 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 se
detallan las siguientes:
Angular: Es un framework para aplicaciones web desarrollado en TypeScript.

Este es mantenido por Google y además es de código abierto. Se utiliza para
mantener y crear aplicaciones web de una sola página. Su objetivo, en un esfuerzo
para hacer que el desarrollo web y las pruebas sean más fáciles, es aumentar las
15
https://www.mysql.com/
16
https://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 las
etiquetas personalizadas adicionales. Tras esto obedece a las directivas de los
atributos personalizados y se encarga de unir las piezas de entrada o salida de la
página a un modelo representado por las variables estándar de JavaScript.
Angular utiliza las propiedades de sus clases tipo Componentes para hacer el
binding de los datos. En dichas clases tenemos propiedades (variables) y métodos
(funciones a llamar). Angular, a pesar de ser incompatible con su predecesor, es
la evolución de AngularJS. [Angular.io, 2020]
React: Es una biblioteca Javascript de código abierto. Fue diseñada para poder
crear interfaces de usuario. Su principal objetivo es el de facilitar el desarrollo de
aplicaciones en una sola página. React trata de ayudar a los desarrolladores a
construir aplicaciones que usan datos que van cambiando todo el tiempo. Su
objetivo es ser fácil de combinar, sencillo y declarativo. React sólo maneja la
interfaz de usuario en una aplicación ya que serı́a la Vista en un contexto en el
que se use el patrón MVC o Modelo-vista-modelo de vista (MVVM). También
puede ser utilizado con las extensiones de React-based que se encargan de las
partes no-UI (que no forman parte de la interfaz de usuario) de una aplicación
web. [Es.reactjs.org, 2020]
Vue.js: Es un framework escrito en JavaScript de código abierto que se basa en el

patrón MVVM. Sirve para construir interfaces de usuario y aplicaciones de una
sola página. Es muy simple de utilizar e integrar con otros proyectos. Está
diseñado desde el inicio para ser adoptado incrementalmente. [Vuejs.org, 2020]
Three.js: Es una biblioteca escrita en JavaScript para crear y mostrar gráficos

animados por ordenador en 3D en un navegador Web. Además puede ser
utilizada en conjunción con el elemento canvas de HTML5, SVG o WebGL. El
código fuente se encuentra alojado en un repositorio en GitHub. Actualmente es
considerada como una de las bibliotecas más importantes para la creación de
animaciones en WebGL. Este tipo de bibliotecas de alto nivel como SceneJS,
Three.js o GlgE, PhiloGL u otras, permiten al autor, crear complejas
animaciones en 3D, listas para ser mostradas en el navegador. Esto permite
hacerlo sin el esfuerzo que se requerirı́a, para el caso de una aplicación
independiente 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 añadir

diversas funcionalidades que los usuarios puedan utilizar en su dı́a a dı́a, a parte de las
que ya ofrecen los servicios de la BVMC, Wikidata y Dialogflow comentados
previamente en este mismo capı́tulo.
Marco Teórico 33
Se valoraron los siguientes servicios de terceros a la hora de añadir nuevas

funcionalidades al asistente:
AEMET OpenData: Es un API REST (Application Programming Interface.

REpresentational State Transfer) desde el cual se pueden descargar los datos
explicitados en el Anexo II de la resolución de 30 de diciembre de 2015 de
AEMET (Agencia Estatal de Meteorologı́a) gratuitamente, por la que se
establecen los precios públicos que han de regir la prestación de servicios
meteorológicos y climatológicos. [Aemet.es, 2020]
Horoscopo-cli17 : API REST que permite visualizar el horóscopo del dı́a para un
signo especı́fico en los siguientes aspectos: amor, dinero y salud.
Cloud Translation: La API de Cloud Translation pertenece a Google y puede

traducir dinámicamente texto entre miles de pares de idiomas. También permite
la integración de manera programática de sitios web y programas con el servicio
de traducción. Cloud Translation forma parte de la familia más amplia de la API
de Cloud Machine Learning. [Cloud.google.com, 2020]
Yandex: La API en cuestión proporciona acceso al servicio de traducción

automática en lı́nea de Yandex. Admite más de 90 idiomas y puede traducir
palabras separadas o textos completos. La API permite incrustar el servicio en
una aplicación móvil o servicio web para usuarios finales. También permite
traducir grandes cantidades de texto, como documentación técnica.
[Tech.yandex.com, 2020]
Twitter API: Twitter permite acceder a partes de sus servicios mediante su API
para permitir a las personas crear software que se integre con Twitter. Los datos
de Twitter son únicos y se extraen a partir de datos de la mayorı́a de las otras
plataformas sociales porque reflejan información que los usuarios deciden
compartir de forma pública. Su API ofrece acceso amplio a los datos de Twitter
que los usuarios han decidido compartir con el mundo. Twitter también es
compatible con APIs que permiten a los usuarios administrar su propia
información de Twitter que no es pública (como los Mensajes directos) y
ofrecerla 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 a

la API de Google News y a las APIs sociales. [Trawlingweb.com, 2020]
Bing Web Search API: API desarrollada por Microsoft. Permite incorporar el
servicio de búsqueda inteligente a las aplicaciones. También permite combinar
millones de páginas web, imágenes, vı́deos y noticias en los resultados de las
búsquedas. [Azure.microsoft.com, 2020]
17
https://github.com/joacorandom/horoscopo-cli
34 4.5. UX y diseño
FAROO API18 : FAROO es un motor de búsqueda web. La funcionalidad de

búsqueda de FAROO se basa en la búsqueda de igual a igual (P2P), las opiniones
y la atención generadas por los usuarios, y la popularidad de la página web
basada en los usuarios. La API de FAROO permite a los desarrolladores acceder
e integrar la funcionalidad de búsqueda de FAROO con otras aplicaciones. El
método API disponible muestra resultados de búsqueda, resultados de noticias y
temas de tendencias. [Programmableweb.com, 2012]
4.5. UX y diseño
La experiencia de usuario (UX) es una de las partes más importantes a tener en

cuenta cuando se desarrolla cualquier herramienta virtual o programa para asegurar el
uso del mismo por multitud de usuarios. El usuario busca entender con apenas un
mı́nimo de esfuerzo qué puede hacer con la aplicación o sistema virtual que tiene
delante y cómo ha de hacerlo. Por ello en toda plataforma o aplicación web hay que
realizar un diseño intuitivo y práctico que además resulte atractivo para el usuario. Es
crucial una buena experiencia de usuario en los asistentes virtuales para que las
interacciones con la tecnologı́a de IA sean lo más sencillas posible.
La libreria Three.js permite mostrar un elemento circular 3D en movimiento

mientras el asistente se encuentra cerrado o minimizado y ası́ de esta forma llamar la
atención del usuario para que haga click en él y comience a utilizar sus servicios.
Además, al abrirlo el asistente se muestra con la interfaz de un chat que permite que el
usuario sepa dónde ha de escribir y cómo ha de enviar sus mensajes. También se ve
claramente qué mensajes pertenecen al usuario y cuáles al asistente puesto que se
alinean a la derecha o a la izquierda en la ventana del chat respectivamente.
18
https://rapidapi.com/faroo/api/faroo-web-search/
5. Metodologı́a
Para el desarrollo de este proyecto se ha utilizado la metodologı́a Scrum. Esta

metodologı́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 pequeños
proyectos divididos en distintas etapas: análisis, desarrollo y testing. En la etapa de
desarrollo se encuentran lo que se conoce como iteraciones del proceso o Sprint, es
decir, entregas regulares y parciales del producto final.
Esta metodologı́a permite abordar proyectos complejos que exigen una flexibilidad y
una rapidez esencial a la hora de ejecutar los resultados. La estrategia irá orientada a
gestionar y normalizar los errores que se puedan producir en desarrollos demasiado
largos a través de reuniones frecuentes para asegurar el cumplimiento de los objetivos
establecidos. [Iebschool.com, 2019]
Estas reuniones presenciales se han llevado a cabo con los tutores asignados al
proyecto con una frecuencia mensual. También se ha tenido comunicación con ellos
mediante correo electrónico semanalmente.
Es cierto que no se trata de un proyecto en el que haya implicado un equipo ya que

es individual pero se puede considerar que se ha utilizado Scrum debido a la
posibilidad de comunicarse con los tutores para ir ajustando detalles del proyecto
conforme a su desarrollo.
El proyecto se ha planificado mediante el uso de Hitos y Sprints. Cada Hito tiene

aproximadamente una duración mensual estimada. A su vez cada Hito esta compuesto
por sprints semanales por lo que cada Hito está formado más o menos por 4 sprints. A
estos sprints se les denomina iteraciones. Además, todas las tareas y el tiempo que se
ha 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 de

comenzar con la memoria y de preparar el proyecto Laravel sobre el que construir
el resto de funcionalidades. Respecto al primer objetivo se tuvo que aprender a
utilizar LaTeX debido a que la plantilla proporcianada para la realización de la
memoria estaba en este formato. La escritura y edición de la memoria se ha
realizado a través de la plataforma online Overleaf. Durante la primera iteración
o semana se realizó la portada, los preámbulos, agradecimientos y citas célebres,
la introducción y se comenzó el apartado Modelo de negocio. Durante la segunda
35
36
iteración se terminó el apartado Modelo de negocio (Lean Canvas, análisis DAFO

y análisis de riesgos) y se instaló todo lo necesario para poder crear y desarrollar
el proyecto Laravel. Además se marcaron los objetivos del proyecto tanto
generales como especı́ficos y estos se añadieron a la memoria. La tercera y última
iteración de este Hito consistió en crear y establecer la estructura inicial de la
API RESTful en el proyecto Laravel. Se realizaron pruebas para comprobar que
se inyectaban datos en la base de datos local creada para el proyecto con éxito y
también si se podı́an obtener los mismos. Para esto se creó un modelo y un
controlador de prueba y se prepararon una llamada GET y una llamada POST
para el mismo. Además también se creó un repositorio1 en GitHub en el cual se
fue guardando y actualizando el proyecto constantemente mediante el uso de
GitKraken.

avanzar en la memoria, desarrollar los intents básicos en Dialogflow, integrar
Angular en el proyecto Laravel para comenzar el desarrollo de la parte del cliente,
realizar una versión inicial de la interfaz del asistente en el proyecto Angular y
conectarlo con Dialogflow y consumir datos de la BVMC, de Wikidata, entre
otros servicios. En la primera iteración se creó el asistente en Dialogflow y se
implementaron los intents básicos para el mismo (SmallTalk...). De esta manera
el asistente ya era capaz de responder a las preguntas y expresiones tı́picas que le
podrı́a escribir un usuario (¿Cómo te llamas?, Te quiero, Me caes genial...).
Además se integró información sobre la BVMC por si el usuario le preguntaba y
ası́ que el asistente fuese capaz de responderle correctamente. También se realizó
el apartado Marco Teórico de la memoria. En la segunda iteración se integró
Angular en el proyecto, se realizó una primera versión de la interfaz del asistente,
se conectó Angular con la API de Dialogflow para que desde la interfaz del
proyecto se enviasen mensajes a Dialogflow y este devolviese la respuesta del
asistente mostrándose en la interfaz también y se implementó en Angular la
manera de coger datos de Wikidata mediante consultas en SPARQL. En los
últimos dı́as de la iteración se practicó la realización de consultas con SPARQL a
Wikidata y se comenzaron a realizar intents en Dialogflow que pedı́an datos a
Wikidata para elaborar las respuestas del asistente. En la tercera iteración se
continuó la implementación de intents en Dialogflow que consumı́an datos de
Wikidata, más concretamente consumı́an datos sobre el autor Miguel de
Cervantes Saavedra. También se aprendió a consumir datos de la API de
AEMET (Agencia Estatal de Meteorologı́a) para poder ofrecer el tiempo actual a
través del asistente y se prepararon intents para ello. En la cuarta iteración se
implementó en Angular la manera de obtener datos de la BVMC también
mediante SPARQL. Además se realizaron intents en dialogflow que utilizaban
datos obtenidos de la BVMC para elaborar sus respuestas. En la última iteración
de este Hito se realizaron los apartados Metodologı́a y Análisis y especificación de
1
https://github.com/PabloGuijarroMarco/APIRestful
Metodologı́a 37
la memoria. También se comenzó con los apartados Diseño e Implementación.
Para el Hito 2 (04/11/2019-01/12/2019) se debı́a cumplir el objetivo de concluir

con el desarrollo del proyecto, más concretamente, acabar el diseño de la interfaz,
terminar con la implementación de la base de datos y de los cuadros de mando e
implementar las funcionalidades del asistente restantes tanto relacionadas con lo
que ofrece la BVMC (por ejemplo, buscar autores, obras y obras por autor) como
de algunas más que consumı́an otros servicios de terceros (traducir a multitud de
idiomas el texto que desee el usuario, consultar el horóscopo del dı́a, realizar
búsquedas de páginas web, consultar noticias de actualidad y poder acceder a
contenido de las redes sociales de Twitter y YouTube de la BVMC). En la
primera iteración se integró la funcionalidad de consultar el horóscopo del dı́a y
la de traducir. En la segunda iteración se implementaron las funcionalidades de
buscar autores, de buscar obras, de realizar búsquedas de páginas web, de buscar
noticias de actualidad y de ofrecer vı́deos y los últimos tweets de las cuentas
oficiales de YouTube y Twitter de la BVMC. También se añadieron intents
informativos sobre la BVMC como por ejemplo para mostrar sus redes sociales.
En la tercera iteración se solucionaron algunos fallos de comportamiento y de
diseño que tenı́a el asistente y además se implementó la funcionalidad de buscar
obras de un autor en concreto. También se mejoró el flujo conversacional que
tenı́a el asistente. En la cuarta iteración se cambiaron los colores de la interfaz del
asistente por los colores corporativos de la BVMC, se integró la librerı́a Three.js
al proyecto Angular, se diseñó con el programa Blender el modelo 3D a mostrar
cuando el asistente está cerrado, se integró este en la interfaz, se terminaron de
implementar los modelos, las rutas y los controladores en el proyecto Laravel, se
creó la base de datos final, se preparó al asistente para que se registrasen las
acciones que los usuarios hacı́an al utilizarlo y se añadió Grafana mostrando los
cuadros de mando debido a su conexión con la base de datos del proyecto.

realizar las pruebas del proyecto (Unit Testing que se puede ver en la sección 9.1
y Test Cases que se pueden ver en la sección 9.2), corregir los fallos del proyecto
encontrados en las pruebas y terminar la memoria, preparar la defensa del
proyecto y realizar el póster para la misma. En la primera iteración se realizaron
las pruebas unitarias en el proyecto Laravel (Unit Testing) y se comenzaron a
actualizar y corregir las secciones ya realizadas de la memoria en hitos anteriores.
En la segunda iteración se terminaron de actualizar y de corregir estas secciones
y se terminaron las secciones incompletas de la memoria. Además, se realizó la
evaluación de usuarios del proyecto (Test Cases). En la tercera iteración se
corrigieron los fallos detectados en los testeos del proyecto, se realizó el póster
para la defensa del proyecto y se volvió a repasar la memoria corrigiendo los
últimos detalles. En la cuarta y última iteración se preparó la entrega del
proyecto y la defensa del mismo.
38
Figura 5.1.: Visualización del repositorio del proyecto desde GitKraken
Para la gestión del proyecto se utilizó un control de versiones que permite registrar
los cambios realizados sobre el proyecto a lo largo del tiempo de tal manera que es
posible recuperar versiones especı́ficas más adelante. Dicho control de versiones se usa
para acceder al registro de modificaciones sobre un fichero. Esto permite ver los
comentarios asociados a cada modificación y la persona que la ha realizado. Además
existe la posibilidad de regresar al estado anterior de un fichero o conjunto de ficheros
y se pueden crear ramas para gestionar cambios que finalmente se mezclarán con la
rama principal. La herramienta que se utiliza es GitKraken, una interfaz gráfica
multiplataforma para git desarrollada con Electron. De forma muy sencilla se puede
llevar 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 con
GitHub para evitar el uso de la consola ya que de forma visual y por medio de clicks se
realizan de una manera mucho más sencilla. Finalmente la visualizacion de las ramas y
el historial de commits se mejora con esta herramienta que por consola resulta complejo
de entender. [Platzi.com, 2017] La Figura 5.1. muestra los últimos commits realizados
en el proyecto en el momento en el que se realizó la captura. Además se aprecia que el
repositorio estaba totalmente actualizado a lo que habı́a en local en ese momento.
6. Análisis y especificación
En este capı́tulo se describen todos aquellos factores que afectan al producto y a sus
requisitos sin describir los requerimientos. Además, este capı́tulo también incluye la
descripción de los requisitos especı́ficos.
6.1. Perspectiva de producto
El sistema es un producto diseñado para trabajar en un entorno online, por lo que su

utilización es de forma descentralizada y no dependiente de otros sistemas. El sistema
permite al usuario tanto resolver dudas acerca del sitio web de la BVMC como
interactuar 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 sus
funcionalidades gracias a los cuadros de mando. Esto permite poder sacar conclusiones
para futuras mejoras del asistente. Para ofrecer las distintas funcionalidades, el sistema
se nutrirá tanto de APIs e información de terceros como de la misma biblioteca.
6.2. Funciones del producto
El asistente virtual dispone de distintas funcionalidades que son accesibles para todo
aquel que visite el sitio web de la BVMC:
Mantener una conversación.
Resolver dudas acerca de la BVMC.
Pedir la previsión del tiempo del dı́a de hoy o del dı́a siguiente para España.
Solicitar información sobre la vida de Miguel de Cervantes (lugar de nacimiento,

sus obras, imágenes. . . ).
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 gráfica que combina elementos 2D con elementos 3D.
Solicitar la previsión diaria del horóscopo.
Traducir un texto a otro idioma.
Buscar autores, obras o las obras de un autor en concreto.
Mostrar los últimos 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 páginas web con el motor de búsqueda integrado en el asistente.
Además, los administradores del sistema tendrán acceso a cuadros de mandos que les
permitirán monitorizar el uso del asistente virtual y de sus distintas funcionalidades.
De esta manera, se podrán identificar las funcionalidades más utilizadas y la frecuencia
para realizar mejoras.
6.3. Restricciones
El sistema necesita de una base de datos (BD) para registrar la actividad de los
usuarios a través del asistente y ası́ poder generar los cuadros de mando.
Los lenguajes de programación empleados serán: HTML5, CSS3, PHP y JS a

partir de frameworks.
Uso de APIs externas y obtención de datos mediante SPARQL.

Análisis y especificación 41
6.4. Requisitos especı́ficos
6.4.1. Requerimientos funcionales
Requisito RF-1
Nombre Mantener una conversación
Descripción 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 conversación
Requisito RF-2
Nombre Resolver dudas
Descripción 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 predicción del tiempo
Descripción Solicitar la predicción del tiempo del dı́a o del dı́a siguiente.
Prioridad Media
Tabla 6.3.: Requerimiento funcional conocer predicción del tiempo

42 6.4. Requisitos especı́ficos
Requisito RF-4
Nombre Informar sobre Miguel de Cervantes
Descripción Solicitar información 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
Descripción 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
Descripción 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 predicción horóscopo
Descripción Solicitar la predicción diaria del horóscopo.
Prioridad Media
Tabla 6.7.: Requerimiento funcional solicitar predicción horóscopo

Requisito RF-8
Nombre Realizar traducciones
Descripción Posibilidad de traducir un texto a otro idioma.
Prioridad Media
Tabla 6.8.: Requerimiento funcional realizar traducciones
Requisito RF-9
Nombre Realizar búsquedas de contenido de la BVMC
Descripción Posibilidad de buscar autores, obras y las obras de un autor registradas en la BVMC.
Prioridad Muy Alta
Tabla 6.9.: Requerimiento funcional búsquedas de contenido de la BVMC
Requisito RF-10
Nombre Mostrar últimos tweets de la BVMC
Descripción Mostrar los últimos tweets publicados en la cuenta de Twitter de la BVMC.
Prioridad Alta
Tabla 6.10.: Requerimiento funcional mostrar últimos tweets de la BVMC
Requisito RF-11
Nombre Mostrar vı́deos del canal de YouTube de la BVMC
Descripción 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
Descripción Solicitar noticias actuales publicadas en Internet.
Prioridad Media
Tabla 6.12.: Requerimiento funcional solicitar noticias de actualidad
Requisito RF-13
Nombre Realizar búsquedas de páginas web
Descripción Solicitar resultados web utilizando el motor de búsqueda integrado en el asistente.
Prioridad Media
Tabla 6.13.: Requerimiento funcional realizar búsquedas de páginas web
Requisito RF-14
Nombre Registrar acción
Descripción Registrar en la base de datos las acciones que realiza el usuario.
Prioridad Alta
Tabla 6.14.: Requerimiento funcional registrar acción
Requisito RF-15
Nombre Generar cuadros de mando
Descripción 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
Descripción 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
Descripción 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
Descripción 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
Descripción Interfaz preparada para ser visualizada en escritorio y dispositivos móviles.
Prioridad Muy alta
Tabla 6.19.: Requerimiento no funcional multiplataforma
Requisito RNF-5
Nombre Ofrecer interfaz atractiva
Descripción 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 en

el cual se presenta a los usuarios finales del sistema y que, además, trata de recoger
todas las maneras en las que los usuarios interactuarán con la aplicación.
Este tipo de diagrama forma parte de los diagramas de comportamiento. Estos

muestran de forma visual y sencilla cómo funciona el sistema para que todas las
personas involucradas en el proyecto lo entiendan. [Openclassrooms.com, 2018]
En la Figura 6.1 se puede observar la interacción que el sistema le permite al usuario

y cómo los administradores de la BVMC pueden consultar gracias a los cuadros de
mando cuándo y para qué se ha utilizado el asistente.
Figura 6.1.: Diagrama de casos de uso

7. Diseño
En este capı́tulo se describe la arquitectura propuesta para el desarrollo de este

trabajo.
7.1. Arquitectura seleccionada
Para alcanzar los objetivos planteados en el capı́tulo 3, se ha implementado una

arquitectura orientada a servicios en un modelo multicapa que se describe con detalle
en la Figura 7.1. Se pueden observar en ella las capas que componen la arquitectura
planteada. Se ha conseguido una arquitectura escalable, flexible y débilmente acoplada
que facilita la interacción con diferentes sistemas.
Para la integración de la arquitectura se ha optado, tras un proceso de análisis

previo, por un sistema REST. Existen multitud de ventajas en este tipo de sistemas
como la separación entre el cliente y el servidor, la visibilidad, fiabilidad y escalabilidad
y, además, la API REST siempre es independiente del tipo de plataformas o lenguajes.
[Bbvaopen4u.com, 2016]
La capa de presentación es la interfaz de usuario encargada de la visualización de los

datos. La siguiente es la capa de servicios que pone a disposición de los usuarios las
funcionalidades ofrecidas en forma de servicios web. La capa intermedia o de negocio
gestiona la lógica de la aplicación estableciendo las reglas y las transformaciones de la
información que fluye a través del sistema. Con ella se comunica tanto la capa de
servicios como el cliente.
La capa de acceso a datos es la encargada de la comunicación con la capa de datos

formada 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 las
capas, lo que facilita la mantenibilidad y reutilización de componentes software.
Además, el protocolo REST facilita que los desarrollos de las diferentes partes de un
proyecto se puedan dar de manera independiente.
49
50 7.1. Arquitectura seleccionada
Figura 7.1.: Arquitectura REST orientada a servicios

Diseño 51
7.2. Tecnologı́as
En la Figura 7.2 se observan las distintas tecnologı́as utilizadas en el desarrollo del

trabajo y su relación 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 continuación, se detallan las tecnologı́as pertenecientes a cada uno de ellos. En

primer 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 para
poder almacenar en una base de datos MySQL todas las acciones que realizan los
usuarios para su posterior monitorización mediante cuadros de mando.
MySQL: Se ha creado una base de datos de este tipo para obtener un registro de
las acciones realizadas por los usuarios a través del asistente virtual. Este registro
se utiliza para generar cuadros de mando para que los administradores analicen y
estudien el uso que se le da al asistente.
Grafana: Este software se utiliza para generar los cuadros de mando basándose en
los datos recogidos en la base de datos comentada anteriormente.
Express.js+Node.js: Se han utilizado para la creación de un pequeño servidor

desde el cual enviar a Twitter las API Keys ofrecidas por ellos y ası́, manteniendo
una sesión iniciada, poder solicitarle autorización para comenzar a realizar
llamadas a su API.
Con respecto a las tecnologı́as que se han utilizado en la parte del frontend se
detallan las siguientes:
Angular: En este proyecto se ha utilizado Angular para dotar al asistente virtual

de una interfaz además de para consumir datos y servicios de terceros. A través
de TypeScript altera el contenido de ciertos mensajes de los que envı́a el asistente
al usuario para incluir en ellos los datos que ha recibido Angular de servicios de
terceros y ası́ poder dar una respuesta más realista y actualizada al usuario.
También se utiliza para realizar las llamadas pertinentes a la API RESTful creada
con Laravel, mencionada anterioremente, para ası́ ir almacenando en la base de
datos 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 del

asistente dotándole de ciertos elementos en 3D.
Por último, los servicios de terceros utilizados:
Dialogflow: Se encarga de recibir el mensaje del usuario y de devolverle una

respuesta acorde al mensaje recibido.
BVMC: Se ha utilizado en este proyecto para dotar al asistente de la posibilidad

de otorgarle al usuario el contenido que ofrece la biblioteca con tan solo pedı́rselo
Diseño 53
mediante lenguaje natural. Se utiliza su punto de acceso SPARQL1 para poder

realizar las consultas a su repositorio de datos abiertos y ası́ construir varias de
las respuestas del asistente.
Wikidata: Se ha utilizado en este proyecto para obtener datos actualizados acerca

de Miguel de Cervantes y permitirle ası́ al asistente responder a preguntas acerca
del 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 la

opción de informar al usuario acerca de la predicción del tiempo en españa del
dı́a actual o del dı́a siguiente.
Horoscopo-cli: Se ha utilizado para poder ofrecer el horóscopo diario a través del

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

traducir.
Twitter API: Se ha utilizado para que el asistente sea capaz de mostrar los
últimos Tweets publicados por la BVMC en su cuenta de Twitter.
Trawlingweb.com: Se ha utilizado para que el asistente pueda mostrarte noticias

de actualidad y vı́deos subidos por la BVMC en su canal oficial de YouTube.
FAROO API: Se ha utilizado para que se puedan realizar búsquedas de páginas

web a través del asistente, lo único negativo es que las búsquedas han de ser en
exclusiva en inglés. Los resultados devueltos por tanto también son páginas en
este idioma.
1
data.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), en

ingenierı́a de software, es un tipo de diagrama de estructura estática que describe la
estructura de un sistema. Además muestra las clases del sistema, sus atributos,
operaciones (o métodos), y las relaciones entre los objetos. [Wikipedia.org, 2019a]
En la figura 7.3 se puede observar la estructura del proyecto. La clase interfaz está
conectada con el resto de clases en las que se almacenan las acciones realizadas por el
usuario desde el asistente.
Figura 7.3.: Diagrama de clases del proyecto

Diseño 55
7.4. Mockups
Los siguientes mockups se han realizado con la ayuda de la herramienta online

Botsociety. Se ha creado una demo para la versión móvil2 y otra para la versión de
escritorio3 .
Figura 7.4.: Mockup versión móvil 1
2
https://app.botsociety.io/s/5dbacacaf7e56854c74ab005?p=9964926023bd4fdeec1dc6861197c48b6461f92fdesktop=false
3
https://app.botsociety.io/s/5dbacacaf7e56854c74ab005?p=9964926023bd4fdeec1dc6861197c48b6461f92fdesktop=true
56 7.4. Mockups

Diseño 57

58 7.4. Mockups
Figura 7.7.: Mockup versión escritorio 1

Diseño 59

60 7.4. Mockups

Diseño 61
Botsociety es una plataforma que permite hacer mockups de chatbots y asistentes

virtuales para simular la conversación que podrı́a tener el bot con un futuro cliente.
Por ello se ha utilizado esta herramienta online para crear los mockups y ası́ utilizarlos
como guı́a para realizar el diseño final del asistente. [Planetachatbot.com, 2017]
8. Implementación
Para mejor comprensión de esta sección se ha preferido describir la implementación

dividiéndola en dos partes Backend y Frontend. Ambas partes se han implementado de
forma simultánea, segun la planificación descrita en el capı́tulo 5. En el texto se alterna
de una parte a otra priorizando según las necesidades.
8.1. Backend Parte 1
En primer lugar, se instaló el software necesario para poder desarrollar esta parte del
proyecto y las herramientas necesarias para más adelante desarrollar el frontend (PHP
con XAMPP, Composer, Visual Studio Code, Node, NPM y Postman). Después se
obtuvo la estructura completa de Laravel y se instalaron todas sus dependencias por
medio de composer obteniendo como resultado la estructura básica de la API RESTful.
Se copió el proyecto dentro de la carpeta xampp/htdocs/ de XAMPP, programa que
me permite utilizar Apache y MySQL para el proyecto en local.
Tras esto, se actualizó el archivo .env del proyecto Laravel agregando el dominio de
desarrollo del sistema y configurando las variables de entorno para ası́ permitir al
proyecto 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 conexión se diese también se modificó un archivo del sistema de
Windows y otro de XAMPP agregándoles también el dominio de desarrollo del
sistema. También se modificó la configuración de las rutas para el proyecto Laravel y
ası́ poder distinguir las rutas para hacer peticiones a la API de las rutas de la web. De
esta manera se dejó configurada la estructura del proyecto.
A continuación, se comenzó a diseñar el modelo de datos y end-points en un

borrador pero, debido a que el proyecto apenas habı́a comenzado a desarrollarse y no
se sabı́an qué funcionalidades se le podrı́an acabar implementando al asistente en su
totalidad. De todas formas se comprobó que la API estaba bien conectada a la base de
datos local de XAMPP y si era capaz de realizar correctamente tanto peticiones GET
como peticiones POST.
Para ello se comenzó a crear la estructura inicial de la API RESTful, es decir, tanto
la estructura inicial de los modelos y sus migraciones como la de los controladores y las
rutas de recurso para cada controlador. Se decidió crear tan solo un modelo y un
controlador para comprobar que funcionaba la API, el resto se dejaron para más
adelante. Además se prepararon sus rutas correspondientes para realizar las peticiones.
En este momento se instaló GitKraken para conectarlo con un nuevo repositorio en
GitHub para este proyecto y ası́ poder mantener un control de las versiones del mismo
durante su desarrollo. Se añadieron entonces los atributos al modelo de ejemplo que se
habı́a creado y se preparó la migración del mismo para poder crear su tabla
correspondiente en la base de datos. También se implementó una semilla para probar a
insertar datos a la tabla una vez creada. Estos datos a insertar mediante la semilla se
generan automáticamente gracias a la librerı́a faker de Laravel. Se cambió la zona
horaria 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 esto
se comprobó que funcionaba correctamente la migración a la base de datos y se
implementaron los métodos Index y Store del controlador de ejemplo. Estos son los
métodos que se ejecutan al realizar las peticiones GET y POST respectivamente.
Se comprobó utilizando Postman que las rutas para realizar las peticiones GET y
POST del controlador de ejemplo funcionaban correctamente. Al realizar la petición
GET se obtenı́an todos los datos de la tabla creada en la base de datos local y al
realizar la petición POST se insertaba una nueva fila de datos en la tabla con éxito. En
este 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 asistente
virtual se le añadieron un conjunto de intents conocidos en Dialogflow como Small Talk
que conforman las preguntas básicas que se le podrı́an realizar al asistente. Varios
ejemplos serı́an preguntas como ¿Cómo te llamas?, ¿Quién es tu jefe? o ¿Tienes novio?.
Implementación 65
Este tipo de preguntas suelen ser habituales en la interacción con un asistente virtual.
Small Talk es un agente compilado previamente, denominado en Dialogflow como

prebuilt agent, que se usa para proporcionar respuestas a conversaciones informales.
Esta caracterı́stica puede mejorar en gran medida la experiencia del usuario, ya que
cubre 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 de
este proyecto aunque sólo disponı́an de las preguntas que le podrı́a hacer un usuario y
no de las respuestas que el asistente les debı́a devolver. Por ello se revisó cada intent
añadiéndole una o diversas respuestas a las que se les dieron forma de tal manera que
se notara que era un asistente para la BVMC y no para otra web o plataforma. En
total el asistente dispone de un total de 83 intents (83 preguntas con su respuesta o
respuestas preprogramadas) de Small Talk para conversaciones informales. En el Anexo
IV (D) se pueden observar estos intents.
También se añadieron intents informativos sobre la biblioteca y sobre el nombre del

asistente para dar respuesta a los usuarios.
Tras configurar el asistente se comenzó a integrar Angular dentro del proyecto

Laravel. 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 encuentra
dentro de la ruta resources/frontend dentro de la carpeta raı́z del proyecto Laravel. A
continuación, se instalaron los módulos necesarios para poder consumir de la API de
Dialogflow y ası́ conectar el proyecto con el agente que se habı́a creado previamente. El
objetivo era el poder enviar desde el proyecto Angular mensajes a Dialogflow y que este
enviase la respuesta del asistente a Angular. Para ello se siguieron una serie de pasos:
1. En primer lugar se realizó la instalación de librerı́as necesarias para la integración

del chatbot y la creación del componente chat (la librerı́a api-ai-javascript, el
componente chat, el módulo chat y el servicio chat).
2. A continuación, en el componente principal de Angular, se exportó el módulo

chat.
3. Se puso en environments.ts el id de la API de Dialogflow correspondiente al

agente/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 para

obtener los datos de nuestro chatbot. Se creó la clase ‘Message’ para dar formato
a los mensajes que aparezcan. Se inicializa Dialogflow con el token de la API. Se
crea un array de mensajes y el método ‘converse’ añade los mensajes al array, que
accede a la API y devuelve la respuesta del bot en el mismo array.
5. Para añadir nuevos valores al array se utiliza un operador ‘scan’. Cada vez que se
emita un mensaje, se concatenará al anterior.
6. En el HTML del componente chat se usa ‘ngClass’ para cada mensaje para
aplicar en él una clase condicional ‘to’ o ‘from’ para determinar si el mensaje
proviene del usuario o del chatbot. Con ‘ngModel’ creamos un formulario que
envı́a el mensaje cuando se pulse la tecla ‘Enter’.
7. Por último se le dio un estilo sencillo a la interfaz mediante CSS el cual se ha ido
puliendo y actualizando constantemente. Se tuvo en cuenta el diseño previo
realizado en los Mockups mostrados en el capı́tulo 7.
Tras comprobar que se enviaban los mensajes introducidos en la interfaz a

Dialogflow y que Angular recibı́a y mostraba la respuesta de este, se decidió comenzar
a implementar intents más elaborados que consumiesen servicios de terceros, tales
como Wikidata o la propia BVMC, para ası́ ofrecer respuestas continuamente
actualizadas en tiempo real. Si la información varı́a en Wikidata o en la biblioteca
también cambiará la respuesta ofrecida por el asistente sin necesidad de realizar ningún
cambio en el mismo. Ası́ siempre la información ofrecida al usuario a través del
asistente se mantiene actualizada.
Se decidió comenzar por obtener datos de Wikidata para realizar intents

informativos acerca de Miguel de Cervantes Saavedra. Para ello se desarrolló el
siguiente código en el archivo TypeScript del componente chat:
Listado 8.3: Solicitud de datos a Wikidata

1 this . fullUrl = this . endpointUrl + ’? query = ’ +
e nco de UR IC om po ne nt ( 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 } );
Implementación 67
En el listado 8.3, la variable endpointUrl contiene la dirección web a la que le hacemos

la petición POST, en este caso serı́a a https://query.wikidata.org/sparql. Como
se puede observar se utiliza SPARQL para realizar la consulta a la base de datos de
Wikidata y por ello se necesita añadir la variable sparqlQuery en la cual se introduce la
consulta que deseamos realizar en cada una de las peticiones. Ambas variables van
precedidas de this. en el código debido a que se han declarado fuera de la función en
cuestión y por ello se les ha de llamar de esta manera. Gracias a esto pueden ser
accedidas desde cualquier función del mismo archivo TypeScript.
Los resultados de la petición POST se almacenan en una variable a la que se le ha

llamado resultData. Cada consulta realizada con éxito devuelve a Angular los datos
solicitados a Wikidata y estos son convertidos en un archivo JSON para facilitar su
posterior acceso y uso.
Se crearon un total de 14 intents que sacaban datos de Wikidata para informar sobre
Miguel de Cervantes Saavedra. Por ejemplo, el asistente da respuesta a preguntas sobre
él como cuál fue la causa de su muerte, cuándo y dónde nació, cuáles fueron las obras
que escribió...
Durante la implementación de los intents mencionados anteriormente también se

comenzó a estudiar cómo poder añadir la funcionalidad al asistente de mostrarle la
previsión del tiempo al usuario si este se lo pedı́a. Para ello se decidió utilizar la API
de datos abiertos que ofrece AEMET (Agencia Estatal de Meteorologı́a). En este caso
se tuvo que solicitar una API Key de acceso que facilitan por correo electrónico. El
listado de código 8.4 muestra cómo realizar una petición 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 módulo de Angular para hacer peticiones HTTP llamado
HttpClient. Este módulo permite crear una variable (en este caso se llama http) desde
la que se puede realizar una petición de cualquier tipo, en este caso una petición GET.
En la url de la petición se ha puesto ... en dos partes ya que ahı́ variará la información
de una petición a otra. En los primeros puntos suspensivos se aclararı́a qué es lo que
estás solicitando de la API de AEMET y en los segundos se pondrı́a la API Key
facilitada por AEMET en el correo electrónico para poder ası́ consumir datos de su
API.
Se prepararon 2 intents que utilizaban la API de AEMET, uno para ofrecer la

predicción del tiempo de España del dı́a actual y otra para la predicción del tiempo de
España del dı́a siguiente al actual. Los datos devueltos en JSON de la petición GET se
almacenan en la variable resultData y más adelante se almacena en otra variable una
url (por eso se ha llamado ası́ a la nueva variable) que nos envı́a a la predicción del
tiempo solicitada. En vez de dar la información en formato JSON para posteriormente
ser parseada y tratada, AEMET manda un enlace que redirige a un texto en el que se
explica la predicción solicitada. Este enlace es el que devuelve el asistente cuando se le
solicita la predicción del tiempo.
A continuación, se procedió a consumir datos de la BVMC. Para ello se desarrolló el

siguiente código:
Listado 8.5: Solicitud de datos a la BVMC

1 this . fullUrl = ’/ bvmc - lod / repositories / data ’ + ’? query = ’ +
en co de UR IC om po ne nt ( 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 que
en la variable sparqlQuery va la consulta pertinente. Los resultados (el JSON devuelto
por la petición) se almacenan en la variable resultData. En un primer momento, no
funcionaba este código debido a que saltaba un error de AccessControlCors por usar
diferentes dominios. Esto sucedı́a por haber creado un pequeño servicio que realizaba
la petición y lo devolvı́a como respuesta. La forma en la que se solucionó el problema
fue con la implementación 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 código permite que el navegador deje que se reciban datos del sitio web de la
BVMC y se encuentra en un archivo que se creó entonces situado en la raı́z del
Implementación 69
proyecto Angular (en la carpeta frontend) al que se le llamó proxy.conf.json. Tras esto
se modificó en el archivo package.json, situado también en la raı́z del proyecto Angular,
la lı́nea ”start”: ”ng serve”quedándose ”start”: ”ng serve –proxy-config
proxy.conf.json”. Esto se modificó para que cada vez que se inicie el proyecto Angular
con el comando npm start en la consola, este tome en cuenta el proxy desarrollado y
ası́ evitar el error de AccessControlCors. Antes de este arreglo el comando que se
utilizaba para ejecutar el proyecto Angular era ng serve.
Teniendo este error solucionando y cogiendo ası́ datos de la BVMC sin ningún
problema se continuó con la implementación de intents. Se comenzó por uno para
ofrecer al usuario todas las versiones registradas en la BVMC del Quijote. Después se
entrenó al asistente para que fuese capaz de ofrecer las obras almacenadas en el idioma
que pida el usuario en la BVMC. Es decir, si el usuario le pide al asistente las obras
almacenadas en la BVMC en valenciano este le ofrecerá acceder a sólo las obras que la
biblioteca posee en valenciano. Esto lo hace con todos los idiomas disponibles en la
totalidad de obras almacenadas en la biblioteca. También a modo informativo el
usuario le puede preguntar por este número total de idiomas en los que posee obras la
biblioteca.
Aclarar que tanto para los datos obtenido de la BVMC como para los de Wikidata o
los de la API de AEMET se sigue el siguiente proceso para que el asistente sea capaz
de mostrar estos datos en sus respuestas:
1. Se prepara una respuesta especı́fica en el intent desde Dialogflow que se utiliza

para identificar desde Angular que es una respuesta que precisa de datos de
terceros. Por ejemplo, puede devolver un mensaje que fuese NacimientoMiguel.
2. En el HTML del componente chat se dividen los mensajes recibidos por

Dialogflow en 2 clases. La primera es un conjunto de mensajes que se han
especificado en el HTML de antemano (teniendo en cuenta la respuesta que se ha
preparado en Dialogflow) y la segunda es el resto de mensajes no especificados en
el HTML. Los del segundo grupo se muestran directamente en la interfaz (la
respuesta que devuelve Dialogflow), sin embargo los del primer grupo se
modifican. Siguiendo con el ejemplo, se preparara el HTML con un *ngIf de
Angular para que si el mensaje recibido de Dialogflow es NacimientoMiguel este
mensaje (que pertenece al primer grupo) se tenga que modificar. Si el mensaje es
cualquier otro que no se encuentre especificado en el *ngIf entonces pertenece al
segundo grupo.
3. Al pertenecer al primer grupo se manda el mensaje recibido de Dialogflow a una

función creada en el archivo TypeScript del componente chat. Esto es posible
debido a que gracias al ciclo de vida (Lifecycle Hooks) de Angular llamado
ngDoCheck(), situado en el archivo TypeScript del componente del chat, el
programa está constantemente buscando un elemento HTML que tenga un id
concreto especı́ficado previamente. Este id se les añade a los mensajes que
pertenecen al primer grupo en el HTML. En ese momento ngDoCheck() envı́a

este mensaje a la función que se encargue de solicitar los datos de terceros
correspondientes.
4. Dependiendo de cuál sea el mensaje se realiza una petición para Wikidata, para
la BVMC o para AEMET. Esta petición se realiza y, tras ello, se elabora una
respuesta fija con ciertos datos o enlaces variables que dependerán de los
resultados de la petición. Por ejemplo: Miguel de Cervantes nació en el año X en
Y. Parte del mensaje es estático pero el año (la X) y el lugar (la Y) son datos
cogidos del resultado de la petición, por lo que si estos datos son actualizados en
el sitio del que se han solicitado también se actualiza esta respuesta. Esto
también sucede con enlaces como los de la predicción del tiempo. Por eso si se le
pide al asistente la predicción de dı́a de hoy siempre devuelve el enlace que ofrece
la predicción del dı́a actual ya que esto es lo que le devuelve la API de AEMET y
esta se actualiza cada dı́a.
Se añadió la funcionalidad de poder ofrecer la predicción diaria del horóscopo para

un signo especı́fico en los aspectos del amor, dinero y salud. Para ello se utilizó la API
horoscopo-cli1 . Para mostrar los resultados en las respuestas del asistente se utilizan los
mismos pasos que para la predicción del tiempo, la biblioteca y Wikidata. También se
utiliza lo mismo para el resto de funcionalidades.
Listado 8.7: Pedir predicción del horóscopo

1 this . http . get ( ’ https :// api . adderou . cl / tyaas / ’) . subscribe ( data = > {
3 }) ;
En los resultados devuelve la predicción diaria de cada uno de los signos. Dependiendo
de cuál haya pedido el usuario, desde TypeScript se prepara la respuesta del asistente
con la predicción de un signo u otro.
Después se implementó la funcionalidad de realizar traducciones. Para ello se utilizó

la API de Yandex que permite detectar el idioma del texto que se quiere traducir y
traducir este a otro idioma de los 90 idiomas disponibles para ello. De los siguientes
métodos con el primero se detecta el idioma del texto a traducir y con el segundo se
realiza la traducción.
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 }) ;
1
https://github.com/joacorandom/horoscopo-cli
Implementación 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 método los puntos suspensivos representan a la API Key que proporciona
Yandex al registrarse para utilizar su API y los segundos el texto del que se quiere
detectar el idioma. En el segundo método los primeros puntos suspensivos representan
a la API Key ya mencionada, los segundos el texto a traducir y los terceros el idioma
al que se quiere traducir el texto. La variable this.resultData.lang contiene el idioma
detectado en el primer método y por tanto es el idioma en el que se encuentra el texto
del que se va a realizar la traducción.
Tras esto se arreglaron algunos fallos de la interfaz del asistente como evitar que se
puedan mandar mensajes en blanco. También se implementaron las funcionalidades de
buscar autor y de buscar obra de las almacenadas en la BVMC. Para ello se utilizaron
nuevas consultas SPARQL, como en las funcionalidades de buscar obras en cierto
idioma o de solicitar las ediciones de la obra El ingenioso hidalgo Don Quijote de la
Mancha, que se comentan en el Anexo III (C). El código de TypeScript para realizar
las llamadas es el mismo utilizado en las otras funcionalidades que solicitan datos a la
biblioteca.
Se comenzó a utilizar la API de trawlingweb.com para poder implementar las

funcionalidades de buscar noticias de actualidad y de solicitar vı́deos de YouTube del
canal 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 %20 virtual %20 miguel %20 de %20 cervantes ’) .
subscribe ( data = > {
3 }) ;
Los resultados en ambos casos son filtrados ya que devuelven algunos resultados que
no son lo que se desea mostrar. En el primer caso, tras filtrar, sólo imprime noticias que
estén en castellano y en el segundo caso sólo muestra vı́deos que han sido subidos al
canal oficial de la BVMC. Si no se filtrasen mostrarı́a noticias en multitud de idiomas y
se mostrarı́an vı́deos que, aunque tengan en su mayorı́a que ver con la BVMC, no están
subidos en el canal oficial de la biblioteca. Añadir que en los puntos suspensivos de
ambas llamadas va el token que trawlingweb.com ofrece al desarrollador.
Tras esto se implementó la funcionalidad de realizar búsquedas de páginas web. Para

ello se utiliza Faroo API ya que no se encontraron más APIs gratuitas o que no
exigiesen introducir una tarjeta de crédito para comenzar su uso gratuito. Esta API
ofrece realizar búsquedas web en inglés únicamente, por ello esta funcionalidad sólo
está disponible en este idioma.
Listado 8.12: Obtener resultados de una búsqueda de páginas 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 método fetch(). En él se indica
la url a la que se va a realizar la llamada, que va a ser una petición GET, las cabeceras
y cors. Si falla la petición se muestra el error en la consola. Si por lo contrario se
realiza con éxito se devuelve text del contenido de la respuesta y se parsea a JSON
para el posterior uso y manejo de los resultados. Añadir que en los primeros puntos
suspensivos van las palabras clave con las que realizar la búsqueda de páginas web y en
los segundos va la API Key necesaria para utilizar la API. El uso de FAROO API es
facilitado por RapidAPI2 que es un buscador de APIs gratuitas para desarrolladores y
hace de intermediario en las llamadas de este servicio.
2
https://rapidapi.com/
Implementación 73
Tras esto se comenzó a implementar la funcionalidad de acceder a la API de Twitter

para obtener los últimos tweets de la cuenta oficial de la BVMC. Para ello primero se
tuvo que crear una cuenta como desarrollador explicando a Twitter para qué se iba a
utilizar su API. A Twitter no le quedó claro e insistieron enviando un correo para que
se les explicara con más detalle para qué se querı́an solicitar API Keys para utilizar la
API. El correo que envió Twitter es el que se muestra en el Anexo VI (F). Twitter
acabó dando permiso y acceso a su API mediante API Keys y Tokens que fueron
recibidos por correo electrónico.
Para poder realizar llamadas a la API de Twitter se requiere, por seguridad,

mantener iniciada una sesión en un servidor desde el cual enviar las claves obtenidas en
el correo de Twitter mencionado anteriormente y a cambio recibir una nueva clave de
autorización. Con esta última clave ya se pueden obtener los últimos tweets de la
cuenta oficial de la BVMC. En el momento en el que se cierra la sesión, la clave de
autorización deja de ser válida por lo que este servidor ha de estar funcionando en todo
momento mientras se utiliza el asistente para que funcionen las llamadas a la API de
Twitter. Se realizó un pequeño backend utilizando Node.js para crear este servidor y
ası́ 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 de
resources/frontend. En esta carpeta se instaló Express.js y algunos comandos que se
iban 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 crear
aplicaciones web en menos tiempo ya que nos proporciona funcionalidades como el
enrutamiento, opciones para gestionar sesiones y cookies... Tras la instalación se creó
un nuevo archivo dentro de la carpeta backend llamado server.js en el que se indicó
todo lo que se debe ejecutar al iniciar este servidor y las rutas disponibles con sus
respectivas 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 el
que se escribieron las API Keys que Twitter habı́a dado en su correo. Estas se ponen
en donde se encuentran los puntos suspensivos. La variable bearertoken se deja vacı́a
puesto que es donde se almacena posteriormente la clave de autorización que tras
enviar las API Keys Twitter nos devuelve y con la que ya se nos permite realizar
llamadas 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 ;
Después se creó un nuevo archivo, también en la carpeta backend, al que se le puso

Implementación 75
de nombre functions.js y en el que se encuentran las funciones que se encargan de

realizar las llamadas a la API de Twitter. La primera se encarga de solicitar el bearer
token mencionado anterioremente y para ello le envı́a las API Keys que se encuentran
en el archivo config.js. La segunda se encarga de obtener los últimos tweets de la
cuenta oficial de la BVMC. Esta última envı́a el bearer token obtenido en la primera
función para ası́ poder obtener los tweets debido a que este token le dice a la API que
tenemos autorización 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 últimos tweets de la
cuenta de la BVMC vaya correctamente se ha de abrir un segundo terminal en la
consola (el primero estarı́a ejecutando el proyecto Angular), situarse en la carpeta
resources/frontend/backend del proyecto y ejecutar el comando ’node server.js’. En
este momento se estará ejecutando el servidor y en consecuencia la funcionalidad de
Twitter puede ser utilizada desde el frontend sin ningún problema.
Una vez se tuvo el backend para consumir de la API de Twitter listo para ser
utilizado se procedió a preparar las llamadas desde el frontend a este backend.
Listado 8.16: Llamadas al backend para obtener los últimos 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 se

realiza la llamada para obtener los últimos tweets de la BVMC y entonces el backend
devuelve la respuesta al frontend. Desde el frontend ya se preparan los tweets
obtenidos para ser mostrados en la respuesta del asistente.
Después se añadieron dos intents informativos en Dialogflow sobre cuáles son las
redes sociales de la BVMC y sobre dónde se pueden ver las últimas novedades de la
biblioteca. También se realizaron unos ajustes en las búsquedas de autores y de obras
implementados anteriormente.
Tras esto se implementó la funcionalidad de buscar las obras de un autor en

concreto. Al igual que en todas las llamadas a la BVMC lo único que varı́a es la
consulta SPARQL de las que se habla en el Anexo III (C). También se añadieron
anclas en ciertos mensajes largos de los devueltos por el asistente para que al usuario
se le muestre el inicio del mensaje en la interfaz en vez del final. Por cada ancla se
añade el siguiente código en el HTML del componente del chat en Angular:
Implementación 77
Listado 8.17: Código 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 añadiendoles un
número que se incremente en cada ancla nueva (Ancla1, idancla1, anclado1). Siguiendo
con el ejemplo, en el TypeScript lo que se ha de añadir es lo siguiente:
Listado 8.18: Código 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 se

cambia su HTML como se puede ver arriba. El valor de name debe ser el mismo que el
de href en el HTML pero sin la almohadilla.
Como hay que esperar a que se haya mostrado el mensaje de respuesta del asistente
modificado por pantalla para que funcione el ancla se utiliza la función de TypeScript
setTimeout(). Esta permite que el ancla funcione porque si se intenta utilizar la
función click() del DOM antes de que se le haya añadido el ancla a la respuesta del
asistente esta fallará y será como si no hubiera un ancla (al usuario se le mostrarı́a el
final del mensaje en la interfaz en vez del principio).
Listado 8.19: Código TypeScript para hacer funcionar el enlace ancla añadido
1 setTimeout (() = > {
2 document . getElementById ( ’ anclado ’) . click () ;
3 } , 10) ;
El párametro con valor 10 del ejemplo son los milisegundos que se espera el programa a
ejecutar el código del interior de la función setTimeout. Este número se puede cambiar
por uno mayor u otro menor dependiendo del tiempo de espera que se quiera. También
se mejoró el flujo conversacional del asistente desde Dialogflow para que resultase
todavı́a más natural seguir una conversación con el mismo.
Tras esto se comenzó a pulir el diseño del asistente mediante el CSS del componente
del chat en Angular. Se optó por el uso de los colores corporativos de la BVMC (sobre
todo el color con identificador b21f1f) y su diseño se hizo tan simple e intuitivo como el
de un chat. De esta forma el usuario sabe donde ha de escribir los mensajes y cómo
enviarlos sin tener que pensar demasiado. Además las respuestas por parte del
asistente aparecen englobadas de un color diferente a las preguntas del usuario para
que sean fáciles de distinguir unas de otras. Aparte de por el color también se
diferencian unos mensajes de otros por su posición dentro de la caja del chat (unos
pegados a la izquierda y los otros pegados a la derecha). También se añadió una
pequeña animación a la hora de abrir el asistente. Esta consiste en una transición que
permite que la caja del chat vaya apareciendo suavemente desde no haber nada hasta
aparecer 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́ cerrada
darle un toque llamativo y diferente. Three.js es una librerı́a escrita en JavaScript para
crear y mostrar gráficos animados por ordenador en 3D en un navegador Web y puede
ser utilizada en conjunción con el elemento canvas de HTML5, SVG o WebGL. Para
instalar la librerı́a Three.js en el proyecto Angular se ejecutó el siguiente comando en la
consola ’npm i ng-three’. También cambié en el archivo tsconfig.app.json situado en la
raı́z del proyecto Angular la lı́nea ”types”: [] por ”types”: [”webgl2”] para poder
instalar WebGL2 (la última versión) en el proyecto y ası́ permitir que funcione la
librerı́a al completo. WebGL es una especificación estándar que define una API
implementada en JavaScript para la renderización de gráficos en 3D dentro de
cualquier navegador web[Khronos.org, 2020]. Esta tecnologı́a es en la que se basa la
librerı́a Three.js para funcionar.
En el HTML del componente chat se creó un elemento canvas para poder visualizar
en él el elemento 3D a añadir.
Listado 8.20: Código 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 módulos y servicios.

También se creó un elemento canvas para luego mostrar la escena 3D en el HTML (al
modificar este elemento canvas se modifica el que se ha añadido previamente en el
HTML), luego se añadió en el constructor el nuevo servicio para utilizar la librerı́a y
además se preparó el programa para que nada más cargar el código se cree la escena en
el canvas y se comience a ejecutar la animación del elemento 3D. Esto último es gracias
al uso del método ngOnInit() de los ciclos de vida de Angular.
Listado 8.21: Código añadido 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 () {
Implementación 79
11 ...
12 this . engServ . createScene ( this . rendererCanvas ) ;
13 this . engServ . animate () ;
14 }
Las 2 lı́neas de código añadidas en el método ngOnInit() al principio estaban situadas

al principio del método pero esto bloqueaba el mostar en la interfaz tanto los mensajes
enviados a Dialogflow como los recibidos del mismo. Esto ocurrı́a porque el programa
trataba de cargar la escena 3D primero de todo y como el elemento que se muestra se
carga de un archivo JSON externo pues tardaba un poco en cargarse y mientras se
cargaba, el programa sufrı́a un error y por ello el resto del código del método
ngOnInit() era ignorado. En este código que se ignoraba se encontraba el que permite
que los mensajes del asistente se muestren en la interfaz. La solución al problema fue
dejar la carga de la escena 3D para lo último en este método (por eso se pusieron al
final 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 las

lı́neas al principio del método, funcionaba todo bien debido a que antes de cargar el
elemento 3D definitivo desde un archivo JSON se probó la librerı́a Three.js pintando
directamente con código un cubo 3D en la escena. Como el programa no tenı́a que leer
un archivo JSON externo no se necesitaba esperar a que este cargase y por ello no se
producı́a ningún error que hiciera que se ignorasen el resto de las lı́neas del método
ngOnInit().
Aclarar, antes de explicar el funcionamiento del servicio del motor gráfico

(EngineService) creado para utilizar Three.js, que mientras en el canvas se dibujaba el
cubo 3D de prueba se prepararon tanto este elemento como la caja del chat para ser
responsive (resoluciones para tablets y dispositivos móviles) mediante CSS usando
media queries. También se preparó para que si se hace click fuera del chat, mientras
está abierto, este se cierre y vuelva a aparecer el elemento 3D. Al volver a hacer click
sobre el elemento 3D el chat se abre manteniendo la conversación que se habı́a tenido
con el mismo antes de cerrarse. Para esto último se instaló en el proyecto Angular
mediante el comando ’npm i ng-click-outside’ un módulo que permite almacenar en un
evento si se ha hecho click fuera de cierto elemento HTML o si se ha hecho click sobre
el mismo.
Listado 8.22: Usar clickOutside para saber si se ha hecho click fuera del asistente
1 < div ( clickOutside ) =" o n C l i c k e d O u t s i d e C h a t ( $event ) " >
2 ...
3 </ div >
Después ya en la función onClickedOutsideChat(e) situada en el archivo TypeScript del

componente chat se le indica al programa que la caja del chat se tiene que ocultar y
que el elemento 3D se tiene que mostrar.
El servicio del motor gráfico tiene varios métodos pero antes se ha de importar la
librerı́a Three.js en el servicio y preparar todos los elementos que se van a utilizar en la
escena 3D que posteriormente se mostrará en el elemento canvas situado en el HTML.
Listado 8.23: Servicio para usar el motor gráfico 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 . P erspec tiveCa mera ;
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 c a n c e l A n i m a t i o n F r a m e ( this . frameId ) ;
24 }
25 }
Después se encuentra el método para crear la escena. Este método lo primero que hace
es coger la referencia del elemento canvas y lo preparamos para que se puedan mostrar
elementos 3D en él. Después se le indica el ancho y el alto, se crea la escena y se crea
una cámara con vista en perpectiva. Se le indica la posición que va a tener la cámara
dentro de la escena y se añade la cámara a la escena. Después se crea una luz de
ambiente para iluminar toda la escena. También se le indica una posición y se añade a
la escena. Tras esto se carga la textura que tendrá el elemento 3D y se crea un material
con la misma. Tras esto se procede a cargar el objeto 3D de un archivo JSON
exportado desde el programa Blender. Por último se crea una malla con la geometrı́a
cargada del archivo JSON y con el material que contiene la textura cargada también
previamente. Se esperan 400 milisegundos con la función setTimeout() para que le de
tiempo al programa a cargar la geometrı́a y la textura para formar la malla y entonces
se añade esta a la escena.
Implementación 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 . Pe rspect iveCam era (
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 ( 0 x404040 ) ;
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 . M eshBas icMate rial ( { map : texture }
);
24 // Loader
25 var loader = new THREE . B u f f e r G e o m e t r y L o a d e r () ;
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 creación la escena se ha de renderizar en el canvas. Como el elemento 3D va a

estar girando constantemente, la renderización se realiza para cada uno de los frames
de la animación. También se tiene en cuenta que el tamaño de la ventana del navegador
puede ser modificado en cualquier momento y por ello se utiliza la función resize() para
que en ningún momento el elemento 3D quede distorsionado y siempre mantenga sus
proporciones originales pero disminuyendo o aumentando de tamaño dependiendo de si
se ha reducido o aumentado el tamaño de la ventana del navegador. En el método
render() se puede apreciar que la malla está viendose constantemente afectada por la
matriz de rotación que posee la librerı́a three.js. A nivel interno Three.js lo que hace es
multiplicar la matriz de la malla por la de rotación que tiene almacenada aumentando
constantemente su valor en 0.01 como se ve en el código. Esta multiplicación hace que
la malla vaya rotando. Añadir además que únicamente 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 . ru nOutsi deAngu lar (() = > {
5 if ( document . readyState !== ’ loading ’) {
6 this . render () ;
7 } else {
8 window . addEventListener ( ’ DOMContentLoaded ’ , () = > {
10 }) ;
11 }
12 window . addEventListener ( ’ resize ’ , () = > {
13 this . resize () ;
14 }) ;
15 }) ;
16 }
17
18 render () {
19 this . frameId = r e q u e s t A n i m a t i o n F r a m e (() = > {
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 . u p d a t e P r o j e c t i o n M a t r i x () ;
31 this . renderer . setSize ( width , height ) ;
32 }
33 }
Implementación 83
Para la creación del objeto 3D se utilizó Blender. En este programa también se

colocó la textura sobre el objeto generando ası́ coordenadas de textura. Estas
coordenadas permiten que al cargar la geometrı́a y la textura desde Angular con
Three.js, la textura siga colocada sobre el objeto de la misma manera que estaba
colocada en Blender en el momento en el que fue exportado. Para exportar el objeto
3D de Blender a un archivo JSON se tuvo que añadir un plugin puesto que el
programa de por sı́ no tiene esta opción.
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 estos
datos los cuadros de mando con Grafana.
Como ya estaban todas las funcionalidades implementadas del asistente se procedió

a diseñar la base de datos definitiva para el registro de las acciones del usuario. Se
decidió que habrı́an 14 tablas independientes unas de otras completamente y que en
estas sólo se almacenarı́a un id incremental y la fecha con la hora a la que se habı́a
realizado la acción en cuestión 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).
Básicamente hay una tabla por funcionalidad en las que se registra cada vez que se le
solicita la funcionalidad al asistente y aparte una tabla llamada interactions que
registra 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 sus
nombres) se va a tomar de ejemplo busquedasautor y se van a mostrar todos los pasos
que se han seguido hasta crear la tabla, añadirle unas filas iniciales y hacer que
funcionen 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:model
BusquedasAutor’, el cual se ejecuta en la consola estando situado en la carpeta raı́z del
proyecto. Como no se necesita enviar datos posteriormente a la hora de crear una
nueva fila en la tabla, el modelo queda vacı́o sin ningún 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 }
Después se crearon los controladores mediante el comando ’php artisan make:controller

BusquedasAutor/BusquedasAutorController -r’. Finalmente no se utilizó ningún
método POST a pesar de que al comienzo del proyecto se habı́a probado su
funcionamiento. Esto se decidió debido a que al no necesitar enviar datos a la hora de
Implementación 85
crear filas nuevas en las tablas es más correcto utilizar el método GET create(). El
método index() recoge todo el contenido de la tabla y lo muestra. Se pensaba que
Grafana lo iba a utilizar y por eso se implementó pero al final no era necesario. Al
tratar de realizar las llamdas desde Angular daba un error de CORS y por eso se
añadió 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 añadió la siguiente
lı́nea para cada controlador en el archivo api.php situado en la carpeta routes:
Listado 8.28: Añadir las rutas para el controlador BusquedasAutor

1 Route :: resource ( ’ busquedasautor ’ , ’ BusquedasAutor \
BusquedasAutorController ’) ;
Después 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 se
desea tener en la tabla (un id incremental por cada fila insertada y la fecha con la hora
a la que se a insertado el dato a la tabla).
Listado 8.29: Migración 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 C r e a t e B u s q u e d a s a u t o r T a b l e 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 }
Implementación 87
En este momento se empezaron a preparar los factories y los seeders que permiten
añadir varias filas a las distintas tablas de la base de datos. Ası́ se puede probar si
funciona el añadir filas a las tablas recién creadas. Para ello se han de modificar dos
archivos. En el primero, que es el archivo ModelFactory.php situado en la carpeta
database/factories, se ha de añadir el siguiente código 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 ha

de añadir el siguiente código para cada una de las tablas. En este caso se le indicó que
se añadan 10 filas nuevas al ejecutar el seeder.
Listado 8.31: Seeder BusquedasAutor
1 ...
2 use App \ BusquedasAutor ;
3 ...
4 BusquedasAutor :: truncate () ;
5 $ c a n t i d a d B u s q u e d a s A u t o r = 10;
6 factory ( BusquedasAutor :: class , $ c a n t i d a d B u s q u e d a s A u t o r ) -> create () ;
7 ...
Tras esto se ejecutó el comando ’php artisan migrate:refresh –seed’ (teniendo Apache y
MySQL funcionando con XAMPP) para crear las tablas y probar la inserción de las
filas. Como todo funcionaba correctamente se procedió a realizar las llamadas en el
frontend para que cuando los usuarios solicitasen las funcionalidades al asistente se
registraran estas en la base de datos.
Se crearon los servicios en el proyecto Angular para poder realizar las llamadas al
proyecto Laravel. Para ello se utilizó el comando ’ng generate service busquedasautor’
(continuamos con el ejemplo de la tabla busquedasautor). De los dos archivos que se
crean para cada servicio en el proyecto Angular el que hay que modificar es
busquedasautor.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 , Ht tpErro rRespo nse
} from ’ @angular / common / http ’;
5
6 @Injectable ({
7 providedIn : ’ root ’
8 })
9 export class B u s q u e d a s a u t o r S e r v i c e {
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 get Busque dasAut or () : 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 métodos son a los que se debe llamar desde el archivo TypeScript del
componente chat, más concretamente al de newBusquedaAutor() que registra en la
base de datos cada vez que se utiliza la funcionalidad de buscar autores del asistente
(crea una nueva fila en la tabla busquedasautor). El otro método no se llega a utilizar
aunque se implementó por si acaso Grafana necesitaba que se le enviasen los datos
desde la API pero finalmente no fue ası́. Más adelante se explica el funcionamiento de
Grafana y cómo este accede a los datos almacenados en la base de datos.
Implementación 89
Tras preparar los servicios para todas las tablas se actualizó el archivo TypeScript
del componente chat para que justo al realizar cada una de las funcionalidades del
asistente se llamara al servicio y se registrase la acción en la base de datos. En el caso
del ejemplo de busquedasautor se añadió el siguiente código:
Listado 8.33: Usar desde TypeScript el servicio BusquedasAutor

1 ...
2 import { B u s q u e d a s A u t o r S e r v i c e } from ’ src / app / busquedasautor .
service ’;
3 ...
4 constructor (
5 ...
6 public b u s q u e d a s a u t o r S e r v i c e : BusquedasAutorService ,
7 ...
8 ) {}
9 ...
10 this . b u s q u e d a s a u t o r S e r v i c e . newBusquedaAutor () . subscribe (
11 response = > {
12 console . log ( response ) ;
13 },
14 error = > {
15 console . log ( <any > error ) ;
16 }
17 );
18 ...
A falta de alguna pequeña mejora del diseño y del arreglo de algunos pequeños errores
de funcionamiento encontrados durante el testeo del proyecto, el frontend se
encontraba terminado. Se procedió a integrar Grafana en el proyecto y a hacer que este
se conectara con la base de datos MySQL.
Una buena forma de saber si el asistente realizado en este proyecto está cumpliendo
su cometido es mediante la monitorización a través de cuadros de mando del uso del
mismo. Por ello se realizó una API con el framework Laravel para ası́ poder almacenar
en una base de datos las acciones que los usuarios realizan a través del asistente virtual
Catalina.
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 la
visualización y el formato de datos métricos. Además se pueden crear cuadros de
mando y gráficos a partir de múltiples fuentes, incluidas bases de datos de series de
tiempo como Graphite, InfluxDB y OpenTSDB.
Para añadir esta funcionalidad al proyecto se descargó Grafana3 de su página web

oficial y se descomprió la carpeta con los archivos en el directorio resources del
proyecto. Para ejecutarlo se debe estar situado desde la consola en la carpeta
resources/grafana-6.5.1/bin y ejecutar el comando ’./grafana-server’. Se accedió a
Grafana desde http://localhost:3000/login y se inició sesión con la cuenta admin con la
contraseña de admin. Esta cuenta venı́a por defecto y una vez se inició sesión se
cambió la contraseña de la cuenta.
Tras esto se añadió la base de datos a Grafana, se le indicó que era MySQL y que su
host era localhost:3306 (como está configurado en el archivo .env situado en la raı́z del
proyecto Laravel). Por último se le indicó cuál era el nombre de la base de datos del
proyecto. Tras esto se guardó la configuración con éxito y ya se tenı́a Grafana
conectado a la base de datos del proyecto.
Sólo faltaba crear los dashboards o cuadros de mando con los datos de cada tabla. A
la izquierda hay un signo + en el que al hacer click da la opción de crear un nuevo
dashboard. Se va a explicar de ejemplo el cuadro de mando al que se le llamó Usuarios
que 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 $__ timeGr oupAli as ( created_at ,1 h ) ,
3 count ( id ) AS " Usuarios "
4 FROM interactions
5 WHERE
6 $__timeFilter ( created_at )
7 GROUP BY 1
8 ORDER BY $__timeGroup ( created_at ,1 h )
Esto se hizo con cada tabla y en algún caso se muestran los resultados de varias tablas
en un mismo cuadro de mando. Un ejemplo serı́a un cuadro de mando llamado
Búsquedas reallizadas en la BVMC a través del asistente. En este se realizan 3
consultas SQL independientes para mostrar los registros almacenados en las tablas de
busquedasautor, busquedasobras y busquedasobrasdeautor. Como son 3
funcionalidades que utilizan datos de la BVMC y todas consisten en realizar búsquedas
se decidió mostrarlas en el mismo cuadro de mando. El otro caso en el que se muestran
datos de más de una tabla de la base de datos serı́a el cuadro de mando llamado
Consultas al contenido de las redes sociales de la BVMC a través del asistente. En este
se muestran tanto lo que se ha registrado en la tabla twitter y en la tabla youtube. En
total se implementaron 11 cuadros de mando o dashboards.
Los administradores de la BVMC pueden acceder en cualquier momento a estos

cuadros de mando y modificar algunos de sus parámetros (modificar el margen de
3
https://grafana.com/
Implementación 91
tiempo del que se muestran los datos en el eje X) para poder analizar y llegar a
conclusiones sobre la efectividad real del asistente virtual y su uso. En estos cuadros de
mando se plasman todas las acciones que se han realizado utilizando el asistente y en
qué momento.
Los cuadros de mando implementados fueron los siguientes:
Usuarios que han utilizado el asistente
Búsquedas realizadas en la BVMC a través del asistente
Solicitudes de las obras disponibles en la BVMC en cierto idioma desde el

asistente
Solicitudes de las ediciones del Quijote a la BVMC a través del asistente
Consultas al contenido de las redes sociales de la BVMC a través del asistente
Solicitudes de la predicción diaria del horóscopo a través del asistente
Solicitudes de búsqueda de páginas web a través del asistente
Solicitudes de noticias de actualidad al asistente
Traducciones solicitadas al asistente
Solicitudes de la predicción del tiempo en España a AEMET a desde el asistente
Solicitudes de información a Wikidata (Miguel de Cervantes) desde el asistente
Todos estos datos que se muestran en los cuadros de mando son la visualización del
registro de las acciones realizadas por el usuario a través del asistente. Toda nueva
acción que realicen los usuarios se verá reflejada automáticamente en el cuadro de
mando correspondiente sin necesidad de realizar cambio alguno. En la Figura 8.1 se
pueden observar 3 de estos cuadros de mando implementados. Con esto la
implementación del proyecto quedó completamente terminada y ya sólo faltaba realizar
las pruebas y la validación, las cuales se ven en el siguiente capı́tulo.
Figura 8.1.: Ejemplos de los cuadros de mando implementados en Grafana

9. Pruebas y validación
Una vez se terminó de implementar el asistente se realizaron las pruebas y

validaciones. La idea es demostrar que no sólo se ha generado la herramienta esperada
sino que además es fiable y robusta. Se ha de validar finalmente y ver que resuelve el
problema analizado y propuesto de una forma aceptable. Se han realizado tanto
pruebas unitarias (unit testing) como con usuarios finales (test cases).
9.1. Pruebas unitarias
En programación, realizar una prueba unitaria sirve para comprobar el correcto

funcionamiento de una unidad de código. Por ejemplo, esta unidad de código en diseño
funcional o estructurado equivale a una función o a un procedimiento. Sin embargo, en
lo que es diseño orientado a objetos equivale a una clase. Esto sirve para asegurar que
cada unidad funcione eficientemente y correctamente por separado. Además de
verificar que el código hace lo que tiene que hacer, verificamos que sean correctos los
nombres y tipos de los parámetros enviados y el tipo de dato que se devuelve en la
llamada, entre otros.
Se deben cumplir los siguientes requisitos para que una prueba unitaria tenga la
calidad suficiente:
Automatizable: Esto es especialmente útil para integración continua. No deberı́a

requerirse una intervención manual.
Completas: Deben cubrir la mayor cantidad de código.
Reutilizables o Repetibles: Es útil para integración continua. No se deben crear

pruebas que sólo se puedan ejecutar una sola vez.
Independientes: La ejecución de una prueba no debe afectar a la ejecución de

otra.
Profesionales: Las pruebas deben ser consideradas igual que el código, con la
misma profesionalidad, documentación, etc.
A pesar de que estos requisitos no tienen que ser cumplidos al pie de la letra, se
recomienda siempre seguirlos o de lo contrario las pruebas pierden parte de su función.
93
94 9.1. Pruebas unitarias
[Wikipedia.org, 2019c]
Se ejecutó en el proyecto Laravel el comando ’php artisan make:test

NombreTablaTest’ para crear los archivos de testing. Se fue variando el nombre del test
dependiendo del nombre de la tabla de la que se iban a comprobar el realizar las
llamadas desde la API. Estos archivos se crean en la carpeta tests/Feature. En el
ejemplo 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 \ W ithout Middle ware ;
7 use Illuminate \ Foundation \ Testing \ Da ta ba se Mi gra ti on s ;
8 use Illuminate \ Foundation \ Testing \ D a t a b a s e T r a n s a c t i o n s ;
9
10 class Bu sq ue da sA ut or Te st 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 los

datos de la tabla busquedasautor con éxito y la segunda si se inserta una nueva fila en
la tabla con éxito. Para comprobar que se pasan con éxito todas las pruebas (en total
se crearon 28 pruebas unitarias; estas 2 mismas pruebas por cada una de las 14 tablas
de 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 las
pruebas unitarias del proyecto.
Pruebas y validación 95
Figura 9.1.: Pruebas unitarias pasadas con éxito
9.2. Casos de prueba
Un test case o caso de prueba es un conjunto de condiciones o variables, en

ingenierı́a del software, bajo las cuales un analista determinará si una aplicación, un
sistema software (software system), o una caracterı́stica de éstos es parcial o
completamente satisfactoria. [Wikipedia.org, 2019b]
Para los test cases de este proyecto se utilizó el mismo estándar que siguieron los
creadores de Chatbol, mencionado previamente en la subsección 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 conversación diferente para cada usuario que ha

realizado el testeo.
Se han evaluado las respuestas del asistente.
Además indicar que, al igual que chatbol, el protocolo de evaluación utilizado para el
asistente sigue el marco de evaluación de tareas compartidas de WOCHAT1 :
Evaluación a nivel de sesión: Responder a una encuesta de satisfacción del

usuario después de interactuar con el asistente (8 preguntas cerradas y 3
preguntas abiertas).
Evaluación a nivel de turno: Anotar la efectividad de las respuestas del asistente

(válida, aceptable o no válida).
La evaluación ha de ser realizada por 6 usuarios diferentes.
1
http://workshop.colips.org/wochat/main sharedtask.html
96 9.2. Casos de prueba
9.2.1. Evaluación a nivel de sesión
Estas preguntas se centran principalmente en el aspecto de la experiencia del usuario

a la hora de interactuar con el asistente, ası́ como en el rendimiento general del
sistema. Las respuestas a las preguntas pueden ser de manera incremental muy rara
vez, rara vez, a veces, frecuentemente y muy frecuentemente. En la Figura 9.2 se
muestran las respuestas de cada uno de los 6 usuarios a las 8 preguntas cerradas que se
les realizaron tras que estos probaran el asistente:
Figura 9.2.: Resultados de la evaluación a nivel de sesión
En las preguntas abiertas, los usuarios comentaron las fortalezas y las debilidades del
asistente. Respecto a las fortalezas, los usuarios mencionaron que el asistente pudo
proporcionar de forma rápida el contenido de la BVMC y que también pudo ofrecerles
información práctica 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 necesita
algo de tiempo ya que al principio les cuesta un poco familiarizarse con él.
Pruebas y validación 97
9.2.2. Evaluación a nivel de turno
Para la evaluación a nivel de turno, se han juntado las puntuaciones a las respuestas
del asistente que los usuarios anotaban en cada turno de la sesión de diálogo con el
asistente. La puntuación dada a cada respuesta podı́a ser válida, aceptable o no válida.
Esta puntuación variaba de acuerdo a su idoneidad percibida y con respecto a la
respuesta recibida y el contexto del diálogo.
Los resultados del testeo fueron los que se muestran en la Tabla 9.1:
Respuestas válidas Aceptables No válidas

45 (64.28 %) 17 (24.28 %) 8 (11.42 %)
Tabla 9.1.: Resultados de la evaluación a nivel de turno
Definiendo respuestas apropiadas como la suma de las válidas y de las aceptables, el

asistente tendrı́a un 88.56 por ciento de respuestas apropiadas.
Tras los resultados obtenidos se procedió a pulir el flujo conversacional de manera

que el porcentaje de respuestas no válidas disminuyera.
10. Resultados
Como se puede observar en la Figura 10.1, se han adoptado los estilos de la web de
desarrollo de la BVMC1 .
Figura 10.1.: Diseño final del asistente en la web de desarrollo de la BVMC
1
http://data.cervantesvirtual.com/blog/
99
100
Cuando el asistente está cerrado su icono va rotando sobre sı́ mismo para capturar la
atención del usuario. Esta rotación la hace de forma suave para que tampoco resulte
molesta para el mismo:
Figura 10.2.: Diseño final del asistente cuando está cerrado
Al hacer clic sobre este icono el asistente se abre mostrando la caja del chat para
comenzar a ser utilizado:
Figura 10.3.: Diseño final del asistente cuando está abierto

Resultados 101
A continuación se muestra el uso de algunas de las funcionalidades del asistente. En

la Figura 10.4 se puede ver lo entrenado que ha quedado el asistente para responder a
multitud 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 en

concreto.
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 Cervantes
Saavedra elaboradas con información 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 la

BVMC 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 últimos tweets que ha
publicado la BVMC en su cuenta oficial de Twitter.
Figura 10.8.: Funcionalidad mostrar últimos tweets de la BVMC
En la Figura 10.9 se puede ver las funcionalidades de solicitar las obras almacenadas
en la BVMC en un idioma concreto y la predicción del tiempo para España.
Figura 10.9.: Buscar obras en un idioma concreto y predicción del tiempo en España
104
Se ha logrado un asistente virtual con multitud de funcionalidades tanto para

obtener de manera rápida contenido de la BVMC como para obtener información útil
para el dı́a a dı́a en otras áreas. Además cuenta con un diseño atractivo y simple que
hace que la experiencia de usuario (UX) sea bastante buena. Añadir que este es
responsive y se adapta a cualquier dispositivo móvil o tablet.
También ha sido testeado por varios usuarios reales los cuales han salido muy
satisfechos de la experiencia. Todas las acciones realizadas por los usuarios en el
asistente quedan registradas en la base de datos MySQL del proyecto permitiendo
mostrar a los administradores estos datos en forma de gráficos (cuadros de mando o
dashboards) a través de la herramienta Grafana añadida en el proyecto.
Los costes temporales planificados y los reales han sido muy similares puesto que se
planificó dejando algo de margen para el error y este ha permitido que se llegue a los
plazos planificados desde el comienzo. A nivel de funcionalidades implementadas no se
han tenido que limitar puesto que conforme se ha ido desarrollando el asistente estas se
han ido eligiendo e integrando una a una.
En este proyecto se han utilizado multitud de conocimientos adquiridos a lo largo de

la carrera, más concretamente en las asignaturas de:
E-Learning.
Sistemas Multimedia Avanzados.
Sistemas Multimedia Basados en Internet.
Gestión de Contenidos Multimedia.
Negocio y Multimedia.
Programación del Cliente Web.
Análisis y Especificación de Sistemas Multimedia.
Fundamentos de las Bases de Datos.
Diseño de Bases de Datos Multimedia.
Tratamiento de Gráficos Avanzados.
Fundamentos del Diseño Gráfico.
Sistemas Distribuidos.
Usabilidad y Accesibilidad.
Proyectos Multimedia.
Resultados 105
Gráficos por Computador.
Diseño de Sistemas Multimedia.

11. Conclusiones
En este apartado se recogen las conclusiones extraı́das del proyecto. Además, se

incluyen 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. El

asistente de la BVMC facilita un acceso a los contenidos de la biblioteca como también
a información de noticias, redes sociales, etc.
El sistema creado proporciona un panel de administración para identificar las

funcionalidades más consultadas.
Es un proyecto que utiliza multitud de tecnologı́as tanto para su parte del backend
como para la del frontend como también numerosos servicios de terceros. Además, se
ha creado una API RESTful y una base de datos que permiten registrar las acciones
que los usuarios realizan a través del asistente. El frontend se comunica tanto con la
propia API RESTful del proyecto como con los servicios de terceros. En lo que respecta
a los servicios de terceros, cabe destacar la BVMC y Wikidata de los cuales se obtienen
datos mediante consultas SPARQL.
Personalmente es un proyecto que utiliza conocimientos que abarcan casi la mayorı́a

de los contenidos del grado, incluso en el tratamiento de gráficos 3D o el análisis de
negocio. Estoy satisfecho con el resultado y con la experiencia adquirida con el
desarrollo, gracias a los cuales tanto a nivel de diseño como a nivel interno de
funcionamiento 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 mayor
cantidad de respuestas válidas o al menos aceptables al usuario.
Implementar la opción de enviar mensajes al asistente a través de la voz y que el
107
108 11.2. Lı́neas de trabajo futuras
asistente también sea capaz de responder por voz.
Hacer que el asistente sea capaz de obtener recursos de otras bibliotecas virtuales
también.
Solicitar nueva información de Wikidata o de la BVMC mediante la

implementación de consultas SPARQL más 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 updated
2020.
[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; last
updated 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/.
[Bbvaopen4u.com, 2016] Bbvaopen4u.com (2016). Api rest: qué es y cuáles son sus
ventajas 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; last
updated 23-march-2016.
[Chatbotslife.com, 2019] Chatbotslife.com (2019). Top 7 programming languages to

develop an ai-powered chatbot. https://chatbotslife.com/top-7-programming-
languages-to-develop-an-ai-powered-chatbot-f253e728845c. Online; last updated
6-june-2019.
[Cloud.google.com, 2019] Cloud.google.com (2019). Agentes compilados previamente y

small 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). Documentación de cloud

translation. https://cloud.google.com/translate/docs/?hl=Es. Online; last updated
2020.
[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 clientes

early adopters. https://destinonegocio.com/pe/negocio-por-internet-pe-pe/la-
109
110 Bibliografı́a
importancia-de-los-clientes-early-adopters/. Online; last updated

2015.
[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/.

[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 mejores

herramientas 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? ¿cómo se definen? etc.
https://www.emprender-facil.com/es/segmento-de-clientes-canvas/. Online; last
updated 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? instalación

y 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 of

customer service. https://www.entrepreneur.com/article/321730. Online; last
[Es.reactjs.org, 2020] Es.reactjs.org (2020). React. https://es.reactjs.org/. Online; last

updated 2020.
[Es.slideshare.net, 2011] Es.slideshare.net (2011). Bases de datos temporales.

https://es.slideshare.net/elaragon/bases-de-datos-temporales. Online; last updated
27-january-2011.
[Foromarketing.com, 2018] Foromarketing.com (2018). ¿en qué se diferencian los

chatbots de los asistentes virtuales?.
https://www.foromarketing.com/diferencias-chatbot-asistente-virtual/. Online; last
updated 27-june-2018.
Bibliografı́a 111
[Grafana.com, 2020] Grafana.com (2020). Grafana. https://grafana.com/. Online; last

updated 2020.
[Iebschool.com, 2019] Iebschool.com (2019). Las metodologı́as ágiles más utilizadas y

sus 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,3

millones 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; last

updated 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; last
[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 forewords
by: 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 updated
30-march-2018.
[Planetachatbot.com, 2017] Planetachatbot.com (2017). Botsociety: cómo hacer un

mockup de un chatbot. https://planetachatbot.com/botsociety-como-hacer-mockup-
de-chatbot-7677c8da7d39. Online; last updated
5-september-2017.
[Planetachatbot.com, 2019] Planetachatbot.com (2019). Los mejores frameworks de

desarrollo de chatbots. https://planetachatbot.com/mejores-frameworks-de-
desarrollo-de-chatbots-7160c59b1ac4. Online; last updated
14-june-2019.
[Platzi.com, 2017] Platzi.com (2017). Gitkraken: La interfaz gráfica multiplataforma

para git. https://platzi.com/tutoriales/1557-git-github/2207-git-kraken-la-interfaz-
112 Bibliografı́a
grafica-multiplataforma-para-git/. Online; last updated

2017.
[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 International
Workshop on Spoken Dialogue System Technology, IWSDS 2018, Singapore, April
18-20, 2018, pages 319–330.
[Semanticwebjournal.net, 2016] Semanticwebjournal.net (2016). Migration of a library

catalogue into rda linked open data. http://www.semantic-web-
journal.net/content/migration-library-catalogue-rda-linked-open-data-0. Online; last
updated 9-january-2016.
[Squarefishinc.com, 2018] Squarefishinc.com (2018). Why you need a virtual assistant

in 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; last
updated 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; last

updated 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 updated

2020.
[W3c.es, 2005] W3c.es (2005). Guı́a breve de web semántica.

https://www.w3c.es/Divulgacion/GuiasBreves/WebSemantica.html. Online; last
updated 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 updated
2-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 updated
16-august-2019.
A. Anexo I. Esquema de base de datos
Una Base de Datos Histórica es aquella en la cual se inserta información y jamás se

modifica ni se borra. [Es.slideshare.net, 2011] Su caracterı́stica principal es la
persistencia. Esta es la acción de preservar la información de forma permanente
(guardarla), pero a su vez también se puede recuperar la información (leerla) para que
esta pueda ser utilizada. Este es el caso de la base de datos realizada en este proyecto
ya que se ha creado para obtener un registro sobre el uso del asistente y estos datos
nunca se borran o actualizan. Básicamente se realiza una petición GET a la API cada
vez que un usuario realiza cierta acción a través del asistente virtual y esta queda
registrada en su debida tabla. No se utiliza POST debido a que no se envı́an desde el
asistente datos para almacenar en la base de datos, simplemente se ordena que se cree
una fila nueva con el id que le toque. Cada vez que se añade 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 el
id 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 de

datos del proyecto sin ninguna relación entre sı́. Esta base de datos es básicamente un
registro de las acciones que los usuarios realizan a través del asistente. Por cada acción
se almacena en su respectiva tabla un identificador y un tipo de dato datetime en el
que se almacena la hora y el dı́a en el que se ha realizado esta acción. No tenemos
constancia de quién es el usuario que ha realizado la acción puesto que el asistente está
disponible para cualquiera que entre a la web por lo que no tenemos por qué tener
datos de este. Por este motivo no existe otra columna en la tabla donde se guarde
información del usuario ni existe una tabla Usuario con la que relacionarse.
Añadir que se trata de una base de datos no relacional puesto que no existe ninguna
relación entre sus tablas. Aunque MySQL se suele utilizar para bases de datos
relacionales, se escogió debido a lo sencillo que resulta su uso y a su buena
compatibilidad con Laravel. Esta información almacenada en la base de datos se utiliza
para generar cuadros de mando, mediante la herramienta Grafana, para los
administradores de la biblioteca. Esto les permite observar y analizar de forma gráfica
las interacciones que han tenido los usuarios con el asistente y ası́ estudiar qué
funcionalidades del asistente desechar por su poco uso y cuáles mejorar por su gran
demanda.
B. Anexo II. Informe de Toggl
Summary Report
September 09, 2019 – December 29, 2019
TOTAL HOURS: 301:47:55
40:57
32:16
32:02
41.7 h
31:12
23:24
33.3 h
19:01
18:18
17:38
16:09
16:03
25.0 h
10:52
9:55
9:51
9:46
16.7 h
7:20
6:57
8.3 h
0.0 h
9/9 - 9/23 - 10/7 - 10/21 - 11/4 - 11/18 - 12/2 - 12/16 -
9/15 9/29 10/13 10/27 11/10 11/24 12/8 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 a 8:49:44
preparar consumir del twitter de la BVMC
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
Pabloguijarro96's workspace Page 1/6
Figura B.1.: Informe de Toggl 1
117
118
Aprender a consumir datos de la BVMC e intentando coger los datos desde 5:10:37
Angular
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 sin 3:18:02
Wikidata)/Consumir api AEMET para el tiempo
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

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

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

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

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
Pabloguijarro96's workspace Created with toggl.com Page 6/6

C. Anexo III. Consultas SPARQL
Se han utilizado distintas consultas SPARQL para obtener los recursos de la BVMC
y para obtener la información de Wikidata. A continuación 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 {
4 ? item wdt : P31 wd : Q5 .
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 {
3 ? item wdt : P31 wd : Q5 .
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 (Información 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 hidalgo

Don 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 _manif estati ons ) ?
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 hidalgo
Don 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; Ejemplo
Lope 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 176
intenciones/intents distintos (8 páginas de 20 intents y una última 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 continuación 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 funcionalidades
para uso cotidiano, como por ejemplo solicitar la predicción del tiempo, y otros para
ofrecer información al usuario sobre el asistente o para completar los intents de
SmallTalk. Los del prefijo bib son los que componen las funcionalidades relacionadas
con la BVMC y con Wikidata. Los precedidos por Default son intents que vienen en
Dialogflow para su uso por defecto, uno para dar la bienvenida al usuario y otro para
ser capaz de responder al usuario cuando el asistente no entiende el mensaje del
mismo. Por último tenemos los de prefijo smalltalk que dan respuesta a preguntas más
habituales, las cuales añaden inteligencia a nuestro asistente.
También se podrı́an agrupar los intents en los siguientes 3 grupos, por un lado los de
uso general y por otro los de consumo de datos abiertos de la BVMC y Wikidata. Los
de 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 por
bib.search. Los de consumo de datos abiertos de Wikidata serı́an los intents de nombre
bib.info.migueldecervantes.x (variando x dependiendo de qué información muestra el
intent) y el intent bib.info.migueldecervantesobras. El resto son los de uso general
(información sobre la BVMC y el uso del asistente, resto de funcionalidades y
SmallTalk).
E. Anexo V. Paso a producción
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 clonación, nos ubicamos en el directorio del servidor donde lo queremos y
ejecutamos el comando:
’git clone https://github.com/PabloGuijarroMarco/APIRestful’.
Tras tener clonado el proyecto en el directorio deseado se tienen que descargar e

instalar 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 urls
del servidor local por las del servidor de producción.
Con estas variables globales podemos indicarle a la API tanto la dirección web donde
se visualizará el proyecto como la conexión con la base de datos.
Después se comienzan a descargar e instalar las dependencias de Laravel mediante

Composer en el directorio del proyecto en producción con el comando: ’composer
update’. Una vez se hace esto, se puede establecer la llave de la aplicación de Laravel a
un string aleatorio con el comando: php artisan key:generate.
Ya se tiene el proyecto listo para migrar las tablas de las bases de datos. Podemos
migrar tablas en caso de que se haya añadido una nueva o en general cualquier tabla de
la base de datos haya sido modificada y se necesite nuevos campos, aunque en este caso
al tratarse del primer despliegue, ejecutaremos simplemente el comando: ’php artisan
migrate’.
También se han que configurar e instalar las dependencias tanto de Grafana, para
que los administradores puedan visualizar los cuadros de mando, como del pequeño
backend que funciona con Node.js y Express, para que el frontend pueda consumir
datos 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 se

configurarán primero las variables globales del proyecto localizadas en
.../APIRestful/resources/frontend/src/environments/environment.ts de manera que se
prepare el frontend para que pueda acceder a las rutas de la API desde cualquier parte
y a las credenciales para conectarse desde el dominio del servidor de producción.
Tras esto, se descargan las dependencias de Angular con el gestor NPM en la

siguiente ruta .../APIRestful/resources/frontend/ con el siguiente comando: ’npm
update; npm install’.
E.3. Comprobar errores.
Una vez se han realizado las tareas anteriores se tiene que comprobar si el sistema
funciona correctamente. Para ello se comprobará que la API rest sigue funcionando
como deberı́a ejecutando los test unitarios de los que se dispone (unit testing). Si todos
ellos funcionan perfectamente significará que la API funciona correctamente.
E.4. Building.
Cuando se haya comprobado que la API funciona correctamente, ejecutaremos ng

serve en distintos puertos para desplegar nuestras aplicaciones en localhost escogiendo
un puerto diferente para cada una de ellas. Por ejemplo, se ejecuta el comando ’ng
serve –port 4200’ para la url en producción del frontend en
.../APIRestful/resources/frontend y se ejecuta el comando ’ng serve –port 4201’ para
la url en producción de Grafana en .../APIRestful/resources/grafana-6.5.1.
Tras esto, se ha de utilizar el asistente para comprobar que todo funciona

correctamente. Una vez hayamos verificado que tanto las funcionalidades del asistente
como los cuadros de Grafana funcionan correctamente, ejecutaremos ’ng build’ para
construir ambas aplicaciones y dejarlas desplegadas en el servidor.
E.5. Última comprobación de errores.
Una vez se haya terminado de buildear el proyecto se ha de entrar desde el navegador

y 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 único propósito de usar la API de Twitter es

poder obtener los tweets más recientes de una cuenta y poder mostrarlos en el asistente
virtual del proyecto. También se aclaró que no se tenı́a intención de analizar nada de
Twitter ni la intención de tuitear o retuitear o dar me gusta al contenido. Por último
se les explicó de que se trataba de un proyecto universitario y cómo se iban a mostrar
al usuario los tweets obtenidos. Finalmente Twitter respondió al correo dando permiso
y acceso a su API mediante API Keys y Tokens.
139

Asistente Virtual para Un Sistema de Informacion GUIJARRO MARCO PABLO

Cargado por

Copyright:

Formatos disponibles

Asistente Virtual para Un Sistema de Informacion GUIJARRO MARCO PABLO

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Asistente Virtual para Un Sistema de Informacion GUIJARRO MARCO PABLO

Cargado por

Copyright:

Formatos disponibles

Asistente virtual para

Trabajo Fin de Grado

Grado en Ingenierı́a Multimedia

ALICANTE, 12 de enero de 2020

Se ha validado el asistente tras la realización de pruebas unitarias y de una evaluación

A. Anexo I. Esquema de base de datos 115

B. Anexo II. Informe de Toggl 117

C. Anexo III. Consultas SPARQL 123

D. Anexo IV. Intenciones implementadas 127

E. Anexo V. Paso a producción 137

F. Anexo VI. Correo recibido de Twitter 139

2.1. Análisis Lean Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

4.1. Asistentes virtuales más utilizados a principios de 2019 . . . . . . . . . . . 18

5.1. Visualización del repositorio del proyecto desde GitKraken . . . . . . . . . 38

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

7.1. Arquitectura REST orientada a servicios . . . . . . . . . . . . . . . . . . . 50

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

9.1. Pruebas unitarias pasadas con éxito . . . . . . . . . . . . . . . . . . . . . 95

10.1. Diseño final del asistente en la web de desarrollo de la BVMC . . . . . . . 99

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

B.1. Informe de Toggl 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

D.1. Intents implementados en Dialogflow para el asistente 1 . . . . . . . . . . 127

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

2.1. Riesgos sobre la organización . . . . . . . . . . . . . . . . . . . . . . . . . 12

6.1. Requerimiento funcional mantener una conversación . . . . . . . . . . . . 41

9.1. Resultados de la evaluación a nivel de turno . . . . . . . . . . . . . . . . . 97

8.1. Primeras lı́neas del archivo .env del proyecto Laravel . . . . . . . . . . . . 63

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

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

Vivimos en un mundo de constante transformación digital impulsado en los últimos

Los chatbots son solo un componente del entorno de IA y están apareciendo a un

Los consumidores contemporáneos desean resultados inmediatos y se apoyan en las

Hay diversos estudios que demuestran que la incorporación de la atención al cliente

Todo esto es posible debido a que en el ámbito de la empresa actualmente se utiliza

En definitiva, en cualquier campo o industria se ha aceptado que la implementación

frecuentes, aligerar el grueso de trabajo a los centros de contacto o la captación de leads.

De forma paralela, han aparecido numerosas plataformas que facilitan la creación y

Este proyecto consiste en el desarrollo de un asistente virtual basado en la BVMC.

Se ha realizado un estudio de viabilidad del proyecto con el objetivo de definir cada

2.1. Modelo de negocio, Lean Canvas

Figura 2.1.: Análisis Lean Canvas

construcción básicos. [Ask.leanstack.com, 2019]

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

2.1.1. Segmentos de mercado

Cuando un usuario interacciona con el buscador y no encuentra el contenido que esta

2.1.3. Propuesta de valor única

Lo primero a tener en cuenta es que es exclusivamente online ya que será únicamente

2.1.6. Estructura de costes

Si se quisiera más adelante mantener el proyecto actualizado y con la idea de

2.1.7. Métricas clave

Se generan un conjunto muy reducido de indicadores que luego ayudan a la toma de

El número de usuarios que han utilizado el asistente virtual durante un cierto

El siguiente es la cantidad de veces que se ha solicitado realizar búsquedas de un

La cantidad de veces que se ha solicitado realizar búsquedas de una obra a través

La cantidad de veces que se ha solicitado realizar búsquedas de las obras de

La cantidad de veces que se ha solicitado realizar búsquedas de páginas web en

La cantidad de veces que se ha solicitado la predicción diaria del horóscopo a

La cantidad de veces que se han solicitado noticias de actualidad a través del