Firebase 연동

 

firebase연동

설치

react-native-firebase 패키지에서 제공하는

• react-native-firebase/auth
• react-native-firebase/firestore
• react-native-firebase/storage
  등을 사용하려면
  react-native-firebase/app 모듈 설치가 되어있어야한다.

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

firebase

​ 안드로이드 설정

1. firebase 콘솔에서 android 앱 추가
   firebase console > project settings > General > Your apps > 안드로이드 아이콘 클릭
   
2. packagename 입력(android/app/src/main/AndroidManifest.xml 에 package에 있음 )
3. google-services.json 다운
   android/app에 다운받은 google-services.json를 넣기
   
4. android/app/google-services.json .gitignore에 추가
5. android/build.gradle 에 추가

6. buildscript { 
     repositories { 
       // Check that you have the following line (if not, add it): google() 
       // Google's Maven repository 
     } 
     dependencies {
           ... 
           // Add this line classpath 
           'com.google.gms:google-services:4.3.6' 
           // 추가 
         }
   }

7. android/app/build.gradle 추가

8. apply plugin: 'com.android.application' 
   // Add this line apply plugin: 'com.google.gms.google-services' 
   dependencies { 
     // Import the Firebase BoM 
     implementation platform('com.google.firebase:firebase-bom:28.0.0') 
     // Add the dependency for the Firebase SDK for Google Analytics
     // When using the BoM, don't specify versions in Firebase dependencies 
     implementation 'com.google.firebase:firebase-analytics' 
     // Add the dependencies for any other desired Firebase products 
     // https://firebase.google.com/docs/android/setup#available-libraries 
   }

9. *** 이슈1. 설정 후 동기화오류남 (node_modules에 firebase가 없는듯?)

10. Error: Unable to resolve module react-native-firebase from D:\workspace_react\saessak\src\screen\CameraRoll.js: react-native-firebase could not be found within the project or in these directories: node_modules If you are sure themodule exists, try these steps: 
    1. Clear watchman watches: watchman watch-del-all 
    2. Delete node_modules(rm -rf node_modules/) and run npm install 
    3. Reset Metro's cache: npm start --reset-cache 4. Remove the cache: rm -rf /tmp/metro-*

11. gradlew clean

storage, database 사용

설치

# Install the storage module
npm add @react-native-firebase/storage
# Install the database module
npm add @react-native-firebase/database

스토리지 규칙이다. auth된 사용자만 써야한다는 규칙

Cloud Storage 위치 설정
기본적으로 이 규칙은 인증된 사용자의 모든 읽기 및 쓰기를 허용합니다.

데이터 구조를 정의한 후 데이터에 보안을 적용하는 규칙을 작성해야 합니다.자세히 알아보기

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

테스트를 하기위해 잠시 그 규칙 해제 >>> 돌려놓기

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write
    }
  }
}

한국은 asia-northeast3라고 한다. 설정 (다른나라로 하면 느려지는 현상이 생김 _ 지구한바퀴를 돌아야해서... )

import firebase from '@react-native-firebase/storage'

*** 이슈2. 나는 import firebase from 'react-native-firebase 이렇게 하면 오류남 .. ? 이유는 모름

그래서 따로 storage를 지정

  const uploadImage = (source, imageUri) => {
    const ext = imageUri.split('.').pop(); // Extract image extension
    const filename = `${uuid()}.${ext}`; // Generate unique name
    const imgRef = firebase.storage().ref(`saessak/${filename}`);
    const unsubscribe = imgRef.putFile(imageUri)
      .on(
        firebase.storage.TaskEvent.STATE_CHANGED,
        async snapshot => {
          let state = {};
          state = {
            ...state,
            progress: (snapshot.bytesTransferred / snapshot.totalBytes) * 100 // Calculate progress percentage
          };
          if (snapshot.state === firebase.storage.TaskState.SUCCESS) {
            console.log('upload success');
            // unsubscribe the event
            unsubscribe();
            // update the image url
            let url;
            await imgRef.getDownloadURL()
            .then((response) => {
              console.log('get url response', response);
              url = response;
            })
            .catch(error => {
              console.log('Failed to get url', error);
            })
            // update user info, avatar, and name
            console.log('user avatar url', url);
            updateAvatarState({ userId, avatarUrl: url });
            // refresh the screen
            setAvatarUrl(url);
          }
        },
        error => {
          console.log('AccountEditScreen uploading error', error);
          // alert for failure to upload avatar
          Alert.alert(
            t('AccountEditScreen.updateErrorTitle'),
            t('AccountEditScreen.updateError'),
            [
              { text: t('confirm') }
            ],
            { cancelable: true },
          );
        }
      );
  };

• Storage의 reference를 가져오는 부분은 Firestore와 동일합니다.
  const imgRef = firebase.storage().ref(avatar/${filename});
  위 Storage구조를 보면 최상위 디렉터리 밑에 avatar라는 폴더가 있습니다. imgRef는 그 폴더 밑에 임의로 생성한 이미지 이름을 가리키게 됩니다.
• putPile함수를 이용하여 이미지를 Storage에 저장합니다.
• 이미지를 Storage에 저장만 하고 끝나는게 아닙니다. 사용자별로 저장된 이미지의 위치를 DB에 기록해서 필요할 때마다 불러와야 합니다. 그래서 putFile이 이미지 업로드할 때까지 기다립니다.
• firebase.storage.TaskState.SUCCESS부분에서 업로드가 성공적이면, Storage에 저장된 이미지의 다운로드 경로를 가져옵니다. imgRef.getDownloadURL()
• 마지막으로 이미지 경로를 제대로 가져오면 사용자 정보(DB)에 저장된 아바타 이미지 경로를 저장합니다.

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;