在 Sketch 52 中，我們推出了令人興奮的新功能 — 數據。如果您還沒有閱讀相關資訊，請務必查看我們的版本發佈部落格文章，或者看看 Peter Nowell 的精彩介紹影片，這是他在 Sketch 中的全新 UX 設計課程的一部分。
這個新功能讓您輕鬆地將數據導入設計中，並以最輕鬆的方式解決最常見的使用案例 — 「只要給我一些隨機數據」。
但如果您有更複雜的需求呢？如果您不希望數據是隨機的，而是完全可預測的呢？如果您需要更智慧的數據呢？
認識數據供應器外掛程式
當我們設計數據功能時，我們希望它對大多數用戶來說盡可能簡單，但同時也為更進階的用戶保留擴展其功能的空間。為了做到這一點，我們將其建構在我們已經非常強大的外掛程式後端之上，並添加了一個新的 API — DataSupplier。
使用這個 API，您可以建構一個 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屬性，它是一個包含 Sketch 需要數據的圖層或覆蓋列表的NSArray
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 方法逐個發送數據，但我們可以將數據存儲在數組對象中，然後使用 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 文檔
- 我們的範例插件：數據供應器、隨機翻譯、Unsplash
- 數據插件的 skpm 模板：https://github.com/skpm/with-datasupplier
總結
今天就到這裡！我們已經介紹了很多內容，相信這會讓您忙到我們在本系列的第二部分再次見面，屆時我們將學習如何使用數據和符號覆蓋。
在此之前，祝您玩得開心！別忘了與我們分享您的作品，我們很樂意看到您的成果。
