WebView

Al usar esta implementacion, mantenemos los procesos visuales, uniformes tanto con web como en movil y nos permite hacer una integracion móvil de manera rápida y sencilla, este SDK usa WebView en cada una de las plataformas (iOS, Android) para inicializar un Workflow dentro del dispositivo, haciendo todos los procesos necesarios para que se ejecute de manera correcta.

iOS

En iOS el SDK usa WKWebView como plataforma para poder ejecutar de manera correcta un Workflow dentro de nuestro WebView. A su vez se implementa una interfaz de comunicacion mediante WKUserContentController la cual mantendra una comunicacion basada en eventos con Workflows

Requerimientos

iOS 11+
Swift 5+
Xcode 14+

Instalacion

Para instalar, por medio de Xcode seleccionaremos nuestro proyecto e iremos directamente al apartado de Dependencias de Paquetes.

Primer Paso

Dentro de la vista de Dependencias de Paquetes daremos click en añadir una nueva

Segundo Paso

Esto nos abrira un modal que nos permitira añadir paquetes a nuestro proyecto, lo unico que necesitaremos sera buscar el URL de Github de nuestra SDK

https://github.com/rem-tools/workflows-wv-ios

Una vez que busquemos el URL, nos aparecera el detalle del paquete, el cual debera estar configurado de esta manera

Tercer Paso

Debemos revisar correctamente nuestra version (1.2.3) y al terminar la adicion del paquete podremos tener disponible nuestro SDK de Workflows dentro del proyecto.

WebView.swift
import WorkflowsWebview

Uso

Una vez instalado nuestro SDK, podremos comenzar a ejecutar Workflows dentro de nuestra aplicación, para esto comenzaremos creando una instancia de WorkflowsWebview configurando nuestro apiKey de rem.tools

WebView.swift
import WorkflowsWebview

let workflow : WorkflowsWebview = WorkflowsWebview(
  apiKey: "APIKEY"
)

info

Por default, el SDK usara el url base https://api.rem.tools en caso de ejecutar procesos en el ambiente de testing (https://api.test.rem.tools) se deberá modificar baseUrl en los parámetros de la instancia WorkflowsWebview

Para este punto ya tenemos nuestra instancia de WorkflowsWebview creada, ahora necesitaremos un WKWebView el cual usar para cargar el contenido, crearemos una instancia de WKWebView, configurando previamente ciertos parametros usando WKWebViewConfiguration

WebView.swift
import WebKit

let config = WKWebViewConfiguration()
config.allowsInlineMediaPlayback = true
config.mediaTypesRequiringUserActionForPlayback = []

let webView = WKWebView(frame: .zero, configuration: config)

Una vez teniendo nuestro WKWebView creado correctamente, podemos iniciar nuestro Workflow usando el uuid obtenido cuando creamos un Workflow.

WebView.swift
workflow.start(uuid: "UUID", webview: webView, minimal: false) { (success, error) in
  if (success == true) {
    print("SUCCESS")
  } else {
    debugPrint(success, error)
  }
}

El método .start() tiene dentro de sus parámetros un Completion Handler que nos indicara si el Workflow inicializo correctamente dentro del WKWebView.

danger

Este método usa el método de carga .load() de nuestra instancia WKWebView, por lo que por ningun motivo este método deberá ser usado de nuevo una vez llamemos .start()

Android

En la plataforma de Android, nuestro SDK usa la clase WebView perteneciente al paquete webkit con la cual además se mantiene una comunicacion con el Workflow por medio de una interfaz añadida con el método addJavascriptInterface, interfaz la cual obtendra eventos del proceso.

Requerimientos

API Level 23+
Android 6+

Instalacion

Nuestro SDK de Android se encuentra dentro Jitpack.io, para poder instalarlo, se tiene que añadir el repositorio de maven

caution

No agregar el repositorio de Jitpack.io debajo de buildscript

build.gradle
    allprojects {
      repositories {
        // ...
        maven { url 'https://jitpack.io' }
      }
    }

Ya que tenemos disponible nuestro repositorio, podemos implementar nuestra libreria

dependencies {
    implementation 'com.github.rem-tools:workflows-wv-android:1.3.20'
}

Uso

Para empezar a usar nuestra libreria Android, iniciamos una instancia de WorkflowsWebview, la cual solo necesitara la API Key de rem.tools

MainActivity.kt
import rem.tools.workflows_webview.WorkflowsWebview

var workflow = WorkflowsWebview(
   apiKey = "APIKEY",
)

info

Ya creada nuestra instancia, comenzamos a preparar nuestro WebView dentro de un Activity, una vez lo hayamos creado, lo podemos referenciar en una variable

MainActivity.kt
import android.webkit.WebView

var webView: WebView = findViewById(R.id.my_webview)

Ya tenemos todo listo, ahora podremos inicializar nuestro Workflow usando un uuid obtenido cuando creamos uno, la referencia a nuestra Activity y la referencia de nuestro WebView dentro de la función .start().

Una vez inicialicemos nuestro Workflow, el método .start() nos provee de un callback que nos dirá si el Workflow pudo inicializar, y en caso de que no, nos describirá la razón con nuestro parámetro error

MainActivty.kt
workflow.start(
  workflowId = "UUID",
  webView = webView,
  activity = this@MainActivity,
  minimal = false
  callback = { success, error ->
    // Initialization Callback
    if (success) {
      // Yay! Success!
    }

    // Oh no, tenemos un error :(
  }
)

danger

Este método usa el método de carga .loadUrl() de nuestra instancia WebView, por lo que por ningun motivo este método deberá ser usado de nuevo una vez llamemos .start()

Obtener eventos del Workflow

Mientras se ejecuta el Workflow, este se comunicara constantemente con nuestro WebView para enviarle información sobre actualizaciones de nuestro Workflow o Step. Gracias a esto podemos saber cuando un Workflow finalizó con éxito o error. Para obtener los eventos, se deben definir los métodos que recibirán un callback, estos métodos pertenecen a la clase WorkflowosWebview y se deben configurar una vez tengamos una instancia creada.

iOS
Android

WebView.swift
workflow.completionWorkflowHandler = { workflow in
  if (workflow.status == "success") {
    // Yay! Success!
  }

  debugPrint(workflow)
}

workflow.completionStepHandler = { step in
  debugPrint(step)
}

MainActivity.kt
workflow.onWorkflowEvent = { workflow ->
    // Workflow Event Callback

    if (workflow.status == "success") {
      // Yay! Success!
    }
}

workflow.onStepEvent = { step ->
  // Step Event Callback
  Log.d("STEP", "Evento")
}

Si queremos ocultar el navbar de nuestro Workflow, podemos usar el parámetro minimal de nuestro método .start() indicandole true si queremos retirarlo y false en caso de que no.

info

Uno de los casos de uso de minimal es en el escenario donde requieran incluir un navbar nativo mientras se muestra el Workflow

iOS
Android

WebView.swift
// Retiramos el navbar de nuestro Workflow
workflow.start(
  uuid: "UUID",
  webview: webView,
  minimal: true
) { (success, error) in
  if (success == true) {
    print("SUCCESS")
  } else {
    debugPrint(success, error)
  }
}

MainActivity.kt
workflow.start(
  workflowId = "UUID",
  webView = webView,
  activity = this@MainActivity,
  minimal = true
  callback = { success, error ->
    // Initialization Callback
    if (success) {
      // Yay! Success!
    }

    // Oh no, tenemos un error :(
  }
)

Verificar los permisos (Android)

En Android, los permisos se piden de manera nativa una vez el WebView los requiera, ya que el WebView por si solo no lo hace y esta implementación requiere que revisemos si los permisos se otorgaron, ya que es de suma importancia que hayan sido aceptados para un óptimo funcionamiento del Workflow.

Para esto usaremos el método onRequestPermissionsResult que es parte de la clase ActivityCompat y dentro de este método, llamaremos una función estatica llamada onPermissionsResults que se encuentra en nuestra clase WorkflowsWebview

import android.webkit.WebView
import rem.tools.workflows_webview.WorkflowsWebview

class MainActivity : AppCompatActivity() {

  // Codigo de nuestra Activity

  override fun onRequestPermissionsResult(
    requestCode: Int,
    permissions: Array<out String>,
    grantResults: IntArray
  ) {
    super.onRequestPermissionsResult(requestCode, permissions, grantResults)
    WorkflowsWebview.onPermissionsResults(requestCode, grantResults)
  }

Comunicación WebView React Native

Como desarrollador que integra nuestra plataforma Workflows en una aplicación de React Native a través de un componente WebView, podrás recibir comunicaciones importantes directamente de la plataforma. Estos mensajes te informarán sobre las actualizaciones clave en el contexto de un "step" (paso) o un "workflow" (flujo de trabajo).

Para facilitar esta interacción, el componente WebView en React Native cuenta con el prop onMessage. Este prop te permite definir una función que se ejecutará cada vez que nuestra plataforma envíe un mensaje a tu aplicación. De esta manera, puedes programar respuestas personalizadas a cambios específicos en los steps o workflows según sea necesario para tu implementación particular.

Manejo de mensajes con `onMessage`

El siguiente ejemplo muestra cómo se utiliza el WebView y cómo se manejan los mensajes entrantes con onMessage:

<WebView
  source={{ uri: 'https://tu-pagina-web.com' }}
  onMessage={(event) => {
    const { data } = event.nativeEvent;
    const message = JSON.parse(data);
    handleIncomingMessage(message);
  }}
/>

En este fragmento de código, onMessage es un prop que toma una función. Cuando el WebView recibe un mensaje de la plataforma de Workflows, esta función se ejecuta. El mensaje entrante se encuentra en event.nativeEvent.data, y lo convertimos de una cadena JSON a un objeto JavaScript con JSON.parse().

Manejo de "step" y "workflow"

El mensaje que se recibe es un objeto que tiene dos propiedades: entity y value.

entity puede ser "step" o "workflow", dependiendo de si el mensaje se refiere a un cambio en un paso o en un flujo de trabajo.
value es un objeto que contiene los datos del paso o flujo de trabajo que cambió.

El siguiente ejemplo muestra cómo podríamos manejar estos mensajes:

function handleIncomingMessage(message) {
  const { entity, value } = message;

  if (entity === 'step') {
    console.log('Step changed:', value);
    // Aquí puedes manejar los cambios en un paso.
  } else if (entity === 'workflow') {
    console.log('Workflow changed:', value);
    // Aquí puedes manejar los cambios en un flujo de trabajo.
  }
}

En esta función, primero extraemos entity y value del mensaje. Luego, dependiendo del valor de entity, manejamos el mensaje de manera diferente.

Asegúrate de reemplazar 'https://tu-pagina-web.com' con la URL de tu página web. Adapta este esbozo a tus necesidades específicas.

WebView

iOS​

Requerimientos​

Instalacion​

Uso​

Android​

Requerimientos​

Instalacion​

Uso​

Obtener eventos del Workflow​

Customización del navbar​

Verificar los permisos (Android)​

Comunicación WebView React Native​

Manejo de mensajes con onMessage​

Manejo de "step" y "workflow"​

iOS

Requerimientos

Instalacion

Uso

Android

Requerimientos

Instalacion

Uso

Obtener eventos del Workflow

Customización del navbar

Verificar los permisos (Android)

Comunicación WebView React Native

Manejo de mensajes con `onMessage`

Manejo de "step" y "workflow"