EVALUACIÓN TÉCNICA BACKEND + FRONTEND – GESTIÓN DE PERSONAS Y PROYECTOS DE SOFTWARE

Asignatura: Programación y Plataformas Web
Tecnología Backend: Spring Boot | Java | Gradle (Kotlin DSL) | H2 | application.yml
Tecnología Frontend: Angular 18+ | TypeScript | Standalone Components

CONTEXTO

Sistema de gestión de portafolio de desarrolladores y sus proyectos de software. La aplicación permite gestionar información de personas (desarrolladores), sus enlaces de contacto (GitHub, LinkedIn, etc.) y los proyectos de software que han desarrollado. El sistema incluye funcionalidades para listar, filtrar y gestionar el estado activo/inactivo de las personas.

Modelo de relaciones:

• Una Person (Persona) tiene muchos ContactLink (Enlaces de contacto) → OneToMany
• Un ContactLink pertenece a una Person → ManyToOne
• Una Person tiene muchos Project (Proyectos) → OneToMany
• Un Project pertenece a una Person → ManyToOne
• Un Project tiene un ProjectLink (Enlace del proyecto) → OneToOne
• Un ProjectLink pertenece a un Project → OneToOne

PARTE 1: BACKEND – SPRING BOOT

1.1 Configuración de Base de Datos

1.1.1 Dependencias (build.gradle.kts)

dependencies {
    implementation("org.springframework.boot:spring-boot-starter-web")
    implementation("org.springframework.boot:spring-boot-starter-data-jpa")
    implementation("org.springframework.boot:spring-boot-starter-validation")
    
    runtimeOnly("com.h2database:h2")
    
    developmentOnly("org.springframework.boot:spring-boot-devtools")
    testImplementation("org.springframework.boot:spring-boot-starter-test")
}

1.1.2 Configuración (application.yml)

spring:
  datasource:
    url: jdbc:h2:mem:portfoliodb
    driver-class-name: org.h2.Driver
    username: sa
    password:

  jpa:
    database-platform: org.hibernate.dialect.H2Dialect
    hibernate:
      ddl-auto: none
    show-sql: true
    properties:
      hibernate:
        format_sql: true

  sql:
    init:
      mode: always
      schema-locations: classpath:schema.sql
      data-locations: classpath:data.sql

server:
  port: 8080

# CORS para permitir peticiones desde Angular (puerto 4200)
spring:
  web:
    cors:
      allowed-origins: "http://localhost:4200"
      allowed-methods: "*"
      allowed-headers: "*"

1.1.3 Archivos SQL

Ubicación obligatoria:

• src/main/resources/schema.sql
• src/main/resources/data.sql

Tabla: persons

Tabla: contact_links

Tabla: projects

Tabla: project_links

Relaciones:

ALTER TABLE contact_links ADD FOREIGN KEY (person_id) REFERENCES persons(id);
ALTER TABLE projects ADD FOREIGN KEY (person_id) REFERENCES persons(id);
ALTER TABLE project_links ADD FOREIGN KEY (project_id) REFERENCES projects(id);

Eliminación lógica: Campo active ("S" = activo, "N" = eliminado) en persons y projects

1.2 Endpoints Backend

ENDPOINT 1: Listar todas las personas

Ruta: GET /api/persons

Query Parameter:

• activeOnly (Boolean, opcional) - Si es true, solo devuelve personas activas. Default: false

DTO Response: Lista de PersonSummaryDto

[
  {
    "id": 1,
    "firstName": "Juan",
    "lastName": "Pérez",
    "profession": "Full-Stack Developer",
    "location": "Quito, Ecuador",
    "active": true,
    "contactLinks": [
      {
        "id": 1,
        "name": "GitHub",
        "url": "https://github.com/juanperez"
      },
      {
        "id": 2,
        "name": "LinkedIn",
        "url": "https://linkedin.com/in/juanperez"
      }
    ],
    "projectCount": 8
  },
  {
    "id": 2,
    "firstName": "María",
    "lastName": "González",
    "profession": "Backend Developer",
    "location": "Guayaquil, Ecuador",
    "active": true,
    "contactLinks": [
      {
        "id": 5,
        "name": "GitHub",
        "url": "https://github.com/mariagonzalez"
      }
    ],
    "projectCount": 0
  }
]

Reglas:

• Si activeOnly=true: solo personas con active = "S"
• Si activeOnly=false o no especificado: todas las personas
• projectCount: número de proyectos activos de la persona
• Incluir todos los contactLinks de cada persona

Códigos HTTP:

• 200 OK – Siempre (incluso si lista vacía [])

ENDPOINT 2: Activar/Desactivar persona

Ruta: PATCH /api/persons/{id}/toggle-active

Path Variable:

