이아임의 블로그

IONIC에서 데이터 베이스 연동은 많은 방법이 있지만, 그 중에서도 제일 간단한 firebase와 연동하는 방법을 설명하겠다.
간단한 예제로 로그인과 회원가입으로 연동하는 방법을 알려주도록 하겠다.

기본 프로젝트는 sidemenu 프로젝트로 생성한 걸로 시작하도록 한다.

들어가기 앞서 파이어베이스를 생성해주고 설정해주어야한다.
일단 터미널을 실행시키고 IONIC 프로젝트 폴더로 들어간다.
그리고 아래 명령어를 입력해주면 firebase가 깔리게 된다.

$ sudo npm install firebase angularfire2 --save

그 다음에는 파이어베이스 설정이다.

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

위 페이지에 접속해 파이어베이스를 생성해준다.

처음 들어가면 내가 생성한 프로젝트가 있고 그걸 클릭하면 위 사진과 같은 페이지가 나온다

Authentication을 눌러준 후에 로그인 방법으로 들어가면 파이어베이스에서 기본적으로 지원되는 로그인 방법들이 나온다. 여기서는 이메일/비밀번호만을 사용하니 마우스 커서를 올리고 수정을 해서 사용 설정을 해준다.

위 설정을 완료하고 나면 Database로 이동해 규칙으로 이동한 후, 어디서든 접속해서 수정할 수 있게 모든 설정을 true로 둔다. 그리고 게시 버튼을 누르면 적용이 완료된 것이다.

이제 프로젝트로 이동해서 파이어베이스 적용을 해보도록 하겠다.
일단 필자가 사용하는 기본 에디터 툴은 브라켓이다.
IONIC 프로젝트 폴더를 브라켓에서 오픈해준다.

기존 폴더에는 app.firebase.config.ts 가 없을 것이다. app 폴더에서 오른쪽 버튼 클릭해주고 파일 생성을 해준 다음 app.firebase.config.ts파일을 생성해주도록 한다.

그 다음 파이어 베이스 첫 화면에 웹/앱에 Firebase 추가하기 라는 곳으로 접속한다.

그러면 script가 뜨면서 config가 뜰텐데 그 안에 있는 내용만 복사해서 가져온다.

그리고 app.firebase.config.ts 파일 안에
export const FIREBASE_CONFIG = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: ""
}

이렇게 추가해주도록 한다.
위에 내용은 파이어베이스 홈페이지에서 복사한 config가 되겠다.

로그인과 회원가입을 통한 파이어베이스 구현이기 때문에 로그인 페이지와 회원가입 페이지를 추가해주도록 한다.
IONIC 프로젝트 폴더로 이동해서,

$ ionic g page login
$ ionic g page signup

그리고 데이터 베이스 연결하는 provider도 생성해주도록 한다.
굳이 provider에서 연결을 안해도 되지만 한번에 관리하기 편하기 때문에 따로 생성해주는 것이다.

$ ionic g provider auth

그리고 마지막으로 이건 폴더로 들어가서 직접 생성해줘야한다.
src폴더에 커서를 두고 폴더를 생성한 후 models 폴더를 추가, 그 안에 user.ts파일을 추가해준다.

추가를 하게 되면 위 사진처럼 페이지가 추가가 된 것을 확인할수 있다.

그리고 app.module.ts 파일로 이동해서 각각 import를 해주도록 한다.
만약에 app.module.ts에서 import를 안해주고 선언을 안해주면 사용이 불가능하다.

import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http'; // 통신을 위해 사용되는 Http 모듈 import
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { AngularFireModule } from 'angularfire2'; //엥귤러 파이어 모듈을 import
import { AngularFireAuthModule } from 'angularfire2/auth'; //엥귤러 파이어 Auth 모듈을 import ( 가입 및 로그인 )
import { AngularFireDatabaseModule } from 'angularfire2/database'; //엥귤러 파이어 데이터베이스 모듈을 import

import { FIREBASE_CONFIG } from './app.firebase.config'; // 파이어 베이스에 접속하기 위한 config 파일

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { LoginPage } from '../pages/login/login'; // 새로 생성한 login 페이지를 사용가능하게 import
import { SignupPage } from '../pages/signup/signup'; // 새로 생성한 signup 페이지 사용가능하게 import

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { AuthProvider } from '../providers/auth/auth'; // 새로 생성한 provider의 auth를 사용 가능하게 import

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage,
    LoginPage, // 페이지 추가
    SignupPage // 페이지 추가
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule, // Http 모듈 추가
    AngularFireAuthModule, // 모듈 추가
    AngularFireDatabaseModule, // 모듈 추가
    AngularFireModule.initializeApp( FIREBASE_CONFIG ), // 모듈 추가 ( 기본적으로 사용되는 모듈임으로 파베를 불러옴 )
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage,
    LoginPage, // 페이지 추가
    SignupPage // 페이지 추가
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    AuthProvider // provider 추가
  ]
})
export class AppModule {}

설명은 주석으로 달았고, 복사 붙여넣기해도 상관은 없지만 잘못될 경우 수정할 수 있을 실력이 되면
복붙 아니라면 자기 환경에 맞게 직접 타이핑이 좋다.

그리고 난 후에 아까 생성한 폴더로 models에 user.ts로 이동을 한다.
export interface User {
    email: string;
    password: string;
}

그리고 나서 위 코드를 추가해주고 저장을 하면 된다.
그러면 기본적인 파이어베이스 연동은 완료된 것이다.

로그인과 회원가입은 파트 2에서 진행하도록 하겠다.

ionic, 즉 아이오닉을 사용하기 위해서는 기본적으로 node.js가 필요하다.

https://nodejs.org/ko/

Node.js가 없다면 위 사이트에 접속해서 최신버전으로 다운받도록 한다.

다운을 받고 설치를 완료했다면 터미널에서 npm 명령을 사용할 수 있다.
맥에서 터미널을 실행하고

$ sudo npm install -g ionic cordova

명령어로 cordova와 ionic을 설치하도록 한다.
-g를 써주는 이유는 전역에 설치하기 위해서 써주는 것이고, sudo를 써주지 않으면 정상적으로 설치가 안될 수도 있다.

설치가 완료되고, Desktop으로 이동한다.

$ cd Desktop

이제 ionic 파일을 생성할 차례다.

$ ionic start newApp tabs

이렇게 명령어를 입력해주면 기본적으로 tabs이 생성되어 있는 프로젝트가 만들어진다.
ionic 명령어를 사용하고, start는 파일을 생성한다는 의미이다.
tabs는 기본적으로 tabs메뉴를 생성한 채로 프로젝트 생성.
sidemenu는 sidemenu를 기본적으로 생성한 채로 프로젝트 생성.
blank는 아무것도 없이 기본 home만을 생성한 채로 프로젝트 생성.

그리고 플렛폼을 만들어야한다.
프로젝트 파일 경로로 이동을 해야지 만들기가 가능하다.

$ cd newApp

이동을 한 후에

$ ionic platform add ios
$ ionic platform add android

이렇게 추가를 해주면 ios와 android 플렛폼 만들기를 완료한 것이다.

프로젝트 생성이 완료되었으니 이제 실행 명령어를 사용한다.

$ ionic serve
$ ionic serve --lab

위에 명령어로 실행하게 되면 기본적인 크롬 브라우저 창에서 뜬다.
하지만 아래 명령어로 실행할 경우 안드로이드, IOS, 윈도우에서 확인이 가능하게 지원되는 브라우저 창이 뜬다.

밑에 것을 주로 활용을 하고, 프로젝트를 그냥 저장을 하게 되면 ionic serve가 자동으로 인식을 하고 새로 빌드를 진행한다.