火箱速成課程

該前端開發人員指南揭開了火底的奧秘。我們將探討Firebase的功能，其好處和實際例子。但是首先，簡短的歷史...

八年前，安德魯·李（Andrew Lee）和詹姆斯·坦普林（James Tamplin）推出了一家實時聊天創業公司Envolve。 Ricky Martin和Limp Bizkit等名人用戶的推動，其成功源於其易用性和快速消息傳遞。 Envolve是一個簡單的聊天小部件 - 添加到處理所有內容的頁面上的腳本標籤。它有效地為聊天消息提供了預製的數據庫和服務器。

隨著Envolve的發展，出現了一個令人驚訝的趨勢：開發人員不僅在聊天，而且是出於各種目的（game數據，高分，高分，應用程序設置等）使用的（通常是看不見的）小部件。他們利用小部件的實時功能來實現無縫數據同步，繞開了對複雜的後端開發的需求。

這種頓悟導致了火基的創建。創始人設想了一個平台，使開發人員能夠迅速構建和擴展應用程序，從而消除了後端基礎設施的負擔，並允許他們專注於前端。

了解火池

firebase只是一個數據庫嗎？並非完全。雖然最初是一個實時雲數據庫，但Firebase已演變為一個全面的平台，涵蓋了開發人員的基礎架構和營銷人員工具。目前，它擁有19種集成產品，每種產品旨在支持應用程序開發的特定方面，並為應用程序性能和用戶行為提供寶貴的見解。這些產品可以單獨或集體使用以形成完整的後端解決方案。

這是對Firebase的各種產品的一瞥：

• 託管：每個github拉的請求都輕鬆部署網站更新。
• Firestore：無服務器管理的實時數據庫功能，甚至離線。
• Auth：使用各種提供商的用戶身份驗證和管理。
• 存儲：用於用戶生成的內容的安全存儲（圖像，視頻等）。
• 雲功能：由事件（數據創建，用戶註冊等）觸發的無服務器功能。
• 擴展：帶有用戶界面的預構建功能（例如，條紋付款，翻譯服務）。
• Google Analytics（分析）：全面的用戶活動跟踪和分析。
• 遠程配置：用於功能標誌和A/B測試的動態鍵值存儲。
• 性能監控：詳細的性能指標和自定義痕跡。
• 雲消息傳遞：跨平台推送通知。

這只是Firebase功能的一小部分。您無需使用每種服務；為您的項目選擇相關工具是完全可以接受的。讓我們深入研究實際應用。

以下各節將指導您設置Firebase並使用嵌入式示例演示其功能。這是一個高級概述，而不是分步教程。有關詳細的教程，請發表評論！

設置firebase

如果您打算將演示應用程序與自己的Firebase後端集成在一起，則本節至關重要。如果您熟悉Firebase項目，請跳過此問題。

Firebase是基於雲的，需要初始帳戶設置。但是，使用本地模擬器可能會脫機開發。本指南使用Codepen，需要建立雲連接。該過程涉及創建一個燃料項目，並檢索用於前端集成的必要配置。

創建一個firebase項目

導航到火箱控制台。您現在可以跳過Google Analytics（分析）設置。

創建Web Firebase應用程序

創建一個新的Web應用程序並為其分配一個名稱。火箱項目可以包含多個應用程序。創建後，您將收到一個配置對象：

令Firebaseconfig = {
  Apikey：“你的鑰匙”，
  Authdomain：“您的domain.firebaseapp.com”，
  ProjectID：“您的項目”，
  儲藏室：“ your-projectid.appspot.com”，
  Messagingsenderid：“ your-senderid”，
  appid：“ your-appid”，
  測量值：“您的測量”
};

這種配置將您的前端連接到火底。在您的前端代碼中包括這些屬性是安全的。安全機制將在稍後解釋。

現在，讓我們以代碼表示此應用。該應用程序充當跨火基服務的共享邏輯和身份驗證的容器。我們將使用來自CDN的Firebase庫（儘管也支持模塊捆綁器）。

 //這支筆通過codepen中的“添加外部腳本”選項添加firebase
// https://www.gstatic.com/firebasejs/8.2.10/firebase-app.js
// https://www.gstatic.com/firebasejs/8.2.10/firebase-auth.js

//在Firebase控制台上創建一個項目
//（console.firebase.google.com）
令Firebaseconfig = {
  Apikey：“你的鑰匙”，
  Authdomain：“您的domain.firebaseapp.com”，
  ProjectID：“您的項目”，
  儲藏室：“ your-projectid.appspot.com”，
  Messagingsenderid：“ your-senderid”，
  appid：“ your-appid”，
  測量值：“您的測量”
};

//創建您的Firebase應用程序
讓FirebaseApp = firebase.Initializeapp（firbaseconfig）;
// auth實例
console.log（firebaseapp.auth（））;

接下來，啟用所需的壁壘服務。

啟用身份驗證提供商

這些示例利用身份驗證用於用戶登錄和數據安全。最初，出於安全原因，身份驗證提供商被禁用。在“身份驗證”選項卡中啟用Google和匿名登錄方法。請記住，將Codepen添加為用於測試目的的授權域（但在生產中刪除）。

創建Firestore數據庫

在“測試模式”中創建Firestore數據庫。安全將稍後解決。

現在，讓我們探索現實世界中的用例。

用戶身份驗證

應用功能通常需要用戶帳戶。讓我們探索匿名身份驗證和Google登錄。

匿名身份驗證

Firebase的匿名身份驗證允許用戶無需註冊即可訪問該應用程序，從而為數據關聯提供了臨時用戶ID。

（代碼示例演示匿名登錄和配置文件更新，以簡短省略）

Google身份驗證

Google登錄與匿名身份驗證相似。

（為簡短而省略的Google登錄的代碼示例）

監視身份驗證狀態

onAuthStateChanged方法跟踪身份驗證的更改，從而根據登錄狀態啟用UI更新。

（為簡短而省略了onAuthStateChanged代碼示例）

將客人轉換為永久用戶

使用linkWithRedirect可以將訪客帳戶升級到永久帳戶。

（代碼示例演示為簡潔而省略的帳戶的示例）

處理帳戶合併錯誤

在帳戶合併期間，錯誤處理至關重要。

（代碼示例說明省略了錯誤處理的代碼）

數據可視化和實時數據流

本節重點是創建餅圖並將其與Firestore數據同步。

（為簡潔而省略的圓錐級別和CSS自定義屬性的說明）

（代碼示例演示Firestore數據檢索和餅圖更新省略了）

NOSQL數據庫中的數據建模

Firestore是一個NOSQL文檔數據庫，具有收集和文檔的層次結構。數據建模涉及使用收集和子收集有效地構建數據。

（證明firestore數據檢索和查詢的代碼示例為簡潔而省略）

將數據流到可視化

Firestore的.onSnapshot()方法啟用實時數據流。

（代碼示例演示了為簡潔而省略的實時數據流的代碼）

使用Firebase安全規則保護數據庫

安全規則控制Firebase中的數據訪問。它們在服務器上以每個請求進行評估。

（說明安全規則和為簡潔而省略的示例）

結論

本指南涵蓋了使用Firebase的用戶身份驗證，數據建模，實時數據同步和數據庫安全性。請記住要探索其他壁爐資源以進行進一步學習。 Firebase簡化了後端管理，使開發人員可以專注於前端。

以上是火箱速成課程的詳細內容。更多資訊請關注PHP中文網其他相關文章！