# Plan Maestro para la Automatización del Dashboard de Flipbook

## Descripción General y Objetivos de la Aplicación
Esta aplicación tiene como objetivo automatizar el proceso de gestión de flipbooks dentro de un entorno interno de la empresa. El objetivo principal es agilizar el proceso de cargar PDFs, asignarlos a dominios o subdominios específicos y gestionar los flipbooks sin necesidad de configuraciones manuales o valores hardcoded.

### Aclaración:
**Siempre se utilizará el plugin de Envato y su archivo JS**. La diferencia es que en lugar de configurarlo de manera manual y hardcoded como se hace actualmente, el proceso de integración se automatizará. Esto incluirá la carga automática de PDFs en S3, la asignación de flipbooks a subdominios y la inyección automática de Google Tag (gtag.js) para el seguimiento, todo dentro de una interfaz de dashboard. Así, el plugin de Envato y su JS seguirán siendo los componentes principales para la visualización de los flipbooks, pero con el objetivo de agilizar la gestión de los flipbooks y facilitar su integración a diferentes subdominios de forma más eficiente y controlada.

**El plugin de Envato y su JS** se integrarán en el **backend** de la aplicación, específicamente cuando se genere la página HTML para cada flipbook. El backend gestionará la URL del PDF y la inyección del JS, y cuando se asignen los flipbooks a un dominio, el JS de Envato se incluirá automáticamente en la página generada. Esto asegura que los flipbooks siempre se rendericen correctamente según el estándar de Envato.

## Integración y Comunicación de Componentes
Aquí se describe cómo los distintos componentes del sistema se intercomunicarán:

1. **Frontend (Dashboard)**:
   - El frontend será la interfaz de usuario donde los administradores internos gestionarán los flipbooks, asignarán dominios, cargarán PDFs y configurarán el seguimiento de Google Tag.
   - Estará construido con un framework como **React** o **Vue.js**, proporcionando una interfaz moderna, interactiva y fácil de usar.
   - La comunicación con el backend se hará mediante API RESTful que permite realizar acciones como subir PDFs, gestionar flipbooks y configurar el tracking de Google Tag.
   
2. **Backend (Servidor de Aplicación)**:
   - El backend se encargará de la lógica de negocio y de gestionar las solicitudes del frontend. Estará basado en **Node.js + Express** o **Django**.
   - El backend manejará la autenticación de usuarios con 2FA, la carga de PDFs a Amazon S3, y la generación dinámica de las páginas HTML para cada flipbook.
   - El **plugin de Envato** y su **archivo JS** se incluirán de manera automática cuando el backend genere el HTML del flipbook. El backend insertará las URLs de los PDFs almacenados en S3 y el código necesario para visualizar el flipbook utilizando el plugin de Envato.
   - El backend también gestionará la relación entre flipbooks y subdominios, asegurándose de que cada flipbook se asigne correctamente a un dominio o subdominio.

3. **Amazon S3**:
   - Amazon S3 se utilizará para almacenar los archivos PDF. Cuando los administradores suban un nuevo PDF a través del dashboard, este se almacenará automáticamente en un bucket de S3.
   - La URL del archivo PDF en S3 será gestionada por el backend y se insertará dinámicamente en la página HTML generada para el flipbook.
   
4. **Envato Plugin y JS (Flipper)**:
   - El plugin de **Envato Flipbook** y su archivo JS seguirán siendo la herramienta principal para renderizar los flipbooks. Estos se incluirán en la página HTML generada por el backend cuando se asignen flipbooks a un subdominio.
   - El JS de Envato controlará la visualización interactiva del flipbook (navegación, zoom, etc.).
   - El **gtag.js** de Google Analytics también se incluirá en esta página HTML para permitir el seguimiento de interacciones dentro del flipbook.
   
