Firebase 教學 - RealTime Database 安裝與使用

Firebase RealTime Database 是 Google 的雲端資料庫,透過 JSON 格式儲存資料並即時同步到所連線的用戶端,藉由 RealTime Database 我們可以很輕鬆的實現許多創意與應用,這篇將會介紹一開始的安裝與使用方式,後續會接著介紹進一步的用法。

建立資料庫

首先我們先用 Google 帳號登入 ( https://firebase.google.com/ ),接著進入 firebase 的控制台,點選「新增專案」,新增的設定除了給予命名,也可以選擇伺服器所在的位置,這裡我選擇台灣,把相關條款打勾之後就可以新增專案。( 如果名稱和別人重複,就會看到自訂名稱後方多出一串亂碼 )

專案建立後,會自動進入專案的管理畫面,點選左側選單的「*Database*」,下拉內容看到「*Realtime database*」,點選建立資料庫,就能建立 Realtime 的資料庫了。( Firestore 會另外用專文介紹 )

一開始建立我們先使用「以測試模式啟動」,方便我們起手式寫入或讀取資料,後續篇幅會介紹安全性規則。

點選「建立」後,看到如下方圖片的畫面,就表示資料庫建立完成,準備可以開始寫程式操作了。( 這時你可能會看到警告訊息,不用太在意,因為剛剛選擇了「測試模式」,在沒有安全性規則的保護下,可以任意讀寫資料,所以才會出現警告訊息 )

初始化

要使用 RealTime Database 需要載入對應的 js,在這裡我直接使用 google 提供的連結。

<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>

接著在 JavaScript 中撰寫下面這段初始化的程式碼,宣告變數 database 為 firebase 的 realtime database,database 初始化完成後,得透過 ref 指定相對路徑,就能針對相對路徑就可以使用寫入或讀取對應的 api。

firebase.initializeApp({
  databaseURL: "https://XXXXX.firebaseio.com/"
});

const database = firebase.database();

寫入資料

寫入資料的方式分成四種:設定 ( set )、更新 ( update ) 、添加 ( push ) 和移除 ( remove ),主要都是以 JSON 格式儲存資料,三種方式也都支援 Promise,可以串接上 then 就能監聽是否完成。

1. 設定 set

延續上方的初始化,使用下面這段程式碼,網頁執行後就會在「根節點」( 根目錄 ) 寫入資料,要注意的是,使用 set 會把指定節點下的內容完全覆蓋。( 如果要刪除資料只需 set('') 即可 )

database.ref('/').set({a:123});

如果是使用下面這段程式碼,網頁執行後就會在節點 r1 裡寫入資料,因為我的範例是接續上面寫入資料到根節點,會看見資料庫裡頭出現根節點的資料和 r1 節點的資料。

注意,如果你把寫入根節點的程式碼放在最後面,執行後因為根節點使用了 set,會把內容完全覆蓋,就會造成資料庫被清空,只能下根節點的資料。

database.ref('/r1').set({a:123});
// 上面這段等同於下面這段
// database.ref('/').child('r1').set({a:123});

2. 更新 update

update 和 set 不同,update 並不會清空整個節點下的內容,而是針對指定的節點做更新,以剛剛做好的資料庫來說,下面這段程式碼可以將 a 更新為 789。( 如果沒有指定節點,update 將沒有作用 )

_root.update({a:789});

3. 添加 push

push 的方法可以在一個節點裡頭不斷地添加資料,添加資料時 firebase 會自動產生一個節點,下面這段程式碼,會先把根節點的資料清空,接著連續寫入三筆資料,網頁執行後進入資料庫可以看到,隨機出現的三個節點分別紀錄了我們寫入的資料。

database.ref('/').set('');
database.ref('/').push(123);
database.ref('/').push(456);
database.ref('/').push(789);

下面這段程式碼很有意思,第一眼看到會以為節點 a 裡頭會有 1 和 4、7,節點 b 會有 2 和 5、8,節點 c 會有 3 和 6、9,但網頁執行後結果卻不是如此,因為 a、b、c 的 set 並沒有指定節點名稱,所以在 push 時就不會保留原本的 123。

database.ref('/').set('');
database.ref('/a').set(1);
database.ref('/b').set(2);
database.ref('/c').set(3);
database.ref('/a').push(4);
database.ref('/b').push(5);
database.ref('/c').push(6);
database.ref('/a').push(7);
database.ref('/b').push(8);
database.ref('/c').push(9);

如果都要保留,只要手動新增節點即可,為什麼會這樣呢?因為我們存入的資料都是 JSON 格式,也因此必須滿足 JSON 格式的相關條件。

database.ref('/').set('');
database.ref('/a').set({num:1});
database.ref('/b').set({num:2});
database.ref('/c').set({num:3});
database.ref('/a').push(4);
database.ref('/b').push(5);
database.ref('/c').push(6);
database.ref('/a').push(7);
database.ref('/b').push(8);
database.ref('/c').push(9);

4. 移除 remove

remove 的方法可以讓我們移除資料庫中某個節點的資料,如果這個節點裡還有子節點,也會一併被移除,移除的寫法很簡單,將要移除的節點寫在 ref 裡頭,後面搭配 .remove(),執行後就可以移除。

database.ref('/c').remove();

讀取資料

讀取資料的方式有兩種,分別是:只讀取一次 ( once ) 和即時讀取 ( on )。

1.讀取一次 once

有些情形我們不希望不斷的讀取資料,只希望資料僅在一開始初始化後就載入一次,這時就可以使用這個方法,下面這段程式碼將會在網頁執行時,讀取資料庫的值。

database.ref('/').once('value',e=>{
    console.log(e.val());
});

once 支援 Promise,所以寫法亦可換成 Promise 的方式。

database.ref('/').once('value').then(result=>{
    console.log(result.val());
});

最後得到的結果:

2. 即時讀取 on

Realtime database 資料庫最大的特色就是「即時」,可以在資料庫有變動的情況下,即時將變化發送到所有正在偵測的網頁或應用,使用了 on 之後,除非手動停止,不然執行網頁後就會一直監聽資料庫狀態,並透過 callback 的 function 來執行對應動作,以下方的例子來說,只要資料庫有變動,就會即時在 console 裡看到資料庫的值。

database.ref('/').on('value',e => {
    console.log(e.val());
});

小結

Firebase 的 realtime database 真的是前端工程師的一大福音,因為不需要懂太多資料庫的原理或操作技巧,就能輕鬆將簡單的資料庫應用套用到自己的網站裡頭,後續篇幅會繼續介紹 realtime database 的規則和應用。

有興趣瞧瞧其他新文章嗎?