[ionic] firebase 사용하기

[ionic] firebase 사용하기

firebase에 가입합니다. https://www.firebase.com
app 주소를 확인합니다.

index.html 에 아래 내용을 추가합니다.

   <!--Firebase --> 
  <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
  <!-- AngularFire -->
  <script src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>

js 파일을 수정합니다.

import {Page} from 'ionic-angular';

@Page({
  templateUrl: 'build/pages/getting-started/getting-started.html'
})
export class GettingStartedPage {
 
 
  constructor() {
    this.key;
    this.val;
    this.myDataRef = new Firebase("https://YOUR_APP.firebaseio.com/sidemenu/");
    this.displayMsg('msg changed');
    //this.msg = '';

    this.myDataRef.on('child_added',
      (snapshot) => {
        var msg = snapshot.val();
        this.displayMsg(msg.name);
      }
    )
  }

  displayMsg(msg) {
    this.msg = msg;
  }

  sendFirebase() {
    let name = this.key;
    let text = this.val;
    this.myDataRef.push({ name: name, text: text });


  }
}

버튼을 누르면 두 필드에 있는 내용을 firebase에 저장합니다.

<ion-item>
    <ion-label floating>KEY</ion-label>
    <ion-input [(ngModel)]="key" type="text"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label floating>VAL</ion-label>
    <ion-input [(ngModel)]="val" type="text"></ion-input>
  </ion-item>
  <button (click)="sendFirebase()">send firebase</button>
  <ion-item>
    <ion-label floating>MSG</ion-label>
    <ion-input [(ngModel)]="msg" type="text"></ion-input>
  </ion-item>

변경이 발생하면 해당 내용을 <ion-input [(ngModel)]="msg" type="text"></ion-input> 에 출력합니다.