Desarrollo de Flujo Interactivo Personalizado

Para implementar un flujo personalizado, se requiere conocimiento de los siguientes componentes:

• OnliveFlowAPI: API responsable de gestionar las interacciones del usuario. Esta API recibe las acciones realizadas por el usuario y devuelve la definición de una etapa de interacción.
• FlowClient: Clase de JavaScript que implementa las operaciones a realizar en un flujo. Esta clase se encuentra en el paquete @onlive.site/flow-client.
• WebApp: La aplicación web que implementa un flujo interactivo utilizando FlowClient.

El siguiente diagrama muestra una visión general de la interacción entre los componentes:

FlowClient

La clase FlowClient facilita la comunicación con el OnliveFlowAPI para gestionar las etapas de un flujo interactivo. Proporciona métodos para obtener, navegar e interactuar con las diferentes etapas de un flujo.

Responsabilidades Clave:

• Obtener la primera etapa de un flujo.
• Recuperar detalles de una etapa específica.
• Activar acciones para pasar a la siguiente etapa.

Instalación

Módulo ES6

Usando importaciones de módulos, necesita crear el archivo .npmrc en la raíz del proyecto con el siguiente contenido:

@onlive.site:registry=https://gitlab.com/api/v4/projects/66230274/packages/npm/

Luego, puede instalar el paquete con el siguiente comando:

npm install @onlive.site/flow-client

import { FlowClient } from "@onlive.site/flow-client";

const client = new FlowClient({
  baseUrl: "https://example.com/api/v1",
  flowId: "<flowId>",
  organizationId: "<organizationId>",
  lang: "es",
  tracking: {
    enabled: true,
  }
});

UMD (Definición de Módulo Universal)

<script src="https://cdn.onlive.site/@onlive.site/flow-client@latest/index.iife.js"></script>

<script>
  const { FlowClient } = window.OnliveFlowClient;

  const client = new FlowClient({
    baseUrl: "https://example.com/api/v1",
    flowId: "<flowId>",
    organizationId: "<organizationId>",
    lang: "es",
    tracking: {
      enabled: true,
    }
  });
</script>

Uso

Constructor

Firma:

constructor(_options: ClientOptions)

• Inicializa una nueva instancia de FlowClient.
• Parámetros:
  • _options (ClientOptions): Objeto de configuración para el cliente, validado según ClientOptionsSchema.

---

Métodos

1. firstStep

Descripción:

Obtiene la definición de la primera etapa de un flujo.

Firma:

async firstStep(options: GetStepOptions): Promise<FlowContext>

• Parámetros:

  • options (GetStepOptions): Estado o campos utilizados para inicializar la etapa.

• Devuelve:

  • FlowContext: El contexto de la primera etapa definido utilizando el FlowContextSchema.

Ejemplo:

const firstStep = await client.firstStep({ state: {} });
console.log(firstStep);

---

2. getStep

Descripción:

Obtiene los detalles de una etapa específica del flujo.

Firma:

async getStep(stepId: string, options: GetStepOptions): Promise<FlowContext>

• Parámetros:

  • stepId (string): ID de la etapa a recuperar.
  • options (GetStepOptions): Estado o campos adicionales.

• Devuelve:

  • FlowContext: El contexto de la etapa solicitada definido utilizando el FlowContextSchema.

Ejemplo:

const step = await client.getStep("step123", { state: {} });
console.log(step);

---

3. nextStep

Descripción:

Solicita la definición de la siguiente etapa. Es necesario especificar en la solicitud de nextStep que el campo fields con los valores de los campos presentados en la etapa se envía dentro del parámetro options.

Firma:

async nextStep(trigger: GetStepTrigger, options: GetStepOptions): Promise<FlowContext>

• Parámetros:

  • trigger (GetStepTrigger): Contiene currentStepId y actionId para especificar la acción.
  • options (GetStepOptions): Estado o campos adicionales.

• Devuelve:

  • FlowContext: El contexto de la siguiente etapa definido utilizando el FlowContextSchema. Los campos enviados en la solicitud de este método se encuentran en el campo state del objeto devuelto, dentro de un campo con el identificador igual al nombre de la etapa.

Ejemplo:

const nextStep = await client.nextStep(
  { currentStepId: "step123", actionId: "action456" },
  { state: {} }
);
console.log(nextStep);

---

Propiedades

tracking

Descripción:

Configura las opciones de seguimiento para el flujo.

Firma:

tracking: TrackingService

• Métodos:

  • send (EventName, EventData): Envía eventos de seguimiento al servicio de seguimiento.
    • Parámetros:
      • EventName (string): Nombre del evento a enviar.
      • EventData (object): Datos asociados con el evento.
  • setData (data: EventData): Establece los datos que se enviarán con los eventos de seguimiento.
    • Parámetros:
      • data (EventData): Datos que se enviarán con los eventos de seguimiento.
  • onEvent (callback: Function): Establece una función de callback para ejecutarse cuando se active un evento.
    • Parámetros:
      • callback (Function): Función de callback para ejecutarse cuando se active un evento.

Ejemplo Send:

client.tracking.send("impression", {
  "impression_type": "widget"
});

Ejemplo Set Data:

client.tracking.setData({
  "extra": {
    "extra_data": "value"
  }
});

Ejemplo On Event:

client.tracking.onEvent((event) => {
  console.log("Event triggered:", event.event);
  console.log("Event data:", event.data);
});

---

El siguiente diagrama muestra la secuencia de mensajes entre estos componentes:

Ejemplo Interactivo

Puede probar el flujo interactivo utilizando el siguiente enlace: https://client.onlive.site/demo/onlive-flow-interactive-demo/index.html