【前端開發】如何透過 Firebase Realtime Database 建立假資料、簡易資料庫（noSQL）
更新於 發佈於 閱讀時間約 8 分鐘
Firebase Realtime Database 是一個 NoSQL 即時雲端資料庫，支援多平台（JavaScript SDKs、Android、iOS），可以讓使用者即時取得資料庫的資料。
Firebase Realtime Database 的特色有：
- 除了來自主動 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 程式碼。
接著你就會看到這個畫面，輸入完自己的專案名稱後，就會產生對應的設置流程：
設置流程如下：
- 可以透過 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
｜聯絡我：[email protected]
431會員
101內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
你可能也想看
Google News 追蹤
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
需求情境：
為了讓多人使用 App，必須有驗證程序，以識別特定使用者，存取各自擁有的資源。
解決方案：
引用 google 所提供的雲端服務平台 Firebase，其中有多種驗證功能可選用。基於個人對 google 的偏愛，決定先採用 google signin 的方法，實作 login lo
在進行Electron 專案時，後端夥伴選擇將 sqlite 資料庫跟專案檔打包成一個執行檔。在開發過程中，前端的操作經常會更動到 db的資料，此時 Git 就會追蹤到 db 的變化，因此前端在推送檔案到遠端 repo 前，會需要將其移出 Git 追蹤範圍，該怎麼做？
最近碰到個神奇的需求，App啟動時，才要用firebase remoteConfig去決定初始畫面。該文章詳細介紹了在App啟動時如何利用firebase remoteConfig去決定初始畫面，以及解決在推播的情況下造成跳轉無效的問題。
在本篇文章中，將會設定 Cloud Run，以便每當將程式修改並推送到 GitHub 時，它都會使用 Cloud Build 自動構建和部署應用程序的最新版本。
※ 什麼是資料庫正規化？為什麼需要正規化？
什麼是資料庫正規化？
資料庫正規化是一種設計關聯式資料庫的方法，目的是建立良好結構的關聯表，主要目的有二：
去除重複性：建立沒有重複的關聯表。因為重複資料不只浪費資料庫的儲存空間，而且會產生資料維護上的問題。
去除不一致的相依性：資料相依是指關聯表
權限管理=新增、修改、刪除+審核
通常，這種程式的設計會包含權限管理，其中包括現場修改、刪除等三大類功能。然而，根據經驗，我們還需要關注另一類功能，即審核權限。
審核不執行新增
審核權限通常不執行新增的動作，僅限於某些欄位的輸入。新增、修改、刪除這些操作基本上是容易理解的。也就是說，對於這個工
※ MySQL是什麼？
MySQL是一種開源(免費)的關聯式資料庫管理系統，所以任何人都可以免費使用，是Web開發中最常用的資料庫之一。MySQL 會將資料儲存在由資料列與資料欄組成的資料表中。使用者可使用結構化查詢語言 (通常稱為 SQL) 來定義、操控、控管及查詢資料。
簡單來說，資料
※ 基本操作：SQL 語法，SELECT, WHERE, CREATE, UPDATE, DELETE。
SELECT：從資料庫中或資料表中指定要選擇的欄位中取得資料，稱之為查詢 (query)。
※ 語法：要由兩部分構成，第一部分是要 "拿什麼" 資料 (若有多項用逗號隔開)；第二部分則為
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
需求情境：
為了讓多人使用 App，必須有驗證程序，以識別特定使用者，存取各自擁有的資源。
解決方案：
引用 google 所提供的雲端服務平台 Firebase，其中有多種驗證功能可選用。基於個人對 google 的偏愛，決定先採用 google signin 的方法，實作 login lo
在進行Electron 專案時，後端夥伴選擇將 sqlite 資料庫跟專案檔打包成一個執行檔。在開發過程中，前端的操作經常會更動到 db的資料，此時 Git 就會追蹤到 db 的變化，因此前端在推送檔案到遠端 repo 前，會需要將其移出 Git 追蹤範圍，該怎麼做？
最近碰到個神奇的需求，App啟動時，才要用firebase remoteConfig去決定初始畫面。該文章詳細介紹了在App啟動時如何利用firebase remoteConfig去決定初始畫面，以及解決在推播的情況下造成跳轉無效的問題。
在本篇文章中，將會設定 Cloud Run，以便每當將程式修改並推送到 GitHub 時，它都會使用 Cloud Build 自動構建和部署應用程序的最新版本。
※ 什麼是資料庫正規化？為什麼需要正規化？
什麼是資料庫正規化？
資料庫正規化是一種設計關聯式資料庫的方法，目的是建立良好結構的關聯表，主要目的有二：
去除重複性：建立沒有重複的關聯表。因為重複資料不只浪費資料庫的儲存空間，而且會產生資料維護上的問題。
去除不一致的相依性：資料相依是指關聯表
權限管理=新增、修改、刪除+審核
通常，這種程式的設計會包含權限管理，其中包括現場修改、刪除等三大類功能。然而，根據經驗，我們還需要關注另一類功能，即審核權限。
審核不執行新增
審核權限通常不執行新增的動作，僅限於某些欄位的輸入。新增、修改、刪除這些操作基本上是容易理解的。也就是說，對於這個工
※ MySQL是什麼？
MySQL是一種開源(免費)的關聯式資料庫管理系統，所以任何人都可以免費使用，是Web開發中最常用的資料庫之一。MySQL 會將資料儲存在由資料列與資料欄組成的資料表中。使用者可使用結構化查詢語言 (通常稱為 SQL) 來定義、操控、控管及查詢資料。
簡單來說，資料
※ 基本操作：SQL 語法，SELECT, WHERE, CREATE, UPDATE, DELETE。
SELECT：從資料庫中或資料表中指定要選擇的欄位中取得資料，稱之為查詢 (query)。
※ 語法：要由兩部分構成，第一部分是要 "拿什麼" 資料 (若有多項用逗號隔開)；第二部分則為