React Native for Android 사용 가이드

※ 리액트네이티브 0.61.5 기반

1. 리액트네이티브 프로젝트 생성

 

– 리액트네이티브 프로젝트를 생성합니다.


cordova_manual_for_android_1
2. 리액트네이티브 핑거푸시 네이티브 모듈 및 파일 다운로드

 

1. 리액트네이티브 핑거푸시 네이티브 모듈 및 파일을 여기 에서 다운로드합니다.


2. 리액트네이티브 핑거푸시 네이티브 모듈 및 파일을 리액트네이티브 프로젝트 폴더에서 프로젝트/android/app/src/main/java/패키지명 위치에 이동시킵니다.






2. 아래의 스크린샷에 표기되어있는 $PACKAGE_NAME에 프로젝트의 패키지네임을, PROJECT NAME에 프로젝트의 이름을 적습니다.















3. 핑거푸시 관리자 사이트 APP 생성

 

1. 핑거푸시 사이트(https:/www.fingerpush.com)에서 앱 추가를 눌러 핑거푸시 앱을 생성합니다.


manual_for_android_1-1




2. 필수값인 앱 이름, 앱 구분, 앱 카테고릴 입력 또는 선택합니다.



manual_for_android_1-2




3. 설정을 선택하면 App Key, App Secret 을 확인할 수 있습니다.



manual_for_android_1-3




4. 프로젝트/android/app/src/main 에 asset 폴더를 만든 후 그 안에 FingerPush.properties 파일을 이동시킵니다. 이 파일에 핑거푸시의 App Key, Secret Key를 입력 후 저장합니다.


cordova_manual_for_android_3_4
4. FCM APP 생성

 


※ 기존 GCM 프로젝트가 있는 경우, 반드시 기존 프로젝트를 불러오기를 해서 사용해야 합니다.



1. Firebase사이트(https:/console.firebase.google.com) 에서 프로젝트 추가를 한 뒤, 추가한 프로젝트를 선택합니다.


manual_for_android_2-1




2. ‘설정 > 프로젝트 설정’ 으로 이동합니다.


manual_for_android_2-2






3. 서버(API)키와 발신자(Sender) ID를 확인할 수 있습니다.


cordova_manual_for_android_4_3




4. Firebase의 서버(API)키를 핑거푸시 사이트 설정화면에 입력합니다.


manual_for_android_3-1




5. Firebase의 발신자(Sender) ID를
프로젝트/android/app/src/main/asset/FingerPush.properties 파일에 입력 후
저장합니다.


cordova_manual_for_android_4_5





※ SDK 3.1.3 부터 Multi Sender ID를 지원합니다.
설정 방법은 콤마(,) 로 구분하여 키를 입력하면 됩니다.
GOOGLE_PROJECT_ID = FCM 발신자 ID 1,FCM 발신자 ID 2,FCM 발신자 ID 3




6. 프로젝트 메인 화면으로 이동 후, ‘Android 앱에 Firebase 추가’ 를 선택합니다.


manual_for_android_2-4




manual_for_android_2-5




7. Android 패키지 이름을 입력 후 앱 등록을 하고 ‘google-services.json’파일을 다운로드 합니다.

프로젝트/android/app 위치에 google-services.json파일을 이동시킵니다.


manual_for_android_2-6




8. Firebase의 서버(API)키를 google-services.json파일의 ‘current_key’에 입력합니다.


cordova_manual_for_android_4_8
5. 푸시 기능 추가

 

1. 안드로이드 핑거푸시 SDK를 여기에서 다운로드 받은 후 프로젝트/android/app폴더에 폴더명 ‘libs’ 를 만들어 핑거푸시 aar 파일을 추가합니다.


cordova_manual_for_android_4_5




2. 프로젝트/android/app/build.gradle 파일에 아래와 같이 작성하여 aar파일과 파이어베이스 라이브러리를 적용합니다.


cordova_manual_for_android_5_2




3. 프로젝트/android/app/src/main/AndroidManifest.xml 파일을 아래 사진과 같이 내용을 추가합니다.


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

 

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



fp_plugin_008




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


fp_plugin_009



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

7. 리액트네이티브 핑거푸시 플러그인 API Reference

 

핑거푸시 API의 기능과 변수, 결과값에 대한 정보는 ‘Guide’ > ‘API Reference’ > Android API Reference for AAR에서 확인할 수 있습니다.