English한국어
한국어

시작하기

이 문서는 ChannelIO React Native SDK (이하 SDK)의 설치 과정을 설명합니다.

React Native 패키지 설치하기

SDK를 설치하기 위해 쉘에서 아래 명령을 실행합니다.

npm install react-native-channel-plugin

SDK는 모바일 SDK와 호환되는 버전 목록을 가지고 있습니다. 설치한 버전이 모바일 SDK와 호환되는지 확인하려면 이 버전 호환성 을 참조합니다.

iOS에 설치하기

이 단락은 iOS 환경에 ChannelIO SDK를 설치하는 방법을 안내합니다.
CocoaPods, Carthage를 통해서 SDK를 설치할 수 있습니다.

CocoaPods

CocoaPod을 이용하여 SDK를 설치할 수 있습니다. 요구사항은 다음과 같습니다.

  • Xcode 12 이상
  • CocoaPods 버전 1.10.0 이상
  1. Podfile 이 위치한 디렉토리에서 pod install 커맨드를 실행하여 패키지를 설치합니다.
    만약 기존에 설치했었다면, pod update 커맨드를 실행하여 패키지를 업데이트할 수 있습니다.
  2. Project_Name.xcworkspace을 열어 사용합니다.

Carthage로 설치하기

Carthage를 이용하여 SDK를 설치할 수 있습니다.

  1. 프로젝트의 Cartfile에 아래와 같이 ChannelIOSDK를 추가합니다.
binary "https://mobile-static.channel.io/ios/latest/channeliosdk-ios.json"
  1. Cartfile 이 위치한 곳에서 아래 커맨드를 이용하여 패키지를 설치합니다.
carthage update --platform iOS --use-xcframeworks
  1. PROJECT_DIR/Carthage/build 폴더 안에 다운로드된 패키지를 Xcode로 드래그하여 추가합니다.

설치하고 나서

다음을 따라 iOS 프로젝트에 설정을 추가합니다.

SDK에서 사용하는 권한과 설명 추가

SDK를 사용하기 위해 다음과 같은 권한이 필요합니다. 프로젝트의 info.plist 에 아래 권한에 따른 설명을 추가합니다.

KeyValue
Privacy - Camera Usage DescriptionAccessing to camera in order to provide better user experience
Privacy - Photo Library Additions Usage DescriptionAccessing to photo library in order to save photos
Privacy - Microphone Usage DescriptionAccessing to microphone to record voice for video

초기화 하기

SDK 사용을 위해 초기화가 필요합니다.

프로젝트에서 사용하는 언어를 기준으로 아래 코드를 참조하여 수정합니다.

Swift

AppDelegate.swift으로 이동여 아래 코드를 참조하여 수정합니다.

// AppDelegate.swift

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    ChannelIO.initialize(application)

    return true
}

만약 SceneDelegate.swift에서 window를 관리하는 경우, 아래 initializeWindow 메소드를 추가합니다.

// SceneDelegate.swift

// add:
var channelWindow: UIWindow?

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    guard let windowScene = (scene as? UIWindowScene) else { return }
    
    channelWindow = ChannelIO.initializeWindow(with: windowScene)
}

Objective-C

AppDelegate.m 으로 이동하여 아래 코드를 추가합니다.

#import <ChannelIOFront/ChannelIOFront-swift.h>

@interface AppDelegate ()
@end

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [ChannelIO initialize:application];
  return YES;
}

만약 SceneDelegate.m 에서 window를 관리하는 경우, 아래 initializeWindow 메소드를 추가합니다.

//  SceneDelegate.m

@interface SceneDelegate ()
@property (strong, nonatomic) UIWindow * channelWindow;
@end

@implementation SceneDelegate


- (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions {
  _channelWindow = [ChannelIO initializeWindowWith:(UIWindowScene *)scene];
}
@end

안드로이드에 설치하기

이 단락은 안드로이드에 ChannelIO SDK를 설치하는 방법을 안내합니다.

Project - build.gradle

project 레벨의 build.gradle 파일에 아래 내용처럼 ChannelTalk repository를 추가합니다.

buildscript {  
    ...  
    repositories {  
        ...  
        google()  
        mavenCentral()  
        maven {  
            url 'https://maven.channel.io/maven2'  
            name 'ChannelTalk'  
        }  
        ...  
    }  
    ...  
}

만약 위 작업 이후 빌드 시 에러가 발생한다면, app 레벨의 build.gradle에 dependency를 추가해주세요.

dependencies {  
  implementation 'io.channel:plugin-android'  
}

Initialization

채널톡 SDK를 사용하기 위해서 Application#onCreate()에서 ChannelIO.initialize()를 호출해야 합니다. 앱의 Application을 별도로 작성하지 않았다면 새로 생성합니다.
프로젝트에서 사용하는 언어를 기준으로 아래 코드를 추가합니다.

Kotlin

아래 예시를 참조하여 android/app/src/main/java/**/MainApplication.kt 파일을 수정합니다.

class MainApplication : Application(), ReactApplication {

  override fun onCreate() {
    super.onCreate()
    
    ChannelIO.initialize(this)
  }
}

Java

아래 예시를 참조하여 android/app/src/main/java/**/MainApplication.java 파일을 수정합니다.

import android.support.multidex.MultiDexApplication;

import com.zoyi.channel.plugin.android.ChannelIO;
import com.zoyi.channel.rn.RNChannelIOPackage;

public class MainApplication extends MultiDexApplication implements ReactApplication {
  @Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
       new MainReactPackage(),
       new RNChannelIOPackage() // Add ChannelIO Package
    );
  }
  
  @Override
  public void onCreate() {
    super.onCreate();

    ChannelIO.initialize(this); // Initialize ChannelIO
  }
}

