🔥React Naitve 앱 제작기 #4 | FireBase 연동하기(AdMob, Database, Storage)

 

 

안녕하세요 바울랩 '최원범' 연구원입니다!

오늘은 React-native에 파이어베이스를 연동하여 Admob을 이용해 광고를 띄우는 과정을 다뤄 보도록 하겠습니다!

앱 내에서 광고를 사용하기위해 Admob을 사용하기로 하였는데요 Firebase에서 Admob을 지원하기도하고 DB와 Storage 또한 지원하는 Firebase를 사용하기로 결정하였습니다.

1. Firebase 프로젝트 생성하기

먼저 Firebase 프로젝트를 만들어 보도록 하겠습니다.
https://firebase.google.com 로 들어가서 콘솔로 이동을 누릅니다.

프로젝트 추가를 클릭해서 프로젝트를 만들겠습니다.

첫 번째 단계로 프로젝트 이름을 설정합니다.

두번째 단계로 애널리틱스 사용설정을 하는데요
무료로 제공되는 유용한 기능들이 많으니 사용 설정을 하고 다음으로 넘어갑니다.

마지막으로 애널리틱스 구성을하면 Firebase 프로젝트가 만들어집니다.

2. React-native와 연동하기

firebase에서 admob을 사용하기위해선
npm install @react-native-firebase/app 명령을 통해 라이브러리를 설치해줍니다.
그리고 프로젝트 폴더의 package.json으로 들어가면 의존이 추가된 모습을 볼 수 있습니다.

라이브러리가 설치 된 모습

@react-native-firebase/admob

바로 빌드를 하게 되면 빌드가 되지 않습니다!!
빌드를 하기전에 프로젝트와 Firebase를 연동하는 과정이 필요한데요
연동을 위해 만들었던 Firebase 프로젝트로 들어갑니다.

2.1 Android 연동하기

프로젝트에서 안드로이드 아이콘을 눌러줍니다.

위와같은 과정을 모두 마치면 firebase앱에 추가가 됩니다.
안드로이드 패키지 이름을 넣고 앱 등록을 해줍니다.

앱 등록을 하게되면 google-services.json을 다운로드 받을 수 있는데요,
json파일을 프로젝트폴더 > android > app 폴더안에 넣어줍니다.

 

 

안드로이드 프로젝트에 sdk를 추가하는 과정

그리고 마지막으로 SDK를 안드로이드 프로젝트에 추가하는 과정이 필요합니다.
먼저 프로젝트폴더 > android 폴더안에있는 build.gradle 에 다음과 같이 수정해줍니다.

체크표시한 부분들을 입력하고,

프로젝트 폴더 > android > app 폴더로 들어가서 다음과 같이 수정해줍니다.

먼저 위 두줄을 입력해 줍니다.
apply plugin: "com.android.application" 은 이미 입력이 되어있을 수 있습니다.

그리고 아래로 내려

dependencies에 한줄을 추가해줍니다.
저장을 한 후에 동기화를 해야 하는데요.

저는 프로젝트 > android폴더에서 ./gradlew clean 명령어를 통해 동기화를 했습니다.

firebase.json 파일의 모습

그리고 위와같은 형식의 firebase.json파일을 만들어주고 프로젝트 제일 최상위 폴더에 넣은 뒤 설치를 하게 되면

Firebase를 추가했다는 알림문구를 볼 수 있습니다.

2.2 iOS 연동하기

3. Admob 사용하기

Firebase를 사용하게된 이유는 Firebase에서 Admob을 지원하기 때문이었죠!
드디어 Admob을 사용해 보겠습니다.
npm install @react-native-firebase/admob 명령을 통해 라이브러리를 추가해 줍니다.
그리고 Google AdMob으로 접속하여 가입을 한 후 앱을 추가합니다.
React-native는 추후 iOS개발또한 진행할 수 있기 때문에
Android외에도 iOS 두개의 프로젝트를 만들어 주어야겠죠?

앱을 추가하고 난 후 다시 프로젝트로 돌아와 만들어둔 firebase.json에 id를 추가 해주시면 되는데요.

firebase.json 파일의 모습

각 앱 아이디는 Admob에서 앱을 선택하고 앱 ID를 복사하여 firebase.json 파일을 수정해줍니다.
이제 기본 세팅은 끝났습니다.

//Admob 컴포넌트
import React from 'react';
import {Platform, StyleSheet} from 'react-native';
import {BannerAd, BannerAdSize, TestIds} from '@react-native-firebase/admob';
import {SafeAreaView} from 'react-navigation';

