桌面软件应用程序 SDK
Deskpro Apps SDK 提供了一个客户端,用于与 Deskpro 系统通信, React UI 组件以及基础 用于简单的应用程序和部件的样式和公用事业.
安装
通过安装 SDK pnpm 或者说 npm数字 :
pnpm add @deskpro/app-sdk
或
npm install @deskpro/app-sdk
基本用途
在与 Deskpro 系统通信时, 应用程序或部件必须注册关键事件的“听众 ” :
- 准备 - 当应用程序被装入时,但不一定向用户显示
- 显示 - 应用程序已经透露给用户
- 变化 - 数据(文稿)从Officepro传送到应用程序已经改变
要注册一个收听器, 您需要先导入并创建一个 Appro 客户端, 注册 收听器, 最后运行客户端 :
import { createClient } from "@deskpro/app-sdk";
const client = createClient();
client.onReady((context) => {
// do something when the app is ready
});
client.onShow((context) => {
// do something when the app is shown to the user
});
client.onChange((context) => {
// do something when the "context" data has changed
});
client.run();
顺便说一句,在页面装入后"运行"客户端总是最好的,最简单的方式
这是用来注册 client.run() 调用为 window.onload 方法 :
import { createClient } from "@deskpro/app-sdk";
const client = createClient();
window.onload = () => client.run();
// ...
来做 fetch 通过应用程序代理请求, 并因此获得访问应用程序设置, 我们已经提供了
覆盖原生工具 fetch 在浏览器中的函数 :
import { createClient, proxyFetch } from "@deskpro/app-sdk";
const client = createClient();
window.onload = () => client.run();
proxyFetch(client).then((dpFetch) => {
// Use dpFetch() just like you would use fetch() natively.
dpFetch("https://example.com/api/things?api_key=__key__").then((res) => {
// ...
});
});
通知代理将替换格式的占位符 __<setting>__在这个例子中, __key__ 将
替换为app后端设置 key。代理设置占位符可放入 URL,
请求头或正文.
您也可以控制 Askpro 本身的方面, 如 app 标题和图标徽章 计数 。 要做到这一点,请使用客户端 再次设置这些属性 :
import { createClient } from "@deskpro/app-sdk";
const client = createClient();
window.onload = () => client.run();
client.setTitle("My New Title");
client.setBadgeCount(42);
UI 组件
Apps SDK 输出数个 服务台 组件和组件 由出版的每个故事书支持.
所有应用 UI 组件都位于 src/ui/components 通常由三个文件组成:
- 组件文件,例如:.
Button.tsx出口或复合部分 - 故事文件,例如:.
Button.stories.tsx包含组件的故事 - 索引文件
要开始开发UI组件,请使用:
pnpm start
准备建设时,运行此库的标准建设过程:
pnpm build
说明: UI 组件为 未捆绑相反,它们可以在无害环境管理和CJS模块中找到.
测试
要运行 SDK 测试套件, 请执行以下操作 :
pnpm test
或
npm run test