180 lines
9.4 KiB
Markdown
180 lines
9.4 KiB
Markdown
## 📰 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:**
|
|
```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`.
|
|
|
|
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).
|
|
```bash
|
|
docker network create shared-net
|
|
```
|
|
3. **Ejecutar Docker Compose** desde la raíz del proyecto.
|
|
```bash
|
|
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
|
|
``` |