最近才知道 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 的資料。
知道了這些,基本的使用應該就沒問題了。
- 瀏覽次數:14029
發表新回應