Edited at

FirebaseのデータベースをRealtime DatabaseからCloud Firestoreに移行

More than 1 year has passed since last update.


Cloud FirestoreはRealtime Databaseの進化版

Firebaseから取得したデータをタイムスタンプの降順で並び替えて表示する方法(DESC)で、

Angular5でRealtime Databaseを使って、アプリを作り始めた。

でも、どうやらCloud Firestoreの方がイイ感じらしいので、移行する事にした。

Cloud Firestore[Beta]ってのが気になるけど、趣味アプリなのでOK。気にしない!


Realtime DatabaseとCloud Firestoreの違い

どういう違いがあるのかは、ここに書いてあった。

https://firebase.google.com/docs/firestore/rtdb-vs-firestore?authuser=0

どっちも同じNoSQLデータベースだけど、Cloud Firestoreの方が拡張性の高い進化版で、

β版卒業したら、Realtime Databaseより信頼性も上がる予定らしい。

料金体系も少し違うらしい。

https://firebase.google.com/pricing/?authuser=0

・Realtime Database:帯域幅とストレージにのみ課金

・Cloud Firestore:帯域幅とストレージに加えて、読み込み/書き込み/削除のリクエスト数も、課金対象。


とにかく始めてみる

Cloud Firestoreは、実用にはまだ早いとかって話を見たけど、

なんせ、使ったことが無いのでよくわからない。まずは始めてみる事にした。


FirebaseのDBデータ(Realtime Database)

スクリーンショット 2018-01-04 17.57.28.png


FirebaseのDBデータ(Cloud Firestore)

Realtime Databaseと同じデータ構造を定義。

スクリーンショット 2018-01-04 17.57.58.png


Angularのソース修正

angular/angularfire2のライブラリを使ってるので、そちらの利用モジュール、コンポーネントを変更した。

・読み込みモジュールの変更


src/app/app.module.ts

 import { YellModule } from './ui/yell/yell.module';

import { ProfileModule } from './ui/profile/profile.module';

import { AngularFireModule } from 'angularfire2';
-import { AngularFireDatabaseModule } from 'angularfire2/database';
+import { AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireAuthModule } from 'angularfire2/auth';

import { AgmCoreModule } from '@agm/core';
registerLocaleData(localeJa);
YellModule,
ProfileModule,
AngularFireModule.initializeApp(environment.firebase),
- AngularFireDatabaseModule,
+ AngularFirestoreModule,
AngularFireAuthModule,
environment.production ? ServiceWorkerModule.register('/ngsw-worker.js') : [],
MDBBootstrapModule.forRoot(),


・データベースのコンポーネントを変更

・APIで用意されているorderBy()で、descソートが使えるようになった

・ID自動割り当てのデータ追加が、push()→add()に変わった


src/app/service/yell/yell.service.ts

 import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Observable';
import * as moment from 'moment';

+import { AngularFirestore } from 'angularfire2/firestore';
-import { AngularFireDatabase } from 'angularfire2/database';

import { Yell } from '../../model/yell';

@Injectable()
export class YellService {

- constructor(private db: AngularFireDatabase) { }
+ constructor(private db: AngularFirestore) { }

getMoments(): Observable<Yell[]> {
- return this.db.list<Yell>('/yells', ref =>ref.orderByChild('createdAt')).valueChanges().map((yells) => yells.reverse());
+ return this.db.collection<Yell>('yells', ref => ref.orderBy('createdAt', 'desc')).valueChanges();
}

addYell(yell: Yell) {
yell.createdAt = moment(yell.createdAt).format('YYYY-MM-DD HH:mm:ss')
- this.db.list<Yell>('/yells').push(yell);
+ this.db.collection<Yell>('/yells').add(yell);
}
}


作成中のアプリ。

Yandle