add documentation

README.md

@@ -1,4 +1,30 @@
-### Descripción del proyecto
-Aplicación web que permite dibujar diagramas E/R. Los diagramas se guardan en formato XML y/o JSON y serán recuperables para su edición. La aplicación debería ser capaz de generar un script relacional de creación de tablas a partir del diagrama generado.
+# Draw Entity-Relation App
 
 ![Demo](assets/demo.gif)
+
+## Introduction
+Draw Entity-Relation App is a web application designed to model entity-relationship diagrams and export them as SQL scripts after validation. Built with React and using the mxGraph library for diagram creation and manipulation, this tool provides an intuitive interface for users to visually design and structure databases.
+
+## Features
+- **Interactive Diagram Modeling**: Create and manipulate entity-relationship diagrams with an intuitive drag-and-drop interface.
+- **Entity and Attribute Management**: Add entities, define attributes, and establish relationships with ease.
+- **JSON Export/Import**: Export validated diagrams to json files, ready for import and recreate.
+- **SQL Export**: Export validated diagrams to SQL scripts, ready for database implementation.
+- **Responsive UI**: Built with React and Material UI for a modern, responsive user experience.
+
+## Technologies Used
+- **React**: JavaScript library for building user interfaces.
+- **mxGraph**: JavaScript library for creating and manipulating diagrams.
+- **Material UI**: React components for faster and easier web development.
+### Development
+- **Vitest**: Testing framework for unit tests.
+- **Playwright**: Framework for end-to-end testing.
+- **GitHub Actions**: Continuous integration and deployment workflows.
+
+## How It Works
+1. **Modeling Diagrams**: Use the toolbar to drag entities and relationships onto the canvas. Customize entities by adding attributes and defining relationships between them.
+2. **Exporting SQL**: The diagram is validated and then exported to a SQL script, which can be used to create the corresponding database schema.
+3. **Exporting and importing the diagram as JSON**: The diagram is validated and then exported to a JSON file that contains the necessary structure to be able to import it and recreate it.
+
+## Continuous Integration and Deployment
+The project uses GitHub Actions for continuous integration and deployment. Each commit triggers a pipeline that runs unit and end-to-end tests, ensuring the integrity and reliability of the codebase. Successful builds are automatically deployed to Vercel for both [production](https://draw-entity-relation.vercel.app/) and preview environments.

docs/latex/anexos.tex

@@ -8,6 +8,9 @@
 \usepackage{lmodern} % scalable font
 \usepackage{microtype}
 \usepackage{placeins}
+\usepackage{listings}
+\usepackage{listingsutf8}
+\usepackage{adjustbox}
 
 \RequirePackage{booktabs}
 \RequirePackage[table]{xcolor}
@@ -55,7 +58,14 @@
 	\end{figure}
 }
 
-
+\newcommand{\imagencontamano}[3]{
+	\begin{figure}[!h]
+		\centering
+		\includegraphics[width=#3\textwidth]{#1}
+		\caption{#2}\label{fig:#1}
+	\end{figure}
+	\FloatBarrier
+}
 
 % El comando \figura nos permite insertar figuras comodamente, y utilizando
 % siempre el mismo formato. Los parametros son:
@@ -353,9 +363,9 @@
 
 
 % Datos de portada
-\title{título del TFG \\Documentación Técnica}
-\author{nombre alumno}
-\tutor{nombre tutor}
+\title{Draw E-R App \\Documentación Técnica}
+\author{Rubén Maté Iturriaga}
+\tutor{Jesús Manuel Maudes Raedo}
 \date{\today}
 
 \begin{document}

docs/latex/bibliografia.bib

@@ -1,28 +1,301 @@
-@book{koza92,
-		author    = "Koza, John R.",
-		title     = "Genetic Programming: On the Programming of Computers by Means of Natural Selection",
-		publisher = "MIT Press",
-		year      = "1992"
+@misc{ draw-er-app:web,
+    author = "Rubén Maté Iturriaga",
+    title = "Sitio web de Draw-ER-App",
+    year = "2024",
+    url = {https://draw-entity-relation.vercel.app/},
+	howpublished = "\url{https://draw-entity-relation.vercel.app/}",
+    note = "[Internet; descargado 4-julio-2024]"
 }
 
+@misc{ draw-er-app:repo,
+    author = "Rubén Maté Iturriaga",
+    title = "Repositorio de Draw-ER-App en GitHub",
+    year = "2024",
+    url = {https://github.com/rubenmate/draw-entity-relation},
+	howpublished = "\url{https://github.com/rubenmate/draw-entity-relation}",
+    note = "[Internet; descargado 4-julio-2024]"
+}
+
+@misc{ git,
+    author = "Git",
+    title = "Git documentation",
+    url = {https://git-scm.com/docs/},
+	howpublished = "\url{https://git-scm.com/docs/}",
+    note = "[Internet; descargado 4-julio-2024]"
+}
+
+@misc{ git-worktree,
+    author = "Git",
+    title = "Git-worktree documentatin",
+    url = {https://git-scm.com/docs/git-worktree},
+	howpublished = "\url{https://git-scm.com/docs/git-worktree}",
+    note = "[Internet; descargado 4-julio-2024]"
+}
+
+@misc{ github,
+    author = "GitHub",
+    title = "GitHub",
+    url = {https://github.com/},
+    howpublished = {\url{https://github.com/}},
+    note = "[Internet; descargado 4-julio-2024]"
+}
+
+@misc{ typescript,
+    author = "Microsoft",
+    title = "TypeScript",
+    url = {https://www.typescriptlang.org/},
+	howpublished = "\url{https://www.typescriptlang.org/}",
+    note = "[Internet; descargado 4-julio-2024]"
+}
+
+@misc{ fnm,
+    author = "Schniz",
+    title = "fnm - Fast Node Manager",
+    url = {https://github.com/Schniz/fnm},
+	howpublished = "\url{https://github.com/Schniz/fnm}",
+    note = "[Internet; descargado 4-julio-2024]"
+}
+
+@misc{ jest,
+    author = "Jest",
+    title = "Jest",
+    url = {https://jestjs.io/},
+	howpublished = "\url{https://jestjs.io/}",
+    note = "[Internet; descargado 4-julio-2024]"
+}
+
+@misc{ vitest,
+    author = "Vitest",
+    title = "Vitest",
+    url = {https://vitest.dev/},
+	howpublished = "\url{https://vitest.dev/}",
+    note = "[Internet; descargado 4-julio-2024]"
+}
+
+@misc{ wiki:tdd,
+    author = "Wikipedia",
+    title = "Test Driven Development --- Wikipedia{,} La enciclopedia libre",
+    howpublished = {\url{https://es.wikipedia.org/wiki/Desarrollo_guiado_por_pruebas}},
+    note = "[Internet; descargado 4-julio-2024]"
+}
+
+@misc{ gitflow,
+    author = "Atlassian",
+    title = "Gitflow",
+    url = {https://www.atlassian.com/es/git/tutorials/comparing-workflows/gitflow-workflow},
+    howpublished = {\url{https://www.atlassian.com/es/git/tutorials/comparing-workflows/gitflow-workflow}},
+    note = "[Internet; descargado 4-julio-2024]"
+}
+
+@misc{ draw-io,
+    author = "Draw.io",
+    title = "Draw.io",
+    url = {https://app.diagrams.net/},
+    howpublished = {\url{https://app.diagrams.net/}},
+    note = "[Internet; descargado 4-julio-2024]"
+}
+
+
+
+@misc{ wiki:javascript,
+    author = "Wikipedia",
+    title = "JavaScript --- Wikipedia{,} La enciclopedia libre",
+    url = {https://es.wikipedia.org/wiki/JavaScript},
+    howpublished = {\url{https://es.wikipedia.org/wiki/JavaScript}},
+    note = "[Internet; descargado 4-julio-2024]",
+}
+
+@misc{ excalidraw,
+    author = "Excalidraw",
+    title = "Excalidraw",
+    url = {https://excalidraw.com/},
+    howpublished = {\url{https://excalidraw.com/}},
+    note = "[Internet; descargado 4-julio-2024]"
+}
+
+@misc{ mxgraph,
+    author = "jGraph",
+    title = "mxGraph",
+    url = {https://github.com/jgraph/mxgraph},
+    howpublished = {\url{https://github.com/jgraph/mxgraph}},
+    note = "[Internet; descargado 4-julio-2024]"
+}
+
+@misc{ react,
+    author = "Facebook",
+    title = "https://es.react.dev/",
+    url = {https://es.react.dev/},
+    howpublished = {\url{https://es.react.dev/}},
+    note = "[Internet; descargado 4-julio-2024]"
+}
+
+@misc{ material-ui,
+    author = "MUI",
+    title = "Material UI",
+    url = {https://mui.com/},
+    howpublished = {\url{https://mui.com/}},
+    note = "[Internet; descargado 4-julio-2024]"
+}
+
+@misc{ Svelte,
+    title = "Svelte",
+    url = {https://svelte.dev/},
+    howpublished = {\url{https://svelte.dev/}},
+    note = "[Internet; descargado 4-julio-2024]",
+}
+
+@misc{ Vue,
+    title = "Vue",
+    url = {https://vuejs.org/},
+    howpublished = {\url{https://vuejs.org/}},
+    note = "[Internet; descargado 4-julio-2024]",
+}
+
+@misc{ mdn-docs:dom,
+    author = "Mozilla",
+    title = "DOM (Document Object Model) -- mdn web docs",
+    url = {https://developer.mozilla.org/es/docs/Glossary/DOM},
+    howpublished = {\url{https://developer.mozilla.org/es/docs/Glossary/DOM}},
+    note = "[Internet; descargado 4-julio-2024]",
+}
+
+@misc{ bundler,
+    author = "Sayan Mondal",
+    title = "The What, Why and How of JavaScript bundlers",
+    url = {https://dev.to/sayanide/the-what-why-and-how-of-javascript-bundlers-4po9},
+    howpublished = {\url{https://dev.to/sayanide/the-what-why-and-how-of-javascript-bundlers-4po9}},
+    note = "[Internet; descargado 4-julio-2024]",
+}
+
+@misc{ transpiler,
+    author = "Chidume Nmandi",
+    title = "Transpilers: How They Work and How To Build Your Own JS Transpiler",
+    url = {https://daily.dev/es/blog/transpilers-how-they-work},
+    howpublished = {\url{https://daily.dev/es/blog/transpilers-how-they-work}},
+    note = "[Internet; descargado 4-julio-2024]",
+}
+
+@misc{ continuous-integration,
+    author = "GitLab",
+    title = "What is continuous integration (CI)?",
+    url = {https://about.gitlab.com/topics/ci-cd/benefits-continuous-integration/},
+    howpublished = {\url{https://about.gitlab.com/topics/ci-cd/benefits-continuous-integration/}},
+    note = "[Internet; descargado 4-julio-2024]",
+}
+
+@misc{ linter,
+    author = "Trunk",
+    title = "What is a Linter and Why Should You Use One?",
+    url = {https://trunk.io/learn/what-is-a-linter-and-why-should-you-use-one},
+    howpublished = {\url{https://trunk.io/learn/what-is-a-linter-and-why-should-you-use-one}},
+    note = "[Internet; descargado 4-julio-2024]",
+}
+
+@misc{ ui-ux,
+    author = "Best Products Finds",
+    title = "What is the difference between a UI/UX designer and a web developer?",
+    url = {https://medium.com/@bestproductfinds/what-is-the-difference-between-a-ui-ux-designer-and-a-web-developer-e14a4fde49de},
+    howpublished = {\url{https://medium.com/@bestproductfinds/what-is-the-difference-between-a-ui-ux-designer-and-a-web-developer-e14a4fde49de}},
+    note = "[Internet; descargado 4-julio-2024]",
+}
+
+@misc{ continuous-deployment,
+    author = "IBM",
+    title = "What is continuous deployment?",
+    url = {https://www.ibm.com/topics/continuous-deployment#:~:text=Continuous%20deployment%20is%20a%20strategy,directly%20to%20the%20software's%20users.v},
+    howpublished = {\url{https://www.ibm.com/topics/continuous-deployment#:~:text=Continuous%20deployment%20is%20a%20strategy,directly%20to%20the%20software's%20users.}},
+    note = "[Internet; descargado 4-julio-2024]",
+}
+
+@misc{ unit-test,
+    author = "Wikipedia",
+    title = "Prueba unitaria ---  Wikipedia{,} La enciclopedia libre",
+    url = {https://es.wikipedia.org/wiki/Prueba_unitaria},
+    howpublished = {\url{https://es.wikipedia.org/wiki/Prueba_unitaria}},
+    note = "[Internet; descargado 4-julio-2024]",
+}
+
+@misc{ e2e-test,
+    author = "Stan Georgian",
+    title = "What is End-to-End Testing and When Should You Use It?",
+    url = {https://www.freecodecamp.org/news/end-to-end-testing-tutorial/},
+    howpublished = {\url{https://www.freecodecamp.org/news/end-to-end-testing-tutorial/}},
+    note = "[Internet; descargado 4-julio-2024]",
+}
+
+@misc{ biome,
+    author = "Biome",
+    title = "Biome",
+    url = {https://biomejs.dev/},
+    howpublished = {\url{https://biomejs.dev/}},
+    note = "[Internet; descargado 4-julio-2024]",
+    note = "[Internet; descargado 4-julio-2024]"
+}
+
+@misc{ playwright,    
+    author = "Playwright",
+    title = "Playwright",
+    url = {https://playwright.dev/},
+    howpublished = {\url{https://playwright.dev/}},
+    note = "[Internet; descargado 4-julio-2024]"
+}
+
+@misc{ lefthook,
+    author = "EvilMartians",
+    title = "Lefthook",
+    url = {https://github.com/evilmartians/lefthook},
+    howpublished = {\url{https://github.com/evilmartians/lefthook}},
+    note = "[Internet; descargado 4-julio-2024]"
+}
 
-@misc{ wiki:latex,
-       author = "Wikipedia",
-       title = "LaTeX --- Wikipedia{,} La enciclopedia libre",
-       year = "2015",
-       howpublished = {\url{https://es.wikipedia.org/w/index.php?title=LaTeX&oldid=84209252}},
-       note = "[Internet; descargado 30-septiembre-2015]"
+@misc{ github-actions,
+    author = "GitHub",
+    title = "GitHub Actions -- Documentation",
+    url = {https://docs.github.com/en/actions},
+    howpublished = {\url{https://docs.github.com/en/actions}},
+    note = "[Internet; descargado 4-julio-2024]"
+}
+
+@misc{ mdn-docs:spa,
+    author = "Mozilla",
+    title = "SPA (Single-page application) -- mdn web docs",
+    url = {https://developer.mozilla.org/en-US/docs/Glossary/SPA},
+    howpublished = {\url{https://developer.mozilla.org/en-US/docs/Glossary/SPA}},
+    note = "[Internet; descargado 4-julio-2024]"
 }
 
+@misc{ mdn-docs:frameworks-tooling,
+    author = "Mozilla",
+    title = "Learn web development - Frameworks and tooling -- mdn web docs",
+    url = {https://developer.mozilla.org/en-US/docs/Learn#frameworks_and_tooling},
+    howpublished = {\url{https://developer.mozilla.org/en-US/docs/Learn#frameworks_and_tooling}},
+    note = "[Internet; descargado 4-julio-2024]"
+}
 
-@article{bortolot2005,
-  title={Estimating forest biomass using small footprint LiDAR data: An individual tree-based approach that incorporates training data},
-  author={Bortolot, Zachary J and Wynne, Randolph H},
-  journal={ISPRS Journal of Photogrammetry and Remote Sensing},
-  volume={59},
-  number={6},
-  pages={342--360},
-  year={2005},
-  publisher={Elsevier}
+@article{ journals/tods/Chen76,
+    added-at = {2018-11-14T00:00:00.000+0100},
+    author = {Chen, Peter P.},
+    biburl = {https://www.bibsonomy.org/bibtex/2cd8749f680b614cd79222c6a82f86a5d/dblp},
+    cdrom = {TODS1/P009.PDF},
+    cite = {...},
+    ee = {https://www.wikidata.org/entity/Q54151498},
+    interhash = {f20480f63b47b33be2bd21e93c4e7b99},
+    intrahash = {cd8749f680b614cd79222c6a82f86a5d},
+    journal = {ACM Trans. Database Syst.},
+    keywords = {dblp},
+    number = 1,
+    pages = {9-36},
+    timestamp = {2018-11-15T12:10:28.000+0100},
+    title = {The Entity-Relationship Model - Toward a Unified View of Data.},
+    url = {http://dblp.uni-trier.de/db/journals/tods/tods1.html#Chen76},
+    volume = 1,
+    year = 1976
 }
 
+@misc{ maxgraph,
+    author = "maxGraph",
+    title = "maxGraph",
+    url = {https://github.com/maxGraph/maxGraphv},
+    howpublished = {\url{https://github.com/maxGraph/maxGraph}},
+    note = "[Internet; descargado 7-julio-2024]"
+}