[자료 찾기] react native expo로 firebase 사용하기

스토리지가 필요한 앱을 만들 수 있어야 가능한 범위가 늘어나고,

주로 firebase(firestore)나 mongoDB 를 쓰지않을까 싶어 미리 자료를 모아두자

EXPO firebase 문서

• https://docs.expo.io/guides/using-firebase/
• expo install firebase로 SDK 설치
• import * as firebase from 'firebase';

SDK 기본 설정 config

import * as firebase from 'firebase';

// Optionally import the services that you want to use
//import "firebase/auth";
//import "firebase/database";
//import "firebase/firestore";
//import "firebase/functions";
//import "firebase/storage";

// Initialize Firebase
const firebaseConfig = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
  appId: "app-id",
  measurementId: "G-measurement-id"
};

firebase.initializeApp(firebaseConfig);

추가로 파이어베이스 저장소의 접근 규칙에 다음처럼하고 실제 앱을 출시했을 때는 규칙 검토를 해야한다.
firebase 샘플 규칙

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

데이터 저장 및 업데이트 받기

• (가정) 모든 사람들이 볼 수 있도록 최고 점수가 Firebase에 저장되는 게임을 만들고 있다

(상황1) 최고점수를 갱신하여 firebase에 저장해야할 경우

function storeHighScore(userId, score) {
  firebase.database().ref('users/' + userId).set({
    highscore: score
  });
}

(상황2) 다른 클라이언트가 특정 사용자의 최고 점수에 대한 업데이트를 수신하기를 원한다
Firebase를 사용하면 특정 데이터 참조에 리스너를 설정하고 데이터가 업데이트 될 때마다 알림을 받을 수 있다.
아래 코드는 최고 점수가 업데이트 될 때마다 콘솔에 인쇄됩니다.

setupHighscoreListener(userId) {
  firebase.database().ref('users/' + userId).on('value', (snapshot) => {
    const highscore = snapshot.val().highscore;
    console.log("New high score: " + highscore);
  });
}

---

Expo, firebase를 이용한 다른 설명글

• https://medium.com/react-native-seoul/react-native-프로젝트에서-expo를-이용한-googlesignin-이용기-acd0404d1977

기존 위의 내용을 봐도 되지만, ios, android 설정이나 기타 설치 내용에 대해서 외부링크로 걸려있어서 하나로 모아있는 가이드를 더 찾아봤다.

0. 데모 프로젝트

• git clone https://github.com/dooboolab/hackatalk-mobile.git
• https://github.com/dooboolab/hackatalk-mobile

1. 파이어베이스 프로젝트 생성

• SignIn Firebase console (Google account가 필요합니다)
• Create Firebase project (프로젝트 이름과 애널리틱스 위치를 설정합니다)
• Click the firebase project (생성된 프로젝트를 클릭합니다)

2. 플랫폼 추가

• Add iOS applications (iOS 어플리케이션을 추가)
• Download GoogleService-Info.plist to working project root path (해당 파일을 다운로드 받으시고, 작업중인 프로젝트 최상위 패스에 추가 합니다)
• Skip other steps (다른 스탭들은 스킵 하셔도 됩니다)
• Add android application (안드로이드 어플리케이션을 추가)
• Set android package id (app.json에 사용하게될 android package id를 원하는대로 셋팅)
• Download google-services.json to hackatalk project root path (해당 파일을 다운로드 받으시고, 작업중인 프로젝트 최상위 패스에 추가 합니다)

3. 사용하려는 인증 방법 추가

• Turn On Google Authentication (인증 방법 추가)

4. 프로젝트에 필요 라이브러리 설치

• npm install -g expo-cli

5. 프로젝트 적용
   Set app.json (app.json 셋팅)

   • expo.android.package 의 경우 1번 단계에서 생성한 package name을 넣는다.
   • expo.ios.bundleIdentifier 의 경우 1번 단계에서 생성한 bundle identifier를 넣는다.

6. 프로젝트 실행해서 확인(1)

• npm run android 또는 npm run ios
• 하지만 google signIn의 경우 눌러보면 alert 가 뜬다. 이는 expo가 아닌 standalone 모드에서만 작동 가능하여 나오는 메시지이며. 현재 expo-google-sign-in 을 사용 중인데, expo 버전이 올라가면서 정책이 변경되었다.

7. Standalone 모드를 이용하여 Google SignIn 해결

• expo fetch:android:hashes
  를 입력하면

  for example:
  Google Certificate Fingerprint:     sd:fs:df:sd:fs:df
  Google Certificate Hash (SHA-1):    sdfsdfsdfsdf
  Google Certificate Hash (SHA-256):  sdfsdfsdfsdfasdasdasd

  가 나오는데

• SHA-1 or SHA-256 을 2번 단계에서 생성한 Firebase Android Project SHA 인증서 지문에 추가.

• Set expo.android.config.googleSignIn.certificateHash in app.json file (app.json 파일에 추가한 SHA 인증서 지문을 설정)

8. 마지막 프로젝트 빌드

• expo build:android
• expo build:ios

https://expo.io/artifacts/:uuid 형태로 생성된 apk 혹은 ipa가 생성된다.