SDK Seluler

SDK seluler Contact Center AI Platform (CCAI Platform) mencakup Android SDK dan iOS SDK. Dengan SDK ini, Anda dapat memberikan dukungan suara dan chat untuk pelanggan langsung di dalam aplikasi seluler iOS atau Android Anda.

Anda dapat menyiapkan aplikasi seluler untuk bekerja dengan CCAI Platform dalam beberapa cara, termasuk mengintegrasikan SDK seluler ke aplikasi seluler Anda seperti yang diarahkan dalam panduan Android SDK atau panduan iOS SDK. Anda juga dapat mengintegrasikan SDK seluler ke dalam aplikasi seluler menggunakan Flutter atau React Native.

Mengintegrasikan menggunakan Flutter

Bagian ini memberikan langkah-langkah awal untuk menggunakan Flutter guna mengintegrasikan SDK seluler ke dalam aplikasi seluler Anda. Langkah-langkah di bagian ini sama untuk Android SDK dan iOS SDK. Setelah menyelesaikan langkah-langkah ini, Anda dapat melanjutkan dengan menggunakan petunjuk khusus untuk Android SDK atau iOS SDK, bergantung pada platform seluler Anda.

Flutter tidak diperlukan untuk mengintegrasikan SDK seluler ke dalam aplikasi seluler Anda. Anda juga dapat mengintegrasikan seperti yang diarahkan dalam berikut ini:

Menjalankan aplikasi contoh secara lokal

Untuk menjalankan aplikasi contoh, Anda memerlukan hal berikut:

  • Flutter: Framework untuk membangun aplikasi lintas platform.

  • Android Studio: Lingkungan pengembangan terintegrasi untuk pengembangan aplikasi Flutter dan Android.

  • Xcode: Lingkungan pengembangan terintegrasi untuk pengembangan aplikasi iOS.

  • Cocoapods: Pengelola dependensi untuk project iOS.

Untuk menjalankan aplikasi contoh secara lokal, ikuti langkah-langkah berikut:

  1. Download dan ekstrak file ZIP contoh Flutter.

  2. Di terminal, buka direktori contoh Flutter.

  3. Masukkan kode berikut di terminal:

    cd example
cp .env.example .env

  4. Masukkan nilai variabel lingkungan dalam file .env—misalnya, API_KEY=your_api_key. Tanda kutip tidak diperlukan.

  5. Untuk menginstal dependensi, masukkan flutter pub get di terminal.

  6. Untuk memperbarui informasi perusahaan, buka android/app/src/main/res/values/strings.xml dan perbarui ujet_company_key, ujet_subdomain, dan ujet_company_url.

  7. Bergantung pada platform Anda, jalankan Android Emulator atau simulator iOS.

  8. Masukkan flutter run di terminal.

Mengimpor modul CCAI Platform ke project Anda

Mengimpor modul CCAI Platform ke dalam project Anda memerlukan hal berikut:

  • Endpoint API penandatanganan JWT. Untuk mengetahui informasi selengkapnya, lihat Autentikasi pengguna akhir SDK.

  • Untuk Android, target deployment project Anda harus iOS 13.0 atau yang lebih baru.

  • Untuk iOS, minSdkVersion project Anda harus 21 atau yang lebih baru.

Untuk mengimpor modul CCAI Platform ke dalam project Anda, ikuti langkah-langkah berikut:

  1. Salin konten direktori example/lib/ujet dan tempelkan ke project Flutter Anda di direktori lib.

  2. Buka example/android/app/src/main/kotlin/co/ujet/flutter_example_app dan salin file berikut ke project Flutter Anda tempat class MainActivity berada:

    • UJETModule.kt

    • Application.kt

    • firebase\MyFirebaseMessagingService.kt

    • firebase\FirebaseTokenManager.kt

  3. Buka XCode, lalu tarik example/ios/Runner/UJETModule.swift ke project Anda.

  4. Buka example/lib/ujet/ujet_module.dart dan edit metode _getUserData agar menampilkan informasi pengguna akhir yang sesuai. Lihat contoh kode berikut:

    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. Terapkan signPayload di server_api.dart untuk mendapatkan token JWT bertanda tangan dari API server Anda. Untuk mengetahui informasi selengkapnya, lihat Autentikasi pengguna akhir SDK.

Lakukan inisialisasi dan mulai

