📰 Titulares APP

---

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:

   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:

     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/:

     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.

1. Instalar dependencias: sudo apt-get install -y autofs cifs-utils.
2. Configurar el mapa maestro auto.master: Añadir la línea /mnt /etc/auto.cifs --timeout=60.
3. Crear el mapa auto.cifs con los detalles de la carpeta compartida, apuntando a un archivo de credenciales seguro.

   # /etc/auto.cifs
   nombre_montaje -fstype=cifs,credentials=/ruta/segura/credenciales.txt,uid=1000,gid=1000,vers=3.0 ://IP_PC_USUARIO/CARPETA_COMPARTIDA
   

4. Reiniciar el servicio: sudo systemctl restart autofs.

Despliegue

1. Clonar el repositorio en el servidor Docker.
2. Configurar la red externa de Docker si es necesario (para la base de datos).

   docker network create shared-net
   

3. Ejecutar Docker Compose desde la raíz del proyecto.

   docker-compose up --build -d
   

4. Acceder a la Aplicación: La aplicación estará disponible en la IP del servidor Docker y el puerto configurado en docker-compose.yml.
   • URL: http://192.168.5.128:8905

---

📂 Estructura del Proyecto

.
├── backend/
│   └── src/
│       └── Titulares.Api/        # Proyecto principal de ASP.NET Core
│           ├── Controllers/      # Controladores de la API
│           ├── Data/             # Repositorios (Dapper) para acceso a datos
│           ├── Hubs/             # Hubs de SignalR
│           ├── Models/           # Clases de modelo y DTOs
│           ├── Services/         # Lógica de negocio (Scraping, CSV, Estado)
│           ├── Workers/          # Servicios en segundo plano
│           ├── Dockerfile        # Instrucciones para construir la imagen del backend
│           └── ...
├── frontend/
│   ├── src/
│   │   ├── components/           # Componentes de React
│   │   ├── contexts/           # Proveedores de Contexto (Notificaciones)
│   │   ├── hooks/              # Hooks personalizados (useSignalR, useDebounce)
│   │   ├── services/           # Lógica de llamadas a la API (axios)
│   │   ├── App.tsx             # Componente principal de la aplicación
│   │   └── main.tsx            # Punto de entrada de React
│   ├── .env.development        # Variables de entorno para desarrollo
│   ├── .env.production         # Variables de entorno para producción
│   └── Dockerfile              # Instrucciones para construir la imagen del frontend
├── nginx/
│   └── nginx.conf              # Configuración de Nginx como proxy inverso
└── docker-compose.yml          # Orquestación de los contenedores