行動裝置專用 SDK

Contact Center AI Platform (CCAI Platform) 行動 SDK 包括 Android SDK 和 iOS SDK。 透過這些 SDK，您可以在 iOS 或 Android 行動應用程式中，直接為顧客提供語音和即時通訊支援。

您可以透過多種方式設定行動應用程式，使其與 CCAI Platform 搭配運作，包括按照 Android SDK 指南或 iOS SDK 指南的指示，將行動 SDK 整合到行動應用程式中。您也可以使用 Flutter 或 React Native，將行動版 SDK 整合到行動應用程式。

使用 Flutter 整合

本節提供初步步驟，說明如何使用 Flutter 將行動版 SDK 整合至行動應用程式。本節中的步驟適用於 Android SDK 和 iOS SDK。完成這些步驟後，請根據您的行動平台，使用 Android SDK 或 iOS SDK 的專屬操作說明繼續操作。

將行動版 SDK 整合至行動應用程式時，不需要使用 Flutter。 您也可以按照下列指示整合：

• Android SDK 指南

• iOS SDK 指南

• 使用 React Native 整合

在本機執行範例應用程式

如要執行範例應用程式，請準備下列項目：

• Flutter：用於建構跨平台應用程式的架構。

• Android Studio：適用於 Flutter 和 Android 應用程式開發的整合開發環境。

• Xcode：iOS 應用程式開發的整合式開發環境。

• Cocoapods：iOS 專案的依附元件管理工具。

如要在本機執行範例應用程式，請按照下列步驟操作：

1. 下載並展開 Flutter 範例 ZIP 檔案。

2. 在終端機中，前往 Flutter 範例目錄。

3. 在終端機中輸入下列程式碼：

   cd example
   cp .env.example .env
   

4. 在 .env 檔案中輸入環境變數值，例如 API_KEY=your_api_key。不必加上引號。

5. 如要安裝依附元件，請在終端機中輸入 flutter pub get。

6. 如要更新公司資訊，請前往 android/app/src/main/res/values/strings.xml 並更新 ujet_company_key、ujet_subdomain 和 ujet_company_url。

7. 根據平台執行 Android 模擬器或 iOS 模擬器。

8. 在終端機中輸入 flutter run。

將 CCAI 平台模組匯入專案

如要將 CCAI Platform 模組匯入專案，必須符合下列條件：

• JWT 簽署 API 端點。詳情請參閱「SDK 使用者驗證」。

• 如果是 Android，專案的部署目標必須為 iOS 13.0 以上版本。

• 如果是 iOS，專案的 minSdkVersion 必須為 21 以上版本。

如要將 CCAI Platform 模組匯入專案，請按照下列步驟操作：

1. 複製 example/lib/ujet 目錄的內容，然後貼到 Flutter 專案的 lib 目錄。

2. 前往 example/android/app/src/main/kotlin/co/ujet/flutter_example_app，然後將下列檔案複製到 Flutter 專案中 MainActivity 類別所在的位置：

   • UJETModule.kt

   • Application.kt

   • firebase\MyFirebaseMessagingService.kt

   • firebase\FirebaseTokenManager.kt

   重要事項： 請務必根據專案的套件結構，變更這些檔案頂端的套件宣告。

3. 開啟 Xcode，然後將 example/ios/Runner/UJETModule.swift 拖曳到專案中。

4. 開啟 example/lib/ujet/ujet_module.dart 並編輯 _getUserData 方法，使其傳回適當的終端使用者資訊。請參閱下列程式碼範例：

   static Future<Map<String, String?>> _getUserData() async {
   
   String? name = "John Doe"; // end-user name
   String? identifier = "id1234"; // end user identifier
   String? email = "[e-mail]"; // end user email
   String? phone = "[phone]"; // end user phone
   
   return {
     "name": name,
     "identifier": identifier,
     "email": email,
     "phone": phone
     };
   }
   

5. 在 server_api.dart 中實作 signPayload，從伺服器 API 取得已簽署的 JWT 權杖。詳情請參閱「SDK 使用者驗證」。

初始化並啟動

如要初始化並啟動，請在終端機中輸入下列程式碼：

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

已知問題

以下是使用 Flutter 將行動版 SDK 整合至行動應用程式時的已知問題：

• 問題：無法使用螢幕截圖智慧動作擷取螢幕截圖。

  • 行動：Google 正在修正這個問題。

• 問題：在共同瀏覽期間，服務專員無法投影共同瀏覽畫面 (僅限 iOS)。

  • 行動：Google 建議在 iOS 裝置上停用 impeller 引擎。如要停用葉輪引擎，請按照下列步驟操作：

    1. 開啟 info.plist 檔案。

    2. 將 FLTEnableImpeller 鍵設為 false，如以下程式碼範例所示：

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

繼續整合

如要繼續使用 Flutter 整合，請參閱下列其中一個頁面，視您的行動平台而定：

• Android 版 Flutter

• iOS 版 Flutter

使用 React Native 整合

本節提供初步步驟，說明如何使用 React Native 將行動 SDK 整合至行動應用程式。本節中的步驟適用於 Android SDK 和 iOS SDK。完成這些步驟後，請根據您的行動平台，使用 Android SDK 或 iOS SDK 的專屬操作說明繼續操作。

將行動版 SDK 整合至行動應用程式時，不需要使用 React Native。您也可以按照下列指示整合：

• Android SDK 指南

• iOS SDK 指南

• 使用 Flutter 整合

在本機執行範例應用程式

如要在本機執行範例應用程式，請按照下列步驟操作：

1. 下載並解壓縮 ujet-react-native-example.zip 範例應用程式。

2. 開啟解壓縮資料夾中的 README.md 檔案，然後按照指示操作。

從本機伺服器執行範例應用程式

您也可以從本機伺服器執行先前程序中下載的範例應用程式。詳細步驟如下：

1. 下載並展開 React Native 範例 ZIP 檔案。

2. 存取部署伺服器範例的目錄。

3. 輸入下列指令：

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

執行 React Native

如要執行 React Native，請按照下列步驟操作：

1. 變更應用程式目錄。

2. 輸入下列指令：

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

3. 更新公司資訊：

   1. src/screens/Home.tsx：更新 UJET.initialize({}) 中的參數

   2. android/app/src/main/res/values/strings.xml:更新 ujet_company_key、ujet_subdomain 和 ujet_company_url。

4. 輸入 npm start 指令。

5. 使用 Meteor 互動式 CLI 或您選擇的 IDE，執行 iOS 或 Android 行動應用程式。

   注意： 如果指令失敗，請指定模擬器，例如 npm run ios -- --simulator="iPhone 15 Pro"。

將 CCAI 平台模組匯入專案

本節說明如何將 CCAI Platform 模組匯入專案。

需求條件

您必須使用 JWT 簽署 API 端點。請參閱範例應用程式中的 server/app.js 檔案，或參閱「使用者驗證」一文瞭解詳情。

程序

如要將 CCAI Platform 模組匯入專案，請按照下列步驟操作：

1. 從範例應用程式複製下列檔案，並視需要貼到專案中：

   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. 開啟「UJETNativeModule.ts」

   1. 移除下列程式碼行：

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

   2. 編輯 getUserData 函式，傳回準確的使用者資訊：

      async function getUserData({ name: anonymousName }: SignPayloadData): Promise<Object> {
        // fetch the end user information from your application
        return {
          name: 'John Doe',
          identifier: 'id1234',
          email: '[e-mail]',
          phone: '[phone]'
        }
      }
      

   3. 更新 SIGNING_BASE_URL，指向簽署端點。

3. 使用下列程式碼範例初始化並啟動：

   import { UJET } from '../path/UJETNativeModule';
   
   UJET.initialize({
     key: 'your-key',
     baseUrl: 'your-base-url'
   });
   
   const startUJET = () => {
     UJET.start({
       skipSplashScreen: true
     });
   };
   

   • 將 your-key 替換為公司 ID。
   • 將 your-base-url 替換為 CCAI Platform 主機的 API 端點，例如 https://ccaas-host.uc1.ccaiplatform.com/api/v2/。

繼續整合

如要繼續使用 React Native 整合，請根據行動平台參閱下列其中一個頁面：

• Android 版 React Native

• iOS 版 React Native