Detalle de trabajo

Contexto

Las instalaciones fotovoltaicas generan grandes volúmenes de datos energéticos que, sin una presentación adecuada, resultan difíciles de interpretar:

• consumo de la vivienda o instalación,
• producción fotovoltaica,
• intercambio energético con la red,
• y, potencialmente, con sistemas de almacenamiento.

Solar centraliza esta información y la presenta de forma visual, coherente y accesible desde un único panel web.

Qué resuelve

La aplicación permite:

• Visualizar el comportamiento energético por día, mes o año
• Comparar producción, consumo y exportación/importación
• Entender el balance energético de forma inmediata
• Gestionar cargas de datos y copias de seguridad (usuarios administradores)
• La interfaz adapta textos y controles según el periodo seleccionado.

Todo ello consumiendo exclusivamente datos ya normalizados y consolidados por la API backend.

Arquitectura de vistas y reutilización de componentes

En el frontend existen tres vistas principales: Daily, Monthly y Yearly.

Las tres reutilizan el mismo componente de gráfico (mismo tipo de chart y misma base visual). Lo que cambia entre vistas es:

• el selector de periodo (fecha / mes / año),
• la agregación de los datos (horas / días / meses),
• y las etiquetas y textos mostrados al usuario.

El gráfico es el mismo; la diferencia está en la lógica de datos y en el control del periodo.

Funcionalidades principales

Vista diaria

• Selector de fecha
• Gráfico con 24 valores horarios
• Visualización del flujo energético:
• producción fotovoltaica

Vista mensual

• Selector de mes
• Gráfico con datos agregados por día
• Comparación clara de producción y consumo a lo largo del mes

Vista anual

• Selector de año
• Gráfico con datos agregados por mes
• Visión global del comportamiento energético anual

Gestión y administración

El acceso administrativo habilita funcionalidades adicionales:

• Carga múltiple de archivos CSV
• Descarga de copias de seguridad
• Gestión básica de datos desde la interfaz web

La opción “Actualizar perfil” está visible pero actualmente muestra un aviso de funcionalidad en construcción.

Integración con la API Solar

El frontend consume exclusivamente la API backend:

• POST /users/login — autenticación
• GET /photovoltaics/date/:date — datos diarios, mensuales o anuales
• POST /photovoltaics/upload — carga de CSV (admin)
• GET /photovoltaics — descarga de backup completo

La URL base de la API se gestiona mediante variables de entorno (VITE_API_BASE_URL).

Seguridad y control de acceso

• Autenticación mediante login
• Token y rol almacenados en sessionStorage
• El rol admin habilita la sección “Gestionar”
• No existe persistencia local de datos sensibles

La seguridad del frontend está alineada con la API, manteniendo responsabilidades separadas.

Arquitectura y stack técnico

• Framework: Vue 3
• Build tool: Vite
• Routing: Vue Router
• UI: Vuetify
• Gráficas: ECharts (via vue-echarts)
• HTTP: Axios
• Mobile: Capacitor (configuración base incluida)

Android / Mobile

• Configuración de Capacitor incluida
• Dependencias instaladas
• Sin plataformas nativas generadas todavía (Android/iOS)

Existe un commit específico donde se añade Capacitor para futura app Android.

Despliegue y estado

• Aplicación desplegada en Vercel
• Build estándar vite build con salida dist
• Entornos diferenciados mediante .env

🔗 Demo en producción

🔗 Repositorio GitHub (frontend)

Qué demuestra este proyecto

Este proyecto demuestra mi capacidad para:

• Diseñar frontends orientados a datos reales
• Reutilizar componentes de forma coherente
• Integrar visualización avanzada de datos
• Consumir APIs complejas sin trasladar lógica al cliente
• Pensar en despliegue web y móvil desde el diseño
• Construir software en producción, no demos

Imágenes del proyecto