Firebase - 快速指南

上一頁
下一頁

Firebase - 概覽

根據官方 Firebase 文件 -

Firebase 可以為您的應用後端提供支援，包括資料儲存、使用者身份驗證、靜態託管等。專注於建立卓越的使用者體驗。其餘部分我們將為您處理。使用我們的 Android、iOS 和 JavaScript SDK 構建跨平臺原生移動和 Web 應用。您還可以使用我們的伺服器端庫或 REST API 將 Firebase 連線到您現有的後端。

Firebase 功能

  • 即時資料庫 - Firebase 支援 JSON 資料，並且連線到它的所有使用者在每次更改後都會收到即時更新。

  • 身份驗證 - 我們可以使用匿名、密碼或不同的社交身份驗證。

  • 託管 - 應用程式可以透過安全連線部署到 Firebase 伺服器。

Firebase 優勢

  • 它簡單易用。無需複雜的配置。

  • 資料是即時的，這意味著每次更改都會自動更新連線的客戶端。

  • Firebase 提供簡單的控制面板。

  • 有很多有用的服務可供選擇。

Firebase 限制

  • Firebase 免費計劃限於 50 個連線和 100 MB 的儲存空間。

在下一章中，我們將討論 Firebase 的環境設定。

Firebase - 環境設定

在本章中，我們將向您展示如何將 Firebase 新增到現有應用程式中。我們將需要NodeJS。如果您還沒有，請檢視以下表格中的連結。

序號 軟體及描述
1

NodeJS 和 NPM

NodeJS 是 Firebase 開發所需的平臺。檢視我們的 NodeJS 環境設定。

步驟 1 - 建立 Firebase 帳戶

您可以在 此處 建立 Firebase 帳戶。

步驟 2 - 建立 Firebase 應用

您可以從儀表板頁面建立新的應用。下圖顯示了我們建立的應用。我們可以點選管理應用按鈕進入應用。

Firebase Environment Setup

步驟 3a - 建立基本的 HTML/js 應用

您只需要建立一個資料夾來放置您的應用。在該資料夾內，我們將需要index.html 和index.js 檔案。我們將 Firebase 新增到應用的頭部。

index.html

<html>
   <head>
      <script src = "https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
      <script type = "text/javascript" src = "index.js"></script>
   </head>
	
   <body>

   </body>
</html>

步驟 3b - 使用 NPM 或 Bower

如果您想使用您的現有應用，您可以使用 Firebase NPM 或 Bowers 包。從您的應用根資料夾執行以下命令之一。

npm install firebase --save


bower install firebase

Firebase - 資料

Firebase 資料表示 JSON 物件。如果您從 Firebase 儀表板開啟您的應用，可以透過點選+ 按鈕手動新增資料。

我們將建立一個簡單的資料結構。您可以檢視下面的圖片。

Firebase Data Simple

在上一章中，我們將 Firebase 連線到我們的應用。現在，我們可以將 Firebase 記錄到控制檯。

console.log(firebase)
Firebase Data Log

我們可以建立一個對我們的玩家集合的引用。

  
var ref = firebase.database().ref('players');

console.log(ref);

我們可以在控制檯中看到以下結果。

Firebase Data Players Log

Firebase - 陣列

本章將解釋 Firebase 對陣列的表示。我們將使用上一章中的相同資料。

Firebase Arrays Simple

我們可以透過將以下 JSON 樹傳送到玩家集合來建立此資料。

['john', 'amanda']

這是因為 Firebase 不直接支援陣列，但它會建立一個以整數作為鍵名的物件列表。

不使用陣列的原因是 Firebase 充當即時資料庫，如果幾個使用者同時運算元組，結果可能會出現問題，因為陣列索引會不斷變化。

Firebase 處理它的方式是，鍵（索引）將始終保持不變。我們可以刪除john，amanda 仍然具有鍵（索引）1。

Firebase Arrays Changed

Firebase - 寫入資料

在本章中，我們將向您展示如何將資料儲存到 Firebase。

設定

set 方法將在指定路徑上寫入或替換資料。讓我們建立一個對玩家集合的引用，並設定兩個玩家。

var playersRef = firebase.database().ref("players/");

playersRef.set ({
   John: {
      number: 1,
      age: 30
   },
	
   Amanda: {
      number: 2,
      age: 20
   }
});

我們將看到以下結果。

Firebase Write Data Set

更新

我們可以以類似的方式更新 Firebase 資料。請注意我們如何使用players/john 路徑。

