SDK pour mobile

Les SDK mobiles de la plate-forme Contact Center AI (CCAI Platform) incluent le SDK Android et le SDK iOS. Ces SDK vous permettent de proposer une assistance vocale et par chat à vos clients directement dans votre application mobile iOS ou Android.

Vous pouvez configurer des applications mobiles pour qu'elles fonctionnent avec la plate-forme CCAI de différentes manières, y compris en intégrant les SDK mobiles à vos applications mobiles, comme indiqué dans le guide du SDK Android ou le guide du SDK iOS. Vous pouvez également intégrer les SDK mobiles à vos applications mobiles à l'aide de Flutter ou React Native.

Intégrer à l'aide de Flutter

Cette section fournit les premières étapes à suivre pour utiliser Flutter afin d'intégrer les SDK mobiles à vos applications mobiles. Les étapes de cette section sont identiques pour les SDK Android et iOS. Une fois ces étapes effectuées, vous pouvez continuer en suivant les instructions spécifiques au SDK Android ou au SDK iOS, selon votre plate-forme mobile.

Flutter n'est pas nécessaire pour intégrer les SDK mobiles à vos applications mobiles. Vous pouvez également effectuer l'intégration comme indiqué dans les ressources suivantes :

Exécuter l'application exemple en local

Pour exécuter un exemple d'application, vous devez disposer des éléments suivants :

  • Flutter : framework permettant de créer des applications multiplates-formes.

  • Android Studio : environnement de développement intégré pour le développement d'applications Flutter et Android.

  • Xcode : environnement de développement intégré pour le développement d'applications iOS.

  • CocoaPods : gestionnaire de dépendances pour les projets iOS.

Pour exécuter l'exemple d'application en local, procédez comme suit :

  1. Téléchargez et développez le fichier ZIP Exemple Flutter.

  2. Dans le terminal, accédez au répertoire de l'exemple Flutter.

  3. Saisissez le code suivant dans le terminal :

    cd example
    cp .env.example .env
    
  4. Saisissez les valeurs des variable d'environnement dans le fichier .env (par exemple, API_KEY=your_api_key). Les guillemets ne sont pas obligatoires.

  5. Pour installer les dépendances, saisissez flutter pub get dans le terminal.

  6. Pour mettre à jour les informations sur l'entreprise, accédez à android/app/src/main/res/values/strings.xml et modifiez ujet_company_key, ujet_subdomain et ujet_company_url.

  7. Exécutez un émulateur Android ou un simulateur iOS en fonction de votre plate-forme.

  8. Saisissez flutter run dans le terminal.

Importer le module CCAI Platform dans votre projet

Pour importer le module CCAI Platform dans votre projet, vous devez disposer des éléments suivants :

  • Point de terminaison de l'API de signature JWT. Pour en savoir plus, consultez Authentification des utilisateurs finaux du SDK.

  • Pour Android, la cible de déploiement de votre projet doit être iOS 13.0 ou version ultérieure.

  • Pour iOS, le minSdkVersion de votre projet doit être défini sur 21 ou une version ultérieure.

Pour importer le module CCAI Platform dans votre projet, procédez comme suit :

  1. Copiez le contenu du répertoire example/lib/ujet et collez-le dans votre projet Flutter, dans le répertoire lib.

  2. Accédez à example/android/app/src/main/kotlin/co/ujet/flutter_example_app et copiez les fichiers suivants dans votre projet Flutter, où se trouve la classe MainActivity :

    • UJETModule.kt

    • Application.kt

    • firebase\MyFirebaseMessagingService.kt

    • firebase\FirebaseTokenManager.kt

  3. Ouvrez Xcode, puis faites glisser example/ios/Runner/UJETModule.swift dans votre projet.

  4. Ouvrez example/lib/ujet/ujet_module.dart et modifiez la méthode _getUserData pour qu'elle renvoie les informations appropriées sur l'utilisateur final. Consultez l'exemple de code suivant :

    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. Implémentez signPayload dans server_api.dart pour obtenir le jeton JWT signé à partir de l'API de votre serveur. Pour en savoir plus, consultez Authentification des utilisateurs finaux du SDK.

Initialiser et démarrer

Pour initialiser et démarrer, saisissez le code suivant dans le terminal :

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

Problèmes connus

