Asistente BRAVIOO es una herramienta interactiva desarrollada con Vue/Nuxt 3 que permite a las empresas realizar un diagnóstico guiado de sostenibilidad, ofreciendo resultados automáticos por bloques y un informe final con recomendaciones accionables.

👉 Puedes ver la versión desplegada aquí: http://bravioo.enreda.coop/

¿Qué es el Asistente BRAVIOO?

Se trata de un formulario dinámico, flexible y totalmente configurable, diseñado para acompañar a organizaciones en un proceso de evaluación interna. El asistente guía al usuario a través de distintas pantallas (slices), recopila respuestas, calcula puntuaciones y genera un diagnóstico final.

Características principales

Navegación por pantallas tipo welcome, question, feedback y end.
Cálculo automático de:
Resultados por bloque temático.
Resultado global.
Recomendaciones asociadas.
Guardado de progreso y respuestas en localStorage.
Posibilidad de: Flujo lineal y Flujo condicional según respuestas.
Configuración 100% mediante un archivo surveyData.js.
Generación de informe final descargable en PDF (pdfMake).

🧩 Arquitectura general del proyecto

El asistente se sostiene sobre tres pilares fundamentales:

1. index.vue — Motor del asistente

Controla:

Flujo entre pantallas,
Almacenamiento de respuestas,
Cálculo de puntuaciones por bloque,
Diagnóstico final.

Principales estados manejados:

data() {
  return {
    surveyData,
    currentSliceId: surveyData.slices[0].id,
    answers: [],
    score: null,
    results: null
  }
}

2. surveyData.js — Configuración del diagnóstico

Define:

Todas las pantallas del asistente,
Reglas de evaluación de cada bloque,
Reglas del diagnóstico global,
Textos, títulos y contenidos visibles para el usuario.

3. Componentes visuales (slices)

Representan cada tipo de pantalla:

SliceWelcome.vue
SliceQuestion.vue
SliceFeedback.vue
SliceEnd.vue

Cada slice se renderiza según el valor type presente en surveyData.slices.

🔄 Flujo del usuario

Pantalla de bienvenida
Bloque de preguntas
Pantalla de feedback parcial con recomendaciones
Repetición del patrón para los distintos bloques
Resumen final con diagnóstico global y descarga de informe

🧮 Cálculo y lógica interna

1. Navegación

Cada slice define su siguiente paso mediante la propiedad next, que puede ser:

Lineal:

"next": "B1-02"

Condicional:

"next": { yes: "Q2", no: "Q3" }

index.vue gestiona:

Avanzar (goToNext(event)),
Retroceder (goToPrevious()),
Almacenar historial en localStorage.

2. Registro de respuestas

Las respuestas se almacenan con estructura:

{
  sectionId,
  sectionTitle,
  sliceId,
  value,
  score,
  questionTotalPoints
}

3. Resultados por bloque

Cuando el usuario alcanza una pantalla tipo feedback, se ejecuta:

Filtrado de respuestas por bloque,
Cómputo de puntos obtenidos,
Cálculo de puntos máximos del bloque,
Evaluación según surveyData.rules[sectionId].

Ejemplo:

{
  sectionId: "B1",
  sectionTitle: "Impacto social",
  sectionPossibleTotalPoints: 20,
  score: 14,
  result: "Recomendación específica..."
}

4. Resultado global

En el último slice (end):

Se suman los resultados parciales,
Se calcula el máximo total,
Se aplica surveyData.finalRecommendations.total(score).

Ejemplo:

{
  totalPossiblePoints: 80,
  score: 52,
  recommendations: "ISO 14001, B Corp..."
}

📂 Estructura del archivo surveyData.js

1. Cabecera

export const surveyData = {
  title: "Asistente BRAVIOO",
  slices: [ ... ],
  rules: { ... },
  finalRecommendations: { ... }
}

2. Tipos de slices

Tipo	Descripción
`welcome`	Introducción y presentación del bloque
`question`	Pregunta de diagnóstico con opciones
`feedback`	Resultados parciales por bloque
`end`	Diagnóstico general + descarga PDF

📝 Ejemplo de slice tipo pregunta

{
  id: "B2-01",
  type: "question",
  section: { id: "B2", title: "Transparencia y reporte" },
  question: {
    title: "¿Publica informes de sostenibilidad?",
    description: "1 es el nivel más bajo y 5 el más alto."
  },
  input: {
    type: "range",
    options: [
      { value: "1", label: "1", score: 1 },
      { value: "2", label: "2", score: 2 },
      ...
    ]
  },
  questionTotalPoints: 5,
  next: "B2-02"
}

🧠 Reglas de puntuación

Por bloque:

rules: {
  B0: (score) => score < 8 
    ? "Necesita mejoras estructurales..."
    : "Buen nivel de madurez.",
  ...
}

Final:

finalRecommendations: {
  total: (score) => {
    if (score < 30) return "Acciones básicas recomendadas";
    if (score < 50) return "Certificaciones iniciales sugeridas";
    return "Lista para certificaciones avanzadas";
  }
}

📦 Generación de PDF

En la pantalla final, el usuario puede descargar un informe PDF generado con:

pdfMake
Fuentes integradas manualmente
Logo de Bravio
Resultados por bloque
Diagnóstico global

🛠️ Tecnologías utilizadas

Vue 3 + Composition API
Nuxt 3
TailwindCSS
pdfMake
localStorage
Renderizado dinámico basado en configuración