Integración con Microsoft Teams

Envía notificaciones de envíos de fotos directamente a tus canales de Microsoft Teams.

Descripción General

Conecta Visiono a Microsoft Teams para recibir notificaciones instantáneas cuando se envían fotos. Mantén a tu equipo informado sin salir de su plataforma de colaboración.

Prerrequisitos

• Cuenta de Visiono con acceso a API
• Espacio de trabajo de Microsoft Teams
• Permiso para añadir conectores a canales de Teams
• Clave de API de Visiono (para flujos de trabajo avanzados)

Pasos de Configuración

1. Crear Webhook Entrante en Teams

1. Abre Microsoft Teams
2. Navega al canal donde quieres las notificaciones
3. Haz clic en ... (más opciones) junto al nombre del canal
4. Selecciona Connectors
5. Busca Incoming Webhook y haz clic en Configure
6. Dale un nombre a tu webhook (ej. "Fotos de Visiono")
7. Opcionalmente sube un icono personalizado
8. Haz clic en Create
9. Copia la URL del webhook (guárdala para el siguiente paso)

2. Añadir Webhook a Visiono

1. Ve a Configuración del Espacio de Trabajo → Webhooks
2. Haz clic en Añadir Webhook
3. Pega la URL del webhook de Teams
4. Selecciona eventos a disparar:
   • photo_request.submitted - Cuando se envían todas las fotos
   • photo_submission.created - Cuando llega un nuevo envío
5. Guarda el webhook

3. Probar la Conexión

1. Envía una foto de prueba en Visiono
2. Verifica tu canal de Teams por la notificación
3. Ajusta configuraciones según sea necesario

Formato del Mensaje

Teams recibirá notificaciones formateadas como Adaptive Cards:

{
  "@type": "MessageCard",
  "@context": "http://schema.org/extensions",
  "themeColor": "0076D7",
  "summary": "Nuevo Envío de Fotos",
  "sections": [{
    "activityTitle": "Nuevas fotos recibidas",
    "activitySubtitle": "De: Inspección de Vehículo",
    "facts": [{
      "name": "Fotos",
      "value": "5"
    }, {
      "name": "Enviado",
      "value": "2024-01-15 10:30"
    }],
    "markdown": true
  }],
  "potentialAction": [{
    "@type": "OpenUri",
    "name": "Ver en Panel",
    "targets": [{
      "os": "default",
      "uri": "https://..."
    }]
  }]
}

Integración Avanzada con Power Automate

Para flujos de trabajo más complejos, usa Microsoft Power Automate:

1. Crear un Flujo de Power Automate

1. Ve a Power Automate
2. Haz clic en Create → Automated cloud flow
3. Busca When a HTTP request is received
4. Configura el disparador HTTP

2. Añadir Acciones de Teams

Acciones populares:

Acción	Caso de Uso
Post message	Enviar al canal
Post adaptive card	Notificación enriquecida
Create channel	Organizar por proyecto
Add member	Invitar a interesados

3. Ejemplo: Flujo de Notificación Enriquecida

1. Disparador: Solicitud HTTP (webhook desde Visiono)
2. Acción: Parse JSON (extraer datos de fotos)
3. Acción: Post Adaptive Card a Teams

Plantilla de Adaptive Card:

{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "TextBlock",
      "size": "Medium",
      "weight": "Bolder",
      "text": "Nuevo Envío de Fotos"
    },
    {
      "type": "FactSet",
      "facts": [
        {"title": "Solicitud", "value": "${request_name}"},
        {"title": "Fotos", "value": "${photos_count}"},
        {"title": "Enviado", "value": "${submitted_at}"}
      ]
    },
    {
      "type": "Image",
      "url": "${first_photo_url}",
      "size": "Large"
    }
  ],
  "actions": [
    {
      "type": "Action.OpenUrl",
      "title": "Ver Fotos",
      "url": "${dashboard_url}"
    }
  ]
}

Payload del Webhook

Visiono envía estos datos a tu webhook de Teams:

{
  "event": "submission.created",
  "timestamp": "2024-01-15T10:30:00Z",
  "data": {
    "submission_id": "sub_abc123",
    "permanent_link": {
      "id": "pl_xyz789",
      "slug": "inspeccion-vehiculo",
      "name": "Inspección de Vehículo"
    },
    "photos": [
      {
        "id": "photo_001",
        "url": "https://...",
        "slot": 1,
        "slot_name": "Vista Frontal"
      }
    ],
    "metadata": {
      "unique_field": "ABC-123",
      "full_name": "Juan Pérez",
      "submitted_at": "2024-01-15T10:30:00Z"
    }
  }
}

Organización de Canales

Mejores Prácticas

• Crea un canal dedicado para notificaciones de fotos
• Usa pestañas de canal para incrustar el panel de Visiono
• Fija solicitudes importantes para visibilidad
• Usa @menciones para envíos urgentes

Nomenclatura de Canales

Estructura sugerida:

• #visiono-fotos - Todos los envíos
• #visiono-urgente - Solo alta prioridad
• #visiono-[proyecto] - Específico por proyecto

Solución de Problemas

Notificaciones No Aparecen

1. Verifica que la URL del webhook sea correcta en Visiono
2. Comprueba que el webhook esté habilitado (estado verde)
3. Asegura que el conector de Teams esté todavía activo
4. Prueba con un nuevo envío

URL de Webhook Inválida

1. Crea un nuevo Incoming Webhook en Teams
2. Actualiza la URL en Visiono
3. Prueba la conexión

Problemas de Formato del Mensaje

1. Verifica que el tipo de evento del webhook coincida con el formato esperado
2. Verifica la estructura JSON en la configuración del webhook de Visiono
3. Prueba con Power Automate para formato personalizado

Consideraciones de Seguridad

• Las URLs de webhook deben mantenerse privadas
• Rota webhooks periódicamente
• Usa canales privados para datos sensibles
• Revisa aplicaciones conectadas regularmente

Recursos Relacionados

• Webhooks - Configuración de eventos
• Referencia de API - Acceso directo a API
• Integración con Zapier - Automatización alternativa
• Integración con Make - Automatización visual