React Native per Android

Contact Center AI Platform (CCAI Platform) fornisce l'integrazione con le applicazioni mobile utilizzando una serie di metodi, tra cui React. Questo documento spiega come integrare React Native per Android.

Prima di seguire queste istruzioni specifiche per Android, completa le istruzioni riportate in React Native per l'SDK Mobile.

Integrare l'SDK in Android

Per integrare l'SDK in Android:

  1. Aggiungi il codice seguente all'interno di <application> del file 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. Aggiorna android/build.gradle.

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

  3. Aggiorna android/app/build.gradle.

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

  4. Esegui 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. Scarica il file google-service.json e inseriscilo nel progetto nella seguente posizione: /android/app/google-services.json

Registrare il modulo

Per ulteriori informazioni sulla registrazione dei moduli, vedi Registrare il modulo (specifico per Android).

  1. Apri ReactApplication e aggiorna la funzione getPackages.

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

  2. Crea 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()
}

Implementare il callback

Implementa UjetRequestListener e ReactInstanceEventListener dalla tua applicazione.

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

Configurare le notifiche push

Per integrare le notifiche push in modo nativo, segui questi passaggi:

  1. Crea MyFirebaseMessagingService che implementa 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. Aggiorna 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. Crea 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. Aggiorna android/build.gradle.

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

  5. Aggiorna 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. Inizializza Firebase in Application.onCreate.

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

    firebaseTokenManager = FirebaseTokenManager(this)
  }
}