@ canva/ intents (英语)

一个Canva开发者SDK软件包,用于Canva内部构建应用软件. 为与App Intents合作提供类型和公用事业.

目录

• 导言
• 安装
• 使用量
• 相关软件包
• 捐款
• 许可证

导言

@canva/intents 是 npm 建设软件包 canva 内部的应用程序 与 Canva 开发者 SDK . 它提供意向特定类型和帮助器,允许应用程序与Canva编辑器内部的特定表面相融合——如数据连接器面板或设计编辑器.

一个"意向"代表一个应用程序可以支持的特定用户工作流程. 例如:

• 用户可以从执行此程序的应用程序中选择并导入数据 数据连接器 意图.
• 一个应用软件能够通过执行 Canva 设计表面来展示互动和创造性的工具 设计编辑器 意图.
• 用户可以直接向外部平台发布他们的Canva设计.

这个 @canva/intents 软件包包含 所有可用意图,导出每个意图的类型信息并准备函数,按域分组. 这使得您的应用程序可以准备一个或多个意图,同时保留每个意图的执行模块和类型安全.

目前得到支持的意图:

• Data Connector
• Design Editor
• Content Publisher

今后将增加新的意图.

说明: 要与 Canva 开发者 SDK 一同起来运行, 请检查 快速启动指南。 。 。 .

安装

npm install @canva/intents

使用量

准备意图

每个意图类型都有相应的 prepare 函数 @canva/intents 软件包。 您可以通过调用适当的程序执行应用程序代码中的任何意图 prepare 函数及其所需的特定参数.

数据连接示例

以下是一个完整的例子 data_connector 意图,允许用户从应用程序导入表格数据:

import { createRoot } from 'react-dom/client';
import { AppUiProvider } from '@canva/app-ui-kit';
import { prepareDataConnector } from '@canva/intents/data';
import { DataSelectionUI } from './data_selection_ui';
import { fetchData } from './fetch_data';

prepareDataConnector({
  getDataTable: async (request) => {
    try {
      const dataTable = await fetchData(request); // your data fetching logic here
      return {
        status: 'completed',
        dataTable,
      };
    } catch {
      return {
        status: 'app_error',
        message: 'Failed to fetch data',
      };
    }
  },

  renderSelectionUi: (request) => {
    const root = createRoot(document.getElementById('root') as Element);
    root.render(
      <AppUiProvider>
        <DataSelectionUI {...request} />
      </AppUiProvider>
    );
  },
});

设计编辑器示例

import { prepareDesignEditor } from '@canva/intents/design';

prepareDesignEditor({
  render() {
    // render logic
  },
});

内容发布器实例

import { prepareContentPublisher } from "@canva/intents/content";

prepareContentPublisher({
  renderSettingsUi: ({
    updatePublishSettings,
    registerOnContextChange,
  }) => {
    root.render(
      <AppUiProvider>
        <SettingUi
          updatePublishSettings={updatePublishSettings}
          registerOnContextChange={registerOnContextChange}
        />
      </AppUiProvider>,
    );
  },

  renderPreviewUi: ({ registerOnPreviewChange }) => {
    root.render(
      <AppUiProvider>
        <PreviewUi registerOnPreviewChange={registerOnPreviewChange} />
      </AppUiProvider>,
    );
  },

  getPublishConfiguration: async () => {
    return {
      status: "completed",
      outputTypes: [
        {
          id: "post",
          displayName: "Post",
          mediaSlots: [
            {
              id: "media",
              displayName: "Media",
              fileCount: { exact: 1 },
              accepts: {
                image: {
                  format: "png",
                },
              },
            },
          ],
        },
      ],
    };
  },

  publishContent: async (request: PublishContentRequest) => {
    // logic to upload media to your platform here
    return {
      status: "completed",
      externalId: "1234567890",
      externalUrl: "https://example.com/posts/1234567890",
    };
  },
});

相关软件包

Canva内部的App是用以下 Canva 开发者 SDK 包构建的 :

• @canva/app-ui-kit - 基于反应的组件库,用于创建模仿Canva外观和感觉的应用程序.
• @canva/asset - 提供处理资产的方法,例如图像和录像文件.
• @canva/design - 提供与用户设计互动的方法,例如创建要素.
• @canva/error - 提供 CanvaError 处理错误的课.
• @canva/platform - 提供实用方法,例如打开外部链接的方法.
• @canva/user - 提供获取用户数据和认证用户的方法.

捐款

我们正在积极开发这个一揽子计划,但目前不接受第三方的捐款. 如果您想要求修改或添加软件包,请通过 Canva 开发者社区。 。 。 .

许可证

见 LICENSE.md 文档.