Links

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

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

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

1) 프로젝트 폴더 내의 App.js 파일을 예제 파일과 같이 변경합니다.
예제 파일은 'fingerpush_reactnative_module > example > src > App.tsx' 에서 확인하실 수 있습니다.
2) setDevice 함수를 통해 앱을 핑거푸시 서버에 등록합니다.
3)디바이스가 정상적으로 등록됐다면 핑거푸시 사이트에서 확인 가능하고, 푸시 메시지를 수신할 수 있습니다.