Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

TFG ETHAN IVAN Y JACOB - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 17 de mayo de 2026 por Ethan B.

11 visualizaciones

Más información Transcripción

Descargar la transcripción

Buenas, somos Izan, Jacob e Iván y os vamos a presentar nuestro trabajo de fin de grado, 00:00:00
Revive. Revive es una forma de no solo organizar los eventos y fiestas, sino vivirlos de una 00:00:07
forma distinta, en la que se juntan varias funcionalidades como serían la creación 00:00:15
y organización del evento en sí, un álbum de fotos que se mantendrá privado hasta que 00:00:20
se termine el evento y una forma de repartir los gastos de la forma más óptima posible. 00:00:26
Todo esto en una sola aplicación. 00:00:32
El problema que queríamos resolver es que cuando alguien quiere crear un plan o tener 00:00:37
un plan con sus amigos, ese plan se distribuye entre muchas otras aplicaciones como es la 00:00:43
organización en un grupo de WhatsApp, los gastos en notas o en tickets sueltos por ahí 00:00:49
Y además de toda esa organización, tenerla en una misma app, meterle una funcionalidad única que es tener un álbum de fotos en el que todo el mundo puede subir fotos, se juntan todas ahí y al final del evento las puedes publicar en una feed. 00:00:57
En cuanto a objetivos técnicos, queríamos aplicar lo que hemos aprendido en el ciclo en una aplicación real 00:01:15
Hemos hecho el frontend con Flutter para poder juntar tanto iOS como Android 00:01:22
Y hemos hecho un backend con Spring Boot 00:01:26
También hemos hecho acceso a datos, hemos tocado los siguientes módulos que serían programación, base de datos, desarrollo de interfaces, programación de servicios y procesos, programación de multimedia y dispositivos móviles y acceso a datos 00:01:28
El backend está desarrollado con Java 25 y Spring Boot 3.5 00:01:41
está hecho en una arquitectura por capas, una capa de interacción con usuario en la que estarían los controles REST 00:01:46
una capa de dominio donde se definirían todas las entidades de las bases de datos y la lógica de negocio 00:01:57
y una capa de repositorio donde sería en sí el acceso a datos de la aplicación 00:02:04
Para la seguridad utilizamos JWT que es Java Web Token con dos tokens en concreto 00:02:11
Sería un token de acceso que tendría una caducidad de 15 minutos 00:02:20
Y un refresh token que serviría para poder refrescar este token y seguir teniendo acceso que duraría 30 días 00:02:25
Para el almacenamiento de token utilizamos Redis, Remote, Directionary y Server 00:02:31
abierto se puede utilizar de forma gratuita que utiliza el sistema clave 00:02:41
valor también hay que decir que los datos de 00:02:47
esta base de datos se almacenan en memoria ram en caché lo que hace que 00:02:51
prácticamente la latencia se anula siendo capaz de soportar hasta un 00:02:56
milisegundo de latencia las contraseñas se jasean con argon 2 id 00:03:00
que es uno de los sistemas más robustos en la actualidad y para las bases de 00:03:05
datos hemos utilizado tres en concreto. La primera sería Redis, como ya os he comentado. 00:03:11
La segunda sería PostgreSQL, que es una base de datos relacional, muy parecida a MayaSQL, 00:03:17
pero con un poco más de libertad a la hora de hacer restricciones e índices. Toda esta 00:03:22
base de datos se utiliza para la parte de usuarios y eventos. ¿Por qué es importante 00:03:30
de utilizar una base de datos relacional, la escritura de datos es muchísimo más rápido 00:03:38
en base de datos relacionales que en los relacionales. Luego el acceso a datos es bastante más lento 00:03:42
ya que haría falta joins complejos y consultas muy largas y muy costosas de hacer. Para poder 00:03:49
solucionar esta problemática hemos utilizado Neo4j que es una base de datos no relacional 00:03:57
basada en grafos donde se almacenarían tanto los nodos que serían las entidades en sí como las filas de MySQL y las relaciones entre ellas. 00:04:02
Nosotros simplemente tenemos usuarios eventos, un usuario puede participar en un evento y un usuario puede ser amigo de otro usuario. 00:04:12
De esta forma la feed automática sería muchísimo más rápida y el buscar usuarios también lo sería. 00:04:23
El frontend está hecho con Flutter, que nos permite tener una sola base de código para tener la aplicación tanto en Android como en iOS. 00:04:33
Seguiríamos la CleanArchitecture de Block, que es como básicamente el ViewModel que hemos aprendido en Kotlin en clase, 00:04:40
pues para Dart, que es el lenguaje de programación que hemos utilizado, y para las aplicaciones HTTP utilizaríamos Dio, 00:04:46
que es lo que se encarga de hacer las llamadas al backend. 00:04:53
También utilizamos interceptores JWT, que es la seguridad que utilizamos en el backend, 00:04:55
y con eso comprimiríamos tanto backend como frontend. 00:05:00
Sincronizamos los tokens tanto de backend como de frontend y estos se renuevan automáticamente y se expiran también. 00:05:03
El chat funciona con WebSocket, que utiliza un protocolo STOM sobre WebSocket. 00:05:11
¿Esto qué es? ¿Por qué no utilizamos peticiones HTTP? 00:05:17
Las peticiones HTTP utilizan una conexión momentánea, es decir, el usuario pide algo y lo recibe. 00:05:21
En cambio WebSocket, lo que es, es un canal que se abre, en nuestro caso, cuando creamos un evento. 00:05:32
Al crear el evento se abre este canal en el que los usuarios tienen una conexión continua entre ellos. 00:05:40
Esto sirve para poder enviar mensajes, enviar y recibir mensajes todo el rato. 00:05:46
Y en nuestro caso, los mensajes dejan de poder enviarse, o sea, ese canal se cierra cuando el evento termina, se suben las fotos a la feed y el chat desaparece hasta que crees otro evento. 00:05:49
Los mensajes van cifrados cuando entras al chat de un evento por primera vez. 00:06:03
El cliente descifra la clave AES con su propia clave privada del dispositivo. 00:06:07
esta clave nunca sale del dispositivo 00:06:13
y esto lo que le permite al usuario es 00:06:17
tener seguridad sobre la filtración 00:06:19
de los datos 00:06:21
solo en su dispositivo tiene esa clave 00:06:21
y por tanto 00:06:25
solo él es capaz de ver esos mensajes 00:06:26
el servidor lo único que hace 00:06:29
es manejar 00:06:32
el enrutamiento 00:06:34
no es capaz de ver el contenido 00:06:35
que hay en esos mensajes 00:06:38
para el despliegue utilizamos RayWin 00:06:40
Railway nos da un entorno real de producción en el que desplegar la aplicación 00:06:42
Accesible a internet 00:06:48
En este lo que podemos hacer es 00:06:50
Gracias a la conexión que tenemos con GitHub 00:06:53
Desplegar directamente el repositorio que tenemos 00:06:57
Podemos comprobar los logs 00:06:59
Aquí como os mostramos podemos ver que falla de la aplicación 00:07:02
Que está ocurriendo en todo momento y como solucionarlo 00:07:07
Lo que también podemos hacer es, en la pestaña de variables, con un .env que hemos creado con todas las variables de entorno que no tienen que ser visibles, las metes aquí y Railway gestiona esas variables para que no se rompa el código de GitHub. 00:07:09
Por último, lo que también puedes hacer es ver todas las métricas o todo lo que consume nuestra aplicación para que podamos ver si necesitamos optimizarla más o menos, los errores que podemos tener, el tiempo de respuesta y cómo podemos solucionarlos. 00:07:25
En local lo que hicimos nosotros fue levantar todos los servicios que os he comentado antes, que son PostgreSQL, Neo4j, Redis y Cloudflare. 00:07:44
En el caso de Cloudflare desplegamos Minio para probarlo y a nivel producción utilizamos ya Cloudflare. 00:07:58
ya Cloudflare. Utilizamos un Docker Compose con un Docker File para poder desplegar en 00:08:06
Docker la aplicación en local para poder probar cada uno sin tener que estar pagando 00:08:12
en Railway. ¿Qué pasa? Que para unificar una base de datos y que hiciésemos pruebas 00:08:19
y que sepamos que está funcionando en varios dispositivos a la vez, lo que hicimos es unificar 00:08:27
una base de datos utilizando el servicio de AVEN con PostgreSQL y el servicio de Neo4j 00:08:33
Aura. Estas dos son igual que los servicios en local, lo que pasa que en la nube esto 00:08:40
nos da unos usuarios y unas contraseñas que las ponemos en las variables de entorno y 00:08:46
utilizamos los tres usuarios para poder hacer comprobaciones. 00:08:51
El mayor reto técnico que encontramos al principio fue todo el tema de la autenticación, 00:08:55
ya que al principio es todo muy engorroso y todo una montaña enorme el tema de la seguridad con JWT 00:09:00
tanto la creación de los tokens en el backend como la sincronización con el front 00:09:09
al tener que enviarlos en cada cabecera o en cada body de las llamadas HTTP 00:09:15
gestionar la blacklist con Redis también fue un reto 00:09:21
y asegurarnos que JWT Outfilter interceptaba correctamente todas las peticiones. 00:09:26
Como ya he comentado antes, toda la sincronización del front y el back fue un tema súper complicado 00:09:33
ya que no encontrábamos la forma de coordinar las respuestas de las llamadas del cliente 00:09:39
o cuáles eran lo que requería una petición. 00:09:48
Todo este problema lo solucionamos con Swagger 00:09:51
Haciendo una documentación de la API en Java 00:09:54
Para que así nuestro compañero Iván 00:09:59
Que fue el que se encargó de todo el tema del front de la aplicación 00:10:02
Tuviese en todo momento claro que es lo que iba a recibir 00:10:06
Y que es lo que tenía que mandar para que todo funcionase correctamente 00:10:10
En mi caso el problema que tuve fue WebSocket y Firebase 00:10:13
en WebSocket tenía el problema de que era una tecnología nueva 00:10:20
y que no conocíamos de antes, pero que queríamos utilizar para darle servicio 00:10:25
un buen servicio al usuario, entonces fue el problema de encontrarse 00:10:29
con algo nuevo que no habíamos dado antes, tener que aprenderlos para poder 00:10:33
darle ese servicio bueno, y las notificaciones 00:10:37
básicamente más de lo mismo, Firebase te da muchas facilidades 00:10:40
pero igualmente tienes que meterte a aprender algo nuevo 00:10:45
para poder darle algo bueno al usuario 00:10:49
En mi caso también el mayor principal fue el desconocimiento 00:10:52
y el tener que aprender algo nuevo desde cero 00:10:57
porque el tema del frontend como he dicho lo hemos decidido desarrollar con Dart 00:10:59
que es un lenguaje de programación completamente nuevo 00:11:04
porque queríamos que en todo momento la aplicación pudiera ser desplegada 00:11:07
tanto para Android como para iPhone 00:11:10
entonces esto fue un reto desde el principio 00:11:11
porque sobre todo al inicio tenía que aprender cómo funcionaba Flutter, todo el tema de CleanCode y de absolutamente todo 00:11:14
y creo que ese ha sido el mayor problema con el que yo me he tenido que encontrar. 00:11:23
Y ahora vamos a ver cómo se vería la aplicación en un móvil, en este caso en un emulador. 00:11:26
Vamos a demostrar que cuando inicias sesión, si no te has registrado, pues no podrías hacerlo. 00:11:30
Y vamos a hacer la lógica de registrarse en el cual al usuario le piden un nombre, un correo electrónico, una contraseña 00:11:35
y un confirmar contraseña, la contraseña tendría que ser de 8 caracteres mínimo 00:11:42
y tendría que coincidir evidentemente con el confirmar contraseña 00:11:47
y el email, hemos creado un email de prueba 00:11:49
el usuario introduciría su email personal y le llegaría un código de verificación 00:11:52
y en el momento en el que el código de verificación se introdujera en esta pantalla 00:11:58
pues se activaría la cuenta y podría iniciar sesión 00:12:02
vamos a recibir aquí el código y lo vamos a introducir en la aplicación 00:12:04
y con esto lo que conseguiríamos sería activar la cuenta 00:12:10
si no se introdujera este código no se podría activar la cuenta 00:12:19
y no podrías iniciar sesión, prueba TFG 00:12:23
y vamos a introducir la contraseña 00:12:25
y esto sería lo primero que encontraría el usuario nada más iniciar la sesión 00:12:28
esto sería lo que se encontraría el usuario al iniciar sesión por primera vez 00:12:32
al no tener ningún amigo todavía añadido 00:12:36
pues la aplicación palabra no tendría mucho sentido 00:12:39
pero encontraríamos un apartado de álbumes 00:12:41
Un apartado de eventos, tanto participando como para descubrir los de tus próximos amigos 00:12:44
Un apartado social, en el cual vamos a agregarnos a la cuenta de Ethan para demostrar cómo funciona la aplicación 00:12:48
Pero también podrías ver tus amigos, invitaciones a eventos y solicitudes enviadas 00:12:56
Y un apartado del perfil, con el cual iremos próximamente, pero que este sería la primera visualización 00:12:59
Vamos a agregar ahora en buscar personas, vamos a buscar a Ethan 00:13:04
Que al estar ya registrado, simplemente lo que haríamos sería enviarle una solicitud de amistad 00:13:08
Y ahora al entrar en la cuenta de Ethan agregaríamos a esta cuenta y pasaríamos con todo el tema de los eventos y de toda esta lógica. 00:13:12
Ahora estaríamos en la cuenta de Ethan, este álbum por ahora lo vamos a ignorar, lo que queremos enseñar es que te llegaría un 1 en el apartado social y te saltaría una solicitud de amistad pendiente en la cual te aguardaría el perfil de prueba TFG y podrías tanto aceptarle como rechazarle. 00:13:20
en este caso vamos a aceptarle y vamos a crear un evento de prueba 00:13:32
aquí y vamos a ponerlo 00:13:36
tanto un nombre, puedes añadirle una descripción y una ubicación 00:13:40
para que los usuarios puedan saber dónde se van a hacer los planes 00:13:43
y puedan decidir a qué planes les puede interesar más unirse o no 00:13:47
en el apartado de visibilidad se puede poner tanto público como privado 00:13:50
como solo para amigos, en este caso lo vamos a poner solo para amigos 00:13:54
para que la cuenta que acabamos de crear 00:13:57
se pueda unir al plan y podamos enseñar toda la lógica social que tiene nuestra aplicación 00:14:01
tienes para elegir la hora a la que inicia el evento y la hora a la que finaliza 00:14:07
y entonces simplemente vamos a crear el plan y ahora vamos a unirnos desde la otra cuenta 00:14:11
que sería la de prueba.tfg y vamos a pasar con el tema del evento 00:14:16
vamos a crear el plan y vamos a enseñar cómo aparecería la pantalla del plan 00:14:20
una vez la creas siendo tú el administrador 00:14:24
esto es lo que se encontraría el organizador del evento una vez creado 00:14:27
encontraría una primera card con la posibilidad de editar y eliminar el evento 00:14:30
un apartado de gente en la cual por ahora solo estaríamos nosotros 00:14:33
porque todavía no nos hemos unido desde la otra cuenta 00:14:36
un apartado de un chat en el cual podríamos enviar mensajes 00:14:38
un apartado del álbum que ya estaría desbloqueado porque ya habría iniciado la aplicación 00:14:42
y un apartado de gastos en el cual en un futuro enseñaremos 00:14:46
cuando sea una prueba TFG cómo funcionaría 00:14:50
bueno y ahora acabaríamos de iniciar sesión otra vez en prueba TFG 00:14:53
entonces en el apartado de eventos no saldría nadie participando 00:14:56
pero al entrar en descubrir aparecerá la prueba que acaba de crear Ethan desde la cuenta de Ethan 00:14:59
y saldrá la posibilidad de unirnos al evento ya que somos amigos de Ethan. 00:15:03
Podríamos ver que ahora se movería participando una vez actualizado 00:15:08
y en el apartado de gente ya apareceríamos nosotros también con Ethan con una estrellita 00:15:11
ya que es el organizador del chat, digo del evento perdón, y cuando haya muchos usuarios está bien saber quién es el que lo organiza. 00:15:16
El apartado chat en el cual podemos enviar mensajes y simplemente pues se enviaría, aquí lo vamos a ver, 00:15:22
Y el apartado de álbum en el cual podremos subir una foto 00:15:29
Vamos a subirlo desde la galería ya que al estar en un emulador no funciona la cámara 00:15:33
Pero también existe la posibilidad de subir fotos desde la cámara 00:15:38
Aquí se estarían subiendo las fotos 00:15:44
Estas fotos, Izan no podría verlas hasta que finalizara el evento 00:15:45
En el momento en el que se desbloquearían todas las fotos 00:15:50
Y podría verlas 00:15:52
También vamos a crear un gasto, en este caso de 15€ 00:15:54
Es una lógica muy básica, simplemente puedes elegir si es un reparto equitativo o personalizado, depende de quien quiera pagar más, pero al crear el gasto simplemente se dividiría en este caso entre dos y se generaría un resumen diciendo que prueba TFG le debería 7,50€ a ISAN ya que se han pagado 15€ por parte de ISAN y al dividirlo entre dos, una lógica bastante básica. 00:15:58
Aquí cabe decir que en este ejemplo es una prueba bastante sencilla, como ha dicho Iván. El tema sería que con muchos más participantes y gastos más complejos, en los que solo tienen que unos pagar a alguien, reduciría mucho el tiempo en repartir estos gastos y estas deudas. 00:16:19
No vamos a hacerlo aquí por falta de tiempo en el vídeo, pero es una herramienta bastante útil y que se aprecia que esté aquí. 00:16:39
Ahora desde la cuenta de Ethan vamos a subir una foto para demostrar que a nosotros no nos aparecerían las fotos que ha subido Prueba TFG hasta finalizar el evento 00:16:47
Una vez finalizado el evento te saldría la posibilidad de compartir las fotos solamente con los participantes o en el feed 00:16:56
En este caso vamos a elegir el feed ya que podríamos enseñar más lógica de la app 00:17:03
Puedes elegir una portada, vamos a elegir una cualquiera y ahora veremos que puedes cambiarla 00:17:08
También existe la posibilidad de descargarse las fotos y llevarlas a la galería con este botoncito de aquí 00:17:12
Entonces ahora al entrar en la galería, ahí aparecería de nuevo esta nueva foto que se acaba de descargar nuevamente 00:17:19
También vamos a entrar en el apartado de feed de álbumes para enseñar cómo estaría ahora mismo la portada 00:17:25
Y cómo al cambiarla se actualizaría 00:17:33
Ahora mismo estaría la cascada 00:17:35
estaría la cascada y cuando vayamos al evento y al álbum 00:17:37
podríamos efectivamente desde este botoncito de aquí 00:17:41
cambiar la portada a la cascada ya estaba 00:17:45
entonces vamos a poner cualquier otra, las flores mismamente 00:17:47
y entrar otra vez al feed de álbumes 00:17:51
y vamos a ver cómo se habrían puesto las flores 00:17:55
también existiría la posibilidad de eliminar una foto subida 00:17:57
si en el momento te arrepientes o no has querido subirla 00:18:01
Entonces simplemente desaparecería la foto y ya nos aparecería en el álbum y nos aparecerían las fotos tanto de Izan como de Prueba TFG como hemos podido contemplar. 00:18:03
Vamos a ir ahora al apartado de perfil en el cual aquí teníamos nuestro perfil con el álbum que hemos subido, que teníamos la posibilidad de borrarlo del perfil si quisiéramos y también teníamos la posibilidad de editar el perfil para añadirle los datos que tú desees. 00:18:12
puedes cambiar la foto que tienes puesta y añadirle una foto cualquiera 00:18:27
un nombre y puedes quitarle lo de prueba 00:18:31
para demostrar que se puede crear el perfil como tú quieras 00:18:33
que se quede, en caso de que hayas escrito algo por error o lo que sea 00:18:36
pues aquí simplemente se quedaría actualizado 00:18:39
también tenemos una portada de ajustes con las siguientes posibilidades 00:18:41
vamos a enseñar que en seguridad y contraseña tendrías para cambiar la contraseña 00:18:44
actualizar el email o eliminar la cuenta que no es algo que vayamos a hacer 00:18:48
ahora mismo porque es la cuenta de Izan 00:18:51
puedes ver los dispositivos desde los que has entrado en la cuenta 00:18:53
este es de uno de hace una hora, que sería el móvil de Ethan, y este sería el que estamos usando ahora mismo. 00:18:56
Tienen la posibilidad de poner el perfil tanto en público como en privado, simplemente al pulsar ahí se cambiaría, 00:19:02
y también puedes cerrar sesión y eliminar la cuenta desde aquí para que sea más intuitivo para el usuario. 00:19:09
Ahora os vamos a hablar de las conclusiones de cada una a raíz de haber hecho este proyecto. 00:19:14
y bueno, en mi opinión personal lo que más me ha gustado es la capacidad de haber desarrollado un proyecto tan grande como es este 00:19:20
no habíamos hecho algo de esta magnitud hasta ahora y luego toda la parte de producción 00:19:29
nosotros habíamos trabajado en el proceso anterior que es todo el proceso de desarrollo y tal 00:19:35
pero ponerse en la situación real de despliegue de una aplicación, variables de entorno 00:19:42
tener cuidado con qué es lo que se sube al GitHub, que no hardcodear claves o keys 00:19:49
y el poder tener una aplicación con un backend corriendo en la nube 00:19:56
y poder tenerla desde el dispositivo y compartirla con amigos y compañeros. 00:20:02
En mi caso, a mí, lo que me llevo de este proyecto es poder haber trabajado con un equipo real, 00:20:10
poder haber trabajado con ellos dos, el hecho de haber tenido que aprender tantas cosas nuevas, 00:20:18
tener unos estándares a nuestro parecer altos y que todo fluya de manera adecuada. 00:20:27
El hecho también de eso, poder, como ha dicho Jason, tener un trabajo de esta magnitud que no nos habíamos encontrado antes, 00:20:40
y la resolución 00:20:48
de problemas es lo que me llevo 00:20:51
la capacidad que tenemos cada uno de resolver 00:20:52
los problemas a nuestra manera 00:20:55
y hacerlo 00:20:56
de manera, o sea, en tiempo 00:20:58
En mi caso 00:21:00
lo más principal sería 00:21:04
evidentemente el reto de programar 00:21:06
el frontend desde un lenguaje nuevo como es Dart 00:21:08
porque al inicio es algo que evidentemente supone muchos problemas 00:21:10
al no saber cómo funciona 00:21:12
cómo estructurar el código 00:21:14
y una larga lista, etc. 00:21:16
Y más allá de eso me quedo con haber aprendido mucho acerca de GitHub, sobre las ramas, la develop, la main, el pull request y haber aprendido de esta metodología. 00:21:17
También he aprendido mucho acerca de la metodología Scrum y cómo se distribuye el trabajo, todo el tema de las tareas, del desarrollo, el lista para testear, todo el tema de los sprints. 00:21:28
y creo que es con lo que me quedaría 00:21:40
que es con haber aprendido cómo gestionar 00:21:43
de forma profesional este tipo de trabajos 00:21:45
Bueno, pues nada 00:21:47
este ha sido nuestro TFG 00:21:49
espero que os haya gustado tanto corregirlo 00:21:51
como a nosotros hacerlo 00:21:53
y nada, ha sido un proyecto enorme 00:21:55
y súper enriquecedor para nosotros 00:21:57
con esto nos podemos despedir 00:21:58
¡Te busco un bote! 00:22:01
¡Muchas gracias! 00:22:02
Idioma/s:
es
Materias:
Programación
Niveles educativos:
▼ Mostrar / ocultar niveles
  • Formación Profesional
    • Ciclo formativo de grado básico
      • Primer Curso
      • Segundo Curso
    • Ciclo formativo de grado medio
      • Primer Curso
      • Segundo Curso
    • Ciclo formativo de grado superior
      • Primer Curso
      • Segundo Curso
Autor/es:
Ethan Betancor Fuente
Subido por:
Ethan B.
Moderado por el profesor:
Lucia San Miguel López (lucia.sanmiguel)
Licencia:
Dominio público
Visualizaciones:
11
Fecha:
17 de mayo de 2026 - 21:03
Visibilidad:
Público
Centro:
IES FRANCISCO DE QUEVEDO
Duración:
22′ 05″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
1.60

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid