Copia - alaaa

SYNTHSPACE

aarón espí bernal tutor individual: xavier ibáñez catalá

ÍNDICE

01 · ¿Qué es Synthspace?

02 · ¿Cómo surge la idea?

03 · Competencia

04 · ¿Qué lo hace diferente?

05 · Selección de tecnologías

06 · Arquitectura

09 · Librerías externas

07 · Diseño de la base de datos

08 · Diseño de la interfaz

10 · Problemas

08 · Autenticación JWT

09 · Data Transfer Object

13 · Conclusiones

11 · Pruebas

12 · Mejoras a futuro

SYNTHSPACE

¿QUÉ ES?

interfaz de síntesis

SECCIÓN DE COMUNIDAD

PERFILES PÚBLICOS

sINTETIZADOR DE AUDIO

Permite experimentar con diversos controles y parámetros para generar sonidos.

Permite a los usuarios explorar una amplia gama de presets subidos por otros miembros.

Los usuarios disponen de un perfil donde se muestran todos los presets que ha creado.

Permite a los usuarios crear y compartir nuevos sonidos de manera colaborativa.

LA IDEA

¿CÓMO SURGE?

PASIÓN POR LA MÚSICA

FUSIONAR INTERESES Y CONOCIMIENTOS

COMPETENCIA

¿QUÉ OTRAS OPCIONES HAY EN EL MERCADO?

Digital Audio Workstations

Plugins de audio

Plataformas de samples

Ableton, FL Studio

Splice, LoopCloud

Prophet 5-V, Jup-8 V

VENTAJAS

¡QUÉ HACE DIFERENTE A SYNTHSPACE?

COMUNIDADINTEGRADA

INTERFAZINTUITIVA

Para compartir y explorar presets de otros usuarios.

Para usuarios de todos los niveles de experiencia.

MANIPULACIÓN EN TIEMPO REAL

FÁCILACCESIBILIDAD

Manipulación en tiempo real de sintetizadores.

Sin necesidad de software adicional caro o complejo.

SELECCIÓN DE TECNOLOGÍAS

¿por qué estas tecnologías?

WEB AUDIO API

ARQUITECTURA

¿CUÁL ES LA ARQUITECTURA DE SYNTHSPACE?

DISEÑO DE LA BASE DE DATOS

¿CÓMO ESTÁ DISEÑADA LA BASE DE DATOS?

DISEÑO DE INTERFAZ

PANTALLA DELOGIN

• Permite a los usuarios registrados acceder a SynthSpace

• Facilita la autenticación con credenciales existentes

• Orienta a nuevos usuarios hacia la pantalla de registro

DISEÑO DE INTERFAZ

PANTALLA DEREGISTRO

• Simplifica el proceso de creación de cuentas para nuevos usuarios

• Recoge información esencial a través de un formulario

• Si hay datos inválidos, los campos erróneos se volverán de color rojo

DISEÑO DE INTERFAZ

PANTALLA COMUNITARIA

• Expone las creaciones de sonido de la comunidad para que los usuarios descubran nuevas configuraciones

• Ofrece herramientas de búsqueda para presets y usuarios para una navegación personalizada

DISEÑO DE INTERFAZ

PANTALLA DECREACIÓN

• Permite a los usuarios realizar creaciones musicales

• Equipado con un teclado virtual y controles para ajustar parámetros de sonido

• Los usuarios pueden elegir presets preexistentes, modificarlos o subir sus propias creaciones

• También existe la posiblidad de borrar presets que ya no queramo

DISEÑO DE INTERFAZ

PERFIL DE USUARIO

• Cada miembro de SynthSpace cuenta con su propio perfil

• Muestra información clave y la colección personal de presets

LIBRERÍAS EXTERNAS

¿QUÉ HACE CADA LIBRERÍA?

WEB AUDIO API

AUTENTICACIÓN JWT

¿CÓMO FUNCIONA LA AUTENTICACIÓN CON JWT?

validación del token

USO DEL TOKEN EN SOLICITUDES

generación del token

El cliente debe incluir el token JWT en las cabeceras de las solicitudes HTTP

El servidor al recibir una solicitud con JWT, verifica la validez del token

Al autenticarse, el servidor genera un token JWT

DATA TRANSFER OBJECT

¿QUÉ ES UN DTO?

DEFINICIÓN

PROPÓSITO

BENEFICIOS

Mejora la seguridad al no exponer las entidades, además de ofrecer una arquitectura limpia y desacoplada

