Skip to content

react_setup.md

Latest commit

 

History

History
616 lines (582 loc) · 18.7 KB

react_setup.md

File metadata and controls

616 lines (582 loc) · 18.7 KB
Raw

Интеграция JivoSDK(React Native).

Открытие проекта.

Для начала откройте проект Android в приложении Android Studio. Вы можете найти свой Android-проект в папке проекта приложений React Native:

Note

Мы рекомендуем использовать Android Studio для написания собственного кода. Android studio - это IDE, созданная для разработки под Android, и ее использование поможет вам быстро разрешать некоторые проблемы, такие как ошибки синтаксиса кода. Более подробную информацию вы можете получить по ссылке

Структура проекта

android/
        app/ 
           src/
              main/
                  java/
                      your.package.name/
                                       JivoSDKModule
                                       JivoSDKPackage
                                       MainActivity
                                       MainApplication
                                       PushService
                                       SdkChatActivity
                  res/
                     layout/
                           activity_sdk_chat.xml
                     values/
                           strings.xml
                           styles.xml
                  AndroidManifest.xml        
           build.gradle  
       build.gradle

Настройка Gradle Scripts.

Настройки Gradle (уровень проекта) (build.gradle):

Kotlin 
buildscript {
   ...
   ext {
       buildToolsVersion = "35.0.0"
       minSdkVersion = 24
       compileSdkVersion = 35
       targetSdkVersion = 35
       ndkVersion = "26.1.10909125"
       kotlinVersion = "1.9.24"
   }
   repositories {
       google()
       mavenCentral()
   }
   dependencies {
       ...
       classpath("com.android.tools.build:gradle")
       classpath("com.facebook.react:react-native-gradle-plugin")
       classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")   
       classpath 'com.google.gms:google-services:4.4.2'
   }
}

apply plugin: "com.facebook.react.rootproject"
Java 
buildscript {
   ...
   repositories {
       google()
       mavenCentral()
   }
   dependencies {
       ...
       classpath 'com.google.gms:google-services:4.4.2'
   }
}

allprojects {
   repositories {
       ...
       google()
       mavenCentral()
       maven { url 'https://www.jitpack.io' }
   }
}

Настройки Gradle (уровень приложения) (app/build.gradle):

Kotlin 
android {
  ...
  namespace "com.jivosite.jivosdk_reactnative_sample"
  ...
  defaultConfig {
       applicationId "com.jivosite.jivosdk_reactnative_sample"
       ...
   }
  ...
  buildFeatures {
      dataBinding = true
  }
  ...
}

dependencies {
  ...
  //JivoSDK
  implementation 'com.jivosite.sdk:android-sdk:2.8.1'
  //firebase
  implementation platform('com.google.firebase:firebase-bom:33.12.0')
  implementation 'com.google.firebase:firebase-messaging'
}
Java 
android {
  ...
  buildFeatures {
      dataBinding = true
  }
  ...
}

dependencies {
  ...
  //JivoSDK
  implementation 'com.jivosite.sdk:android-sdk:2.7.0'
  //firebase
  implementation platform('com.google.firebase:firebase-bom:33.12.0')
  implementation 'com.google.firebase:firebase-messaging'
}

Настройка AndroidManifest.xml.

AndroidManifest.xml 
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   package="your.package.name">

   <uses-permission android:name="android.permission.INTERNET" />

   <application
       android:name=".MainApplication"
       android:allowBackup="false"
       android:icon="@mipmap/ic_launcher"
       android:label="@string/app_name"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:theme="@style/AppTheme">
       <activity
           android:name=".MainActivity"
           android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
           android:exported="true"
           android:label="@string/app_name"
           android:launchMode="singleTask"
           android:windowSoftInputMode="adjustResize">
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />
               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>
       </activity>
       <activity
           android:name=".SdkChatActivity"
           android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
           android:exported="true"
           android:launchMode="singleTop"
           android:windowSoftInputMode="adjustResize"
           android:theme="@style/AppTheme"
           tools:replace="android:theme"/>

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

       <meta-data
           android:name="com.google.firebase.messaging.default_notification_icon"
           android:resource="@drawable/ic_notification"
           tools:replace="android:resource" />
       <meta-data
           android:name="com.google.firebase.messaging.default_notification_color"
           android:resource="@color/notificationColor"
           tools:replace="android:resource" />

   </application>