• id (Long) - ID de la persona

Response Body: PersonStatusDto

{
  "id": 1,
  "firstName": "Juan",
  "lastName": "Pérez",
  "active": false,
  "message": "Person deactivated successfully"
}

Reglas:

• Si la persona está activa (active = "S"), cambiarla a inactiva (active = "N")
• Si la persona está inactiva, cambiarla a activa
• El mensaje debe indicar el nuevo estado: "Person activated successfully" o "Person deactivated successfully"

Códigos HTTP:

• 200 OK – Cambio exitoso
• 404 NOT FOUND – Persona no existe

Mensaje de error:

{
  "message": "Person not found"
}

ENDPOINT 3: Obtener información de una persona

Ruta: GET /api/persons/{id}

Path Variable:

• id (Long) - ID de la persona

DTO Response: PersonDetailDto

{
  "id": 1,
  "firstName": "Juan",
  "lastName": "Pérez",
  "email": "juan.perez@example.com",
  "bio": "Desarrollador full-stack con 5 años de experiencia...",
  "profession": "Full-Stack Developer",
  "location": "Quito, Ecuador",
  "active": true,
  "contactLinks": [
    {
      "id": 1,
      "name": "GitHub",
      "url": "https://github.com/juanperez"
    },
    {
      "id": 2,
      "name": "LinkedIn",
      "url": "https://linkedin.com/in/juanperez"
    },
    {
      "id": 3,
      "name": "Portfolio",
      "url": "https://juanperez.dev"
    }
  ],
  "projectCount": 8
}

Reglas:

• Devolver información completa de la persona (activa o inactiva)
• Incluir todos los enlaces de contacto
• projectCount: número de proyectos activos

Códigos HTTP:

• 200 OK – Persona existe
• 404 NOT FOUND – Persona no existe

Mensaje de error:

{
  "message": "Person not found"
}

ENDPOINT 4: Obtener proyectos de una persona con filtro por costo

Ruta: GET /api/persons/{id}/projects

Path Variable:

• id (Long) - ID de la persona

Query Parameter:

• minCost (Double, opcional) - Costo mínimo para filtrar proyectos. Si no se especifica, devuelve todos los proyectos

DTO Response: PersonProjectsDto

{
  "personId": 1,
  "personName": "Juan Pérez",
  "active": true,
  "filterApplied": true,
  "minCost": 5000.00,
  "projectCount": 3,
  "projects": [
    {
      "id": 1,
      "name": "E-Commerce Platform",
      "description": "Plataforma de comercio electrónico completa...",
      "technologies": "Spring Boot, Angular, PostgreSQL, AWS",
      "status": "Completed",
      "cost": 15000.00,
      "startDate": "2023-01-15",
      "endDate": "2023-06-30",
      "projectLink": {
        "name": "Repository",
        "url": "https://github.com/juanperez/ecommerce"
      }
    },
    {
      "id": 3,
      "name": "Mobile Banking App",
      "description": "Aplicación móvil para gestión bancaria...",
      "technologies": "React Native, Node.js, MongoDB",
      "status": "In Progress",
      "cost": 12000.00,
      "startDate": "2023-09-01",
      "endDate": null,
      "projectLink": {
        "name": "Demo",
        "url": "https://demo.banking.com"
      }
    }
  ]
}

Reglas:

• La persona debe existir (activa o inactiva)
• Solo devolver proyectos con active = "S"
• Si minCost está especificado: filtrar proyectos con cost >= minCost
• Si minCost no está especificado: devolver todos los proyectos activos
• filterApplied: true si se aplicó filtro de costo, false si no
• Ordenar proyectos por costo descendente
• Si la persona no tiene proyectos (o ninguno cumple el filtro): projects: [], projectCount: 0

Códigos HTTP:

• 200 OK – Persona existe (incluso si no tiene proyectos)
• 404 NOT FOUND – Persona no existe

Mensaje de error:

{
  "message": "Person not found"
}

Caso especial - Persona sin proyectos:

{
  "personId": 2,
  "personName": "María González",
  "active": true,
  "filterApplied": false,
  "minCost": null,
  "projectCount": 0,
  "projects": []
}

1.3 Modelo de Entidades

Person Entity

@Entity
@Table(name = "persons")
public class Person {
    // Agregar annotations e imports necesarios
    private Long id;
    private String firstName;
    private String lastName;
    private String email;
    private String bio;
    private String profession;
    private String location;
    private Character active;
    private List<ContactLink> contactLinks;
    private List<Project> projects;
    
    // Getters, setters, constructors
}

ContactLink Entity

@Entity
@Table(name = "contact_links")
public class ContactLink {
    // Agregar annotations e imports necesarios
    private Long id;
    private String name;
    private String url;
    private Person person;
    
