介紹

Firebase 強調是realtime的 Database 所以常會被拿來當作導航定位 或是聊天室即時通訊的Database這次來介紹一下 Web API 開發的步驟

先去 Firebase的 console 先拿到 api Key與設定檔案
https://console.firebase.google.com/

  var config = {
    apiKey: "apiKey",
    authDomain: "projectId.firebaseapp.com",
    databaseURL: "https://databaseName.firebaseio.com",
    storageBucket: "bucket.appspot.com"
  };
  firebase.initializeApp(config);
  var database = firebase.database();

記得 Next.js 中安裝一下 firebase 套件，因為如果要做到SSR記得也要安裝 firebase-admin套件並下載 Server Part的金鑰

因為 Firebase是使用 JSON節點方式 存放資料結構，接下建構一個資料結構，以官方為例

{
  "users": {
    "alovelace": {
      "name": "Ada Lovelace",
      "contacts": { "ghopper": true },
    },
    "ghopper": { ... },
    "eclarke": { ... }
  }
}

在設計這類的節點時候，官方說可以有32層的節點結構但是希望是以平坦化開發會比較好，因為當允許訪問節點的時候表示該節點以下的資訊都可以被訪問到。

設計上也應該要避免巢狀結構

{
  "chats": {
    "one": {
      "title": "Historical Tech Pioneers",
      "messages": {
        "m1": { "sender": "ghopper", "message": "Relay malfunction found. Cause: moth." },
        "m2": { ... },
        // 如果這邊的訊息太多，表示當拿到one的時候或是two的時候就要把全部的東西載下來
      }
    },
    "two": { ... }
  }
}

如果以這個例子，比較好的設計是先幫所有的成員定義好，在定義一個 messages來存放聊天室的資料， member的聊天記錄這樣就不會有一次載入太多資訊的問題

{
  "chats": {
    "one": {
      "title": "Historical Tech Pioneers",
      "lastMessage": "ghopper: Relay malfunction found. Cause: moth.",
      "timestamp": 1459361875666
    },
    "two": { ... },
    "three": { ... }
  },
 
  "members": {
     "one": {
      "ghopper": true,
      "alovelace": true,
      "eclarke": true
    },
    "two": { ... },
    "three": { ... }
  },

  "messages": {
    "one": {
      "m1": {
        "name": "eclarke",
        "message": "The relay seems to be malfunctioning.",
        "timestamp": 1459361875337
      },
      "m2": { ... },
      "m3": { ... }
    },
    "two": { ... },
    "three": { ... }
  }
}

設計的可以有scale

以下這個Data結構 ，雖然可以快速查詢到user底下的 alovelace 屬於哪些groups，但是當
groups被改名字的時候，其實是不會連動的這樣的設計很不好這時候把groups底下使用id使用index查詢會更好

/users/$uid/groups/$group_id

{
"users": {
"alovelace": {
"name": "Ada Lovelace",
"groups": {
"techpioneers": true,
"womentechmakers": true
}
},
...
},
"groups": {
"techpioneers": {
"name": "Historical Tech Pioneers",
"members": {
"alovelace": true,
"ghopper": true,
"eclarke": true
}
},
...
}
}

總結

Firebase是一個 real database 在各種運用 iot，聊天室，推播 等等都常會看到來幫Next.js也 裝備一下吧

https://firebase.google.com/docs/database/web/start