在 Sketch 52 中，我们引入了激动人心的新功能 - 数据。如果你还没有阅读过相关信息，请务必查看 我们的发布博客文章，或者观看 Peter Nowell 的这段精彩的入门视频，该视频是 他新的 Sketch UX 设计课程的一部分
这项新功能使将数据引入设计变得非常容易，并且以尽可能无痛的方式解决了最常见的用例 - *“只要给我一些随机的东西”*。
但是，如果你的需求稍微复杂一些呢？如果不想让数据是随机的，而是完全可预测的呢？如果需要数据更智能呢？
数据提供者插件登场
在设计数据功能时，我们希望它对大多数用户来说尽可能简单，但同时为更高级的用户留下扩展其功能的余地。为此，我们在已经强大的插件后端之上构建了它，添加了一个新的 API - DataSupplier。
使用它，你可以创建一个 Sketch 插件，该插件为应用程序添加一个数据源，使客户能够轻松使用它，同时仍然可以利用插件可以完成的所有精彩事情。但是，在开始创建数据提供者插件之前，了解数据功能在幕后的工作原理是值得的。
Sketch 支持两种类型的图层数据：图像和纯文本。单个插件可以提供多种数据类型，因此，如果需要同时提供文本和图像，则可以使用一个插件即可。当在应用程序中选择一个图层，或在检查器中单击覆盖的“数据”图标时，Sketch 会为每种图层类型启用相关源。我们将在后面了解如何为每种数据类型注册插件。
当用户在 Sketch 中请求某些数据时，它会将该请求传递给相关的插件，以及一些用于完成请求的重要信息（位于 context.data 中）。然后，你的插件将进行一些操作来生成、收集或下载数据，并将数据发送回 Sketch，以便它将数据放置在相关的图层上。你可以一步完成此操作 - 通过向 Sketch 发送一个数据数组 - 或者逐个返回数据（如果从可能需要一两秒才能下载的网络获取数据，这很有用）。
说够了吧，让我看看代码！数据提供者插件示例
在这篇文章中，我们将介绍一个简单的示例，向你展示如何创建一个数据提供者插件（别担心，如果想要一些灵感，我们在最后提供了一些更复杂的示例）。它假设你已经熟悉我们的插件平台，但如果你知道一些 JavaScript，你也可以跟着做。
我们将使用我们的命令行工具创建、开发和发布 Sketch 插件，skpm。如果它尚未安装在你的系统中，请打开 Terminal.app 并运行以下命令
npm install --global skpm
请注意，skpm 要求安装 Node.js，但这超出了本教程的范围。如果需要帮助安装它，请访问 查看他们的文档。
skpm 最棒的功能之一是能够使用模板创建插件，我们专门为数据创建了一个模板：https://github.com/skpm/with-datasupplier。
要使用它，让我们用它创建一个新插件
skpm create datademo --template=skpm/with-datasupplier
这将创建一个 datademo 文件夹，向其中添加一些文件，安装所有必需的依赖项，并提供有关如何从这里继续的一些说明。我们将
cd datademo
然后
npm run build
这将构建我们的数据插件，并使其在 Sketch 中可用。你可以在“偏好设置”中的“插件”部分看到你的插件
以及在新的“数据”部分，以及其他数据源
如果你现在在新的文档中添加一堆文本图层，然后选择“数据”>“datademo”，你将看到我们的示例插件在做什么：生成随机数并将文本图层填充它们。
现在，让我们看看代码，了解这里发生了什么。在你的代码编辑器中，打开我们创建的 datademo 文件夹，然后打开 src/my-command.js。暂时忽略 onStartup 和 onShutdown 函数，直接跳到 onSupplyData。这是 Sketch 在请求插件提供数据时调用的方法，它执行四件事
- 从上下文中获取数据键，以便稍后返回数据
- 迭代受操作影响的图层
- 为每个图层生成一个随机数，以及
- 将数据发送回 Sketch
步骤 1 是从 context.data 对象中获取 key 属性。以下是其中包含的属性列表
- 一个
key属性，它是一个 UUID，你的插件将使用它将数据返回到正确的请求 - 一个
items属性，它是一个NSArray，其中包含 Sketch 需要数据的图层或覆盖列表
let dataKey = context.data.key
步骤 2 是使用 forEach 对 Sketch 需要数据的图层集合进行基本操作。该集合位于 context.data.items 中。根据用户如何触发该功能，这些项目可以是图层或覆盖。
const items = util.toArray(context.data.items).map(sketch.fromNative)
items.forEach((item, index) => {
// do stuff here…
})
步骤 3 只是生成随机数
let data = Math.random().toString()
不要让这个基本示例误导你：你可以在这里做任何你需要做的事情。从在线 API 获取动态天气数据？将图层的文本翻译成印度尼西亚语？从生产数据库中下载真实数据以设置产品的图片？尽情发挥你的想象力…
最后，步骤 4 只是将我们生成的数据转发给 DataSupplier 对象，以便它将数据发送回 Sketch。
DataSupplier.supplyDataAtIndex(dataKey, data, index)
其中 dataKey 是我们从上下文中传递的键（在 context.data.key 中）。在本例中，我们使用 supplyDataAtIndex 方法逐个发送数据，但我们可以将数据存储在 Array 对象中，然后使用 supplyData 方法一次性传递所有数据
let count = context.data.items.count()
let dataKey = context.data.key
let data = Array.from(Array(count)).map(i => Math.random().toString())
DataSupplier.supplyData(dataKey, data)
处理图像的过程完全相同，只是你需要提供磁盘上图像文件的路径。如果要使用来自在线服务的图像，则需要将它们下载到临时位置。查看 我们自己的 Unsplash 插件，了解如何执行此操作的示例。
另一个有趣的示例是 随机翻译插件，我们使用 Yandex API 将 Sketch 中的文本图层翻译成随机语言（因为没有什么比意想不到的词长和奇怪的字符更能破坏你的设计了！）。
将我们的插件注册到 Sketch
现在，我们已经有了生成随机数的惊人代码，我们需要告诉 Sketch 有关它。为此，我们需要向 manifest.json 添加一个属性（这在 skpm 模板中已经为我们设置好了）
"suppliesData": true
我们还需要告诉 Sketch 我们的插件提供哪些数据类型，以及调用哪个函数来获取插件中的数据。这可以通过在清单文件中使用 `actions` 部分来完成，我们将在其中添加启动/关闭的处理程序（用于注册/取消注册我们的插件），以及插件被调用时触发的事件的处理程序（您可以使用任何您想要的名称来命名您的事件，`SupplyData` 只是我们在示例中使用的名称）。
{
"actions": {
"Startup": "onStartup",
"Shutdown": "onShutdown",
"SupplyData": "onSupplyData"
}
}
然后，在 `my-command.js` 中，我们在 `onStartup` 方法中注册插件
export function onStartup() {
DataSupplier.registerDataSupplier('public.text', 'datademo', 'SupplyData')
}
这告诉 Sketch 为 `SupplyData` 事件注册一个名为 `datademo` 的文本数据提供程序。如果您希望您的插件提供图像，您需要使用 `public.image` 作为第一个参数。
进一步阅读
如果您想了解更多关于 DataSupplier 功能的信息，以下是一些您需要查看的链接
- 我们的 API 文档
- 我们的示例插件：数据提供程序，随机翻译，Unsplash
- 数据插件的 skpm 模板：https://github.com/skpm/with-datasupplier
总结
今天就到这里！我们已经讨论了很多内容，相信这些内容会让您忙碌到我们下次在该系列的第二部分中见面，届时我们将学习如何使用数据和符号覆盖。
在那之前，玩得开心！别忘了与我们分享您的作品，我们喜欢看到您正在构建的东西。
