Aplicación web para el dise˜no de Chatbots de Telegram

98 Pages·2017·1.94 MB·Spanish

Grado en Ingenier´ıa Informa´tica de Gestio´n y
Sistemas de Informacio´n
Trabajo de Fin de Grado
Aplicaci´on web para el disen˜o de
Chatbots de Telegram
Iker Melero Mazagatos
dirigido por
Juanan Pereira Varela
Bilbao, 24 de julio de 2018

Resumen
En este proyecto se ha desarrollado una aplicaci´on web, con el objetivo de proporcionar
una herramienta para disen˜ar las pantallas o conversaciones de un Chatbot para Tele-
gram. Para ello, se ha utilizado Django, el conocido framework web de c´odigo abierto
escrito en python. La aplicaci´on web tiene soporte multiusuario y es multiidioma. En
lo que respecta al disen˜o de las conversaciones, se ofrece la utilidad drag & drop como
m´etodo de an˜adir componentes a la pantalla, permitiendo tambi´en usar la misma uti-
lidad para ordenar los componentes insertados. Permite adem´as organizar las pantallas
por proyectos, eliminarlas y guardarlas para su posterior edici´on. Adem´as, es posible
simular la pantalla de un dispositivo m´ovil para verificar que el disen˜o realizado hasta
el momento se ajusta a sus l´ımites, teniendo la posibilidad de generar y descargar una
imagen del disen˜o de pantalla realizado.
iii
Laburpena
Proiektu honetan, Telegramerako Chatbot pantaila edo elkarrizketak diseinatzeko tres-
na bat eskaintzeko helburuarekin, web aplikazio bat garatu da. Horretarako Django
erabili da, pythonen idatzitako kode irekiko framework web ezaguna. Web aplikazioak
erabiltzaile eta hizkuntza anitza da. Elkarrizketen diseinuari dagokionez, drag & drop
aukera eskaintzen da osagaiak pantailara gehitzeko, era berean, aukera berdina erabili
daiteke atxikitutako osagaiak antolatzeko. Gainera, pantailak proiektutan antolatzeko,
ezabatzeko eta gordetzeko aukera ematen du, gerora editatu ahal izateko. Horrez gain,
gailu mugikor baten pantaila simulatzea posible da, ordurarte egindako diseinua muge-
tara egokitzen dela egiaztatzeko, egindako pantaila diseinuaren irudi bat sortzeko eta
deskargatzeko aukera izanez.
iv
Abstract
In this project, a web application has been developed, with the goal to provide a tool
to design screens or conversations of a Chatbot for Telegram. Django has been used
for that, a known web framework of open code written in python. The web application
has a multi-user support and it is multi-language. When it comes to the conversation
designs,thedrag & drop utilityisprovidedasamethodtoaddcomponentstothescreen,
allowing to use the same utility to arrange the attached components. It allows also to
organize the screens by projects, to eliminate them or to save them to edit them later
on. In addition to that, it is possible to simulate a screen of a mobile device to verify
that the created design until that time adjusts to its limits, having the possibility to
create and download an image from the screen design.
v

