使用 JavaScript 中的簡單 Hello World Web 應用程式開始使用 Firebase

Created: November-22, 2018

此示例將演示如何使用 JavaScript 在 Web 應用程式中開始使用 Firebase。

我們將在 Firebase 資料庫中新增一個文字子項，並在我們的 Web 應用程式中實時顯示。

讓我們開始吧

轉到 Firebase 控制檯 - ![StackOverflow 文件](https://console.firebase.google.com> 並建立一個新專案。輸入專案名稱，國家/地區，然後單擊“ 建立專案” 。 <https://i.stack.imgur.com/R1ogK.png)

現在在你的計算機上建立一個檔案 index.html 。並新增以下程式碼。

  <body>
      <p>Getting started with Firebase</p>
      <h1 id="bigOne"></h1>
      <script>
            // your firebase JavaScript code here
      </script>

  </body>

現在轉到 Firebase 控制檯上的專案，你可以看到這一點
現在點選新增 Firebase 到你的網路應用程式。你將彈出以下內容，單擊複製按鈕

現在轉到 index.html 檔案並將程式碼段新增到指令碼部分，如下所示

  <body>

    <p>Getting started with Firebase</p>
    <h1 id="bigOne"></h1>

    <script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js"></script>
    <script>
      // Initialize Firebase
      var config = {
        apiKey: "apiKey",
        authDomain: "authDomain",
        databaseURL: "databaseURL",
        storageBucket: "storageBucket",
        messagingSenderId: "messagingSenderId"
      };
      firebase.initializeApp(config);
    </script>
  </body>

現在你已完成新增 Firebase 初始化程式碼。現在我們需要從資料庫中獲取文字值。

為此，請在 index.html 指令碼中新增以下程式碼（已在最後一步中新增的 Initialize Firebase。不要重新新增） ****

  <script>

      // Initialize Firebase
      var config = {
        apiKey: "apiKey",
        authDomain: "authDomain",
        databaseURL: "databaseURL",
        storageBucket: "storageBucket",
        messagingSenderId: "messagingSenderId"
      };
      firebase.initializeApp(config);

      // getting the text value from the database
      var bigOne = document.getElementById('bigOne');
      var dbRef = firebase.database().ref().child('text');
      dbRef.on('value', snap => bigOne.innerText = snap.val());

  </script>

現在我們已完成 index.html 檔案，現在讓我們去 Firebase 控制檯中的資料庫。
你現在會看到它的空白和空白。讓我們在資料庫中新增一個文字子項併為其新增任何值。 https://i.stack.imgur.com/RHRrW.jpg
現在點選“ 新增” 按鈕。
現在進入資料庫中的 RULES 部分。

出於開發目的，我們現在將啟用所有讀寫查詢。

  {
    "rules": {
        ".read": "true",
        ".write": "true"
      }
  }

StackOverflow 文件

現在在瀏覽器中開啟 index.html
你將在頁面上看到文字值如下 -
現在，如果你返回到資料庫並將文字子值更改為其他值，你將看到瀏覽器中的文字也會更改而不進行任何重新整理或重新載入。這就是實時資料庫在 Firebase 上的工作方式。