Mobile SDKs

Die mobilen SDKs der Contact Center AI Platform (CCAI Platform) umfassen das Android SDK und das iOS SDK. Mit diesen SDKs können Sie Ihren Kunden direkt in Ihrer mobilen iOS- oder Android-App Sprach- und Chat-Support anbieten.

Sie können mobile Apps auf verschiedene Weise für die Verwendung mit der CCAI Platform einrichten, z. B. indem Sie die mobilen SDKs gemäß der Anleitung im Android SDK-Leitfaden oder im iOS SDK Leitfaden in Ihre mobilen Apps einbinden. Sie können die mobilen SDKs auch mit Flutter oder React Native in Ihre mobilen Apps einbinden.

Einbindung mit Flutter

In diesem Abschnitt werden die ersten Schritte zur Einbindung der mobilen SDKs in Ihre mobilen Apps mit Flutter beschrieben. Die Schritte in diesem Abschnitt sind für das Android SDK und das iOS SDK gleich. Nachdem Sie diese Schritte ausgeführt haben, können Sie je nach mobiler Plattform mit den spezifischen Anleitungen für das Android SDK oder das iOS SDK fortfahren.

Flutter ist nicht erforderlich, um die mobilen SDKs in Ihre mobilen Apps einzubinden. Sie können die Einbindung auch gemäß den folgenden Anleitungen vornehmen:

Beispiel-App lokal ausführen

Für die Ausführung einer Beispiel-App ist Folgendes erforderlich:

  • Flutter: Ein Framework zum Erstellen plattformübergreifender Apps.

  • Android Studio: Eine integrierte Entwicklungsumgebung für die Entwicklung von Flutter- und Android-Apps.

  • Xcode: Eine integrierte Entwicklungsumgebung für die Entwicklung von iOS-Apps.

  • Cocoapods: Ein Abhängigkeitsmanager für iOS-Projekte.

So führen Sie die Beispiel-App lokal aus:

  1. Laden Sie die ZIP-Datei mit dem Flutter-Beispiel herunter und entpacken Sie sie.

  2. Wechseln Sie im Terminal zum Verzeichnis mit dem Flutter-Beispiel.

  3. Geben Sie im Terminal den folgenden Code ein:

    cd example
cp .env.example .env

  4. Geben Sie die Werte der Umgebungsvariablen in die Datei .env ein, z. B. API_KEY=your_api_key. Anführungszeichen sind nicht erforderlich.

  5. Geben Sie im Terminal flutter pub get ein, um Abhängigkeiten zu installieren.

  6. Wenn Sie die Unternehmensinformationen aktualisieren möchten, rufen Sie android/app/src/main/res/values/strings.xml auf und aktualisieren Sie ujet_company_key, ujet_subdomain und ujet_company_url.

  7. Führen Sie je nach Plattform entweder einen Android-Emulator oder einen iOS-Simulator aus.

  8. Geben Sie im Terminal flutter run ein.

CCAI Platform-Modul in Ihr Projekt importieren

Für den Import des CCAI Platform-Moduls in Ihr Projekt ist Folgendes erforderlich:

  • Ein API-Endpunkt für die JWT-Signierung. Weitere Informationen finden Sie unter SDK-Endnutzer authentifizierung.

  • Für Android muss das Bereitstellungsziel Ihres Projekts iOS 13.0 oder höher sein.

  • Für iOS muss minSdkVersion Ihres Projekts 21 oder höher sein.

So importieren Sie das CCAI Platform-Modul in Ihr Projekt:

  1. Kopieren Sie den Inhalt des Verzeichnisses example/lib/ujet und fügen Sie ihn in Ihrem Flutter-Projekt in das Verzeichnis lib ein.

  2. Rufen Sie example/android/app/src/main/kotlin/co/ujet/flutter_example_app auf und kopieren Sie die folgenden Dateien in Ihr Flutter-Projekt, in dem sich die Klasse MainActivity befindet:

    • UJETModule.kt

    • Application.kt

    • firebase\MyFirebaseMessagingService.kt

    • firebase\FirebaseTokenManager.kt

  3. Öffnen Sie Xcode und ziehen Sie dann example/ios/Runner/UJETModule.swift in Ihr Projekt.

  4. Öffnen Sie example/lib/ujet/ujet_module.dart und bearbeiten Sie die Methode _getUserData, sodass sie die entsprechenden Endnutzerinformationen zurückgibt. Hier ein Codebeispiel:

    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. Implementieren Sie signPayload in server_api.dart, um das signierte JWT-Token von Ihrer Server-API abzurufen. Weitere Informationen finden Sie unter SDK-Endnutzer authentifizierung.

Initialisieren und starten

Geben Sie im Terminal den folgenden Code ein, um zu initialisieren und zu starten:

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

Bekannte Probleme