5. **Google Tag (gtag.js)**:
   - Desde el dashboard, el equipo de marketing podrá configurar el ID de seguimiento de **Google Analytics**. Este código de seguimiento (gtag.js) será inyectado en el HTML generado por el backend, específicamente en la página del flipbook cuando se asigna a un subdominio.
   - Este proceso se automatiza para que no haya intervención manual cuando se asignan flipbooks a subdominios, garantizando que todos los flipbooks tengan el seguimiento adecuado sin esfuerzo adicional por parte de los administradores.

6. **Usuario Final (Visualización del Flipbook)**:
   - El usuario final, al acceder al subdominio asignado (por ejemplo, `docs.sar.com`), será redirigido a la página del flipbook.
   - El flipbook se visualizará utilizando el plugin de Envato y su JS, que manejará la interacción (navegación, zoom, etc.) según lo configurado desde el backend.
   - El **gtag.js** integrado permitirá al equipo de marketing hacer un seguimiento de cómo los usuarios interactúan con el flipbook, ayudando a obtener datos sobre su uso.

## Audiencia Objetivo
Usuarios internos dentro de la empresa que necesitan gestionar los flipbooks y asociarlos a dominios específicos. Estos usuarios tendrán acceso al dashboard con autenticación 2FA.

## Características y Funcionalidades Principales
1. **Carga de PDFs**: Los usuarios podrán subir nuevos PDFs para ser usados como flipbooks.
2. **Gestión desde el Dashboard**: Un dashboard permitirá a los usuarios gestionar los flipbooks, ver los activos y editar títulos y URLs.
3. **Asignación de Subdominios**: Los flipbooks serán asignados manualmente a dominios o subdominios (por ejemplo, `docs.sar.com`).
4. **Opción de Vista Previa**: Los administradores podrán previsualizar los flipbooks antes de asignarlos a un dominio.
5. **Autenticación 2FA**: Solo los usuarios internos podrán acceder al dashboard, con autenticación 2FA para mayor seguridad.
6. **Gestión Automática de PDFs**: Los PDFs se subirán automáticamente a Amazon S3.
7. **Integración de Google Tag (gtag.js) Dinámica**: El equipo de marketing podrá configurar el ID de seguimiento de Google Analytics (gtag), y este código se inyectará automáticamente en el HTML del flipbook cuando se asigne a un subdominio.

## Recomendaciones de Stack Técnico
1. **Frontend**: Un framework moderno de JavaScript como React o Vue.js para construir el dashboard.
2. **Backend**: Node.js con Express.js o Django para gestionar los datos de los flipbooks, la autenticación de usuarios y la generación dinámica del HTML con el JS de Envato.
3. **Base de Datos**: PostgreSQL o MySQL para almacenamiento de datos relacionales (por ejemplo, cuentas de usuarios, metadatos de flipbooks).
4. **Hosting**: Contenedores Docker desplegados en Heroku para simplicidad y escalabilidad.
5. **Almacenamiento de Archivos**: Amazon S3 para almacenar PDFs y otros archivos multimedia.
6. **Autenticación**: Implementación de 2FA utilizando un servicio como 1Password o Authy para los usuarios internos.
7. **Seguridad**: HTTPS para la transmisión de datos de manera segura, políticas de contraseñas fuertes y JWT para la gestión de sesiones.
8. **Plugin de Envato y JS Flipper**: El plugin y el JS estarán alojados en el backend, y el servidor generará dinámicamente la página HTML con el JS de Envato. Este JS será inyectado en el HTML cuando un flipbook se asigne a un subdominio.

## Modelo Conceptual de Datos
- **Usuarios**: Información sobre los usuarios internos, incluyendo roles y estado de 2FA.
- **Flipbooks**: Metadatos de los flipbooks (título, subdominio, URL del PDF, ID de Google Tag, etc.)
- **Subdominios**: Relaciones entre flipbooks y subdominios.
- **PDFs**: URLs a los PDFs almacenados en S3.

## Principios de Diseño de la Interfaz de Usuario
- **Diseño Minimalista**: Priorizar la funcionalidad sobre la estética visual. Una interfaz limpia y fácil de usar.
- **Diseño Responsivo**: Asegurar que la interfaz funcione bien en todos los dispositivos, especialmente móviles.
- **Animaciones Suaves**: Proveer una experiencia intuitiva y fluida al navegar por los flipbooks y el dashboard.

