VOLVER AL TALLER
Proyecto personal / Diseño y tecnología

Mis cuentas, en una sola pantalla.

Quería ver mis cuentas, lo que tengo invertido y lo que gasto cada mes sin ir saltando de una app a otra. Así lo hemos ido montando con Codex.

Quería tener a mano algo bastante concreto: cuánto dinero tengo en las cuentas, cuánto está invertido y cómo van los ingresos y gastos de cada mes. Y quería poder mirarlo desde el móvil sin tener que entrar en cada banco.

Así se ve el panelDemo interactiva. Datos ficticios.
Acceso privado

Mi dinero.

Solo lectura
Patrimonio total€18,420.0018.420,00 €El total suma cuentas e inversiones, sin duplicar saldos.
Dinero en cuentas€8,120.008120,00 €
Inversiones€10,300.0010.300,00 €
Dónde está el dinero
Dinero en cuentasFondosAcciones y ETF

Esto es una demo y no está conectada a ninguna cuenta bancaria.

Puedes tocar las pestañas para ver cómo se organiza el panel. Los importes, las cuentas y los productos de este ejemplo son ficticios.

Conectar las cuentas

Probamos varias formas de traer los datos de los bancos. Terminamos combinando open banking con un lector experimental de inversiones, basado en Finanze para el acceso inicial desde el ordenador. En esa vía, la contraseña se introduce en el equipo y al servidor se le entrega una sesión cifrada que puede renovar.

Una vez enlazado, puedo consultar el panel desde el móvil aunque el ordenador esté apagado. El servidor conserva la última lectura correcta. Si el banco pide una nueva confirmación, el conector se detiene y espera a que la complete.

Cómo funciona por dentro
  1. 01API

    Los bancos

    Cuentas e inversiones autorizadas

  2. 02GET

    El conector

    Lee los datos y renueva la sesión

  3. 03AES

    Datos cifrados

    AES-256-GCM, ligado al propietario y al uso de los datos

  4. 04PWA

    Panel privado

    El servidor comprueba quién puede entrar

Las consultas están programadas cada seis horas para las cuentas y una vez al día para las inversiones. El banco puede pedir que se renueve la autorización.

Los ingresos del mes no me cuadraban

Al mirar los ingresos del mes, había una cifra que no me cuadraba. Vimos que la primera versión contaba como ingreso los abonos que no reconocía. Si paso dinero de una cuenta mía a otra, el saldo sube, pero ese dinero ya era mío. Lo mismo hay que revisar si llega una devolución o dinero de una inversión.

Ahora, lo que no está claro queda por revisar y los traspasos propios confirmados van aparte. Puedo abrir cada total mensual, ver los movimientos que lo forman y corregir una categoría si hace falta. Esa corrección no cambia los datos originales del banco. Mientras haya movimientos pendientes de clasificar, el ahorro queda pendiente.

Las sumas usan aritmética decimal exacta y las cuentas se comparan por IBAN para no contar dos veces el mismo saldo. La moneda también requirió revisar cómo lo muestra la web de la plataforma: el valor de una posición puede venir en euros y el precio de cada participación, en otra divisa.

En el móvil se cortaban los nombres

Al abrir la cartera en el móvil, los nombres de los fondos quedaban en una columna estrechísima. El importe y la moneda se comían casi toda la fila. Pusimos los nombres y los importes en líneas distintas, simplificamos las fechas y añadimos el total de la cartera con su desglose entre cuentas e inversiones.

La configuración de los bancos tiene ahora su apartado y la analítica de la web está separada. Para el día a día quedan cuatro pantallas: resumen, meses, movimientos y cartera.

Los datos tenían que quedarse privados

01 / Acceso

El acceso se comprueba en el servidor

Para entrar al panel hay que identificarse como propietario. Esa comprobación se hace en el servidor tanto al abrir la página como al pedir datos a la API.

02 / Sesiones

El enlace para compartir la sesión caduca

Con el lector local, la contraseña y el CAPTCHA se introducen en el ordenador. Al servidor se le entrega una sesión que puede renovar. El intercambio se cifra con ECDH P-256 y AES-GCM, y el enlace caduca y solo se puede usar una vez.

03 / Almacenamiento

Las sesiones y los datos se guardan cifrados

Usamos AES-256-GCM para guardar las sesiones, los saldos y los movimientos. Cada registro se vincula a su propietario, a su entidad y al uso para el que se creó. La clave de cifrado permanece en el servidor.

04 / El móvil

Un icono en la pantalla de inicio

Al instalarla como PWA, puedo abrir el panel desde un icono en el móvil. Los datos financieros llegan del servidor: usamos no-store y el service worker no los guarda en la caché. Tampoco se guardan saldos ni movimientos en localStorage.

Si quieres entrar un poco más en lo técnico

Si cambio una categoría o un ajuste, la petición lleva un token CSRF y se comprueba que venga de la misma web. Además, hay un bloqueo breve por conexión para que una actualización no se cruce con una desconexión. El enlace del lector local tiene su propia autorización de un solo uso.

«Solo lectura» es el límite que hemos puesto al panel. La sesión del banco puede tener permisos más amplios, así que también hemos limitado desde el servidor qué consultas puede hacer y a qué direcciones.

Faltaban los meses anteriores

La primera versión pedía los últimos 90 días de movimientos. Para ver meses anteriores tuvimos que ampliar la consulta donde el banco lo permite, recorrer las páginas de resultados y guardar por dónde iba la descarga. Ese avance queda cifrado, así que se puede parar y seguir después. Los movimientos antiguos se conservan aunque la siguiente consulta del banco cubra menos tiempo.

La escritura del archivo pasaba las pruebas locales, pero fallaba en el servidor publicado. Lo cambiamos para guardar los datos por bloques y actualizar el índice cuando esos bloques ya están guardados. El índice usa una comprobación CAS (compare-and-swap) que evita escribir encima de una actualización más reciente. Después comprobamos la reparación con consultas reales a los bancos.

Aun así, el banco decide cuánto histórico entrega y puede pedir que autoricemos de nuevo. El panel muestra las fechas de los datos que han llegado. Las valoraciones pasadas de un fondo, por ejemplo, no se pueden reconstruir solo con movimientos de la cuenta.

Cómo lo fuimos construyendo con Codex

También repartimos tareas en paralelo: leer los bancos, preparar el enlace en Windows, diseñar el panel y revisar la seguridad. Al juntarlo todo, probamos qué pasaba con los enlaces caducados, las páginas repetidas, las cuentas duplicadas o una desconexión en mitad de una actualización.

Yo iba probándolo, sobre todo desde el móvil, y señalando lo que no me encajaba: una cifra que parecía alta, un nombre que se cortaba o una pantalla difícil de entender. Codex iba ayudando a llevar esos cambios al código y a comprobar que no rompiéramos lo que ya funcionaba.

Contexto y perspectiva

Lo hemos construido con Codex a partir de lo que iba necesitando y de los fallos que encontraba al usarlo. Las pantallas de este post están recreadas con datos ficticios.

Herramientas y documentación: Enable Banking · Finanze · Web Crypto API.

Hablemos.

Puedes escribirme por correo o conectar conmigo en LinkedIn.