Firebase のデータベース(Firestore)を使ってみた。

以前Firebaseを使ってStaticなWebsiteを作りましたが、今回はFirestoreというクラウドデータベースを使ってみました。出来上がりが以下のようになります。

1.FirebaseでProjectを作成

2.Databaseを作成

3.Databaseへのアクセス設定

1.FirebaseでProjectを作成

firebase.google.comにアクセスしてログインした後

Go to consoleでコンソールにいき、Add project でプロジェクトを作成します。

2.Databaseを作成

プロジェクトを作成した後、データベースをクリックすると、cloud Firestore  かRealtime Databaseの選択が出てくるので最新のCloudの方を選びます。

次に、ローカルでアップするだけのサイトなのでテストモードを選びます。

下のスクリーンは既にpractice というDBが作成された状態です。firestore ではコレクションと呼んでいます。 コレクションの下にドキュメントがありますが、テーブルと考えて良いです。

フィールドはnameと cityです。Add Documentの下にあるのがそれぞれのDocumentのUnique Idになります。これはFirestoreによって自動的に作成されます。

3.Databaseへのアクセス設定

Add firebase to your web appをクリックすると

下のスクリーンが出てくるので、copyします。これをindex.htmlのbody tagの一番最後にペイストします。

コア firebase sdk  (firebase-app.js)は下のようにheadタグに置きます。

firebase-firestore.jsもその次に記入します。

Firebaseconfigにはデータベースの情報やプロジェクトIDなどの情報が入っています。

その下にはコンスタントのdbを指定してリファレンス出来るようにしました。

const db = firebase.firestore()

Index.html:

app.jsが実際データベースにアクセスして画面に表示させたり、更新したりするコードが書いてあります。他のデータベースのようにコネクション情報をセットして接続したり、する必要がないのでこのFirestoreはとても簡単です。

app.js:

style.css:

Leave a Reply

Your email address will not be published. Required fields are marked *