【前端開發】如何透過 Firebase Realtime Database 建立假資料、簡易資料庫（noSQL）

• 除了來自 HTTP 請求的資料變動，Firebase Realtime Database 有資料同步的功能，只要資料庫的資料有所變更，使用者也能即時取得更新的資料內容。
• 權限控管
• 離線使用，這一點可能對手機平台來說比較有用，網頁服務畢竟還是需要透過連線取得頁面資料，個人覺得對網頁開發者來說比較雞肋一點（也有可能我還沒了解到其中有用之處）。

開始使用吧！

➤ Step 1 ：建立 Firebase 專案

進到 Firebase 後，我們可以在自己的 Dashboard 上找到「Add project」的按鈕，點擊後就可以看到下方的畫面。

輸入完專案名稱後，Firebase 會問你這個專案需不需要使用 GA 的服務，可以視個人使用狀況決定要不要使用，選取完後就會進入到建立好的專案頁面。

➤ Step 2：初始化 Realtime Database 服務

我們可以在專案頁面中的左側列表中，找到「Build」菜單下的 Realtime Database，點擊「Create Database」就可以看到 Realtime Database 的初始化畫面。

在第一步驟中，我們可以選擇 Database 的地點。

在第二步驟中，我們可以針對 Realtime Database 的資安進行安全規則（Security rules）設定，在初始化時 Firebase 提供兩種安全規則的選項。

第一種模式為鎖定模式（Locked mode），在這個模式中，除了使用者自己定義的資安規則外，會限制任何第三方進行讀取與寫入資料。

在第二種測試模式（Test mode）中，在啟用 Realtime Database 30 天內，任何人都可以進行資料庫內容的讀寫行為。

使用這個模式需要注意 30 天內一定要進行安全規則的調整，不然當測試模式逾期後，一樣會回到鎖定模式，只有使用者本身才能進行讀寫。

不過我個人比較懶一點，怕 30 天後還要上來改，所以接著我們就來了解一下 Realtime Database 是怎麼透過安全規則的機制進行權限管理吧！

➤ Step 3：建立權限管理

在 Realtime Database 中我們會使用安全規則（Security rules）來進行權限控管，如果你跟我一樣一開始選擇鎖定模式，就可以看到一開始預設的安全規則如下：

根據上圖可以看出 Firebase Realtime Database 是使用 JSON 資料格式來進行撰寫安全規則的設定檔，Firebase 在安全規則上，主要使用 .read 與 .write 兩個 key 去管理資料層級中的讀寫關係，value 的部分則是使用 JavaScript 表達式的方式來撰寫。

在上方的範例中，預設的安全規則是針對整個資料資料結構下去做管理， 且能針對指定資料節點進行權限管理，舉例來說：

不過這一次我並沒有要進行複雜資料的管理，只是要建立簡易的 mock 資料，所以我將安全規則改為全部的資料都能進行讀取，但不能寫入：

➤ Step 4：新增資料

測試好權限後，我們就可以來新增資料了，我們可以透過進入 Data 的頁簽進到這個畫面。

接著點擊右側的更多按鈕（三個點點點），選擇「Import JSON」就會看到以下畫面。

這樣我們就完成資料的上傳啦！在下方的面板上可以看到上傳完的 JSON 檔目錄，這些目錄及其中的鍵值，都可以在這個面板中進行動態的修改、新增、刪除。

➤ Step 5：初始化 Firebase SDK

當資料設定好後，我們就可以進行串接了，回到專案首頁可以看到左上方的「Project Overview」按鈕，點擊下去就可以看到下方的說明，在這個頁面我們可以選擇「/」 按鈕，來產生要在網頁運行的 Firebase 程式碼。

接著你就會看到這個畫面，輸入完自己的專案名稱後，就會產生對應的設置流程：

設置流程如下：

1. 可以透過 NPM 下載，或是使用 CDN 的方式載入：

2. 如果是使用 NPM 下載的話，會看到類似的程式碼：

➤ Step 6：取得指定 Firebase SDK

在步驟 5 ，我們只有針對 Firebase 本身的啟用，如果想要啟用 Firebase Realtime Database 的話，可以按照官方文件的提示針對特定服務進行引入，這邊我是引入 Firebase Realtime database 所需要的 getDatabase 方法：

如果要使用 Firebase realtime database 取得資料的話，我們會需要在 getDatabase 這個方法中傳入由 initializeApp 所初始化的內容做為參數，獲得 database 的設定實體。

到這邊我們幾乎完成了九成的設定，但還沒有辦法撈到我們在 Firebase Realtime database 所匯入的 JSON 資料，接著我們需要透過一些 Firebase database 所提供的方法來取得資料。

➤ Step 7：取得 Firebase Realtime Database 資料

除了 getDatabase 方法外，我們還會額外引入 ref 與 onValue 兩個方法。

首先，我們會在 ref 方法傳入兩個參數，第一個參數是 database 的 config，第二個則是我們所需要使用到路徑，透過這樣的方式我們可以取到我們所想要進行操作的參考資料。

接著，我們要使用 onValue 這個方法，onValue 方法是一個監聽器，這個方法的第一個參數會傳入我們透過 ref 方法所取得的參考資料，接著我們就能在第二的參數中的 callback fucntion 中，指定當資料有所改變時我們要進行怎麼樣的操作。

我們可以透過呼叫 callback 的第一個參數中的 val 方法，取得我們在 Firebase 匯入的 JSON 資料啦！

基本上透過上方的七個步驟就可以透過純 JavaScript 的方式實現簡易的 noSQL 即時資料庫啦！

如果你好奇要怎麼在專案中真的應用假資料，這裡我簡單提供如何在 React 元件中取用 Firebase Realtime Database 的方法。

➤ 如何在 React 專案中使用 Firebase Realtime Database

在 React 中，我們可以額外建立一個 util 檔案來放置我們剛寫好的一些設定檔，在需要使用到的方法透過 ESM 的方式匯出。

接著我們可以在元件內引入 onValue 這個監聽方法，與引入我們剛剛封裝好的 Realtim Database util 方法，透過在 useEffect hook 中掛載這個監聽器，當遠端資料有改變時，搭配使用 useState Hook 儲存資料並觸發頁面的渲染。

透過這樣的方式，我們就可以在需要做 React Side Project 時，隨心所欲的使用簡易的即時資料庫啦！

這篇文中目前只有介紹如何透過 onValue 來進行遠端資料庫的監聽，但其實 Firebase 還有其他不同針對讀寫的方法，雖然方法名稱不同，但其實有類似於 RESTful API GET、POST、PUT、DELETE，大家可以參考這篇官方文件進行延伸閱讀，或是以後有機會再跟大家分享其他方法的使用方式。

希望今天的文章可以讓大家了解前端好夥伴 Firebase Realtime Database ，我是 Vivian 我們下次見 ：）

關於我：

一名從英文系畢業的前端工程師，喜歡閱讀、寫東西及自我成長。

｜Instagram: Vivian Yeh｜vivian_enlife

｜聯絡我：vivian.enlife@gmail.com