JS 串接 FireBase V9 / Realtime Database 基本語法使用

發表於 2021-10-29 分類於 Firebase Disqus：

Firebase 更新速度一直以來都是非常的快，每次大改版都會有部分語法更動，V8 升至 V9 主要是改成 ESM 方式引入，除此之外也有部分語法更改，雖然 Firebase 文件寫的滿詳細的，但這邊還是記錄一下 V9 版本的 Realtime Database 一些常用方法。

前言

初始化環境

進入 FireBase 首頁，在此建立一個新專案。
新增專案後，可以選擇開啟一個應用程式，這邊選擇 Web 版本。
在開啟應用程式第二步驟時，會提供 NPM 以及 CDN 的資訊，但先別複製，開啟好應用程式後，還需要開啟 Realtime Database 資料庫，到時候會在一起附上 CDN。
應用程式開啟完畢後，點左邊的 Realtime Database ，來開啟一個資料庫，跟專案、應用程式一樣會要你填名稱，並選擇伺服器，個人是選『新加坡 (asia-southeast1)』因為我們離該伺服器最近。
資料庫也開好後，Firebase 的操作差不多到這裡，接者就是複製 CDN，選擇左上齒輪 ⇒ 專案設定，裡面就有 NPM 、 CDN 資料了。
NPM 比較適合有 Webpack 等等有包裝的環境，這邊採取 CDN 方式引入，9 版 CDN 是長這樣：

// Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js";
    // TODO: Add SDKs for Firebase products that you want to use
    // https://firebase.google.com/docs/web/setup#available-libraries

    // Your web app's Firebase configuration
    // 避免一些資料外露，把 Config  值刪除
    const firebaseConfig = {
      apiKey: 
      authDomain:
      databaseURL: 
      projectId:
      storageBucket:
      messagingSenderId: 
      appId: 
    };    

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);

但由於我們會使用到 Firebase 資料庫因此要再多一個 CDN ，以及一個相關設定，這樣就完成了初始化 Firebase 環境設定：

// Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js";
    // TODO: Add SDKs for Firebase products that you want to use
    // https://firebase.google.com/docs/web/setup#available-libraries
    import { getDatabase } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-database.js";

    // Your web app's Firebase configuration
    const firebaseConfig = {
      apiKey: 
      authDomain:
      databaseURL: 
      projectId:
      storageBucket:
      messagingSenderId: 
      appId: 
    };    

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    const db = getDatabase();

FireBase Realtime Database 的一些基本方法

這邊會介紹的有 set() 、 get() 、update() 、child()、on() 這幾個基本且常用方法
在介紹上面方法前，先說明 Firebase 一個功能 ref() ，ref() 是指向伺服器資料路徑的方法，在上面方法都會使用到。

set()

set() 功能是直接將使用者的資料寫入進 FireBase 的資料庫中，需要帶上兩個參數一個是資料路徑，另一個就是要寫資料本身，這邊以 familyObj 為要寫入的物件

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js";
// 由於採用 ESM 會使用的方法都要自己取出
import { getDatabase, ref, set} from "https://www.gstatic.com/firebasejs/9.1.3/firebase-database.js";

const firebaseConfig = {
  apiKey: 
  authDomain:
  databaseURL: 
  projectId:
  storageBucket:
  messagingSenderId: 
  appId: 
};    
const app = initializeApp(firebaseConfig);
const db = getDatabase();

// 指向資料庫中 屬性是 family 的物件
const familyRef = ref(db, 'family')
// 自定義物件
const familyObj = {
  father: {
    name: 'jack',
    age: '42'
  },
  mother: {
    name: 'rose',
    age: '39'
  },
  child: {
    name: 'Alex',
    age: '18'
  }
}
// set 設置
function setFN() {
  set(familyRef, familyObj);
}
setFN()

執行 setFN() 後，切到 firebase 網站中的 Realtime Database 就會發現 familyObj 的物件確實會被寫入，要注意的是資料庫中 familyObj 的名稱是 family 而非 familyObj ，因為我們在 ref 設定的屬性名稱是 family 。

get()

get() 顧名思義，獲得資料庫中資料，需要帶上一個參數，指向資料庫中的資料，這邊使用 .then() 接回回傳資料


import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js";
import { getDatabase, ref, get } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-database.js";

const firebaseConfig = {
  apiKey: 
  authDomain:
  databaseURL: 
  projectId:
  storageBucket:
  messagingSenderId: 
  appId: 
};    
const app = initializeApp(firebaseConfig);
const db = getDatabase();
const familyRef = ref(db, 'family')

function getFN(){
    // get 設置
    get(familyRef).then((snapshot)=>{
			// 確認回傳資料是否成功
      if (snapshot.exists()) {
				// 顯示回傳資料
        console.log(snapshot.val()) //family 物件
      }
    })
  }
  getFN()

update()

update() 顧名思義是更新，同樣會帶上兩個參數，一個是資料路徑，另一個就是要更新的資料本身，使用起來和 set() 類似。

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js";
import { getDatabase, ref, child, update } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-database.js";

const firebaseConfig = {
  apiKey: 
  authDomain:
  databaseURL: 
  projectId:
  storageBucket:
  messagingSenderId: 
  appId: 
};    
const app = initializeApp(firebaseConfig);
const db = getDatabase();
const familyRef = ref(db, 'family')

function updateFn() {
  update(child(familyRef,'mother'), {
    name: 'Ruby',
    age: '40',
    gender:'female'
  })
}
updateFn()

child()

在上面範例中，會發現有用上 child() 方法，child() 方法就是指向資料庫物件中，指定屬性的方法，以範例來說就是指向，資料庫中 family 中的 mother 屬性。

on()

on() 是用來持續監聽資料使用的，一旦指定的資料在資料庫中替換， on() 設定的資料便會重新回傳，在過去版本 on() 也都會是獨立的方法，但是在 V9 版本被改為使用 onValue 這類監聽方法，同時搭配第三個參數 { on : true } ，這樣才會開啟

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js";
import { getDatabase, onValue } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-database.js";

const firebaseConfig = {
  apiKey: 
  authDomain:
  databaseURL: 
  projectId:
  storageBucket:
  messagingSenderId: 
  appId: 
};    
const app = initializeApp(firebaseConfig);
const db = getDatabase();
const familyRef = ref(db, 'family')

onValue(familyRef, (snapshot) => {
      const value = snapshot.val()
      console(value)
    }, {
      on: true
    });

上面範例輸入後，我們可以到 firebase Realtime Database 資料庫，隨意修改 family 中的資料，可以發現只要修改的是 family 中的資料，他便會回傳 console.log 便會顯示。

結尾

其實這些方法在官方文件都有提到，更多方可以直接參考官方文件。
上面程式碼也提供一個 Codepen 參考，不過仍須自行填入自己的 firebaseConfig

地方的工程師需要筆記

JS 串接 FireBase V9 / Realtime Database 基本語法使用

前言

初始化環境

FireBase Realtime Database 的一些基本方法

set()

get()

update()

child()

on()

結尾

參考資料