Node.js - 引用 Firebase 當作資料庫

選擇 Firebase 原因

此次練習會選擇用 Firebase 是因為只要有 Google 帳號就能開通此服務，並且免費方案就相當好用，亦可透過 JaveScript 來改變資料內容，算是入門門檻比較低的，相關方案與費用可以參考此連結。

安裝環境須知

Windows 10
Firebase 8

起手式

首先到 Firebase 的首頁，並且註冊或登入 Google 帳號。

帳號啟用後可以再到右上角的 Go to Console 去新增一個資料庫。

點選第一個新增專案的方塊，

輸入一個自己喜歡的專案名稱，新增一個屬於自己存放資料的空間。

然後再看看要不要使用 Google Analytics 的功能，因為這次是練習用所以沒有開啟，但我的部落格有使用。

完成後選擇建立專案，就會看到專案多一個剛剛建立的專案方塊，

會看到專案的首頁，並且選擇紅框的選項，代表要在網頁中使用 Firebase，

然後按照步驟進行：

註冊應用程式

使用 Firebase v8.x 版本

本次練習使用 Firebase v8 版本，可先掛載對應的 CDN：

1 2	<script src="https://www.gstatic.com/firebasejs/8.9.1/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/8.9.1/firebase-database.js"></script>

要確認 firebase-app.js 跟 firebase-database.js 這兩支 CDN 的版本號要相同才能正常運作。

再來把註冊專案時 Firebase 提供配置檔複製，並使用 Firebase 帶入 initializeApp 此方法中，並將配置檔當參數帶入。

<script>
     const firebaseConfig = {
       apiKey: "XxxxXxxxXxxxAvRJxhkVpSR8Lfb6JqZ1GE-jBfuY", // 您的 Firebase API key
       authDomain: "nodejsproject-d099d.firebaseapp.com",
       projectId: "nodejsproject-d099d",
       storageBucket: "nodejsproject-d099d.appspot.com",
       messagingSenderId: "620886577949",
       appId: "1:620886577949:web:bb7819e6cb71ffb05307f4",
       measurementId: "G-CKJW9DEX9H",
     };

     firebase.initializeApp(firebaseConfig);

     const database = firebase.database();
     console.log(database);
   </script>

宣告一個變數 database，從 firebase 中選擇一個 database 的方法，並將其內容印出來看看，是否有正確取得 firebase 的服務。

若有出現上圖內容，代表有正確取得服務囉！

而上方我會用一個 firebase.js 的檔案存檔，原因是我比較喜歡程式碼看起來整齊與簡潔，完整的程式碼會變這樣：

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- script -->
    <script src="https://www.gstatic.com/firebasejs/8.9.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.9.1/firebase-database.js"></script>
    <script src="./script/firebase.js"></script>
  </body>
</html>