Publicado por
Ocular: Rastreador de presupuesto de código abierto autohospedado
Aplicación web para gestionar presupuestos personales a lo largo de los años con panel analítico, modo oscuro, PWA y despliegue en contenedor único.
Vídeo tutorial en YouTube
Mira el vídeo completo sobre cómo instalar y usar Ocular: Rastreador de presupuesto de código abierto autohospedado en el canal GENBYTE:
¿Qué es Ocular: Rastreador de presupuesto de código abierto autohospedado?
Ocular es una aplicación de seguimiento de presupuesto personal, de código abierto y autohospedada, desarrollada por Simon Reinisch. Permite registrar ingresos y gastos, visualizar estadísticas mediante gráficos —incluyendo diagramas de Sankey—, gestionar varios ejercicios fiscales y trasladar saldos de un año al siguiente. La interfaz está construida con Vue 3, ofrece tema claro y oscuro, navegación por teclado, modo privacidad y soporte multilingüe y multidivisa. El backend, denominado Genesis, está escrito en Go y se empaqueta junto al frontend en una única imagen Docker publicada en GitHub Container Registry. La documentación oficial, una demo interactiva y la guía de despliegue se alojan en https://simonwep.github.io/ocular/.
Características principales
Autohospedado y despliegue en contenedor único
La imagen Docker oficial (ghcr.io/simonwep/ocular) incluye frontend y backend, lo que permite poner en marcha la aplicación con un solo comando.
Panel analítico con múltiples gráficos
Incluye estadísticas extensas, gráficos de series temporales y un diagrama de Sankey para visualizar flujos de efectivo.
Seguimiento multi-año y año fiscal personalizable
Permite definir el mes de inicio del año fiscal y trasladar presupuestos de un ejercicio al siguiente.
Importación y exportación de datos
Soporta importación desde la plantilla anual de Google Sheets y exportación en formato JSON.
Progressive Web App y optimización móvil
Instalable como PWA, con diseño responsivo y navegación por teclado para usuarios avanzados.
Gestión de usuarios y autenticación
Incluye sistema de cuentas y CLI para administración de usuarios.
Modo privacidad y evaluación de expresiones en línea
Oculta cantidades sensibles en entornos públicos y permite escribir fórmulas directamente en los campos de importe.
Internacionalización y multidivisa
Interfaz traducida a varios idiomas y soporte para las divisas más habituales.
Requisitos del sistema
- Docker Engine 20.10 o superior
- Docker Compose v2 (opcional, para orquestación)
- Para desarrollo local: Node.js 24.12.0, pnpm 11.25.0, Go 1.23+ (backend Genesis)
Instalación con Docker Compose
Despliegue rápido con Docker (recomendado)
La documentación oficial indica que la imagen se ejecuta como un único contenedor. El puerto expuesto es el 8080. Las variables de entorno se definen en un archivo .env (ver sección Configuración avanzada).
–name ocular \
-p 8080:8080 \
–env-file .env \
-v ocular-data:/data \
ghcr.io/simonwep/ocular:latest
Despliegue con Docker Compose (ejemplo basado en la documentación)
Crea un archivo docker-compose.yml con el servicio ocular. Ajusta las variables según .env.example.
services:
ocular:
image: ghcr.io/simonwep/ocular:latest
container_name: ocular
ports:
– "8080:8080"
env_file:
– .env
volumes:
– ocular-data:/data
restart: unless-stopped
volumes:
ocular-data:
Acceder al proyecto
Interfaz web
Tras iniciar el contenedor, abre http://localhost:8080 en el navegador. Si no se configura OCULAR_HYBRID_MODE=true, se requerirá inicio de sesión. Las credenciales de prueba por defecto (solo para desarrollo) son usuario: admin, contraseña: hgEiPCZP, según .env.example.
Demo oficial
Disponible en https://simonwep.github.io/ocular/demo/dashboard#demo para probar la aplicación sin instalarla.
Casos de uso
- Control de finanzas personales con visión multi-año
- Planificación de presupuesto familiar con año fiscal no natural
- Análisis de flujos de efectivo mediante diagrama de Sankey
- Migración de datos desde plantillas de Google Sheets
- Uso en entornos sin conexión a internet gracias a PWA
- Auditoría de gastos con modo privacidad en espacios públicos
Configuración avanzada
Variables de entorno principales (.env)
Basado en .env.example del repositorio. OCULAR_GENESIS_HOST define el endpoint del backend (por defecto /api). OCULAR_HYBRID_MODE=true permite usar la app sin autenticación. OCULAR_TEST_USERNAME y OCULAR_TEST_PASSWORD son credenciales de desarrollo. Las variables de build (OCULAR_BUILD_VERSION, OCULAR_BUILD_SHA, OCULAR_BUILD_DATE) se inyectan en tiempo de compilación.
OCULAR_HYBRID_MODE=true
OCULAR_TEST_USERNAME=admin
OCULAR_TEST_PASSWORD=cambia_esta_contrasena
OCULAR_BUILD_VERSION=1.0.0
OCULAR_BUILD_SHA=abc123
OCULAR_BUILD_DATE=2024-01-15T12:00:00.000Z
Persistencia de datos
El contenedor almacena la base de datos y archivos subidos en /data. Monta un volumen Docker o bind mount para conservar la información entre reinicios.
Proxy inverso y HTTPS
Para producción, sitúa Ocular detrás de un proxy inverso (Nginx, Traefik, Caddy) que termine TLS y reenvíe al puerto 8080. Asegúrate de pasar las cabeceras X-Forwarded-* para que la aplicación genere URLs correctas.
Gestión y mantenimiento
Actualizar a la última versión
Descarga la imagen más reciente y recrea el contenedor.
docker compose up -d –force-recreate
Copias de seguridad
Realiza backup del volumen ocular-data (directorio /data dentro del contenedor) con la herramienta de tu elección (rsync, restic, borg, etc.).
Logs y diagnóstico
Consulta los logs del contenedor para detectar errores de inicio o runtime.
Stack técnico
- Vue 3.5 (frontend)
- Vite 7 (bundler)
- TypeScript 6
- Go (backend Genesis)
- ECharts 6 (gráficos)
- Vue Router 5
- Vue I18n 11
- Pinia (estado, inferido por dependencias Vue)
- Workbox (PWA)
- Sass (estilos)
- pnpm (gestor de paquetes)
- Docker (contenedorización)
Referencias oficiales
- Repositorio oficial en GitHub: https://github.com/simonwep/ocular
- Documentación y demo: https://simonwep.github.io/ocular/
- Guía de despliegue: https://simonwep.github.io/ocular/pages/deploy
- Imágenes Docker en GitHub Container Registry: https://github.com/simonwep/ocular/pkgs/container/ocular
- Licencia MIT: https://github.com/simonwep/ocular/blob/main/LICENSE
Apoya el canal GENBYTE
¿Te ha sido útil este contenido?
Suscríbete a YouTube
Newsletter GENBYTE
Ko-fi
Contacto: [email protected]