[Firebase] Firebase初使用(3)：讀取、儲存與刪除資料

Firebase初使用第三篇，終於有要進入核心重點的感覺。


還記得第一篇前置設定時，我們已經在Firebase放入了一筆便利貼資料，那首先我們就先把那筆資料顯示出來吧！





其實在第一篇的最後那段程式碼，混入了一個重要的東西。

以我們在第一篇拿到的firebaseConfig初始化，之後生成firestore.firestore()物件，裡面有讓我們存取Firestore的各種方法。

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

其實也沒什麼好說明的，要拿指定的collection裡所有的檔案可以照下面這樣拿：db.collection('Collection-Name').get()。

const noteList = document.querySelector(".board-content");
const modal = document.querySelector("#myModal");
const btn = document.querySelector("#myBtn");
const span = document.querySelectorAll(".close")[0];
const form = document.querySelector("#add-message-form");

const noteView = (id, name, message) => `
<div class="note" data-id="${id}">
    <span class="close">&times;</span>
    <div class="note-header">${name}:</div>
    <div class="note-message">&emsp;${message}</div>
</div>
`;

db.collection('Notes').get().then((snapshot) => {
    snapshot.docs.forEach(doc => {
        var note = noteView(doc.id, doc.data()["Name"], doc.data()["Message"]);
        noteList.insertAdjacentHTML("afterbegin", note);
    });
});

如果你好奇snapshot或是doc的內容的話，可以加個console.log()印出來看看，但我個人是看不太懂...
資料放滿深的
    snapshot > docs > doc > data()

拿到我們想要的"Name"和"Message"後，我們可以拿這兩個值來繪製我們的便利貼，再使用insertAdjacentHTML()將我們動態生成的noteView HTML code插進我們的index.html中。



接下來是如何新增資料到Firebase中。

使用db.collection('Collection-Name').add({ ... })

form.addEventListener('submit', (e) => {
    if (form.name.value == "" || form.message.value == "") {
        return;
    }
    e.preventDefault();
    db.collection("Notes").add({
        Name: form.name.value,
        Message: form.message.value
    });
    form.name.value = '';
    form.message.value = '';
    modal.style.display = "none";
});

e.preventDefault()是避免在按下送出時會跳轉重整網頁到https://127.0.0.1:5000?id=xxx&message=xxx    (這個是html form自動預設會做的事) (對了，忘了說我跑這個網頁應用靠的是 live-server --port=5000)



刪除資料則是要靠id來指定要刪的檔案
db.collection("Collection-Name").doc(id).delete();

noteList.addEventListener('click', (e) => {
    if (e.target.className == "close") {
        let id = e.target.parentElement.getAttribute("data-id");
        db.collection("Notes").doc(id).delete();
    }
})

"close"是指定便條紙右上的"X"鍵，判斷使用者按在"X"鍵後，會去拿該便條的data-id以對應到在Firebase裡的document id。



有了讀取、新增和刪除功能，我們的留言板就大抵可以正常運作了！

但到這裡還有個問題...
那就是我們的網頁不會自己刷新。

試著新增一個便條看看，會需要再按重新整理才能看到新增的便條內容。

你可能會想那就在"click"的函式裡最後都加入一個重整頁面的函式就好了，是這樣也沒錯，但這是只有對於操作這個動作的使用者能立即看到更新，其他連上我們留言版的使用者根本不知道有人更新了東西，一定要在他自己重新整理後才會看到新的內容。

比較好的做法是我們的留言板能自動real-time即時的做更新反映Firebase的變動。
能簡單做到即時反映變動也正是Firebase的強大方便之處。

這也就是我們下一篇要做的事！