Android 向け Flutter

モバイルアプリを Contact Center AI プラットフォーム（CCAI プラットフォーム）と連携させるには、Flutter を使用するなど、さまざまな方法があります。このページでは、Flutter を使用して Android SDK を Android アプリに統合する方法について説明します。

始める前に

このページの手順を行う前に、まず Flutter を使用して統合するの手順を行ってください。

Android アプリに SDK を統合する

SDK を Android アプリに統合する手順は次のとおりです。

Flutter のサンプルディレクトリにある android/build.gradle ファイルで、minSdkVersion を 21 以降に更新します。

android/src/main/AndroidManifest.xml ファイルに以下を追加します。

<application>
  <activity
    android:name="co.ujet.android.activity.UjetActivity"
    android:exported="true">
    <intent-filter>
      <action android:name="android.intent.action.VIEW"/>
      <category android:name="android.intent.category.DEFAULT"/>
      <category android:name="android.intent.category.BROWSABLE"/>
      <!-- TODO: Change to your custom URL scheme. Config from Portal > Developer Settings > Mobile App > Enable Send SMS to Download App > Android App > URL -->
      <data
        android:host="co.ujet.flutter_example_app"
        android:path="/smartchannel"
        android:scheme="ujet" />
    </intent-filter>
  </activity>

  <meta-data
        android:name="co.ujet.android.companyKey"
        android:value="@string/ujet_company_key"/>
  <meta-data
      android:name="co.ujet.android.companyName"
      android:value="@string/ujet_company_name"/>
  <meta-data
      android:name="co.ujet.android.subdomain"
      android:value="@string/ujet_subdomain"/>
  <meta-data
      android:name="co.ujet.android.companyUrl"
      android:value="@string/ujet_company_url"/>
</application>

次のコードサンプルのように、<application> タグで android:name の値を .Application に更新します。

<!--Change the value of android:name to .Application -->
<application
  android:name=".Application"
  android:label="Demo Application"
  android:icon="@mipmap/ic_launcher">

次のコードサンプルのように、android/build.gradle を更新します。

allprojects {
  repositories {
    google()
    mavenCentral()
    maven {
      url "https://sdk.ujet.co/android/"
    }
  }
}

次のコードサンプルのように、android/app/build.gradle を更新します。

dependencies {
  // Use UJET SDK version 2.6.0 or latest to support recent push notification changes.
  def ujetSdkVersion = "x.y.z"
  implementation "co.ujet.android:ujet-android:$ujetSdkVersion"
  implementation "co.ujet.android:cobrowse:$ujetSdkVersion"
}

次のコードサンプルのように、res/values/strings.xml を更新します。存在しない場合は作成します。

<resources>
  <string name="ujet_company_key">YOUR_COMPANY_KEY</string>
  <string name="ujet_company_name">YOUR_COMPANY_NAME</string>

  <!-- If your tenant / portal url ends with "ujet.co" then set ujet_subdomain string only (ignore
      ujet_company_url), otherwise set ujet_company_url only (ignore ujet_subdomain) following below instructions. -->
  <!-- To get subdomain, extract string content between 'https://' and first '.' of your tenant/portal URL.
      Example, If your tenant url is https://XXX.YYY.ZZZ/ then subdomain will be XXX -->
  <string name="ujet_subdomain">YOUR_SUBDOMAIN</string>

  <!-- Use tenant url as company url here, it should be in format of https://XXX.YYY.ZZZ/api/v2
      (here XXX should match with your subdomain) -->
  <string name="ujet_company_url">YOUR_COMPANY_URL</string>
</resources>

Firebase プロジェクトを作成するか、すでに作成済みの場合はこのアプリを登録します。google-service.json ファイルをダウンロードして、プロジェクトの example/android/app/ ディレクトリに配置します。

モジュールを登録する

モジュールを登録するには、MainActivity.kt を開き、次のコードサンプルに示すように UJETModule を初期化します。

class MainActivity : FlutterActivity() {
    override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)

        //Register and Initialize UJETModule
        UJETModule.init(flutterEngine.dartExecutor.binaryMessenger, applicationContext)
    }
}

Android プッシュ通知を設定する

プッシュ通知をネイティブに統合する場合は、次の手順を行います。SDK を Android アプリに統合するの手順に沿って、firebase ディレクトリを Android プロジェクトにコピーして貼り付けたことを確認してください。

Android プッシュ通知を設定する手順は次のとおりです。

次のコードサンプルのように、アプリレベルの build.gradle ファイルにプッシュ通知用の Firebase 依存関係を追加します。
```
dependencies {
  implementation platform("com.google.firebase:firebase-bom:32.8.0")
  implementation 'com.google.firebase:firebase-messaging'
}
```

次のコードサンプルのように、AndroidManifest.xml を更新します。

<application>
  <service
    android:name=".firebase.MyFirebaseMessagingService"
    android:exported="false">
    <intent-filter>
      <action android:name="com.google.firebase.MESSAGING_EVENT" />
    </intent-filter>
  </service>
</application>

次のコードサンプルのように、build.gradle のプロジェクトのルートレベルで google-services プラグインを追加します。
```
plugins {
  id 'com.google.gms.google-services' version '4.3.8' apply false
}
```

次のコード例のように、build.gradle のプロジェクトのアプリレベルで google-services プラグインを追加します。

plugins {
  id "com.android.application"
  id "kotlin-android"
  id "dev.flutter.flutter-gradle-plugin"
  id 'com.google.gms.google-services'  // google-services plugin
}

次のコードサンプルのように、FirebaseMessagingService を実装する MyFirebaseMessagingService を作成します。

class MyFirebaseMessagingService: FirebaseMessagingService() {
      private var firebaseTokenManager: FirebaseTokenManager? = null

      override fun onCreate() {
          super.onCreate()
          firebaseTokenManager = FirebaseTokenManager(this)
      }

      override fun onNewToken(token: String) {
          firebaseTokenManager?.updateToken(token)
      }

      override fun onMessageReceived(message: RemoteMessage) {
          if (Ujet.canHandlePush(message.data)) {
              Log.d("Firebase", "Handle the push message by UJET")
          } else {
              // Handle your notifications
          }
      }
  }

次のコードサンプルに示すように、FirebaseTokenManager を作成します。

  class FirebaseTokenManager(context: Context) {
      private val sharedPreferences = context.getSharedPreferences("${context.packageName}_preferences", Context.MODE_PRIVATE)
      private var token: String? = null

      fun getToken(): String? {
          token = sharedPreferences.getString("firebaseToken", null)
          if (token == null) {
              FirebaseMessaging.getInstance().token.addOnCompleteListener { task: Task<String?> ->
                  if (!task.isSuccessful || task.result == null) {
                      return@addOnCompleteListener
                  }
                  token = task.result
                  updateToken(token)
              }
          }
          return token
      }

      fun updateToken(token: String?) {
          sharedPreferences
              .edit()
              .putString("firebaseToken", token)
              .apply()
      }
  }

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

始める前に

Android アプリに SDK を統合する

モジュールを登録する

Android プッシュ通知を設定する

Android 向け Flutter