面向初学者的 10 个必备 Firebase 教程

在本教程中，我们将探讨 10 个面向初学者的 Firebase 入门技巧。Firebase 是一个强大的平台，可帮助软件开发人员快速构建和扩展应用程序。它提供丰富的功能，包括身份验证、实时数据库、云端 Firestore、存储、托管和部署。完成本教程后，您将对 Firebase 及其各种组件有深入的了解，并掌握如何使用它们来构建强大的 Web 和移动应用程序。

介绍

什么是 Firebase？

Firebase 是一个后端即服务 (BaaS) 平台，为开发者提供丰富的工具和服务，用于构建和扩展 Web 和移动应用程序。它最初由 Firebase 公司开发，后于 2014 年被 Google 收购。Firebase 提供一套全面的服务，包括身份验证、实时数据库、云端 Firestore、存储、托管和部署。

为什么要使用 Firebase？

Firebase 拥有诸多优势，使其成为开发者的理想之选。首先，它免去了您搭建和维护服务器基础设施的麻烦，让您可以专注于应用程序的开发。其次，Firebase 提供开箱即用的实时功能，使您能够轻松构建协作式交互式应用程序。最后，Firebase 与其他 Google Cloud 服务无缝集成，为您提供可扩展且可靠的基础设施。

Firebase 入门

在深入学习具体教程之前，您需要先设置一个 Firebase 项目。请按照以下步骤开始：

使用您的 Google 帐户登录 Firebase 控制台。
点击“添加项目”按钮，并为您的项目命名。
根据您计划学习的教程，启用必要的 Firebase 服务。
项目创建完成后，您将被重定向到项目控制面板。在这里，您可以访问各种 Firebase 服务并根据需要进行配置。

验证

用户注册

用户注册是任何应用程序的关键组成部分。在本教程中，我们将学习如何使用 Firebase Authentication 实现用户注册。以下是创建新用户的代码片段：



const email = "example@example.com";
const password = "password123";

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // User registration successful
    const user = userCredential.user;
    console.log("User registered:", user.uid);
  })
  .catch((error) => {
    // Handle registration errors
    const errorCode = error.code;
    const errorMessage = error.message;
    console.error("Registration failed:", errorCode, errorMessage);
  });

让我们来分析一下代码：

我们为新用户设置电子邮件地址和密码。
我们调用该createUserWithEmailAndPassword方法，firebase.auth()使用提供的电子邮件和密码创建一个新用户。
如果注册成功，then则执行该代码块，我们可以从中访问用户对象userCredential。
如果在注册过程中发生错误，catch则会执行该代码块，我们可以相应地处理该错误。

用户登录

用户登录是应用程序的另一项重要功能。在本教程中，我们将学习如何使用 Firebase Authentication 实现用户登录。以下是用户登录的代码片段：



const email = "example@example.com";
const password = "password123";

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // User login successful
    const user = userCredential.user;
    console.log("User logged in:", user.uid);
  })
  .catch((error) => {
    // Handle login errors
    const errorCode = error.code;
    const errorMessage = error.message;
    console.error("Login failed:", errorCode, errorMessage);
  });

我们来分析一下代码：

我们为尝试登录的用户定义电子邮件地址和密码。
我们调用该signInWithEmailAndPassword方法，firebase.auth()使用提供的电子邮件和密码对用户进行身份验证。
如果登录成功，then则执行该代码块，我们可以从中访问用户对象userCredential。
如果在登录过程中发生错误，catch则会执行该代码块，我们可以相应地处理该错误。

社交媒体认证

社交媒体身份验证允许用户使用现有的社交媒体帐户登录。在本教程中，我们将学习如何使用 Firebase Authentication 实现社交媒体身份验证。以下是使用 Google 帐户验证用户身份的代码片段：



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

firebase.auth().signInWithPopup(provider)
  .then((result) => {
    // User authentication successful
    const user = result.user;
    console.log("User authenticated:", user.uid);
  })
  .catch((error) => {
    // Handle authentication errors
    const errorCode = error.code;
    const errorMessage = error.message;
    console.error("Authentication failed:", errorCode, errorMessage);
  });

让我们来分析一下代码：

我们创建该类的一个实例firebase.auth.GoogleAuthProvider来指定身份验证提供程序（在本例中为 Google）。
我们调用该signInWithPopup方法firebase.auth()并传递提供程序以启动身份验证过程。
如果身份验证成功，then则执行该代码块，我们可以从中访问用户对象result。
如果在身份验证过程中发生错误，catch则会执行该代码块，我们可以相应地处理该错误。

实时数据库

创建和更新数据

实时数据库是由 Firebase 提供的 NoSQL 云托管数据库。在本教程中，我们将学习如何在实时数据库中创建和更新数据。以下是一个创建新用户的示例：



const database = firebase.database();
const usersRef = database.ref("users");

const newUser = {
  name: "John Doe",
  email: "johndoe@example.com"
};

const newUserRef = usersRef.push(newUser);
const userId = newUserRef.key;

console.log("User created with ID:", userId);

我们来分析一下代码：

我们使用以下方式获取对实时数据库的引用firebase.database()。
我们使用以下方式创建对数据库中“users”节点的引用database.ref("users")。
我们在对象中定义新用户的数据newUser。
我们使用该push方法将对象usersRef插入newUser数据库。这将为用户生成一个新的唯一键。
我们使用生成的密钥检索newUserRef.key并将其存储在userId变量中。
最后，我们将用户 ID 记录到控制台。

读取和查询数据

使用 Firebase 从实时数据库中读取和查询数据非常简单。在本教程中，我们将学习如何从实时数据库中读取和查询数据。以下示例演示如何通过 ID 检索用户：



const database = firebase.database();
const usersRef = database.ref("users");

const userId = "abc123";

usersRef.child(userId).once("value")
  .then((snapshot) => {
    const user = snapshot.val();
    console.log("User retrieved:", user);
  })
  .catch((error) => {
    // Handle read errors
    console.error("Failed to retrieve user:", error);
  });

让我们来分析一下代码：

我们使用以下方式获取对实时数据库的引用firebase.database()。
我们使用以下方式创建对数据库中“users”节点的引用database.ref("users")。
我们将要检索的用户的用户 ID 定义在userId变量中。
我们调用该child方法usersRef并传递参数userId以获取对特定用户的引用。
我们使用once用户引用上的方法来读取用户数据一次。
如果读取成功，then则执行该代码块，我们可以从中访问用户数据snapshot。
如果在读取操作期间发生错误，catch则执行该代码块，我们可以相应地处理该错误。

实时数据同步

实时数据库的关键特性之一是能够在客户端之间实时同步数据。在本教程中，我们将学习如何使用实时数据库进行实时数据同步。以下是一个监听用户数据变更的示例：



const database = firebase.database();
const usersRef = database.ref("users");

const userId = "abc123";

usersRef.child(userId).on("value", (snapshot) => {
  const user = snapshot.val();
  console.log("Realtime update - User:", user);
});

我们来分析一下代码：

我们使用以下方式获取对实时数据库的引用firebase.database()。
我们使用以下方式创建对数据库中“users”节点的引用database.ref("users")。
我们在变量中定义要监听的用户的用户 ID userId。
我们调用该child方法usersRef并传递参数userId以获取对特定用户的引用。
我们使用on用户引用上的方法来监听用户数据的变化。
每当发生更改时，回调函数就会执行，我们可以从中访问更新后的用户数据snapshot。

Cloud Firestore

基于文档的数据模型

Cloud Firestore 是由 Firebase 提供的灵活、可扩展的 NoSQL 文档数据库。在本教程中，我们将学习 Cloud Firestore 的基于文档的数据模型。以下是一个创建新文档的示例：



const firestore = firebase.firestore();
const usersCollection = firestore.collection("users");

const newUser = {
  name: "John Doe",
  email: "johndoe@example.com"
};

usersCollection.add(newUser)
  .then((docRef) => {
    const userId = docRef.id;
    console.log("User created with ID:", userId);
  })
  .catch((error) => {
    // Handle document creation errors
    console.error("Failed to create user:", error);
  });

让我们来分析一下代码：

我们使用以下方式获取对 Cloud Firestore 的引用firebase.firestore()。
我们使用以下方式创建对 Cloud Firestore 中“users”集合的引用firestore.collection("users")。
我们在对象中定义新用户的数据newUser。
我们使用该add方法将usersCollection文档作为新文档插入newUser到集合中。
如果文档创建成功，then则执行该代码块，我们可以从中访问自动生成的文档 ID docRef。
如果在创建文档过程中发生错误，catch则会执行该代码块，我们可以相应地处理该错误。

CRUD 操作

Cloud Firestore 提供强大的 CRUD（创建、读取、更新、删除）操作来处理数据。在本教程中，我们将学习如何在 Cloud Firestore 中执行 CRUD 操作。以下是更新用户文档的示例：



const firestore = firebase.firestore();
const usersCollection = firestore.collection("users");

const userId = "abc123";
const updatedData = {
  name: "John Doe Jr.",
  email: "johndoe@example.com"
};

usersCollection.doc(userId).update(updatedData)
  .then(() => {
    console.log("User updated successfully");
  })
  .catch((error) => {
    // Handle update errors
    console.error("Failed to update user:", error);
  });

我们来分析一下代码：

我们使用以下方式获取对 Cloud Firestore 的引用firebase.firestore()。
我们使用以下方式创建对 Cloud Firestore 中“users”集合的引用firestore.collection("users")。
我们在变量中定义要更新的用户的用户 ID userId。
我们在对象中定义了用户的更新数据updatedData。
我们调用该doc方法usersCollection并传递参数userId以获取对特定用户文档的引用。
我们使用update文档引用上的方法来更新用户的文档updatedData。
如果更新成功，then则执行该代码块。
如果在更新操作过程中发生错误，catch则会执行该代码块，我们可以相应地处理该错误。

使用 Firestore 进行实时更新

与实时数据库类似，Cloud Firestore 也提供客户端之间的实时数据同步。在本教程中，我们将学习如何监听 Cloud Firestore 中的实时更新。以下是一个监听用户文档更改的示例：



const firestore = firebase.firestore();
const usersCollection = firestore.collection("users");

const userId = "abc123";

usersCollection.doc(userId).onSnapshot((snapshot) => {
  const user = snapshot.data();
  console.log("Realtime update - User:", user);
});

让我们来分析一下代码：

我们使用以下方式获取对 Cloud Firestore 的引用firebase.firestore()。
我们使用以下方式创建对 Cloud Firestore 中“users”集合的引用firestore.collection("users")。
我们在变量中定义要监听的用户的用户 ID userId。
我们调用该doc方法usersCollection并传递参数userId以获取对特定用户文档的引用。
我们使用onSnapshot文档引用上的方法来监听文档数据的变化。
每当发生更改时，回调函数就会执行，我们可以从中访问更新后的用户数据snapshot。

贮存

上传和下载文件

Firebase Storage 提供了一种简单安全的方式来存储和提供用户生成的内容。在本教程中，我们将学习如何使用 Firebase Storage 上传和下载文件。以下是一个上传文件的示例：



const storage = firebase.storage();
const fileRef = storage.ref("images/profile.jpg");
const file = /* File object */;

fileRef.put(file)
  .then((snapshot) => {
    console.log("File uploaded successfully");
  })
  .catch((error) => {
    // Handle upload errors
    console.error("Failed to upload file:", error);
  });

我们来分析一下代码：

我们使用以下方式获取对 Firebase Storage 的引用firebase.storage()。
我们使用以下方法创建指向要上传到 Firebase Storage 的文件的引用storage.ref("images/profile.jpg")。请将路径替换为所需的存储位置和文件名。
我们有一个file代表待上传文件的对象。您可以从输入文件元素或通过编程方式获取此对象。
我们使用该put方法将fileRef文件上传到 Firebase Storage。
如果上传成功，then则执行该代码块。
如果在上传过程中发生错误，catch则执行该代码块，我们可以相应地处理该错误。

管理文件元数据

Firebase Storage 允许您管理文件元数据，例如内容类型和自定义属性。在本教程中，我们将学习如何使用 Firebase Storage 设置和检索文件元数据。以下是一个设置文件元数据的示例：



const storage = firebase.storage();
const fileRef = storage.ref("images/profile.jpg");

const metadata = {
  contentType: "image/jpeg",
  customMetadata: {
    createdBy: "John Doe",
    createdAt: new Date().toString()
  }
};

fileRef.updateMetadata(metadata)
  .then(() => {
    console.log("File metadata updated successfully");
  })
  .catch((error) => {
    // Handle metadata update errors
    console.error("Failed to update file metadata:", error);
  });

让我们来分析一下代码：

我们使用以下方式获取对 Firebase Storage 的引用firebase.storage()。
我们使用以下方法创建对要更新元数据的文件的引用storage.ref("images/profile.jpg")。将路径替换为实际文件位置。
我们在对象中定义文件的元数据metadata。在本例中，我们将内容类型设置为“image/jpeg”，并提供自定义元数据属性，例如“createdBy”和“createdAt”。
我们使用该updateMetadata方法来fileRef更新文件的元数据，使其与提供的值一致metadata。
如果元数据更新成功，then则执行该代码块。
如果在元数据更新过程中发生错误，catch则执行该代码块，我们可以相应地处理该错误。

存储安全规则

Firebase Storage 允许您定义安全规则来控制对文件的访问。在本教程中，我们将学习如何为 Firebase Storage 设置安全规则。以下是一个设置文件读写规则的示例：



service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read: if true; // Allow read access to all files
      allow write: if request.auth != null; // Allow write access only for authenticated users
    }
  }
}

我们来分析一下代码：

我们在代码块中定义 Firebase Storage 安全规则service firebase.storage。
我们使用match关键字来指定要匹配的路径模式。
在这个例子中，我们使用{bucket}通配符{allPaths=**}占位符来匹配存储桶中的所有文件。
我们使用该allow关键字来定义读取和写入访问权限。
该read规则设置为if true允许读取所有文件。
该write规则设置为if request.auth != null仅允许经过身份验证的用户拥有写入权限。

托管和部署

托管您的 Web 应用程序

Firebase Hosting 让您可以轻松部署和托管 Web 应用程序。在本教程中，我们将学习如何使用 Firebase Hosting 托管 Web 应用程序。以下是一个 Web 应用程序托管示例：

npm install -g firebase-tools在终端中运行以下命令安装 Firebase CLI 。
导航到您的 Web 应用程序的根目录。
运行此程序firebase login以使用您的 Firebase 帐户进行身份验证。
运行命令firebase init来设置你的 Firebase 项目。选择“托管”作为要设置的功能，然后选择你之前创建的项目。
按照提示配置您的项目。大多数提示请选择默认选项。
初始化完成后，运行命令firebase deploy将您的 Web 应用部署到 Firebase Hosting。
部署成功后，您将收到一个托管 URL，您的 Web 应用程序可以通过该 URL 访问。

部署 Firebase 函数

Firebase Functions 允许您运行服务器端代码以响应 Firebase 服务触发的事件。在本教程中，我们将学习如何部署 Firebase Functions。以下是一个部署函数的示例：

导航到 Firebase 项目的根目录。
打开终端并运行命令firebase deploy --only functions，即可仅部署项目中的功能。
Firebase 会将您的函数上传到云端，并为您提供部署 URL 和其他相关信息。

自定义域名设置

Firebase Hosting 允许您为 Web 应用设置自定义域名。在本教程中，我们将学习如何使用 Firebase Hosting 设置自定义域名。以下是一个设置自定义域名的示例：

打开 Firebase 控制台并导航到您的项目。
转到“主机”部分，然后单击“添加自定义域名”按钮。
输入您的自定义域名，然后点击“继续”。
按照 Firebase 提供的说明验证域名所有权并配置 DNS 设置。
域名验证通过且 DNS 设置生效后，即可使用自定义域名访问您的 Web 应用程序。

结论

在本教程中，我们探讨了 10 个面向初学者的 Firebase 基础教程。我们涵盖了 Firebase 的各个方面，包括身份验证、实时数据库、Cloud Firestore、存储、托管和部署。通过学习这些教程，您应该对 Firebase 以及如何使用其不同组件构建强大的 Web 和移动应用程序有了扎实的了解。Firebase 是一个功能全面的平台，可以极大地简化开发流程，并帮助您构建可扩展且稳健的应用程序。您可以尝试我们提供的代码示例，并继续探索 Firebase 文档或其他源代码（例如这个React Native 电子商务应用程序）以进一步扩展您的知识。祝您编码愉快！

文章来源：https://dev.to/mrcflorian/10-essential-firebase-tutorials-for-beginners-4i39

菜单

分享

面向初学者的 10 个必备 Firebase 教程

面向初学者的 10 个必备 Firebase 教程

介绍

什么是 Firebase？

为什么要使用 Firebase？

Firebase 入门

验证

用户注册

用户登录

社交媒体认证

实时数据库

创建和更新数据

读取和查询数据

实时数据同步

Cloud Firestore

基于文档的数据模型

CRUD 操作

使用 Firestore 进行实时更新

贮存

上传和下载文件

管理文件元数据

存储安全规则

托管和部署

托管您的 Web 应用程序

部署 Firebase 函数

自定义域名设置

结论

系统设计面试中的 19 种微服务模式

使用 React 和 AWS Amplify 实现无服务器架构第三部分：跟踪应用使用情况

模型-视图-控制器（MVC）模式到底是什么？DEV 全球项目展示挑战赛，由 Mux 主办：快来展示你的项目吧！

我在两年内从 PHP 开发人员晋升为高级 C#/.NET 开发人员。

了解 Docker：第 12 部分 – 传递构建参数

Yarn 和第三方 NPM 客户端的黑暗未来 DEV 的全球展示与讲述挑战赛，由 Mux 呈现：展示你的项目！

CSS DEV 的全球展示挑战赛“响应式字体”由 Mux 呈现：展示你的项目！

我是如何以学生开发者的身份免费获得 Tabnine Pro 的，你也可以！

五大顶级JS框架

从 Rector PHP 开始：利用自动化改进您的 PHP 代码