Skip to content

Commit

Permalink
docs: memoria final version
Browse files Browse the repository at this point in the history
  • Loading branch information
rubenmate committed Jul 8, 2024
1 parent fd6d83f commit 9d47084
Show file tree
Hide file tree
Showing 13 changed files with 155 additions and 16 deletions.
Binary file modified docs/draw_entity_relation anexos.pdf
Binary file not shown.
Binary file modified docs/draw_entity_relation memoria.pdf
Binary file not shown.
Binary file added docs/latex/anexos.pdf
Binary file not shown.
27 changes: 27 additions & 0 deletions docs/latex/bibliografiaAnexos.bib
Original file line number Diff line number Diff line change
Expand Up @@ -104,4 +104,31 @@ @misc{github:fork
note = "[Internet; descargado 7-julio-2024]"
}

@misc{sonarcloud,
author = "SonarCloud",
title = "SonarCloud",
howpublished = {\url{https://sonarcloud.io/}},
note = "[Internet; descargado 8-julio-2024]"
}

@misc{jgraph_issue29,
author = "{jgraph}",
title = "{Issue \#29 --- mxGraph}",
howpublished = {\url{https://github.com/jgraph/mxgraph/issues/29#issuecomment-261266818}},
note = "[Internet; descargado 8-julio-2024]"
}

@misc{jgraph_issue505,
author = "{jgraph}",
title = "{Issue \#505 --- mxGraph}",
howpublished = {\url{https://github.com/jgraph/mxgraph/issues/505}},
note = "[Internet; descargado 8-julio-2024]"
}

@misc{crue:sostenibilizacion,
author = "{CRUE}",
title = "{Directrices para la sostenibilización curricular}",
year = {2005},
url = {https://www.crue.org/wp-content/uploads/2020/02/Directrices_Sosteniblidad_Crue2012.pdf},
note = "[Internet; fecha de última visita: 7-julio-2024]"
}
Binary file added docs/latex/img/package-diagram.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/latex/img/test-coverage-cli.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/latex/img/test-coverage-utils.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/latex/img/test-coverage.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/latex/memoria.pdf
Binary file not shown.
4 changes: 4 additions & 0 deletions docs/latex/tex/A_Plan_proyecto.tex
Original file line number Diff line number Diff line change
Expand Up @@ -263,6 +263,10 @@ \subsection{Viabilidad legal}
\label{tab:licencias}
\end{table}

No fue sencillo averiguar qué licencia usaba mxGraph puesto que al entrar a su licencia \footnote{\url{https://github.com/jgraph/mxgraph/blob/master/LICENSE}} no se indica específicamente ante qué licencia nos encontramos.

Tras buscar en internet se descubrió que nos encontrábamos ante una licencia Apache 2.0 \cite{jgraph_issue29} con un epígrafe modificado \cite{jgraph_issue505}.

Las herramientas y librerías utilizadas en este proyecto están cubiertas por dos tipos exclusivamente: la licencia MIT\cite{mit:license} y la licencia Apache 2.0\cite{apache:license}. Ambas son permisivas y permiten la reutilización, modificación y distribución del software.

La licencia MIT es muy permisiva y permite a los usuarios utilizar, copiar, modificar, fusionar, publicar, distribuir, sublicenciar y/o vender copias del software \cite{sistemasoperativos:mit}. Siempre que se incluya esta licencia en todas las copias o partes sustanciales del software.
Expand Down
62 changes: 47 additions & 15 deletions docs/latex/tex/C_Diseno.tex
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ \section{Diseño de datos}
"attributes": [
{
"idMx": "3",
"key": false,
"name": "Atributo",
"position": {
"x": 374,
Expand Down Expand Up @@ -62,14 +63,50 @@ \section{Diseño de datos}
]
}
\end{lstlisting}
\caption{Representación interna del diagrama E-R}
\caption{Representación interna de un ejemplo de diagrama E-R.}
\label{fig:e-r-structure}
\end{figure}

En esta estructura tenemos 3 entidades definidas que son: Entidades, Relaciones y Atributos.

En la figura \ref{fig:e-r-structure} podemos ver un ejemplo de un diagrama que constaría de una entidad llamada \texttt{Entidad} cuyos campos son:
\begin{itemize}
\item idMx: Vinculación de id con la librería de renderización mxGraph.
\item position: Coordenadas de esta entidad en el canvas.
\item attributes: Colección de atributos que pertenecen a esta entidad de los cuáles se guardan a su vez:
\begin{itemize}
\item idMx.
\item key: Si son clave o no.
\item position.
\end{itemize}
\end{itemize}
También tenemos una relación llamada \texttt{Relación} cuyos campos son:
\begin{itemize}
\item idMx: Vinculación de id con la librería de renderización mxGraph.
\item position: Coordenadas de esta entidad en el canvas.
\item canHoldAttributes: Booleano que determina si esta relación puede guardar atributos, es decir si es N:M.
\item attributes: Colección de atributos que pertenecen a esta relación (solo en caso de ser N:M) de los cuáles se guardan a su vez:
\begin{itemize}
\item idMx.
\item key: Si son clave o no.
\item position.
\end{itemize}
\item side1:
\begin{itemize}
\item idMx: id de la librería mxGraph que corresponde a la celda donde se guarda el label de la cardinalidad.
\item cardinality: Cardinalidad de este lado de la relación.
\item cell: Este campo es equivalente a idMx pero se conserva por compatibilidad.
\item entity.idMx: id de la librería mxGraph que corresponde a la celda que contiene la entidad de esta lado de la relación.
\end{itemize}
\item side2: Con campos idénticos, corresponde al otro lado de la relación.
\end{itemize}

Su diagrama E-R es el siguiente: \ref{fig:structure-er}
\imagen{structure-er}{Diagrama E-R que representa la estructura interna sobra la que funciona la aplicación.}

Tanto Entidades como Relaciones pueden tener atributos asociados. En el caso de las entidades han de tener sí o sí un atributo, mientras que las relaciones pueden no tenerlo.
Las Relaciones pueden tener 1 o más lados, estando cada uno de estos lados relacionados con 1 Entidad. Una Entidad puede aparecer suelta en un diagrama E-R asi que no tiene porqué estar asociada a un Lado.

\section{Diseño procedimental}
En esta sección se describen los procesos más complejos de la aplicación utilizando diagramas de flujo para entenderlos más fácilmente.

Expand Down Expand Up @@ -100,29 +137,24 @@ \section{Diseño arquitectónico}

\subsection{Estructura de paquetes}
La estructura de paquetes de la aplicación se organiza de la siguiente manera:

\imagen{package-diagram}{Estructura de paquetes de la aplicación.}
\begin{itemize}
\item \textbf{src}: Contiene todo el código fuente de la aplicación.
\begin{itemize}
\item \textbf{components/DiagramEditor}
\item \textbf{DiagramEditor}
\begin{itemize}
\item styles: Carpeta con el css que afecta al componente DiagramEditor
\item \textbf{DiagramEditor.js}: Componente principal de nuestra aplicación, llama al resto de módulos e inicializa la librería mxGraph.
\item utils
\begin{itemize}
\item \textbf{setInitialConfiguration.js}: Ajusta la configuración la que se inicializa la librería mxGraph.
\item \textbf{initToolbar.js}: Inicializa la barra de herramientas.
\item \textbf{addToolbarItem.js}: Función auxiliar que se llama al arrastrar un componente de la barra de tareas al canvas.
\item configureToolbar.js: Función auxiliar para configurar la barra de herramientas.
\item getStyleByKey.js: Función auxiliar para obtener estilos de un objeto.
\item getStyleStringByObj.js: Función auxiliar para obtener estilos de un objeto.
\item \textbf{DiagramEditor}: Componente principal de la aplicación.
\item \textbf{initMxGraph}: Inicialización de la librería mxGraph.
\item \textbf{toolbar}: Inicialización de la barra de herramientas.
\end{itemize}
\end{itemize}
\item \textbf{utils}:
\begin{itemize}
\item \textbf{validation.js}: Módulo que contiene las funciones necesarias para procesar y determina si la estructura interna E-R conforma un diagrama válido.
\item \textbf{sql.js}: Módulo que contiene las funciones necesarias para procesar y convertir la estructura interna E-R en un script SQL.
\item \textbf{validation}: Módulo que valida la estructura interna E-R.
\item \textbf{sql}: Módulo que procesa y convierte la estructura interna E-R en un script SQL.
\end{itemize}
\end{itemize}
\item App.js: Punto de entrada de la aplicación React.
\end{itemize}

\subsection{Componentes de la arquitectura}
Expand Down
75 changes: 75 additions & 0 deletions docs/latex/tex/D_Manual_programador.tex
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,13 @@ \subsection{Despliegue}
\section{Pruebas del sistema}
Las pruebas del sistema están divididas en pruebas end-to-end (e2e) y pruebas unitarias.

Inicialmente se intentó integrar la cobertura de los tests con la herramienta Sonarcloud \cite{sonarcloud} sin embargo se acabó desestimando por las siguientes razones:
\begin{itemize}
\item Existen dos frameworks de test, pero tan solo Vitest arroja coberturas de código.
\item Los tests end-to-end prueban funcionalidades finales desde el punto de vista del usuario y por tanto no se genera una cobertura de código como tal. Para cubrir el componente principal, \texttt{DiagramEditor.js} se requeriría el uso de una librería de testeo para componentes de React. Que pudiera comprobar cosas tales como si el componente se está montando o no.
\item Al quedar todo \texttt{DiagramEditor.js} con cobertura de código 0 se provoca que la GH Action de Sonarcloud falle.
\end{itemize}

\subsection{Pruebas unitarias}
Las pruebas unitarias se encuentran en el directorio \textbf{tests/unit}. Estas pruebas verifican la funcionalidad de los componentes individuales del sistema. Los diagramas JSON de ejemplo utilizados en estas pruebas están en \textbf{tests/unit/graphs}.

Expand All @@ -150,8 +157,66 @@ \subsection{Pruebas unitarias}
npm run test
\end{verbatim}

Las pruebas unitarias nos permiten comprobar su cobertura lanzando el comando
\begin{verbatim}
npm run test:coverage
\end{verbatim}

Aparte de una salida en la terminal, se crea una carpeta \texttt{coverage} con un archivo index.html al que podemos acceder y comprobar el reporte de cobertura.

\imagen{test-coverage-cli}{Reporte de cobertura desde la terminal.}
\imagen{test-coverage}{Reporte de cobertura.}

Podemos ver que la cobertura en los módulos \texttt{validation.js} y \texttt{sql.js} es casi completa.

\imagen{test-coverage-utils}{Cobertura de los módulos utils: sql y validation}

\imagen{unit-tests}{Ejecución de pruebas unitarias}

\subsubsection{Descripción de las suites de pruebas}

\textbf{sql.js}
\begin{itemize}
\item \textbf{Filter graph tables}:
Se verifica el correcto filtrado de las tablas intermedias según el tipo de relación en el diagrama E-R.

\item \textbf{Extract table 1:N relation}:
Se valida la extracción correcta de tablas para relaciones 1:N del diagrama E-R.

\item \textbf{Extract table 1:1 relation}:
Se valida la extracción correcta de tablas para relaciones 1:1 del diagrama E-R.

\item \textbf{Extract table N:M relation}:
Se valida la extracción correcta de tablas para relaciones N:M del diagrama E-R.

\item \textbf{Generate SQL}:
Se valida la generación correcta de scripts SQL a partir de varios diagramas E-R.
\end{itemize}

\textbf{validation.js}
\begin{itemize}
\item \textbf{General validation function}:
Se verifica la validación general de varios diagramas E-R completo.

\item \textbf{Non repeated entity or n:m relation name}:
Se comprueba que no haya nombres repetidos en entidades o relaciones N:M en el diagrama E-R.

\item \textbf{Non repeated attributes in entities or n:m relations}:
Se comprueba que no haya nombres de atributos repetidos en entidades o en relaciones N:M.

\item \textbf{Every entity should have at least one attribute}:
Se comprueba que todas las entidades tengan al menos un atributo.

\item \textbf{Relations}:
Se valida diversos aspectos relacionados con las relaciones en el diagrama E-R:
\begin{itemize}
\item Cada relación conecte dos entidades (pueden ser la misma entidad en ambos lados).
\item No existan relaciones con atributos a menos que sean relaciones N:M.
\item Todas las relaciones tengan cardinalidades válidas.
\end{itemize}
\end{itemize}


\subsection{Pruebas end-to-end}
Las pruebas end-to-end se encuentran en el directorio \textbf{tests/e2e}. Estas pruebas verifican la funcionalidad completa del sistema desde un punto de vista de usuario final.

Expand All @@ -168,4 +233,14 @@ \subsection{Pruebas end-to-end}

\imagen{e2e-tests}{Ejecución de pruebas End to End con la interfaz gráfica de Playwright}

\subsubsection{Descripción de los tests}
\begin{itemize}
\item \textbf{Add entities to the canvas and change name}:
Se comprueba que el usuario pueda agregar entidades al canvas y cambiar sus nombres.

\item \textbf{Add attributes to an entity}:
Se comprueba que el usuario pueda agregar atributos a una entidad en el canvas.

\item \textbf{Hide/show attributes}:
Se comprueba que el usuario pueda ocultar y mostrar atributos de una entidad en el canvas.
\end{itemize}
3 changes: 2 additions & 1 deletion docs/latex/tex/F_ODS.tex
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,5 @@ \section{Reflexión final}
La implementación de buenas prácticas de desarrollo, la promoción de la innovación y la eficiencia, y el enfoque en la sostenibilidad ambiental y social son aspectos que han tenido presencia en el proyecto de una u otra manera.
Esta experiencia ha mejorado mis habilidades técnicas. Pero no solo eso, también ha fortalecido mi compromiso con el desarrollo sostenible y responsable en el ámbito tecnológico.

Para más información sobre la sostenibilización curricular, se puede consultar el documento de la CRUE \url{https://www.crue.org/wp-content/uploads/2020/02/Directrices_Sosteniblidad_Crue2012.pdf}.
Para más información sobre la sostenibilización curricular, se puede consultar el documento de la CRUE \cite{crue:sostenibilizacion}.

0 comments on commit 9d47084

Please sign in to comment.