**Titulares APP** es una aplicación web de dashboard en tiempo real diseñada para extraer titulares de un sitio de noticias, gestionarlos y exportarlos automáticamente a un archivo CSV en una ubicación de red.
El sistema se compone de un **backend RESTful API desarrollado en ASP.NET Core** que gestiona el scraping, la base de datos y la comunicación en tiempo real, y un **frontend interactivo de tipo SPA (Single Page Application) construido con React, TypeScript y Vite**.
---
## 🚀 Funcionalidades Principales
El sistema está diseñado para la automatización, la gestión centralizada y la visualización en tiempo real de titulares de noticias.
### 🤖 Motor de Scraping Automatizado
- **Worker en Segundo Plano:** Un proceso `BackgroundService` de .NET se ejecuta de forma continua en el servidor.
- **Scraping Periódico:** Extrae los últimos titulares del sitio de noticias (`eldia.com`) a intervalos configurables.
- **Sincronización Inteligente:** Compara los titulares extraídos con los existentes en la base de datos para evitar duplicados y mantener la lista actualizada, preservando el orden de los titulares manuales.
- **Limpieza de Datos:** Procesa el texto de los titulares para eliminar prefijos no deseados (ej: "VIDEO.-") y decodificar entidades HTML.
### ⚡ Actualizaciones en Tiempo Real con SignalR
- **Notificación Instantánea:** Cualquier cambio en la lista de titulares (por scraping, creación manual, edición, reordenamiento o eliminación) es notificado instantáneamente a todos los clientes conectados.
- **Dashboard Sincronizado:** La tabla de titulares en la interfaz de todos los usuarios se actualiza en tiempo real sin necesidad de refrescar la página.
- **Gestión de Conexión:** El backend detecta cuándo hay clientes activos y puede pausar el proceso de scraping si no hay nadie conectado para ahorrar recursos.
### 🖐️ Gestión Manual Completa
- **Creación de Titulares:** Permite añadir titulares manualmente, los cuales se insertan al principio de la lista.
- **Edición Rápida:**
- Edición del texto del titular directamente en la tabla.
- Edición de la viñeta (bullet point) a través de un modal dedicado.
- **Reordenamiento Drag & Drop:** Permite cambiar el orden visual de los titulares simplemente arrastrándolos y soltándolos en la tabla.
- **Eliminación Segura:** Borrado de titulares con un modal de confirmación para evitar acciones accidentales.
### ⚙️ Panel de Configuración Dinámico
- **Gestión Centralizada:** Una sección en la UI permite configurar todos los parámetros clave del sistema.
- **Parámetros Configurables:**
- **Ruta del archivo CSV:** Ubicación de red donde se guardará el archivo.
- **Intervalo de Scraping:** Frecuencia en minutos para la extracción de nuevos titulares.
- **Cantidad de Titulares:** Número máximo de titulares a mantener en la lista.
- **Viñeta por Defecto:** Símbolo a usar cuando un titular no tiene una viñeta específica.
- **Auto-Guardado Inteligente:** Los cambios en la configuración se guardan automáticamente en la base de datos después de una breve pausa (`debounce`), proporcionando una experiencia de usuario fluida.
### 📄 Exportación a CSV Robusta
- **Generación Automática:** Después de cada ciclo de scraping exitoso, el sistema regenera automáticamente el archivo `titulares.csv` en la ruta de red configurada.
- **Generación Manual:** Un botón en la UI permite forzar la regeneración del archivo CSV en cualquier momento.
- **Codificación Específica:** El archivo CSV se genera con codificación `UTF-16 Big Endian con BOM` para máxima compatibilidad con sistemas específicos que puedan consumir el archivo.
### 🎨 Interfaz de Usuario Moderna
- **Diseño Oscuro y Profesional:** Construido con Material-UI, ofreciendo una experiencia visual agradable y consistente.
- **Feedback al Usuario:** Notificaciones instantáneas para operaciones de éxito o error.
- **Indicadores de Estado:** Muestra el estado de la conexión con el servidor (Conectado, Reconectando, Desconectado) y el estado del proceso de scraping (ON/OFF).
---
## 🛠️ Stack Tecnológico
### Backend (`backend/`)
- **Framework:** ASP.NET Core 9
- **Lenguaje:** C#
- **Acceso a Datos:** Dapper (Micro ORM)
- **Base de Datos:** Microsoft SQL Server
- **Scraping:** HtmlAgilityPack
- **Comunicación Real-Time:** SignalR
- **Generación CSV:** CsvHelper
### Frontend (`frontend/`)
- **Librería:** React 19
- **Lenguaje:** TypeScript
- **Componentes UI:** Material-UI (MUI)
- **Drag & Drop:** dnd-kit
- **Comunicación Real-Time:** Cliente de SignalR (`@microsoft/signalr`)
- **Build Tool:** Vite
### Entorno de Producción
- **Contenerización:** Docker & Docker Compose
- **Proxy Inverso y Servidor Web:** Nginx (configurado para servir React y actuar como proxy para la API y SignalR/WebSockets)
---
## 🚀 Puesta en Marcha (Getting Started)
Siga estos pasos para configurar y ejecutar el proyecto.
### 1. Entorno de Desarrollo Local
#### Prerrequisitos
- **.NET SDK 9.0** o superior.
- **Node.js** v20.x o superior.
- **Microsoft SQL Server** y una herramienta de gestión como SSMS.
#### Configuración
1.**Clonar el Repositorio:**
```bash
git clone <URL_DEL_REPOSITORIO_GITEA>
cd TitularesApp # O el nombre de tu carpeta
```
2.**Base de Datos:**
- Cree una base de datos en su instancia de SQL Server (ej: `TitularesDB`).
- Ejecute los scripts necesarios para crear las tablas `Titulares` y `Configuracion` según los modelos en el proyecto (`Titular.cs`, `ConfiguracionApp.cs`).
3.**Backend (`backend/src/Titulares.Api`):**
- Renombre o copie `appsettings.Development.json` si es necesario.
- **Modifique la `ConnectionString`** en `appsettings.json` para apuntar a su base de datos.
- Ejecute desde el directorio `backend/src/Titulares.Api`:
```bash
dotnet restore
dotnet run
```
- La API estará escuchando en `http://localhost:5174`.
4.**Frontend (`frontend/`):**
- Verifique que `frontend/.env.development` contiene `VITE_API_BASE_URL=http://localhost:5174`.
- Ejecute desde el directorio `frontend/`:
```bash
npm install
npm run dev
```
- La aplicación estará disponible en `http://localhost:5173`.
---
### 2. Entorno de Producción con Docker
Esta es la forma recomendada de desplegar la aplicación.
#### Prerrequisitos
- **Docker** y **Docker Compose** instalados en el servidor anfitrión (ej: `192.168.5.128`).
- Una **carpeta compartida en la red** accesible desde el servidor Docker, donde se guardará el archivo CSV.
#### Configuración del Servidor Anfitrión (Host de Docker)
Para asegurar que el contenedor pueda escribir en la carpeta de red de forma persistente y resiliente a reinicios, se recomienda configurar un montaje bajo demanda con `autofs`.
