cloud service

Firebase 對於 Realtime Database 的初步使用

81 / 100

Firebase 對於 Realtime Database 的初步使用

Google 提供多項的免費雲端服務,個人覺得有一個還不錯的雲端服務: Firebase ,可以作為步入雲端開發的學習,在 Firebase 中包含了許多整合服務,而且可以運用在 iOS 及 Android 上,可以看下方的影片介紹。

申請網站: https://firebase.google.com/

首先建立一個專案,建立一個專案只要三步驟,相當簡單就不在此說明,這次是要使用它的 Realtime Database 服務,所以依序來建置:

建立 Realtime Database

選擇 Realtime Database ,並點選 建立資料庫

選擇資料庫放置的地理位置

因為要讓外面的應用程式可以連線讀取,所以選擇 “以測試模式啟動

啟用後,最初始的狀況會給予這個資料庫一個連線網址,一開始也就是根節點(root)

建立資料

按 + 後,建立一個節點 vue2-spa,但要給這個節點一個 名稱 (name) 及 值 (value) 才可以。每個節點可以把它想作是一個 table。更好理解的方式是,它其實是以 json 型態儲存,類似 MongoDB

點選 vue2-spa 進入這個節點

若要在這個節點 vue2-spa下再建立資料(節點),需要先將值(value) vue2 刪除

這時,它會出現警告,它的意思是說:會將此節點以下的資料刪除,因為本來就沒有資料,所以直接按刪除即可。

這時候又回到類似 根節點(root) 的狀態。

再按 + 後,可以依序建立您所需要的資料

下圖是完成後的資料結構

建立規則

為了讓遠端的應用程式可以取得 Realtime Database 的資料,需要建立讀取規則,一開始它預設是可以存取所有的資料

{
  "rules": {
    ".read": "now < 1616256000000",  // 2021-3-21
    ".write": "now < 1616256000000",  // 2021-3-21
  }
}

若要讀取 vue2-spa 節點以下的資料,可以使用 Firefox 或 Chrome 連到 https://fir-1a50d-default-rtdb.firebaseio.com/vue2-spa.json 即可

但這樣的安全性是有問題的,所以依 Realtime Database Rules ,來針對 vue2-spa 節點設定唯讀規則。

{
  "rules": {
    "vue2-spa" :{
      ".read":"true",
        ".write":"false",
    }
  }
}

位置要改為 /vue2-spa,右下角有個 “執行” 按鈕,可以作模擬測試,記得要按 “發布” 才會生效

若將 “.read” 改為 “false” , 那麼就會被拒絕讀取

在流覽器看到的會是

用 Chrome 的 Devtools 看,它會回應一個 401 Unauthorized 的錯誤。