Skip to Content

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

 

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

 

回應

發表新回應

這個欄位的內容會保密,不會公開顯示。
  • 自動將網址與電子郵件地址轉變為連結。
  • 自動斷行和分段。
  • 可使用的 HTML 標籤:<a> <address> <b> <blockquote> <br> <caption> <center> <cite> <code> <dd> <del> <div> <dl> <dt> <em> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <ins> <li> <ol> <p> <pre> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <th> <tr> <u> <ul>
    Allowed Style properties: background, background-attachment, background-color, background-image, background-position, background-repeat, border, border-bottom, border-bottom-color, border-bottom-style, border-bottom-width, border-collapse, border-color, border-left, border-left-color, border-left-style, border-left-width, border-right, border-right-color, border-right-style, border-right-width, border-spacing, border-style, border-top, border-top-color, border-top-style, border-top-width, border-width, bottom, caption-side, clip, color, direction, empty-cells, font, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, height, left, letter-spacing, line-height, list-style, list-style-image, list-style-position, list-style-type, margin, margin-bottom, margin-left, margin-right, margin-top, max-height, max-width, min-height, min-width, overflow, padding, padding-bottom, padding-left, padding-right, padding-top, right, table-layout, text-align, text-decoration, text-indent, text-transform, top, unicode-bidi, vertical-align, white-space, width, word-spacing, z-index

更多關於格式選項的資訊

CAPTCHA
驗證碼只有阿拉伯數字, 這是躲廣告用的, 麻煩你輸入了.
Image CAPTCHA
Enter the characters shown in the image.


story | about seo