React Native für Android

Die Contact Center AI Platform (CCAI Platform) bietet die Integration in mobile Anwendungen über eine Reihe von Methoden, darunter React. In diesem Dokument wird beschrieben, wie Sie React Native für Android einbinden.

Bevor Sie diese Android-spezifische Anleitung befolgen, führen Sie die Anleitung unter React Native for Mobile SDK aus.

SDK in Android einbinden

So binden Sie das SDK in Android ein:

Fügen Sie den folgenden Code in <application> der Datei AndroidManifest.xml ein:

<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.DEF```AULT"/>
      <category android:name="android.intent.category.BROWSABLE"/>
      <data
        android:host="com.sampleapp"
        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>

android/build.gradle aktualisieren.

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

android/app/build.gradle aktualisieren.

  def ujetSdkVersion = "x.y.z"
  implementation "co.ujet.android:ujet-android:$ujetSdkVersion"
  implementation "co.ujet.android:cobrowse:$ujetSdkVersion"
}

Führen Sie res/values/strings.xml aus.

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

Laden Sie die Datei google-service.json herunter und legen Sie sie in Ihrem Projekt am folgenden Speicherort ab: /android/app/google-services.json

Modul registrieren

Weitere Informationen zum Registrieren von Modulen finden Sie unter Modul registrieren (Android-spezifisch).

Öffnen Sie „ReactApplication“ und aktualisieren Sie die Funktion getPackages.

override fun getPackages(): List<ReactPackage> {
  return PackageList(this).packages.apply {
    add(MyAppPackage())
  }
}

Erstellen Sie MyAppPackage.

import android.view.View
import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ReactShadowNode
import com.facebook.react.uimanager.ViewManager

class MyAppPackage: ReactPackage {
  override fun createViewManagers(
    reactContext: ReactApplicationContext
  ): MutableList<ViewManager<View, ReactShadowNode<*>>> = mutableListOf()

  override fun createNativeModules(
    reactContext: ReactApplicationContext
  ): MutableList<NativeModule> = listOf(
    UJETModule(reactContext)
  ).toMutableList()
}

Callback implementieren

Implementieren Sie UjetRequestListener und ReactInstanceEventListener in Ihrer Anwendung.

class YourApplication: Application(), ReactApplication, UjetRequestListener, ReactInstanceEventListener {
  private var reactContext: ReactContext? = null

  override fun onCreate() {
    super.onCreate()

    Ujet.init(this)

    reactNativeHost.reactInstanceManager.addReactInstanceEventListener(this)
  }

  override fun onReactContextInitialized(reactContext: ReactContext?) {
    this.reactContext = reactContext
  }

  override fun onSignPayloadRequest(
    payload: MutableMap<String, Any?>,
    ujetPayloadType: UjetPayloadType,
    callback: UjetTokenCallback
  ) {
    if (reactContext == null) {
      callback.onError()
      return
    }

    when (ujetPayloadType) {
      UjetPayloadType.AuthToken -> {
        UJETModule.authTokenCallback = callback
        createMapAndSendEvent("authToken", payload)
      }
      UjetPayloadType.CustomData -> {
        UJETModule.customDataCallback = callback
        createMapAndSendEvent("customData", payload)
      }
      else -> callback.onError()
    }
  }

  override fun onRequestPushToken(): String? {
    sendEvent(reactContext ?: return, "onRequestAndroidPushToken", null)
  }

  private fun sendEvent(reactContext: ReactContext, eventName: String, params: WritableMap?) {
    reactContext
      .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
      .emit(eventName, params)
  }

  private fun createMapAndSendEvent(typeName: String, payload: Map<String, Any?>) {
    val writableMap = Arguments.createMap()
    for ((key, value) in payload) {
      writableMap.putString(key, value.toString())
    }

    val params = Arguments.createMap()
    params.putString("type", typeName)
    params.putMap("data", writableMap)
    sendEvent(reactContext ?: return, "onSignPayloadRequest", params)
  }
}

Push-Benachrichtigungen einrichten

So integrieren Sie Push-Benachrichtigungen nativ:

Erstellen Sie MyFirebaseMessagingService, das FirebaseMessagingService implementiert.

import android.util.Log
import co.ujet.android.Ujet
import com.google.firebase.messaging.FirebaseMessagingService
import com.google.firebase.messaging.RemoteMessage

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

AndroidManifest.xml aktualisieren.

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

Erstellen Sie FirebaseTokenManager.

import android.content.Context
import com.google.android.gms.tasks.Task
import com.google.firebase.messaging.FirebaseMessaging

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()
  }
}