React-Native 이타인클럽 앱 Firebase Cloud Messaging Setup
0 comments
@anpigon님께서 나중에 작업할 때 참고도 되시라고, 그리고 저도 까먹기 전에 정리하는 차원에서 설정 방법 정리합니다. 조언을 해주신 @jacobyu님께도 고마움을 전합니다.
작업은 React-Native로 생성한 이타인클럽 앱에서 Firebase를 이용한 push message 보내는 내용입니다. 분량상 일단 설정 방법을 먼저 올립니다.
For non-Korean users, I attached all the detail images, so you can follow this test.
Firebase Cloud Messaging 셋업
안드로이드 앱 생성
저는 우선 안드로이드용 앱을 만들 것이기 때문에 위 화면에서 안드로이드 앱을 생성합니다.
앱 패키지 이름 설정 및 앱 등록
조금 중요합니다.
앱 생성할 때, android package name을 react-native로 만든 package name과 동일하게 입력해야 합니다.
react-native로 생성한 android앱을 Android Studio로 열어서 확인합니다.
config 파일 다운로드
위 그림대로 config 파일을 다운로드 하고, react-native로 생성한 안드로이드앱의 app폴더 밑에 복사합니다. 위치에 주의하세요. 반드시 "app"폴더 밑에 위치해야 합니다.
SDK 설정
위 그림과 같이 Android Studio에서 설정을 합니다. 단, 위와 같이 정식 메누얼대로 했을 때, 오류가 발생하여 다음과 같이 "app"폴더 밑의 build.gradle 파일을 변경합니다.
dependencies {
implementation project(':react-native-firebase')
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
implementation "com.facebook.react:react-native:+" // From node_modules
implementation 'com.google.firebase:firebase-core:16.0.7'
implementation "com.google.android.gms:play-services-base:16.0.1"
implementation "com.google.firebase:firebase-messaging:17.4.0
}
apply plugin: 'com.google.gms.google-services'
위 코드를 보면 firebase-core의 버전이 16.0.9가 아니라 16.0.7입니다. 그리고 추가로 2개의 sdk 설정을 추가했습니다.
AndroidManifest.xml 수정
application 태그 안에, 아래 내용을 내용을 추가합니다.
<application>
<service android:name="io.invertase.firebase.messaging.RNFirebaseInstanceIdService">
<intent-filter>
<action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
</intent-filter>
</service>
(html comment removed: For background messaging )
<service android:name="io.invertase.firebase.messaging.RNFirebaseBackgroundMessagingService" />
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
MainApplication.java 파일 수정
MainActivity.java 파일이 아니라 MainApplication.java파일을 아래와 같이 수정합니다. new RNFirebaseMessagingPackage()
만 추가합니다. 필요한 패키지도 import합니다.
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNFirebasePackage(),
new RNFirebaseMessagingPackage()
);
}
생략
앱 빌드
Android Studio에서 build.gradle sync하고 앱을 빌드합니다. (Build -> Make Build)
아래 그림과 같이 앱이 오류 없이 빌드 되어야 합니다.
앱 실행
마지막 설정단계로, Cloud Messaging 셋업이 잘 되었는지 확인합니다.
Android Studio에서 AVD 가상 디바이스를 띄웁니다.
이제 앱 폴더로 이동하여 앱을 실행합니다. 먼저 터미널을 열어 모니터링(Metro Bundler)을 시작합니다.
$ yarn start
다음으로 앱을 실행합니다.
$ react-native run-android
Firebase 셋업 화면을 확인하면 아래와 같이 셋업이 완료됩니다.
위 화면이 나오면 일단 안심하시면 됩니다. 다음글에서 메시지 테스트를 해 보겠습니다.
Comments