使用 Firebase Extensions 快速为 Web 应用添加新功能

1. 简介

目标

在此 Codelab 中，您将借助 Firebase Extensions 向在线购物平台应用添加功能。通过此 Codelab，您将了解扩展程序如何帮助您缩短应用开发和管理任务所需的时间。

3b6977f679c67db.png

构建内容

在此 Codelab 中，您将向在线购物平台 Web 应用添加以下功能：

  • 加快图片加载速度，提高用户留存率
  • 限制数据库中的条目数量，以提高性能并降低账单费用
  • 实现自动删除旧用户数据，以加强用户数据保护

学习内容

  • 如何发现适用于常见用例的扩展程序
  • 如何在项目中安装和配置扩展程序
  • 如何维护（监控、更新和卸载）项目中的扩展程序

此 Codelab 重点介绍 Firebase Extensions。如需详细了解本 Codelab 中提及的其他 Firebase 产品，请参阅 Firebase 文档和其他 Codelab。

您需要满足的条件

  • 一台安装了新版网络浏览器（建议使用 Chrome）的计算机
  • Google 账号

2. 创建和设置 Firebase 项目

创建 Firebase 项目

  1. 在 Firebase 控制台中，点击添加项目，然后将 Firebase 项目命名为 FriendlyMarket。
  2. 点击各个项目创建选项。接受 Firebase 条款。跳过设置 Google Analytics 的步骤，因为您不会在此应用中使用 Google Analytics。
  3. 等待项目完成预配，然后点击继续。

您将构建的应用会使用多种适用于 Web 应用的 Firebase 产品：

  • Firebase Authentication：用于轻松识别用户
  • Firebase Realtime Database：用于在云端保存结构化数据，并在数据更新时即时收到通知
  • Cloud Storage for Firebase，用于在云端保存图片

现在，您将使用 Firebase 控制台启用和配置这些 Firebase 产品。

升级您的 Firebase 定价方案

如需使用 Firebase Extensions 及其底层云服务以及 Cloud Storage for Firebase，您的 Firebase 项目必须采用按需付费 (Blaze) 定价方案，这意味着该项目需要与一个 Cloud Billing 账号相关联。

  • Cloud Billing 账号要求提供付款方式，例如信用卡。
  • 如果您刚开始接触 Firebase 和 Google Cloud，请确认您是否有资格获得 $300 赠金和免费试用 Cloud Billing 账号。
  • 如果您是在某个活动中学习本 Codelab，请询问组织者是否有 Cloud 抵用金。

如需将项目升级到 Blaze 方案，请按以下步骤操作：

  1. 在 Firebase 控制台中，选择升级您的方案。
  2. 选择 Blaze 方案。按照屏幕上的说明将 Cloud Billing 账号与您的项目相关联。
    如果您需要在此升级过程中创建 Cloud Billing 账号，则可能需要返回 Firebase 控制台中的升级流程以完成升级。

启用电子邮件登录

虽然身份验证并不是此 Codelab 的重点，但您的应用中一定要有某种形式的身份验证，以便唯一标识使用该应用的每个人。您将使用电子邮件地址登录。

  1. 在 Firebase 控制台中，点击左侧面板中的开发。
  2. 点击身份验证，然后点击登录方法标签页（或点击此处直接进入登录方法标签页）。
  3. 点击登录提供程序列表中的电子邮件地址/密码，将启用开关切换到开启位置，然后点击保存。

ed0f449a872f7287.png

启用 Realtime Database

该应用使用 Firebase Realtime Database 保存待售商品。

  1. 在 Firebase 控制台的左侧面板中，展开 Build，然后选择 Realtime Database。
  2. 点击创建数据库。
  3. 为数据库选择一个位置，然后点击下一步。
    对于真实应用，您需要选择靠近用户的位置。
  4. 点击以测试模式启动。阅读有关安全规则的免责声明。
    在本 Codelab 的后续步骤中，您将添加安全规则来保护您的数据。在没有为数据库添加安全规则的情况下，请不要公开分发或公开应用。
  5. 点击创建。

