{"id":11259,"date":"2025-11-29T18:41:15","date_gmt":"2025-11-29T17:41:15","guid":{"rendered":"https:\/\/bitacora.eniac2000.com\/?p=11259"},"modified":"2025-11-29T18:41:18","modified_gmt":"2025-11-29T17:41:18","slug":"desarrollo-con-ia-aplicacion-para-gestion-de-fechas-en-fotografias-digitales","status":"publish","type":"post","link":"https:\/\/bitacora.eniac2000.com\/?p=11259","title":{"rendered":"Desarrollo con IA: Aplicaci\u00f3n para gesti\u00f3n de fechas en fotograf\u00edas digitales"},"content":{"rendered":"\n

Uno de los proyectos en los que he estado trabajando \u00faltimamente, y que es otro de los proyectos en los que he usado IA generativa, ha sido el desarrollo de una aplicaci\u00f3n destinada a gestionar de manera masiva las fechas de fotograf\u00edas digitales.<\/p>\n\n\n\n

\"\"
Posible logotipo de la aplicaci\u00f3n. Generado con IA<\/figcaption><\/figure>\n\n\n\n

El Problema: Una C\u00e1mara Kodak con Fecha de Caducidad<\/h2>\n\n\n\n

El motivo por el que empec\u00e9 a pensar en este desarrollo fue que una de mis c\u00e1maras fotogr\u00e1ficas, una veterana Kodak EasyShare P712. A pesar de su antig\u00fcedad, sigue sigue siendo una c\u00e1mara fotogr\u00e1fica con una \u00f3ptica estupenda, que permite sacar fotograf\u00edas estupendas pese a sus 7.1 megap\u00edxeles de resoluci\u00f3n. Sin embargo, como muchos dispositivos electr\u00f3nicos de cierta edad, tiene una limitaci\u00f3n importante en su firmware: su sistema de fecha no admite valores posteriores al 31 de diciembre de 2025. Esto significa que, a partir de esa fecha, cualquier foto que se tome con ella tendr\u00e1 una fecha incorrecta en sus metadatos EXIF, lo que dificulta enormemente la organizaci\u00f3n y gesti\u00f3n cronol\u00f3gica de las fotograf\u00edas en mi sistema de almacenamiento, que se basa en la utilizaci\u00f3n de esta informaci\u00f3n EXIF para mostrar una l\u00ednea cronol\u00f3gica.<\/p>\n\n\n\n

\"\"
C\u00e1mara Kodak EasyShare P712. Una verdadera veterana<\/figcaption><\/figure>\n\n\n\n

\u00a0Los metadatos EXIF (Exchangeable Image File Format) son cruciales. No solo registran la fecha y hora de la captura, sino tambi\u00e9n informaci\u00f3n sobre la c\u00e1mara, la exposici\u00f3n, la ubicaci\u00f3n GPS (en el caso de tel\u00e9fonos) y mucho m\u00e1s. Perder la precisi\u00f3n en la fecha es como perder una parte de la historia de cada foto. Ante esta obsolescencia contenida en el firmware, decid\u00ed que no iba a dejar que mi Kodak se jubilara antes de tiempo. Existen aplicaciones que permiten cambiar esta informaci\u00f3n en las fotograf\u00edas, la mayor\u00eda de las veces desde l\u00ednea de comandos, o bien de manera individualizaba. Pero no encontraba soluciones satisfactorias para realizar el cambio de fechas de manera masiva y, sobre todo, conservando las diferencias horarias relativas entre fotograf\u00eda y fotograf\u00eda. Y la soluci\u00f3n para ello iba a ser el construir una aplicaci\u00f3n que me permitiera corregir estas fechas de forma sencilla y eficiente.
<\/p>\n\n\n\n

Una soluci\u00f3n software:<\/em> Aplicaci\u00f3n Editor de Fecha EXIF<\/h2>\n\n\n\n

As\u00ed naci\u00f3 el \u00abEditor de Fecha EXIF de Im\u00e1genes\u00bb. Es una aplicaci\u00f3n web dise\u00f1ada para corregir las fechas de captura (DateTimeOriginal<\/code>, CreateDate<\/code>, DateTime<\/code>) en archivos JPEG, tanto de forma individual como por lotes. Pero la soluci\u00f3n no se queda ah\u00ed; la aplicaci\u00f3n tambi\u00e9n permite descargar las im\u00e1genes corregidas y, lo que es m\u00e1s importante, subirlas directamente a plataformas como Piwigo o a un servidor SFTP.<\/p>\n\n\n\n

\"\"
Interfaz inicial de la aplicaci\u00f3n de modificaci\u00f3n de fechas de im\u00e1genes<\/figcaption><\/figure>\n\n\n\n

Para elaborarlo, utilic\u00e9 dyad<\/a> como entorno de desarrollo basado en IA. La idea era tener un entorno completamente desplegado en un servidor Debian, sin dependencias externas con Supabase o cualquier otro tipo de plataforma ajena al propio servidor.<\/p>\n\n\n\n

El proceso de desarrollo fue guiado tanto en lo referente al frontal, que fue un proceso relativamente sencillo y sin grandes particularidades, como en lo relativo al backend.\u00a0<\/em>Esto s\u00ed present\u00f3 m\u00e1s inconvenientes, ya que Dyad tiene una fuerte apetencia por hacer uso de Supabase, y fue preciso ser muy insistente para conseguir que el desarrollo se orientara hacia un backend<\/em> convencional.<\/p>\n\n\n\n

Caracter\u00edsticas Clave:<\/h3>\n\n\n\n
    \n
  • Edici\u00f3n Flexible:<\/strong> Corrige fechas individualmente o aplica correcciones por lotes basadas en una fecha de referencia.<\/li>\n\n\n\n
  • Previsualizaci\u00f3n Instant\u00e1nea:<\/strong> Visualiza las im\u00e1genes con sus fechas originales y las fechas corregidas.<\/li>\n\n\n\n
  • Descarga Segura:<\/strong> Descarga las im\u00e1genes procesadas en un archivo ZIP.<\/li>\n\n\n\n
  • Integraci\u00f3n con Piwigo:<\/strong> Configura tus credenciales, navega por tus \u00e1lbumes, crea nuevos y sube im\u00e1genes directamente.<\/li>\n\n\n\n
  • Integraci\u00f3n con SFTP:<\/strong> Con\u00e9ctate a tu servidor SFTP, navega por directorios, crea carpetas, renombra, elimina y sube tus im\u00e1genes corregidas de forma segura.<\/li>\n\n\n\n
  • Persistencia de Configuraci\u00f3n:<\/strong> Todas las configuraciones (servidor EXIF, Piwigo, SFTP) se guardan de forma segura en una base de datos.<\/li>\n<\/ul>\n\n\n\n

    Bajo el Cap\u00f3: Arquitectura y Tecnolog\u00edas<\/h2>\n\n\n\n

    La aplicaci\u00f3n sigue una arquitectura cliente-servidor, dividida en un frontend interactivo y un robusto backend.<\/p>\n\n\n\n

    Frontend: La Interfaz de Usuario<\/h3>\n\n\n\n

    El frontend<\/em> est\u00e1 construido con React<\/strong> y TypeScript<\/strong>, lo que nos permite crear una interfaz de usuario din\u00e1mica y mantener la robustez del c\u00f3digo gracias al tipado est\u00e1tico. Para el estilo, he optado por Tailwind CSS<\/strong>, un framework que facilita la creaci\u00f3n de dise\u00f1os responsivos y atractivos con clases de utilidad. Los componentes de UI provienen de shadcn\/ui<\/strong> y Radix UI<\/strong>, garantizando accesibilidad y un aspecto pulido.<\/p>\n\n\n\n

    La navegaci\u00f3n se gestiona con React Router<\/strong>, mientras que la carga de im\u00e1genes se simplifica con react-dropzone<\/strong>. Para la manipulaci\u00f3n de fechas, date-fns<\/strong> es nuestro aliado, y para la descarga de m\u00faltiples im\u00e1genes, JSZip<\/strong> se encarga de empaquetarlas en un archivo ZIP. Las notificaciones al usuario se manejan con sonner<\/strong>, proporcionando un feedback claro y conciso.<\/p>\n\n\n\n

    \"\"
    Interfaz con im\u00e1genes cargadas y fechas corregidas por lotes<\/figcaption><\/figure>\n\n\n\n

    La modificaci\u00f3n de fechas puede realizarse por lotes al conjunto de im\u00e1genes, o de manera individual. Tambi\u00e9n es posible corregir tanto fecha y hora como s\u00f3lo fecha, conservando la hora original de las im\u00e1genes. En el caso de la modificaci\u00f3n por lotes de fecha y hora, las horas de las im\u00e1genes conservar\u00e1n el diferencial con respecto a la primera imagen del lote que tuvieran originalmente.<\/p>\n\n\n\n

    Una vez modificadas las fechas, es posible realizar tres acciones con las im\u00e1genes:<\/p>\n\n\n\n

      \n
    • Descarga de las im\u00e1genes al equipo local<\/strong>: Las im\u00e1genes se descargan mediante un fichero zip.<\/li>\n\n\n\n
    • Subir las im\u00e1genes a Piwigo<\/strong>: Es posible definir un servidor Piwigo con el que interactuar. Se dispone de una interfaz de subida de im\u00e1genes a esta plataforma, que muestra los \u00e1lbumes a los que el usuario tiene permiso, y se permite subir im\u00e1genes a cualquiera de estos \u00e1lbumes, o bien definir un \u00e1lbum nuevo.<\/li>\n\n\n\n
    • Subir las im\u00e1genes a un servidor SFTP<\/strong>: La \u00faltima opci\u00f3n para almacenar las im\u00e1genes es cargarlas a un servidor SFTP. Igual que en el caso anterior, se puede navegar por la estructura de carpetas, y crear subcarpetas de acuerdo a nuestras necesidades.<\/li>\n<\/ul>\n\n\n\n
      \"\"
      Interfaz de subida de im\u00e1genes a Piwigo<\/figcaption><\/figure>\n\n\n\n
      \"\"
      Interfaz de subida de im\u00e1genes a un servidor SFTP<\/figcaption><\/figure>\n\n\n\n


      Backend: El Cerebro de la Operaci\u00f3n<\/h3>\n\n\n\n

      El backend<\/em>, desarrollado en Node.js<\/strong> con el framework Express<\/strong>, es el encargado de la l\u00f3gica pesada. Aqu\u00ed es donde ocurre la magia de la edici\u00f3n EXIF.<\/p>\n\n\n\n

        \n
      • Procesamiento EXIF:<\/strong> La joya de la corona es la integraci\u00f3n con exiftool<\/code><\/strong>, una potente herramienta de l\u00ednea de comandos. El backend utiliza child_process<\/code><\/strong> para ejecutar comandos de exiftool<\/code>, leyendo y escribiendo los metadatos de las im\u00e1genes. Esto permite una manipulaci\u00f3n precisa y fiable de las fechas.<\/li>\n\n\n\n
      • Gesti\u00f3n de Archivos:<\/strong> Multer<\/strong> se encarga de la subida de archivos desde el frontend, gestionando los datos multipart\/form-data<\/code>.<\/li>\n\n\n\n
      • Base de Datos:<\/strong> La configuraci\u00f3n de Piwigo, SFTP y la URL del servidor EXIF se almacenan de forma persistente en una base de datos MariaDB\/MySQL<\/strong>, utilizando el cliente mysql2\/promise<\/code><\/strong> para interacciones as\u00edncronas.<\/li>\n\n\n\n
      • Seguridad:<\/strong> Las credenciales sensibles (como las contrase\u00f1as de Piwigo y SFTP) se cifran antes de ser almacenadas en la base de datos, utilizando el m\u00f3dulo crypto<\/code><\/strong> de Node.js con una clave de cifrado definida en las variables de entorno.<\/li>\n\n\n\n
      • Comunicaci\u00f3n Externa:<\/strong> node-fetch<\/code><\/strong> y form-data<\/code><\/strong> se utilizan para interactuar con la API de Piwigo, permitiendo la autenticaci\u00f3n, listado de \u00e1lbumes, creaci\u00f3n de nuevos \u00e1lbumes y la subida de im\u00e1genes. Para SFTP, se utiliza ssh2-sftp-client<\/code><\/strong> para la navegaci\u00f3n y subida de archivos.<\/li>\n\n\n\n
      • CORS:<\/strong> El middleware CORS<\/strong> est\u00e1 configurado para permitir la comunicaci\u00f3n segura entre el frontend<\/em> (que se ejecuta en un puerto diferente) y el backend<\/em>.<\/li>\n<\/ul>\n\n\n\n


        Comunicaci\u00f3n Frontend-Backend<\/h3>\n\n\n\n

        La comunicaci\u00f3n entre el frontend y el backend se realiza a trav\u00e9s de una API REST. Para simplificar el desarrollo y evitar problemas de CORS en entornos de desarrollo, se utiliza un proxy configurado en vite.config.ts<\/code>. Este proxy redirige las peticiones a rutas como \/exif<\/code>, \/piwigo<\/code> y \/sftp<\/code> directamente al backend, que escucha en el puerto 8082<\/code>.<\/p>\n\n\n\n

        Proceso de Desarrollo<\/h2>\n\n\n\n

        El desarrollo se centr\u00f3 en la modularidad y la reusabilidad. Se crearon componentes espec\u00edficos para cada parte de la interfaz (como ImageCard<\/code> para mostrar y editar im\u00e1genes individualmente, o los di\u00e1logos de configuraci\u00f3n para Piwigo y SFTP). El uso de TypeScript fue fundamental para detectar errores en tiempo de desarrollo y mejorar la mantenibilidad del c\u00f3digo a medida que la aplicaci\u00f3n crec\u00eda en complejidad. La separaci\u00f3n clara de responsabilidades entre frontend y backend permiti\u00f3 un desarrollo paralelo y una mayor escalabilidad.<\/p>\n\n\n\n

        Despliegue en un Servidor Debian con Systemd<\/h3>\n\n\n\n

        Para llevar la aplicaci\u00f3n a producci\u00f3n, opt\u00e9 por un despliegue robusto y gestionado por Systemd<\/strong> en un servidor Debian. Esto asegura que tanto el frontend<\/em> como el backend<\/em> se inicien autom\u00e1ticamente al arrancar el servidor y se reinicien en caso de fallos.<\/p>\n\n\n\n

        Prerrequisitos del Servidor:<\/h3>\n\n\n\n
          \n
        • Node.js y npm:<\/strong> Para ejecutar las aplicaciones.<\/li>\n\n\n\n
        • MariaDB\/MySQL:<\/strong> Para la base de datos de configuraci\u00f3n.<\/li>\n\n\n\n
        • Exiftool:<\/strong> Instalado y accesible en el servidor para el procesamiento de im\u00e1genes.<\/li>\n<\/ul>\n\n\n\n

          Configuraci\u00f3n de la Base de Datos:<\/h3>\n\n\n\n

          Se crea una base de datos y un usuario espec\u00edfico, y se ejecuta un script SQL (database_setup.sql<\/code>) para crear la tabla piwigo_config<\/code>, que almacenar\u00e1 las configuraciones de la aplicaci\u00f3n.
          <\/p>\n\n\n\n

          Despliegue del Backend:<\/h3>\n\n\n\n
            \n
          • Los archivos del backend se copian a una ubicaci\u00f3n en el servidor (ej. \/var\/www\/exif-backend<\/code>).<\/li>\n\n\n\n
          • Se crea un archivo .env<\/code> con la clave de cifrado (\u00a132 caracteres exactos!<\/strong>) y las credenciales de la base de datos.<\/li>\n\n\n\n
          • Se define un servicio systemd<\/code> (exif-backend.service<\/code>) que especifica el usuario bajo el cual se ejecutar\u00e1, el directorio de trabajo y el comando de inicio (\/usr\/bin\/node server.js<\/code>). Este servicio se configura para escuchar en el puerto 8082<\/code> y reiniciarse autom\u00e1ticamente.<\/li>\n<\/ul>\n\n\n\n

            Despliegue del Frontend:<\/h3>\n\n\n\n
              \n
            • El frontend se construye localmente con npm run build<\/code>, generando una carpeta dist<\/code> con los archivos est\u00e1ticos.<\/li>\n\n\n\n
            • Esta carpeta dist<\/code> se copia al servidor (ej. \/var\/www\/exif-frontend<\/code>).<\/li>\n\n\n\n
            • Se instala globalmente el paquete serve<\/code> de npm en el servidor.<\/li>\n\n\n\n
            • Se crea un servicio systemd<\/code> (exif-frontend.service<\/code>) que utiliza serve -s dist -l 8081<\/code> para servir los archivos est\u00e1ticos del frontend en el puerto 8081<\/code>, tambi\u00e9n con reinicio autom\u00e1tico.<\/li>\n<\/ul>\n\n\n\n


              Configuraci\u00f3n del Firewall:<\/h3>\n\n\n\n

              Es crucial abrir los puertos 8081<\/code> (frontend) y 8082<\/code> (backend) en el firewall del servidor (por ejemplo, con ufw<\/code>) para permitir el acceso externo a la aplicaci\u00f3n.
              <\/p>\n\n\n\n

              Conclusi\u00f3n<\/h2>\n\n\n\n

              Con este proyecto he podido gestionar el inconveniente de las fechas incorrectas que voy a tener en mi c\u00e1mara Kodak a partir de 2026. Adem\u00e1s, me ha permitido explorar y consolidar conocimientos en desarrollo asistido por IA, con trabajos relacionados con el desarrollo web full-stack<\/em>, seguridad y despliegue en entornos de producci\u00f3n. <\/p>\n","protected":false},"excerpt":{"rendered":"

              Uno de los proyectos en los que he estado trabajando<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1845,13],"tags":[517,1847,1849,824,908,1848,1868],"series":[],"class_list":["post-11259","post","type-post","status-publish","format-standard","hentry","category-generado-con-ia","category-informatica","tag-debian","tag-dyad","tag-exif","tag-ia","tag-kodak","tag-piwigo","tag-sftp"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=\/wp\/v2\/posts\/11259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11259"}],"version-history":[{"count":8,"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=\/wp\/v2\/posts\/11259\/revisions"}],"predecessor-version":[{"id":11273,"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=\/wp\/v2\/posts\/11259\/revisions\/11273"}],"wp:attachment":[{"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=11259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=11259"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=%2Fwp%2Fv2%2Fseries&post=11259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}