My Custom Widget
This is a custom front component for Twenty.
);
};
export default defineFrontComponent({
universalIdentifier: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
name: 'my-widget',
description: 'A custom widget component',
component: MyWidget,
});
```
关键点：
* 前端组件是在 Twenty 中的隔离上下文中渲染的 React 组件。
* 使用 `*.front-component.tsx` 文件后缀以便自动检测。
* `component` 字段引用你的 React 组件。
* 组件会在 `yarn twenty app:dev` 期间自动构建并同步。
你可以通过两种方式创建新的前端组件：
* **脚手架生成**：运行 `yarn twenty entity:add` 并选择添加新前端组件的选项。
* **手动**：创建一个新的 `*.front-component.tsx` 文件，并使用 `defineFrontComponent()`。
### 生成的类型化客户端
类型化客户端由 `yarn twenty app:dev` 自动生成，并基于你的工作区架构存放在 `node_modules/twenty-sdk/generated`。 在你的函数中使用它：
```typescript
import Twenty from '~/generated';
const client = new Twenty();
const { me } = await client.query({ me: { id: true, displayName: 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` 指向该角色的通用标识符。
### Hello World 示例
在[此处](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world)查看一个最小的端到端示例，展示对象、逻辑函数、前端组件和多种触发器：
## 手动设置（不使用脚手架）
虽然我们建议使用 `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