151 lines
4.8 KiB
Markdown
151 lines
4.8 KiB
Markdown
# GLM ID Card Generator
|
|
|
|
## ¿Qué hace este proyecto?
|
|
|
|
Sistema de generación de ID corporativas para el departamento de RRHH de GomezLee Marketing (GLM), que opera en 14 países. El sistema permite:
|
|
|
|
1. **Generar IDs** (frente y reverso) de empleados de forma individual o por lote (Excel/CSV).
|
|
2. **Editar fotos con IA**: usa Google Gemini para vestir al empleado con un uniforme Columbia, bordar el logo de GLM en el pecho derecho y reemplazar el fondo por blanco.
|
|
3. **Códigos QR**: cada ID incluye un QR único que redirige a `https://digitalcompass.agency/empleado?id=X` para verificar en tiempo real el estatus del empleado contra BambooHR.
|
|
4. **Exportación a PNG**: descarga los ID como PNG listos para impresión CR80 o envío por WhatsApp.
|
|
5. **Verificación pública**: cualquier persona puede escanear el QR y ver la foto, nombre, puesto, país y estatus del empleado.
|
|
|
|
### Arquitectura
|
|
|
|
- **Frontend Generator**: React + Vite (`glm-card-generator/`)
|
|
- **Frontend Verificación QR**: React + Vite (`glm-card-qr/`)
|
|
- **Workflow de IA**: n8n con Google Gemini para edición de fotos
|
|
- **Base de datos**: Supabase (PostgreSQL)
|
|
- **Almacenamiento**: Supabase Storage + Google Drive
|
|
- **Verificación**: BambooHR API
|
|
|
|
---
|
|
|
|
## Instalación y ejecución
|
|
|
|
### Requisitos
|
|
|
|
- Node.js >= 18
|
|
- npm
|
|
|
|
### 1. Clonar el repositorio
|
|
|
|
```bash
|
|
git clone <repo-url>
|
|
cd GLM ID Card Generator
|
|
```
|
|
|
|
### 2. Configurar variables de entorno
|
|
|
|
```bash
|
|
# Para el generador de IDs
|
|
cp glm-card-generator/.env.example glm-card-generator/.env
|
|
|
|
# Para el visor QR
|
|
cp glm-card-qr/.env.example glm-card-qr/.env
|
|
```
|
|
|
|
Editar los archivos `.env` con los valores correspondientes.
|
|
|
|
### 3. Instalar dependencias y ejecutar
|
|
|
|
**Generador de IDs:**
|
|
|
|
```bash
|
|
cd glm-card-generator
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
Abre en: `http://localhost:5173/empleado-id/`
|
|
|
|
**Visor QR:**
|
|
|
|
```bash
|
|
cd glm-card-qr
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
Abre en: `http://localhost:5173/empleado`
|
|
|
|
### 4. Build para producción
|
|
|
|
```bash
|
|
# Generador
|
|
cd glm-card-generator
|
|
npm run build
|
|
# El output está en glm-card-generator/dist/
|
|
|
|
# Visor QR
|
|
cd glm-card-qr
|
|
npm run build
|
|
# El output está en glm-card-qr/dist/
|
|
```
|
|
|
|
---
|
|
|
|
## Variables de entorno
|
|
|
|
### `glm-card-generator/.env.example`
|
|
|
|
```env
|
|
VITE_SUPABASE_ANON_KEY=J5JS7HG...
|
|
VITE_SUPABASE_URL=https://tudominio
|
|
VITE_WEBHOOK_TOKEN=6d4g56d4fgd...
|
|
VITE_N8N_WEBHOOK_URL=https://tudominio/webhook/carnet
|
|
```
|
|
|
|
### `glm-card-qr/.env.example`
|
|
|
|
```env
|
|
VITE_SUPABASE_URL=https://tudominio
|
|
VITE_SUPABASE_ANON_KEY=J5JS7HG...
|
|
```
|
|
|
|
### Descripción de variables
|
|
|
|
| Variable | Descripción |
|
|
|---|---|
|
|
| `VITE_SUPABASE_URL` | URL del proyecto Supabase |
|
|
| `VITE_SUPABASE_ANON_KEY` | Clave anónima de Supabase |
|
|
| `VITE_WEBHOOK_TOKEN` | Token de autenticación para el webhook de n8n |
|
|
| `VITE_N8N_WEBHOOK_URL` | URL del webhook en n8n (`/webhook/carnet`) |
|
|
|
|
---
|
|
|
|
## Explicación del workflow de n8n
|
|
|
|
**Archivo**: `n8n-workflow/GLM ID Card Generator.json`
|
|
|
|
El workflow **"GLM ID Card Generator"** se ejecuta cuando el frontend envía una foto de empleado al webhook `POST /webhook/carnet` autenticado con el token en el header.
|
|
|
|
### Flujo
|
|
|
|
1. **Webhook** — Recibe la solicitud POST con la foto del empleado (y opcionalmente un array de empleados para lote).
|
|
2. **IF: "Es un binario y employeeId?"** — Determina si es un envío individual (tiene `employeeId` y foto binaria) o por lote.
|
|
3. **IF: "Es un binario?"** — Verifica si el body contiene `empleados` (array de empleados en modo lote).
|
|
4. **Split Out** + **Loop Over Items** — En modo lote, separa el array y procesa cada empleado uno por uno.
|
|
5. **Download file** (Google Drive) — Descarga la foto del empleado desde Google Drive (según URL recibida).
|
|
6. **Descargar logo GLM** (HTTP Request) — Obtiene el logo de GLM desde Supabase Storage.
|
|
7. **Edit an image (Google Gemini)** — Edita la foto del empleado con IA:
|
|
- Modelo: `gemini-3-pro-image` o `gemini-3.1-flash-image`
|
|
- Viste a la persona con un uniforme Columbia (camisa de botones color `#2d3748`)
|
|
- Borda el logo de GLM en el pecho derecho
|
|
- Reemplaza el fondo por blanco sólido
|
|
8. **Extract from File** — Extrae el binario de la imagen editada.
|
|
9. **Guardar foto** (Google Drive) — Guarda la foto editada en la carpeta "Fotos Temporal Carnet Empleados".
|
|
10. **Hacer url publica** (Google Drive) — Comparte la imagen públicamente.
|
|
11. **Actualizar foto del empleado** (Supabase) — Actualiza el registro del empleado en la tabla `empleados_glm` con la `photo_url` y marca `photo_uploaded = FALSE`.
|
|
12. **Merge** — Combina los resultados.
|
|
13. **Respond to Webhook** — Devuelve la URL de la foto editada al frontend.
|
|
|
|
### Credenciales usadas
|
|
|
|
| Tipo | Nombre |
|
|
|---|---|
|
|
| HTTP Header Auth | GLM ID Generator |
|
|
| Google Drive OAuth2 | Eidan - Google Drive account |
|
|
| Google Gemini API | Eidan - Google Gemini(PaLM) Api account |
|
|
| Supabase API | Sofia test - Supabase account |
|