[Tool Note] — Google Firebase DB 怎麼用(前端串接)？

發表於 更新於 分類於 ， ， 文章字數： 3.6k 所需閱讀時間 ≈ 3 分鐘

Firebase

Introduction & 前言

在之前 The F2E - 第二屆 前端 & UI 修練精神時光屋 只會切版時候的筆者，在其中一關 第七週 - ChatRoom 匿名聊天室 第一次聽到了 Firebase 這個玩意兒，沒想到將近快一年之後才真正去學習，藉著這次開始學習 Node.js 課程，趁著記憶猶新，趕快再來一篇筆記，還不會的朋友也歡迎一起上車。

本篇文章一樣不會過於允長及深入，會教基本的 CRUD，有興趣的前端仔不會後端也可以靠這個做出一個小全端 Side Project。

Summary & 摘要

各種服務

如果還沒聽過 Firebase 的話這邊簡短介紹一下。Firebase 是 **後端服務平台(Backend as a Services，BaaS)**，在筆者開始學習的時候已經改過版本，現在也提供了免費的 數據分析、雲端訊息推播、通知系統、備份、Log 報告…等等(看購買的課程影片上的 Firebase 似乎已經是幾年前了)。

而 Firebase 並非剛開始就是 Google 的，2011年 成立一直到了 2014年10月 才被 Google 收購；而這次我們會介紹 Firebase 的 Database！

使用指南

踏出第一步

首先上 **Firebase 網站**，然後點選 Get Started。

step1

然後新增一個專案，並且取一個專案名稱。

step2

step3

接著可以選擇是否要使用 **Google Analytics (分析)**，這邊可以選擇不開啟。

之後會寫一篇文章來介紹 GA 及 GTM，剛好最近專案有碰到，這是一個很強大的 分析、行銷 工具(註1)。

step4

接通管線

step5

接著點選 </> 這個符號，然後註冊一個網頁應用程式，下方的代管選項可以不必勾選，所謂的代管可以參考 Firebase Hosting 靜態網站部署，有點類似於 Github Page 的概念。

step6

接著完成後就會出現一大串 JS Code，這時候可以先保存下來，我們將會做一個簡單的教學。

step7

之後找不到 Firebase SDK 的話，可以至 Firebase 網頁，點選左邊 專案總覽 旁的 齒輪，然後再點選 專案設定，接著畫面滑到底就會有 Firebase SDK snippet。

Firebase SDK

註1：2020/09/13 寫了一篇 [Tool Notes] — Google Analytics(GA) 及 Google Tag Manager(GTM) 怎麼用？ 對行銷或統計甚至對 GA、GTM 有興趣都可以參考。

筆者帶進門

建立線上資料庫

再來我們新增一個專案，然後新增一支 index.html，檔案，然後在 head 處引入剛剛複製的那些代碼。

這邊有個地方很重要，在那串代碼裡面有一行寫著 <!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#available-libraries -->，這個意思是提醒使用者在 Firebase 眾多的功能當中你需要用到什麼功能就要分別去引入，這邊是使用 Database 的功能所以我們加上這行 <script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-database.js"></script> 就可以使用 firebase-database 的功能啦！

接下來讓我們回到 Firebase 的網頁，點選左邊的 Database 進入後滑到下方，在標題顯示 您也可以選用「Realtime Database」 的地方，選擇建立一個新的 Realtime Database 資料庫。

create_db

因為跟著影片學習做筆記的原因，會先使用 Realtime Database 當作資料庫。

mode_example

打開後會有兩種模式可以選擇，可以稍微參考一下，然後我們選擇第一種，因為我們還會再作修改，不過這邊可以先有一個觀念，這個 即時資料庫安全性規則 是可以透過客製化設定的，比方說 誰能改、誰能閱讀、開放修改到何時…等等。

clear_DB

之後進入資料庫會發現一片空白，但有你剛剛專案的名稱，緊接著就來說明如何操作資料庫吧！

小夫 我的資料要近來囉！

像極了套件

自訂規則