Contenido
Resumen III
Laburpena III
Abstract IV
Lista de Figuras X
1. Introducci´on 1
1.1. Origen del proyecto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2. Motivaciones para la elecci´on del proyecto . . . . . . . . . . . . . . . . . . 2
1.3. Caso de uso general . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2. Captura de requisitos 5
2.1. Descripci´on general . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.2. Requisitos funcionales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.3. Jerarqu´ıa de actores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.4. Casos de uso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.5. Modelo de dominio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.5.1. Entidades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Usuario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Proyecto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Pantalla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Componente . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.5.2. Relaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Tiene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Contiene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Se compone . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.6. Arquitectura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.6.1. Arquitectura f´ısica . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.6.2. Arquitectura l´ogica . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.6.2.1. Arquitectura Servidor . . . . . . . . . . . . . . . . . . . . 11
2.6.2.2. Arquitectura aplicaci´on . . . . . . . . . . . . . . . . . . . 12
Aplicaci´on base Django . . . . . . . . . . . . . . . . . . . . 12
Aplicaci´on Web disen˜o pantallas . . . . . . . . . . . . . . . 13
3. Planteamiento inicial 14
3.1. Objetivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
vii
Contenido viii
3.2. Alcance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.2.1. Aprendizaje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.2.2. Gesti´on . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
3.2.3. Captura de requisitos . . . . . . . . . . . . . . . . . . . . . . . . . 22
3.2.4. An´alisis y disen˜o . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.2.5. Implementaci´on y desarrollo . . . . . . . . . . . . . . . . . . . . . . 26
3.2.6. Pruebas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
3.2.7. Documentaci´on . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
3.2.8. Despliegue. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
3.3. Planificaci´on temporal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
4. An´alisis de antecedentes 38
5. An´alisis y disen˜o 41
5.1. Diagrama Entidad-Relaci´on . . . . . . . . . . . . . . . . . . . . . . . . . . 41
5.2. Diagrama de clases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
5.3. Diagrama de secuencia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
6. Desarrollo 46
6.1. Framework Django . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
6.1.1. Funci´on de logging . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
6.1.2. Multidioma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
6.1.3. Estructura de archivos . . . . . . . . . . . . . . . . . . . . . . . . . 49
6.2. Base de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
6.3. Funcionalidad Proyectos y Pantallas . . . . . . . . . . . . . . . . . . . . . 51
6.4. Pantalla disen˜o conversaciones . . . . . . . . . . . . . . . . . . . . . . . . 58
6.5. Maquetaci´on de la web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
7. Pruebas 61
7.1. Pruebas consola Herramienta de Desarrolladores de Firefox . . . . . . . . 62
7.2. Pruebas logging Django . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
8. Conclusiones 67
8.1. Comparaci´on entre los objetivos fijados y el resultado final . . . . . . . . . 67
8.1.1. Planificaci´on temporal . . . . . . . . . . . . . . . . . . . . . . . . . 67
8.1.2. Objetivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
8.2. L´ıneas futuras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
8.2.1. Mejorar la interfaz de usuario . . . . . . . . . . . . . . . . . . . . . 68
8.2.2. An˜adir m´as elementos al disen˜o de las conversaciones . . . . . . . 69
8.2.3. Funcionalidad de colaborar entre usuarios . . . . . . . . . . . . . . 69
8.2.4. Automatizar las pruebas . . . . . . . . . . . . . . . . . . . . . . . . 69
8.3. Conclusi´on personal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
A. Despliegue de la aplicaci´on en el servidor 72
A.1. Pip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
A.2. Virtualenv, Django y depenencias . . . . . . . . . . . . . . . . . . . . . . . 73
A.3. Instalaci´on y configuraci´on de uWSGI . . . . . . . . . . . . . . . . . . . . 76
A.4. Instalaci´on y configuraci´on de Nginx . . . . . . . . . . . . . . . . . . . . . 78
Contenido ix
B. Herramientas utilizadas 80
C. Repositorio y direcci´on web 86
C.1. Repositorio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
C.2. Direcci´on web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Bibliograf´ıa 87
Lista de Figuras
2.1. Jerarqu´ıa de actores. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.2. Casos de uso. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.3. Modelo de dominio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.4. Esquema de solicitud, procesamiento y respuesta de peticiones. . . . . . . 13
3.1. Captura ejemplo uso herramienta Trello. . . . . . . . . . . . . . . . . . . . 16
3.2. Diagrama EDT del proyecto. . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.3. Diagrama EDT de la tarea de aprendizaje.. . . . . . . . . . . . . . . . . . 19
3.4. Diagrama EDT de la tarea de gesti´on. . . . . . . . . . . . . . . . . . . . . 21
3.5. Diagrama EDT de la captura de requisitos. . . . . . . . . . . . . . . . . . 23
3.6. Diagrama EDT del an´alisis y disen˜o. . . . . . . . . . . . . . . . . . . . . . 25
3.7. Diagrama EDT de la implementaci´on y el desarrollo. . . . . . . . . . . . . 26
3.8. Diagrama EDT de las pruebas. . . . . . . . . . . . . . . . . . . . . . . . . 28
3.9. Diagrama EDT de la documentaci´on. . . . . . . . . . . . . . . . . . . . . . 30
3.10.Diagrama EDT del despliegue. . . . . . . . . . . . . . . . . . . . . . . . . 32
3.11.Diagrama Gantt del proyecto. . . . . . . . . . . . . . . . . . . . . . . . . . 36
4.1. Captura pantalla pagina web Fake Whatsapp. . . . . . . . . . . . . . . . . 39
4.2. Captura pantalla pagina web Botsociety. . . . . . . . . . . . . . . . . . . . 40
5.1. Diagrama de Entidad-Relaci´on. . . . . . . . . . . . . . . . . . . . . . . . . 42
5.2. Diagrama de clases. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
5.3. Diagrama de secuencia - Inicio sesi´on y guardado pantalla. . . . . . . . . . 44
6.1. Eleccio´n de idioma en la aplicaci´on web. . . . . . . . . . . . . . . . . . . . 49
6.2. Estructura de archivos del proyecto. . . . . . . . . . . . . . . . . . . . . . 50
6.3. P´agina de usuario en la aplicaci´on web. . . . . . . . . . . . . . . . . . . . 54
6.4. P´agina de proyecto en la aplicaci´on web. . . . . . . . . . . . . . . . . . . . 55
6.5. Creacio´n de una cuenta de usuario en la aplicaci´on web. . . . . . . . . . . 56
6.6. Disen˜o de pantallas en la aplicaci´on web. . . . . . . . . . . . . . . . . . . . 57
7.1. Ejemplo registro consola navegador. . . . . . . . . . . . . . . . . . . . . . 63
x