React Native SDK를 채팅에 통합하는 방법

사전 요구 사항

RN v0.60 이상은 Chat SDK v2.0.0부터 지원됩니다.

APP ID 및 APP Key 가져오기

귀하의 채팅 계정은 모바일 SDK를 채팅과 통합하는 데 사용되는 고유한 APP ID 및 APP Key와 연결되어 있습니다.

1. 계정 소유자/관리자로 채팅 계정에 로그인합니다.
2. 관리자 설정 > 채널 > 채팅 및 메시징 > 모바일 SDK로 이동합니다. 여기에서 APP ID와 APP Key를 찾을 수 있습니다.

1. 프로젝트에 Chat SDK 추가

Chat 노드 패키지 이름은 'react-native-freshchat-sdk'입니다.

React Native 프로젝트의 Package.json 파일에서 dependencies에 ”react-native-freshchat-sdk”: “{{latest-version}}”을 추가합니다.

최신 SDK 버전은 다음 링크를 참조하세요: https://www.npmjs.com/package/react-native-freshchat-sdk

1.1. iOS 설정

RN < 0.60 및 Chat SDK 2.0.0+의 React 종속성

# React Native 요구 사항
pod 'React', :path => '../node_modules/react-native', :subspecs => [
  'Core',
  'CxxBridge', # RN >= 0.47에 필요
  'DevSupport', # RN >= 0.43에 In-App Devmenu 활성화에 필요
  'RCTText',
  'RCTNetwork',
  'RCTWebSocket', # 디버깅에 필요
  'RCTAnimation', # FlatList 및 네이티브 UI 스레드에서 실행되는 애니메이션에 필요
  # 프로젝트에서 사용하려는 다른 서브스펙 추가
]
# RN >= 0.42.0을 사용하는 경우 Yoga를 명시적으로 포함
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

기존 Chat 통합을 Chat SDK 2.0.0+로 마이그레이션

1. 다음 명령어를 사용하여 React 프로젝트에서 React Native Chat SDK의 연결을 해제합니다.

react-native unlink react-native-freshchat-sdk

2. iOS 프로젝트 내의 Podfile에서 다음 줄을 제거합니다.

pod 'FreshchatSDK', :path=> '../node_modules/react-native-freshchat-sdk/ios/FreshchatSDK.podspec'

3. 위의 표를 참조하여 요구 사항에 따라 단계를 선택합니다.

1.2. Android 설정

프로젝트 수준 build.gradle 파일에 maven { url "https://jitpack.io" }를 추가합니다.

allprojects {
    repositories {
        .....
        maven { url "https://jitpack.io" }
    }
}

RN 버전 < 0.60을 사용하는 경우 아래 명령어를 실행하세요.

react-native link react-native-freshchat-sdk

2. SDK 초기화

Chat SDK의 다른 기능을 호출하거나 사용하기 전에 Freshchat.init()을 앱 ID와 앱 키로 호출합니다. 앱의 런처/지원 화면 시작 시 init()을 호출하는 것을 강력히 권장합니다. Chat SDK는 init() 중에 구성 요소의 존재 여부를 확인하고 누락된 구성 요소가 감지되면 경고합니다. 다음 코드 스니펫에서 YOUR-APP-ID와 YOUR-APP-KEY를 실제 앱 ID와 앱 키로 대체하세요.

import { Freshchat, FreshchatConfig } from 'react-native-freshchat-sdk';
var freshchatConfig = new FreshchatConfig(APP_ID, APP_KEY);
Freshchat.init(freshchatConfig);

참고: Freshchat 계정이 Freshchat US 서버의 일부가 아닌 경우 서버 위치에 따라 도메인을 지정해야 합니다. 계정의 서버 위치를 확인하려면 지원 팀에 문의하세요.

다음은 서버 위치와 도메인 매핑 세부 정보입니다.

• US2 - "https://msdk.us2.freshchat.com"
• EU - "https://msdk.eu.freshchat.com"
• AU - "https://msdk.au.freshchat.com"
• IN - "https://msdk.in.freshchat.com"

샘플 코드:

freshchatConfig.setDomain("msdk.in.freshchat.com");

2.1 초기화 구성 옵션

초기화 전에 구성에서 카메라 캡처와 같은 기능을 활성화하거나 비활성화할 수 있습니다.

var freshchatConfig = new FreshchatConfig(APP_ID, APP_KEY);
freshchatConfig.teamMemberInfoVisible = true;
freshchatConfig.cameraCaptureEnabled = true;
freshchatConfig.gallerySelectionEnabled = true;
freshchatConfig.responseExpectationEnabled = true;
freshchatConfig.showNotificationBanner = true; //iOS 전용
freshchatConfig.notificationSoundEnabled = true; //iOS 전용
freshchatConfig.themeName = "CustomTheme.plist"; //iOS 전용
freshchatConfig.stringsBundle = "FCCustomLocalizable"; //iOS 전용
Freshchat.init(freshchatConfig);

3. 사용자 정보

3.1 사용자 정보 업데이트

지원 에이전트가 사용자와 메시지를 주고받을 때 사용자에 대한 더 많은 정보를 제공하기 위해 언제든지 기본 사용자 정보를 보낼 수 있습니다.

import { FreshchatUser } from 'react-native-freshchat-sdk';
var freshchatUser = new FreshchatUser();
freshchatUser.firstName = "John";
freshchatUser.lastName = "Doe";
freshchatUser.email = "johndoe@dead.man";
freshchatUser.phoneCountryCode = "+91";
freshchatUser.phone = "1234234123";
Freshchat.setUser(freshchatUser, (error) =>