为数据库设置安全规则

现在，您将设置此应用所需的安全规则。以下是一些基本示例规则，可帮助您保护应用。这些规则允许任何人查看待售商品，但仅允许已登录的用户执行其他读写操作。请不要担心这些规则的具体内容；您只需复制并粘贴这些规则，即可让应用顺利运行。

  1. 在“实时数据库”信息中心顶部，点击规则标签页。

e233a24a38b37e95.png

  1. 将以下规则集复制并粘贴到规则标签页中的“规则”字段中：
    {
  "rules": {
    ".read": false,
    ".write": false,
      "drafts": {
        ".indexOn": "seller",
        ".read": "auth.uid !== null",
        ".write": "auth.uid !== null"
    },
    "sellers": {
        ".read": "auth.uid !== null",
        ".write": "auth.uid !== null"
    },
      "forsale": {
        ".read": true,
        ".write": "auth.uid !== null"
      }
  }
}
  2. 点击发布。

设置 Cloud Storage for Firebase

该应用使用 Cloud Storage for Firebase 保存待售商品的图片。

如需在 Firebase 项目中设置 Cloud Storage for Firebase，请按以下步骤操作：

  1. 在 Firebase 控制台的左侧面板中，展开构建，然后选择存储。
  2. 点击开始使用。
  3. 为默认的 Storage 存储分区选择位置。
    US-WEST1、US-CENTRAL1 和 US-EAST1 中的存储分区可以使用 Google Cloud Storage 的“始终免费”层级。所有其他位置的存储分区均遵循 Google Cloud Storage 价格和使用量。
  4. 点击以测试模式启动。阅读有关安全规则的免责声明。
    在本 Codelab 的后续步骤中，您将添加安全规则来保护您的数据。在未为您的存储桶添加安全规则的情况下，请不要公开分发或公开应用。
  5. 点击创建。

为存储分区设置安全规则

现在，您需要设置此应用所需的安全规则。这些规则仅允许经过身份验证的用户发布新图片，但允许任何人查看所列商品的图片。

  1. 点击存储空间信息中心顶部的规则标签页。

e7003646b429500b.png

  1. 将以下规则集复制并粘贴到规则标签页中的“规则”字段中：
    rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {

    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }

    match /friendlymarket/{ImageId} {
      allow read;
      allow write: if request.auth != null;
    }

  }
}
  2. 点击发布。

3. 运行示例应用

分叉 StackBlitz 项目

在此 Codelab 中，您将使用 StackBlitz 构建和部署应用。StackBlitz 是一个集成了多项 Firebase 工作流的在线编辑器。无需安装软件或特殊的 StackBlitz 账号即可使用 Stackblitz。

借助 StackBlitz，您可以与他人共享项目。知道您的 StackBlitz 项目网址的其他人可以查看您的代码和分叉您的项目，但无法修改您的 StackBlitz 项目。

  1. 前往以下网址获取起始代码：https://stackblitz.com/edit/friendlymarket-codelab。
  2. 在 StackBlitz 页面顶部，点击克隆。

22c44cf92ed26208.png

现在，您已经将起始代码的副本作为自己的 StackBlitz 项目。由于您未登录，因此您的“账号”被称为 @anonymous，但这没关系。该项目具有唯一的名称和唯一的网址。您的所有文件和更改都保存在此 StackBlitz 项目中。

向项目添加 Firebase Web 应用

  1. 在 StackBlitz 中，查看 src/firebase-config.js 文件。您将在此处添加 Firebase 配置对象。
  2. 返回 Firebase 控制台，点击左上角的 Project Overview（项目概览），前往项目的概览页面。
  3. 在项目概览页面的中心位置，点击 Web 图标 58d6543a156e56f9.png 以创建新的 Firebase Web 应用。88c964177c2bccea.png
  4. 使用别名 FriendlyMarket Codelab 注册应用。
  5. 对于本 Codelab，请不要选中还为此应用设置 Firebase Hosting 旁边的复选框。您将改用 StackBlitz 预览窗格。
  6. 点击注册应用。
  7. 将应用的 Firebase 配置对象复制到剪贴板。请勿复制 <script> 标记。注意：如果您日后需要查找该配置，请按照此处的说明操作。

