208 lines
4.7 KiB
Markdown
208 lines
4.7 KiB
Markdown
# 🎨 Wallabicher Web Interface
|
|
|
|
Interfaz web moderna para visualizar y gestionar tu sistema Wallabicher. Construida con **Node.js**, **Express**, **Vue 3** y **Tailwind CSS**.
|
|
|
|
## 🚀 Características
|
|
|
|
- **Dashboard en tiempo real** con estadísticas y métricas
|
|
- **Visualización de artículos** notificados con filtros por plataforma
|
|
- **Gestión de favoritos** con interfaz intuitiva
|
|
- **Configuración de workers** desde la interfaz web
|
|
- **Visualización de logs** del sistema en tiempo real
|
|
- **Actualizaciones en tiempo real** mediante WebSockets
|
|
- **Diseño responsive** y moderno con Tailwind CSS
|
|
|
|
## 📋 Requisitos Previos
|
|
|
|
- Node.js 18+ y npm
|
|
- El sistema Python de Wallabicher ejecutándose
|
|
- Redis (opcional, pero recomendado para mejor rendimiento)
|
|
|
|
## 🔧 Instalación
|
|
|
|
### Backend
|
|
|
|
```bash
|
|
cd web/backend
|
|
npm install
|
|
```
|
|
|
|
### Frontend
|
|
|
|
```bash
|
|
cd web/frontend
|
|
npm install
|
|
```
|
|
|
|
## 🎯 Uso
|
|
|
|
### 1. Iniciar el Backend
|
|
|
|
```bash
|
|
cd web/backend
|
|
npm start
|
|
```
|
|
|
|
O en modo desarrollo (con auto-reload):
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
El backend se ejecutará en `http://localhost:3001`
|
|
|
|
### 2. Iniciar el Frontend
|
|
|
|
En otra terminal:
|
|
|
|
```bash
|
|
cd web/frontend
|
|
npm run dev
|
|
```
|
|
|
|
El frontend se ejecutará en `http://localhost:3000`
|
|
|
|
### 3. Acceder a la Interfaz
|
|
|
|
Abre tu navegador en `http://localhost:3000`
|
|
|
|
## 📁 Estructura del Proyecto
|
|
|
|
```
|
|
web/
|
|
├── backend/
|
|
│ ├── server.js # Servidor Express con WebSockets
|
|
│ └── package.json
|
|
└── frontend/
|
|
├── src/
|
|
│ ├── views/ # Vistas principales
|
|
│ │ ├── Dashboard.vue
|
|
│ │ ├── Articles.vue
|
|
│ │ ├── Favorites.vue
|
|
│ │ ├── Workers.vue
|
|
│ │ └── Logs.vue
|
|
│ ├── services/
|
|
│ │ └── api.js # Cliente API
|
|
│ ├── App.vue # Componente principal
|
|
│ ├── main.js # Punto de entrada
|
|
│ └── style.css # Estilos globales
|
|
├── index.html
|
|
├── vite.config.js
|
|
└── package.json
|
|
```
|
|
|
|
## 🔌 API Endpoints
|
|
|
|
### Estadísticas
|
|
- `GET /api/stats` - Obtener estadísticas generales
|
|
|
|
### Workers
|
|
- `GET /api/workers` - Obtener lista de workers
|
|
- `PUT /api/workers` - Actualizar configuración de workers
|
|
|
|
### Favoritos
|
|
- `GET /api/favorites` - Obtener favoritos
|
|
- `POST /api/favorites` - Añadir favorito
|
|
- `DELETE /api/favorites/:platform/:id` - Eliminar favorito
|
|
|
|
### Artículos
|
|
- `GET /api/articles` - Obtener artículos notificados (con paginación)
|
|
|
|
### Logs
|
|
- `GET /api/logs` - Obtener logs del sistema
|
|
|
|
### Configuración
|
|
- `GET /api/config` - Obtener configuración (sin tokens)
|
|
|
|
## 🔄 WebSockets
|
|
|
|
El servidor expone un WebSocket en `ws://localhost:3001` que envía actualizaciones en tiempo real:
|
|
|
|
- `workers_updated` - Cuando se actualiza la configuración de workers
|
|
- `favorites_updated` - Cuando cambian los favoritos
|
|
- `logs_updated` - Cuando se actualizan los logs
|
|
|
|
## 🎨 Personalización
|
|
|
|
### Colores
|
|
|
|
Los colores se pueden personalizar en `frontend/tailwind.config.js`:
|
|
|
|
```js
|
|
colors: {
|
|
primary: {
|
|
// Personaliza los colores primarios
|
|
}
|
|
}
|
|
```
|
|
|
|
### Puerto del Backend
|
|
|
|
Cambia el puerto del backend modificando la variable `PORT` en `backend/server.js` o usando la variable de entorno:
|
|
|
|
```bash
|
|
PORT=3001 npm start
|
|
```
|
|
|
|
### Puerto del Frontend
|
|
|
|
Modifica el puerto en `frontend/vite.config.js`:
|
|
|
|
```js
|
|
server: {
|
|
port: 3000,
|
|
}
|
|
```
|
|
|
|
## 🐛 Solución de Problemas
|
|
|
|
### El backend no se conecta a Redis
|
|
|
|
- Verifica que Redis esté ejecutándose
|
|
- Revisa la configuración en `config.yaml`
|
|
- El sistema funcionará sin Redis, pero con funcionalidad limitada
|
|
|
|
### No se ven los artículos
|
|
|
|
- Asegúrate de que el sistema Python esté ejecutándose
|
|
- Verifica que Redis esté configurado si usas cache Redis
|
|
- Revisa los logs del backend
|
|
|
|
### WebSocket no conecta
|
|
|
|
- Verifica que el backend esté ejecutándose
|
|
- Revisa la consola del navegador para errores
|
|
- Asegúrate de que no haya un firewall bloqueando el puerto
|
|
|
|
## 📝 Notas
|
|
|
|
- La interfaz web lee el archivo `workers.json` del directorio raíz del proyecto. Los favoritos se almacenan en Redis.
|
|
- Los cambios en la interfaz web se reflejan automáticamente en los archivos JSON
|
|
- El sistema Python debe estar ejecutándose para que los workers funcionen
|
|
- Los artículos notificados solo están disponibles si usas Redis como cache
|
|
|
|
## 🚀 Producción
|
|
|
|
### Build del Frontend
|
|
|
|
```bash
|
|
cd web/frontend
|
|
npm run build
|
|
```
|
|
|
|
Los archivos estáticos se generarán en `web/frontend/dist/`
|
|
|
|
### Servir el Frontend desde el Backend
|
|
|
|
Puedes modificar `backend/server.js` para servir los archivos estáticos:
|
|
|
|
```js
|
|
import { join } from 'path';
|
|
app.use(express.static(join(__dirname, '../frontend/dist')));
|
|
```
|
|
|
|
## 📄 Licencia
|
|
|
|
MIT
|
|
|