Untuk melakukan inisialisasi dan memulai, masukkan kode berikut di terminal:

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

Masalah umum

Berikut masalah umum terkait penggunaan Flutter untuk mengintegrasikan SDK seluler ke dalam aplikasi seluler Anda:

  • Masalah: Screenshot tidak diambil menggunakan SmartAction screenshot.

    • Tindakan: Google sedang berupaya memperbaiki masalah ini.

  • Masalah: Layar Jelajah bersama tidak diproyeksikan dari sisi agen selama sesi jelajah bersama (khusus iOS).

    • Tindakan: Google merekomendasikan agar Anda menonaktifkan mesin impeller di perangkat iOS. Untuk menonaktifkan mesin impeller, ikuti langkah-langkah berikut:

      1. Buka file info.plist.

      2. Tetapkan kunci FLTEnableImpeller ke false, seperti dalam contoh kode berikut:

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

Melanjutkan integrasi Anda

Untuk melanjutkan integrasi menggunakan Flutter, lihat salah satu halaman berikut, bergantung pada platform seluler Anda:

Mengintegrasikan menggunakan React Native

Bagian ini memberikan langkah-langkah awal untuk menggunakan React Native guna mengintegrasikan SDK seluler ke dalam aplikasi seluler Anda. Langkah-langkah di bagian ini sama untuk Android SDK dan iOS SDK. Setelah menyelesaikan langkah-langkah ini, Anda dapat melanjutkan dengan menggunakan petunjuk khusus untuk Android SDK atau iOS SDK, bergantung pada platform seluler Anda.

React Native tidak diperlukan untuk mengintegrasikan SDK seluler ke dalam aplikasi seluler Anda. Anda juga dapat mengintegrasikan seperti yang diarahkan dalam berikut ini:

Menjalankan aplikasi contoh secara lokal

Untuk menjalankan aplikasi contoh secara lokal, lakukan hal berikut:

  1. Download dan ekstrak aplikasi contoh ujet-react-native-example.zip.

  2. Buka file README.md di folder yang diekstrak, lalu ikuti petunjuknya.

Menjalankan aplikasi contoh dari server lokal

Aplikasi contoh yang Anda download dalam prosedur sebelumnya juga dapat dijalankan dari server lokal. Untuk melakukannya, ikuti langkah-langkah ini:

  1. Download dan ekstrak file ZIP contoh React Native.

  2. Akses direktori tempat contoh server di-deploy.

  3. Masukkan perintah berikut:

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

Menjalankan React Native

Untuk menjalankan React Native, ikuti langkah-langkah berikut:

  1. Ubah direktori aplikasi.

  2. Masukkan perintah berikut:

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

  3. Perbarui informasi perusahaan:

    1. src/screens/Home.tsx: Perbarui parameter di UJET.initialize({})

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

  4. Masukkan perintah npm start.

  5. Jalankan aplikasi seluler iOS atau Android menggunakan CLI interaktif Meteor atau IDE pilihan Anda.

Impor modul CCAI Platform ke project Anda

Bagian ini menunjukkan cara mengimpor modul CCAI Platform ke project Anda.

Persyaratan

Anda harus menggunakan endpoint API penandatanganan JWT. Lihat file server/app.js di aplikasi contoh, atau lihat Autentikasi Pengguna Akhir untuk mengetahui detail selengkapnya.

Prosedur

Untuk mengimpor modul CCAI Platform ke dalam project Anda, ikuti langkah-langkah berikut:

  1. Salin file berikut dari aplikasi contoh dan tempelkan ke project Anda di tempat yang sesuai:

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

    1. Hapus baris berikut:

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

    2. Edit fungsi getUserData untuk menampilkan informasi pengguna akhir yang akurat:

      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. Perbarui SIGNING_BASE_URL agar mengarah ke endpoint penandatanganan Anda.

  3. Lakukan inisialisasi dan mulai menggunakan contoh kode berikut:

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

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

const startUJET = () => {
  UJET.start({
    skipSplashScreen: true
  });
};
    • Ganti your-key dengan ID perusahaan.
    • Ganti your-base-url dengan endpoint API untuk host CCAI Platform, misalnya, https://ccaas-host.uc1.ccaiplatform.com/api/v2/.

Melanjutkan integrasi Anda

Untuk melanjutkan integrasi menggunakan React Native, lihat salah satu halaman berikut, bergantung pada platform seluler Anda: