Ionic 3 & Firebase 연동

Ionic과 Firebase를 이용하여 가장 기본적인 기능들이 들어간 간단한 하이브리드 앱을 만들어 보는 것을 목적으로 포스팅을 진행하기로 하였습니다. 

Firebase는 모바일 앱 개발 백엔드 서비스를 제공하는 BaaS(Backend as a Service ) 플랫폼으로 사용자 관리, 푸쉬 알림, 데이터베이스 등의 백엔드 기능을 API 형태로 제공하여 비용과 시간을 최소화하여 개발 할 수 있도록 도움을 줍니다.

이번 포스팅에서는 Ionic 프로젝트에서 Firebase를 사용하는 방법과 Firebase 설정에 대한 부분을 다룰 것 입니다.

---

Ionic 프로젝트에 Firebase 설치

Ionic 프로젝트 경로에서 다음의 명령어를 통해 Firebase 및 Angular 공식 라이브러리인 AngularFire2를 설치 할 수 있습니다.

$ npm install angularfire2 firebase --save

What is AngularFire2 ?

1. Observable based: rxjs, angular, firebase를 사용

2. Realtime bindings: Object 또는 List를 데이터베이스와 동기화

3. Authentication: 인증 상태를 실시간으로 모니터링

Firebase Console에서 프로젝트 생성 및 설정

Firebase Console에 접속하여 Ionic 프로젝트와 연동할 Firebase 프로젝트를 생성 할 수 있습니다.

Firebase Console Url: https://console.firebase.google.com/?hl=ko 

[Step1] Firebase 프로젝트 생성

프로젝트 추가를선택 한 후 프로젝트 이름을 입력하고 국가를 선택하면 프로젝트를 생성 할 수 있습니다.

[Step2] Firebase Config 정보 확인하기

프로젝트 생성과 동시에 나오는 화면에서 '웹 앱에 Firebase 추가' 로 들어가면 해당 Firebase에 대한 고유한 Config 정보를 확인 할 수 있습니다. 이후 Ionic 프로젝트에 추가해 주어야할 정보 입니다.

[Step3] Database 보안규칙 변경

Realtime Database - 규칙 카테고리에서 접근 권한에대한 변경을 수행 할 수 있습니다. 아래와 같이 보안 규칙을 변경하고 게시 버튼을 클릭하면 우측 상단에 '규칙을 게시했습니다.' 라는 메세지가 뜨게 됩니다.

Ionic 프로젝트에 Firebase 세팅

src/app/app.firebase.config.ts 

export const FIREBASE_CONFIG = {
    apiKey: " ",
    authDomain: " ",
    databaseURL: " ",
    projectId: " ",
    storageBucket: " ",
    messagingSenderId: " "
};

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
 
//Firebase Module
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireModule } from 'angularfire2';
 
//Firebase Config
import { FIREBASE_CONFIG } from './app.firebase.config';
 
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
 
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
 
@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireDatabaseModule,
    AngularFireAuthModule,
    AngularFireModule.initializeApp(FIREBASE_CONFIG)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}
 

Firebase Module과 FIREBASE_CONFIG를 Import하고 Module들을 NgModule의 imports에 등록시켜 줍니다. AngularFireModule, AngularFireAuthModule, AngularFireDatabaseModule은 Firebase 로그인, Database접근 등을 위한 필수 모듈입니다. 이제 Ionic & Firebase 앱 제작을 위한 가장 기본적인 세팅이 완료 되었습니다.

---

이번 포스팅에서 Ionic 프로젝트에 Firebase를 설치하고 Firebase의 Config와 Module을 추가하여 연동하는 방법을 소개하였습니다. 다음 포스팅에서는 로그인 기능을 구현해보도록 하겠습니다.