    // Getters, setters, constructors
}

Project Entity

@Entity
@Table(name = "projects")
public class Project {
    // Agregar annotations e imports necesarios
    private Long id;
    private String name;
    private String description;
    private String technologies;
    private String status;
    private Double cost;
    private LocalDate startDate;
    private LocalDate endDate;
    private Character active;
    private Person person;
    private ProjectLink projectLink;
    
    // Getters, setters, constructors
}

ProjectLink Entity

@Entity
@Table(name = "project_links")
public class ProjectLink {
    // Agregar annotations e imports necesarios
    private Long id;
    private String name;
    private String url;
    private Project project;
    
    // Getters, setters, constructors
}

1.4 Estructura del Proyecto Backend

Cada módulo con sus paquetes correspondientes:

• Módulo Person
  • controller
  • service
  • repository
  • dto
  • entity
  • mapper
• Módulo ContactLink (si se considera necesario como módulo separado)
• Módulo Project
  • controller
  • service
  • repository
  • dto
  • entity
  • mapper
• Módulo ProjectLink (si se considera necesario como módulo separado)

La estructura debe seguir buenas prácticas de arquitectura en capas.

PARTE 2: FRONTEND – ANGULAR

VERSION DE ANGULAR: 19+ USO DE SEÑALES

2.1 Configuración del Proyecto Angular

Versión: Angular 18+
Arquitectura: Standalone Components
Estilo: CSS/SCSS a elección

Instalación:

ng new portfolio-frontend --standalone --routing
cd portfolio-frontend
ng serve

2.2 Estructura de Rutas

// app.routes.ts
export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'proyectos/:id', component: ProjectsComponent },
  { path: 'proyectos', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', redirectTo: '/home' }
];

Rutas:

• / → Redirige a /home
• /home → Página principal con listado de personas
• /proyectos/:id → Página de proyectos de una persona específica
• /proyectos (sin ID) → Redirige a /home
• Cualquier ruta no encontrada → Redirige a /home

2.3 Página 1: Home (/home)

Componente: HomeComponent

Funcionalidad:

1. Listado de personas:

   • Mostrar todas las personas en formato de tarjetas (cards)
   • SI LA PERSONA ESTÁ INACTIVA, SU CARD DEBE TENER UN ESTILO DIFERENTE (ej: opacidad reducida, badge "Inactivo", etc.)
   • Cada card debe mostrar:
     • Nombre completo
     • Profesión
     • Ubicación
     • Estado (activo/inactivo) - indicador visual (badge, color, etc.)
     • Enlaces de contacto con íconos
     • Número de proyectos
     • Botón "Ver Proyectos"
     • Botón "Activar/Desactivar"

2. Filtro de personas activas:

   • Toggle/Switch o botón para alternar entre:
     • "Mostrar todas las personas"
     • "Mostrar solo personas activas"
   • Al cambiar el filtro, debe hacer una nueva petición al backend

3. Íconos de redes sociales:

   • GitHub → Logo de GitHub (puedes usar Font Awesome o similar)
   • LinkedIn → Logo de LinkedIn
   • Portfolio, Website, etc. → Ícono genérico de enlace

4. Botón Activar/Desactivar:

   • Al hacer clic, debe llamar al endpoint PATCH /api/persons/{id}/toggle-active
   • Actualizar el listado después del cambio
   • Mostrar mensaje de confirmación (opcional: usar toast o snackbar)

5. Botón Ver Proyectos:

   • Al hacer clic, navegar a /proyectos/{id}

Diseño sugerido:

• Grid responsivo de cards (2-3 columnas en desktop, 1 en móvil)
• Cards con sombra y hover effect
• Enlaces de contacto como íconos clicables
• Badge o color distintivo para estado activo/inactivo

Endpoint utilizado:

• GET /api/persons?activeOnly={true|false}
• PATCH /api/persons/{id}/toggle-active

2.4 Página 2: Proyectos de una Persona (/proyectos/:id)

Componente: ProjectsComponent

Funcionalidad:

1. Encabezado con información de la persona:

   • Mostrar los datos de la persona seleccionada:
     • Nombre completo
     • Profesión
     • Biografía
     • Enlaces de contacto
   • Puede reutilizar un componente común con Home

2. Filtro de proyectos por costo:

   • Input field para ingresar el costo mínimo
   • Botón "Filtrar" o filtrado automático (onChange)
   • Mostrar etiqueta indicando que hay un filtro aplicado (ej: "Mostrando proyectos con costo mayor a $5000")
   • Botón para limpiar filtro y ver todos los proyectos

