React Native 플러그인 연동

1. 리액트 플러그인 설치

1.1 플러그인 다운로드

터미널에서 아래의 명령어를 통해 리액트 플러그인을 프로젝트에 다운로드 합니다.

-npm 방식
npm install --save git+https://github.com/WisetrackerTechteam/RW-react-package.git

-yarn 방식
yarn add https://github.com/WisetrackerTechteam/RW-react-package.git

1.2 플러그인 설치 확인

프로젝트에 플러그인이 정상 다운로드되면 node_modules 폴더 아래 다음과 같이 플러그인 파일이 추가된 것을 확인할 수 있습니다. (폴더경로 : 프로젝트폴더 > node_modules > DotReactNativeBridge 폴더 depth 확인 )

2. Android 설정

앱에 SDK 추가

저장소가 JFrog에서 Github으로 변경되었습니다.

기존 JFrog를 이용하는 방식은 2023년 9월까지만 제공되며, 이후부터는 아래 Github Package 이용하는 방식으로 필수 변경이 필요합니다. 기존 방식을 사용하는 고객사의 경우 빌드시 오류가 발생될 수 있으며 Github 방식으로 변경 후 다시 빌드 해 주세요.

(기존 JFrog에서 사용되던 라이브러리와 동일한 라이브러리가 포함되어있습니다)

android프로젝트에서 가장 상위에 있는 build.gradle(project)에 아래와 같이 와이즈트래커의 maven repository 주소를 추가합니다.

기존코드에 allprojects 가 있다면, repositories{ } 안에 아래 코드와 같이 와이즈트래커 repository url 을 추가합니다. allprojects 가 없을경우 allprojects를 전체 추가해주세요.

앱에 SDK 추가 (Github Package 이용)

allprojects {
    repositories {
        google()
        mavenCentral()
        /* wisetracker sdk repository config */
        maven {
            def endPoint = "https://analytics.wisetracker.co.kr/console/android/sdk/github/credentials.do"
            url = uri(new URL(endPoint+'?name=URI').text)
            credentials {
                username = new URL(endPoint+'?name=USER').text
                password = new URL(endPoint+'?name=TOKEN').text
            }
        }
    }
}

다음으로 "app"모듈단위에 있는 build.gradle 파일에 아래와 같이 Wisetracker SDK를 추가해주세요.

"app"모듈의 build.gradle 파일의 dependencies{ } 중괄호 안 하위 부분에 아래에 와이즈트래커 SDK를 추가합니다.

dependencies {
    ....
    // SDK
     implementation "com.sdk.wisetracker:base_module:latest.release"
     implementation "com.sdk.wisetracker:new_dot_module:latest.release"
}

AuthorizationKey 등록

AuthorizationKey를 등록할 수 있는 파일의 위치는 아래와 같습니다.

프로젝트의 app/src/main/res/values/strings.xml 파일에 아래 코드를 추가합니다.

<string-array name="dotAuthorizationKey">
    <item name="useMode">1</item>
    <item name="serviceNumber">xxxxx</item>  <!--서비스번호 변경 필수 -->
    <item name="expireDate">14</item>
    <item name="isDebug">false</item>
    <item name="isInstallRetention">true</item>
    <item name="isFingerPrint">true</item>
    <item name="accessToken"></item>
</string-array>

추가한 코드 중 serviceNumber의 value를 올바른 값으로 변경해야 합니다.

와이즈트래커 대시보드에 로그인하여 설정 > 서비스설정 메뉴에서 '서비스번호' 항목에 기재된 숫자를 확인 후 복사하여 serviceNumber 값을 변경 해 주세요.

HTTP 통신 허용

프로젝트의 Target API가 API Level 28 이상일 경우에 적용하는 설정입니다. 아래와 같이 HTTP 통신을 허용하는 두 가지 설정을 추가해주세요.

✔️ network_security_config.xml 설정은 경우에 따라 생략될 수 있으며, 필수설정은 아닙니다.

AndroidManifest.xml 설정

해당 파일의 경로는 다음과 같습니다. (android > app > src > main > AndroidMainfest.xml )

작성되어 있는 코드에, 아래 한 줄 짜리 networkSecurityConfig 코드를 복사하여 <application androidname = > 안에 복사하여 붙여넣기 하면 아래 최종 코드와 같은 모양이 됩니다.

android:networkSecurityConfig="@xml/network_security_config"
<application androidname=".MainApplication"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:allowBackup="false"
    android:networkSecurityConfig="@xml/network_security_config" > <!-- API Level 28 이상일 경우 해당 라인 추가 --> 
    

app/res/xml/network_security_config.xml 설정

  1. network_security_config.xml 파일을 생성합니다.

  2. 로컬 환경을 추가 한 후, xml 파일에 와이즈트래커 도메인을 추가 해 주세요.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <!-- 로컬에서 개발하는 경우에는 아래와 같이 로컬 개발환경을 추가해야 metro server와 통신할 수 있습니다 -->
        <domain includeSubdomains="true">localhost</domain>
        <!-- 와이즈트래커 도메인 추가 -->
        <domain includeSubdomains="true">trk.analytics.wisetracker.co.kr</domain>
    </domain-config>
</network-security-config>
  1. trk.analytics.wisetracker.co.kr 도메인을 추가 해 주시면 와이즈트래커 SDK 통신이 가능해집니다.

🔽 신규로 network_security_config.xml 파일을 생성할 경우 경로입니다.

Bridge파일 추가

마지막으로 bridge 함수들을 호출 할 수 있게 bridge 파일을 추가 합니다.

왼쪽은 현 페이지 상단에 기재된 플러그인 다운로드시 생긴 DotReactNativeBridge 폴더 하위에 있는 "kr"폴더의 위치이며 해당 kr 폴더를 복사한 뒤 , 오른쪽에 보이는 현 프로젝트 폴더의 /프로젝트명/android/app/src/main/java 경로에 복사한 "kr" 폴더를 붙여넣기 합니다.

DotReactBridge 객체 NativeModules 등록

파일 추가 후 MainApplication.java 파일에 Wisetracker SDK BridgePackage를 추가 해 줍니다.

import kr.co.wisetracker.BridgePackage;

public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHostWrapper(
      this,
      new ReactNativeHost(this) {
      @Override
      public boolean getUseDeveloperSupport() {
        return BuildConfig.DEBUG;
      }
  
      @Override
      protected List<ReactPackage> getPackages() {
        @SuppressWarnings("UnnecessaryLocalVariable")
        List<ReactPackage> packages = new PackageList(this).getPackages();
  
        // Wisetracker SDK BridgePackage 추가
        packages.add(new BridgePackage());
  
        return packages;
      }
  
      @Override
      protected String getJSMainModuleName() { return "index"; }
    });