## Consideraciones de Seguridad
1. **2FA para Acceso al Dashboard**: Asegura que solo los usuarios autorizados puedan acceder y gestionar los flipbooks.
2. **Datos Encriptados**: Los datos sensibles, como las credenciales de los usuarios, se encriptarán tanto en tránsito como en reposo.
3. **Controles de Acceso**: Los usuarios tendrán acceso basado en roles, con permisos limitados para diferentes tipos de usuarios.

## Fases de Desarrollo y Hitos

### Fase 1: **Análisis de Requisitos y Planificación (1-2 semanas)**
- Finalizar las características principales y obtener retroalimentación de las partes interesadas.
- Crear wireframes y maquetas del dashboard.
- Definir el esquema de la base de datos y los endpoints de la API.
- Configurar la estructura del proyecto y el entorno de desarrollo.

### Fase 2: **Desarrollo Frontend y Backend (4-6 semanas)**
- **Frontend**: Desarrollar la interfaz del dashboard utilizando React o Vue.js.
- **Backend**: Construir los endpoints de la API para gestionar los flipbooks, la autenticación de usuarios y la carga de PDFs.
- Integrar 2FA y autenticación segura.
- Implementar la funcionalidad de vista previa de flipbooks.
- Conectar el frontend con el backend para gestionar contenido dinámico.
- **Integración de Google Tag**: Implementar un campo en el dashboard donde el equipo de marketing pueda agregar el ID de Google Analytics (gtag), y que este se inyecte automáticamente en el HTML del flipbook cuando se asigne a un subdominio.

### Fase 3: **Pruebas y Refinamiento (2-3 semanas)** 
- Realizar pruebas unitarias y pruebas de integración.
- Asegurar que las características de seguridad como 2FA y almacenamiento encriptado funcionen correctamente.
- Realizar pruebas de aceptación del usuario (UAT) para asegurarse de que el sistema satisface las necesidades de los usuarios internos.
- Implementar retroalimentación y pulir la interfaz de usuario.

### Fase 4: **Despliegue y Automatización (2-3 semanas)** 
- Configurar Heroku y Docker para el despliegue.
- Implementar pipeline CI/CD para pruebas y despliegue automáticos.
- Configurar Amazon S3 para almacenamiento de archivos e integrarlo con el backend.
- Realizar despliegues en staging y producción.
- Asegurar el despliegue automático de PDFs a S3.

### Fase 5: **Monitoreo y Mantenimiento (Continuo)** 
- Implementar monitoreo y logging para rastrear el rendimiento de la aplicación y los errores.
- Resolver informes de errores e incidencias a medida que surjan.
- Optimizar la aplicación para el rendimiento y la escalabilidad según sea necesario.

## Desafíos Potenciales y Soluciones
1. **Seguridad de Datos**: Asegurar que los datos sensibles (como las credenciales de usuario) se almacenen y transmitan de manera segura.
   - **Solución**: Utilizar cifrado y HTTPS para todas las comunicaciones.
2. **Gestión de Carga de PDFs**: Manejar archivos grandes y asegurar que los PDFs se procesen correctamente.
   - **Solución**: Usar Amazon S3 para almacenamiento eficiente e implementar tareas en segundo plano para el procesamiento de PDFs.
3. **Gestión de Subdominios**: Asegurar que los flipbooks se asignen correctamente a los subdominios correspondientes.
   - **Solución**: Implementar validación y logging para asegurar el proceso de asignación correcto.

## Posibilidades de Expansión Futuras
- **Personalización Adicional**: Permitir a los usuarios personalizar la interfaz del flipbook, incluyendo temas y características interactivas.
- **Aplicación Móvil**: Desarrollar una aplicación móvil nativa para gestionar y visualizar flipbooks sobre la marcha.
- **Análisis de Usuarios**: Integrar análisis para rastrear la interacción de los usuarios con los flipbooks.