6c0519e8f48a3a6f.png

  1. 点击继续前往控制台。

将项目的配置添加到应用：

  1. 返回 StackBlitz，前往 src/firebase-config.js 文件。
  2. 将配置代码段粘贴到该文件中。完成后，它应如下所示（但配置对象中应包含您自己的项目值）：

177602cbe84f873d.png

此应用的起点是什么？

查看 StackBlitz 屏幕右侧的交互式预览：

f3ec800f27fa49b7.png

在本 Codelab 中，您将首先学习一个基本购物平台应用的代码。任何用户都可以查看待售商品列表，并点击链接查看商品详情页面。如果用户已登录，则会看到卖家的联系信息，以便他们协商价格并购买商品。

试用应用：

  1. 使用主屏幕顶部的按钮登录。您可以使用虚构的电子邮件地址、姓名和密码。
  2. 点击右下角的销售商品按钮，创建商品详情。
  3. 对于标题，输入 Xylophone。
  4. 对于要价，输入 50。
  5. 对于商品说明，输入以下内容：This high quality xylophone can be used to play music.
  6. 将这张扬琴图片下载到您的计算机上，然后使用物品图片按钮上传该图片。

  1. 填写完所有字段并上传图片后，点击发布。
  2. 找到您的新商家信息。点击您的商品以查看其详情页面，然后展开卖家联系信息面板。
  3. 返回 Firebase 控制台。现在，在 Database 信息中心的 forsale 节点下，您会看到您发布的内容的条目。在 Storage 信息中心，您还会在 friendlymarket 路径中找到您上传的图片。

4. 查找并安装扩展程序

问题

在为您的应用开展一些用户研究后，您发现大多数用户是通过智能手机（而非桌面设备）访问您的网站。不过，您的统计数据还显示，移动用户往往只会在几秒钟后就离开您的网站（即“流失”）。

您好奇地测试了网站的移动连接速度。（如需了解具体操作方法，请点击此处。）您发现图片加载时间非常长，并且根本不会缓存在浏览器中。每次网页浏览都会产生如此长的加载时间！

解决方案

在了解了如何优化图片后，您决定采取以下两步来提升图片加载性能：

  • 压缩图片。即使是移动设备拍摄的图片分辨率也远远高于此应用的需求。减小文件大小可加快加载时间，而不会明显降低应用中的分辨率。
  • 缓存。默认情况下，Cloud Storage 对象包含告知浏览器不要缓存图片的标头，这意味着用户的浏览器会反复下载同一张图片！幸运的是，您可以更改这些标头以允许缓存。您可以使用客户端 Cloud Storage SDK 和 Firebase Admin SDK 设置这些标头。

如需压缩图片，您需要限制上传质量，或者在服务器端设置图片大小调整流程。我们来考虑一下利弊：

  • 客户端。对于客户端进程，您只需限制上传图片的文件大小即可。这意味着，您无需编写或维护任何新的服务器逻辑。不过，这也意味着卖家需要自行调整图片大小，这对他们来说是创建新商品详情时的一个不直观且麻烦的障碍。
  • 服务器端。如果您使用 Cloud Functions for Firebase，则可以触发函数，以便在图片上传时自动调整图片大小。这意味着，卖家可以上传任何大小的图片（无需额外工作），而您的后端函数可以无缝调整图片大小。甚至还有此函数的示例！

这听起来像是服务器端是最佳方案。不过，此方案仍然需要克隆示例，按照其设置说明操作，然后使用 Firebase CLI 部署函数。调整图片大小听起来就是这样一个常见用例。有没有更简单的解决方案？

