在 Sketch 52 中，我们引入了一项令人兴奋的新功能——数据。如果您还没有阅读过相关信息，请务必查看我们的发布博文，或者观看 Peter Nowell 精彩的介绍视频，该视频是他的新 UX Design in Sketch 课程的一部分。
这个新功能可以非常容易地将数据导入到你的设计中，并且尽可能轻松地解决最常见的用例——“只需给我一些随机的东西”。
但是，如果您有稍微复杂的需求怎么办？如果您不希望您的数据是随机的，而是完全可预测的怎么办？如果您需要您的数据更智能怎么办？
输入数据提供插件
在设计数据功能时，我们希望它对大多数客户来说尽可能简单，但为更高级的用户扩展其功能敞开了大门。为了做到这一点，我们将其构建在已经非常强大的插件后端之上，并添加了一个新的 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 步**是通过对 Sketch 需要数据的图层集合执行基本的 forEach 操作来实现的。该集合位于 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 我们的插件提供哪些数据类型，以及调用哪个函数来从我们的插件获取数据。这是通过 manifest 文件中的 actions 部分完成的，我们将在其中添加 Startup / Shutdown 的处理程序（以注册 / 注销我们的插件），以及一个在调用插件时触发的事件的处理程序（你可以为你的事件使用任何你想要的名字，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 文档
- 我们的示例插件：Data Supplier, Random Translation, Unsplash
- Data 插件的 skpm 模板：https://github.com/skpm/with-datasupplier
总结
今天就到这里！我们已经介绍了相当多的内容，我们相信这些内容足以让你忙碌，直到我们在本系列的第二部分再次相遇，在那里我们将学习如何使用 Data 和 Symbol Overrides。
在那之前，玩得开心！ 别忘了与我们分享你的作品，我们很乐意看到你正在构建的东西。
