Contenido
GoUML es un sitio web para UML que soporta creación de clases, herencia y dependencias, donde se puede trabajar tanto en Canvas como en SVG, sitio que fue desarrollado con ReactJS
- ReactJS
- JS
- CSS
- HTML
Una vez descargado, se puede ejecutar en la dirección del proyecto:
Para instalar todos los paquetes necesarios:
Para iniciar el proyecto:
Ejecuta la aplicación en el modo de desarrollo. Abra http://localhost:3000 para verlo en su navegador.
Tanto para canvas como para SVG
- Crear clases.
- Relación de herencia.
- Relación de dependencia.
- Guardar en localStorage.
- Eliminar de localStorage.
- Limpiar pantalla eliminando todas las clases en una sola acción.
Tanto para canvas como para SVG
- Gestionar los modelos.
- Responsive.
- Lineas de relaciones con mejor estética.
- Editar y eliminar clases.
- Editar y eliminar relaciones entre clases.
Este fichero app.js ya viene incluido con React, es el que renderiza en el index.js, es decir, es el que muestra en la vista cuando lo levantamos. Este componente es base para para continua con el proyecto , ya que en el podremos configurar las rutas internas para la nevegación.
En este componente definimos los tipos de relaciones que tiene cada clase: dependencia, herencia o en algún caso ninguno.
El fichero definimos los estilos de forma global, es decir, de toda la app en general.
Este archivo es para trabajar la parte matemática o lógica, en este caso tenemos el fichero Calculator.js.
El fichero Calculator.js, es el que realiza los calculos de tamaño de la clase (según el tamaño del nombre y las cantidades de atributos o métodos), separadores de linea, genera los IDs de cada clase,etc.
Ete archivo es para la visualización del usuario dentro de la pizarra de la app. Nuestro directorio de archivos es de la siguiente manera:
El fichero es para las funcionalidades del inicio de la app, es decir, direcciona los botones, ya sea la ventana de svg o canvas.
El fichero es para la creación y visualización de nuevas clases, con su respectivo datos como: nombre, atributo, método, tipo de relación, etc., es decir, las graficaciones con canvas.
El fichero es para la creación y visualización de nuevas clases, con su respectivo datos como: nombre, atributo, método, tipo de relación, etc., es decir, las graficaciones con svg.
Un componente es un archivo js que se usa para construir interfaces de usuario de manera rápida y eficiente. Es la parte lógica que controla un trozo de pantalla como por ejemplo el nav, el footer, un article, un section, etc. Nuestro directorio de archivos se ve de la siguiente manera:
Los hooks son funciones que te permiten "enganchar" el estado de React y el ciclo de vida desde los componentes de función. Nuestro directorio de archivos se ve de la siguiente manera:
El fichero es para definir el estado del modelo, open o close.
El fichero es para definir los estados de cada clase, con sus respectivos datos, también guarda todas las clases en un map y en el localstorage.
Este fichero es para el manejo de eventos que realizamos en la app. Nuestro directorio de archivos se ve de la siguiente manera:
Es para las funcionalidades del manejo de mouse, a la hora de relacionar dos clases dentro de la pizarra, tanto svg como canvas.
Abra https://umlcanvassvg.herokuapp.com/ para probar la aplicación.
Abra https://github.com/IsmaDavidAA/onlineUML#readme para descargar el codigo fuente y ver mas detalles.