LoginSignup
5
4

More than 3 years have passed since last update.

Firebase CloudFirestoreの使い方を初心者が解説してみた

Last updated at Posted at 2020-12-19

Firebase CloudFirestoreとは?

googleが提供してるバックエンドで機能するデータベースサービス。
SQLの知識無くても、データベースの作成、データの格納が簡単に行えるので、データベースの構築時間が大幅に削減できるという便利ツールです。

このFirebase CloudFirestoreを使って、LINEから送られてきたデータを格納するという仕組みを構築した時の覚書です。

Firebase CloudFirestoreの登録

https://firebase.google.com/
image.png

プロジェクトを追加

image.png

プロジェクト名

LINEと連携するためのdtabaseなので【LINEdata1】としました。
任意の文字列で大丈夫です。
image.png

Google アナリティクス

Google アナリティクスを有効にするか選択
image.png

アカウント選択

新しいアカウントを作成を選択
任意の文字列を入力します。
image.png

必要項目を選択、チェックを入れて【プロジェクトを作成】
image.png

準備が整うと以下の画面になるので【続行】
image.png

アプリを作成

image.png

アプリ名を登録

image.png

SDK出力

直下へ記述する事でFirebase CloudFirestoreが使えるようになります。
コピーしてメモをしておきます。
【コンソールへ進む】をクリック
image.png

データベースの設定

Cloud Firestore

ダッシュボードへ戻ってくるので【Cloud Firestore】をクリック
image.png

データベースの設定

image.png

テストモードで開始

今回、練習なのでテストモードで開始を選択しました。
テストモードだと30日間しか使えない事に注意です。
image.png

ロケーション設定

そのまま【有効にする】をクリックします。
image.png

データベースの値設定

【コレクションを開始】をクリックして、格納したい値を設定していきます。
image.png

コレクション名

任意の英数文字列を設定します。
ユーザーに関するデータを格納していきたいので、今回は例と同じuserにしました。
image.png

格納データを決める

ドキュメントIDは今回自動設定にするので【自動】をクリックします。
・ID - 自動生成
・name - 名前
・address - 所在地
上記3件をデータベースに格納していく設定にしました。
image.png

データの見方

UserのID「JuoskBnz3Zt3JayLeVJy」という方のnamaeは「名前」でaddressは「東京都」
という情報を見る事が出来ます。

image.png

LINEから送られてきたデータを格納

Firebase CloudFirestoreの準備は出来たのでいよいよLINEから送られてきたデータを格納します。
長くなったので記事を分けて、
Firebase CloudFirestore X LINE X webアプリを接続で紹介をしています。

webサイトの入力フォーム値をへ格納する仕組みは
webサイトから入力したデータをFirebase CloudFirestoreに保存で紹介しています。

ホームページ制作のweb屋から、データを扱えるシステム系web屋に進化を遂げていると実感。
新しい技術の習得は面白いです!

5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4