更简单的解决方案

恭喜您！不过，有一个更简单的解决方案：Firebase Extensions！我们来查看 Firebase 网站上可用扩展程序的清单。

e6bc3874cf23f34f.png

看！有一个名为“调整图片大小”的扩展程序。看起来很有希望。

我们来在应用中使用此扩展程序！

安装扩展程序

  1. 点击查看详情可查看此扩展程序的更多信息。在您可以配置的内容下，您可以使用该扩展程序设置要调整到的尺寸，甚至可以设置缓存标头。完美！
  2. 点击扩展程序的详情页面上的在控制台中安装按钮。您将进入 Firebase 控制台页面，其中列出了您的所有项目。
  3. 选择您为此 Codelab 创建的 FriendlyMarket 项目。
  4. 按照屏幕上的说明操作，直到看到配置扩展程序步骤。说明中会显示该扩展程序的基本摘要，以及它将创建的所有资源和需要访问的角色。
  5. 在 **Cache-Control** 用于调整大小的图片的标头字段中，输入以下内容：

public, max-age=31536000

  1. 将其他参数保留为默认值。
  2. 点击安装扩展程序。

在等待安装完成期间...

使用 Firebase 命令行界面进行安装

如果您更习惯使用命令行工具，也可以使用 Firebase CLI 安装和管理扩展程序！只需使用最新版 CLI 中提供的 firebase ext 命令即可。如需了解详情，请点击此处。

（可选） 详细了解 Cache-Control 标头

Cache-Control 标头值 public, max-age=31536000 表示图片最多会缓存 1 年。如需详细了解 Cache-Control 标头，请参阅此文档。

更新客户端代码

您安装的扩展程序会将调整后的图片写入与原始图片相同的存储分区中。系统会将配置的尺寸附加到调整后的图片的文件名后面。因此，如果原始文件路径为 friendlymarket/user1234-car.png，则调整大小后的图片的文件路径将为 friendlymarket/user1234-car_200x200.png。

我们来更新一下应用，使其提取经过调整大小的图片，而不是完整尺寸的图片。

  1. 在 StackBlitz 中，打开 src/firebase-refs.js 文件。
  2. 将现有的 getImageRef 函数替换为以下代码，以创建经过调整大小的图片的引用：
export function getImageRef(storage, imagePath) {
  const xDimension = 200;
  const yDimension = 200;

  // find the '.' in 'file.jpg', 'file.png', etc
  const fileExtensionIndex = imagePath.lastIndexOf('.');

  const pathNameWithoutExtension = imagePath.substring(0, fileExtensionIndex);
  const dimensions = `${xDimension}x${yDimension}`;
  const fileExtension = imagePath.substring(fileExtensionIndex);

  return {
    resized: storage().ref(
      `${pathNameWithoutExtension}_${dimensions}${fileExtension}`
    ),
    original: storage().ref(imagePath)
  };
}

开始测试

由于此扩展程序会监控新上传的图片，因此不会调整现有图片的大小。

创建一个新帖子，看看该扩展程序的实际运作情况：

  1. 点击应用顶栏中的 Friendly Market 以前往主屏幕。
  2. 点击应用右下角的销售商品按钮，创建商品详情。
  3. 对于标题，输入 Coffee
  4. 对于要价，输入 1
  5. 在商品说明中，输入以下内容：Selling one cafe latte. It has foam art in the shape of a bear。
  6. 将这张咖啡杯图片下载到您的计算机上，然后使用物品图片按钮上传该图片。
  7. 填写完所有字段并上传图片后，点击发布。您会在木琴下方看到咖啡商家信息！
  8. 在 Firebase 控制台中的 Functions 信息中心内，点击日志标签页。您应该会看到函数的日志，其中显示该函数已执行。

