SDK mobile

Gli SDK per dispositivi mobili della piattaforma Contact Center AI (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 per funzionare con la piattaforma CCAI in diversi modi, ad esempio integrando gli SDK mobile nelle tue app mobile come indicato nella 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 l'utilizzo di Flutter per integrare gli SDK mobile nelle tue app mobile. I passaggi descritti in questa sezione sono gli stessi per l'SDK Android e l'SDK iOS. Una volta completati questi passaggi, puoi continuare utilizzando le istruzioni specifiche per l'SDK Android o l'SDK iOS, a seconda della tua piattaforma mobile.

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

Esegui l'app di esempio localmente

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 Android.

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

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

Per eseguire l'app di esempio in locale, segui questi passaggi:

  1. Scarica ed espandi il file ZIP Flutter example.

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

  3. Inserisci questo 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. Le virgolette non sono obbligatorie.

  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.

Importa il modulo CCAI Platform nel tuo progetto

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

  • Un endpoint API di firma JWT. Per saperne di più, consulta Autenticazione utente finale dell'SDK.

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

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

Per importare il modulo CCAI Platform nel tuo 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 tuo 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 tuo progetto.

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

    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 saperne di più, consulta Autenticazione utente finale dell'SDK.

Inizializza e avvia

Per inizializzare e avviare, inserisci questo 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 Azioni rapide per gli screenshot.

    • Azione: Google sta lavorando per risolvere il 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 della girante:

      1. Apri il file info.plist.

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

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

Continua l'integrazione

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

Integrare 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 per l'SDK Android e l'SDK iOS. Una volta completati questi passaggi, puoi continuare utilizzando le istruzioni specifiche per l'SDK Android o l'SDK iOS, a seconda della tua piattaforma mobile.

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

Esegui l'app di esempio localmente

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.

Esegui 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 dell'esempio di React Native.

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

  3. Inserisci i seguenti comandi:

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

Esegui 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 iOS o Android utilizzando l'interfaccia a riga di comando interattiva di Meteor o un IDE a tua scelta.

Importa il modulo della piattaforma CCAI nel tuo progetto

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

Requisiti

Devi utilizzare un endpoint API di 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 tuo progetto:

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

    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 per restituire informazioni accurate sull'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 della piattaforma CCAI, ad esempio, https://ccaas-host.uc1.ccaiplatform.com/api/v2/.

Continua l'integrazione

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