React Native SDK 기본 통합 가이드

이 섹션에는 Pushwoosh React Native SDK 를 애플리케이션에 통합하는 방법에 대한 정보가 포함되어 있습니다.

사전 준비 사항

Pushwoosh React Native SDK 를 앱에 통합하려면 다음이 필요합니다:

통합 단계

1. Pushwoosh React Native SDK 종속성 추가

Pushwoosh React Native SDK 종속성을 프로젝트에 추가합니다:

npm install pushwoosh-react-native-plugin --save

2. React Native SDK 초기화

index.js 파일의 루트 컴포넌트에서:

pushwoosh-react-native-plugin 을 import 합니다.
Pushwoosh SDK 를 초기화합니다.
푸시 알림 등록을 위해 초기화 로직에서 register() 를 호출합니다.

import Pushwoosh from 'pushwoosh-react-native-plugin';

AppRegistry.registerComponent(appName, () => App);

Pushwoosh.init({
    "pw_appid" : "__YOUR_APP_ID__" ,
    "project_number" : "__YOUR_FCM_SENDER_ID__"
});

Pushwoosh.register();

여기서:

__YOUR_APP_ID__ 는 Pushwoosh Control Panel 의 애플리케이션 코드입니다.
__YOUR_FCM_SENDER_ID__ 는 Firebase Console 의 Firebase 프로젝트 번호입니다.

3. iOS 네이티브 설정

3.1 기능

프로젝트에서 푸시 알림을 활성화하려면 특정 기능을 추가해야 합니다.

Signing & Capabilities 섹션에서 다음 기능을 추가합니다:

Push Notifications
Background Modes. 이 기능을 추가한 후 Remote notifications 확인란을 선택합니다.

시간 민감 알림(iOS 15+)을 사용하려면 Time Sensitive Notifications 기능도 추가합니다.

3.2 Info.plist

Runner/Info.plist 에서 __PUSHWOOSH_DEVICE_API_TOKEN__ 키를 Pushwoosh Device API Token으로 설정합니다:

<key>Pushwoosh_API_TOKEN</key>
<string>__PUSHWOOSH_DEVICE_API_TOKEN__</string>

3.3 메시지 전송 추적

프로젝트에 Notification Service Extension 타겟을 추가해야 합니다. 이는 iOS 에서 정확한 전송 추적 및 Rich Media 와 같은 기능을 위해 필수적입니다.

확장 타겟 및 필요한 Pushwoosh 코드를 추가하려면 네이티브 가이드의 단계를 따르십시오.

3.4 iOS React Native 프로젝트 종속성 설치

iOS React Native 프로젝트의 종속성을 설치하려면 터미널에서 ios 폴더로 이동하여 다음을 실행합니다:

pod install --repo-update

4. Android 네이티브 설정

4.1 종속성 설치

필요한 종속성 및 플러그인이 Gradle 스크립트에 추가되었는지 확인하십시오:

Google Services Gradle 플러그인을 프로젝트 수준 build.gradle 종속성에 추가합니다:

buildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.3.15'
  }
}

앱 수준 build.gradle 파일에 플러그인을 적용합니다:

apply plugin: 'com.google.gms.google-services'

4.2 Firebase 구성 파일 추가

google-services.json 파일을 프로젝트 디렉토리의 android/app 폴더에 배치합니다.

4.3 Pushwoosh 메타데이터 추가

main/AndroidManifest.xml 에서 <application> 태그 내에 Pushwoosh Device API Token을 추가합니다:

<meta-data android:name="com.pushwoosh.apitoken" android:value="__YOUR_DEVICE_API_TOKEN__" />

중요: Pushwoosh Control Panel 에서 토큰에 올바른 앱에 대한 액세스 권한을 부여했는지 확인하십시오. 자세히 알아보기

5. 프로젝트 실행

프로젝트를 빌드하고 실행합니다.
Pushwoosh Control Panel 로 이동하여 푸시 알림을 보냅니다.
앱에서 알림을 확인해야 합니다.

확장 통합

이 단계에서는 SDK 를 이미 통합했으며 푸시 알림을 보내고 받을 수 있습니다. 이제 핵심 기능을 살펴보겠습니다.

푸시 알림 이벤트 리스너

Pushwoosh SDK 에는 푸시 알림 처리를 위해 설계된 두 가지 이벤트 리스너가 있습니다:

pushReceived 이벤트는 푸시 알림이 수신될 때 트리거됩니다.
pushOpened 이벤트는 사용자가 알림을 열 때 트리거됩니다.

애플리케이션 시작 시 SDK 초기화 직후에 이러한 이벤트 리스너를 설정해야 합니다:

import {DeviceEventEmitter} from 'react-native'
import Pushwoosh from 'pushwoosh-react-native-plugin';

class PushwooshNotificationHandler {
  setupPushListeners() {

    DeviceEventEmitter.addListener('pushReceived', (e) => {
      console.warn("Push received: " + JSON.stringify(e));
    });

    DeviceEventEmitter.addListener('pushOpened', (e) => {
      console.warn("Push accepted: " + JSON.stringify(e));
    });

  }
}

사용자 구성

개별 사용자 행동 및 선호도에 집중함으로써 개인화된 콘텐츠를 제공하여 사용자 만족도와 충성도를 높일 수 있습니다.

import Pushwoosh from 'pushwoosh-react-native-plugin';

class Registration {
  afterUserLogin(user: User) {

    // Set user ID
    Pushwoosh.setUserId(user.getId());

    // Set user email
    Pushwoosh.setEmails(user.getEmailList());

    // Set user SMS number
    Pushwoosh.registerSMSNumber(user.getPhoneNumber());

    // Set user WhatsApp number
    Pushwoosh.registerWhatsappNumber(user.getWhatsAppNumber());

    // Setting additional user information as tags for Pushwoosh
    Pushwoosh.setTags({
      "age": user.getAge(),
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }
}

import Pushwoosh from 'pushwoosh-react-native-plugin';

class UpdateUser {
  afterUserUpdateProfile(user: User) {

    // Set list of favorite categories
    Pushwoosh.setTags({
      "favorite_categories": user.getFavoriteCategoriesList()
    });

    // Set payment information
    Pushwoosh.setTags({
      "is_subscribed": user.isSubscribed(),
      "payment_status": user.getPaymentStatus(),
      "billing_address": user.getBillingAddress()
    });
  }
}

이벤트

이벤트는 앱 내에서 특정 사용자 행동 또는 발생으로, 행동을 분석하고 해당 메시지 또는 작업을 트리거하기 위해 추적할 수 있습니다.

import Pushwoosh from 'pushwoosh-react-native-plugin';

class Registration {

  // Track login event
  afterUserLogin(user: User) {
    Pushwoosh.postEvent("login", {
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }

  // Track purchase event
  afterUserPurchase(product: Product) {
    Pushwoosh.postEvent("purchase", {
      "product_id": product.getId(),
      "product_name": product.getName(),
      "price": product.getPrice(),
      "quantity": product.getQuantity()
    });
  }
}

문제 해결

통합 과정에서 문제가 발생하면 지원 및 커뮤니티 섹션을 참조하십시오.