Firebase 教學 - RealTime Database 安裝與使用
Firebase RealTime Database 是 Google 的雲端資料庫，透過 JSON 格式儲存資料並即時同步到所連線的用戶端，藉由 RealTime Database 我們可以很輕鬆的實現許多創意與應用，這篇將會介紹一開始的安裝與使用方式，後續會接著介紹進一步的用法。
延伸閱讀：
建立資料庫
首先我們先用 Google 帳號登入 ( https://firebase.google.com/ )，接著進入 firebase 的控制台，點選「新增專案」，新增的設定除了給予命名，也可以選擇伺服器所在的位置，這裡我選擇台灣，把相關條款打勾之後就可以新增專案。( 如果名稱和別人重複，就會看到自訂名稱後方多出一串亂碼 )
專案建立後，會自動進入專案的管理畫面，點選左側選單的「Database」，下拉內容看到「Realtime database」，點選建立資料庫，就能建立 Realtime 的資料庫了。( Firestore 請參考：Firebase 教學 - 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 的安全性規則。