i18n - docs translations (#18541)
Created by Github action Co-authored-by: github-actions <github-actions@twenty.com>
This commit is contained in:
github-actions[bot]
committed by
GitHub
GitHub
parent
621962e049
commit
e7fe435f60
@@ -0,0 +1,689 @@
|
||||
---
|
||||
title: 构建应用
|
||||
description: 使用 Twenty SDK 定义对象、逻辑函数、前端组件等。
|
||||
---
|
||||
|
||||
<Warning>
|
||||
应用目前处于 Alpha 测试阶段。 该功能可用，但仍在演进中。
|
||||
</Warning>
|
||||
|
||||
## 使用 SDK 资源（类型与配置）
|
||||
|
||||
twenty-sdk 提供你在应用中使用的类型化构件和辅助函数。 以下是你最常接触的关键部分。
|
||||
|
||||
### 辅助函数
|
||||
|
||||
该 SDK 提供辅助函数用于定义你的应用实体。 如 [实体检测](/l/zh/developers/extend/apps/getting-started#entity-detection) 中所述，你必须使用 `export default define<Entity>({...})` 才能让你的实体被检测到：
|
||||
|
||||
| 函数 | 目的 |
|
||||
| -------------------------------- | ------------------- |
|
||||
| `defineApplication` | 配置应用元数据（必需，每个应用一个） |
|
||||
| `defineObject` | 定义带字段的自定义对象 |
|
||||
| `defineLogicFunction` | 定义带处理程序的逻辑函数 |
|
||||
| `definePreInstallLogicFunction` | 定义一个安装前逻辑函数（每个应用一个） |
|
||||
| `definePostInstallLogicFunction` | 定义一个安装后逻辑函数（每个应用一个） |
|
||||
| `defineFrontComponent` | 为自定义 UI 定义前端组件 |
|
||||
| `defineRole` | 配置角色权限和对象访问 |
|
||||
| `defineField` | 为现有对象扩展额外字段 |
|
||||
| `defineView` | 为对象定义已保存的视图 |
|
||||
| `defineNavigationMenuItem` | 定义侧边栏导航链接 |
|
||||
| `defineSkill` | 定义 AI 智能体技能 |
|
||||
|
||||
这些函数会在构建时校验你的配置，并提供 IDE 自动补全和类型安全。
|
||||
|
||||
### 定义对象
|
||||
|
||||
自定义对象同时描述工作空间中记录的架构与行为。 使用 `defineObject()` 以内置校验定义对象：
|
||||
|
||||
```typescript
|
||||
// src/app/postCard.object.ts
|
||||
import { defineObject, FieldType } from 'twenty-sdk';
|
||||
|
||||
enum PostCardStatus {
|
||||
DRAFT = 'DRAFT',
|
||||
SENT = 'SENT',
|
||||
DELIVERED = 'DELIVERED',
|
||||
RETURNED = 'RETURNED',
|
||||
}
|
||||
|
||||
export default defineObject({
|
||||
universalIdentifier: '54b589ca-eeed-4950-a176-358418b85c05',
|
||||
nameSingular: 'postCard',
|
||||
namePlural: 'postCards',
|
||||
labelSingular: 'Post Card',
|
||||
labelPlural: 'Post Cards',
|
||||
description: 'A post card object',
|
||||
icon: 'IconMail',
|
||||
fields: [
|
||||
{
|
||||
universalIdentifier: '58a0a314-d7ea-4865-9850-7fb84e72f30b',
|
||||
name: 'content',
|
||||
type: FieldType.TEXT,
|
||||
label: 'Content',
|
||||
description: "Postcard's content",
|
||||
icon: 'IconAbc',
|
||||
},
|
||||
{
|
||||
universalIdentifier: 'c6aa31f3-da76-4ac6-889f-475e226009ac',
|
||||
name: 'recipientName',
|
||||
type: FieldType.FULL_NAME,
|
||||
label: 'Recipient name',
|
||||
icon: 'IconUser',
|
||||
},
|
||||
{
|
||||
universalIdentifier: '95045777-a0ad-49ec-98f9-22f9fc0c8266',
|
||||
name: 'recipientAddress',
|
||||
type: FieldType.ADDRESS,
|
||||
label: 'Recipient address',
|
||||
icon: 'IconHome',
|
||||
},
|
||||
{
|
||||
universalIdentifier: '87b675b8-dd8c-4448-b4ca-20e5a2234a1e',
|
||||
name: 'status',
|
||||
type: FieldType.SELECT,
|
||||
label: 'Status',
|
||||
icon: 'IconSend',
|
||||
defaultValue: `'${PostCardStatus.DRAFT}'`,
|
||||
options: [
|
||||
{ value: PostCardStatus.DRAFT, label: 'Draft', position: 0, color: 'gray' },
|
||||
{ value: PostCardStatus.SENT, label: 'Sent', position: 1, color: 'orange' },
|
||||
{ value: PostCardStatus.DELIVERED, label: 'Delivered', position: 2, color: 'green' },
|
||||
{ value: PostCardStatus.RETURNED, label: 'Returned', position: 3, color: 'orange' },
|
||||
],
|
||||
},
|
||||
{
|
||||
universalIdentifier: 'e06abe72-5b44-4e7f-93be-afc185a3c433',
|
||||
name: 'deliveredAt',
|
||||
type: FieldType.DATE_TIME,
|
||||
label: 'Delivered at',
|
||||
icon: 'IconCheck',
|
||||
isNullable: true,
|
||||
defaultValue: null,
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
关键点：
|
||||
|
||||
* 使用 `defineObject()` 以获得内置校验和更好的 IDE 支持。
|
||||
* `universalIdentifier` 必须在各次部署间保持唯一且稳定。
|
||||
* 每个字段都需要 `name`、`type`、`label` 以及其自身稳定的 `universalIdentifier`。
|
||||
* `fields` 数组是可选的——你可以定义没有自定义字段的对象。
|
||||
* 你可以使用 `yarn twenty entity:add` 脚手架创建新对象，它会引导你完成命名、字段和关系。
|
||||
|
||||
<Note>
|
||||
**基础字段会自动创建。** 当你定义自定义对象时，Twenty 会自动添加标准字段
|
||||
例如 `id`、`name`、`createdAt`、`updatedAt`、`createdBy`、`updatedBy` 和 `deletedAt`。
|
||||
你无需在 `fields` 数组中定义这些字段——只需添加你的自定义字段。
|
||||
你可以通过在你的 `fields` 数组中定义一个同名字段来覆盖默认字段，
|
||||
但不建议这样做。
|
||||
</Note>
|
||||
|
||||
### 应用配置（application-config.ts）
|
||||
|
||||
每个应用都有一个 `application-config.ts` 文件，用于描述：
|
||||
|
||||
* **应用的身份**：标识符、显示名称和描述。
|
||||
* **函数如何运行**：它们用于权限的角色。
|
||||
* **（可选）变量**：以环境变量形式提供给函数的键值对。
|
||||
* **（可选）安装前函数**：在应用安装之前运行的逻辑函数。
|
||||
* **（可选）安装后函数**：在应用安装后运行的逻辑函数。
|
||||
|
||||
使用 `defineApplication()` 定义你的应用配置：
|
||||
|
||||
```typescript
|
||||
// src/application-config.ts
|
||||
import { defineApplication } from 'twenty-sdk';
|
||||
import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from 'src/roles/default-role';
|
||||
|
||||
export default defineApplication({
|
||||
universalIdentifier: '4ec0391d-18d5-411c-b2f3-266ddc1c3ef7',
|
||||
displayName: 'My Twenty App',
|
||||
description: 'My first Twenty app',
|
||||
icon: 'IconWorld',
|
||||
applicationVariables: {
|
||||
DEFAULT_RECIPIENT_NAME: {
|
||||
universalIdentifier: '19e94e59-d4fe-4251-8981-b96d0a9f74de',
|
||||
description: 'Default recipient name for postcards',
|
||||
value: 'Jane Doe',
|
||||
isSecret: false,
|
||||
},
|
||||
},
|
||||
defaultRoleUniversalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
|
||||
});
|
||||
```
|
||||
|
||||
备注:
|
||||
|
||||
* `universalIdentifier` 字段是你拥有的确定性 ID；生成一次并在多次同步中保持稳定。
|
||||
* `applicationVariables` 会变成函数可用的环境变量（例如，`DEFAULT_RECIPIENT_NAME` 可作为 `process.env.DEFAULT_RECIPIENT_NAME` 使用）。
|
||||
* `defaultRoleUniversalIdentifier` 必须与角色文件一致（见下文）。
|
||||
* 清单构建期间会自动检测安装前和安装后函数。 参见 [安装前函数](#pre-install-functions) 和 [安装后函数](#post-install-functions)。
|
||||
|
||||
#### 角色和权限
|
||||
|
||||
应用可以定义角色，以封装对工作空间对象与操作的权限。 `application-config.ts` 中的 `defaultRoleUniversalIdentifier` 字段指定你的应用逻辑函数所使用的默认角色。
|
||||
|
||||
* 作为 `TWENTY_API_KEY` 注入的运行时 API 密钥源自该默认函数角色。
|
||||
* 类型化客户端将受限于该角色授予的权限。
|
||||
* 遵循最小权限原则：仅授予函数所需权限来创建一个专用角色，然后引用其通用标识符。
|
||||
|
||||
##### 默认函数角色（*.role.ts）
|
||||
|
||||
当你脚手架生成新应用时，CLI 也会创建一个默认角色文件。 使用 `defineRole()` 定义带内置校验的角色：
|
||||
|
||||
```typescript
|
||||
// src/roles/default-role.ts
|
||||
import { defineRole, PermissionFlag } from 'twenty-sdk';
|
||||
|
||||
export const DEFAULT_ROLE_UNIVERSAL_IDENTIFIER =
|
||||
'b648f87b-1d26-4961-b974-0908fd991061';
|
||||
|
||||
export default defineRole({
|
||||
universalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
|
||||
label: 'Default function role',
|
||||
description: 'Default role for function Twenty client',
|
||||
canReadAllObjectRecords: false,
|
||||
canUpdateAllObjectRecords: false,
|
||||
canSoftDeleteAllObjectRecords: false,
|
||||
canDestroyAllObjectRecords: false,
|
||||
canUpdateAllSettings: false,
|
||||
canBeAssignedToAgents: false,
|
||||
canBeAssignedToUsers: false,
|
||||
canBeAssignedToApiKeys: false,
|
||||
objectPermissions: [
|
||||
{
|
||||
objectUniversalIdentifier: '9f9882af-170c-4879-b013-f9628b77c050',
|
||||
canReadObjectRecords: true,
|
||||
canUpdateObjectRecords: true,
|
||||
canSoftDeleteObjectRecords: false,
|
||||
canDestroyObjectRecords: false,
|
||||
},
|
||||
],
|
||||
fieldPermissions: [
|
||||
{
|
||||
objectUniversalIdentifier: '9f9882af-170c-4879-b013-f9628b77c050',
|
||||
fieldUniversalIdentifier: 'b2c37dc0-8ae7-470e-96cd-1476b47dfaff',
|
||||
canReadFieldValue: false,
|
||||
canUpdateFieldValue: false,
|
||||
},
|
||||
],
|
||||
permissionFlags: [PermissionFlag.APPLICATIONS],
|
||||
});
|
||||
```
|
||||
|
||||
随后，该角色的 `universalIdentifier` 会在 `application-config.ts` 中被引用为 `defaultRoleUniversalIdentifier`。 换句话说：
|
||||
|
||||
* **\*.role.ts** 定义默认函数角色可以执行的操作。
|
||||
* **application-config.ts** 指向该角色，使你的函数继承其权限。
|
||||
|
||||
备注:
|
||||
|
||||
* 从脚手架生成的角色开始，然后按照最小权限原则逐步收紧权限。
|
||||
* 将 `objectPermissions` 和 `fieldPermissions` 替换为你的函数所需的对象/字段。
|
||||
* `permissionFlags` 控制对平台级能力的访问。 尽量保持最小化；仅添加所需项。
|
||||
* 在 Hello World 应用中查看可运行示例：[`packages/twenty-apps/hello-world/src/roles/function-role.ts`](https://github.com/twentyhq/twenty/blob/main/packages/twenty-apps/hello-world/src/roles/function-role.ts)。
|
||||
|
||||
### 逻辑函数的配置与入口点
|
||||
|
||||
每个函数文件都使用 `defineLogicFunction()` 导出包含处理程序和可选触发器的配置。
|
||||
|
||||
```typescript
|
||||
// src/app/createPostCard.logic-function.ts
|
||||
import { defineLogicFunction } from 'twenty-sdk';
|
||||
import type { DatabaseEventPayload, ObjectRecordCreateEvent, CronPayload, RoutePayload } from 'twenty-sdk';
|
||||
import { CoreApiClient, type Person } from 'twenty-sdk/generated';
|
||||
|
||||
const handler = async (params: RoutePayload) => {
|
||||
const client = new CoreApiClient();
|
||||
const name = 'name' in params.queryStringParameters
|
||||
? params.queryStringParameters.name ?? process.env.DEFAULT_RECIPIENT_NAME ?? 'Hello world'
|
||||
: 'Hello world';
|
||||
|
||||
const result = await client.mutation({
|
||||
createPostCard: {
|
||||
__args: { data: { name } },
|
||||
id: true,
|
||||
name: true,
|
||||
},
|
||||
});
|
||||
return result;
|
||||
};
|
||||
|
||||
export default defineLogicFunction({
|
||||
universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
|
||||
name: 'create-new-post-card',
|
||||
timeoutSeconds: 2,
|
||||
handler,
|
||||
triggers: [
|
||||
// Public HTTP route trigger '/s/post-card/create'
|
||||
{
|
||||
universalIdentifier: 'c9f84c8d-b26d-40d1-95dd-4f834ae5a2c6',
|
||||
type: 'route',
|
||||
path: '/post-card/create',
|
||||
httpMethod: 'GET',
|
||||
isAuthRequired: false,
|
||||
},
|
||||
// Cron trigger (CRON pattern)
|
||||
// {
|
||||
// universalIdentifier: 'dd802808-0695-49e1-98c9-d5c9e2704ce2',
|
||||
// type: 'cron',
|
||||
// pattern: '0 0 1 1 *',
|
||||
// },
|
||||
// Database event trigger
|
||||
// {
|
||||
// universalIdentifier: '203f1df3-4a82-4d06-a001-b8cf22a31156',
|
||||
// type: 'databaseEvent',
|
||||
// eventName: 'person.updated',
|
||||
// updatedFields: ['name'],
|
||||
// },
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
常见触发器类型：
|
||||
|
||||
* **route**：在\*\*`/s/` 端点\*\*下通过 HTTP 路径与方法公开你的函数：
|
||||
|
||||
> 例如 `path: '/post-card/create',` -> 调用 `<APP_URL>/s/post-card/create`
|
||||
|
||||
* **cron**：使用 CRON 表达式按计划运行你的函数。
|
||||
* **databaseEvent**：在工作空间对象生命周期事件上运行。 当事件操作为 `updated` 时，可以在 `updatedFields` 数组中指定要监听的特定字段。 如果未定义或为空，任何更新都会触发该函数。
|
||||
|
||||
> 例如 `person.updated`
|
||||
|
||||
备注:
|
||||
|
||||
* `triggers` 数组是可选的。 没有触发器的函数可作为实用函数，被其他函数调用。
|
||||
* 你可以在单个函数中混用多种触发器类型。
|
||||
|
||||
### 安装前函数
|
||||
|
||||
安装前函数是在你的应用安装到工作区之前自动运行的逻辑函数。 这对于执行验证任务、先决条件检查，或在主安装开始前准备工作区状态很有用。
|
||||
|
||||
当你使用 `create-twenty-app` 脚手架创建一个新应用时，会在 `src/logic-functions/pre-install.ts` 为你生成一个安装前函数：
|
||||
|
||||
```typescript
|
||||
// src/logic-functions/pre-install.ts
|
||||
import { definePreInstallLogicFunction, type InstallLogicFunctionPayload } from 'twenty-sdk';
|
||||
|
||||
const handler = async (payload: InstallLogicFunctionPayload): Promise<void> => {
|
||||
console.log('Pre install logic function executed successfully!', payload.previousVersion);
|
||||
};
|
||||
|
||||
export default definePreInstallLogicFunction({
|
||||
universalIdentifier: '<generated-uuid>',
|
||||
name: 'pre-install',
|
||||
description: 'Runs before installation to prepare the application.',
|
||||
timeoutSeconds: 300,
|
||||
handler,
|
||||
});
|
||||
```
|
||||
|
||||
你也可以随时使用 CLI 手动执行安装前函数：
|
||||
|
||||
```bash filename="Terminal"
|
||||
yarn twenty function:execute --preInstall
|
||||
```
|
||||
|
||||
关键点：
|
||||
|
||||
* 安装前函数使用 `definePreInstallLogicFunction()` —— 这是一个省略触发器设置（`cronTriggerSettings`、`databaseEventTriggerSettings`、`httpRouteTriggerSettings`、`isTool`）的专用变体。
|
||||
* 处理器会接收一个 `InstallLogicFunctionPayload`，其包含 `{ previousVersion: string }` —— 即之前安装的应用版本（全新安装则为空字符串）。
|
||||
* 每个应用仅允许一个安装前函数。 如果检测到多个，清单构建将报错。
|
||||
* 在构建期间，函数的 `universalIdentifier` 会自动设置为应用清单上的 `preInstallLogicFunctionUniversalIdentifier` —— 你无需在 `defineApplication()` 中引用它。
|
||||
* 默认超时时间设置为 300 秒（5 分钟），以便支持更长的准备任务。
|
||||
* 安装前函数不需要触发器——它们会在安装前由平台调用，或通过 `function:execute --preInstall` 手动调用。
|
||||
|
||||
### 安装后函数
|
||||
|
||||
安装后函数是在你的应用安装到工作区后自动运行的逻辑函数。 这对于一次性设置任务很有用，例如填充默认数据、创建初始记录或配置工作区设置。
|
||||
|
||||
当你使用 `create-twenty-app` 脚手架创建一个新应用时，会在 `src/logic-functions/post-install.ts` 为你生成一个安装后函数：
|
||||
|
||||
```typescript
|
||||
// src/logic-functions/post-install.ts
|
||||
import { definePostInstallLogicFunction, type InstallLogicFunctionPayload } from 'twenty-sdk';
|
||||
|
||||
const handler = async (payload: InstallLogicFunctionPayload): Promise<void> => {
|
||||
console.log('Post install logic function executed successfully!', payload.previousVersion);
|
||||
};
|
||||
|
||||
export default definePostInstallLogicFunction({
|
||||
universalIdentifier: '<generated-uuid>',
|
||||
name: 'post-install',
|
||||
description: 'Runs after installation to set up the application.',
|
||||
timeoutSeconds: 300,
|
||||
handler,
|
||||
});
|
||||
```
|
||||
|
||||
你也可以随时使用 CLI 手动执行安装后函数：
|
||||
|
||||
```bash filename="Terminal"
|
||||
yarn twenty function:execute --postInstall
|
||||
```
|
||||
|
||||
关键点：
|
||||
|
||||
* 安装后函数使用 `definePostInstallLogicFunction()` —— 这是一个省略触发器设置（`cronTriggerSettings`、`databaseEventTriggerSettings`、`httpRouteTriggerSettings`、`isTool`）的专用变体。
|
||||
* 处理器会接收一个 `InstallLogicFunctionPayload`，其包含 `{ previousVersion: string }` —— 即之前安装的应用版本（全新安装则为空字符串）。
|
||||
* 每个应用仅允许一个安装后函数。 如果检测到多个，清单构建将报错。
|
||||
* 在构建期间，函数的 `universalIdentifier` 会自动设置为应用清单上的 `postInstallLogicFunctionUniversalIdentifier` —— 你无需在 `defineApplication()` 中引用它。
|
||||
* 默认超时时间设置为 300 秒（5 分钟），以便支持更长的设置任务，如数据填充。
|
||||
* 安装后函数不需要触发器——它们会在安装过程中由平台调用，或通过 `function:execute --postInstall` 手动调用。
|
||||
|
||||
### 路由触发器负载
|
||||
|
||||
<Warning>
|
||||
**破坏性变更（v1.16，2026 年 1 月）：** 路由触发器的负载格式已更改。 在 v1.16 之前，查询参数、路径参数和请求体会直接作为负载发送。 从 v1.16 开始，它们被嵌套在结构化的 `RoutePayload` 对象中。
|
||||
|
||||
**v1.16 之前：**
|
||||
```typescript
|
||||
const handler = async (params) => {
|
||||
const { param1, param2 } = params; // Direct access
|
||||
};
|
||||
```
|
||||
|
||||
**v1.16 之后：**
|
||||
```typescript
|
||||
const handler = async (event: RoutePayload) => {
|
||||
const { param1, param2 } = event.body; // Access via .body
|
||||
const { queryParam } = event.queryStringParameters;
|
||||
const { id } = event.pathParameters;
|
||||
};
|
||||
```
|
||||
|
||||
**迁移现有函数：** 将处理程序更新为从 `event.body`、`event.queryStringParameters` 或 `event.pathParameters` 解构，而不是直接从参数对象解构。
|
||||
</Warning>
|
||||
|
||||
当路由触发器调用你的逻辑函数时，它会接收一个遵循 AWS HTTP API v2 格式的 `RoutePayload` 对象。 从 `twenty-sdk` 导入该类型：
|
||||
|
||||
```typescript
|
||||
import { defineLogicFunction, type RoutePayload } from 'twenty-sdk';
|
||||
|
||||
const handler = async (event: RoutePayload) => {
|
||||
// Access request data
|
||||
const { headers, queryStringParameters, pathParameters, body } = event;
|
||||
|
||||
// HTTP method and path are available in requestContext
|
||||
const { method, path } = event.requestContext.http;
|
||||
|
||||
return { message: 'Success' };
|
||||
};
|
||||
```
|
||||
|
||||
`RoutePayload` 类型具有以下结构：
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| ---------------------------- | ------------------------------------- | ------------------------------------------------ |
|
||||
| `headers` | `Record<string, string \| undefined>` | HTTP 请求头（仅限 `forwardedRequestHeaders` 中列出的那些） |
|
||||
| `queryStringParameters` | `Record<string, string \| undefined>` | 查询字符串参数（多个值以逗号连接） |
|
||||
| `pathParameters` | `Record<string, string \| undefined>` | 从路由模式中提取的路径参数（例如，`/users/:id` → `{ id: '123' }`） |
|
||||
| `body` | `object \| null` | 已解析的请求体（JSON） |
|
||||
| `isBase64Encoded` | `boolean` | 请求体是否为 base64 编码 |
|
||||
| `requestContext.http.method` | `string` | HTTP 方法（GET、POST、PUT、PATCH、DELETE） |
|
||||
| `requestContext.http.path` | `string` | 原始请求路径 |
|
||||
|
||||
### 转发 HTTP 请求头
|
||||
|
||||
出于安全原因，默认**不会**将传入请求的 HTTP 请求头传递给你的逻辑函数。 如需访问特定请求头，请在 `forwardedRequestHeaders` 数组中显式列出：
|
||||
|
||||
```typescript
|
||||
export default defineLogicFunction({
|
||||
universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
|
||||
name: 'webhook-handler',
|
||||
handler,
|
||||
triggers: [
|
||||
{
|
||||
universalIdentifier: 'c9f84c8d-b26d-40d1-95dd-4f834ae5a2c6',
|
||||
type: 'route',
|
||||
path: '/webhook',
|
||||
httpMethod: 'POST',
|
||||
isAuthRequired: false,
|
||||
forwardedRequestHeaders: ['x-webhook-signature', 'content-type'],
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
随后你可以在处理程序中访问这些请求头：
|
||||
|
||||
```typescript
|
||||
const handler = async (event: RoutePayload) => {
|
||||
const signature = event.headers['x-webhook-signature'];
|
||||
const contentType = event.headers['content-type'];
|
||||
|
||||
// Validate webhook signature...
|
||||
return { received: true };
|
||||
};
|
||||
```
|
||||
|
||||
<Note>
|
||||
请求头名称会被规范化为小写。 请使用小写键访问它们（例如，`event.headers['content-type']`）。
|
||||
</Note>
|
||||
|
||||
你可以通过两种方式创建新函数：
|
||||
|
||||
* **脚手架生成**：运行 `yarn twenty entity:add` 并选择添加新逻辑函数的选项。 这将生成一个包含处理程序和配置的入门文件。
|
||||
* **手动**：创建一个新的 `*.logic-function.ts` 文件，并使用 `defineLogicFunction()`，遵循相同的模式。
|
||||
|
||||
### 将逻辑函数标记为工具
|
||||
|
||||
逻辑函数可以作为供 AI 智能体和工作流使用的**工具**对外提供。 当函数被标记为工具时，Twenty 的 AI 功能即可发现它，并可在工作流自动化中将其选作一个步骤。
|
||||
|
||||
要将逻辑函数标记为工具，请设置 `isTool: true`，并提供 `toolInputSchema`，使用 [JSON Schema](https://json-schema.org/) 描述预期的输入参数:
|
||||
|
||||
```typescript
|
||||
// src/logic-functions/enrich-company.logic-function.ts
|
||||
import { defineLogicFunction } from 'twenty-sdk';
|
||||
import { CoreApiClient } from 'twenty-sdk/generated';
|
||||
|
||||
const handler = async (params: { companyName: string; domain?: string }) => {
|
||||
const client = new CoreApiClient();
|
||||
|
||||
const result = await client.mutation({
|
||||
createTask: {
|
||||
__args: {
|
||||
data: {
|
||||
title: `Enrich data for ${params.companyName}`,
|
||||
body: `Domain: ${params.domain ?? 'unknown'}`,
|
||||
},
|
||||
},
|
||||
id: true,
|
||||
},
|
||||
});
|
||||
|
||||
return { taskId: result.createTask.id };
|
||||
};
|
||||
|
||||
export default defineLogicFunction({
|
||||
universalIdentifier: 'f47ac10b-58cc-4372-a567-0e02b2c3d479',
|
||||
name: 'enrich-company',
|
||||
description: 'Enrich a company record with external data',
|
||||
timeoutSeconds: 10,
|
||||
handler,
|
||||
isTool: true,
|
||||
toolInputSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
companyName: {
|
||||
type: 'string',
|
||||
description: 'The name of the company to enrich',
|
||||
},
|
||||
domain: {
|
||||
type: 'string',
|
||||
description: 'The company website domain (optional)',
|
||||
},
|
||||
},
|
||||
required: ['companyName'],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
关键点：
|
||||
|
||||
* **`isTool`** (`boolean`, 默认: `false`): 当设置为 `true` 时，该函数会被注册为工具，并可供 AI 代理和工作流自动化使用。
|
||||
* **`toolInputSchema`** (`object`, 可选): 描述函数可接受参数的 JSON Schema 对象。 AI 代理使用此架构来理解该工具期望的输入并验证调用。 如果省略，架构将默认为 `{ type: 'object', properties: {} }`（无参数）。
|
||||
* 设置为 `isTool: false`（或未设置）的函数**不会**被暴露为工具。 它们仍可直接执行或被其他函数调用，但不会出现在工具发现中。
|
||||
* **工具命名**: 当作为工具对外暴露时，函数名会被自动规范化为 `logic_function_<name>`（转换为小写，非字母数字字符替换为下划线）。 例如，`enrich-company` 将变为 `logic_function_enrich_company`。
|
||||
* 你可以将 `isTool` 与触发器结合使用——一个函数既可以作为工具（由 AI 代理调用），也可以同时由事件（cron、数据库事件、路由）触发。
|
||||
|
||||
<Note>
|
||||
**写一个好的 `description`。** AI 代理会依赖该函数的 `description` 字段来决定何时使用该工具。 明确说明该工具的作用以及应在何时调用。
|
||||
</Note>
|
||||
|
||||
### 前端组件
|
||||
|
||||
前端组件使你可以构建在 Twenty 的 UI 中渲染的自定义 React 组件。 使用 `defineFrontComponent()` 以内置校验定义组件：
|
||||
|
||||
```typescript
|
||||
// src/front-components/my-widget.tsx
|
||||
import { defineFrontComponent } from 'twenty-sdk';
|
||||
|
||||
const MyWidget = () => {
|
||||
return (
|
||||
<div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
|
||||
<h1>My Custom Widget</h1>
|
||||
<p>This is a custom front component for Twenty.</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default defineFrontComponent({
|
||||
universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
|
||||
name: 'my-widget',
|
||||
description: 'A custom widget component',
|
||||
component: MyWidget,
|
||||
});
|
||||
```
|
||||
|
||||
关键点：
|
||||
|
||||
* 前端组件是在 Twenty 中的隔离上下文中渲染的 React 组件。
|
||||
* `component` 字段引用你的 React 组件。
|
||||
* 组件会在 `yarn twenty app:dev` 期间自动构建并同步。
|
||||
|
||||
你可以通过两种方式创建新的前端组件：
|
||||
|
||||
* **脚手架生成**：运行 `yarn twenty entity:add` 并选择添加新前端组件的选项。
|
||||
* **手动**：创建一个新的 `.tsx` 文件，并使用 `defineFrontComponent()`，遵循相同的模式。
|
||||
|
||||
### 技能
|
||||
|
||||
技能定义了可复用的指令和能力，AI 智能体可在你的工作区中使用。 使用 `defineSkill()` 定义带内置校验的技能：
|
||||
|
||||
```typescript
|
||||
// src/skills/example-skill.ts
|
||||
import { defineSkill } from 'twenty-sdk';
|
||||
|
||||
export default defineSkill({
|
||||
universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
|
||||
name: 'sales-outreach',
|
||||
label: 'Sales Outreach',
|
||||
description: 'Guides the AI agent through a structured sales outreach process',
|
||||
icon: 'IconBrain',
|
||||
content: `You are a sales outreach assistant. When reaching out to a prospect:
|
||||
1. Research the company and recent news
|
||||
2. Identify the prospect's role and likely pain points
|
||||
3. Draft a personalized message referencing specific details
|
||||
4. Keep the tone professional but conversational`,
|
||||
});
|
||||
```
|
||||
|
||||
关键点：
|
||||
|
||||
* `name` 是该技能的唯一标识字符串（推荐使用 kebab-case）。
|
||||
* `label` 是在 UI 中显示的人类可读名称。
|
||||
* `content` 包含技能指令——这是 AI 智能体使用的文本。
|
||||
* `icon`（可选）设置在 UI 中显示的图标。
|
||||
* `description`（可选）提供有关技能用途的更多上下文。
|
||||
|
||||
你可以通过两种方式创建新技能：
|
||||
|
||||
* **脚手架生成**：运行 `yarn twenty entity:add` 并选择添加新技能的选项。
|
||||
* **手动**：创建一个新文件，并使用 `defineSkill()`，遵循相同的模式。
|
||||
|
||||
### 生成的类型化客户端
|
||||
|
||||
两个类型化客户端由 `yarn twenty app:dev` 自动生成（基于你的工作区架构），并存放在 `node_modules/twenty-sdk/generated`：
|
||||
|
||||
* **`CoreApiClient`** — 查询 `/graphql` 端点以获取工作区数据
|
||||
* **`MetadataApiClient`** — 查询 `/metadata` 端点以获取工作区配置并处理文件上传
|
||||
|
||||
```typescript
|
||||
import { CoreApiClient, MetadataApiClient } from 'twenty-sdk/generated';
|
||||
|
||||
const client = new CoreApiClient();
|
||||
const { me } = await client.query({ me: { id: true, displayName: true } });
|
||||
|
||||
const metadataClient = new MetadataApiClient();
|
||||
const { currentWorkspace } = await metadataClient.query({ currentWorkspace: { id: true } });
|
||||
```
|
||||
|
||||
每当你的对象或字段发生变化时，`yarn twenty app:dev` 都会自动重新生成这两个客户端。
|
||||
|
||||
#### 逻辑函数中的运行时凭据
|
||||
|
||||
当你的函数在 Twenty 上运行时，平台会在代码执行前将凭据作为环境变量注入：
|
||||
|
||||
* `TWENTY_API_URL`：你的应用所针对的 Twenty API 的基础 URL。
|
||||
* `TWENTY_API_KEY`：作用域限定于你的应用默认函数角色的短期密钥。
|
||||
|
||||
备注:
|
||||
|
||||
* 你无需向生成的客户端传递 URL 或 API 密钥。 它会在运行时从 process.env 读取 `TWENTY_API_URL` 和 `TWENTY_API_KEY`。
|
||||
* API 密钥的权限由 `application-config.ts` 中通过 `defaultRoleUniversalIdentifier` 引用的角色决定。 这是你的应用逻辑函数使用的默认角色。
|
||||
* 应用可以定义角色以遵循最小权限原则。 仅授予函数所需的权限，然后将 `defaultRoleUniversalIdentifier` 指向该角色的通用标识符。
|
||||
|
||||
#### 上传文件
|
||||
|
||||
生成的 `MetadataApiClient` 包含一个 `uploadFile` 方法，用于将文件附加到你的工作区对象的文件类型字段。 由于标准 GraphQL 客户端不原生支持多部分文件上传，该客户端提供了一个专用方法，在底层实现了 [GraphQL 多部分请求规范](https://github.com/jaydenseric/graphql-multipart-request-spec)。
|
||||
|
||||
```typescript
|
||||
import { MetadataApiClient } from 'twenty-sdk/generated';
|
||||
import * as fs from 'fs';
|
||||
|
||||
const metadataClient = new MetadataApiClient();
|
||||
|
||||
const fileBuffer = fs.readFileSync('./invoice.pdf');
|
||||
|
||||
const uploadedFile = await metadataClient.uploadFile(
|
||||
fileBuffer, // file contents as a Buffer
|
||||
'invoice.pdf', // filename
|
||||
'application/pdf', // MIME type (defaults to 'application/octet-stream')
|
||||
'58a0a314-d7ea-4865-9850-7fb84e72f30b', // field universal identifier
|
||||
);
|
||||
|
||||
console.log(uploadedFile);
|
||||
// { id: '...', path: '...', size: 12345, createdAt: '...', url: 'https://...' }
|
||||
```
|
||||
|
||||
方法签名：
|
||||
|
||||
```typescript
|
||||
uploadFile(
|
||||
fileBuffer: Buffer,
|
||||
filename: string,
|
||||
contentType: string,
|
||||
fieldMetadataUniversalIdentifier: string,
|
||||
): Promise<{ id: string; path: string; size: number; createdAt: string; url: string }>
|
||||
```
|
||||
|
||||
| 参数 | 类型 | 描述 |
|
||||
| ---------------------------------- | -------- | ------------------------------------------------ |
|
||||
| `fileBuffer` | `Buffer` | 原始文件内容 |
|
||||
| `filename` | `string` | 文件名称（用于存储和显示） |
|
||||
| `contentType` | `string` | 文件的 MIME 类型（如果省略，默认为 `application/octet-stream`） |
|
||||
| `fieldMetadataUniversalIdentifier` | `string` | 你的对象上文件类型字段的 `universalIdentifier` |
|
||||
|
||||
关键点：
|
||||
|
||||
* `uploadFile` 方法可在 `MetadataApiClient` 上使用，因为上传 mutation 由 `/metadata` 端点解析。
|
||||
* 它使用该字段的 `universalIdentifier`（而不是其工作区特定的 ID），因此你的上传代码可以在安装了你的应用的任何工作区中使用——这与应用在其他地方引用字段的方式保持一致。
|
||||
* 返回的 `url` 是一个签名 URL，你可以用它来访问已上传的文件。
|
||||
|
||||
### Hello World 示例
|
||||
|
||||
在[此处](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world)查看一个最小的端到端示例，展示对象、逻辑函数、前端组件和多种触发器。
|
||||
@@ -0,0 +1,233 @@
|
||||
---
|
||||
title: 开始使用
|
||||
description: 几分钟内创建你的第一个 Twenty 应用。
|
||||
---
|
||||
|
||||
<Warning>
|
||||
应用目前处于 Alpha 测试阶段。 该功能可用，但仍在演进中。
|
||||
</Warning>
|
||||
|
||||
应用可通过自定义对象、字段、逻辑函数、AI 技能和 UI 组件来扩展 Twenty——全部以代码进行管理。
|
||||
|
||||
**你现在可以做什么:**
|
||||
|
||||
* 以代码定义自定义对象和字段（受管理的数据模型）
|
||||
* 使用自定义触发器（HTTP 路由、cron、数据库事件）构建逻辑函数
|
||||
* 为 AI 智能体定义技能
|
||||
* 构建在 Twenty 的 UI 中渲染的前端组件
|
||||
* 将同一个应用部署到多个工作空间
|
||||
|
||||
## 先决条件
|
||||
|
||||
* Node.js 24+ 和 Yarn 4
|
||||
* 一个 Twenty 工作空间和一个 API 密钥（在 https://app.twenty.com/settings/api-webhooks 创建）
|
||||
|
||||
## 开始使用
|
||||
|
||||
使用官方脚手架创建一个新应用，然后进行身份验证并开始开发：
|
||||
|
||||
```bash filename="Terminal"
|
||||
# Scaffold a new app (includes all examples by default)
|
||||
npx create-twenty-app@latest my-twenty-app
|
||||
cd my-twenty-app
|
||||
|
||||
# Start dev mode: automatically syncs local changes to your workspace
|
||||
yarn twenty app:dev
|
||||
```
|
||||
|
||||
脚手架工具支持两种模式，用于控制包含哪些示例文件：
|
||||
|
||||
```bash filename="Terminal"
|
||||
# Default (exhaustive): all examples (object, field, logic function, front component, view, navigation menu item, skill)
|
||||
npx create-twenty-app@latest my-app
|
||||
|
||||
# Minimal: only core files (application-config.ts and default-role.ts)
|
||||
npx create-twenty-app@latest my-app --minimal
|
||||
```
|
||||
|
||||
从这里您可以：
|
||||
|
||||
```bash filename="Terminal"
|
||||
# Add a new entity to your application (guided)
|
||||
yarn twenty entity:add
|
||||
|
||||
# Watch your application's function logs
|
||||
yarn twenty function:logs
|
||||
|
||||
# Execute a function by name
|
||||
yarn twenty function:execute -n my-function -p '{"name": "test"}'
|
||||
|
||||
# Execute the pre-install function
|
||||
yarn twenty function:execute --preInstall
|
||||
|
||||
# Execute the post-install function
|
||||
yarn twenty function:execute --postInstall
|
||||
|
||||
# Uninstall the application from the current workspace
|
||||
yarn twenty app:uninstall
|
||||
|
||||
# Display commands' help
|
||||
yarn twenty help
|
||||
```
|
||||
|
||||
另请参阅：[create-twenty-app](https://www.npmjs.com/package/create-twenty-app) 和 [twenty-sdk CLI](https://www.npmjs.com/package/twenty-sdk) 的 CLI 参考页面。
|
||||
|
||||
## 项目结构（脚手架生成）
|
||||
|
||||
当你运行 `npx create-twenty-app@latest my-twenty-app` 时，脚手架将：
|
||||
|
||||
* 将一个最小的基础应用复制到 `my-twenty-app/` 中
|
||||
* 添加本地 `twenty-sdk` 依赖和 Yarn 4 配置
|
||||
* 创建与 `twenty` CLI 关联的配置文件和脚本
|
||||
* 生成核心文件（应用配置、默认函数角色、安装前/安装后函数），并基于脚手架模式生成示例文件
|
||||
|
||||
使用默认 `--exhaustive` 模式新搭建的应用如下所示：
|
||||
|
||||
```text filename="my-twenty-app/"
|
||||
my-twenty-app/
|
||||
package.json
|
||||
yarn.lock
|
||||
.gitignore
|
||||
.nvmrc
|
||||
.yarnrc.yml
|
||||
.yarn/
|
||||
install-state.gz
|
||||
.oxlintrc.json
|
||||
tsconfig.json
|
||||
README.md
|
||||
public/ # Public assets folder (images, fonts, etc.)
|
||||
src/
|
||||
├── application-config.ts # Required - main application configuration
|
||||
├── roles/
|
||||
│ └── default-role.ts # Default role for logic functions
|
||||
├── objects/
|
||||
│ └── example-object.ts # Example custom object definition
|
||||
├── fields/
|
||||
│ └── example-field.ts # Example standalone field definition
|
||||
├── logic-functions/
|
||||
│ ├── hello-world.ts # Example logic function
|
||||
│ ├── pre-install.ts # Pre-install logic function
|
||||
│ └── post-install.ts # Post-install logic function
|
||||
├── front-components/
|
||||
│ └── hello-world.tsx # Example front component
|
||||
├── views/
|
||||
│ └── example-view.ts # Example saved view definition
|
||||
├── navigation-menu-items/
|
||||
│ └── example-navigation-menu-item.ts # Example sidebar navigation link
|
||||
└── skills/
|
||||
└── example-skill.ts # Example AI agent skill definition
|
||||
```
|
||||
|
||||
使用 `--minimal` 时，只会创建核心文件（`application-config.ts`、`roles/default-role.ts`、`logic-functions/pre-install.ts` 和 `logic-functions/post-install.ts`）。
|
||||
|
||||
总体来说：
|
||||
|
||||
* **package.json**：声明应用名称、版本、引擎（Node 24+、Yarn 4），并添加 `twenty-sdk` 以及一个 `twenty` 脚本，该脚本会委托给本地的 `twenty` CLI。 运行 `yarn twenty help` 以列出所有可用命令。
|
||||
* **.gitignore**：忽略常见产物，如 `node_modules`、`.yarn`、`generated/`（类型化客户端）、`dist/`、`build/`、覆盖率文件夹、日志文件以及 `.env*` 文件。
|
||||
* **yarn.lock**、**.yarnrc.yml**、**.yarn/**：锁定并配置项目使用的 Yarn 4 工具链。
|
||||
* **.nvmrc**：固定项目期望的 Node.js 版本。
|
||||
* **.oxlintrc.json** 和 **tsconfig.json**：为应用的 TypeScript 源码提供 Lint 与 TypeScript 配置。
|
||||
* **README.md**：应用根目录中的简短 README，包含基本说明。
|
||||
* **public/**: 一个用于存储公共资源（图像、字体、静态文件）的文件夹，这些资源将随你的应用程序一起提供。 放置在此处的文件会在同步期间上传，并可在运行时访问。
|
||||
* **src/**：你以代码形式定义应用的主要位置
|
||||
|
||||
### 实体检测
|
||||
|
||||
该 SDK 通过在你的 TypeScript 文件中解析 **`export default define<Entity>({...})`** 调用来检测实体。 每种实体类型都有一个从 `twenty-sdk` 导出的对应辅助函数：
|
||||
|
||||
| 辅助函数 | 实体类型 |
|
||||
| -------------------------------- | ---------------- |
|
||||
| `defineObject` | 自定义对象定义 |
|
||||
| `defineLogicFunction` | 逻辑函数定义 |
|
||||
| `definePreInstallLogicFunction` | 安装前逻辑函数（在安装之前运行） |
|
||||
| `definePostInstallLogicFunction` | 安装后逻辑函数（在安装之后运行） |
|
||||
| `defineFrontComponent` | 前端组件定义 |
|
||||
| `defineRole` | 角色定义 |
|
||||
| `defineField` | 现有对象的字段扩展 |
|
||||
| `defineView` | 已保存的视图定义 |
|
||||
| `defineNavigationMenuItem` | 导航菜单项定义 |
|
||||
| `defineSkill` | AI 代理技能定义 |
|
||||
|
||||
<Note>
|
||||
**文件命名是灵活的。** 实体检测基于 AST — SDK 会扫描你的源文件以查找 `export default define<Entity>({...})` 模式。 你可以按照自己的喜好组织文件和文件夹。 按实体类型分组（例如 `logic-functions/`、`roles/`）只是代码组织的一种约定，并非必需。
|
||||
</Note>
|
||||
|
||||
已检测实体的示例：
|
||||
|
||||
```typescript
|
||||
// This file can be named anything and placed anywhere in src/
|
||||
import { defineObject, FieldType } from 'twenty-sdk';
|
||||
|
||||
export default defineObject({
|
||||
universalIdentifier: '...',
|
||||
nameSingular: 'postCard',
|
||||
// ... rest of config
|
||||
});
|
||||
```
|
||||
|
||||
后续命令将添加更多文件和文件夹：
|
||||
|
||||
* `yarn twenty app:dev` 会在 `node_modules/twenty-sdk/generated` 中自动生成两个类型化 API 客户端：`CoreApiClient`（通过 `/graphql` 获取工作区数据）和 `MetadataApiClient`（通过 `/metadata` 处理工作区配置和文件上传）。
|
||||
* `yarn twenty entity:add` 会在 `src/` 下为你的自定义对象、函数、前端组件、角色、技能等添加实体定义文件。
|
||||
|
||||
## 身份验证
|
||||
|
||||
首次运行 `yarn twenty auth:login` 时，你将被提示输入：
|
||||
|
||||
* API URL（默认为 http://localhost:3000 或你当前的工作空间配置）
|
||||
* API 密钥
|
||||
|
||||
你的凭据按用户存储在 `~/.twenty/config.json` 中。 你可以维护多个配置文件并在它们之间切换。
|
||||
|
||||
### 管理工作空间
|
||||
|
||||
```bash filename="Terminal"
|
||||
# Login interactively (recommended)
|
||||
yarn twenty auth:login
|
||||
|
||||
# Login to a specific workspace profile
|
||||
yarn twenty auth:login --workspace my-custom-workspace
|
||||
|
||||
# List all configured workspaces
|
||||
yarn twenty auth:list
|
||||
|
||||
# Switch the default workspace (interactive)
|
||||
yarn twenty auth:switch
|
||||
|
||||
# Switch to a specific workspace
|
||||
yarn twenty auth:switch production
|
||||
|
||||
# Check current authentication status
|
||||
yarn twenty auth:status
|
||||
```
|
||||
|
||||
使用 `yarn twenty auth:switch` 切换工作空间后，后续所有命令将默认使用该工作空间。 你仍可通过 `--workspace <name>` 临时覆盖。
|
||||
|
||||
## 手动设置（不使用脚手架）
|
||||
|
||||
虽然我们建议使用 `create-twenty-app` 以获得最佳的上手体验，但你也可以手动设置项目。 不要全局安装 CLI。 相反，请将 `twenty-sdk` 添加为本地依赖，并在你的 package.json 中配置一个脚本：
|
||||
|
||||
```bash filename="Terminal"
|
||||
yarn add -D twenty-sdk
|
||||
```
|
||||
|
||||
然后添加一个 `twenty` 脚本：
|
||||
|
||||
```json filename="package.json"
|
||||
{
|
||||
"scripts": {
|
||||
"twenty": "twenty"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
现在你可以通过 `yarn twenty <command>` 运行所有命令，例如 `yarn twenty app:dev`、`yarn twenty help` 等。
|
||||
|
||||
## 故障排除
|
||||
|
||||
* 身份验证错误：运行 `yarn twenty auth:login`，并确保你的 API 密钥具有所需权限。
|
||||
* 无法连接到服务器：请验证 API URL，并确保 Twenty 服务器可达。
|
||||
* 类型或客户端缺失/过期：重启 `yarn twenty app:dev` — 它会自动生成类型化客户端。
|
||||
* 开发模式未同步：确保 `yarn twenty app:dev` 正在运行，并且你的环境不会忽略变更。
|
||||
|
||||
Discord 帮助频道：https://discord.com/channels/1130383047699738754/1130386664812982322
|
||||
@@ -0,0 +1,119 @@
|
||||
---
|
||||
title: 发布
|
||||
description: 将你的 Twenty 应用分发到应用市场，或进行内部部署。
|
||||
---
|
||||
|
||||
<Warning>
|
||||
应用目前处于 Alpha 测试阶段。 该功能可用，但仍在演进中。
|
||||
</Warning>
|
||||
|
||||
## 概览
|
||||
|
||||
一旦你的应用已[在本地构建并完成测试](/l/zh/developers/extend/apps/building)，你可以通过两种方式进行分发：
|
||||
|
||||
* **发布到 npm** — 将你的应用在 Twenty 应用市场上架，供任何工作区发现并安装。
|
||||
* **推送 tar 包** — 将你的应用部署到特定的 Twenty 服务器供内部使用，而无需公开发布。
|
||||
|
||||
## 发布到 npm
|
||||
|
||||
发布到 npm 可让你的应用在 Twenty 应用市场中被发现。 任何 Twenty 工作区都可以直接通过 UI 浏览、安装和升级应用市场中的应用。
|
||||
|
||||
### 要求
|
||||
|
||||
* 一个 [npm](https://www.npmjs.com) 账户
|
||||
* 你的包名**必须**使用 `twenty-app-` 前缀（例如，`twenty-app-postcard-sender`）
|
||||
|
||||
### 步骤
|
||||
|
||||
1. **构建你的应用** — CLI 会编译你的 TypeScript 源码并生成应用清单：
|
||||
|
||||
```bash filename="Terminal"
|
||||
yarn twenty app:build
|
||||
```
|
||||
|
||||
2. **发布到 npm** — 将构建好的包推送到 npm 注册表：
|
||||
|
||||
```bash filename="Terminal"
|
||||
npx twenty app:publish
|
||||
```
|
||||
|
||||
### 自动发现
|
||||
|
||||
Twenty 应用市场目录会自动发现带有 `twenty-app-` 前缀的包。 发布后，你的应用会在几分钟内出现在应用市场中 — 无需手动注册或审批。
|
||||
|
||||
### CI 发布
|
||||
|
||||
脚手架项目包含一个 GitHub Actions 工作流，会在每次发版时自动发布。 它会先运行 `app:build`，然后在构建输出目录中执行 `npm publish --provenance`：
|
||||
|
||||
```yaml filename=".github/workflows/publish.yml"
|
||||
name: Publish
|
||||
on:
|
||||
release:
|
||||
types: [published]
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
id-token: write
|
||||
|
||||
jobs:
|
||||
publish:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: "24"
|
||||
registry-url: https://registry.npmjs.org
|
||||
- run: yarn install --immutable
|
||||
- run: npx twenty app:build
|
||||
- run: npm publish --provenance --access public
|
||||
working-directory: .twenty/output
|
||||
env:
|
||||
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
|
||||
```
|
||||
|
||||
对于其他 CI 系统（GitLab CI、CircleCI 等），同样适用以下三条命令：`yarn install`、`npx twenty app:build`，然后在 `.twenty/output` 目录下执行 `npm publish`。
|
||||
|
||||
<Tip>
|
||||
**npm provenance** 可选，但建议启用。 使用 `--provenance` 发布会在你的 npm 列表中添加可信徽章，使用户可以验证该包是由公共 CI 流水线中的特定提交构建的。 有关设置说明，请参见 [npm provenance 文档](https://docs.npmjs.com/generating-provenance-statements)。
|
||||
</Tip>
|
||||
|
||||
## 内部分发
|
||||
|
||||
对于你不希望公开的应用 — 例如专有工具、仅供企业使用的集成或实验性构建 — 你可以将 tar 包直接推送到某台 Twenty 服务器。
|
||||
|
||||
### 推送 tar 包
|
||||
|
||||
在一步中构建你的应用并将其部署到特定服务器：
|
||||
|
||||
```bash filename="Terminal"
|
||||
npx twenty app:publish --server <server-url>
|
||||
```
|
||||
|
||||
该服务器上的任何工作区随后都可以在**应用程序**设置页面安装和升级该应用。
|
||||
|
||||
### 版本管理
|
||||
|
||||
要发布更新：
|
||||
|
||||
1. 更新 `package.json` 中的 `version` 字段
|
||||
2. 使用 `npx twenty app:publish --server <server-url>` 推送新的 tar 包
|
||||
3. 该服务器上的工作区会在其设置中看到可用的升级
|
||||
|
||||
<Note>
|
||||
内部应用的作用范围仅限于它们被推送到的服务器。 它们不会出现在公共应用市场中，其他服务器上的工作区也无法安装。
|
||||
</Note>
|
||||
|
||||
## 应用类别
|
||||
|
||||
Twenty 会根据分发方式将应用归为三类：
|
||||
|
||||
| 类别 | 工作原理 | 在应用市场中可见？ |
|
||||
| ------- | ------------------------------------------------- | --------- |
|
||||
| **开发** | 通过 `yarn twenty app:dev` 运行的本地开发模式应用。 用于构建和测试。 | 否 |
|
||||
| **已发布** | 使用 `twenty-app-` 前缀发布到 npm 的应用。 在应用市场上架，供任何工作区安装。 | 是 |
|
||||
| **内部** | 通过 tar 包部署到特定服务器的应用。 仅对该服务器上的工作区可用。 | 否 |
|
||||
|
||||
<Tip>
|
||||
在构建你的应用时，从**开发**模式开始。 准备就绪后，选择用于广泛分发的**已发布**（npm），或用于私有部署的**内部**（tar 包）。
|
||||
</Tip>
|
||||
Reference in New Issue
Block a user