</manifest>

Инициализация JivoSDK.

Для инициализации JivoSDK в классе MainApplication, который находится в папке android/app/src/main/java/com/your-app-name/, в тело переопределенного метода onCreate() добавьте вызов статического метода Jivo.init().

Important

Инициализируйте библиотеку JivoSDK только в методе Application.onCreate(). Если в приложении есть несколько процессов, убедитесь, что JivoSDK инициализируется только в главном процессе.

Метод Jivo.init() принимает следующие параметры:

Название Тип Описание
appContext Context Контекст приложения.

Если у вас нет этого класса, который унаследован от класса Application, то создайте его и пропишите название в AndroidManifest.xml

Пример инициализации:

Kotlin 
...
import com.jivosite.sdk.Jivo
import com.jivosite.sdk.support.builders.Config
...
class MainApplication : Application(), ReactApplication {

   override val reactNativeHost: ReactNativeHost =
       object : DefaultReactNativeHost(this) {
           override fun getPackages(): List<ReactPackage> =
               PackageList(this).packages.apply {
                   add(JivoSDKPackage())
               }

           override fun getJSMainModuleName(): String = "index"

           override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG

           override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
           override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
       }

   override val reactHost: ReactHost
       get() = getDefaultReactHost(applicationContext, reactNativeHost)

   override fun onCreate() {
       super.onCreate()
       SoLoader.init(this, OpenSourceMergedSoMapping)
       if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
           load()
       }

       Jivo.init(this)

       Jivo.setConfig(
           Config.Builder()
               .setWelcomeMessage(R.string.welcome_message_placeholder)
               .build()
       )
   }
}
Java 
public class MainApplication extends Application implements ReactApplication {
...
   @Override
   public void onCreate() {
   ...
       Jivo.init(this);
   
       //Опционально
       Jivo.setConfig(new Config.Builder()
               .setOnBackPressed(fragment -> {
                   if (fragment != null) {
                       FragmentActivity a = fragment.getActivity();
                       if (a != null) {
                           a.finish();
                       }
                   }
                   return Unit.INSTANCE;
               })
               .setOpenNotification(() -> {
                   Intent mainIntent = new Intent(this, MainActivity.class);
                   Intent sdkIntent = new Intent(this, SdkChatActivity.class);
                   TaskStackBuilder builder = TaskStackBuilder.create(this).addNextIntent(mainIntent).addNextIntent(sdkIntent);
                   if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
                       return builder.getPendingIntent(0, PendingIntent.FLAG_UPDATE_CURRENT | PendingIntent.FLAG_MUTABLE);
                   } else {
                       return builder.getPendingIntent(0, PendingIntent.FLAG_UPDATE_CURRENT);
                   }
               })
               .build());

   }
}
...

Добавление модуля.

Необходимо создать JivoSDKModule внутри папки android/app/src/main/java/your.package.name/

Kotlin 
import com.jivosite.sdk.Jivo
import com.jivosite.sdk.support.builders.ContactInfo
import com.jivosite.sdk.ui.chat.JivoChatActivity


class JivoSDKModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {

   override fun initialize() {
       super.initialize()
       Jivo.init(reactApplicationContext)
   }

   override fun getName() = "JivoSDKModule"


   @ReactMethod
   fun createNewMessageEvent(name: String, location: String, callback: Callback) {
       callback.invoke()
   }

   @ReactMethod
   fun setup(channelId: String, userToken: String) {
       channelId.split('/').apply {
           Jivo.setData(widgetId = last(), userToken = userToken, host = firstOrNull { size > 1 } ?: "")
       }
   }

   @ReactMethod
   fun present() {
       val activity = reactApplicationContext.currentActivity
       Intent(activity, JivoChatActivity::class.java).apply {
           if (activity?.packageManager?.let { resolveActivity(it) } != null) {
               flags = Intent.FLAG_ACTIVITY_NEW_TASK
               reactApplicationContext.startActivity(this)
           }
       }
   }

   @ReactMethod
   fun setContactInfo(contactInfo: ReadableMap) {
       Jivo.setContactInfo(ContactInfo.contactInfo {
           this.name = contactInfo.getString("name") ?: ""
           this.email = contactInfo.getString("email") ?: ""
           this.phone = contactInfo.getString("phone") ?: ""
           this.description = contactInfo.getString("description") ?: ""
       })
   }
}
Java 
import android.content.Intent;