Voici les problèmes connus liés à l'utilisation de Flutter pour intégrer les SDK mobiles dans vos applications mobiles :

  • Problème : Les captures d'écran ne sont pas effectuées à l'aide des actions intelligentes de capture d'écran.

    • Action : Google met tout en œuvre pour résoudre ce problème.
  • Problème : L'écran de navigation conjointe n'est pas projeté du côté de l'agent lors d'une session de navigation conjointe (iOS uniquement).

    • Action : Google recommande de désactiver le moteur Impeller sur les appareils iOS. Pour désactiver le moteur de la turbine :

      1. Ouvrez le fichier info.plist.

      2. Définissez la clé FLTEnableImpeller sur false, comme dans l'exemple de code suivant :

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

Poursuivre votre intégration

Pour continuer l'intégration à l'aide de Flutter, consultez l'une des pages suivantes, en fonction de votre plate-forme mobile :

Intégrer à l'aide de React Native

Cette section fournit les premières étapes à suivre pour utiliser React Native afin d'intégrer les SDK mobiles à vos applications mobiles. Les étapes de cette section sont identiques pour les SDK Android et iOS. Une fois ces étapes effectuées, vous pouvez continuer en suivant les instructions spécifiques au SDK Android ou au SDK iOS, selon votre plate-forme mobile.

React Native n'est pas nécessaire pour intégrer les SDK mobiles dans vos applications mobiles. Vous pouvez également effectuer l'intégration comme indiqué dans les ressources suivantes :

Exécuter l'application exemple en local

Pour exécuter l'exemple d'application en local :

  1. Téléchargez et extrayez l'exemple d'application ujet-react-native-example.zip.

  2. Ouvrez le fichier README.md dans le dossier extrait et suivez les instructions.

Exécuter l'application exemple à partir d'un serveur local

L'application exemple que vous avez téléchargée lors de la procédure précédente peut également être exécutée à partir d'un serveur local. Pour ce faire, procédez comme suit :

  1. Téléchargez et développez le fichier ZIP de l'exemple React Native.

  2. Accédez au répertoire dans lequel l'exemple de serveur est déployé.

  3. Saisissez les commandes suivantes :

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

Exécuter React Native

Pour exécuter React Native, procédez comme suit :

  1. Modifiez le répertoire de l'application.

  2. Saisissez les commandes suivantes :

    cd app
    nvm use
    npm install
    bundle install
    npx pod-install
    
  3. Modifiez les informations sur l'entreprise :

    1. src/screens/Home.tsx : mettez à jour les paramètres dans UJET.initialize({}).

    2. android/app/src/main/res/values/strings.xml: : mettez à jour ujet_company_key, ujet_subdomain et ujet_company_url.

  4. Saisissez la commande npm start.

  5. Exécutez l'application mobile iOS ou Android à l'aide de la CLI interactive Meteor ou d'un IDE de votre choix.

Importer le module CCAI Platform dans votre projet

Cette section vous explique comment importer le module CCAI Platform dans votre projet.

Conditions requises

Vous devez utiliser un point de terminaison d'API de signature JWT. Consultez le fichier server/app.js dans l'application exemple ou Authentification de l'utilisateur final pour en savoir plus.

Procédure

Pour importer le module CCAI Platform dans votre projet, procédez comme suit :

  1. Copiez les fichiers suivants de l'application exemple et collez-les dans votre projet, le cas échéant :

    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. Ouvrir UJETNativeModule.ts

    1. Supprimez la ligne suivante :

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

    2. Modifiez la fonction getUserData pour renvoyer des informations précises sur l'utilisateur 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. Mettez à jour SIGNING_BASE_URL pour qu'il pointe vers votre point de terminaison de signature.

  3. Initialisez et démarrez à l'aide de l'exemple de code suivant :

    import { UJET } from '../path/UJETNativeModule';
    
    UJET.initialize({
      key: 'your-key',
      baseUrl: 'your-base-url'
    });
    
    const startUJET = () => {
      UJET.start({
        skipSplashScreen: true
      });
    };
    
    • Remplacez your-key par l'ID de l'entreprise.
    • Remplacez your-base-url par le point de terminaison de l'API pour l'hôte de la plate-forme CCAI, par exemple https://ccaas-host.uc1.ccaiplatform.com/api/v2/.

Poursuivre votre intégration

Pour continuer l'intégration à l'aide de React Native, consultez l'une des pages suivantes, en fonction de votre plate-forme mobile :