Firebase 設定與測試

最近才知道 Google 很佛心的提供了免費的資料庫 Firebase 供大眾使用。它是 JSON 格式的資料庫，不是傳統的關聯式表格，很容易提供網頁或 APP 儲存資料，有些程式需要把資料或設定放上雲端的，這也是不錯的選擇。

今天做了一些研究，把心得記錄下來。

首先可以到這裡建立專案 https://console.firebase.google.com/

可以看到新增專案的地方，也可以看到舊專案。

按下新增專案，會問你專案名稱及國家。

建立專案後，接著問你應用的類型，我今天是測試在 Web 使用，所以選了最右邊那一個。

然後就出現一段設定檔，自行貼在 html 網頁的底端。

先來看資料庫，點選左邊的 Database，就可以看到系統設定的空白資料庫。

我們可以直接在網頁上操作資料，如下，我已經加入一些資料了。

 

以那筆電話為例，在名稱要輸入 user/heaven/tel ，在值輸入 07-1234567 ，就可以看到如下的結果了。

在實際測試時，要改一下權限，讓大家都可以寫入，方便測試，日後需要嚴格權限時，再來研究如何設定。

 

按下規則，可以看到權限設定。

先改成如下，再按下發佈即可。

如此一來，大家都可以寫入這個資料庫了，要小心使用。

以上是資料庫的設定，底下利用 React 寫一個小界面，測試一些操作資料庫的功能。

 
render() {
       return (
         <div>
           <h3>Firebase Test</h3>
           key : <input onChange={this.get_key}></input>
           <br/>
           val : <input onChange={this.get_val}></input>
           <br/>
           <button onClick={this.seter_fb}>set</button>
           <button onClick={this.update_fb}>update</button>
           <button onClick={this.push_fb}>push</button>
           <button onClick={this.delete_fb}>delete</button>
           <button onClick={this.geter_fb}>get</button>
           <h3>key : {this.state.key} </h3>
           <h3>val : {this.state.val} </h3>
         </div>
       );
   }

 

1. 設定資料

set 是直接在指定的位置設定資料，如果不小心，可能整個節點都被取代了，要小心。

程式碼：

seter_fb = () => {
     firebase.database().ref(this.state.key).set(this.state.val);
   }

this.state.key 就是網頁第一個輸入欄的內容，也就是 key 的位置。
this.state.val 就是網頁第二個輸入欄的內容，也就是 val 的位置。

測試一下，key 輸入 data/type ，val 輸入 XML，結果如下：

剛執行之後，立刻切到資料庫網頁，不用重整，就可以看到資料變更，而且一開始還有顏色變化，做的很不錯。

其實也可以一次設定一個 JSON 資料，官方文件有這樣的例子。

function writeUserData(userId, name, email, imageUrl) {  firebase.database().ref('users/' + userId).set({
    username: name,
    email: email,
    profile_picture : imageUrl
  });
}

2. 更新資料

和設定資料 set 類似，update 是更新資料。

如果只是更新部份的 JSON ，就用 update。

若不小心用 set，就會把全部節點取代成原本只想更新的部份資料而已。

update_fb = () => {
     firebase.database().ref(this.state.key).update(this.state.vala);
   }

3. 推送資料

push 是推送資料，它會先產生一個唯一的 key，然後把資料推出去。

如果要取得唯一的 key，可以用 push().key 取得，如程式示範。

   push_fb = () => {
     var key = this.state.key;
     var Data = {
       "key": key,
       "value": this.state.val
     }
     var indexkey = firebase.database().ref("push").push(Data).key;
     this.setState({key:indexkey})
   }

按下 push，紅色那串就是取回來的 key。

綠色就是被 push 進去的資料。(節點不一定要用 "push"，這是隨意取的)

 

4. 刪除資料

 

在指定節點用 .remove() 就可以刪除了，懶得試了。

delete_fb = () => {
   firebase.database().ref(this.state.key).remove();
}

 5. 讀取資料

 

讀取資料有二種，一直是持續監督資料，一種是只讀取一次，這裡只測試讀取一次。

 

程式如下：

 

geter_fb = () => {
     var self = this;
          firebase.database().ref(this.state.key).once('value').then(function(snapshot) {
       self.setState({val:snapshot.val()});
     });
   }

 

看起來有一點麻煩，就是呼叫 .once(‘value’).then 後面就是 callback 函數。

 

傳回是 snapshot，利用 snapshot.val() 就可以取得資料了。

 

如果這是個 JSON 資料，可以使用 snapshot.val().tel 取得內層 tel 的資料。

 

知道了這些，基本的使用應該就沒問題了。