function Admob() {
  return (
    <SafeAreaView style={style.container}>
    <BannerAd
      unitId={TestIds.BANNER}
      size={BannerAdSize.BANNER}
      requestOptions={{
        requestNonPersonalizedAdsOnly: true,
      }}
      onAdFailedToLoad={(error) => {
        console.error('Advert failed to load: ', error);
      }}
    />
    </SafeAreaView>
  );
}

const style = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
export default Admob;

function BaseCampIntro() {
  return (
    <View style={style.itemBox}>
      <Text style={style.title}>JejuCodingBaseCamp</Text> 
      <Image 
        source={require('./../images/camp_Intro.png')}
        style={{ width: '100%',height:500, resizeMode:'center', marginTop: 20}} 
      />
      <Image 
        source={{uri:'http://paullab.co.kr/line.png'}}
        style={{ width:'100%',height:200,resizeMode:'center'}} 
      />
    </View> 
    <Admob/>
  )
}

Test 광고 ID를 넣어 Banner단위 광고를 만들어 주고 컴포넌트 하나를 제작 한 후에 홈 화면에 띄워 주었습니다.

Admob Test광고가 잘 나온 모습을 보실 수 있습니다!
Test ID를 Admob에서 광고 단위를 만든 뒤 BannerID로 바꿔주시면 실제 광고가 출력 됩니다!

이미 만들어서 광고단위가 보이네요 아래 과정을 완료하면 생성됩니다!!

광고단위는 앱에서 광고단위탭으로 들어가 광고 단위 추가로 이동합니다.

저희는 배너광고를 원하니 배너를 선택해 줍니다.

광고단위 이름을 입력해주고 광고 단위 만들기를 클릭 하면 완료됩니다

다시 광고 단위탭으로 이동하여 만들어진 광고 단위를 클릭하면 위와같은 화면을 보실 수 있는데요 광고단위 ID를 프로젝트 Admob 컴포넌트의 TestID 대신에 문자열 형태로 넣어주시면 됩니다!

4. Firebase Database + Storage 이용하기

앱에서 주기적으로 업데이트되는 데이터들과 이미지 등을 관리하기위해 파이어베이스에서 제공하는 Real Time Database와 Storage를 사용하기로 하였습니다.
Firebase Real Time Database는 사실 실시간으로 데이터 동기화가 필요한 서비스에서 필요로하지만 간단한 데이터베이스로도 사용하는데 큰 문제는 없다고 생각되어 선택하였습니다.

Firebase 홈에서 Database탭으로 이동하고 아래로 내리면 위와 같은 화면이 나온다
데이터 베이스만들기를 눌러줍니다

보안규칙은 일단 잠금모드로 사용하도록 하였습니다.

클릭 몇번만으로 Firebase에서 제공하는 Cloud Storage를 만들 수 있었습니다.

스토리지에 디렉토리 구성을 하고 각 이미지의 URL과 토큰을 Database에 넣어주었습니다.

이미지를 Storage에 넣어주고 토큰을 포함한 URL을 database에 넣어주었습니다.

사용하기전에 Firebase에서는 계정에서 인증을 위한 토큰을 넣어주는 등의 보안을 위한 규칙을 작성 할 수 있는데요 write기능은 사용하지않고 read는 크게 보안이 필요없기 때문에

true로 간단하게 설정 해 주었습니다.

읽기 권한을 주고 데이터베이스 URL 뒤에 .json 을 붙여주어 결과값을 받은 모습입니다.
정상적으로 데이터를 받아왔습니다.
해당 DB 를 react-native app에서 사용하도록 하였습니다.
먼저 @react-native-firebase/database 라이브러리를 설치하고

import database from '@react-native-firebase/database';
async function data(params) {
  const ref = database().ref();
  let data = await (await fetch(ref + params + '.json')).json();
  return data;
}

export default data;

위와같이 파라미터만 넘겨 데이터를 받아올 수 있도록 간단한 함수를 만들었습니다.
데이터베이스에서 데이터를 읽거나 쓰려면 firebase.database.Reference의 인스턴스가 필요합니다.
database().ref() 를 통해 Reference를 만들어 줍니다. 그리고 위 Json 형태로 데이터를 받아와 사용을 할 예정이기 때문에 만들어진 ref에 params와 문자열 '.json' 을 붙여줍니다.

받아온 이미지 URL 데이터를 통해 Storage에 있는 이미지 또한 잘 출력되는 모습입니다.
다음글은 플레이 스토어(PlayStore) 배포로 찾아뵙겠습니다~!