var johnRef = firebase.database().ref("players/John");

johnRef.update ({
   "number": 10
});

重新整理應用後，我們可以看到 Firebase 資料已更新。

Firebase Write Data Update

Firebase - 寫入列表資料

在上一章中，我們向您展示瞭如何在 Firebase 中寫入資料。有時您需要為資料提供唯一的識別符號。當您想要為資料建立唯一識別符號時，需要使用 push 方法而不是 set 方法。

Push 方法

push() 方法在推送資料時會建立一個唯一的 ID。如果我們想使用唯一的 ID 建立上一章中的玩家，可以使用下面給出的程式碼片段。

var ref = new Firebase('https://tutorialsfirebase.firebaseio.com');

var playersRef = ref.child("players");
playersRef.push ({
   name: "John",
   number: 1,
   age: 30
});

playersRef.push ({
   name: "Amanda",
   number: 2,
   age: 20
});

現在我們的資料看起來會有所不同。名稱將只是與其他屬性一樣的名稱/值對。

Firebase Write List Data Push

Key 方法

我們可以使用key() 方法從 Firebase 獲取任何鍵。例如，如果我們想獲取我們的集合名稱，可以使用以下程式碼片段。

var ref = new Firebase('https://tutorialsfirebase.firebaseio.com');

var playersRef = ref.child("players");

var playersKey = playersRef.key();
console.log(playersKey);

控制檯將記錄我們的集合名稱 (players)。

Firebase Write List Data Key

我們將在接下來的章節中詳細介紹。

Firebase - 寫入事務資料

事務資料用於當您需要從資料庫返回一些資料，然後對其進行一些計算並將其儲存回去時。

假設我們在玩家列表中有一個玩家。

Firebase Write Transactional Data Start

我們想要檢索屬性，增加一年的年齡並將其返回到 Firebase。

amandaRef 正在從集合中檢索年齡，然後我們可以使用 transaction 方法。我們將獲取當前年齡，增加一年並更新集合。

var ref = new Firebase('https://tutorialsfirebase.firebaseio.com');

var amandaAgeRef = ref.child("players").child("-KGb1Ls-gEErWbAMMnZC").child('age');

amandaAgeRef.transaction(function(currentAge) {
   return currentAge + 1;
});

如果我們執行此程式碼，我們可以看到年齡值已更新為21。

Firebase Write Transactional Data Update

Firebase - 讀取資料

在本章中，我們將向您展示如何讀取 Firebase 資料。下圖顯示了我們要讀取的資料。

Firebase Read Data DB

我們可以使用on() 方法來檢索資料。此方法將事件型別作為"value"，然後檢索資料的快照。當我們將val() 方法新增到快照時，我們將獲得資料的 JavaScript 表示形式。

示例

讓我們考慮以下示例。

var ref = firebase.database().ref();

ref.on("value", function(snapshot) {
   console.log(snapshot.val());
}, function (error) {
   console.log("Error: " + error.code);
});

如果我們執行以下程式碼，我們的控制檯將顯示資料。

Firebase Read Data Log

在下一章中，我們將解釋您可以用於讀取資料的其他事件型別。

Firebase - 事件型別

Firebase 提供了幾種不同的事件型別用於讀取資料。下面描述了一些最常用的事件型別。

value

第一個事件型別是value。我們在上一章中向您展示瞭如何使用 value。此事件型別將在每次資料更改時觸發，並且它將檢索所有資料，包括子級。

child_added

此事件型別將為每個玩家以及每次向我們的資料新增新玩家時觸發一次。它對於讀取列表資料很有用，因為我們可以訪問新增的玩家和列表中的先前玩家。

示例

讓我們考慮以下示例。

var playersRef = firebase.database().ref("players/");

playersRef.on("child_added", function(data, prevChildKey) {
   var newPlayer = data.val();
   console.log("name: " + newPlayer.name);
   console.log("age: " + newPlayer.age);
   console.log("number: " + newPlayer.number);
   console.log("Previous Player: " + prevChildKey);
});

我們將獲得以下結果。

Event Type Child Added Log

如果我們新增一個名為 Bob 的新玩家，我們將獲得更新後的資料。

Event Type Child Added Updated Log

child_changed

此事件型別在資料更改時觸發。

示例

讓我們考慮以下示例。

var playersRef = firebase.database().ref("players/");

playersRef.on("child_changed", function(data) {
   var player = data.val();
   console.log("The updated player name is " + player.name);
});

