firebase / Cloud firestore の開始編、web版のデータ登録 SPA開発(7) #firebase #web #SPA

index:

概要:
環境
関連
手順
接続、データ登録
参考のページ

概要:

前のSPA(SinglePageApplication) 関連で、firebase の設定編となります。

・接続は、Vue.jsのweb版の予定

環境

Vue-CLI 3.6.6
Vue.js
vue-router
firebase

手順

・上記等の、関連を参考に進めましたが

・プロジェクトの作成

・database は、Cloud firestore
　を、追加した場合です。

・セキュリティルールは、書込み可能
　に設定する。

・コレクションの追加
　例：　tasks

・フィールドの追加、完了

接続、データ登録

・プロジェクト作成時の、JSコードや、
　config設定を使用。

・接続、データ読込み

<script>
    var items = []
    this.database = firebase.firestore()
    var dbRef = this.database.collection("tasks")
    dbRef = dbRef.orderBy("title", "desc")
    dbRef.get().then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
            console.log(doc.id, " => ", doc.data());
            var item = doc.data()
            /* console.log(doc) */
            items.push({
                title : item.title
            })            
        })
    })

</script>