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 :
Téléchargez et développez le fichier ZIP Exemple Flutter.
Dans le terminal, accédez au répertoire de l'exemple Flutter.
Saisissez le code suivant dans le terminal :
cd example cp .env.example .envSaisissez les valeurs des variable d'environnement dans le fichier
.env(par exemple,API_KEY=your_api_key). Les guillemets ne sont pas obligatoires.Pour installer les dépendances, saisissez
flutter pub getdans le terminal.Pour mettre à jour les informations sur l'entreprise, accédez à
android/app/src/main/res/values/strings.xmlet modifiezujet_company_key,ujet_subdomainetujet_company_url.Exécutez un émulateur Android ou un simulateur iOS en fonction de votre plate-forme.
Saisissez
flutter rundans 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
minSdkVersionde 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 :
Copiez le contenu du répertoire
example/lib/ujetet collez-le dans votre projet Flutter, dans le répertoirelib.Accédez à
example/android/app/src/main/kotlin/co/ujet/flutter_example_appet copiez les fichiers suivants dans votre projet Flutter, où se trouve la classeMainActivity:UJETModule.ktApplication.ktfirebase\MyFirebaseMessagingService.ktfirebase\FirebaseTokenManager.kt
Ouvrez Xcode, puis faites glisser
example/ios/Runner/UJETModule.swiftdans votre projet.Ouvrez
example/lib/ujet/ujet_module.dartet modifiez la méthode_getUserDatapour 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 }; }Implémentez
signPayloaddansserver_api.dartpour 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 :
Ouvrez le fichier
info.plist.Définissez la clé
FLTEnableImpellersurfalse, 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 :
Téléchargez et extrayez l'exemple d'application ujet-react-native-example.zip.
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 :
Téléchargez et développez le fichier ZIP de l'exemple React Native.
Accédez au répertoire dans lequel l'exemple de serveur est déployé.
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 :
Modifiez le répertoire de l'application.
Saisissez les commandes suivantes :
cd app nvm use npm install bundle install npx pod-installModifiez les informations sur l'entreprise :
src/screens/Home.tsx : mettez à jour les paramètres dans
UJET.initialize({}).android/app/src/main/res/values/strings.xml: : mettez à jour
ujet_company_key,ujet_subdomainetujet_company_url.
Saisissez la commande
npm start.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 :
Copiez les fichiers suivants de l'application exemple et collez-les dans votre projet, le cas échéant :
app/src/native_modules/UJETInterfaces.tsapp/src/native_modules/UJETNativeModule.tsapp/ios/UJETModule.happ/ios/UJETModule.mapp/android/src/main/java/com/sampleapp/UJETModule.kt
Ouvrir
UJETNativeModule.tsSupprimez la ligne suivante :
import AsyncStorage from '@react-native-async-storage/async-storage';Modifiez la fonction
getUserDatapour 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' } }Mettez à jour SIGNING_BASE_URL pour qu'il pointe vers votre point de terminaison de signature.
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-keypar l'ID de l'entreprise. - Remplacez
your-base-urlpar le point de terminaison de l'API pour l'hôte de la plate-forme CCAI, par exemplehttps://ccaas-host.uc1.ccaiplatform.com/api/v2/.
- Remplacez
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 :