我們可以在 Firebase 中將Bob 更改為Maria 以獲取更新。

Event Type Child Changed Log

child_removed

如果我們想訪問已刪除的資料，可以使用child_removed 事件型別。

示例

var playersRef = firebase.database().ref("players/");

playersRef.on("child_removed", function(data) {
   var deletedPlayer = data.val();
   console.log(deletedPlayer.name + " has been deleted");
});

現在，我們可以從 Firebase 中刪除 Maria 以獲取通知。

Event Type Child Deleted Log

Firebase - 解除回撥

本章將向您展示如何在 Firebase 中解除回撥。

事件型別的回撥解除

假設我們想要解除具有value 事件型別的函式的回撥。

示例

var playersRef = firebase.database().ref("players/");

ref.on("value", function(data) {
   console.log(data.val());
}, function (error) {
   console.log("Error: " + error.code);
});

我們需要使用off() 方法。這將刪除所有具有value 事件型別的回撥。

playersRef.off("value");

解除所有回撥

當我們想要解除所有回撥時，可以使用 -

playersRef.off();

Firebase - 查詢

Firebase 提供了多種排序資料的方式。在本章中，我們將展示簡單的查詢示例。我們將使用我們前面章節中的相同資料。

Firebase Queries Data

按子級排序

要按名稱排序資料，可以使用以下程式碼。

示例

讓我們考慮以下示例。

var playersRef = firebase.database().ref("players/");

playersRef.orderByChild("name").on("child_added", function(data) {
   console.log(data.val().name);
});

我們將看到按字母順序排列的名稱。

Firebase Queries Order By Child

按鍵排序

我們可以以類似的方式按鍵排序資料。

示例

讓我們考慮以下示例。

var playersRef = firebase.database().ref("players/");

playersRef.orderByKey().on("child_added", function(data) {
   console.log(data.key);
});

輸出將如下所示。

Firebase Queries Order By Key

按值排序

我們還可以按值排序資料。讓我們在 Firebase 中新增 ratings 集合。

Firebase Queries Rating Data

現在我們可以按每個玩家的值排序資料。

示例

讓我們考慮以下示例。

var ratingRef = firebase.database().ref("ratings/");

ratingRef.orderByValue().on("value", function(data) {
   
   data.forEach(function(data) {
      console.log("The " + data.key + " rating is " + data.val());
   });
   
});

輸出將如下所示。

Firebase Queries Rating Log

Firebase - 過濾資料

Firebase 提供了幾種過濾資料的方式。

限制到第一個和最後一個

讓我們瞭解限制到第一個和最後一個是什麼。

  • limitToFirst 方法返回從第一個開始的指定數量的項。

  • limitToLast 方法返回從最後一個開始的指定數量的項。

我們的示例顯示了它是如何工作的。由於我們資料庫中只有兩個玩家，我們將查詢限制為一個玩家。

示例

讓我們考慮以下示例。

var firstPlayerRef = firebase.database().ref("players/").limitToFirst(1);

var lastPlayerRef = firebase.database().ref('players/').limitToLast(1);

firstPlayerRef.on("value", function(data) {
   console.log(data.val());
}, function (error) {
   console.log("Error: " + error.code);
});

lastPlayerRef.on("value", function(data) {
   console.log(data.val());
}, function (error) {
   console.log("Error: " + error.code);
});

我們的控制檯將記錄第一個查詢中的第一個玩家，以及第二個查詢中的最後一個玩家。

Firebase Filtering Data Limit to First Last

其他過濾器

我們還可以使用其他 Firebase 過濾方法。startAt()、endAt() 和equalTo() 可以與排序方法結合使用。在我們的示例中，我們將它與orderByChild() 方法結合使用。

示例

讓我們考慮以下示例。

var playersRef = firebase.database().ref("players/");

playersRef.orderByChild("name").startAt("Amanda").on("child_added", function(data) {
   console.log("Start at filter: " + data.val().name);
});

playersRef.orderByChild("name").endAt("Amanda").on("child_added", function(data) {
   console.log("End at filter: " + data.val().name);
});

playersRef.orderByChild("name").equalTo("John").on("child_added", function(data) {
   console.log("Equal to filter: " + data.val().name);
});

playersRef.orderByChild("age").startAt(20).on("child_added", function(data) {
   console.log("Age filter: " + data.val().name);
});

