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 Arten für die CCAI-Plattform einrichten, z. B. indem Sie die mobilen SDKs in Ihre mobilen Apps einbinden, wie im Android SDK-Leitfaden oder im iOS SDK-Leitfaden beschrieben. Sie können die mobilen SDKs auch mit Flutter oder React Native in Ihre mobilen Apps einbinden.

Mit Flutter integrieren

In diesem Abschnitt finden Sie die ersten Schritte zur Integration der mobilen SDKs in Ihre mobilen Apps mit Flutter. 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 der Anleitung 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 Integration auch wie unten beschrieben vornehmen:

• Android SDK-Leitfaden

• iOS SDK-Leitfaden

• Integration mit React Native

Beispiel-App lokal ausführen

Für das Ausführen einer Beispiel-App sind folgende Voraussetzungen 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 Beispielanwendung lokal aus:

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

2. Wechseln Sie im Terminal zum Flutter-Beispielverzeichnis.

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 flutter pub get in das Terminal 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 flutter run in das Terminal ein.

CCAI Platform-Modul in Ihr Projekt importieren

Für den Import des CCAI Platform-Moduls in Ihr Projekt sind folgende Voraussetzungen erforderlich:

• Ein API-Endpunkt zum Signieren von JWTs. Weitere Informationen finden Sie unter SDK-Endnutzerauthentifizierung.

• Unter Android muss das Bereitstellungsziel Ihres Projekts iOS 13.0 oder höher sein.

• Für iOS muss minSdkVersion Ihres Projekts mindestens 21 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

   Wichtig :Achten Sie darauf, die Paketdeklaration oben in diesen Dateien entsprechend der Paketstruktur Ihres Projekts zu ändern.

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

4. Öffnen Sie example/lib/ujet/ujet_module.dart und bearbeiten Sie die Methode _getUserData, damit 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 = "[e-mail]"; // end user email
   String? phone = "[phone]"; // 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-Endnutzerauthentifizierung.

Initialisieren und starten

Geben Sie zum Initialisieren und Starten den folgenden Code in das Terminal ein:

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

Bekannte Probleme

Hier finden Sie bekannte Probleme bei der Verwendung von Flutter zum Integrieren der mobilen SDKs in Ihre mobilen Apps:

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

  • Maßnahme: Google arbeitet an der Behebung dieses Problems.

• Problem: Der Bildschirm für die gemeinsame Navigation wird während einer Sitzung für die gemeinsame Navigation nicht vom Kundenservicemitarbeiter projiziert (nur iOS).

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

    1. Öffnen Sie die Datei info.plist.

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

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

Integration fortsetzen

Wenn Sie die Integration mit Flutter fortsetzen möchten, lesen Sie je nach mobiler Plattform eine der folgenden Seiten:

• Flutter für Android

• Flutter für iOS

Mit React Native einbinden

In diesem Abschnitt werden die ersten Schritte zur Verwendung von React Native zum Einbinden der mobilen SDKs in Ihre mobilen Apps 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 der Anleitung 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 Integration auch wie unten beschrieben vornehmen:

• Android SDK-Leitfaden

• iOS SDK-Leitfaden

• Mit Flutter einbinden

Beispiel-App lokal ausführen

So führen Sie die Beispielanwendung lokal aus:

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

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

Beispielanwendung von einem lokalen Server ausführen

Die Beispiel-App, die Sie im vorherigen Abschnitt heruntergeladen haben, 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. So 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 iOS- oder Android-App entweder mit der interaktiven Meteor-Befehlszeile oder einer IDE Ihrer Wahl aus.

   Hinweis :Wenn der Befehl fehlschlägt, geben Sie den Simulator an, z. B. npm run ios -- --simulator="iPhone 15 Pro".

CCAI Platform-Modul in Ihr Projekt importieren

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

Voraussetzungen

Sie müssen einen API-Endpunkt zum Signieren von JWTs verwenden. Weitere Informationen finden Sie in der Datei server/app.js in der Beispiel-App oder unter Endnutzerauthentifizierung.

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

   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: '[e-mail]',
          phone: '[phone]'
        }
      }
      

   3. Aktualisieren Sie SIGNING_BASE_URL, sodass sie auf Ihren Signierungs-Endpunkt verweist.

3. Initialisieren und starten Sie die Funktion mit dem folgenden Beispielcode:

   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-Plattform-Host, z. B. https://ccaas-host.uc1.ccaiplatform.com/api/v2/.

Integration fortsetzen

Wenn Sie die Integration mit React Native fortsetzen möchten, lesen Sie eine der folgenden Seiten, je nach Ihrer mobilen Plattform:

• React Native für Android

• React Native für iOS