import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.jivosite.sdk.ui.chat.JivoChatActivity;

public class JivoSDKModule extends ReactContextBaseJavaModule {

  JivoSDKModule(ReactApplicationContext context) {
      super(context);
  }

  @NonNull
  @Override
  public String getName() {
      return "JivoSDKModule";
  }

   @ReactMethod
   public void openJivoSdk() {
       Activity context = getCurrentActivity();
       SdkChatActivity.show(context);
   }
}

Далее необходимо создать JivoSDKPackage внутри папки android/app/src/main/java/your.package.name/

Kotlin 
class JivoSDKPackage : ReactPackage {

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

   override fun createNativeModules(
       reactContext: ReactApplicationContext,
   ): MutableList<NativeModule> = listOf(JivoSDKModule(reactContext)).toMutableList()
}
Java 
import androidx.annotation.NonNull;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

class JivoSDKPackage implements ReactPackage {

  @NonNull
  @Override
  public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
      List<NativeModule> modules = new ArrayList<>();
      modules.add(new JivoSDKModule(reactContext));
      return modules;
  }

  @NonNull
  @Override
  public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
      return Collections.emptyList();
  }
}

Для регистрации пакета JivoSDKModule, вы должны добавить JivoSDKPackage в список пакетов, возвращаемых методом getPackages() ReactNativeHost. Откройте файл MainApplication , который находится в директории android/app/src/main/java/com/your-app-name/.

Kotlin 
class MainApplication : Application(), ReactApplication {
...
   override val reactNativeHost: ReactNativeHost =
       object : DefaultReactNativeHost(this) {
           override fun getPackages(): List<ReactPackage> =
               PackageList(this).packages.apply {
                   add(JivoSDKPackage())
               }

           override fun getJSMainModuleName(): String = "index"

           override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG

           override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
           override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
       }

   override val reactHost: ReactHost
       get() = getDefaultReactHost(applicationContext, reactNativeHost)
...                
}
Java 
public class MainApplication extends Application implements ReactApplication {
...
   @Override
   public void onCreate() {
  ...
       Jivo.init(this);
   }

   private final ReactNativeHost mReactNativeHost =
           new ReactNativeHost(this) {
               @Override
               public boolean getUseDeveloperSupport() {
                   return BuildConfig.DEBUG;
               }

               @Override
               protected List<ReactPackage> getPackages() {
                   List<ReactPackage> packages = new PackageList(this).getPackages();
                   packages.add(new JivoSDKPackage());
                   return packages;
               }

               @Override
               protected String getJSMainModuleName() {
                   return "index";
               }
           };

   @Override
   public ReactNativeHost getReactNativeHost() {
       return mReactNativeHost;
   }
...
}

Открытие чата.

Пример открытия чата JivoSDK

import React from 'react';
import {NativeModules, StyleSheet, Text, View, Button} from 'react-native';

export default function App() {
 return (
   ...
     <Button
       title="OpenJivoSDK"
       onPress={() => {
         NativeModules.JivoSDKModule.openJivoSdk();
       }}
     />
  ...
 );
}
...

Необходимо создать SdkChatActivity в директории android/app/src/main/java/your.package.name/

Kotlin 
class MainActivity : ReactActivity() {


 override fun getMainComponentName(): String = "JivoSDKReactNativeSample"

 override fun createReactActivityDelegate(): ReactActivityDelegate =
 DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)

}
Java 
package your.package.name;

import android.content.Context;
import android.content.Intent;
import android.os.Bundle;

import com.facebook.react.ReactActivity;
import com.jivosite.sdk.ui.chat.JivoChatFragment;

public class SdkChatActivity extends ReactActivity {

   public static void show(Context context) {
       Intent intent = new Intent(context, SdkChatActivity.class);
       context.startActivity(intent);
   }

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_sdk_chat);
       getSupportFragmentManager()
               .beginTransaction()
               .add(R.id.container, new JivoChatFragment())
               .commit();
   }
}

Необходимо создать activity_sdk_chat.xml в директории res/layout/

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SdkChatActivity">

</FrameLayout>