Proyecto E: Formulario de Contacto

Contexto

Una empresa quiere recopilar los datos de contacto de los visitantes de su sitio web. Cuando alguien completa el formulario de contacto, su información debe guardarse en una base de datos PostgreSQL y se debe enviar un correo electrónico.

Lo que debe crear

Una API REST Spring Boot con:

Un formulario de contacto público - cualquier persona puede enviar sus datos
Un panel de administración protegido - para consultar y gestionar los contactos recibidos
Un sistema de correos electrónicos - notificaciones automáticas

El flujo

Vista previa del formulario (Frontend)

Así debería verse el formulario en la página web:

┌─────────────────────────────────────────────────────────┐
│                    CONTÁCTENOS                          │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  Nombre completo *              Empresa                 │
│  ┌─────────────────────────┐    ┌─────────────────────┐│
│  │ Your name               │    │ Your company name   ││
│  └─────────────────────────┘    └─────────────────────┘│
│                                                         │
│  Email *                         Teléfono               │
│  ┌─────────────────────────┐    ┌─────────────────────┐│
│  │ your@company.com        │    │ Your phone number   ││
│  └─────────────────────────┘    └─────────────────────┘│
│                                                         │
│  Tipo de solicitud *                                   │
│  ┌─────────────────────────────────────────────────┬──┐│
│  │ Seleccione el tipo de solicitud                 │ v││
│  ├─────────────────────────────────────────────────┴──┤│
│  │ > Seleccione el tipo de solicitud                  ││
│  │   Solicitud de información                        ││
│  │   Solicitud de cotización                         ││
│  │   Soporte técnico                                 ││
│  │   Alianza                                         ││
│  │   Otro                                            ││
│  └────────────────────────────────────────────────────┘│
│                                                         │
│  Mensaje *                                              │
│  ┌────────────────────────────────────────────────────┐│
│  │ Describa su solicitud, su presupuesto,             ││
│  │ y sus plazos...                                   ││
│  │                                                    ││
│  │                                                    ││
│  └────────────────────────────────────────────────────┘│
│                                                         │
│            ┌─────────────────────┐                      │
│            │      ENVIAR         │                      │
│            └─────────────────────┘                      │
│                                                         │
│  * Campos obligatorios                                  │
└─────────────────────────────────────────────────────────┘

Campos del formulario:

Campo	Tipo HTML	Validación
Nombre completo	`<input type="text">`	Obligatorio
Empresa	`<input type="text">`	Opcional
Email	`<input type="email">`	Obligatorio, formato email
Teléfono	`<input type="tel">`	Opcional
Tipo de solicitud	`<select>`	Obligatorio
Mensaje	`<textarea>`	Obligatorio, mínimo 10 caracteres

Opciones del campo "Tipo de solicitud":

Valor	Visualización
`INFO`	Solicitud de información
`QUOTE`	Solicitud de cotización
`SUPPORT`	Soporte técnico
`PARTNERSHIP`	Alianza
`OTHER`	Otro

Endpoints a crear

Endpoint público (sin autenticación)

Método	URL	Descripción
POST	`/api/contact`	Enviar el formulario

Datos del formulario:

fullName (obligatorio)
company (opcional)
email (obligatorio)
phone (opcional)
requestType (obligatorio) - lista de selección
message (obligatorio)

Endpoints admin (con JWT)

Método	URL	Descripción
GET	`/api/admin/leads`	Lista de contactos
GET	`/api/admin/leads/\{id\}`	Detalle de un contacto
PUT	`/api/admin/leads/\{id\}/status`	Cambiar el estado
DELETE	`/api/admin/leads/\{id\}`	Eliminar

Diagrama de clases

Aquí tiene una propuesta de estructura. Puede modificar, agregar o simplificar según sus necesidades.

Libertad de diseño

Este diagrama es una sugerencia. Usted es libre de:

Agregar clases (ej: LeadNote para notas internas)
Agregar campos (ej: company, source)
Modificar las relaciones
Simplificar si considera que es demasiado complejo

Lo importante es que su solución funcione y esté bien estructurada.

Base de datos

Cree estas tablas en PostgreSQL:

Tabla leads

id (clave primaria)
full_name
company
email (único)
phone
request_type (INFO, QUOTE, SUPPORT, PARTNERSHIP, OTHER)
message
status (NEW, CONTACTED, CONVERTED, LOST)
created_at

Tabla users (para los administradores)

id
email
password
role

Correos electrónicos a enviar

Cuando alguien envía el formulario:
- Correo al admin: "Nuevo contacto recibido"
- Correo al visitante: "Gracias, hemos recibido su mensaje"
Utilizar @Async para no bloquear la solicitud

Configuración

# application.yml
spring:
  datasource:
    url: jdbc:postgresql://localhost:5432/contactdb
    username: postgres
    password: postgres
  
  mail:
    host: localhost
    port: 1025  # MailHog para pruebas

Para probar los correos localmente:

docker run -d -p 1025:1025 -p 8025:8025 mailhog/mailhog

Ver los correos en http://localhost:8025

Pruebas a escribir

POST /api/contact con datos válidos → retorna 200
POST /api/contact con email inválido → retorna 400
GET /api/admin/leads sin token → retorna 401
GET /api/admin/leads con token → retorna la lista

Evaluación

Criterio	Puntos
Endpoint POST /api/contact funciona	20
Datos guardados en PostgreSQL	20
Correos enviados	15
Endpoints admin protegidos por JWT	20
Pruebas	15
Código limpio	10
Total	100

Para comenzar

Cree el proyecto en start.spring.io con:
- Spring Web
- Spring Data JPA
- Spring Security
- Spring Mail
- Validation
- PostgreSQL Driver
- Lombok
Cree la entidad Lead
Cree el LeadRepository
Cree el ContactController con POST /api/contact
Pruebe con curl o Postman

Entregables

Código en GitHub
README con instrucciones
Colección Postman para pruebas

Volver al Proyecto Final

Contexto​

Lo que debe crear​

El flujo​

Vista previa del formulario (Frontend)​

Endpoints a crear​

Endpoint público (sin autenticación)​

Endpoints admin (con JWT)​

Diagrama de clases​

Base de datos​

Correos electrónicos a enviar​

Configuración​

Pruebas a escribir​

Evaluación​

Para comenzar​

Entregables​