486d1226be84bb44.png

  1. 前往 Storage 信息中心，在 friendlymarket 路径中查看原始咖啡图片和调整后的版本。
  2. 在 StackBlitz 预览窗格中，重新加载应用的主屏幕几次。您应该会发现咖啡图片的加载速度比木琴图片明显更快。

由于图片较小，因此在首次加载网页时，图片的加载速度会更快。在后续网页刷新时，系统会从浏览器缓存中加载图片，而不是触发网络请求。

5. 重新配置扩展程序

问题

您的应用会自动保存卖家商品详情的草稿版本。用户喜欢此功能，但您的统计信息有点令人担心。您的报告显示，只有大约 10% 的草稿实际发布了，其余 90% 的草稿只是占用了数据库中的空间。

解决方案

经过一些粗略的计算，您发现自己在任何给定时间只需保存大约五份草稿即可。

还记得 Firebase Extensions 目录吗？也许已经有针对这种情况的解决方案。我们来安装 Limit Child Nodes 扩展程序，以自动将已保存的草稿数量限制为 5 个或更少。每当添加新草稿时，该扩展程序都会删除最早的草稿。

  1. 点击扩展程序的详情页面上的安装按钮。
  2. 选择您用于购物平台 Web 应用的 Firebase 项目。
  3. 按照屏幕上的说明操作，直到看到配置扩展程序步骤。
  4. 对于 Realtime Database 路径，输入 drafts。这是数据库中用于保存草稿的路径。
  5. 在需要保留的最大节点数部分，输入 5。这意味着，系统会保存每件商品详情五份草稿，如果您添加了其他草稿，系统会自动删除最早的草稿。
  6. 点击安装扩展程序。

在等待安装完成期间...

监控扩展程序

当您安装扩展程序时，该过程会创建多个函数。您可能需要检查这些函数的运行频率，或查看日志和错误率。如需详细了解如何监控扩展程序，请参阅管理已安装的扩展程序。按照文档中的说明查看上一步中“调整图片大小”扩展程序创建的函数。

卸载扩展程序

如需从项目中移除扩展程序，您可能会想要删除扩展程序创建的各个函数，但这可能会导致意外行为，因为一个扩展程序可能会创建多个函数。如需了解如何卸载扩展程序，请参阅文档。

卸载会删除为该扩展程序实例创建的所有资源（如扩展程序的函数）和服务账号。不过，卸载扩展程序后，扩展程序创建的所有工件（例如调整大小的图片）都将保留在您的项目中。

在单个项目中安装扩展程序的多个副本

您可以在项目中安装给定扩展程序的多个实例，如果您想限制其他路径中的条目，可以安装此扩展程序的另一个实例。不过，在此 Codelab 中，您只需安装一次该扩展程序。

看看实际运用情况

  1. 请确保您登录的是发布木琴或拿铁时所用的账号
  2. 生成一些草稿：
  3. 点击应用右下角的销售商品按钮
  4. 将标题修改为“草稿 1”。
  5. 向下滚动到草稿部分，查看草稿数量。至少应有两个。
  6. 点击顶部应用栏中的 FRIENDLY MARKET 按钮。这样，您就可以保存草稿，但无需发布。
  7. 重复执行上述操作，为“草稿 2”“草稿 3”等“草稿 6”创建版本。
  8. 创建“草稿 6”后，您会发现“草稿 1”从草稿部分消失了。
  9. 与“调整图片大小”扩展程序一样，您可以查看函数日志，了解触发了哪些函数。

抱歉，要保留的草稿数量上限过低

客户支持团队与您联系，告知您一些最活跃的卖家抱怨说，他们的草稿在发布前就被删除了。您与队友核对计算结果，发现自己的计算结果相差了 1 万倍！

如何解决此问题？我们来重新配置已安装的扩展程序！

  1. 在 Firebase 控制台的左侧窗格中，点击扩展程序。
  2. 在已安装的扩展程序的卡片上，点击管理。
  3. 点击右上角的重新配置扩展程序。
  4. 将需要保留的最大节点数更改为 50000。
  5. 点击保存。