如果我們平常會使用的套件，人家怎麼定義，我們就如何使用，因為往往作者已經幫我們省去麻煩的設定，而我們只需要使用作者定義好的方法，就可以達到我們想要的效果！

在我們講解如何操作資料庫的時候必須要更改一下我們資料庫的設定，剛剛提及的 即時資料庫安全性規則 便是我們第一件要處理的事情。

在我們進入 Firebase 的 Database 後，可以看到上方有一個 規則 進入後會看到以下程式碼：

1
2
3
4
5
6
{
  "rules": {
    ".read": false,
    ".write": false
  }
}

為了讓我們好測試及修改，這邊全部改為 true，如下方程式碼，然後點選跳出來的 發布：

1
2
3
4
5
6
{
  "rules": {
    ".read": true,
    ".write": true
  }
}

修改規則

ref()、set()

與此時，你已經能操作資料庫了，只是你可能還不知道怎麼新增資料進去資料庫，讓我們一步一步慢慢來！

再來我們跳回剛剛新增的 index.html，然後在引入的那些程式碼後面再加上 firebase.database().ref().set('Hello Firebase!');，緊接著打開 index.html 你會發現什麼事情都沒發生，這時候再跳回去 Firebase 的 Database，會發現剛剛 set() 裡的 Hello Firebase! 跑到資料庫了！

新資料

到這邊你會發現剛剛那一行的一些神奇之處 firebase.database() 即是使用 database 的意思，而 ref() 則是你指定的路徑，有點類似資料庫名稱，最後是 set()，這個毫無疑問就是新增，由於沒有指定路徑，所以會直接把所有東西都洗掉，然後加上我們指定的文字！

on()、once()

如果我們可以新增資料進去資料庫，也該有方法可以拿資料出來了吧？這兩個語法 on()、once() 就是會把資料從資料庫拿出來，差別在於前方的是類似即時更新，後方只會去資料庫拿一次，所以當我們在做聊天室的時候，寫上一個 firebase.database().ref().on() 就會方便許多，不用一直再去跟資料庫要，只要有更新即會觸發後續事件。

這兩個語法裡面都是接上 function()，以下為範例：

1
2
3
firebase.database().ref().once(function(item){
  console.log(item.val());
})

push()、child()、remove()、child()

前方我們有提到 set()，但你可能有時候只是想把東西丟進去不要洗掉全部的資料，這時候就要使用 push()，而每一個 push() 也會產生一個亂碼的 Key。

而有新增就會有刪除，在我們把資料 on() 或 once() 出來的時候，我們可以順便在 DOM 上塞上 data-key=”xxxx” 之後我們需要刪除，就需要帶特定 key 進去，下方為範例：

1
firebase.database().ref().child(key).remove();

切記，怎麼新增，資料庫就會怎麼排列，建議在 ref() 就規劃好資料庫怎麼放。

orderByChild()、forEach()

當我們從資料庫拿資料出來多少會想排列，比方說從高到低，或從低到高，這時候就必須使用 orderByChild() 了，範例碼如下：

1
firebase.database().ref().orderByChild('weight').once();

而會提到 forEach() 是因為 orderByChild() 過濾出來的資料，必須在用 forEach() 取出每一個內容。

範例

這邊附上一個使用 Google Firebase 的小專案，是六角學院的小作業，使用 Side Project 新增刪除自己的 BMI，有興趣可以自行 Clone 下來研究。

這個作樂使用 Dotenv(讀取環境變數的套件) 所以可以放心的 Clone 下來，並且修改完成之後上傳到自己的 GiuHub。

Demo: 傳送門

Source Code: 傳送門

題外話：此作業有使用一鍵指令快數部署靜態資源至 GitHub，有興趣可參考 [Git Notes] — 快速部署 Vue Cli 靜態資源至 GitHub Pages。

Conclusion & 結論

其實還有更多的方法沒有寫上來，但基本的操作流程就是這樣，想好好的用好一個套件或是服務，那就是 document 讀熟就對啦！

看來下次要做到聊天室就不怕沒資料庫了。

參考網站