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 kepada pelanggan langsung di dalam aplikasi seluler iOS atau Android.

Anda dapat menyiapkan aplikasi seluler untuk bekerja dengan CCAI Platform dengan beberapa cara, termasuk mengintegrasikan SDK seluler ke dalam aplikasi seluler 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 dengan Flutter

Bagian ini memberikan langkah-langkah awal untuk menggunakan Flutter guna mengintegrasikan SDK seluler ke dalam aplikasi seluler. 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 juga dapat mengintegrasikan seperti yang diarahkan dalam hal berikut:

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 dalam project Anda

Untuk mengimpor modul CCAI Platform ke dalam project Anda, 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 sehingga 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 yang ditandatangani dari API server Anda. Untuk mengetahui informasi selengkapnya, lihat Autentikasi pengguna akhir SDK.

Menginisialisasi dan memulai

Untuk menginisialisasi 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 saat menggunakan Flutter untuk mengintegrasikan SDK seluler ke dalam aplikasi seluler Anda:

  • Masalah: Screenshot tidak diambil menggunakan SmartActions screenshot.

    • Tindakan: Google sedang berupaya memperbaiki masalah ini.

  • Masalah: Layar Penjelajahan Bersama tidak diproyeksikan dari sisi agen selama sesi penjelajahan bersama (khusus iOS).

    • Tindakan: Google merekomendasikan untuk menonaktifkan mesin impeller di perangkat iOS perangkat. 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

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

Mengintegrasikan dengan React Native

Bagian ini memberikan langkah-langkah awal untuk menggunakan React Native guna mengintegrasikan SDK seluler ke dalam aplikasi seluler. 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 juga dapat mengintegrasikan seperti yang diarahkan dalam hal berikut:

Menjalankan aplikasi contoh secara lokal

Untuk menjalankan aplikasi contoh secara lokal, lakukan hal berikut:

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

  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 Meteor interactive CLI atau IDE pilihan Anda.

Mengimpor 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 jika 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. 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

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