SDK mobile

Gli SDK mobile di Contact Center AI Platform (CCAI Platform) includono l'SDK Android e l'SDK iOS. Con questi SDK, puoi fornire assistenza vocale e via chat ai tuoi clienti direttamente all'interno della tua app mobile per iOS o Android.

Puoi configurare le app mobile in modo che funzionino con CCAI Platform in diversi modi, ad esempio integrando gli SDK mobile nelle tue app mobile come indicato in the guida all'SDK Android o nella guida all'SDK iOS. Puoi anche integrare gli SDK mobile nelle tue app mobile utilizzando Flutter o React Native.

Eseguire l'integrazione utilizzando Flutter

Questa sezione fornisce i passaggi iniziali per utilizzare Flutter per integrare gli SDK mobile nelle tue app mobile. I passaggi descritti in questa sezione sono gli stessi sia per l'SDK Android sia per l'SDK iOS. Dopo aver completato questi passaggi, puoi continuare utilizzando le istruzioni specifiche per l'SDK Android o l'SDK iOS, a seconda della piattaforma mobile.

Flutter non è obbligatorio per integrare gli SDK mobile nelle tue app mobile. Puoi anche eseguire l'integrazione come indicato di seguito:

Eseguire l'app di esempio in locale

Per eseguire un'app di esempio sono necessari i seguenti elementi:

  • Flutter: un framework per la creazione di app multipiattaforma.

  • Android Studio: un ambiente di sviluppo integrato per lo sviluppo di app Flutter e app per Android.

  • Xcode: un ambiente di sviluppo integrato per lo sviluppo di app iOS.

  • Cocoapods: un gestore delle dipendenze per i progetti iOS.

Per eseguire l'app di esempio in locale:

  1. Scarica ed espandi il file ZIP di esempio di Flutter.

  2. Nel terminale, vai alla directory di esempio di Flutter.

  3. Inserisci il seguente codice nel terminale:

    cd example
cp .env.example .env

  4. Inserisci i valori variabile di ambiente nel file .env, ad esempio API_KEY=your_api_key. Non sono necessari virgolette.

  5. Per installare le dipendenze, inserisci flutter pub get nel terminale.

  6. Per aggiornare le informazioni sull'azienda, vai a android/app/src/main/res/values/strings.xml e aggiorna ujet_company_key, ujet_subdomain e ujet_company_url.

  7. A seconda della piattaforma, esegui un emulatore Android o un simulatore iOS.

  8. Inserisci flutter run nel terminale.

Importare il modulo CCAI Platform nel progetto

Per importare il modulo CCAI Platform nel progetto sono necessari i seguenti elementi:

  • Un endpoint API per la firma JWT. Per maggiori informazioni, vedi Autenticazione dell'utente finale dell'SDK.

  • Per Android, la destinazione di deployment del progetto deve essere iOS 13.0 o versioni successive.

  • Per iOS, il valore di minSdkVersion del progetto deve essere 21 o versioni successive.

Per importare il modulo CCAI Platform nel progetto:

  1. Copia i contenuti della directory example/lib/ujet e incollali nel tuo progetto Flutter nella directory lib.

  2. Vai a example/android/app/src/main/kotlin/co/ujet/flutter_example_app e copia i seguenti file nel progetto Flutter in cui si trova la classe MainActivity:

    • UJETModule.kt

    • Application.kt

    • firebase\MyFirebaseMessagingService.kt

    • firebase\FirebaseTokenManager.kt

  3. Apri Xcode e trascina example/ios/Runner/UJETModule.swift nel progetto.

  4. Apri example/lib/ujet/ujet_module.dart e modifica il metodo _getUserData in modo che restituisca le informazioni appropriate dell'utente finale. Vedi l'esempio di codice seguente:

    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 in server_api.dart per ottenere il token JWT firmato dall'API del server. Per maggiori informazioni, vedi Autenticazione dell'utente finale dell'SDK.

Inizializzare e avviare

Per inizializzare e avviare, inserisci il seguente codice nel terminale:

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

Problemi noti

Di seguito sono riportati i problemi noti relativi all'utilizzo di Flutter per integrare gli SDK mobile nelle tue app mobile:

  • Problema: gli screenshot non vengono acquisiti utilizzando le Smart Action per gli screenshot.

    • Azione: Google sta lavorando per risolvere questo problema.

  • Problema: la schermata di navigazione condivisa non viene proiettata dal lato dell'agente durante una sessione di navigazione condivisa (solo iOS).

    • Azione: Google consiglia di disattivare il motore impeller sui dispositivi iOS Per disattivare il motore impeller:

      1. Apri il file info.plist.

      2. Imposta la chiave FLTEnableImpeller su false, come nell'esempio di codice seguente:

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

Continuare l'integrazione

Per continuare l'integrazione utilizzando Flutter, consulta una delle seguenti pagine, a seconda della piattaforma mobile:

Eseguire l'integrazione utilizzando React Native

Questa sezione fornisce i passaggi iniziali per utilizzare React Native per integrare gli SDK mobile nelle tue app mobile. I passaggi descritti in questa sezione sono gli stessi sia per l'SDK Android sia per l'SDK iOS. Dopo aver completato questi passaggi, puoi continuare utilizzando le istruzioni specifiche per l'SDK Android o l'SDK iOS, a seconda della piattaforma mobile.

React Native non è obbligatorio per integrare gli SDK mobile nelle tue app mobile. Puoi anche eseguire l'integrazione come indicato di seguito:

Eseguire l'app di esempio in locale

Per eseguire l'app di esempio in locale:

  1. Scarica ed estrai l'app di esempio ujet-react-native-example.zip.

  2. Apri il file README.md nella cartella estratta e segui le istruzioni.

Eseguire l'app di esempio da un server locale

L'app di esempio che hai scaricato nella procedura precedente può essere eseguita anche da un server locale. A questo scopo, procedi nel seguente modo:

  1. Scarica ed espandi il file ZIP di esempio di React Native.

  2. Accedi alla directory in cui è stato eseguito il deployment dell'esempio del server.

  3. Inserisci i seguenti comandi:

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

Eseguire React Native

Per eseguire React Native:

  1. Modifica la directory dell'applicazione.

  2. Inserisci i seguenti comandi:

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

  3. Aggiorna le informazioni sull'azienda:

    1. src/screens/Home.tsx:aggiorna i parametri in UJET.initialize({})

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

  4. Inserisci il comando npm start.

  5. Esegui l'app mobile per iOS o Android utilizzando l'interfaccia a riga di comando interattiva di Meteor o un IDE a tua scelta.

Importare il modulo CCAI Platform nel progetto

Questa sezione mostra come importare il modulo CCAI Platform nel progetto.

Requisiti

Devi utilizzare un endpoint API per la firma JWT. Per maggiori dettagli, consulta il file server/app.js nell'app di esempio o l'articolo Autenticazione dell'utente finale.

Procedura

Per importare il modulo CCAI Platform nel progetto:

  1. Copia i seguenti file dall'app di esempio e incollali nel progetto dove appropriato:

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

    1. Rimuovi la seguente riga:

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

    2. Modifica la funzione getUserData in modo che restituisca informazioni accurate dell'utente finale:

      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. Aggiorna SIGNING_BASE_URL in modo che rimandi all'endpoint di firma.

  3. Inizializza e avvia utilizzando il seguente esempio di codice:

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

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

const startUJET = () => {
  UJET.start({
    skipSplashScreen: true
  });
};
    • Sostituisci your-key con l'ID azienda.
    • Sostituisci your-base-url con l'endpoint API per l'host di CCAI Platform, ad esempio https://ccaas-host.uc1.ccaiplatform.com/api/v2/.

Continuare l'integrazione

Per continuare l'integrazione utilizzando React Native, consulta una delle seguenti pagine, a seconda della piattaforma mobile: