1. 简介
目标
在此 Codelab 中，您将借助 Firebase Extensions 为在线 Marketplace 应用添加功能。在此 Codelab 中，您将了解扩展程序如何帮助您减少在应用开发和管理任务上花费的时间。
构建内容
在此 Codelab 中，您将向在线购物平台 Web 应用添加以下功能：
- 加快图片加载速度，提升用户留存率
- 限制数据库中的条目以提高性能并减少费用
- 实现旧用户数据的自动删除，从而加强对用户数据保护的保护
学习内容
- 如何发现适用于常见使用场景的扩展程序
- 如何在项目中安装和配置扩展程序
- 如何维护（监控、更新和卸载）项目中的扩展程序
此 Codelab 将重点介绍 Firebase Extensions。如需详细了解此 Codelab 中提及的其他 Firebase 产品，请参阅 Firebase 文档和其他 Codelab。
所需条件
- 一台安装了新版网络浏览器的计算机（建议使用 Chrome）
- Google 账号
2. 创建和设置 Firebase 项目
创建 Firebase 项目
- 在 Firebase 控制台中，点击添加项目，然后将 Firebase 项目命名为 RelationMarket。
- 点击项目创建选项。接受 Firebase 条款。跳过设置 Google Analytics（分析）的步骤，因为您不会在此应用中使用 Google Analytics（分析）。
- 等待项目配置完成，然后点击继续。
您将构建的应用使用一些适用于 Web 应用的 Firebase 产品：
- Firebase Authentication：用于轻松识别用户
- Firebase Realtime Database：可将结构化数据保存到云端，并在数据更新时即时获取通知
- 使用 Cloud Storage for Firebase 将图片保存到云端
现在，您将使用 Firebase 控制台启用和配置这些 Firebase 产品。
启用电子邮件登录
虽然身份验证不是此 Codelab 的重点，但请务必在您的应用中提供某种形式的身份验证，以便唯一标识使用它的所有用户。您需要使用电子邮件登录。
- 在 Firebase 控制台中，点击左侧面板中的开发。
- 点击身份验证，然后点击登录方法标签页（或点击此处直接转到登录方法标签页）。
- 点击登录服务提供商列表中的电子邮件地址/密码，将启用开关切换到开启位置，然后点击保存。
启用 Realtime Database
应用使用 Firebase Realtime Database 保存待售商品。
- 在 Firebase 控制台左侧面板的开发部分中，点击数据库。
- 在页面中向下滚动跳过 Cloud Firestore 窗格，然后点击 Realtime Database 窗格中的创建数据库。
- 选择以锁定模式启动，然后点击启用。
设置安全规则
现在，您需要设置此应用所需的安全规则。下面是一些有助于保护应用安全的基本示例规则。这些规则允许任何人查看待售商品，但只允许已登录的用户执行其他读写操作。您不必担心这些规则的细节；您只需复制并粘贴这些规则即可，以使您的应用正常运行。
- 在 Realtime Database 信息中心的顶部，点击规则标签页。
- 复制以下规则集并将其粘贴到规则标签页中的规则字段：
{
"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"
}
}
}
- 点击发布。
启用 Cloud Storage
该应用使用 Cloud Storage for Firebase 保存待售商品的图片。
- 在 Firebase 控制台左侧面板的开发部分中，点击存储。
- 点击开始使用。
- 接受用于创建默认存储分区的默认值（点击下一步，保留默认位置，然后点击完成）。
现在，您需要设置此应用所需的安全规则。这些规则仅允许经过身份验证的用户发布新图片，但允许任何人查看所列内容的图片。
- 在存储信息中心的顶部，点击规则标签页。
- 复制以下规则集并将其粘贴到规则标签页中的规则字段：
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;
}
}
}
- 点击发布。
3. 运行示例应用
复刻 StackBlitz 项目
在此 Codelab 中，您将使用 StackBlitz 构建和部署应用，StackBlitz 是一个在线编辑器，其中集成了多个 Firebase 工作流。Stackblitz 无需安装软件，也无需特殊的 StackBlitz 帐号。
利用 StackBlitz 可以与他人分享项目。知道您的 StackBlitz 项目网址的其他用户可以看到您的代码并为您的项目创建分支，但无法修改您的 StackBlitz 项目。
- 转到以下网址获取起始代码：https://stackblitz.com/edit/friendlymarket-codelab。
- 在 StackBlitz 页面顶部，点击 Fork。
您现在拥有一份起始代码的副本，作为自己的 StackBlitz 项目。由于您未登录过，您的“账号”名为 @anonymous，但没关系。该项目具有唯一的名称和唯一的网址。您的所有文件和更改都会保存在此 StackBlitz 项目中。
将 Firebase Web 应用添加到项目
- 在 StackBlitz 中，查看您的
src/firebase-config.js文件。您将在此位置添加 Firebase 配置对象。 - 返回 Firebase 控制台，点击左上角的项目概览以前往项目的概览页面。
- 在项目概览页面的中心位置，点击 Web 图标
，以创建一个新的 Firebase Web 应用。
- 使用别名 RelationMarket Codelab 注册应用。
- 对于此 Codelab，请勿勾选同时为此应用设置 Firebase Hosting 旁边的复选框，您将改用 StackBlitz 预览窗格。
- 点击注册应用。
- 将应用的 Firebase 配置对象复制到剪贴板。请勿复制
<script>标记。注意：如果您日后需要查找配置，请按照此处的说明进行操作。
- 点击继续前往控制台。
将项目的配置添加到您的应用中：
- 返回 StackBlitz，打开
src/firebase-config.js文件。 - 将配置代码段粘贴到文件中。创建后，代码应如下所示（但配置对象中包含您自己的项目的值）：
这款应用的起点在哪里？
来看看 StackBlitz 屏幕右侧的互动式预览：
在此 Codelab 中，您将首先为一个基本的购物平台应用的代码。任何用户都可以查看待售商品列表，然后点击链接查看商品详情页面。如果用户已登录，他们会看到卖家的联系信息，以便协商价格并购买商品。
试用该应用：
- 使用主屏幕顶部的按钮登录。您可以使用虚假的电子邮件地址、姓名和密码。
- 点击右下角的 Sell items（出售商品）按钮以创建商品详情。
- 对于标题，请输入
Xylophone。 - 在要价部分，输入
50。 - 对于 Item Description，输入以下内容：
This high quality xylophone can be used to play music. - 将这张木琴的图片下载到您的计算机中，然后使用您的产品图片按钮上传。
- 填写所有字段并上传图片后，点击发布。
- 找到您的新商家信息。点击您的商品以查看其详情屏幕，然后展开卖家联系信息面板。
- 返回 Firebase 控制台。在 Database 信息中心内，您现在会在
forsale节点下看到您发布的商品的条目。在存储信息中心内，您还可以在friendlymarket路径中找到您上传的图片。
4.查找并安装扩展程序
问题
在对您的应用进行一些用户调查后，您发现大多数用户是通过智能手机（而不是桌面设备）访问您的网站。不过，您的统计数据还显示，移动用户往往会在几秒钟后离开您的网站（“流失”）。
于是，您测试了您的网站在移动网络连接速度方面的表现。（点击此处了解如何操作。）您发现图片的加载时间很长，根本没有缓存到浏览器中。每次网页浏览都会产生这么长的加载时间！
解决方案
在阅读了如何优化图片后，您决定采取两个步骤来提高图片加载性能：
- 压缩图片。甚至手机拍摄的图片分辨率也远远高于此应用的需求。减小文件大小可加快加载时间，而应用的分辨率不会明显降低。
- 缓存。默认情况下，Cloud Storage 对象的标头会告知浏览器不要缓存图片，这意味着用户的浏览器会反复重新下载相同的图片！幸运的是，您可以更改这些标头以允许缓存。客户端 Cloud Storage SDK 和 Firebase Admin SDK 均允许您设置这些标头。
若要压缩图片，您需要限制上传质量，或者让服务器端流程调整图片大小。我们来权衡利弊：
- 客户端。对于客户端进程，您可以只限制上传图片的文件大小。这意味着您无需编写或维护任何新的服务器逻辑。不过，这也意味着，卖家需要弄清楚如何调整自己图片的大小，这给创建新的商品详情造成了困难且不直观的障碍。
- 服务器端。如果您使用 Cloud Functions for Firebase，可以触发一个函数，该函数在上传时自动调整图片大小。这意味着卖家可以上传任意尺寸的图片（他们无需执行额外的操作），并且您的后端函数可以无缝调整图片大小。我们甚至提供了适用于此函数的示例！
似乎服务器端是正确的选择。但这个想法仍然涉及克隆示例，按照其设置说明进行操作，然后使用 Firebase CLI 部署该函数。调整图片大小听起来像是一个常见的用例。没有更简单的解决方案吗？
更简单的解决方案
您运气不错。有一个更简单的解决方案：Firebase Extensions！让我们在 Firebase 网站上查看可用扩展程序的目录。
看啊！有一个名为“Resize Images”的扩展程序。看起来很有希望。
让我们在您的应用中使用此扩展程序！
安装扩展程序
- 点击查看详情可查看关于此扩展程序的更多信息。在您可以配置的内容下方，该扩展程序可让您设置要调整的尺寸，您甚至可以设置缓存标头。完美！
- 点击扩展程序详情页面上的在控制台中安装按钮。您将进入一个 Firebase 控制台页面，其中列出了您的所有项目。
- 选择您为此 Codelab 创建的 RelationMarket 项目。
- 按照屏幕上的说明操作，直到完成配置扩展程序步骤。相关说明将显示扩展程序的基本摘要，以及此扩展程序可以创建和访问所需的角色的所有资源。
- 在 **
Cache-Control**调整后图片的标头字段中，输入以下内容：
public, max-age=31536000
- 将其他参数保留为默认值。
- 点击安装扩展程序。
等待安装完成期间...
使用 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。
我们来更新应用，使其获取调整后的图片，而不是完整尺寸的图片。
- 在 StackBlitz 中，打开
src/firebase-refs.js文件。 - 将现有的
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)
};
}
开始测试
由于此扩展程序会监控新上传的图片，因此您现有的图片将不会调整大小。
创建新帖子，查看扩展程序的实际运用：
- 点击应用顶部栏中的 Relation Market，以进入主屏幕。
- 点击应用右下角的 Sell items 按钮以创建商品详情。
- 对于标题，请输入
Coffee - 在要价部分，输入
1 - 对于 Item Description，输入以下内容：
Selling one cafe latte. It has foam art in the shape of a bear。 - 将这杯咖啡的图片下载到您的计算机上，然后使用商品图片按钮上传。
- 填写所有字段并上传图片后，点击发布。您会在木琴下方看到咖啡信息！
- 在 Firebase 控制台的函数信息中心内，点击日志标签页。您应该会看到显示该函数已执行的函数的日志。
- 您可以前往存储信息中心，在
friendlymarket路径中查看原始咖啡图片和调整后的版本。 - 在 StackBlitz 预览窗格中，重新加载应用的主屏幕几次。您会发现咖啡图片的加载速度明显快于木琴图片。
图片在第一次加载时加载速度更快，因为它更小，在后续页面刷新时，它会从浏览器缓存加载，而不是触发网络请求。
5. 重新配置扩展程序
问题
您的应用会自动保存卖家商家信息的草稿版本。您的用户喜欢这项功能，但您的统计数据有点担心。您的报告显示实际只发布了大约 10% 的草稿，而其他 90% 只是占用数据库空间。
解决方案
在完成一些周密的计算后，您意识到在任何给定时间您都只需要保存大约五份草稿。
还记得 Firebase Extensions 目录吗？也许已经有能够应对这种情况的解决方案。让我们安装限制子节点扩展程序，让系统自动将已保存的草稿数量保持在 5 个或更少。每当添加新的草稿时，此扩展程序都会删除最早的草稿。
- 点击该扩展程序的详细信息页面上的安装按钮。
- 选择您要用于 Marketplace Web 应用的 Firebase 项目。
- 按照屏幕上的说明操作，直到完成配置扩展程序步骤。
- 对于Realtime Database 路径，请输入
drafts。这是数据库中保存草稿的路径。 - 对于要保留的节点数上限，输入
5。也就是说，系统会保存每项商品详情的五份草稿，如果再添加另一份草稿，则会自动删除最早的草稿。 - 点击安装扩展程序。
在等待安装完成期间...
Monitoring 扩展程序
安装扩展程序时，此过程会创建多个函数。您可能需要检查这些函数的运行频率，或者查看日志和错误率。如需详细了解如何监控扩展程序，请参阅管理已安装的扩展程序。按照文档中的说明查看“调整大小图片”扩展程序在上一步中创建的函数。
卸载扩展程序
如需从项目中移除扩展程序，您可能想要删除扩展程序创建的各个函数，但这可能会导致意外行为，因为一个扩展程序可能会创建多个函数。请参阅相关文档，了解如何卸载扩展程序。
卸载操作会删除所有资源（例如扩展程序的函数）以及为该扩展程序实例创建的服务账号。不过，卸载扩展程序后，该扩展程序创建的所有工件（例如调整后的图片）都会保留在您的项目中。
在单个项目中安装扩展程序的多个副本
您不限于在项目中安装给定扩展程序的单个实例。如果您想限制其他路径中的条目，可以安装此扩展程序的其他实例。不过，在此 Codelab 中，您只需安装一次扩展程序即可。
查看实际用例
- 确保您登录的是发布木琴或拿铁纸时所用的帐号
- 生成一些草稿：
- 点击应用右下角的 Sell items 按钮
- 修改标题，使其显示“草稿 1”。
- 向下滚动到草稿部分，然后查看草稿数量。至少应该有两个。
- 点击顶部应用栏中的 FRIENDLY MARKET 按钮。这样即可保存草稿，但无需发布。
- 针对“草稿 2”“草稿 3”以此类推，针对“草稿 6”重复上述步骤。
- 创建“草稿 6”时，请注意“草稿 1 从您的草稿部分中消失。
- 与 Resize Images 扩展程序一样，您可以查看函数日志，了解触发了哪些函数。
糟糕，可保留的草稿数量限制太小了
您的客户支持团队取得了联系，告知您部分收益最高的卖家在发布草稿之前抱怨他们的草稿被删除了。您和队友一起检查自己的算术，结果发现自己的算术差了 10,000 倍！
如何解决此问题？我们来重新配置已安装的扩展程序！
- 在 Firebase 控制台的左侧窗格中，点击扩展程序。
- 在已安装的扩展程序的卡片上，点击管理。
- 点击右上角的重新配置扩展程序。
- 将要保留的节点数上限更改为
50000。 - 点击保存。
以上就是你所需的全部操作！在扩展程序进行更新期间，您可以与支持团队沟通，并告知他们系统已经部署了修复程序。
6. 自动删除用户数据
问题
您的客户支持团队已再次与您联系。卖家在删除了自己的帐号后，仍会收到其他用户发来的电子邮件，并感到非常生气！这些卖家期望在删除账号时，其电子邮件地址会被从您的系统中删除。
目前，支持团队一直在手动删除每位用户的数据，但也有更好的方法！您仔细思考，并考虑编写自己的批量作业，该作业会定期运行并清除已删除帐号中的电子邮件地址。但是，删除用户数据似乎是一个很常见的问题。也许 Firebase Extensions 也能帮助您解决这个问题。
解决方案
您将配置 Delete User Data 扩展程序，以便在用户删除其帐号时自动删除数据库中的 users/uid 节点。
- 点击该扩展程序的详细信息页面上的安装按钮。
- 选择您要用于 Marketplace Web 应用的 Firebase 项目。
- 按照屏幕上的说明操作，直到完成配置扩展程序步骤。
- 对于Realtime Database 路径，请输入
sellers/{UID}。sellers部分是其子节点包含用户电子邮件地址的节点，{UID}是通配符。采用这种配置后，该扩展程序就会知道，当拥有 UID 1234 的用户删除其帐号时，该扩展程序应该从数据库中删除sellers/1234。 - 点击安装扩展程序。
在等待安装完成期间...
我们来谈谈可定制性
在此 Codelab 中，您已经了解到 Firebase Extensions 可以帮助解决常见的用例，并且扩展程序可以进行配置以满足您的应用的需求。
但是，扩展程序无法解决所有问题，用户数据删除问题就是一个很好的例子。“删除用户数据”扩展程序应对的是当前的投诉，即在用户删除其帐号后仍然会看到电子邮件，但该扩展程序不会删除所有内容。例如，商品详情仍然可用，并且 Cloud Storage 中的任何图片也将会保留。“删除用户数据”扩展程序允许我们配置要删除的 Cloud Storage 路径，但由于用户可以上传许多具有许多不同名称的不同文件，因此您无法配置此扩展程序来自动删除这些工件。对于此类情况，Cloud Functions for Firebase 可能更合适，以便您编写特定于应用数据模型的代码。
扩展程序和结算
Firebase Extensions 本身是免费的（您只需为所使用的底层资源付费），但扩展程序所需的某些底层资源可能需要付费。此 Codelab 设计为在没有结算账号的情况下完成。不过，设置 Flame 或 Blaze 方案可以解锁许多非常有趣的 Firebase 扩展程序。
例如，您可以缩短网址、触发电子邮件、将集合导出到 BigQuery，以及执行其他操作！点击此处可查看完整的扩展程序目录。
如果您想安装某个扩展程序，但该扩展程序目前不可用，我们很乐意倾听您的意见！向 Firebase 支持团队提交功能请求，提供新的扩展程序建议。
查看实际用例
扩展程序安装完毕后，删除一位用户，看看会发生什么情况：
- 在 Firebase 控制台中，前往 Realtime Database 信息中心。
- 展开
sellers节点。 - 每个销售人员的信息都与其用户的 UID 对应。选择用户的 UID。
- 在 Firebase 控制台中，前往您的 Authentication 信息中心，找到该用户 UID。
- 展开 UID 右侧的菜单，然后选择删除帐号。
- 返回 Realtime Database 信息中心。卖家信息会消失！
7. 恭喜！
尽管您在此 Codelab 中未编写很多代码，但您为 Marketplace 应用添加了重要功能。
您已了解如何发现、配置、安装和重新配置扩展程序。此外，您还学习了如何监控已安装的扩展程序，以及如何在必要时卸载这些扩展程序。
后续操作
不妨试试下列其他一些扩展程序：
- 翻译 Cloud Firestore 中的文本字符串（需要结算帐号）
- 将新用户添加到 Mailchimp 电子邮件收件人列表（需要结算帐号）
- 缩短网址（需要结算帐号）
需要更多自定义服务器端代码？
其他实用文档
管理扩展程序：
详细了解扩展程序：