Actualizar README.md
This commit is contained in:
@@ -1,63 +1,428 @@
|
||||
# Portal Brief Inteligente CDC
|
||||
# CDC Brief GLM
|
||||
|
||||
Sistema generador de briefs inteligentes basado en IA para el análisis de activos multimedia y documentos.
|
||||
Portal web para la captura guiada y procesamiento inteligente de briefs del área CDC de GomezLee Marketing.
|
||||
|
||||
---
|
||||
|
||||
## Descripción
|
||||
Este proyecto es una interfaz frontend moderna y profesional diseñada para automatizar la creación de briefs. El sistema guía al usuario a través de un proceso estructurado que incluye la carga de notas de voz, imágenes de referencia, documentos técnicos y enlaces externos.
|
||||
|
||||
Utiliza un flujo de trabajo de **n8n** en el backend para procesar el audio (transcripción y análisis), analizar imágenes y consolidar toda la información en un brief estructurado en cuestión de segundos.
|
||||
CDC Brief GLM es una aplicación frontend desarrollada para estandarizar la recepción de solicitudes creativas mediante un flujo guiado por pasos. La plataforma permite al usuario enviar una nota de voz, imágenes de referencia, documentos de apoyo, materiales de campaña, enlaces externos y fecha límite de entrega.
|
||||
|
||||
## Características Principales
|
||||
- **Análisis de Audio**: Transcripción y extracción de puntos clave mediante IA.
|
||||
- **Análisis de Imágenes**: Procesamiento visual para referencias de diseño.
|
||||
- **Gestión de Documentos**: Soporte para PDF, Excel, PowerPoint y Word.
|
||||
- **Flujo Guiado**: Interfaz por pasos para garantizar la calidad de la información.
|
||||
- **Autenticación Corporativa**: Acceso restringido vía Google Auth para dominios autorizados.
|
||||
La información enviada desde el portal se procesa mediante un webhook de n8n, el cual recibe los archivos y datos del brief para generar una carpeta de trabajo en Google Drive y consolidar la información necesaria para continuar el flujo operativo del equipo CDC.
|
||||
|
||||
---
|
||||
|
||||
## Objetivo del proyecto
|
||||
|
||||
Centralizar y ordenar la solicitud inicial de briefs creativos, reduciendo vacíos de información y facilitando que el equipo CDC reciba insumos completos, trazables y organizados desde el primer contacto.
|
||||
|
||||
El portal busca:
|
||||
|
||||
* Guiar al usuario en la captura de información mínima requerida.
|
||||
* Recibir audio, imágenes, documentos, archivos de campaña y enlaces externos.
|
||||
* Enviar todos los datos al flujo automatizado de n8n.
|
||||
* Mostrar una respuesta clara del portal con la carpeta generada y el resumen del procesamiento.
|
||||
* Mantener una experiencia visual alineada con la identidad de GomezLee Marketing.
|
||||
|
||||
---
|
||||
|
||||
## Alcance funcional
|
||||
|
||||
La aplicación incluye los siguientes módulos y pasos:
|
||||
|
||||
| Paso | Nombre | Descripción |
|
||||
| ---- | ---------------------- | -------------------------------------------------------------------------------------- |
|
||||
| 1 | Nota de voz | Permite grabar o adjuntar una nota de voz explicando el brief. |
|
||||
| 2 | Imágenes de referencia | Permite adjuntar imágenes visuales de apoyo. |
|
||||
| 3 | Documentos | Permite adjuntar documentos opcionales como PDF, Excel, PowerPoint o Word. |
|
||||
| 4 | Campaña / gráficos | Permite adjuntar archivos relacionados con campañas o elementos gráficos existentes. |
|
||||
| 5 | Referencias online | Permite agregar enlaces externos como referencia. |
|
||||
| 6 | Revisión y envío | Permite revisar la información, definir fecha límite de entrega y enviar la solicitud. |
|
||||
|
||||
---
|
||||
|
||||
## Características principales
|
||||
|
||||
* Interfaz guiada por pasos.
|
||||
* Autenticación corporativa con Firebase.
|
||||
* Restricción de acceso según configuración del proyecto.
|
||||
* Carga de archivos multimedia y documentos.
|
||||
* Grabación y reproducción de nota de voz.
|
||||
* Campo obligatorio de fecha límite de entrega.
|
||||
* Envío de datos y archivos mediante FormData al webhook de n8n.
|
||||
* Visualización de respuesta del portal.
|
||||
* Copia y apertura directa del enlace de carpeta generada.
|
||||
* Diseño visual alineado al branding GLM.
|
||||
* Favicon corporativo GLM.
|
||||
* Carpeta `dist/` incluida para despliegue estático cuando aplique.
|
||||
|
||||
---
|
||||
|
||||
## Stack técnico
|
||||
|
||||
| Componente | Tecnología |
|
||||
| ---------------------- | -------------------------------------------------------------- |
|
||||
| Frontend | React |
|
||||
| Lenguaje | TypeScript |
|
||||
| Build tool | Vite |
|
||||
| Estilos | CSS |
|
||||
| Autenticación | Firebase Auth |
|
||||
| Automatización backend | n8n Webhook |
|
||||
|
||||
---
|
||||
|
||||
## Estructura del repositorio
|
||||
|
||||
```text
|
||||
cdcbrief-glm/
|
||||
├── dist/ # Build de producción generado por Vite
|
||||
├── public/ # Assets públicos
|
||||
├── src/ # Código fuente de la aplicación
|
||||
│ ├── components/ # Componentes visuales y funcionales
|
||||
│ ├── services/ # Servicios de integración
|
||||
│ ├── App.tsx # Componente principal
|
||||
│ └── main.tsx # Punto de entrada
|
||||
├── .env.example # Ejemplo de variables de entorno requeridas
|
||||
├── .gitignore # Exclusiones del repositorio
|
||||
├── index.html # HTML base de Vite
|
||||
├── metadata.json # Metadata del proyecto
|
||||
├── package.json # Dependencias y scripts
|
||||
├── package-lock.json # Lockfile de npm
|
||||
├── tsconfig.json # Configuración TypeScript
|
||||
├── vite.config.ts # Configuración de Vite
|
||||
└── README.md # Documentación del proyecto
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Requisitos
|
||||
- Node.js (v18 o superior recomendado)
|
||||
- npm o yarn
|
||||
- Instancia de n8n con el workflow de procesamiento de briefs configurado
|
||||
- Proyecto en Firebase para la autenticación
|
||||
|
||||
## Cómo instalar
|
||||
1. Clonar el repositorio.
|
||||
2. Ejecutar la instalación de dependencias:
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
Antes de instalar o correr el proyecto, validar que el ambiente tenga:
|
||||
|
||||
## Cómo correr en local
|
||||
1. Asegúrate de tener el archivo `.env` configurado (puedes basarte en `.env.example`).
|
||||
2. Inicia el servidor de desarrollo:
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
3. Abre [http://localhost:3000](http://localhost:3000) en tu navegador.
|
||||
* Node.js 18 o superior.
|
||||
* npm instalado.
|
||||
* Acceso al repositorio en Gitea.
|
||||
* Archivo `.env` configurado localmente.
|
||||
* Proyecto Firebase configurado.
|
||||
* Webhook de n8n activo y disponible.
|
||||
|
||||
---
|
||||
|
||||
## Variables de entorno
|
||||
|
||||
El proyecto requiere un archivo `.env` en la raíz del repositorio.
|
||||
|
||||
Tomar como base el archivo `.env.example`.
|
||||
|
||||
```env
|
||||
VITE_FIREBASE_API_KEY=
|
||||
VITE_FIREBASE_AUTH_DOMAIN=
|
||||
VITE_FIREBASE_PROJECT_ID=
|
||||
VITE_FIREBASE_STORAGE_BUCKET=
|
||||
VITE_FIREBASE_MESSAGING_SENDER_ID=
|
||||
VITE_FIREBASE_APP_ID=
|
||||
VITE_WEBHOOK_URL=
|
||||
```
|
||||
|
||||
### Descripción de variables
|
||||
|
||||
| Variable | Descripción |
|
||||
| ----------------------------------- | ----------------------------------------------------- |
|
||||
| `VITE_FIREBASE_API_KEY` | API Key del proyecto Firebase. |
|
||||
| `VITE_FIREBASE_AUTH_DOMAIN` | Dominio de autenticación de Firebase. |
|
||||
| `VITE_FIREBASE_PROJECT_ID` | ID del proyecto Firebase. |
|
||||
| `VITE_FIREBASE_STORAGE_BUCKET` | Bucket asociado al proyecto Firebase. |
|
||||
| `VITE_FIREBASE_MESSAGING_SENDER_ID` | Sender ID del proyecto Firebase. |
|
||||
| `VITE_FIREBASE_APP_ID` | App ID del proyecto Firebase. |
|
||||
| `VITE_WEBHOOK_URL` | URL del webhook de n8n que recibe y procesa el brief. |
|
||||
|
||||
---
|
||||
|
||||
## Instalación local
|
||||
|
||||
Clonar el repositorio:
|
||||
|
||||
```bash
|
||||
git clone https://git.digitalcompass.agency/Isaac_Aracena/cdcbrief-glm.git
|
||||
```
|
||||
|
||||
Entrar a la carpeta del proyecto:
|
||||
|
||||
```bash
|
||||
cd cdcbrief-glm
|
||||
```
|
||||
|
||||
Instalar dependencias:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
Crear el archivo `.env` local usando `.env.example` como referencia:
|
||||
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
Completar las variables reales en `.env`.
|
||||
|
||||
---
|
||||
|
||||
## Correr en desarrollo
|
||||
|
||||
Ejecutar el servidor local:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Abrir el navegador en:
|
||||
|
||||
```text
|
||||
http://localhost:3000
|
||||
```
|
||||
|
||||
Si el puerto cambia por configuración local, usar la URL indicada por Vite en la terminal.
|
||||
|
||||
---
|
||||
|
||||
## Generar build de producción
|
||||
|
||||
Para generar la carpeta `dist/`:
|
||||
|
||||
## Cómo generar build
|
||||
Para generar la versión de producción:
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
Los archivos optimizados se generarán en la carpeta `dist/`.
|
||||
|
||||
## Variables de Entorno Requeridas
|
||||
El proyecto requiere las siguientes variables en un archivo `.env`:
|
||||
- `VITE_FIREBASE_API_KEY`: API Key de Firebase.
|
||||
- `VITE_FIREBASE_AUTH_DOMAIN`: Dominio de autenticación.
|
||||
- `VITE_FIREBASE_PROJECT_ID`: ID del proyecto Firebase.
|
||||
- `VITE_FIREBASE_STORAGE_BUCKET`: Bucket de almacenamiento.
|
||||
- `VITE_FIREBASE_MESSAGING_SENDER_ID`: ID del remitente de mensajería.
|
||||
- `VITE_FIREBASE_APP_ID`: ID de la aplicación Firebase.
|
||||
- `VITE_WEBHOOK_URL`: URL del webhook de n8n para procesar el brief.
|
||||
El resultado se genera en:
|
||||
|
||||
## Nota de Seguridad
|
||||
**IMPORTANTE:** Nunca subas el archivo `.env` o cualquier archivo con credenciales reales al repositorio. El archivo `.gitignore` está configurado para excluir archivos sensibles. Solo comparte `.env.example` con los nombres de las variables necesarias.
|
||||
```text
|
||||
dist/
|
||||
```
|
||||
|
||||
La carpeta `dist/` contiene los archivos estáticos listos para servir desde un servidor web.
|
||||
|
||||
## Cambio reciente
|
||||
---
|
||||
|
||||
- Se agregó el campo obligatorio **Fecha límite de entrega** en el paso final de revisión.
|
||||
- El frontend envía la fecha al webhook como `deliveryDate` y `fechaEntrega`.
|
||||
- La fecha también aparece en el resumen enviado al portal para que n8n pueda usarla en el brief, correo y Sheet.
|
||||
## Validar build local con XAMPP
|
||||
|
||||
Para validar el build con XAMPP:
|
||||
|
||||
1. Ejecutar:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
2. Copiar el contenido de `dist/` dentro de la carpeta correspondiente de Apache/XAMPP.
|
||||
|
||||
3. Abrir la URL local configurada.
|
||||
|
||||
4. Validar:
|
||||
|
||||
* Carga de pantalla de login.
|
||||
* Acceso con cuenta autorizada.
|
||||
* Flujo completo de los seis pasos.
|
||||
* Grabación y reproducción de audio.
|
||||
* Carga de imágenes.
|
||||
* Carga de documentos.
|
||||
* Carga de archivos de campaña.
|
||||
* Agregado de enlaces.
|
||||
* Fecha límite de entrega.
|
||||
* Envío al webhook.
|
||||
* Respuesta del portal.
|
||||
* Enlace de carpeta generada.
|
||||
* Botones de copiar y abrir.
|
||||
|
||||
---
|
||||
|
||||
## Scripts disponibles
|
||||
|
||||
| Comando | Descripción |
|
||||
| ----------------- | --------------------------------------------------------------------------- |
|
||||
| `npm install` | Instala las dependencias del proyecto. |
|
||||
| `npm run dev` | Inicia el servidor local de desarrollo. |
|
||||
| `npm run build` | Genera el build de producción en `dist/`. |
|
||||
| `npm run lint` | Ejecuta validaciones de lint, si están configuradas en el proyecto. |
|
||||
| `npm run preview` | Sirve localmente el build generado, si está disponible en la configuración. |
|
||||
|
||||
---
|
||||
|
||||
## Flujo de procesamiento
|
||||
|
||||
```text
|
||||
Usuario autorizado
|
||||
|
|
||||
v
|
||||
Portal CDC Brief GLM
|
||||
|
|
||||
v
|
||||
Captura guiada de información
|
||||
|
|
||||
v
|
||||
Archivos + metadata + fecha límite
|
||||
|
|
||||
v
|
||||
Webhook n8n
|
||||
|
|
||||
v
|
||||
Procesamiento del brief
|
||||
|
|
||||
v
|
||||
Carpeta generada en Google Drive
|
||||
|
|
||||
v
|
||||
Respuesta visual en el portal
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Datos enviados al webhook
|
||||
|
||||
La aplicación envía la información usando `FormData`.
|
||||
|
||||
Entre los datos principales se incluyen:
|
||||
|
||||
* Nota de voz.
|
||||
* Imágenes de referencia.
|
||||
* Documentos de apoyo.
|
||||
* Archivos de campaña o elementos gráficos.
|
||||
* Enlaces de referencia.
|
||||
* Fecha límite de entrega.
|
||||
* Metadata del usuario autenticado.
|
||||
* Resumen del brief.
|
||||
* Campos compatibles para uso en n8n, correo, Google Drive, Google Docs o Google Sheets.
|
||||
|
||||
La fecha límite de entrega se envía en los campos:
|
||||
|
||||
```text
|
||||
deliveryDate
|
||||
fechaEntrega
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Seguridad
|
||||
|
||||
No subir credenciales reales al repositorio.
|
||||
|
||||
Archivos que no deben versionarse:
|
||||
|
||||
```text
|
||||
.env
|
||||
.env.local
|
||||
.env.production
|
||||
.env.development
|
||||
```
|
||||
|
||||
El archivo `.env.example` sí puede mantenerse en el repositorio porque solo contiene los nombres de las variables requeridas, sin valores sensibles.
|
||||
|
||||
---
|
||||
|
||||
## Reglas de desarrollo
|
||||
|
||||
* No modificar la pantalla de login salvo que exista una solicitud explícita aprobada.
|
||||
* Mantener el branding visual de GomezLee Marketing.
|
||||
* No romper el flujo funcional existente.
|
||||
* Validar `npm run build` antes de subir cambios.
|
||||
* Si se modifica la experiencia visual, validar el flujo completo en navegador.
|
||||
* Si se modifica el envío al webhook, validar con n8n antes de desplegar.
|
||||
* Mantener actualizado el `dist/` cuando el repositorio lo requiera para despliegue estático.
|
||||
* No subir `node_modules`.
|
||||
* No subir `.env` con credenciales reales.
|
||||
|
||||
---
|
||||
|
||||
## Checklist antes de hacer commit
|
||||
|
||||
Antes de subir cambios a Gitea, validar:
|
||||
|
||||
* `npm install` ejecutado correctamente.
|
||||
* `npm run build` completado sin errores.
|
||||
* La carpeta `dist/` fue generada correctamente.
|
||||
* El portal carga en navegador.
|
||||
* Login funciona.
|
||||
* Flujo de pasos funciona.
|
||||
* Audio muestra iconos correctos de play y pausa.
|
||||
* Adjuntos se visualizan correctamente.
|
||||
* Botón de copiar y abrir funcionan.
|
||||
* Fecha límite de entrega se muestra y se envía.
|
||||
* Respuesta del portal se ve correctamente.
|
||||
* `.env` no aparece en `git status`.
|
||||
* `node_modules` no aparece en `git status`.
|
||||
|
||||
---
|
||||
|
||||
## Comandos recomendados para actualizar Gitea
|
||||
|
||||
Agregar cambios:
|
||||
|
||||
```bash
|
||||
git add -A
|
||||
git add -f dist
|
||||
```
|
||||
|
||||
Revisar estado:
|
||||
|
||||
```bash
|
||||
git status
|
||||
```
|
||||
|
||||
Crear commit:
|
||||
|
||||
```bash
|
||||
git commit -m "feat: actualizar CDC Brief con branding GLM y ajustes UX finales"
|
||||
```
|
||||
|
||||
Subir cambios:
|
||||
|
||||
```bash
|
||||
git push origin main
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Estado actual
|
||||
|
||||
Versión frontend actualizada con:
|
||||
|
||||
* Branding visual GomezLee Marketing.
|
||||
* UX/UI principal suavizada y menos cargada.
|
||||
* Favicon GLM.
|
||||
* Botones principales ajustados al estilo GLM.
|
||||
* Reproductor de audio con iconos visibles de play y pausa.
|
||||
* Botón final con contraste corregido.
|
||||
* Respuesta del portal mejorada para adjuntos, documentos y audio.
|
||||
* Carpeta `dist/` generada y validada localmente.
|
||||
|
||||
---
|
||||
|
||||
## Mantenimiento
|
||||
|
||||
Responsable técnico:
|
||||
|
||||
```text
|
||||
GLM IT
|
||||
```
|
||||
|
||||
Repositorio:
|
||||
|
||||
```text
|
||||
https://git.digitalcompass.agency/Isaac_Aracena/cdcbrief-glm
|
||||
```
|
||||
|
||||
Proyecto:
|
||||
|
||||
```text
|
||||
CDC Brief GLM
|
||||
```
|
||||
|
||||
Área:
|
||||
|
||||
```text
|
||||
Creative Design Center / GomezLee Marketing
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
*GLM IT — Automatización e IA · GomezLee Marketing · 2026*
|
||||
|
||||
Reference in New Issue
Block a user