3. Listado de proyectos:

   • Mostrar todos los proyectos de la persona al cargar (sin filtro)
   • Al aplicar filtro, mostrar solo proyectos con costo >= valor ingresado
   • Cada proyecto debe mostrar:
     • Nombre del proyecto
     • Descripción
     • Tecnologías (puede ser como tags/chips)
     • Estado (badge con color según estado)
     • Costo (formato moneda)
     • Fechas (inicio y fin)
     • Enlace del proyecto (ícono/botón clicable)

4. Manejo de casos especiales:

   • Persona sin proyectos: Mostrar mensaje "Esta persona no tiene proyectos registrados"
   • Filtro sin resultados: Mostrar mensaje "No se encontraron proyectos con costo mayor a ${valor}"
   • Persona inexistente (ID inválido): Mostrar mensaje de error "La persona no existe" y botón para volver a Home

5. Navegación:

   • Botón "Volver al Home" o "← Atrás"

Diseño sugerido:

• Sección superior con datos de la persona (puede ser un card horizontal)
• Barra de filtro con campo de texto y botón
• Lista o grid de proyectos
• Cards de proyecto con diseño estructurado

Endpoints utilizados:

• GET /api/persons/{id} - Para obtener información de la persona
• GET /api/persons/{id}/projects?minCost={valor} - Para obtener proyectos

2.6 Interfaces TypeScript

Crear interfaces que coincidan con los DTOs del backend:

// person.models.ts
export interface PersonSummary {
  id: number;
  firstName: string;
  lastName: string;
  profession: string;
  location: string;
  active: boolean;
  contactLinks: ContactLink[];
  projectCount: number;
}

export interface PersonDetail {
  id: number;
  firstName: string;
  lastName: string;
  email: string;
  bio: string;
  profession: string;
  location: string;
  active: boolean;
  contactLinks: ContactLink[];
  projectCount: number;
}

export interface ContactLink {
  id: number;
  name: string;
  url: string;
}

export interface PersonStatus {
  id: number;
  firstName: string;
  lastName: string;
  active: boolean;
  message: string;
}

export interface PersonProjects {
  personId: number;
  personName: string;
  active: boolean;
  filterApplied: boolean;
  minCost: number | null;
  projectCount: number;
  projects: Project[];
}

export interface Project {
  id: number;
  name: string;
  description: string;
  technologies: string;
  status: string;
  cost: number;
  startDate: string;
  endDate: string | null;
  projectLink: ProjectLink;
}

export interface ProjectLink {
  name: string;
  url: string;
}

2.8 Componentes Sugeridos

Estructura de componentes:

src/app/
├── components/
│   ├── home/
│   │   └── home.component.ts
│   ├── projects/
│   │   └── projects.component.ts
│   ├── person-card/           (opcional: componente reutilizable)
│   │   └── person-card.component.ts
│   └── project-card/          (opcional: componente reutilizable)
│       └── project-card.component.ts
├── services/
│   └── person.service.ts
├── models/
│   └── person.models.ts
└── app.routes.ts

PARTE 3: CRITERIOS DE EVALUACIÓN

3.1 Backend (60%)

3.2 Frontend (40%)

PARTE 4: NOTAS IMPORTANTES

Backend:

• Cada endpoint debe cumplir EXACTAMENTE con la estructura del DTO
• Relaciones JPA deben estar correctamente configuradas
• Códigos HTTP deben ser los especificados
• Validaciones de negocio deben estar implementadas

Frontend:

• Las interfaces TypeScript deben coincidir con los DTOs del backend
• Manejo de errores debe ser robusto (404, errores de red, etc.)
• La navegación debe funcionar correctamente
• Los filtros deben llamar correctamente a los endpoints

Datos de prueba:

• 10 personas: 8 activas, 2 inactivas
• Persona #2 NO debe tener proyectos (caso especial a probar)
• Cada persona: 2-4 enlaces de contacto
• Cada persona (excepto #2): 5-10 proyectos
• Enlaces deben incluir GitHub, LinkedIn y otros

Penalización total (0 puntos) si:

• Backend y Frontend no se comunican
• Relaciones JPA incorrectas
• Endpoints no funcionan según especificación
• Páginas no cargan o tienen errores críticos

PARTE 5: ENTREGA

Backend:

• Repositorio Git con el proyecto Spring Boot
• Código debe compilar y ejecutar correctamente
• Archivos SQL deben estar en src/main/resources/

Frontend:

• Repositorio Git con el proyecto Angular
• Código debe compilar (ng build) sin errores
• Aplicación debe ejecutarse correctamente (ng serve)

Formato de entrega:

• Enlace(s) al repositorio remoto (GitHub/GitLab)
• Subir al AVAC dentro del tiempo asignado
• Tiempo límite: Hora exacta del último commit
• Commits posteriores: NO evaluados
• Repositorio vacío o inaccesible: Calificación 0