Firestore × Bigquery × Data Portalを使って、Web上でデータを自動更新するグラフを作る方法

＜導入＞

Firestoreに色々とデータを記録して便利に使いこなせるようになったが、売上データを可視化して分析したくなった。

あなただったらどのように実現しますか？

候補：

• データを直接CSVで取り出して、エクセルやスプレッドシートなどのツールで解析するのも１つの手だ。ただ、これだと期間の指定が柔軟にできないし、何よりFirestoreのデータが更新されるたびに毎回CSVファイルとして抽出する作業はとても面倒だ。

• GASを使って、Google Spredsheetに表示する方法。Functionによるデータ抽出、GASでデータの加工プログラムの作成など必要な作業が多すぎる、更にメンテナンスまで考えると労働コストは計り知れない。

• BigQuery x Data portal (Data studio)自動でアップデート分のデータを抽出してくれ、Webに埋め込んだグラフにも自動で反映。期間の指定も用意されている機能で実現できるので効率がとても良い。

上記の考察により、今回はFirestore × BigQuery × Data portalのツールセットで「FirestoreのデータをWebにグラフとして埋め込み、データの更新に応じて自動的にグラフも更新されるアプリ」を作成する。

これは実装さえしてしまえば後のメンテナンス性はかなり高いのだが、この環境を作る方法がかなり複雑だったので、皆さんにメモとして共有をします。

少しでも皆さんの開発が効率的になれば幸いです。

＜この記事を読むとできるようになること、成果物＞

「FirestoreのデータをWebにグラフとして埋め込み、データの更新に応じて自動的にグラフも更新されるアプリ」

実際に作成するWebに埋め込んだグラフ：

＜ターゲットのデータの構成＞

売上データが以下のコレクションに記録されている状態

Restaurant/{各ドキュメント}/orders_fin

フィールドデータ：

• completedTimestamp : timestamp（記録した時間）

• Total : number（売上金額）

時間（日付）に対する売上金額をBigQueryに抽出し、Data portalで可視化していく。

＜手順＞

●インストール

以下にアクセスし、Stream Collections to BigQueryをインストールする

Firebase Extensions | Stream Collections to BigQuery
Use this extension to export the documents in a Cloud Firestore collection to BigQuery. Exports are realtime and…firebase.google.com