第一個查詢將按名稱對元素進行排序，並從名為Amanda的玩家開始過濾。控制檯將記錄兩個玩家。第二個查詢將記錄“Amanda”，因為我們以這個名稱結束查詢。第三個查詢將記錄“John”，因為我們正在搜尋名為該名稱的玩家。

第四個示例展示瞭如何將過濾器與“age”值組合。與字串不同，我們正在startAt()方法中傳遞數字，因為年齡由數字值表示。

Firebase Filtering Data Start End Equal

Firebase - 最佳實踐

在本章中，我們將介紹 Firebase 的最佳實踐。

避免巢狀資料

當您從 Firebase 獲取資料時，您將獲得所有子節點。這就是為什麼深度巢狀不被認為是最佳實踐的原因。

資料反規範化

當您需要深度巢狀功能時，請考慮新增幾個不同的集合；即使您需要新增一些資料重複並使用多個請求來檢索您需要的內容。

Firebase - 郵箱認證

在本章中，我們將向您展示如何使用 Firebase 電子郵件/密碼身份驗證。

建立使用者

為了驗證使用者，我們可以使用createUserWithEmailAndPassword(email, password)方法。

示例

讓我們考慮以下示例。

var email = "myemail@email.com";
var password = "mypassword";

firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
   console.log(error.code);
   console.log(error.message);
});

我們可以檢查 Firebase 儀表盤，並看到使用者已建立。

Firebase Email Authentication User

登入

登入過程幾乎相同。我們使用signInWithEmailAndPassword(email, password)來登入使用者。

示例

讓我們考慮以下示例。

var email = "myemail@email.com";
var password = "mypassword";

firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
   console.log(error.code);
   console.log(error.message);
});

登出

最後，我們可以使用signOut()方法登出使用者。

示例

讓我們考慮以下示例。

firebase.auth().signOut().then(function() {
   console.log("Logged out!")
}, function(error) {
   console.log(error.code);
   console.log(error.message);
});

Firebase - Google 認證

在本章中，我們將向您展示如何在 Firebase 中設定 Google 身份驗證。

步驟 1 - 啟用 Google 身份驗證

開啟 Firebase 儀表盤，然後點選左側選單中的Auth。要開啟可用方法列表，您需要在選項卡選單中點選SIGN_IN_METHODS。

現在您可以從列表中選擇Google，啟用它並儲存。

步驟 2 - 建立按鈕

在我們的index.html中，我們將新增兩個按鈕。

index.html

<button onclick = "googleSignin()">Google Signin</button>
<button onclick = "googleSignout()">Google Signout</button>

步驟 3 - 登入和登出

在此步驟中，我們將建立登入和登出功能。我們將使用signInWithPopup()和signOut()方法。

示例

讓我們考慮以下示例。

var provider = new firebase.auth.GoogleAuthProvider();

function googleSignin() {
   firebase.auth()
   
   .signInWithPopup(provider).then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;
		
      console.log(token)
      console.log(user)
   }).catch(function(error) {
      var errorCode = error.code;
      var errorMessage = error.message;
		
      console.log(error.code)
      console.log(error.message)
   });
}

function googleSignout() {
   firebase.auth().signOut()
	
   .then(function() {
      console.log('Signout Succesfull')
   }, function(error) {
      console.log('Signout Failed')  
   });
}

重新整理頁面後，我們可以點選Google 登入按鈕來觸發 Google 彈出視窗。如果登入成功，開發人員控制檯將登入我們的使用者。

我們也可以點選Google 登出按鈕從應用中登出。控制檯將確認登出成功。

Firebase Google Auth Log

Firebase - Facebook 認證

在本章中，我們將使用 Firebase Facebook 身份驗證對使用者進行身份驗證。

步驟 1 - 啟用 Facebook Auth

我們需要開啟 Firebase 儀表盤，然後點選側邊欄選單中的Auth。接下來，我們需要在選項卡欄中選擇SIGN-IN-METHOD。我們將啟用 Facebook 身份驗證，並保持此視窗開啟，因為在完成步驟 2 後，我們需要新增App ID和App Secret。

步驟 2 - 建立 Facebook 應用

要啟用 Facebook 身份驗證，我們需要建立 Facebook 應用。點選此連結開始。建立應用後，我們需要將App ID和App Secret複製到 Firebase 頁面（我們在步驟 1 中保持開啟狀態）。我們還需要將OAuth Redirect URI從該視窗複製到 Facebook 應用中。您可以在 Facebook 應用儀表盤的側邊欄選單中找到+ 新增產品。

