[React Native] Android 알람 구현하기 1(Push notification)-firebase

 현재 진행중인 앱 프로젝트에서 메세지가 오거나 매칭이 완료되면 알람이 오는 기능을 구현하고 싶었다.

 

그래서 한번 배워보았다.

 

firebase를 사용하였따

 

---

1. 프로젝트 생성

 

npx react-native init [파일명]


ex)
npx react-native init hyukpush

 

 

2. 'local.properties' 파일 생성 또는 Android Studio로 들어가면 자동생성됩니당

 

android폴더에 'local.properties'파일생성하고

 

sdk.dir=/Users/hyukyun/Library/Android/sdk

 자신의 sdk파일 경로를 써주면 된다

 

 

3. firebase 모듈 설치

# Using npm
npm install --save @react-native-firebase/app

# Using Yarn
yarn add @react-native-firebase/app

 

4. firebase 프로젝트생성

 

 프로젝트 추가를 눌러서 그냥 기본값으로 설치한다. 

Firebase 메인페이지

해당 프로젝트에 들어가서 

프로젝트 내 앱

+ 버튼을 누른다

 

플랫폼 선택

좌측부터 ios, android, 웹, unity이다. 우리는 귀여운 곤충모양 android를 선택하면 된다

 

앱등록

패키지 이름은 'rn project'/ android/ app/ src/ main/AndroidManifest.xml에 들어가면

 

AndroidManifest.xml

 2번째줄 보면 package="~~~"가 있다.  ~~~가 Android 패키지 이름이다.

나의 패키지 이름은 hyukpush이다. 

주의! 중복이 안되는것 같다 !!

밑에 선택사항은 해당되면 하면 된다.

 

 

SHA-1 하는법은 터미널 창에서 맞는 운영체제에 맞게 아래를 입력하면 된다.

 

Window

keytool -list -v \
-alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore

Mac/Linux

keytool -list -v \
-alias androiddebugkey -keystore ~/.android/debug.keystore

 

 

구성 파일(google-services.json) 다운로드

 다운을 받아서 /android/app에 넣어주면 된다. (위 사진같은 경우는 Android Studio다)

 

SDK 추가

SDK추가 같은 경우는 자바와 Kotlin만 설명이 돼있다. 위에거를 추가하면 안된다 !!

그러니 그냥 다음다음 하고 완료하면 된다

 

5. Firebase Android Setup

 

/android/build.gradle 파일로간다.

 

buildscript {
  dependencies {
    // ... other dependencies
    classpath 'com.google.gms:google-services:4.3.3'
    // 위에줄 추가!! --- /\
  }
}

위처럼 추가하고

 

/android/app/build.gradle 파일로 가서

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // <- 이 줄만 추가

 

 

 

 

 요렇게 까지하면 Android Firebase 설정은 됐다 그러나 rn에서도 푸쉬를 구현하기 위해서는 react-native-push-notification을 써야했다.

다음시간에 다뤄보도록하자.

 

다함께 열코~!~!

 

 

참고 사이트

rnfirebase.io

React Native Firebase | React Native Firebase