Firebase設定メモ

https://console.firebase.google.com/?hl=ja&pli=1

#初期設定 参考:https://www.virment.com/writedata-from-webapp-to-firestore/

ログイン後、「プロジェクトを作成」をクリック(もしくは <> のボタンをクリック) プロジュエクト名を指定  アナリティクスのチェックは外す 「プロジェクトを作成」をクリック リージョンの指定は日本国内なら「asia-northeast1」

プロジェクト全体画面に移動 Cloud Firestore をクリック データベースを作成 「Cloud Firestoreセキュリティルール」というポップアップ画面がでるので、「テストモード開始」を選択して、「有効にする」をクリック

まず認証関係の設定を行うために、左側のメニューの中の「Authentication」をクリック 続いて「ログイン方法」をクリック ログイン種類をメール・パスワードで設定 鉛筆マークをクリックすると、以下のように説明と有効化のためのスイッチが表示されるのでクリックして有効化し、保存をクリック

続いて左側メニュー一番上にある「Project Overview」をクリックし、以下の画面に戻ります。ここで「ウェブアプリにFirebaseを追加」をクリック 自分のWebサイトに貼り付ける用のコードと説明が表示されます。

##WebサイトからFirestoreにデータを書きこむ 参考:https://www.virment.com/save-data-to-firestore-vue-js-form/

###Vue.jsアプリ側で必要な作業 npmでfirebaseのパッケージをインストール

$ npm install firebase --save

src/firestore.jsを作成

import firebase from 'firebase'

const firebaseConfig = {
  apiKey: "AIzaSyApp1FfSclJnPP7mTIle_wy8S1qiNXXicE",
  authDomain: "attendapp-f6a7e.firebaseapp.com",
  databaseURL: "https://attendapp-f6a7e.firebaseio.com",
  projectId: "attendapp-f6a7e",
  storageBucket: "attendapp-f6a7e.appspot.com",
  messagingSenderId: "418594720490",
  appId: "1:418594720490:web:09c52189bef350d378a593"
};

export default firebase

const settings = { timestampsInSnapshots: true }; firebase.initializeApp(config); firebase.firestore().settings(settings); のコードはdevtoolでエラーを吐くのでいったん削除

###保存のコード データベースに上書きしたいが、1回しか書き込みできない

    saveStrage: function (keydata) {
      //新規追加
      let tmparray = {
        date_key: keydata,
        attend_type: this.picked,
        full_data: moment(this.post).format()
      };
      this.attend.push(tmparray);
         
      localStorage.setItem("attend", JSON.stringify(this.attend));//JSON.parse()化して格納
      this.picked = "automode"; //元に戻す

      const colref = firebase.firestore().collection("attend");
      const saveData = JSON.stringify(this.attend);

      // addの引数に保存したいデータを渡す
      colref.SetValueAsync(saveData).then(function(docRef) {
          // 正常にデータ保存できた時の処理
          console.log("Document written with ID: ", docRef.id);
      }).catch(function(error) {
          // エラー発生時の処理
          console.error("Error adding document: ", error);
      });

    }

###データ保存の関数 https://firebase.google.com/docs/database/unity/save-data?hl=ja

https://blog.h-sakano.dev/entry/2018/12/04/000000#Vue%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%ABFirebase-SDK%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB