Castillo Ortiz Jose Miguel Memoria
Castillo Ortiz Jose Miguel Memoria
Realizado por
Jose Miguel Castillo Ortiz
Tutorizado por
Francisco López Valverde
Departamento
Lenguajes y Ciencias de la Computación
UNIVERSIDAD DE MÁLAGA
MÁLAGA, JUNIO 2019
Fecha defensa
Dicho entorno está desarrollado para poder hacer también diferentes tareas como por
ejemplo solicitar un registro de alta en la plataforma, su inicio y cierre de sesión, gestión
de usuarios, ver los paneles de visualización según tu categoría en la plataforma, entre
otras opciones de las cuales entraremos en más profundidad en este documento. Además,
todas estas funcionalidades estarán disponibles según el rol de cada usuario ya que se
cuenta con diferentes categorías de usuario en la plataforma.
Palabras clave: Yii2, MVC, HighCharts, MySQL, PHP, Business Intelligence, Paneles de
visualización.
Abstract
A fully dynamic web application has been developed applying the Yii2 framework, using an
MVC architecture (Model/View/Controller), in which panels of data visualization collected
from a MySQL database are elaborated. These panels can help the companies in the
decision-making process as the collection of all their data can be observed in a more graphic
way.
For the elaboration of these visualization panels, a previous study of different graphic tools
has been carried out in order to know which one suits best our needs and the framework
we use. This study is detailed in this report and the tool used is HighCharts.
Este trabajo de fin de grado forma parte del área de las tecnologías de la información y
se van a exponer las ideas para la creación de una aplicación web relacionada con el
sector empresarial.
1.1 Motivación
Mi principal motivación para la elección de este proyecto de fin de grado ha sido por
realizar una aplicación web ambientada al sector empresarial, poner en práctica todas
aquellas tecnologías aprendidas tanto en el grado como en mi experiencia laboral y
poder profundizar en dichas tecnologías para el desarrollo del proyecto como han sido
HTML, PHP, CSS.
Además, también mi tutor Francisco López Valverde, profesor de una de las asignaturas
que cursé durante el grado, le dio el enfoque que buscaba de poder orientarlo hacia el
sector empresarial y crear una herramienta de Business Intelligence, proponiéndome
además el framework que uso en la aplicación web, Yii2.
1.2 Objetivos
Uno de los principales objetivos del proyecto es el tratamiento de los datos almacenados
en bases de datos internas para a través de ellos crear paneles de visualización sobre
ellos. Para poder usar estos paneles se ha tenido que realizar buscando entre las
herramientas más demandas hoy en día en este campo para implantarla en el proyecto.
1
Se busca además que estos paneles sean atractivos y de fácil uso por parte de todos los
usuarios de la plataforma.
Otro objetivo ha sido crear una buena interfaz, cómoda y amigable a través del
framework Yii2 y ver todas las funcionalidades que se pueden realizar con él, por
ejemplo, CRUD de usuarios, donde además se realiza envío de correos electrónicos
desde la plataforma, pero todo esto entraremos más en detalle en el capítulo
correspondiente.
Por último, se busca que el tratamiento de todos los datos internos en la base de datos,
como pueden ser de los usuarios de la plataforma sean tratados de manera correcta.
2
2
Tecnologías Utilizadas
En primer lugar, hablaremos sobre PHP (Hypertext Preprocessor), el cual ha sido uno de
los lenguajes principales para nuestro proyecto junto a HTML debido principalmente a
que se ha encargado de dar estructura nuestra aplicación web y darle funcionalidad a
esta (Back-end). Aparte de lo mencionado anteriormente también es porque es un
lenguaje multiplataforma, porque podemos incrustar código PHP con etiquetas HTML y
finalmente porque ofrece conexión con la mayoría de SGBD (Sistemas de gestión de
bases de datos).
Por último, para dar forma a nuestra aplicación web y para que quede un entorno
amigable para el usuario, hemos usado CSS (Cascading Style Sheets), que viene a ser
hojas de estilos, que viene a ser un mecanismo para describir cómo se va a mostrar por
pantalla nuestro entorno.
3
Una vez planteado los lenguajes de programación para nuestro proyecto (aparte del
framework y el lenguaje para la base de datos, los cuales hablaremos a continuación),
tocaba ver que entorno desarrollo es el que íbamos a usar para el proyecto.
Es por ello por lo que se decidió cambiar a Sublime Text, en su versión tercera, ya que
es un editor bastante sencillo, pero con lo necesario para no tener problemas a la hora
de compilar el proyecto con Yii2 en XAMPP.
Hemos usado este sistema de base de datos ya que es un entorno en el que me siento
cómodo trabajando por mi experiencia en él tanto en lo aprendido durante la carrera
como en el ámbito laboral que he tenido. Además, XAMPP, nos suministra este SGBD y
con el entorno de PHPMyAdmin, el cual cuenta con Licencia Pública General de GNU
Versión 2 y que no es necesaria una instalación de este debido a que se maneja desde
la web, la parte de base de datos se hace de una manera muy sencilla.
Antes vamos a responder a que es Yii2 (Yes It Is), en primer lugar, es que es un software
libre y que además es un framework de PHP de alto rendimiento que con el cual
conseguimos crear aplicaciones web modernas en poco tiempo. Es por estos motivos,
añadiendo además de que estábamos en la búsqueda de insertar un framework potente
en nuestro proyecto y de que a modo personal quería hacerlo con este añadido para
poder aprender con frameworks ya que nunca lo había hecho, Yii2 era el software que
nos faltaba para poder crear nuestra herramienta.
Tras esta explicación sobre Yii2, a continuación, se exponen varias de las características
que nos suministra este framework y hemos usado en nuestro proyecto.
4
• Patrón de diseño Modelo Vista Controlador (MVC), estilo de arquitectura de
software que separa los datos de una aplicación, la interfaz de usuario y la lógica
de control. El Modelo contiene una representación de los datos que maneja el
sistema, la Vista es la interfaz de usuario y el Controlador actúa como
intermediario entre el Modelo y la Vista, es decir, gestionando el flujo de
información entre ellos. En la siguiente ilustración se muestra la representación
de este patrón de diseño.
Otro de los añadidos de usar este servidor es por mi experiencia pasada en su uso para
el alojo de páginas web dinámicas, ya que es capaz de hacerlo y satisface todas nuestras
necesidades, tanto en páginas creadas a medida con PHP como es el caso de este
proyecto, como en el alojo de un CMS (Content Management System), como por
ejemplo WordPress.
5
Por último, hay que destacar que incluye un módulo de phpMyAdmin que comentamos
anteriormente en el apartado de MySQL y que se encuentra integrado en un panel de
administración bastante intuitivo de usar. Este panel nos servirá para arrancar el
servidor Apache, la base de datos MySQL, parar estos procesos o configurar parámetros
de estos.
Todo lo anterior se resume en que cuando se terminara una tarea que esté realizada de
manera correcta tras probarla, será subida al repositorio de GitHub del proyecto para
tener un backup de todo lo que esté bien realizado. Por otra parte, lo he realizado
porque son buenas prácticas que no solo se realiza en las empresas que he trabajado
sino en todas que realicen proyectos del sector tecnológico.
6
2.6 ¿Por qué FileZilla?
Una vez que el proyecto tuvo un avance importante, se decidió que se alojara en un
servidor suministrado por el tutor. Esto se realizó sobre todo para cuando tuviéramos
reuniones no tener que depender de XAMPP o del hardware propio, es decir, cualquier
persona desde la dirección alojada podía acceder para ver los avances y para el día de la
presentación del proyecto que cualquiera pudiera acceder in situ para poder usar la
aplicación web.
Es por ello por lo que se optó por FileZilla, el cual es un software libre que nos permite
alojar y compartir archivos en internet, pero principalmente para que un ordenador o
dispositivo pueda conectarse a un servidor web.
Para terminar con este apartado, la dirección en la que está alojada este proyecto es la
siguiente:
http://stats.masterturismodesalud.es/web/index.php
7
8
3
Estudio de la herramienta de
Business Intelligence
3.1 Introducción
En la actualidad el tema del Business Intelligence está a la orden del día para todo tipo
de empresas ya que gracias a estas herramientas transformamos los datos en
información y esa información la podemos usar para optimizar el proceso de toma de
decisiones de dichas empresas. Para conseguir dicha optimización, lo que buscamos son
herramientas que nos permitan crear paneles de visualización con un gran nivel de
detalle de los datos proporcionados por parte de las empresas.
Por lo que, en esta primera parte del proyecto, realizaremos un estudio sobre distintas
herramientas de Business Intelligence para implementar en nuestra aplicación. En este
estudio veremos varias alternativas, de las cuales veremos sus características más
destacadas, como pueden ser sus precios de contratación para obtener una licencia,
comparándose al final de este apartado entre todas las herramientas que veamos, si es
Open Source o gozan de una posibilidad de tenerlo, etc.
Tras esta introducción sobre lo que va a consistir este apartado del proyecto, veremos
varias herramientas, las cuales vamos a analizar y estudiar en detalle, para así poder
decidir cuál es la que más se adapta a las necesidades del proyecto que vamos a realizar
e implementarla en él. Estas herramientas son las siguientes:
9
Para encontrar estas herramientas, se ha hecho un trabajo previo de investigación para
saber cuáles son las herramientas más demandas hoy en día tanto en uso como en
satisfacción para los usuarios. Se destacan principalmente entre los usuarios las tres
primeras expuestas y las restantes son unas herramientas que hemos encontrado muy
interesantes para compararlas con el resto, pero ya las expondremos con detalle en sus
puntos correspondiente. Tras esto comenzamos a profundizar en detalle cada una de
ellas.
Tras esta breve explicación sobre Power Bi, antes de entrar en el apartado de la
contratación, vamos a ver las características más importantes que nos ofrecen para
poder usar en nuestro proyecto.
El ejemplo consiste en que hemos creado unos datos de unos alumnos con sus
respectivas notas y los mostramos mediante un panel de visualización de barras y este
es el resultado.
10
Ilustración 5: Panel de visualización en nuestra aplicación con Power BI (fase de
pruebas de herramientas).
La segunda característica que mencionar es sobre los datos, Power Bi acepta una gran
cantidad de datos para su herramienta, donde las más principales son CSV, Excel, Google
Analytics, MailChimp, MySQL (destacar esta posibilidad porque la base de datos de
nuestro proyecto está creada en MySQL), etc.
No todo va a ser ventajas en esa herramienta, al realizar las pruebas hay que destacar
un factor en contra que es que al generar los paneles de visualización e insertar el código
embebido, en el caso de que exista la necesidad de actualizar los datos, habría que
realizar el proceso desde cero, es decir, crear los paneles de visualización desde los
nuevos datos actualizados y generar su nuevo código embebido para su inserción por lo
que no es óptimo.
Por último, antes de entrar al aspecto de contrataciones, hay que destacar que desde
hace unos años Microsoft abrió un repositorio en GitHub para que la comunidad, el cual
es el siguiente:
https://github.com/Microsoft/PowerBI-visuals
Vayan subiendo mejoras o arreglos para poder implementarse en futuras
actualizaciones o de cara a un uso no comercial por parte del usuario.
Una vez expuesto todas las ventajas y desventajas que nos ofrece la herramienta sobre
nuestro proyecto, pasemos al aspecto económico. Power Bi se mueve por tres tipos de
contratación, el primero que es el que hemos estado usando es el llamado Power Bi
Desktop que con el cual tenemos una capacidad de almacenamiento de hasta 1 Gb de
datos y todo lo expuesto anteriormente. Por otra parte, tenemos la versión Pro por un
precio de 8.40€ por usuario por mes, donde aquí nos ofrecen la posibilidad aparte de lo
anterior de mantener los datos actualizados automáticamente, incluyendo si es el
origen es desde almacenamiento local, por lo que solventaría el problema planteado
11
anteriormente. Y por último cuenta con una versión Pro-Premium, la cual se establece
su precio por nodo y por mes, pero es una solución para empresas de gran tamaño.
Las prestaciones que nos da esta herramienta son muy similares a la anterior, pero
mejora significativamente la forma de ingresar los datos y también nos da la posibilidad
de muchos más formatos entre los que podemos destacar PDFs, archivos de texto, JSON,
e incluso la posibilidad de conectarnos a un conector de datos web. Pero, no es posible
la conexión a bases de datos de tipo MySQL, un factor en contra a destacar.
Aun así, se aprecian mejoras respecto a Power BI ya que hay mayor diversidad de
paneles de visualización a desarrollar, es decir, se tiene un mayor abanico de
posibilidades como se puede ver a continuación en el ejemplo que realizamos en el
punto anterior.
12
Ilustración 7: Panel de visualización en nuestra aplicación con Tableau Public
(fase de pruebas de herramientas)
Tras realizar estas pruebas, como ya dijimos anteriormente se ven mejoras respecto a
Microsoft Power BI, además los cambios que tengan los datos almacenados, en esta
herramienta se actualizarán en la próxima recarga de la aplicación, por lo que es un
punto a favor respecto a la anterior.
Cuenta con todas las posibilidades expuestas en los puntos anteriores, aunque la forma
de ingresar de datos no sea tan extensa como las anteriores, tiene la posibilidad de
conectarte a tu base de datos como puede ser de MySQL, como es nuestro caso.
Por lo que aquí mostramos otro ejemplo de esta herramienta como hemos realizado en
los casos anteriores para poder ver su posible implementación en el proyecto. Su código
embebido es insertar desde el HTML el script que llama al servidor de JasperReports
13
para ejecutar visualize.js, donde se especifica las credenciales de acceso y la función a
realizar.
14
3.5 HighCharts
HighCharts es una empresa que se dedica exclusivamente a la creación de paneles de
visualización para que las empresas los puedan usar para explotar sus datos de una
forma muy visual, ya que, al estar enfocados solo al aspecto de visualización, estos son
de gran calidad y detallados.
HighCharts es muy conocida ya que trabaja con empresas como son Facebook, Twitter,
Yahoo!, Visa, etc., es decir, un gran abanico de grandes empresas mundiales.
Las características principales de HighCharts son que al tener los módulos que contienen
los paneles de visualización, estos se añaden al proyecto y ya se pueden incluir sin
ningún tipo de programa externo, por lo que es mucho más sencillo que el resto de las
opciones expuestas con anterioridad. Por otra parte, el apartado de integridad de datos,
como ya hemos dicho que los módulos están en el proyecto integrados, se pueden
obtener desde él de cualquier forma, incluyendo una base de datos externa como puede
ser en nuestro caso de MySQL.
Para poder contratar HighCharts se tiene que comprar cada módulo y cada uno de ellos
tiene duración permanente, es decir, una vez que se tenga lo tendrás para siempre
desde la versión que la contratas junto con las anteriores, pero en el caso de futuras
versiones nuevas, se debería comprar como un nuevo módulo. Para el proyecto que
estamos realizando vamos a tener en cuenta tres de los seis módulos que ofertan, ya
que los tres que mencionamos están dirigidos al tema de paneles de visualización.
Los precios que ofertan para cada módulo y partiendo que es para un solo desarrollador,
ya que ofertan dentro de estos paquetes según cuantos desarrolladores se tengan, son
los siguientes:
Una vez sabido todo lo referente a sus características y precios de contratación, como
hemos realizado en los casos anteriores, vamos a crear una prueba para saber cómo
quedaría en nuestro proyecto de cara a una posible implementación. En este caso
usaremos la versión no comercial que nos suministra HighCharts, que se puede usar para
uso personal para cualquier persona o para una empresa en el ámbito de gestiones
internas, es decir en cuanto se quiera usar para temas de beneficio económico no se
podría usar este tipo de licencia.
15
Para realizar las pruebas incluiremos los módulos de HighCharts en nuestro proyecto de
prueba e incluiremos, algunos paneles de visualización que tenemos en el módulo de
HighCharts JS. El resultado obtenido es el siguiente:
En dicha tabla veremos cuatro aspectos que deben cumplir la herramienta para poder
ser usada en nuestro proyecto, primero que el código sea embebido, por otro lado, la
posibilidad de una conexión a una base de datos MySQL, en relación con este aspecto
tenemos que los datos cambiados en dicha base de datos se actualicen los paneles sin
tener que tocar nada del código embebido y por último valoraremos el precio de coste
de la herramienta, este aspecto valoraremos el precio de costo de un año y en el
apartado de HighCharts que vimos que tenían varios módulos usaremos la no
comercialización principalmente, pero estableceremos un precio inicial de compra del
pack de los tres módulos que mencionamos en su apartado anterior.
16
Actualización de
Código embebido Conexión BD datos sin cambiar Precio
MySQL código
Power Bi 100€
(usuario/año)
Tableau Public
Gratuito
Visualize.js
1€/hora
Como podemos observar de la tabla anterior sacamos la conclusión que las dos
herramientas que cumplen principalmente las necesidades a cubrir para el proyecto son
Visualize.js y HighCharts (sin contar el precio). A partir de aquí, debemos de valorar el
apartado económico por parte de la empresa que es lo que más rentable que le sale de
cara al futuro si pagar por módulos que necesite como ofrece HighCharts o lo que ofrece
Visualize.js que es el pago por hora de uso, en este caso la opción más viable es la que
nos ofrece HighCharts y es por el siguiente motivo.
En conclusión, tras todo lo expuesto en este apartado del proyecto, vamos a integrar la
herramienta de HighCharts para el modelado de los paneles de visualización que
necesitamos en ella.
17
18
4
Análisis de Requisitos
Requisitos Descripción
- RF-01-1 Create: mediante un formulario
de registro, en el cual se rellenarán campos
tanto obligatorios como no obligatorios
para la creación de un usuario (aquí entra
en función el RF-06).
19
- RF-02-1 Create: cada usuario podrá crear
sus propios paneles de visualización y tener
todos los que desee, cada uno se podrá
personalizar.
20
Cuando el administrador necesite buscar
Buscador en la un usuario en concreto tendrá la
RF-08 administración de posibilidad de hacerlo más rápido
usuarios mediante un buscador.
21
La aplicación se podrá usar en los
RNF-08 ¿Compatibilidad? navegadores de más uso como son
Google Chrome o Firefox.
Al rellenar un formulario de
RNF-09 Validar formularios registro/crear paneles, los datos que
sean obligatorios se le notificará al
usuario para su relleno.
22
5
Esquema de diseño
Esta aplicación nos facilita mucho este trabajo ya que podemos crear todo nuestro
proyecto con su navegación en diferentes entornos como pueden ser en escritorio,
móvil o Tablet.
Antes de mostrar algunas imágenes del boceto que nos sirvió para orientarnos, decir
que es un software de pago, pero que cuenta con una versión escritorio gratuita con la
mayoría de las funcionalidades necesarias para crear el boceto.
Tras acabar de realizar esta parte, se da por concluida toda la parte de búsqueda de
herramientas, estudio de los paneles de visualización a usar y análisis de requisitos y
comenzaremos con el desarrollo del proyecto.
23
Ilustración 12: Boceto Inicio de Sesión.
24
Ilustración 14: Boceto Contacto al Administrador.
25
26
6
Desarrollo de la aplicación
6.1 Introducción
Una vez realizado todo lo expuesto en los capítulos anteriores, toca ponerlos en práctica
para la creación de nuestra aplicación web, pero antes de comenzar a explicar como se
ha realizado, vamos a exponer cual ha sido la temática que tiene dicha aplicación.
La aplicación consiste en tener una aplicación donde distintos usuarios de una empresa
puedan entrar para poder ver sus paneles de visualización según el rol de departamento
que tenga asignado, que en este caso los departamentos están especificado por países,
por ejemplo, España, Inglaterra, etc. y además tendrán el apartado de su perfil para
poder modificar sus datos personales.
Por otra parte, también tendremos un rol de administrador que podrá ver todos los
paneles de visualización, entre otras funcionalidades orientadas a este rol, como son la
administración de los usuarios de la aplicación como así los registros de nuevos usuarios
que se vayan recibiendo.
En los próximos subpuntos de este capítulo iremos extendiendo todo lo explicado en los
párrafos anteriores.
27
6.2 Inicio sin iniciar sesión
Cuando cualquier usuario tanto que este registrado como no, se encuentra la siguiente
interfaz.
Como se puede observar se ven unos ejemplos de como son los paneles de visualización
realizados mediante la herramienta de HighCharts.
Por último, en el margen superior derecho, vemos las dos funcionalidades que podemos
realizar y estarán su explicación se expondrá en el siguiente subcapítulo.
28
Este apartado fue uno de los primeros que realicé con Yii2 y la estructura de MVC. La
vista la tenemos implementada con código PHP y HTML como se muestra en la
ilustración anterior y para enlazarla con el modelo cogemos los parámetros introducidos
en las cajas de texto.
29
Por otro lado, tenemos el apartado de Solicitar Registro (apartado 2 en rojo de la
ilustración 16), pero este tiene una peculiaridad que consiste en que las solicitudes de
registro a la plataforma son vía email, es decir, todas las solicitudes que se hagan llegan
a un correo electrónico del administrador del sistema y este ya realiza las altas desde su
apartado en la aplicación. Esto se ha hecho de esta forma porque Yii2 lo permite y es
algo que me gustaba que estuviera en el proyecto ya que lo aprendí cuando empecé a
probar Yii2.
Como se puede observar sigue una estructura como la de inicio de sesión y tenemos el
añadido de tener un código de verificación para que no se haga solicitudes masivas.
Además, como se puede ver todo sale en un color verdoso y es que todos los campos
introducidos están correctos, se comprueba en tiempo real como en el inicio de sesión
con la función rules. Tras esto enviamos la solicitud y vemos nuestro correo electrónico
para ver el mensaje recibido.
30
Ilustración 21: Solicitud de alta mediante email.
Para poder realizar este proceso de conexión entre nuestra plataforma y el correo
electrónico, hay que crear este proceso en el archivo de configuración que tiene Yii2 y
es como se muestra a continuación.
31
6.4 Pantalla principal administrador
Una vez expuesto varias de las partes comunes, es decir, independientemente del tipo
de usuario que sea uno, vamos a explicar como es la aplicación web según el
administrador de todo el sistema.
Para poder realizar este cambio en el inicio respecto al apartado anterior, comprobamos
desde el controlador que tipo de usuario tenemos, es decir si está registrado o no y este
proceso se realiza con la siguiente acción.
32
6.4.1 Crear panel
Uno de los aspectos más importantes en este proyecto es la posibilidad de que cada
usuario pueda crear sus propios paneles de visualización con los datos que tenga
disponible, guardarlos para de cara a un futuro poder mostrarlos en otro momento,
editarlos, es decir, poder cambiar los datos de un gráfico, cambiar el tipo de gráfico, el
número de gráficos que tiene ese panel de visualización o incluso eliminar dicho panel
si ya no es necesario.
En este punto vamos a explicar como ha sido el proceso por el cual podemos crear los
paneles de visualización y la parte de poder editarlos y borrarlos, lo explicaremos en el
siguiente apartado que está dedicado a la administración de los paneles que tenga cada
usuario.
Como se puede ver tenemos en primer lugar un cuadro de mandos, donde podemos
ocultarlo o mostrarlo para tener una mayor visión del panel que estamos creando, por
otra parte, en el botón de configurar paneles podemos decidir cuantos gráficos va a
tener nuestro panel, desde un único gráfico hasta un máximo de seis y por último si
decidiéramos guardar dicho panel deberemos indicarle un nombre.
Para poder realizar este proceso mediante el MVC vamos a explicar cada uno de ellos a
continuación.
La vista (V) que vemos en la anterior imagen ha sido creada mediante la combinación
de los lenguajes PHP, HTML y JavaScript para las acciones y con CSS para darle un estilo
más personal, con SQL para modelar los datos en los gráficos y estos gráficos creados
mediante HighCharts.
33
Ilustración 26: Cuadro de mandos de Crear Panel.
En esta ilustración tenemos el código usado para las acciones de los botones que vemos
debajo del título del panel con sus correspondientes acciones en JavaScript, además
tenemos una "Field" oculta para poder enviar a nuestro modelo el número de gráficos
que va a tener nuestro panel.
Por otra parte, en el cuadro de mandos tenemos para elegir que tipos de gráficos y que
datos se van a mostrar en cada uno de los que hayamos decidido poner.
Una vez tengamos decido como va a ser nuestro panel para guardar, nuestros datos
pasarán por el modelo para comprobar que es todo correcto, es decir las reglas que
hemos especificado para su creación, como son por ejemplo de que el nombre del panel
este comprendido entre 3 y 50 caracteres o que incluya solo letras y números.
34
Ilustración 28: Reglas para el modelo de creación de un panel.
Para terminar, se iría a la parte del controlador para hacer la acción de guardado tal y
como se muestra en la siguiente ilustración.
Como se puede observar, se comprueba antes de enviar los datos a la tabla de paneles
de la base de datos que el modelo sea correcto y una vez comprobado se incluyen todos
los datos para su creación, si todo es correcto nos redirigirá al apartado de "Administrar
mis paneles" para ver su inserción en él.
35
Para destacar en este punto de crear paneles un problema que se solventó es que
HighCharts cada gráfico tiene una forma concreta de incluir los datos, unos son con
arrays donde le pasas los datos u otros hay que hacer una estructura de JSON para poder
incluirlos.
En los gráficos que eran necesario esta estructura de datos, se creó una función que
recorriera el array de los datos a imprimir y le creábamos su estructura JSON.
36
Ilustración 32: Ejemplo panel de visualización con datos de Inglaterra.
37
6.4.2 Administrar mis paneles
Cuando se crea un panel nuevo seremos redirigidos a este apartado y se nos mostrará
de la siguiente forma.
Para tener esta tabla, desde la vista tenemos un bucle foreach que con el cual según el
id de cada usuario traemos desde una acción del controlador todos los paneles que ha
creado dicho usuario y le añadimos las acciones de editar y eliminar.
38
Ilustración 36: Acción Administrar mis paneles.
Como podemos ver hacemos una consulta con el id del usuario conectado en ese
momento a la tabla paneles de la base de datos y nos traemos todos los datos para
montarlo en la tabla que mostramos en la ilustración anterior, además tenemos la
condición de que si vienen más de cinco gráficos incluiremos una paginación para que
sea todo más amigable de ver.
Tras esto vamos a explicar como es el proceso de poder editar un panel ya creado, el
proceso es parecido a la hora de crearlo, pero con la peculiaridad de que en la acción
del controlador tenemos que traer la información de ese panel y montarla en el
modelo para que se inserte en la vista.
39
Ilustración 37: Controlador acción actualizar panel.
Como se puede observar mediante el "idPanel" que es la Primary Key de nuestro panel
obtenemos todos sus datos mediante la consulta a la tabla paneles de la base de datos,
con esto enviamos al modelo todos los campos que tiene dicho panel y los insertaríamos
en la vista para su modelado, es decir el caso inverso a la creación.
Cuando ya se hayan actualizado los campos a desear, como por ejemplo añadir más
gráficos o quitar alguno, cambiar el nombre de ese panel, cambiar tipos de gráficos o
sus datos, se enviarán estos nuevos campos actualizados a la acción del controlador que
realiza este proceso, no antes sin pasar por el modelo para ver que estén correctos todos
los campos, para su inserción en la base de datos.
40
Ilustración 38: Controlador acción actualizar panel.
Por último, para eliminar un panel cualquiera, al pulsar sobre el botón de eliminar,
saltará una ventana emergente para que se confirme dicha acción, ya que es un proceso
irreversible para tener una mayor seguridad en dicho proceso.
Para realizar este proceso, tenemos que crear una acción en el controlador donde
buscaremos en la base de datos mediante la Primary Key del panel y al ser un atributo
único lo eliminamos con la función "DeleteAll".
41
Ilustración 40: Controlador acción eliminar pane l.
6.4.3 Mi perfil
En este punto tenemos la información referente a cada usuario, la cual es totalmente
accesible para cada uno y con la posibilidad de actualizar tanto sus datos personales
como cambiar la contraseña.
Para poder realizar este proceso hemos creado una acción en el controlador con la cual
obtenemos los datos a mostrar en la vista y una vez se haya realizado los cambios en
alguno de los campos del formulario, estos son revisados por el modelo para luego ser
pasado de nuevo por el controlador para su actualización en la base de datos.
42
Para darle algo más de seguridad en el campo de la contraseña ya que es un campo más
sensible que el resto, he optado por usar la función de Yii2 que es "EncryptByKey", que
con la cual pasamos nuestro parámetro a encriptar y una key secreta que nosotros
establezcamos para realizar el proceso tanto de encriptado como el de desencriptado.
43
6.4.4 Administrar usuarios
Para el apartado de administración de usuarios hemos seguido un modelo parecido a la
hora de administrar los paneles de cada usuario, salvo que en este caso al tener un
volumen mayor de usuarios registrados que de paneles creados, se ha optado por añadir
un buscador de usuarios para que sea más fácil la búsqueda de algún usuario en
concreto.
44
Ilustración 46: Formulario de búsqueda administrar usuarios.
Como se puede observar en las ilustraciones anteriores lo que hemos hecho es crear en
la vista una sección para la búsqueda, en la cual guardamos los parámetros insertados
en el campo "Buscar" para comprobar mediante el modelo que cumple las reglas que le
hemos puesto (Ilustración 41) y tras ello filtrar en la acción del controlador a la hora de
realizar la búsqueda en la base de datos.
Los campos con los que se puede realizar una búsqueda filtrada son con el id del usuario,
su email, su nombre de usuario y su departamento.
45
6.4.5 Registrar usuario
Para poder incluir los usuarios registrados en el apartado de administrar los usuarios
antes se ha tenido que realizar el proceso de registrado. En este caso y como ya
comentamos en los apartados iniciales de este capítulo de la memoria, se optó por usar
un modelo de envío de solicitudes mediante un formulario "Solicitar Registro".
Por lo que el usuario administrador al ver las solicitudes que va recibiendo, este añade
a estos usuarios y una vez realizado este proceso, a la hora de guardar, se envía un
correo al usuario registrado con sus credenciales de acceso a la plataforma.
46
Ilustración 50: Comprobar existencia de usuario.
47
Seguimos con el modelo-vista-controlador (MVC) y en este caso tenemos que, una vez
recogidos los campos del formulario de la vista de registro, comprobamos la existencia
de si dicho usuario, mediante una consulta en la tabla de usuarios que tenemos en la
base de datos, está registrado no seguirá el proceso y será avisado al administrador.
Tras este proceso, en el apartado del controlador tenemos que una vez que haya sido
insertado en la tabla de usuarios se crea un modelo de correo con los campos que sean
necesarios enviar al usuario para su acceso en la plataforma y mediante Yii2
realizamos el proceso de envío de correos electrónicos.
48
6.5 Pantalla principal usuario normal
Por último, los usuarios están categorizados según el departamento al que pertenecen
por lo que, si no son administradores tienen restricciones a ciertas funcionalidades que
hemos visto en el subcapítulo anterior.
Como se puede observar, tenemos que estos usuarios tienen la posibilidad de crear sus
paneles según los datos que tengan accesibles, administrarlos y ver y modificar los datos
referentes a su perfil.
Una de las cosas interesantes de poder saber como mostrar que datos tienen
disponibles o no cada usuario es desde la vista traernos a que departamento pertenecen
y visibilizar solo aquellos a los que tengan acceso, tal y como se muestra en la siguiente
ilustración.
49
50
7
Conclusiones y trabajo
futuro
7.1 Conclusiones
La elaboración de este proyecto ha supuesto un amplio reto de aprendizaje en
diferentes aspectos del ámbito de la informática, todo este proceso se puede desglosar
en las siguientes conclusiones:
• Por otra parte, tenemos el estudio realizado para la elección de que herramienta
se iba a encargar de crear los paneles de visualización de la aplicación. Este punto
es uno muy importante por este motivo, por lo que se ha buscado una mezcla
entre herramientas muy demandadas hoy en día como es el caso de Power BI o
herramientas de no tan conocidas como es el caso de la seleccionada en dicho
estudio, HighCharts.
51
Para terminar, estos puntos concluyen en definitiva que se ha buscado una herramienta
que sea por y para el usuario que le vaya a usar, es decir, que no sea de muy complejo
uso como puede ser con otras herramientas parecidas a esta, ya que normalmente estas
están mucho más sobrecargadas de funcionalidades de todo tipo y que no son
normalmente de fácil uso.
Este último aspecto se ha solventado con una interfaz amigable gracias a la herramienta
de creación de paneles seleccionada y a como está estructurada toda la aplicación y con
esto se consigue tener un acceso a toda la información necesaria de cada uno o la
distribución de las funcionalidades necesarias de cada usuario de una forma rápida y de
sencillo manejo.
• Otra posible mejora sería la posibilidad de crear los paneles de visualización con
datos de proveniente de otras plataformas que no sea MySQL, como puede ser
provenientes de hojas de Excel, CSV o con conexiones con herramientas como
Google Analytics o Adobe Analytics.
• Se podría también cambiar que el registro de usuario para que sea más
automático en vez de con solicitud de alta por correo electrónico, esto fue una
decisión personal como ya expliqué anteriormente para usar funcionalidades del
framework Yii2.
52
Referencias
[1] Manual Yii2: https://www.yiiframework.com/doc/guide/2.0/es
[2] Manual PHP: https://www.php.net/manual/es/index.php
[3] Manual JavaScript: https://desarrolloweb.com/manuales/manual-javascript.html
[4] Manual MySQL: https://dev.mysql.com/doc/refman/8.0/en/language-
structure.html
[5] Instalación XAMPP: http://www.mclibre.org/consultar/php/otros/xampp-
instalacion-windows.html
[6] Documentación Power BI: https://docs.microsoft.com/es-es/power-bi/power-bi-
overview
[7] Documentación Tableau Public: https://public.tableau.com/en-us/s/resources
[8] Documentación Visualize.js:
https://community.jaspersoft.com/documentation/tibco-jasperreports-server-
visualizejs-guide/v71/api-reference-visualizejs
[9] Documentación HighCharts: https://www.highcharts.com/docs/
[10] MVC Yii2: https://www.yiiframework.com/doc/guide/1.1/es/basics.mvc
[11] Manual GitHub: https://education.github.com/git-cheat-sheet-education.pdf
53
54
Apéndice A
Manual de Instalación
En este manual de instalación se explicará paso por paso como ha sido el proceso que
he utilizado para poder trabajar con el proyecto de manera local antes de subir los
avances al servidor proporcionado. Esto como se explica en la documentación anterior
se realiza mediante un servidor apache y el SGBD PhpMyAdmin, utilizando la
herramienta XAMPP.
55
56