[IONIC] Firebase 연동하기

Firebase 목록

ionic 차례

프로젝트 생성

$ ionic start first-project blank
$ cd first-project
$ npm install firebase --save

 

Firebase 프로젝트 생성

[FIREBASE] 호스팅 생성하고 배포하기

Firebase 프로젝트를 생성하고 웹앱을 만듭니다.

그리고 realtime database도 만듭니다.

프로젝트 설정 > 일반 > 만들어진 웹앱 > Firebase SDK snippet에서 CDN을 선택해서 firebaseConfig 부분을 복사합니다.

그리고 src/app/environment.ts 파일을 만듭니다.

 

src/app/environment.ts 생성

export const FIREBASE_CONFIG = {
    apiKey: "xxxxxxxxx",
    authDomain: "xxxx-48894.firebaseapp.com",
    databaseURL: "https://xxxx-48894.firebaseio.com",
    projectId: "xxxx-48894",
    storageBucket: "xxxx-48894.appspot.com",
    messagingSenderId: "xxxxxxxxxxx",
    appId: "1:xxxxxxxxxxxx:web:abce7642277f6d7e325beb",
    measurementId: "G-LFHTF05MPQ"
};

export const snapshotToArray = snapshot => {
    let returnArray = []
    snapshot.forEach(element => {
        let item = element.val()
        item.key = element.key
        returnArray.push(item)
    });
    return returnArray
}

src/app/app.component.ts 

....
import * as firebase from 'firebase';
import { FIREBASE_CONFIG } from './environment'

....
export class AppComponent {
  constructor(
    ....
  ) {
    this.initializeApp();
  }

  initializeApp() {
    ....
    firebase.initializeApp(FIREBASE_CONFIG)
  }
}

 

src/app/pages/home/home.ts

....
import * as firebase from 'firebase';
import { FIREBASE_CONFIG, snapshotToArray } from '../../app/environment'

....
export class MainPage implements OnInit {

    item = []
    ref = firebase.database().ref('os/')

    constructor(
        ....
    ) { 
        this.ref.on('value', res => {
            console.log(snapshotToArray(res))
        })
    }

    ngOnInit() {
    }
}

ionic 차례

Firebase 목록