Hier sind bekannte Probleme bei der Einbindung der mobilen SDKs in Ihre mobilen Apps mit Flutter:

  • Problem: Screenshots werden nicht mit den SmartActions für Screenshots aufgenommen.

    • Maßnahme: Google arbeitet an einer Lösung für dieses Problem.

  • Problem: Der Bildschirm für die gemeinsame Browsersitzung wird während einer gemeinsamen Browsersitzung nicht von der Agentenseite projiziert (nur iOS).

    • Maßnahme: Google empfiehlt, die Impeller-Engine auf iOS Geräten zu deaktivieren. So deaktivieren Sie die Impeller-Engine:

      1. Öffnen Sie die Datei info.plist.

      2. Setzen Sie den Schlüssel FLTEnableImpeller auf false, wie im folgenden Codebeispiel:

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

Einbindung fortsetzen

Informationen zum Fortsetzen der Einbindung mit Flutter finden Sie je nach mobiler Plattform auf einer der folgenden Seiten:

Einbindung mit React Native

In diesem Abschnitt werden die ersten Schritte zur Einbindung der mobilen SDKs in Ihre mobilen Apps mit React Native beschrieben. Die Schritte in diesem Abschnitt sind für das Android SDK und das iOS SDK gleich. Nachdem Sie diese Schritte ausgeführt haben, können Sie je nach mobiler Plattform mit den spezifischen Anleitungen für das Android SDK oder das iOS SDK fortfahren.

React Native ist nicht erforderlich, um die mobilen SDKs in Ihre mobilen Apps einzubinden. Sie können die Einbindung auch gemäß den folgenden Anleitungen vornehmen:

Beispiel-App lokal ausführen

So führen Sie die Beispiel-App lokal aus:

  1. Laden Sie die ujet-react-native-example.zip ujet-react-native-example.zip herunter und entpacken Sie sie.

  2. Öffnen Sie die Datei README.md im extrahierten Ordner und folgen Sie der Anleitung.

Beispiel-App von einem lokalen Server ausführen

Die im vorherigen Schritt heruntergeladene Beispiel-App kann auch von einem lokalen Server aus ausgeführt werden. Gehen Sie hierzu folgendermaßen vor:

  1. Laden Sie die ZIP-Datei mit dem React Native-Beispiel herunter und entpacken Sie sie.

  2. Rufen Sie das Verzeichnis auf, in dem das Serverbeispiel bereitgestellt wird.

  3. Geben Sie die folgenden Befehle ein:

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

React Native ausführen

So führen Sie React Native aus:

  1. Wechseln Sie in das Anwendungsverzeichnis.

  2. Geben Sie die folgenden Befehle ein:

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

  3. Aktualisieren Sie die Unternehmensinformationen:

    1. src/screens/Home.tsx:Aktualisieren Sie die Parameter in UJET.initialize({}).

    2. android/app/src/main/res/values/strings.xml::Aktualisieren Sie ujet_company_key, ujet_subdomain und ujet_company_url.

  4. Geben Sie den Befehl npm start ein.

  5. Führen Sie die mobile iOS- oder Android-App entweder mit der interaktiven Meteor-Befehlszeile oder einer IDE Ihrer Wahl aus.

CCAI Platform-Modul in Ihr Projekt importieren

In diesem Abschnitt wird beschrieben, wie Sie das CCAI Platform-Modul in Ihr Projekt importieren.

Voraussetzungen

Sie müssen einen API-Endpunkt für die JWT-Signierung verwenden. Weitere Informationen finden Sie in der Datei server/app.js in der Beispiel-App oder unter Endnutzer Authentifizierung.

Prozedur

So importieren Sie das CCAI Platform-Modul in Ihr Projekt:

  1. Kopieren Sie die folgenden Dateien aus der Beispiel-App und fügen Sie sie an der entsprechenden Stelle in Ihr Projekt ein:

    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. Öffnen Sie UJETNativeModule.ts.

    1. Entfernen Sie die folgende Zeile:

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

    2. Bearbeiten Sie die Funktion getUserData, damit sie korrekte Endnutzerinformationen zurückgibt:

      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. Aktualisieren Sie SIGNING_BASE_URL, sodass sie auf Ihren Signierungsendpunkt verweist.

  3. Initialisieren und starten Sie mit dem folgenden Codebeispiel:

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

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

const startUJET = () => {
  UJET.start({
    skipSplashScreen: true
  });
};
    • Ersetzen Sie your-key durch die Unternehmens-ID.
    • Ersetzen Sie your-base-url durch den API-Endpunkt für den CCAI Platform-Host, z. B. https://ccaas-host.uc1.ccaiplatform.com/api/v2/.

Einbindung fortsetzen

Informationen zum Fortsetzen der Einbindung mit React Native finden Sie je nach mobiler Plattform auf einer der folgenden Seiten: