Firebase 設定與測試

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

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

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

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

image

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

image

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

image

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

image

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

image

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

 

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

 

image

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

 

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

 

image

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

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

image

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

image

 
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,結果如下:

image

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

其實也可以一次設定一個 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。

image

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

 

image

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 的資料。

 

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

 
重要度:
文章分類:

發表新回應