SDK para dispositivos móviles

Los SDKs para dispositivos móviles de la plataforma de Contact Center AI (CCAI Platform) incluyen el SDK de Android y el SDK de iOS. Con estos SDKs, puedes brindar asistencia por voz y chat a tus clientes directamente en tu app para dispositivos móviles de iOS o Android.

Puedes configurar las apps para dispositivos móviles para que funcionen con la Plataforma de la CCAI de varias maneras, como integrar los SDKs para dispositivos móviles en tus apps para dispositivos móviles según se indica en la guía del SDK de Android o la guía del SDK de iOS. También puedes integrar los SDKs para dispositivos móviles en tus apps para dispositivos móviles con Flutter o React Native.

Cómo realizar la integración con Flutter

En esta sección, se proporcionan los pasos iniciales para usar Flutter y, así, integrar los SDKs para dispositivos móviles en tus apps para dispositivos móviles. Los pasos de esta sección son los mismos para el SDK de Android y el SDK de iOS. Después de completar estos pasos, puedes continuar con las instrucciones específicas del SDK de Android o del SDK de iOS, según tu plataforma para dispositivos móviles.

No es necesario usar Flutter para integrar los SDKs para dispositivos móviles en tus apps para dispositivos móviles. También puedes realizar la integración como se indica a continuación:

Ejecuta la app de ejemplo de forma local

Para ejecutar una app de muestra, se requiere lo siguiente:

  • Flutter: Es un framework para compilar apps multiplataforma.

  • Android Studio: Es un entorno de desarrollo integrado para el desarrollo de apps de Flutter y Android.

  • Xcode: Es un entorno de desarrollo integrado para el desarrollo de apps para iOS.

  • CocoaPods: Es un administrador de dependencias para proyectos de iOS.

Para ejecutar la app de ejemplo de forma local, sigue estos pasos:

  1. Descarga y expande el archivo ZIP del ejemplo de Flutter.

  2. En la terminal, ve al directorio de ejemplo de Flutter.

  3. Ingresa el siguiente código en la terminal:

    cd example
cp .env.example .env

  4. Ingresa los valores de variable de entorno en el archivo .env, por ejemplo, API_KEY=your_api_key. No se requieren comillas.

  5. Para instalar las dependencias, ingresa flutter pub get en la terminal.

  6. Para actualizar la información de la empresa, ve a android/app/src/main/res/values/strings.xml y actualiza ujet_company_key, ujet_subdomain y ujet_company_url.

  7. Según tu plataforma, ejecuta un emulador de Android o un simulador de iOS.

  8. Ingresa flutter run en la terminal.

Importa el módulo de CCAI Platform a tu proyecto

Para importar el módulo de CCAI Platform en tu proyecto, necesitas lo siguiente:

  • Es un extremo de API de firma de JWT. Para obtener más información, consulta Autenticación de usuarios finales del SDK.

  • En el caso de Android, el objetivo de implementación de tu proyecto debe ser iOS 13.0 o una versión posterior.

  • En el caso de iOS, el minSdkVersion de tu proyecto debe ser 21 o posterior.

Para importar el módulo de CCAI Platform a tu proyecto, sigue estos pasos:

  1. Copia el contenido del directorio example/lib/ujet y pégalo en el directorio lib de tu proyecto de Flutter.

  2. Ve a example/android/app/src/main/kotlin/co/ujet/flutter_example_app y copia los siguientes archivos en tu proyecto de Flutter, donde se encuentra la clase MainActivity:

    • UJETModule.kt

    • Application.kt

    • firebase\MyFirebaseMessagingService.kt

    • firebase\FirebaseTokenManager.kt

  3. Abre Xcode y, luego, arrastra example/ios/Runner/UJETModule.swift a tu proyecto.

  4. Abre example/lib/ujet/ujet_module.dart y edita el método _getUserData para que devuelva la información adecuada para el usuario final. Consulta el siguiente ejemplo de código:

    static Future<Map<String, String?>> _getUserData() async {

String? name = "John Doe"; // end-user name
String? identifier = "id1234"; // end user identifier
String? email = "jdoe@example.com"; // end user email
String? phone = "+12223334444"; // end user phone

return {
  "name": name,
  "identifier": identifier,
  "email": email,
  "phone": phone
  };
}

  5. Implementa signPayload en server_api.dart para obtener el token JWT firmado de la API de tu servidor. Para obtener más información, consulta Autenticación de usuarios finales del SDK.

Inicialización y comienzo

Para inicializar y comenzar, ingresa el siguiente código en la terminal:

 await UJET.init(key: 'your_ujet_key', baseUrl: 'your_ujet_base_url');
 await UJET.start(UjetStartOptions(skipSplashScreen: true));

Problemas conocidos

