Mobile 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 は必要ありません。次の手順に沿って統合することもできます。

サンプルアプリをローカルで実行する

サンプルアプリを実行するには、次のものが必要です。

Flutter: クロスプラットフォームアプリを構築するためのフレームワーク。
Android Studio: Flutter と Android アプリ開発用の統合開発環境。
Xcode: iOS アプリ開発用の統合開発環境。
Cocoapods: iOS プロジェクトの依存関係マネージャー。

サンプルアプリケーションをローカルで実行する手順は次のとおりです。

Flutter のサンプルの ZIP ファイルをダウンロードして展開します。
ターミナルで、Flutter のサンプルディレクトリに移動します。
ターミナルに次のコードを入力します。
```
cd example
cp .env.example .env
```
.env ファイルに環境変数の値を入力します（例: API_KEY=your_api_key）。引用符は不要です。
依存関係をインストールするには、ターミナルで flutter pub get と入力します。
会社情報を更新するには、android/app/src/main/res/values/strings.xml に移動して、ujet_company_key、ujet_subdomain、ujet_company_url を更新します。
プラットフォームに応じて、Android エミュレータまたは iOS シミュレータを実行します。
ターミナルに「flutter run」と入力します。

CCAI プラットフォームモジュールをプロジェクトにインポートする

CCAI Platform モジュールをプロジェクトにインポートするには、次のものが必要です。

JWT 署名 API エンドポイント。詳細については、SDK エンドユーザー認証をご覧ください。
Android の場合、プロジェクトのデプロイ対象は iOS 13.0 以降である必要があります。
iOS の場合、プロジェクトの minSdkVersion は 21 以降である必要があります。

CCAI Platform モジュールをプロジェクトにインポートする手順は次のとおりです。

example/lib/ujet ディレクトリの内容をコピーして、Flutter プロジェクトの lib ディレクトリに貼り付けます。
example/android/app/src/main/kotlin/co/ujet/flutter_example_app に移動し、次のファイルを MainActivity クラスがある Flutter プロジェクトにコピーします。
- UJETModule.kt
- Application.kt
- firebase\MyFirebaseMessagingService.kt
- firebase\FirebaseTokenManager.kt
重要: プロジェクトのパッケージ構造に合わせて、これらのファイルの先頭にあるパッケージ宣言を変更してください。
Xcode を開き、example/ios/Runner/UJETModule.swift をプロジェクトにドラッグします。

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 = "jdoe@example.com"; // end user email
String? phone = "+12223334444"; // end user phone

return {
  "name": name,
  "identifier": identifier,
  "email": email,
  "phone": phone
  };
}

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 のみ）。
- 対応: iOS デバイスでインペラエンジンを無効にすることをおすすめします。インペラエンジンを無効にする手順は次のとおりです。
  1. info.plist ファイルを開きます。
  2. 次のコードサンプルのように、FLTEnableImpeller キーを false に設定します。
```
<key>FLTEnableImpeller</key>
<false/>
```

統合を続行する

Flutter を使用して統合を続行するには、モバイルプラットフォームに応じて次のいずれかのページをご覧ください。

React Native を使用して統合する

このセクションでは、React Native を使用してモバイル SDK をモバイルアプリに統合する最初の手順について説明します。このセクションの手順は、Android SDK と iOS SDK の両方で同じです。これらの手順を完了したら、モバイルプラットフォームに応じて、Android SDK または iOS SDK に固有の手順に進みます。

モバイル SDK をモバイルアプリに統合する際に React Native は必要ありません。次の手順に沿って統合することもできます。

サンプルアプリをローカルで実行する

サンプルアプリをローカルで実行するには、次の操作を行います。

ujet-react-native-example.zip サンプルアプリをダウンロードして抽出します。
抽出したフォルダにある README.md ファイルを開き、手順に沿って操作します。

ローカルサーバーからサンプルアプリを実行する

前の手順でダウンロードしたサンプルアプリは、ローカルサーバーから実行することもできます。手順は次のとおりです。

React Native のサンプルの ZIP ファイルをダウンロードして展開します。
サーバーサンプルがデプロイされているディレクトリにアクセスします。

次のコマンドを入力します。

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

React Native を実行する

React Native を実行する手順は次のとおりです。

アプリケーションディレクトリを変更します。

次のコマンドを入力します。

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

会社情報を更新します。
1. src/screens/Home.tsx: UJET.initialize({}) のパラメータを更新
2. android/app/src/main/res/values/strings.xml: ujet_company_key、ujet_subdomain、ujet_company_url を更新します。
npm start コマンドを入力します。
Meteor インタラクティブ CLI または任意の IDE を使用して、iOS または Android モバイルアプリを実行します。

注: コマンドが失敗した場合は、シミュレータ（npm run ios -- --simulator="iPhone 15 Pro" など）を指定します。

CCAI プラットフォームモジュールをプロジェクトにインポートする

このセクションでは、CCAI Platform モジュールをプロジェクトにインポートする方法について説明します。

要件

JWT 署名 API エンドポイントを使用する必要があります。サンプルアプリの server/app.js ファイルを参照するか、エンドユーザー認証をご覧ください。

手順

CCAI Platform モジュールをプロジェクトにインポートする手順は次のとおりです。

サンプルアプリから次のファイルをコピーし、プロジェクトの適切な場所に貼り付けます。
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

UJETNativeModule.ts を開く

次の行を削除します。

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

正確なエンドユーザー情報を返すように getUserData 関数を編集します。

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'
  }
}

署名エンドポイントを指すように SIGNING_BASE_URL を更新します。

次のコードサンプルを使用して、初期化して開始します。
```
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 を使用して統合を続行するには、モバイルプラットフォームに応じて次のいずれかのページをご覧ください。

Mobile SDK コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

Flutter を使用して統合する

サンプルアプリをローカルで実行する

CCAI プラットフォーム モジュールをプロジェクトにインポートする

初期化と開始

既知の問題

統合を続行する

React Native を使用して統合する

サンプルアプリをローカルで実行する

ローカル サーバーからサンプルアプリを実行する

React Native を実行する

CCAI プラットフォーム モジュールをプロジェクトにインポートする

要件

手順

統合を続行する

Mobile SDK

CCAI プラットフォームモジュールをプロジェクトにインポートする

ローカルサーバーからサンプルアプリを実行する

CCAI プラットフォームモジュールをプロジェクトにインポートする