Flutter

Nuestro SDK nativo de Workflows para Flutter permite una experiencia rápida y fluida para tus usuarios, aprovechando las capacidades nativas de los dispositivos sin requerir un navegador web para funcionar. Distribuido de forma privada a través de OnePub, este SDK se instala como un plugin de Flutter y te permite ejecutar workflows, obtener información detallada del proceso y recibir eventos en tiempo real durante su ejecución.

Nota: Esta documentación se actualiza para utilizar únicamente el componente WorkflowsRenderer. La versión anterior basada en WorkflowsController era preliminar y ya no se utiliza.

Requisitos

Para poder utilizar nuestro SDK de Flutter, debes cumplir con los siguientes requisitos:

Tener una cuenta en OnePub, ya que el SDK se distribuye en un host privado.
Contar con un Workflow creado a través de nuestra API de Workflows.
Tener instalado el SDK de Flutter (versión mínima >=3.3.0) y Dart (versión >=3.0.0 <4.0.0).
Tener instalado el CLI de OnePub en tu máquina.

Instalación

Configuración del CLI de OnePub

Para instalar nuestro SDK de Flutter, primero debes activar el CLI de OnePub. Ejecuta los siguientes comandos en la terminal:

dart pub global activate onepub
onepub login

Nota: Deberás iniciar sesión con tu cuenta de OnePub. Esto te permitirá instalar y actualizar el SDK, el cual está asociado a nuestra organización y a un equipo específico para tu proyecto.

Agregar la dependencia en tu proyecto

Dentro del archivo pubspec.yaml de tu proyecto Flutter, agrega la dependencia del SDK. Reemplaza el nombre del paquete y la URL del repositorio según la información que te haya sido proporcionada:

dependencies:
  workflows_flutter_xxxxx:
    hosted: xxxxxxxxxx
    version: ^x.x.x

Ejemplo: En algunos casos el paquete puede tener un nombre similar a workflows_b6b18e4f y se instala con el siguiente comando:
onepub pub add workflows_b6b18e4f

Uso del SDK

Una vez instalado el SDK, impórtalo en tu proyecto:

import 'package:workflows_flutter_xxxxx/workflows_flutter.dart';

Inicialización y Ejecución de un Workflow

Utiliza el widget WorkflowsRenderer para inicializar y ejecutar un workflow. Este widget se encarga de lanzar el proceso, gestionar la interfaz y notificarte sobre los eventos que se producen durante la ejecución.

return WorkflowsRenderer(
  baseUrl: "https://api.test.rem.tools", // O la URL correspondiente a producción o testing
  remApiKey: "YOUR_API_KEY",              // Tu API Key proporcionado de forma privada
  workflowId: "YOUR_WORKFLOW_ID",           // El ID del workflow creado previamente
  workflowCustomization: WorkflowCustomization(
    theme: WorkflowTheme(
      primaryColor: "#468499",
      secondaryColor: "#994684",
      buttonPrimaryColor: "#468499",
      buttonSecondaryColor: "#994684",
      buttonTextPrimaryColor: "#FFFFFF",
      buttonTextSecondaryColor: "#849946",
      backgroundColor: "#c5f2cd",
      facetecOverlayColor: "#ffd700",
      showHeaderLogo: true,
    ),
    textLocalization: TextLocalization(
      localization: (Platform.isAndroid) ? "localizable.xml" : "Localizable.strings",
    ),
    textFont: TextFont(
      headerFont: (Platform.isAndroid) ? "montserrat_black.ttf" : "Montserrat-Black.ttf",
      bodyFont: (Platform.isAndroid) ? "montserrat_regular.ttf" : "Montserrat-Regular.ttf",
      buttonFont: (Platform.isAndroid) ? "playwrite_ar_regular.ttf" : "PlaywriteAR-Regular.ttf",
    ),
    images: Images(
      logo: "logo.png",
      cameraPermissions: "camara.png",
      uploadFaceScan: "facetec_upload.png",
      uploadFaceSuccess: "facetec_success.png",
      uploadFaceError: "facetec_error.png",
      photoMathId: "photo_match_id_image.png",
      cameraActiveTorch: "facetec_active.png",
      cameraInactiveTorch: "facetec_inactive.png",
      fingerPrint: "facetec_active.png",
      successPage: "success_image.svg",
      errorPage: "error_image.svg",
      unavailablePage: "unavailable_image.svg",
      locationPage: "location_image.svg",
      biometricSignPage: "enroll_fingerprint_image.svg",
      enrollFingerprintPage: "enroll_fingerprint_image.svg",
      enrollBasicPage: "id_scan_image.svg",
      enrollFullPage: "id_scan_image.svg",
      authPage: "id_scan_image.svg",
      livenessPage: "id_scan_image.svg",
      faceEnrollment3dPage: "id_scan_image.svg",
    ),
  ),
  onStart: (workflowResult) {
    print("Workflow iniciado. Success: ${workflowResult.success}");
    print("Error: ${workflowResult.error}");
  },
  onStepEvent: (step) {
    print("Evento de paso: ${step.status}");
  },
  onWorkflowEvent: (workflow) {
    print("Evento del workflow: ${workflow.status}");
  },
);