A continuación, se indican los problemas conocidos relacionados con el uso de Flutter para integrar los SDKs para dispositivos móviles en tus apps para dispositivos móviles:

  • Problema: No se capturan capturas de pantalla con las Acciones inteligentes de captura de pantalla.

    • Acción: Google está trabajando para solucionar este problema.

  • Problema: La pantalla de navegación conjunta no se proyecta desde el lado del agente durante una sesión de navegación conjunta (solo en iOS).

    • Acción: Google recomienda inhabilitar el motor de Impeller en dispositivos iOS. Para inhabilitar el motor de impulsor, sigue estos pasos:

      1. Abre el archivo info.plist.

      2. Establece la clave FLTEnableImpeller en false, como en la siguiente muestra de código:

        <key>FLTEnableImpeller</key>
<false/>

Continúa con la integración

Para continuar con la integración usando Flutter, consulta una de las siguientes páginas, según tu plataforma para dispositivos móviles:

Cómo realizar la integración con React Native

En esta sección, se proporcionan los pasos iniciales para usar React Native y, así, integrar los SDKs para dispositivos móviles en tus apps para dispositivos móviles. Los pasos de esta sección son los mismos para el SDK de Android y el SDK de iOS. Después de completar estos pasos, puedes continuar con las instrucciones específicas del SDK de Android o del SDK de iOS, según tu plataforma para dispositivos móviles.

No es necesario usar React Native para integrar los SDKs para dispositivos móviles en tus apps para dispositivos móviles. También puedes realizar la integración como se indica a continuación:

Ejecuta la app de ejemplo de forma local

Para ejecutar la app de ejemplo de forma local, haz lo siguiente:

  1. Descarga y extrae la app de ejemplo ujet-react-native-example.zip.

  2. Abre el archivo README.md en la carpeta extraída y sigue las instrucciones.

Ejecuta la app de ejemplo desde un servidor local

La app de ejemplo que descargaste en el procedimiento anterior también se puede ejecutar desde un servidor local. Para ello, sigue estos pasos:

  1. Descarga y expande el archivo ZIP del ejemplo de React Native.

  2. Accede al directorio en el que se implementó la muestra del servidor.

  3. Ingresa los siguientes comandos:

    cd server
cp .env.example .env
Edit .env
nvm use
npm install
npm start```

Ejecuta React Native

Para ejecutar React Native, sigue estos pasos:

  1. Cambia el directorio de la aplicación.

  2. Ingresa los siguientes comandos:

    cd app
nvm use
npm install
bundle install
npx pod-install

  3. Actualiza la información de la empresa:

    1. src/screens/Home.tsx: Actualiza los parámetros en UJET.initialize({})

    2. android/app/src/main/res/values/strings.xml: Actualiza ujet_company_key, ujet_subdomain y ujet_company_url.

  4. Ingresa el comando npm start.

  5. Ejecuta la app para dispositivos móviles de iOS o Android con la CLI interactiva de Meteor o el IDE que prefieras.

Importa el módulo de CCAI Platform a tu proyecto

En esta sección, se muestra cómo importar el módulo de la CCAI Platform a tu proyecto.

Requisitos

Debes usar un extremo de API de firma de JWT. Consulta el archivo server/app.js en la app de ejemplo o Autenticación de usuarios finales para obtener más detalles.

Procedimiento

Para importar el módulo de CCAI Platform a tu proyecto, sigue estos pasos:

  1. Copia los siguientes archivos de la app de ejemplo y pégalos en tu proyecto donde corresponda:

    1. app/src/native_modules/UJETInterfaces.ts
    2. app/src/native_modules/UJETNativeModule.ts
    3. app/ios/UJETModule.h
    4. app/ios/UJETModule.m
    5. app/android/src/main/java/com/sampleapp/UJETModule.kt

  2. Abrir UJETNativeModule.ts

    1. Quita la siguiente línea:

      import AsyncStorage from '@react-native-async-storage/async-storage';

    2. Edita la función getUserData para que muestre información precisa del usuario final:

      async function getUserData({ name: anonymousName }: SignPayloadData): Promise<Object> {
  // fetch the end user information from your application
  return {
    name: 'John Doe',
    identifier: 'id1234',
    email: 'jdoe@example.com',
    phone: '+12223334444'
  }
}

    3. Actualiza SIGNING_BASE_URL para que apunte a tu extremo de firma.

  3. Inicializa y comienza con la siguiente muestra de código:

    import { UJET } from '../path/UJETNativeModule';

UJET.initialize({
  key: 'your-key',
  baseUrl: 'your-base-url'
});

const startUJET = () => {
  UJET.start({
    skipSplashScreen: true
  });
};
    • Reemplaza your-key por el ID de la empresa.
    • Reemplaza your-base-url por el extremo de API del host de la plataforma de CCAI, por ejemplo, https://ccaas-host.uc1.ccaiplatform.com/api/v2/.

Continúa con la integración

Para continuar con la integración usando React Native, consulta una de las siguientes páginas, según tu plataforma para dispositivos móviles: