SDK para dispositivos móviles

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

Puedes configurar apps para dispositivos móviles para que funcionen con CCAI Platform de varias maneras, incluida la integración de los SDK para dispositivos móviles en tus apps para dispositivos móviles, como se indica en la guía del SDK de Android o la guía del SDK de iOS. También puedes integrar los SDK 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 para integrar los SDK 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 para el SDK de Android o el SDK de iOS, según tu plataforma para dispositivos móviles.

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

Ejecuta la app de ejemplo de forma local

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

  • Flutter: Un framework para compilar apps multiplataforma.

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

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

  • Cocoapods: 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 de 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 a tu proyecto, se requiere lo siguiente:

  • 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 una versión 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 tu proyecto de Flutter en el directorio lib.

  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 muestre la información adecuada del 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 tu API de servidor. Para obtener más información, consulta Autenticación de usuarios finales del SDK.

Inicializa y comienza

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

Estos son los problemas conocidos por usar Flutter para integrar los SDK para dispositivos móviles en tus apps para dispositivos móviles:

  • Problema: No se capturan capturas de pantalla con las SmartActions 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 impulsor en dispositivos iOS. Para inhabilitar el motor de impulsor, sigue estos pasos:

      1. Abre el archivo info.plist.

      2. Configura la clave FLTEnableImpeller como 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 con 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 para integrar los SDK 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 para el SDK de Android o el SDK de iOS, según tu plataforma para dispositivos móviles.

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

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 ujet-react-native-example.zip 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 de ejemplo de React Native.

  2. Accede al directorio en el que se implementa 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 iOS o Android con la CLI interactiva de Meteor o un IDE de tu elección.

Importa el módulo de CCAI Platform a tu proyecto

En esta sección, se muestra cómo importar el módulo de 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 cuando 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. Abre 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 la 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 CCAI Platform, por ejemplo, https://ccaas-host.uc1.ccaiplatform.com/api/v2/.

Continúa con la integración

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