React Native for Android

‫Contact Center AI Platform‏ (CCAI Platform) מספקת שילוב עם אפליקציות לנייד באמצעות מספר שיטות, כולל React. במאמר הזה מוסבר איך לשלב את React Native for Android.

לפני שמבצעים את ההוראות הספציפיות ל-Android, צריך להשלים את ההוראות במאמר React Native for Mobile SDK.

שילוב ה-SDK ב-Android

כדי לשלב את ה-SDK ב-Android, פועלים לפי השלבים הבאים:

  1. מוסיפים את הקוד הבא בתוך <application> של הקובץ 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.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>

  2. צריך לעדכן את android/build.gradle.

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

  3. צריך לעדכן את android/app/build.gradle.

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

  4. מריצים את 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>

  5. מורידים את הקובץ google-service.json וממקמים אותו בתוך הפרויקט במיקום הבא: /android/app/google-services.json

רישום המודול

מידע נוסף על רישום מודולים זמין במאמר בנושא רישום המודול (ל-Android).

  1. פותחים את ReactApplication ומעדכנים את הפונקציה getPackages.

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

  2. יצירת 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()
}

הטמעה של התקשרות חזרה

הטמעה של UjetRequestListener ו-ReactInstanceEventListener מהאפליקציה.

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

הגדרת התראות

כדי לשלב התראות פוש באופן מקורי:

  1. יוצרים MyFirebaseMessagingService שמטמיע את FirebaseMessagingService.

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

  2. צריך לעדכן את 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>

  3. יצירת 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()
  }
}

  4. צריך לעדכן את android/build.gradle.

    buildscript {
  dependencies {
    classpath("com.google.gms:google-services:4.4.1")
  }
}

  5. צריך לעדכן את android/app/build.gradle.

    apply plugin: 'com.google.gms.google-services'

dependencies {
  implementation platform("com.google.firebase:firebase-bom:32.7.3")
  implementation 'com.google.firebase:firebase-messaging'
}

  6. מפעילים את Firebase ב-Application.onCreate.

    class YourApplication: Application(), ReactApplication {
  override fun onCreate() {
    super.onCreate()

    firebaseTokenManager = FirebaseTokenManager(this)
  }
}