火箱速成课程

该前端开发人员指南揭开了火底的奥秘。我们将探讨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中文网其他相关文章！