跳至主要内容

[Firebase] 資料庫語法

TL;DR​

我們使用Nodejs架設伺服器之後，接著還需要一個地方來儲存我們的資料。這邊我們選用Firebase Realtime Database。主要是因為他撰寫很方便，我們可以利用簡短幾行Javascript程式碼，就可以來寫入或是讀取資料庫的內容。

接著就來介紹Firebase Realtime Database如何使用吧！

參考資料​

相關連結​

創建資料庫​

只要有Google帳號，我們就可以直接進到Firebase並且建立我們的專案。建立方法很簡單，就照著提示一直點下去就可以了，也有許多其他的教學可以參考，這邊不贅述。Day26 前端福音(1/4): Firebase-介紹 & 建立專案

設定Firebase SDK​

資料庫存放的資料，我們需要取用或寫入，一定會需要一些身份的驗證。所以我們需要先設定Firebase的一組API KEY，接著才能去存取資料庫。(官方文件)

這邊紀錄使用cdn的方式：

要設定的時候要先用cdn載入核心

<script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-database.js"></script>

接著在自己的script設定好專案的apiKEY等等資料

<script>
    const firebaseConfig = {
      apiKey: "",
      authDomain: "",
      databaseURL: "",
      projectId: "",
      storageBucket: "",
      messagingSenderId: "",
      appId: "",
      // databaseURL: "https://DATABASE_NAME.firebaseio.com",
    };
    firebase.initializeApp(firebaseConfig);


    let database = firebase.database();
    console.log(database);
</script>

上方firebaseConfig的參數需要填入自己資料庫的參數。

指定資源(ref)​

語法：

firebase.database().ref() //or database.ref() 因為上方已經有預先定義好

寫入資料(set)​

在寫入資料時，需要先使用ref去指定位置 語法：

firebase.database().ref().set('hi')
info

Firebase資料庫裡面的內容都是key-value形式，如果寫入陣列，則該陣列也會用物件來表示，key值為0,1,...，value則是陣列的內容

另外還有另一種寫入資料的方式(push)，使用push可以自動生成一個對應的key

const database = firebase.database();

// 使用 push 方法將資料推送到新的自動生成的 key 下
function pushData(value) {
  return database.ref('food/coke/price').push(value);
}
pushData(300)
  .then(() => {
    console.log('Data pushed successfully');
  })
  .catch(error => {
    console.error('Error pushing data:', error);
  });

取得資料​

當我們需要從資料庫取值出來，渲染在畫面上的時候，有兩種方法 分別是只渲染一次畫面的once跟監聽資料庫，當資料庫內容有更新的時候就會再次渲染畫面的on。

once​

const database = firebase.database();
// database.ref().set(data);   寫入資料
database.ref('food').once('value',function(snapshot){
  console.log(snapshot.val());
})

或是可以轉換成async/await的方式

const database = firebase.database();

async function readData() {
  try {
    const snapshot = await database.ref('food').once('value');
    console.log(snapshot.val());
  } catch (error) {
    console.error('Error reading data:', error);
  }
}

readData();

on​

把once改成on即可，當資料庫資料有更新的時候就會重新回傳值，要在function內去撰寫渲染畫面的邏輯

const database = firebase.database();
    // database.ref().set(data);
database.ref('food/coke/price').on('value',function(snapshot){
  const data=snapshot.val();
  document.getElementById('render').textContent=data;
})

那麼只要food/coke/price的內容有變動的時候，就會再次執行這個callback function，也就是說，畫面(#render)的文字就會被改變。

指定下層路徑(child)​

database.ref().child('test').child('test1').child('test2').child('test3').child('test4').child('test5').remove();

刪除節點(remove)​

database.ref('test/test1/test2/test3/test4/test5').push('im test');
database.ref('test/test1/test2/test3/test4/test5').remove();
caution

使用remove()的方式去刪除，需要注意的是如果目前物件的內容刪除後，下層已經沒東西了，則上層會一起刪除

補充：for...in​

在使用firebase realtime database的時候，因為我們都是操作物件，所以使用for...in語法就會很方便。

for (const key in todos) {
      ...
    }

todos是一個物件，如果今天是物件那key的值就會是todos物件的屬性名稱，所以如果要取出todos下的內容可以使用console.log(todos[key]);。因為key已經是字串格式了！

如果今天是使用在陣列上，那key就會是索引值(0,1,2,…)

監聽資料庫內容​

在開發的時候，如果資料庫的內容變動就要回去網頁上查看資料庫內容。這樣來回切換很麻煩，所以我們可以直接將整個資料庫內容整個渲染在畫面上，並且使用on去監聽，只要一有變化就會即時更新。

const watch=firebase.database().ref();
watch.on('value',snapshot=>{
  const data=snapshot.val();
  const content= document.getElementById('content');
  content.textContent= JSON.stringify(data,null,3);
})
caution

開發後記得要移除！

orderBy​

在讀取資料庫內容時，我們可以要求資料庫先排序過後，再回傳內容。主要有orderByChild，orderByKey，OrderByValue等等。