React Native

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 는 아래 링크에서 확인 할 수 있습니다.

Android API Reference

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 파일 교체

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

2) 교체한 AppDelegate.m 파일의 moduleName을 프로젝트명으로 변경합니다.

핑거푸시 사용자 콘솔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 는 아래 링크에서 확인 할 수 있습니다.

iOS API Reference

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

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

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

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

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