Objeto para transferir datos entre distintas capas sin incluir lógica de negocio

Facilita la transferencia de datos encapsulando las propiedades necesarias

ProblemAs

¿qué problemas se han encontrado durante el desarrollo?

LLAMADAS A LA API REST

CÓDIGOS DE ESTADO 400

CLASES MUY EXTENSAS

ADAPTACIÓN DE LA INTERFAZ

Comunicación entre el backend y el frontend utilizando llamadas a la API

Diseñar interfaces funcionales acordes a las necesidades

Problemas de autenticación o permisos incorrectos

Clases extensas y complejas que han dificultado el entendimiento

PRUEBAS

¿CÓMO SE HA PROBADO LA APLICACIÓN?

PRUEBAS MANUALES

PRUEBAS UNITARIAS

Uso de Mockito y MockMVC

Asegurar funcionamiento correcto en condiciones de uso real

MEJORAS A FUTURO

¿qué implementaciones se añadirían a la aplicación en un futuro?

Microservicios

Trasladar la API

Seguridad rigurosa

Dividir la API Rest en microservicios

Trasladar la AP a un servicio de alojamiento en la nube

Implementar mejores prácticas de seguridad

MEJORAS A FUTURO

¿qué implementaciones se añadirían a la aplicación en un futuro?

Mejoras del sonido

Mejoras sociales

Funcionalidades UI

Añadir distintos sintetizadores y plugin VST para DAWs

Interacción entre usuarios más significativa

Pantallas de ajustes personalizables

CONCLUSIONES

CONCLUSIONES OBTENIDAS DEL PROYECTO

desarrollo completo

habilidades adquiridas

preparación profesional

experiencia enriquecedora

Creación de una aplicación desde cero

Competencias valiosas para el futuro profesional

Confianza y competencia para enfrentar desafíos futuros

Aplicación y expansión de conocimientos

Digital Audio Workstations

Características:

• Ofrecen un entorno completo para creación musical, incluyendo grabación, edición, mezcla y producción
• Integran funcionalidades avanzadas de manipulación de audio y MIDI

Limitaciones:

• Abrumadores para principiantes o para aquellos interesados solo en la síntesis

LOMBOK

• Minimiza y elimina código repetitivo
• Anotaciones que generan el código automáticamente
• Mejora la legibilidad y minimiza errores

Plugins de audio

Características:

• Emulan instrumentos virtuales y efectos
• Vienen con bibliotecas de presets y permiten incorporar nuevos creados por la comunidad.

Limitaciones:

• Requieren un software de producción musical más complejo y caro (formato VST)

JWT

JWT

• Proporciona una forma segura de transmitir información entre partes en formato JSON
• Asegura que los datos no puedan ser alterados sin detección

DISEÑO INTERFAZ

Tailwind CSS

• Diseño rápido y responsivo
• Clases de utilidad directamente en el HTML
• No infla el tamaño del proyecto como otros frameworks

STARTER VALIDATION

• Módulo de Spring Boot
• Permite anotar campos de clases con anotaciones
• Especifica reglas de validación que han de cumplirse

AUDIO

Web Audio API

• Para la generación y manipulación de audio en tiempo real
• Ofrece gran cantidad de posibilidades para la creación de audio, procesamiento de efectos y visualización del sonido en tiempo real

Plataformas de samples

Características:

• Operan en línea y como aplicaciones de escritorio
• Enfocadas en el uso de samples
• Secciones comunitarias y perfiles públicos para mostrar creaciones.

Limitaciones:

• No permiten la manipulación en tiempo real de audio de sintetizadores

GESTIÓN DE DATOS

MongoDB

• Flexibilidad como base de datos NoSQL
• Manejo de datos en formato de documento

FRAMEWORK APP DE ESCRITORIO

Electron

• Transformar el desarrollo web en una aplicación de escritorio
• No compromete la experiencia de usuario en distintos sistemas operativos
• Garantiza una experiencia fluida

BACKEND

Spring Boot, Spring Security

• Las dos fueron seleccionadas por su integración y por sus potentes capacidades de seguridad
• Garantizan que los datos de usuarios estén protegidos
• Garantizan que las operaciones sean seguras

LENGUAJE

Java

• Debido a su robustez
• Conocimientos previos del lenguaje
• Spring Boot y Spring Security están diseñados para aplicaciones Java

FRONTEND

HTML, CSS y JavaScript

• Flexibilidad
• Simplicidad
• Mayor facilidad de uso ante otros frameworks como Angular o React