Grupo Mondongo A3

Gonzalo Alganza Luque

Alberto Gentil Guerrero
Pablo Blanco López
Luis Maria Chaves Lopez
Francesco Mirra

Seminario 2

Como pedía la práctica, hemos recopilado las asignaturas en las

que hemos usado alguno de los conceptos mencionados en el
seminario, según las guías docentes de estas, así como añadido
algunas de las asignaturas de este año.

Tabla de asignaturas y sus conceptos

Asignaturas Conceptos

Fundamentos de programación C++

Metodología de la programación C++

Estructura de datos C++

Programación y diseño orientado a objetos Java, Ruby

Sistemas concurrentes y distribuidos C, C++

Algorítmica C, C++

Arquitectura de computadores C, C++

Inteligencia artificial C

Informática Gráfica C

Modelos de computación C, C++, Java

Fundamentos de redes HTTP(s)

Sistemas gráficos HTML, JavaScript

Desarrollo del software Java, Business Logic, Python

BACK-END

Primero, creo un proyecto aparte para el back-end con las siguientes

dependencias:
​ express cors mysql2 sequelize
​
Tendría la siguiente estructura:

Dentro de la carpeta database estarán las bases de datos con las que
haremos conexión.
En models, importamos la conexión a la base de datos y DataTypes de
la biblioteca sequelize

En controllers, importamos el modelo creado anteriormente, aqui

estarán las operaciones de la base de datos.
En routes añadimos los métodos creados en controllers

Finalmente en app metemos todo para la conexión a la API mediante

express,
FRONT END: REACT

¿Qué es React?
React es una librería de JavaScript, creada para desarrollar interfaces de usuario.

¿Cómo lo instalamos ?
Hay muchas formas pero la más sencilla es:

npx create-react-app my-app

Con este simple comando nos crea una estructura con una aplicación con React.

Despues para poder iniciarla, ejecutamos el comando:

cd my-app
npm start

Como para el backend hemos necesitado instalar Node.js, en el ya nos instalamos npm.
NPM es el gestor de paquetes que viene por defecto al instalar Node.js.
Para poder realizar la ejecución del primer comando, hemos utilizado npx, el cual es el
ejecutador de paquetes de npm.

Una vez ejecutado (npx create-react-app reactfront), se nos queda una estructura:
Si ejecutamos en la línea de comandos:
npm-start (lo que hace es ejecutar el script de package.json)

Esta sería la interfaz actual.

¿Cómo creamos la interfaz de usuario?

Primero, para crear la interfaz de usuario crearemos la siguiente estructura:

Lo que hemos creado aquí son tres componentes principales:

- CreateUser.js : nos permite crear un usuario.

- EditUser.js : nos permite editar un usuario ya creado.
-ShowUser.js: nos muestra los usuarios creados
Para poder realizar la interfaz de usuario será necesario poder comunicarnos con el
backend.
Para ello usaremos axios (Una biblioteca para simplificar el proceso de envío de peticiones
a un servidor).
npm install axios react-router-dom

A continuación la implementación de las tres componentes:

CREATE USER
EDITUSER
SOWUSER
La aplicación con estas componentes es: