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

1. 简介

目标

在此 Codelab 中，您将在 Firebase 扩展程序的帮助下，向在线市场应用添加功能。通过此 Codelab，您将了解扩展程序如何帮助您减少应用开发和管理任务所花费的时间。

3b6977f679c67db.png

构建内容

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

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

学习内容

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

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

您需要满足的条件

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

2. 创建和设置 Firebase 项目

创建 Firebase 项目

  1. 使用您的 Google 账号登录 Firebase 控制台。
  2. 点击相应按钮以创建新项目，然后输入项目名称（例如 FriendlyMarket）。
  3. 点击继续。
  4. 如果看到相关提示，请查看并接受 Firebase 条款，然后点击继续。
  5. （可选）在 Firebase 控制台中启用 AI 辅助功能（称为“Gemini in Firebase”）。
  6. 在此 Codelab 中，您不需要使用 Google Analytics，因此请关闭 Google Analytics 选项。
  7. 点击创建项目，等待项目完成预配，然后点击继续。

您将构建的应用会使用多个适用于 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 控制台的左侧面板中，展开构建，然后选择 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. 为默认存储分区选择位置。
    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 /friendlymarket/{ImageId} {
      allow read;
      allow write: if request.auth != null;
    }
  }
}
  2. 点击发布。

3. 运行示例应用

Fork StackBlitz 项目

在此 Codelab 中，您将使用 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 控制台，点击左上角的项目概览，前往项目的概览页面。
  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 中，您将从一个基本 Marketplace 应用的代码开始学习。任何用户都可以查看待售商品列表，并点击链接查看商品的详情页面。如果用户已登录，则会看到卖家的联系信息，以便与卖家协商价格并购买商品。

试用应用：

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

  1. 填写完所有字段并上传图片后，点击发布。
  2. 查找您的新房源。点击相应商品以查看其详情界面，然后展开卖家联系信息面板。
  3. 返回 Firebase 控制台。在数据库信息中心内，您现在会在 forsale 节点下看到您发布商品的条目。在存储信息中心内，您还会在 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% 的草稿只是占用了数据库中的空间。

解决方案

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

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

  1. 点击扩展程序的详情页面上的安装按钮。
  2. 选择您用于 Marketplace Web 应用的 Firebase 项目。
  3. 按照屏幕上的说明操作，直到进入配置扩展程序这一步。
  4. 对于 Realtime Database 路径，输入 drafts。这是数据库中用于保存草稿的路径。
  5. 在需要保留的最大节点数字段中，输入 5。这意味着，系统会为每个商品的商品详情保存 5 个草稿，如果再添加一个草稿，系统会自动删除最旧的草稿。
  6. 点击安装扩展程序。

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

监控扩展服务

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

卸载扩展程序

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

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

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

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

看看实际运用情况

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

哎呀，要保留的草稿数量上限太小了

您的客户支持团队与您联系，告知您一些最活跃的卖家抱怨说，他们的草稿在发布之前就被删除了。您与队友一起检查数学题，结果发现您的计算结果与正确答案相差 10,000 倍！

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

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

您只需执行这些操作！在扩展程序更新期间，您可以与支持团队沟通，告知他们修复程序已在部署中。

6. 自动删除用户数据

问题

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

目前，支持人员一直在手动删除每位用户的数据，但肯定有更好的方法！您考虑了一下，决定编写自己的批处理作业，该作业会定期运行并清除已删除账号中的电子邮件地址。但删除用户数据似乎是一个相当常见的问题。或许 Firebase 扩展程序也能帮助解决此问题。

解决方案

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

  1. 点击扩展程序的详情页面上的安装按钮。
  2. 选择您用于 Marketplace 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 扩展程序本身可免费使用（您只需为所使用的底层资源付费），但某些扩展程序所需的底层资源可能需要付费。此 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 中编写的代码不多，但您为自己的 Marketplace 应用添加了重要功能。

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

后续操作

不妨试试以下其他扩展程序：

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

其他实用文档

管理扩展程序：

详细了解附加信息：