React-Native 이타인클럽 앱 Firebase Cloud Messaging Setup

Hive account@anpigon님께서 나중에 작업할 때 참고도 되시라고, 그리고 저도 까먹기 전에 정리하는 차원에서 설정 방법 정리합니다. 조언을 해주신 Hive account@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>
        
        <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 셋업 화면을 확인하면 아래와 같이 셋업이 완료됩니다.

---

위 화면이 나오면 일단 안심하시면 됩니다. 다음글에서 메시지 테스트를 해 보겠습니다.