Angular９とFirebaseでブログを作ってみる５（Firestoreからデータを取得して表示してみる）

前回、ブログ一覧／詳細画面のガワだけ作りました。

今回は、実際にFirestoreからデータを取得して表示してみたいと思います。

Firebase側の準備

Firestoreの開始

コンソールから「Database」を選択します。

なんかGCP上で設定してくださいと出ました。。

エンティティ画面に飛ぶので「ネイティブモードに切り替える」を選択します

ネイティブモードに切り替えます

切り替え完了後、Firebase側に戻ると、Firestoreが見れるようになります。

データの投入

前回のサービスの作成で作成したインターフェースと同じ型でデータを投入します

試しに「Blogs」コレクションを作成し、以下のようなドキュメントを追加します。

セキュリティルールの設定

いまのところ、Firebase Storageと同様に読み取り専用にしておきます

管理画面作ったり、見えちゃまずいデータを登録する必要が出たときにルールを再検討したいと思います。

Angular側の設定

※AngularFireの設定自体はこちらで実施済みです。

AngularFirestoreの設定

手順に書いてある通りに設定します

src/app/app.module.ts

・・・
import { AngularFirestoreModule  } from '@angular/fire/firestore';

@NgModule({
  ・・・
  imports: [
    ・・・
    AngularFirestoreModule ,

サービスからFirestoreにアクセス

• this.firestore.collection<Blog>('blogs').get()でblogsコレクション内のドキュメントを取得します
• this.firestore.collection<Blog>('blogs').doc(docId).get()でblogsコレクション内の指定IDのドキュメントを取得します
• 今回は一覧／詳細ともに画面表示時に1発で読み込めればよいので、subscribeせずtoPromise()で呼びます

src/app/blogs/blogs.service.ts

import { Injectable } from '@angular/core';
import { Blog } from 'src/types/blog.interface';
import { AngularFirestore, QueryDocumentSnapshot, DocumentData } from '@angular/fire/firestore';

@Injectable()
export class BlogsService {
  constructor(private firestore: AngularFirestore) { }

  async getBlogs(): Promise<Blog[]> {
    const data = await this.firestore.collection<Blog>('blogs').get().toPromise();
    return data.docs.map<Blog>(doc => this.toBlog(doc));
  }

  async getBlog(docId: string): Promise<Blog> {
    if (docId) {
      const doc = await this.firestore.collection<Blog>('blogs').doc(docId).get().toPromise();
      return this.toBlog(doc);
    } else {
      return null
    }
  }

  private toBlog(doc: QueryDocumentSnapshot<DocumentData>) {
    // ドキュメントフィールドにIDがないため、ドキュメントIDを付与したデータに変換して返却
    return Object.assign({ id: doc.id }, doc.data()) as Blog;
  }
}

• コンポーネント側の修正
  • 一覧は前回のままでOK
  • 詳細は前回から微妙に修正します
    • getBlogの引数をNumber(id)としてましたが、IDは文字列なのでNumber消します

src/app/blogs/detail/detail.component.ts

  ・・・
  this.detail = await this.blogsService.getBlog(id);
  ・・・

こんな感じになりました

ブログ一覧

ブログ詳細

まとめ

これでFirestoreからデータをとれるようになりました！
次回はブログ詳細をもっとリッチに表示できるようにしていこうかなと思います！

（追記）
Angular９とFirebaseでブログを作ってみる６（ngx-markdownでブログ内容をリッチに表示できるようにする）