Android용 React Native

Contact Center AI Platform (CCAI Platform)은 React를 비롯한 여러 방법을 사용하여 모바일 애플리케이션과의 통합을 제공합니다. 이 문서에서는 Android용 React Native를 통합하는 방법을 설명합니다.

이 Android 관련 안내를 따르기 전에 모바일 SDK용 React Native의 안내를 완료하세요.

Android에 SDK 통합

SDK를 Android에 통합하려면 다음 단계를 따르세요.

  1. AndroidManifest.xml 파일의 <application> 내부에 다음 코드를 추가합니다.

    <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. FirebaseMessagingService를 구현하는 MyFirebaseMessagingService를 만듭니다.

    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. Application.onCreate에서 Firebase를 초기화합니다.

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

    firebaseTokenManager = FirebaseTokenManager(this)
  }
}