@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 셋업 ### 안드로이드 앱 생성 ![image.png](https://ipfs.busy.org/ipfs/QmNNL8cbCS13teD4WohpVnprpEdLb6GYn5FpDjBnig9mKW) 저는 우선 안드로이드용 앱을 만들 것이기 때문에 위 화면에서 안드로이드 앱을 생성합니다. ### 앱 패키지 이름 설정 및 앱 등록 ![image.png](https://ipfs.busy.org/ipfs/QmNPZRv6dDGvvLzXGwjDUG6XVjfR8RUbrmPYqwoCao8GQp) 조금 중요합니다. 앱 생성할 때, android package name을 react-native로 만든 package name과 동일하게 입력해야 합니다. react-native로 생성한 android앱을 Android Studio로 열어서 확인합니다. ![image.png](https://ipfs.busy.org/ipfs/QmT4uGe8sEF36y6hWhK9VvC2NQkMJonDaStjerPkTBBG1E) ### config 파일 다운로드 ![image.png](https://ipfs.busy.org/ipfs/QmeCTKpzGW3kBF1Kk3dbeLkgMUoHZgz5SwaFVSrhCQgcy1) 위 그림대로 config 파일을 다운로드 하고, react-native로 생성한 안드로이드앱의 app폴더 밑에 복사합니다. 위치에 주의하세요. 반드시 "app"폴더 밑에 위치해야 합니다. ### SDK 설정 ![image.png](https://ipfs.busy.org/ipfs/QmYBrXyiM6ez2poanAAmf2SmbidstmvyWHP8XJGd8cCkgx) 위 그림과 같이 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 태그 안에, 아래 내용을 내용을 추가합니다. ```

``` ### 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 getPackages() { return Arrays.asList( new MainReactPackage(), new RNFirebasePackage(), new RNFirebaseMessagingPackage() ); } 생략 ``` ### 앱 빌드 Android Studio에서 build.gradle sync하고 앱을 빌드합니다. (Build -> Make Build) 아래 그림과 같이 앱이 오류 없이 빌드 되어야 합니다. ![image.png](https://ipfs.busy.org/ipfs/QmciZaLaRaxX9Maabi4u4fAeiJCD2a9kTn3w196tMhTrLc) ### 앱 실행 마지막 설정단계로, Cloud Messaging 셋업이 잘 되었는지 확인합니다. ![Screenshot from 2019-05-22 23-37-58.png](https://ipfs.busy.org/ipfs/QmWz7VhKfZzmGNf8oQEB5SA1oDuVJq3fNPjwGyk6pHE38Z) Android Studio에서 AVD 가상 디바이스를 띄웁니다. 이제 앱 폴더로 이동하여 앱을 실행합니다. 먼저 터미널을 열어 모니터링(Metro Bundler)을 시작합니다. ``` $ yarn start ``` 다음으로 앱을 실행합니다. ``` $ react-native run-android ``` ![image.png](https://ipfs.busy.org/ipfs/QmWwtGAsggEmzxKkTF44M3rZcMSonvt7Gue2qiycrQ2t8i) Firebase 셋업 화면을 확인하면 아래와 같이 셋업이 완료됩니다. ![image.png](https://ipfs.busy.org/ipfs/QmNZTfraSVtsbPZHsnLf6BkrDAQQQBCRJCbhTze6GAGavF) --- 위 화면이 나오면 일단 안심하시면 됩니다. 다음글에서 메시지 테스트를 해 보겠습니다.

etainclub

Experts