react 存取 firebase 即時資料庫

延續上篇 如何發布 react 專案到 firebase

本篇將討論當成功將 react 部署至 firebase 後，該如何存取 firebase 提供的即時資料庫

閱讀文章前，請先確定

1. 對 react 有基本了解，至少知道 react 是什麼
2. 已閱讀過 如何發布 react 專案到 firebase

我們將分成三個步驟討論

1. 建立 firebase 即時資料庫連線
2. 在 react 建立表單（form），供新增資料至資料庫
3. 更新頁面，顯示資料庫內容

步驟一 建立資料庫連線

進入 firebase console 底下的 react-firebase-sample 專案並點選“將Firebase加入您的網路應用程式“
＊專案名稱請參考在 如何發布 react 專案到 firebase 中建立的名稱

此時 Firebase 便會提供一組設定供存取 Firebase api 使用

其中 config 包含了所需要的設定，之後會需要使用到。開啟 react 專案，並在 src 目錄底下新增一個 fire.js 檔案，內容如下

fire.js 引用 firebase 模組進行設定並初始化。之後就可以利用它來存取 firebase

• firebase api 請透過 npm install firebase --save 安裝
• 請把 config 中的內容置換成 firebase console 中所提供的內容。

步驟二 建立表單

如上圖所示，我們將會建立一個極簡易的表單，只包含一個輸入訊息的 Input 以及一個送出資料的按鈕。
開啟 react 專案中 src/App.js 將內容置換為

然後執行 npm start 網頁就會運行在 http://localhost:3000 的位置。當按下提交時，訊息就會被清空。而我們的目的是當輸入完內容並按下提交後，訊息便會新增至 firebase 資料庫中，因此我們必須要修改 addMessage 這個函數讓資料能夠送到 firebase。
首先，引用 fire.js 並在 addMessage 中，將訊息新增到資料庫


完成後重新整理頁面並嘗試新增一筆資料後應該會發現權限不足無法新增資料

這是因為 firebase 預設不允許未經授權的人存取資料庫。因此我們需要把資料庫的權限打開才能夠讓資料順利地被新增到資料庫，有兩種做法

1. 透過 firebase console 設定
2. 修改 database.rules.json 並發佈至 firebase

＊database.rules.json 是 firebase init 時被建立的檔案

第一個方法可以在 firebase console -> database -> rules 中修改

這裡我們將讀寫的權限都打開，因此讓任何人都可以存取資料庫
第二個方法是修改 database.rules.json 的內容並透過 firebase deploy 發佈至 firebase

權限變更成功後，我們可以再一次嘗試新增資料 test 到資料庫。結果可以在 firebase console -> database -> 資料中看到

步驟三 顯示頁面

到這裡，資料已經可以順利的新增到資料庫中。接下來我們要即時的顯示資料庫內容，即當新增資料的同時將新增資料的內容顯示在頁面上