選擇Facebook 登入，它將出現在側邊欄選單中。您將找到輸入欄位Valid OAuth redirect URIs，您需要將 Firebase 中的OAuth Redirect URI複製到此處。

步驟 3 - 連線到 Facebook SDK

將以下程式碼複製到index.html中body標籤的開頭。請務必將'APP_ID'替換為您從 Facebook 儀表盤獲取的應用 ID。

示例

讓我們考慮以下示例。

<script>
   window.fbAsyncInit = function() {
      FB.init ({
         appId      : 'APP_ID',
         xfbml      : true,
         version    : 'v2.6'
      });
   };

   (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "//#/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
   } (document, 'script', 'facebook-jssdk'));
	
</script>

步驟 4 - 建立按鈕

我們在前三個步驟中設定了所有內容，現在我們可以建立兩個用於登入和登出的按鈕。

index.html

<button onclick = "facebookSignin()">Facebook Signin</button>
<button onclick = "facebookSignout()">Facebook Signout</button>

步驟 5 - 建立 Auth 函式

這是最後一步。開啟index.js並複製以下程式碼。

index.js

var provider = new firebase.auth.FacebookAuthProvider();

function facebookSignin() {
   firebase.auth().signInWithPopup(provider)
   
   .then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;
		
      console.log(token)
      console.log(user)
   }).catch(function(error) {
      console.log(error.code);
      console.log(error.message);
   });
}

function facebookSignout() {
   firebase.auth().signOut()
   
   .then(function() {
      console.log('Signout successful!')
   }, function(error) {
      console.log('Signout failed')
   });
}

Firebase - Twitter 認證

在本章中，我們將解釋如何使用 Twitter 身份驗證。

步驟 1 - 建立 Twitter 應用

您可以在此連結上建立 Twitter 應用。建立應用後，點選Keys and Access Tokens，您可以在其中找到API Key和API Secret。您將在步驟 2 中需要這些資訊。

步驟 2 - 啟用 Twitter 身份驗證

在您的 Firebase 儀表盤側邊欄選單中，您需要點選Auth。然後開啟SIGN-IN-METHOD選項卡。點選 Twitter 以啟用它。您需要新增步驟 1 中的API Key和API Secret。

然後您需要複製callback URL並將其貼上到您的 Twitter 應用中。當您點選Settings選項卡時，您可以在 Twitter 應用中找到 Callback URL。

步驟 3 - 新增按鈕

在此步驟中，我們將在index.html的body標籤內新增兩個按鈕。

index.html

<button onclick = "twitterSignin()">Twitter Signin</button>
<button onclick = "twitterSignout()">Twitter Signout</button>

步驟 4 - 身份驗證函式

現在我們可以建立 Twitter 身份驗證函式。

index.js

var provider = new firebase.auth.TwitterAuthProvider();

function twitterSignin() {
   firebase.auth().signInWithPopup(provider)
    
  .then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;
		
      console.log(token)
      console.log(user)
   }).catch(function(error) {
      console.log(error.code)
      console.log(error.message)
   });
}

function twitterSignout() {
   firebase.auth().signOut()
   
   .then(function() {
      console.log('Signout successful!')
   }, function(error) {
      console.log('Signout failed!')
   });
}

當我們啟動應用時，我們可以透過點選這兩個按鈕進行登入或登出。控制檯將確認身份驗證成功。

Firebase Twitter Auth Log

Firebase - Github 認證

在本章中，我們將向您展示如何使用 GitHub API 對使用者進行身份驗證。

步驟 1 - 啟用 GitHub 身份驗證

開啟 Firebase 儀表盤，然後從側邊欄選單中點選Auth，然後在選項卡欄中點選SIGN-IN-METHOD。您需要啟用 GitHub 身份驗證並複製Callback URL。您將在步驟 2 中需要此資訊。您可以保持此選項卡開啟，因為在完成步驟 2 後，您需要新增Client ID和Client Secret。

步驟 2 - 建立 Github 應用

按照此連結建立 GitHub 應用。您需要將 Firebase 中的Callback URL複製到Authorization callback URL欄位中。建立應用後，您需要將 GitHub 應用中的Client Key和Client Secret複製到 Firebase。

步驟 3 - 建立按鈕

我們將在body標籤中新增兩個按鈕。

index.html

<button onclick = "githubSignin()">Github Signin</button>
<button onclick = "githubSignout()">Github Signout</button>