Importante: Asegúrate de completar correctamente los parámetros (baseUrl, remApiKey, workflowId, etc.) según los datos de tu proyecto.

Permisos Requeridos

Para que el SDK funcione correctamente, es necesario solicitar ciertos permisos en la aplicación.

Android

Agrega los siguientes permisos en el archivo AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.flutter_app">
    <!-- ... -->
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <!-- ... -->
</manifest>

Configuración Específica para Android

Requisitos de SDK de Android

API mínima: 24
API de compilación y destino: 35

Configuración del `build.gradle` (app)

Dentro del archivo android/app/build.gradle, realiza los siguientes ajustes:

Agregar repositorio Maven:

repositories {
    maven {
        url "https://us-central1-maven.pkg.dev/x/workflows-mobile"
        credentials {
            username = "_json_key"
            password = file("gendra-services-3603602290a0.json").text
        }
    }
}

Nota: El archivo gendra-services-3603602290a0.json (service account) debe ser proporcionado por REM.

Configurar versiones del SDK:

android {
    compileSdkVersion 35
    defaultConfig {
        minSdkVersion 24
        targetSdkVersion 35
    }
    // ...
}

Modo Release: En el bloque buildTypes, agrega:

buildTypes {
    release {
        shrinkResources false
    }
}

Reglas para Proguard

Agrega las siguientes líneas en el archivo proguard-rules.pro:

# Reglas para el SDK de Workflows Flutter
-keep class tools.rem.workflows_flutter_plugin.** { *; }
-keep class com.digitalpersona.** { *; }
-keep class com.google.protobuf.** { *; }
-keep class com.google.mediapipe.** { *; }
-keep class com.google.common.** { *; }

Ajuste en el AndroidManifest

Para evitar conflictos de nombres en la aplicación y el tema, añade la siguiente línea en el elemento <application> del archivo AndroidManifest.xml:

<application
    ...
    tools:replace="android:theme, android:label">
    ...
</application>

Organización de Recursos Personalizados

Coloca los assets en la carpeta res de la siguiente forma:

drawable: Imágenes en PNG o JPEG.
font: Archivos de fuentes (TTF, OTF) dentro de la carpeta font.
raw: Imágenes en formato SVG.
xml: Archivos para textos o configuraciones.

Configuración Específica para iOS

Requisitos de iOS

Versión mínima: iOS 12.0
Versión máxima soportada: iOS 17.5

Configuración del Podfile

En el archivo ios/Podfile, establece la versión mínima y añade el pod del SDK:

platform :ios, '12.0'

target 'Runner' do
  # Otras configuraciones y pods
  pod 'WorkflowPlugin', podspec: 'https://storage.googleapis.com/x/WorkflowiOS/WorkflowPods/WorkflowsPlugin.podspec?cache=150'
end

Instalación de Dependencias

Desde la carpeta ios de tu proyecto, ejecuta:

pod install

Permisos en Info.plist

Agrega las siguientes entradas en el archivo Info.plist para solicitar permisos:

<key>NSCameraUsageDescription</key>
<string>3D Liveness Detection by FaceTec.</string>
<key>NSMicrophoneUsageDescription</key>
<string>We need access to your microphone to record audio.</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>The example App requires access to the device's location.</string>

Organización de Recursos en iOS

Textos: Usa archivos .strings y colócalos directamente en la carpeta del proyecto.
Imágenes SVG: Agrégalas directamente en la carpeta del proyecto.
Tipografías: Coloca los archivos de fuente en la carpeta del proyecto.
Imágenes PNG/JPG: Deben incluirse en el Asset Catalog.

FAQ

¿Cómo obtengo el `workflowId`?

El workflowId se obtiene al crear un Workflow mediante nuestra API de Workflows. La respuesta de la API te proporcionará este identificador.

¿Cómo consigo el `apiKey` y el `baseUrl`?

El apiKey es proporcionado de forma privada, y el baseUrl suele ser:

https://api.rem.tools para producción.
https://api.test.rem.tools para pruebas.

Flutter

Requisitos​

Instalación​

Configuración del CLI de OnePub​

Agregar la dependencia en tu proyecto​

Uso del SDK​

Inicialización y Ejecución de un Workflow​

Permisos Requeridos​

Android​

Configuración Específica para Android​

Requisitos de SDK de Android​

Configuración del build.gradle (app)​

Reglas para Proguard​

Ajuste en el AndroidManifest​

Organización de Recursos Personalizados​

Configuración Específica para iOS​

Requisitos de iOS​

Configuración del Podfile​

Instalación de Dependencias​

Permisos en Info.plist​

Organización de Recursos en iOS​

FAQ​

¿Cómo obtengo el workflowId?​

¿Cómo consigo el apiKey y el baseUrl?​