就这样！在扩展程序更新期间，您可以与支持团队联系，告知他们已在部署修复程序。

6. 自动删除用户数据

问题

您的客户支持团队再次与您联系。已删除账号的卖家仍会收到其他用户发来的电子邮件，这让他们很生气！这些卖家希望在删除账号后，其电子邮件地址也会从您的系统中删除。

目前，支持团队一直在手动删除每位用户的数据，但肯定有更好的方法！您仔细考虑后，决定编写自己的批处理作业，以便定期运行并清除已删除账号中的电子邮件地址。但删除用户数据似乎是一个非常常见的问题。Firebase Extensions 也许也可以帮助解决此问题。

解决方案

您将配置删除用户数据扩展程序，以便在用户删除其账号时自动删除数据库中的 users/uid 节点。

  1. 点击扩展程序的详情页面上的安装按钮。
  2. 选择您用于购物平台 Web 应用的 Firebase 项目。
  3. 按照屏幕上的说明操作，直到看到配置扩展程序步骤。
  4. 对于 Realtime Database 路径，输入 sellers/{UID}。sellers 部分是子节点包含用户电子邮件地址的节点，{UID} 是通配符。采用此配置后，当 UID 为 1234 的用户删除其账号时，该扩展程序应从数据库中删除 sellers/1234。
  5. 点击安装扩展程序。

在等待安装完成期间...

聊聊自定义功能

在本 Codelab 中，您了解了 Firebase Extensions 可帮助解决常见的使用情形，并且扩展程序可配置以满足应用的需求。

不过，扩展程序并不能解决所有问题，用户数据删除问题就是一个很好的例子。虽然“删除用户数据”扩展程序解决了用户目前提出的“在用户删除账号后，电子邮件仍会泄露”这一问题，但该扩展程序不会删除所有内容。例如，商品详情仍可供查看，Cloud Storage 中的所有图片也会保留。虽然“删除用户数据”扩展程序允许我们配置要删除的 Cloud Storage 路径，但由于用户可以上传许多不同名称的不同文件，因此您无法将此扩展程序配置为自动删除这些工件。对于此类情况，Cloud Functions for Firebase 可能更适合，因为您可以编写特定于应用数据模型的代码。

扩展程序和结算

Firebase Extensions 本身可免费使用（您只需为所使用的底层资源付费），但扩展程序所需的某些底层资源可能需要结算。此 Codelab 设计为无需结算账号即可完成。不过，设置 Flame 或 Blaze 方案后，您可以使用许多非常有趣的 Firebase 扩展程序。

例如，您可以缩短网址、触发电子邮件、将合集导出到 BigQuery 等。如需查看完整的扩展程序目录，请点击此处。

如果您想要某个扩展程序，但目前无法使用，欢迎与我们分享！向 Firebase 支持团队提交功能请求，建议添加新扩展程序。

看看实际运用情况

扩展程序安装完成后，删除一个用户，然后看看会发生什么情况：

  1. 在 Firebase 控制台中，前往 Realtime Database 信息中心。
  2. 展开 sellers 节点。
  3. 每个卖家的相关信息都以其用户 UID 作为键。选择用户的 UID。
  4. 在 Firebase 控制台中，前往身份验证信息中心，然后找到该用户 UID。
  5. 展开 UID 右侧的菜单，然后选择删除账号。

2e03923c9d7f1f29.png

  1. 返回 Realtime Database 信息中心。卖家的信息将会消失！

7. 恭喜！

虽然您在此 Codelab 中编写的代码不多，但您已向购物平台应用添加了重要功能。

您已了解如何发现、配置、安装和重新配置扩展程序。此外，您还了解了如何监控已安装的扩展程序，以及如何在必要时卸载这些扩展程序。

后续操作

请查看以下其他扩展程序：

需要更多自定义服务器端代码？

其他实用文档

管理扩展程序：

详细了解附加信息：