步驟 4 - 建立 Auth 函式

我們將在index.js檔案中建立用於登入和登出的函式。

index.js

var provider = new firebase.auth.GithubAuthProvider();

function githubSignin() {
   firebase.auth().signInWithPopup(provider)
   
   .then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;
		
      console.log(token)
      console.log(user)
   }).catch(function(error) {
      var errorCode = error.code;
      var errorMessage = error.message;
		
      console.log(error.code)
      console.log(error.message)
   });
}

function githubSignout(){
   firebase.auth().signOut()
   
   .then(function() {
      console.log('Signout successful!')
   }, function(error) {
      console.log('Signout failed')
   });
}

現在我們可以點選按鈕來觸發身份驗證。控制檯將顯示身份驗證成功。

Firebase Github Auth Log

Firebase - 匿名身份驗證

在本章中，我們將對使用者進行匿名身份驗證。

步驟 1 - 啟用匿名 Auth

這與我們前面章節中的過程相同。您需要開啟 Firebase 儀表盤，然後從側邊欄選單中點選Auth，並在選項卡欄中點選SIGN-IN-METHOD。您需要啟用匿名身份驗證。

步驟 2 - 登入函式

我們可以使用signInAnonymously()方法進行此身份驗證。

示例

讓我們考慮以下示例。

firebase.auth().signInAnonymously()
.then(function() {
   console.log('Logged in as Anonymous!')
   
   }).catch(function(error) {
   var errorCode = error.code;
   var errorMessage = error.message;
   console.log(errorCode);
   console.log(errorMessage);
});

Firebase - 離線功能

在本章中，我們將向您展示如何處理 Firebase 連線狀態。

檢查連線

我們可以使用以下程式碼檢查連線值。

index.js

var connectedRef = firebase.database().ref(".info/connected");

connectedRef.on("value", function(snap) {
   if (snap.val() === true) {
      alert("connected");
   } else {
      alert("not connected");
   }
});

當我們執行應用時，彈出視窗將通知我們連線情況。

Firebase Offline Popup

透過使用上述函式，您可以跟蹤連線狀態並相應地更新您的應用。

Firebase - 安全性

Firebase 中的安全性透過在安全規則中設定 JSON 類似的物件來處理。當我們點選側邊欄選單中的Database，然後點選選項卡欄中的RULES時，可以找到安全規則。

在本章中，我們將介紹幾個簡單的示例，向您展示如何保護 Firebase 資料。

讀取和寫入

在 Firebase 安全規則中定義的以下程式碼片段將允許具有相同uid的已認證使用者寫入/users/'$uid'/，但所有人都可以讀取它。

示例

讓我們考慮以下示例。

{
   "rules": {
      "users": {
         
         "$uid": {
            ".write": "$uid === auth.uid",
            ".read": true
         }
         
      }
   }
}

驗證

我們可以透過使用以下示例強制資料為字串。

示例

{
   "rules": {
      
      "foo": {
         ".validate": "newData.isString()"
      }
      
   }
}

本章僅涉及 Firebase 安全規則的表面。重要的是要了解這些規則的工作原理，以便您可以在應用中組合它們。

Firebase - 部署

在本章中，我們將向您展示如何在 Firebase 伺服器上託管您的應用。

在開始之前，讓我們在index.html的 body 標籤中新增一些文字。在此示例中，我們將新增以下文字。

<h1>WELCOME TO FIREBASE TUTORIALS APP</h1>

步驟 1 - 安裝 Firebase 工具

我們需要在命令提示符視窗中全域性安裝 firebase 工具。

npm install -g firebase-tools

步驟 2 - 初始化 Firebase 應用

首先，我們需要在命令提示符中登入 Firebase。

firebase login

在命令提示符中開啟應用的根資料夾，然後執行以下命令。

firebase init

此命令將初始化您的應用。

注意 - 如果您使用了預設配置，則將建立public資料夾，並且此資料夾內的index.html將成為應用的起點。您可以將應用檔案複製到 public 資料夾作為解決方法。

步驟 3 - 部署 Firebase 應用

這是本章的最後一步。從命令提示符執行以下命令以部署您的應用。

firebase deploy

在此步驟之後，控制檯將記錄您的應用 Firebase URL。在我們的例子中，它被稱為https://tutorialsfirebase.firebaseapp.com。我們可以在瀏覽器中執行此連結以檢視我們的應用。

Firebase Deploying
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.