[javascript + firebase]의 샘플 코드를 찾기 어려웠기 때문에 메모하는 시리즈

Firestore란?

Google Firebase의 NoSQL 데이터베이스입니다. [콜렉션]이라는 폴더에 문서 [문서]가 여러 개 저장되어 있고 해당 문서에 [필드]라는 데이터가 들어 있는 이미지입니다. 컬렉션 → 문서 → 필드

1. 데이터 신규 추가(샘플 C)

새 문서 추가

hoge1.html

<script>MemberDocAdd("名前A", "役割A")</script>

hoge1.js

function MemberDocAdd(dojoName, role) {

  var db = firebase.firestore();
  db.collection("members").doc(strUserID).set({
    group: dojoName,
    docid: role,
    point: 0,
    timestamp: firebase.firestore.Timestamp.fromDate(new Date())
  })
  .then(function(){
    document.location.reload(); // 新しいレコードの登録が成功したらリロードする
  })
  .catch(function(error){console.log("Error at MemberDocAdd:", error)});

}

2. 데이터 읽기(샘플 R)

여러 문서를 로드하고 필드 데이터를 표시하는 샘플

hoge2.html

<div id='aaaaid'></div>
<script>
  CheckMemberGroupTitle("demo");
</script>

hoge2.js

<script>
function CheckMemberGroupTitle(keyword) {

  document.addEventListener('DOMContentLoaded', function() {

    var db = firebase.firestore();
    db.collection("dojo").where("name", "==", keyword)
      .get()
      .then(function(querySnapshot) {

        querySnapshot.forEach(function(doc) {
          if (doc.exists) {
            var strHTML = ''
              + '<h1>' + doc.data().fieldTitle + '</h1>'
              + '<p>' + doc.data().fieldMessage + '</p>'
            document.getElementById('aaaaid').insertAdjacentHTML('afterbegin', strHTML);
          } else {
            console.log("ドキュメントが見つかりません");
          }
        })

      })
      .catch(function(error) {
        console.log("DB読込エラー発生:", error);
      });
  });
}
</script>

3. 데이터 업데이트(샘플 U)

HTML 양식에 값을 입력하여 데이터베이스 문서를 업데이트합니다.

hoge3.html

<form name="formUpdate">
  <input type="hidden" id="docid" value="' + doc.data().uid.trim() + '">
  <p>属性１：<input type="text" id="att1col" value="' + doc.data().att1 + '"></p>
  <p>属性２：<input type="text" id="att1rem" value="' + doc.data().att2 + '"></p>

</form>

hoge3.js

function GroupDocUpdate() {

  var docID = document.forms['formUpdate'].elements['docid'].value;

  var db = firebase.firestore();
  db.collection("dojo").doc(docID).update({
    att1: document.forms['formUpdate'].elements['att1'].value,
    att2: document.forms['formUpdate'].elements['att2'].value,
  })
  .then(function(){
    // 新しいレコードの登録が成功したらリロードする
    window.open('/' , '_self');
  })
  .catch(function(error){console.log("error:", error)});
}

4. 데이터 삭제(샘플 D)

삭제 동의 확인란을 확인한 다음 문서를 삭제하는 예

hoge4.html

<form name="formUpdate">
  <input type="hidden" name="docid" value="' + doc.id + '">
</form>
<form name="DeleteMe">
  <input type="checkbox" id="acceptDelete">
  <label for="acceptDelete">この紹介データを削除することに同意します</label></div>
  <div id="reconfirm"></div>
  <input type="button" value="削除する" onClick="MemberDelete()">
</form>

hoge4.js

function MemberDelete() {
  if(document.getElementById("acceptDelete").checked) {
    var docID = document.forms['formUpdate'].elements['docid'].value;

    var db = firebase.firestore();
    db.collection("members").doc(docID).delete().then(() => {
      document.location.reload(); // 新しいレコードの登録が成功したらリロードする
    }).catch((error) => {console.log("Document Delete Error:", error)});
  } else {
    document.getElementById('reconfirm').insertAdjacentHTML('beforeend', '<p class="text-danger">↑チェックをしてください</p>');
  }
}

뒤로

그림에서 Google Firebase를 사랑 해요! 이유