안드로이드 Cleartext Traffic 설정

안드로이드 API 28 이상에서는 암호화되지 않은 HTTP 통신을 기본적으로 비허용합니다. 이에 따라 유저와의 상담에서 HTTP만을 지원하는 웹사이트 링크를 전달하면 SDK에 내장된 웹뷰가 웹사이트에 연결할 수 없습니다. 이 문제를 해결하는 가장 좋은 방법은 고객에게 HTTPS 링크만을 전달드리는 것입니다. 하지만 만약 상담을 함에 있어서 HTTP 링크를 전달해야 할 것 같다면 AndroidManifest.xml 파일의 속성을 아래와 같이 수정하여 허용할 수 있습니다.

<application
	...
	android:usesCleartextTraffic="true">

🚧

위와 같은 방식으로 모든 HTTP 요청을 허용하는 것은 보안상 문제를 일으킬 수 있으므로 주의해야 합니다. 더 자세한 내용은 네트워크 보안 설정에 관한 안드로이드 공식 문서를 확인합니다.

SDK 사용하기

Step 1. Framework 추가하기

채널톡 사용이 필요한 곳에서 SDK를 import 합니다.

import { ChannelIO } from 'react-native-channel-plugin';

Step 2. Boot

Boot 는 SDK를 사용하기 위해 준비하는 과정입니다.

부트에는 플러그인 키가 필요합니다. 플러그인 키는 채널톡 이해하기 문서의 플러그인 키 얻기를 참고하여 준비합니다.
Boot 는 두가지 종류로, 익명의 유저로 부트 하거나, 멤버 유저로 부트 할 수 있습니다.
유저에 대한 자세한 설명은 멤버 유저를 참고합니다.

2 - 1. 익명의 유저로 부트하기

익명의 유저란, memberId가 부여되지 않은 유저입니다. 아래는 익명의 유저로 Boot 한 뒤, Boot의 결과값을 받는 예시입니다.

let settings = {
  "pluginKey": YOUR_PLUGIN_KEY
};

ChannelIO.boot(settings).then((result) => {

});

Boot 의 메소드 파라미터인 settings 에는 pluginKey를 포함하여 몇가지 부트 옵션을 제공합니다.

2 - 2. 멤버 유저로 부트하기

멤버 유저란, memberId 가 부여된 유저입니다. 만약 로그인 되어있는 상태와 같이 자체적으로 유저를 구분할 수 있는 경우에는 memberId를 부여하여 멤버 유저로 부트합니다. 채널톡은 memberId를 이용하여 각 유저를 구분합니다.

Profile 모델을 이용하여, 유저에게 추가적인 정보를 주입할 수 있습니다.

❗️

보안을 위해서 멤버 해시 사용을 권장합니다

만약 아이디, 이메일과 같은 예측 가능한 값으로 memberId를 설정할 경우 인증되지 않은 제 3자가 memberId를 유추할 수 있습니다. 이 경우 제 3자가 고객의 개인 정보나 채팅 내역을 탈취할 수 있는 등 보안 위협에 노출될 수 있습니다. 보안을 위해서 멤버 해시를 설정하는 것을 권장합니다.

아래는, 특정 memberId 를 가진 멤버 유저를 부트하는 예시입니다.

let settings = {
  "pluginKey": YOUR_PLUGIN_KEY,
  "memberId": memberId,
  "profile": {
    "name": USER_NAME,
    "mobileNumber": "01012345678"
  }
}

ChannelIO.boot(settings).then((result) => {
});

채널 버튼 표시하기

SDK는 사용자가 메신저를 띄울 수 있도록 채널 버튼을 제공하고 있습니다. showChannelButton 과 hideChannelButton 을 호출하여 채널 버튼을 나타내거나 숨길 수 있습니다.

다른 방법으로 메신저를 띄우거나, 채널 버튼의 UI를 변경하고자 하는 경우에는 커스터마이징를 참고합니다.

ChannelIO.showChannelButton();
ChannelIO.hideChannelButton();

sleep

track을 통한 이벤트 트래킹이나 푸시 알림만 사용하고자 할 때 사용할 수 있습니다. 채팅 상담이나 마케팅 팝업과 같은 기능이 작동하지 않습니다.

ChannelIO.sleep();

Shutdown

SDK의 모든 기능을 사용 중지합니다. 만약 SDK의 기능을 다시 사용하기 위해서는 다시 Boot해야 합니다.

ChannelIO.shutdown();