APP PUSH
Developers핑거푸시 고객지원
  • 핑거푸시 APP PUSH
  • 이용 가이드
    • 사용자 콘솔 매뉴얼
      • 앱 등록하기
      • 대시보드
      • 메시지 만들기
        • 커스텀 푸시
        • 엑셀 파일 업로드 유의사항
      • 발송 이력 및 발송 리포트
      • 인앱푸시 만들기
      • 통계
      • 앱 설정
    • 플랜별 지원 기능
    • 서비스 신청 및 결제 안내
    • 핑거푸시 라이브 앱
    • 광고성 정보 전송 가이드라인
  • SDK 매뉴얼
    • SDK 다운로드
    • Android SDK 매뉴얼
      • 주요 기능
      • 비공개 키 생성 및 등록
    • iOS SDK 매뉴얼
      • APN 인증 키(.p8) 발급 및 업로드
    • Cordova
    • React Native
    • Flutter
    • 인앱푸시 App 가이드
    • Server2Server
      • 1. 일괄 발송
      • 2. 다수의 대상자 발송
        • 2-1. 메시지 기본 정보 발송
        • 2-2. 수신 대상자 정보 발송
        • 2-3. 메시지 전송 종료 정보 발송
      • 3. 다수의 대상자 발송 (500건 이하)
      • 4. 다수의 대상자 개별 설정값 발송
      • 5. 단일 건 발송
      • 6. 타겟 발송 실패 시 식별자 조회
      • 7. 예약 메시지 취소
      • 8. 부가 서비스-통계
  • API Reference
    • Android API Reference
    • iOS API Reference
  • Agent
    • 에이전트 소개
    • 설치 및 실행
    • 푸시 발송 테스트
    • CJ올리브네트웍스 연동
    • 테이블 설명
Powered by GitBook
On this page
  • Android
  • 플러그인 다운로드
  • 플러그인 적용하기
  • FCM APP 생성
  • 핑거푸시 사용자콘솔 APP 생성
  • 권한 요청
  • Android API Reference
  • iOS
  • 플러그인 다운로드
  • 플러그인 적용하기
  • AppDelegate.m 파일 교체 (React Native 버전 0.77 미만인 경우)
  • AppDelegate.swift 파일 교체 (React Native 버전 0.77 이상인 경우)
  • "ProjectName-Bridging-Header.h" 추가하기 (React Native 버전 0.77 이상인 경우)
  • 핑거푸시 사용자 콘솔APP 생성
  • 푸시 기능 추가
  • iOS API Reference
  • 예제 파일 적용 및 푸시 메시지 확인
  1. SDK 매뉴얼

React Native

PreviousCordovaNextFlutter

Last updated 4 months ago

Android

본 가이드는 React Native 0.71.7 기준으로 작성되었습니다.

SDK가 지원하는 최소 버전은 Android API 19(Kitkat) 이상입니다.

플러그인 다운로드

1) 플러그인을 다운로드 합니다.

▶다운로드

2) 프로젝트 폴더와 같은 경로에 압축을 해제합니다.

플러그인 적용하기

명령어를 실행하여 플러그인을 설치합니다.

fingerpush_reactnative_module 폴더를 상대 경로 참조하여 설치합니다.

react-native install ../fingerpush_reactnative_module

react-native 0.69 이상 버전에서는 install 명령어가 삭제됐습니다.

버전이 0.69 이상인 경우, yarn 패키지 매니저를 이용하여 설치합니다.

버전이 0.69 이상인 경우
yarn add ../fingerpush_reactnative_module/

FCM APP 생성

1) Android 패키지 이름 입력 후 앱을 등록합니다.

2) 'google-services.json' 파일 다운로드 후 프로젝트 앱 모듈 루트 디렉토리로 이동 시킵니다.

3) 플러그인을 사용하기 위해 build.gradle 파일을 수정합니다.

a. 프로젝트 레벨의 build.gradle 에 'com.google.gms:google-services' 라이브러리를을 추가합니다.

<project>/build.gradle
buildscript {
    ...
    
    dependencies {l
        ...
        classpath 'com.google.gms:google-services:4.3.15'
    }
}

b. 앱 레벨의 build.gradle에 firebase-messaging, firebase-core, material 라이브러리를 추가합니다.

<project>/<app-module>/build.gradle
ㄴ...
dependencies {
    ...
    implementation 'com.google.firebase:firebase-messaging:23.0.0'
    implementation 'com.google.firebase:firebase-core:18.0.3'
    implementation 'com.google.android.material:material:1.3.0'
}
apply plugin: 'com.google.gms.google-services'

4) 프로젝트 AndroidManifest.xml 파일을 아래 스크린샷과 같이 입력합니다.

AndroidManifest.xml
<application
    ...
    <!-- Android 13 or later requires below code -->
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
    ...
    android:allowBackup="false"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name">
    
    ...
    <service android:name="com.fingerpush.IntentService"
        android:exported="false">
        <intent-filter>
            <action android:name="com.google.firebase.MESSAGING_EVENT" />
        </intent-filter>
    </service>
    
</application>

핑거푸시 사용자콘솔 APP 생성

1) 핑거푸시 사용자 콘솔에서 '앱 등록' 버튼을 누른 뒤 앱을 생성합니다.

2) '앱 설정' 메뉴로 이동하면 App Key, App Secret을 확인할 수 있습니다.

3) 핑거푸시의 App Key, App Secret를 프로젝트의 시작 위치에 아래 사용한 함수와 같이 입력 후 저장합니다.

4) 핑거푸시 사용자 콘솔의 앱 설정 화면에 FCM에서 발급된 '서버 키' 를 입력합니다.

권한 요청

안드로이드 13 이상 기기는 POST_NOTIFICATIONS 권한을 필요로 합니다. (targetSdk 도 33 이상으로 설정 필요.)

프로젝트 MainActivity.java에 아래 코드를 입력합니다.

...
import android.Manifest;
import android.os.Build;
import android.os.Bundle;

public class MainActivity extends ReactActivity {
  ...
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
      requestPermissions(new String[]{Manifest.permission.POST_NOTIFICATIONS}, 1000);
    }
  }
  ...
}

Android API Reference

Android API 는 아래 링크에서 확인 할 수 있습니다.

iOS

본 가이드는 React Native 0.68.0 기준으로 작성되었습니다.

최소 버전 iOS 10 이상

플러그인 다운로드

1) 플러그인을 다운로드합니다.

▶다운로드

2) 프로젝트 폴더와 같은 경로에 압축을 해제합니다.

플러그인 적용하기

1) 명령어를 실행하여 플러그인을 설치합니다.

fingerpush_reactnative_module 폴더를 상대 경로 참조하여 설치합니다.

react-native install ../fingerpush_reactnative_module

2) 프로젝트 내 iOS 폴더에서 'pod install' 을 호출합니다.

cd ios
pod install

AppDelegate.m 파일 교체 (React Native 버전 0.77 미만인 경우)

1) '생성한 프로젝트의 AppDelegate.m' 파일을 'fingerpush_reactnative_module/example/ios_objc/FingerpushExample/AppDelegate.m' 로 교체합니다.

AppDelegate.swift 파일 교체 (React Native 버전 0.77 이상인 경우)

1) '생성한 프로젝트의 AppDelegate.swift' 파일을 'fingerpush_reactnative_module/example/ios/FingerpushExample/AppDelegate.swift' 로 교체합니다.

"ProjectName-Bridging-Header.h" 추가하기 (React Native 버전 0.77 이상인 경우)

1) iOS SDK 매뉴얼 > “ProjectName-Bridging-Header.h” 추가하기를 참고하여 파일을 추가합니다.

핑거푸시 사용자 콘솔APP 생성

1) 핑거푸시 사용자 콘솔에서 '앱 등록' 버튼을 누른 뒤 앱을 생성합니다.

2) '앱 설정' 메뉴로 이동하면 App Key, App Secret을 확인할 수 있습니다.

3) 핑거푸시의 App Key, App Secret를 프로젝트의 시작 위치에 아래 사용한 함수와 같이 입력 후 저장합니다.

푸시 기능 추가

1) Signing & Capabilities에서 Bundle Identifier와 Provisioning Profile을 수정합니다.

2) Capability 추가 선택 -> Background Modes의 Remote notifications, Push Notifications 추가합니다.

iOS API Reference

iOS API 는 아래 링크에서 확인 할 수 있습니다.

예제 파일 적용 및 푸시 메시지 확인

1) 프로젝트 폴더 내의 App.js 파일을 예제 파일과 같이 변경합니다.

예제 파일은 'fingerpush_reactnative_module > example > src > App.tsx' 에서 확인하실 수 있습니다.

2) setDevice 함수를 통해 앱을 핑거푸시 서버에 등록합니다.

3)디바이스가 정상적으로 등록됐다면 핑거푸시 사이트에서 확인 가능하고, 푸시 메시지를 수신할 수 있습니다.

Android API Reference
iOS API Reference