Compare commits

..
Author SHA1 Message Date
Etienne 3527db9866 Import - Fix (#19938)
Fixes
https://discord.com/channels/1130383047699738754/1496121832619774042/1496121832619774042

Before
<img width="1089" height="734" alt="Screenshot 2026-04-21 at 16 23 27"
src="https://github.com/user-attachments/assets/6fe17bc1-b1ec-4b5d-a922-d472ff4c4f2f"
/>
After
<img width="1089" height="731" alt="Screenshot 2026-04-21 at 16 22 56"
src="https://github.com/user-attachments/assets/ab7e8fe4-8188-4222-a237-992b73a1594e"
/>
2026-04-22 10:39:27 +02:00
Paul Rastoinandprastoin ff6cc138dd Reset default app packages command (#19931)
# Introduction
If a self host creates its twenty instance using storage type local, and
then edit through the admin panel the storage type, the apps default
deps file won't be swapped to the new storage location

This command allow to manually rebuild them

## What could be done in addition
- We could display a modal in the admin panel when the user is editing
env variable that might have a side effect
- We might wanna rebuild the deps by default if we detect such a change
through the UI though we can't really if it's through the `.env` so I'm
not sure we wanna prio such logic
2026-04-21 16:03:55 +02:00
145 changed files with 1329 additions and 1614 deletions
@@ -16,7 +16,6 @@ setup_and_migrate_db() {
yarn database:init:prod
fi
yarn database:migrate:prod --force --include-slow
yarn command:prod cache:flush
yarn command:prod upgrade
yarn command:prod cache:flush
@@ -1,6 +1,6 @@
---
title: الأخطاء والطلبات وطلبات السحب
icon: خلل
icon: bug
info: أبلغ عن المشكلات، واطلب الميزات، وساهم بالشفرة البرمجية
---
@@ -1,6 +1,6 @@
---
title: أفضل الممارسات
icon: نجمة
icon: star
---
تحدد هذه الوثيقة أفضل الممارسات التي يجب اتباعها عند العمل في الواجهة الأمامية.
@@ -1,6 +1,6 @@
---
title: أوامر الواجهة الأمامية
icon: الطرفية
icon: terminal
---
## الأوامر المفيدة
@@ -1,6 +1,6 @@
---
title: دليل الأسلوب
icon: فرشاة الرسم
icon: paintbrush
---
تشمل هذه الوثيقة القواعد التي يجب اتباعها عند كتابة التعليمات البرمجية.
@@ -1,12 +1,12 @@
---
title: أوامر
title: Commands
icon: terminal
description: أوامر مفيدة لتطوير Twenty.
description: Useful commands for developing Twenty.
---
يمكن تشغيل الأوامر من جذر المستودع باستخدام `npx nx`. استخدم `npx nx run {project}:{command}` للاستهداف الصريح.
Commands can be run from the repository root using `npx nx`. Use `npx nx run {project}:{command}` for explicit targeting.
## بدء التطبيق
## Starting the App
```bash
npx nx start twenty-front # Frontend dev server (http://localhost:3001)
@@ -14,7 +14,7 @@ npx nx start twenty-server # Backend server (http://localhost:3000)
npx nx run twenty-server:worker # Background worker
```
## قاعدة البيانات
## Database
```bash
npx nx database:reset twenty-server # Reset and seed database
@@ -22,7 +22,7 @@ npx nx run twenty-server:database:migrate:prod # Run migrations
npx nx run twenty-server:database:migrate:generate --name <name> --type <fast|slow> # Generate a migration
```
## فحص الشيفرة
## Linting
```bash
npx nx lint:diff-with-main twenty-front # Lint changed files (fastest)
@@ -30,14 +30,14 @@ npx nx lint:diff-with-main twenty-server
npx nx lint twenty-front --configuration=fix # Auto-fix
```
## التحقق من الأنواع
## Type Checking
```bash
npx nx typecheck twenty-front
npx nx typecheck twenty-server
```
## الاختبار
## "الاختبار"
```bash
# Frontend
@@ -61,14 +61,14 @@ npx nx run twenty-front:graphql:generate # Regenerate typ
npx nx run twenty-front:graphql:generate --configuration=metadata # Metadata schema
```
## الترجمات
## "الترجمات"
```bash
npx nx run twenty-front:lingui:extract # Extract strings
npx nx run twenty-front:lingui:compile # Compile translations
```
## البناء
## Build
```bash
npx nx build twenty-shared # Must be built first
@@ -1,14 +1,14 @@
---
title: دليل الأسلوب
icon: فرشاة الرسم
description: اتفاقيات الشيفرة وأفضل الممارسات للمساهمة في Twenty.
icon: paintbrush
description: Code conventions and best practices for contributing to Twenty.
---
## React
### المكوّنات الوظيفية فقط
### Functional components only
استخدم دائمًا مكوّنات TSX الوظيفية مع تصديرات مسمّاة.
Always use TSX functional components with named exports.
```tsx
// ❌ Bad
@@ -23,9 +23,9 @@ export function MyComponent() {
};
```
### الخصائص
### الإزاحة
أنشئ نوعًا باسم `{ComponentName}Props`. استخدم التفكيك. لا تستخدم `React.FC`.
Create a type named `{ComponentName}Props`. Use destructuring. Don't use `React.FC`.
```tsx
type MyComponentProps = {
@@ -35,7 +35,7 @@ type MyComponentProps = {
export const MyComponent = ({ name }: MyComponentProps) => <div>Hello {name}</div>;
```
### لا تستخدم نشر الخصائص من متغير واحد
### No single-variable prop spreading
```tsx
// ❌ Bad
@@ -45,9 +45,9 @@ const MyComponent = (props: MyComponentProps) => <Other {...props} />;
const MyComponent = ({ prop1, prop2 }: MyComponentProps) => <Other {...{ prop1, prop2 }} />;
```
## إدارة الحالة
## "إدارة الحالة"
### ذرات Jotai للحالة العامة
### Jotai atoms for global state
```tsx
import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
@@ -59,16 +59,16 @@ export const myAtomState = createAtomState<string>({
});
```
* فضّل الذرات على تمرير الخصائص عبر المستويات (prop drilling)
* لا تستخدم `useRef` للحالة — استخدم `useState` أو الذرات
* استخدم عائلات الذرات والمحددات للقوائم
* Prefer atoms over prop drilling
* Don't use `useRef` for state — use `useState` or atoms
* Use atom families and selectors for lists
### تجنّب عمليات إعادة التصيير غير الضرورية
### Avoid unnecessary re-renders
* انقل `useEffect` وجلب البيانات إلى مكوّنات جانبية شقيقة (sidecar)
* فضّل معالِجات الأحداث (`handleClick`, `handleChange`) على `useEffect`
* لا تستخدم `React.memo()` — أصلِح السبب الجذري بدلًا من ذلك
* حدّد استخدام `useCallback` / `useMemo`
* Extract `useEffect` and data fetching into sibling sidecar components
* Prefer event handlers (`handleClick`, `handleChange`) over `useEffect`
* Don't use `React.memo()` — fix the root cause instead
* Limit `useCallback` / `useMemo` usage
```tsx
// ❌ Bad — useEffect in the same component causes re-renders
@@ -94,11 +94,11 @@ export const Page = () => {
## TypeScript
* **`type` بدلًا من `interface`** — أكثر مرونة وأسهل في التركيب
* **النصوص الحرفية بدل التعدادات** — باستثناء تعدادات codegen الخاصة بـ GraphQL وواجهات برمجة تطبيقات المكتبة الداخلية
* **بدون `any`** — يتم فرض TypeScript الصارم
* **عدم استيراد الأنواع** — استخدم استيرادات عادية (مفروض بواسطة Oxlint `typescript/consistent-type-imports`)
* **استخدم [Zod](https://github.com/colinhacks/zod)** للتحقق وقت التشغيل من الكائنات غير محددة النوع
* **`type` over `interface`** — more flexible, easier to compose
* **String literals over enums** — except for GraphQL codegen enums and internal library APIs
* **No `any`** — strict TypeScript enforced
* **No type imports** — use regular imports (enforced by Oxlint `typescript/consistent-type-imports`)
* **Use [Zod](https://github.com/colinhacks/zod)** for runtime validation of untyped objects
## JavaScript
@@ -112,17 +112,17 @@ onClick?.();
## التسمية
* **المتغيرات**: camelCase، وصفية (`email` وليس `value`، `fieldMetadata` وليس `fm`)
* **الثوابت**: SCREAMING_SNAKE_CASE
* **الأنواع/الفئات**: PascalCase
* **الملفات/المجلدات**: kebab-case (`.component.tsx`, `.service.ts`, `.entity.ts`)
* **معالجات الأحداث**: `handleClick` (وليس `onClick` لدالة المعالج)
* **خصائص المكوّن**: ابدأ باسم المكوّن (`ButtonProps`)
* **مكوّنات Styled**: ابدأ بـ `Styled` (`StyledTitle`)
* **Variables**: camelCase, descriptive (`email` not `value`, `fieldMetadata` not `fm`)
* **Constants**: SCREAMING_SNAKE_CASE
* **Types/Classes**: PascalCase
* **Files/directories**: kebab-case (`.component.tsx`, `.service.ts`, `.entity.ts`)
* **Event handlers**: `handleClick` (not `onClick` for the handler function)
* **Component props**: prefix with component name (`ButtonProps`)
* **Styled components**: prefix with `Styled` (`StyledTitle`)
## التنسيق
استخدم مكوّنات [Linaria](https://github.com/callstack/linaria) المنسقة. استخدم قيم السمة — وتجنّب القيم المضمّنة صراحة مثل `px` و`rem` أو الألوان.
Use [Linaria](https://github.com/callstack/linaria) styled components. Use theme values — avoid hardcoded `px`, `rem`, or colors.
```tsx
// ❌ Bad
@@ -142,7 +142,7 @@ const StyledButton = styled.button`
## استيرادات
استخدم الأسماء المستعارة بدل المسارات النسبية:
Use aliases instead of relative paths:
```tsx
// ❌ Bad
@@ -153,7 +153,7 @@ import { Foo } from '~/testing/decorators/Foo';
import { Bar } from '@/modules/bar/components/Bar';
```
## هيكلية المجلدات
## Folder Structure
```
front
@@ -171,6 +171,6 @@ front
└── ui/ # Reusable UI components (display, input, feedback, ...)
```
* يمكن للوحدات الاستيراد من وحدات أخرى، لكن يجب أن يبقى `ui/` خاليًا من التبعيات
* استخدم المجلدات الفرعية `internal/` للشيفرة الخاصة بالوحدة
* المكوّنات أقل من 300 سطر، والخدمات أقل من 500 سطر
* Modules can import from other modules, but `ui/` should stay dependency-free
* Use `internal/` subfolders for module-private code
* Components under 300 lines, services under 500 lines
@@ -1,35 +1,35 @@
---
title: واجهات برمجة التطبيقات
icon: plug
description: واجهات برمجة تطبيقات REST وGraphQL مُولَّدة من مخطط مساحة عملك.
description: REST and GraphQL APIs generated from your workspace schema.
---
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
## واجهات برمجة تطبيقات بمخطط لكل مستأجر
## Schema-per-tenant APIs
لا توجد مرجعية ثابتة لواجهة برمجة التطبيقات الخاصة بـ Twenty. لكل مساحة عمل مخططها الخاص — عند إضافة كائن مخصص (مثل `Invoice`)، يحصل فورًا على نقاط نهاية REST وGraphQL مطابقة لتلك الخاصة بالكائنات المدمجة مثل `Company` أو `Person`. تُولَّد واجهة برمجة التطبيقات من المخطط، لذا تستخدم نقاط النهاية أسماء الكائنات والحقول لديك مباشرة — بدون معرّفات غامضة.
There is no static API reference for Twenty. Each workspace has its own schema — when you add a custom object (say `Invoice`), it immediately gets REST and GraphQL endpoints identical to built-in objects like `Company` or `Person`. The API is generated from the schema, so endpoints use your object and field names directly — no opaque IDs.
وثائق واجهة برمجة التطبيقات الخاصة بمساحة عملك متاحة ضمن **الإعدادات → واجهات برمجة التطبيقات وخطافات الويب** بعد إنشاء مفتاح API. يتضمن ساحة تجريبية تفاعلية يمكنك من خلالها تنفيذ استدعاءات حقيقية على بياناتك.
Your workspace-specific API documentation is available under **Settings → API & Webhooks** after creating an API key. It includes an interactive playground where you can execute real calls against your data.
## واجهتا برمجة تطبيقات
## Two APIs
**واجهة برمجة التطبيقات الأساسية** — `/rest/` و`/graphql/`
**Core API** — `/rest/` and `/graphql/`
عمليات CRUD على السجلات: الأشخاص، الشركات، الفرص، وكائناتك المخصصة. استعلام، تصفية، والتنقل عبر العلاقات.
CRUD on records: People, Companies, Opportunities, your custom objects. Query, filter, traverse relations.
**واجهة برمجة تطبيقات البيانات الوصفية** — `/rest/metadata/` و`/metadata/`
**Metadata API** — `/rest/metadata/` and `/metadata/`
إدارة المخطط: إنشاء/تعديل/حذف الكائنات والحقول والعلاقات. هذه هي الطريقة لتغيير نموذج بياناتك برمجيًا.
Schema management: create/modify/delete objects, fields, and relations. This is how you programmatically change your data model.
كلاهما متاحان عبر REST وGraphQL. تضيف GraphQL عمليات upsert على دفعات وإمكانية التنقل عبر العلاقات في استعلام واحد. نفس البيانات الأساسية بأي من الطريقتين.
Both are available as REST and GraphQL. GraphQL adds batch upserts and the ability to traverse relations in a single query. Same underlying data either way.
## عناوين URL الأساسية
## Base URLs
| البيئة | عنوان URL الأساسي |
| ----------------- | ------------------------- |
| السحابة | `https://api.twenty.com/` |
| الاستضافة الذاتية | `https://{your-domain}/` |
| البيئة | عنوان URL الأساسي |
| ----------- | ------------------------- |
| Cloud | `https://api.twenty.com/` |
| Self-Hosted | `https://{your-domain}/` |
## المصادقة
@@ -37,19 +37,19 @@ import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
Authorization: Bearer YOUR_API_KEY
```
أنشئ مفتاح API من **الإعدادات → واجهات برمجة التطبيقات وخطافات الويب → + Create key**. انسخه فورًا — يُعرَض مرة واحدة فقط. يمكن تقييد نطاق المفاتيح بدور محدد ضمن **الإعدادات → الأدوار → علامة التبويب Assignment** للحد مما يمكنها الوصول إليه.
Create an API key in **Settings → API & Webhooks → + Create key**. Copy it immediately — it's shown once. Keys can be scoped to a specific role under **Settings → Roles → Assignment tab** to limit what they can access.
<VimeoEmbed videoId="928786722" title="إنشاء مفتاح API" />
للوصول المعتمد على OAuth (تطبيقات خارجية تتصرف نيابةً عن المستخدمين)، راجع [OAuth](/l/ar/developers/extend/oauth).
For OAuth-based access (external apps acting on behalf of users), see [OAuth](/l/ar/developers/extend/oauth).
## عمليات الدفعات
## Batch operations
يدعم كلٌّ من REST وGraphQL التجميع لما يصل إلى 60 سجلًا لكل طلب — إنشاء أو تحديث أو حذف. كما تدعم GraphQL عملية upsert على دفعات (إنشاء-أو-تحديث في استدعاء واحد) باستخدام أسماء جمع مثل `CreateCompanies`.
Both REST and GraphQL support batching up to 60 records per request — create, update, or delete. GraphQL also supports batch upsert (create-or-update in one call) using plural names like `CreateCompanies`.
## حدود المعدل
## Rate limits
| الحد | القيمة |
| ---------- | ---------------------- |
| الطلبات | 100 استدعاء في الدقيقة |
| حجم الدفعة | 60 سجل لكل استدعاء |
| الحد | القيمة |
| ---------- | ------------------ |
| Requests | 100 per minute |
| Batch size | 60 سجل لكل استدعاء |
@@ -1,14 +1,14 @@
---
title: الهيكلية
description: كيف تعمل تطبيقات Twenty — العزل، دورة الحياة، واللبنات الأساسية.
description: How Twenty apps work — sandboxing, lifecycle, and the building blocks.
icon: sitemap
---
تطبيقات Twenty هي حزم TypeScript توسّع مساحة عملك بكائنات مخصّصة، ومنطق، ومكوّنات واجهة مستخدم (UI)، وقدرات ذكاء اصطناعي. تعمل على منصة Twenty مع عزل كامل وضوابط الأذونات.
Twenty apps are TypeScript packages that extend your workspace with custom objects, logic, UI components, and AI capabilities. They run on the Twenty platform with full sandboxing and permission controls.
## كيف تعمل التطبيقات
## How apps work
التطبيق عبارة عن مجموعة من **الكيانات** يتم إعلانها باستخدام دوال `defineEntity()` من حزمة `twenty-sdk`. يكتشف SDK هذه التصريحات عبر تحليل AST وقت البناء وينتج **ملف بيان** — وصفًا كاملًا لما يضيفه تطبيقك إلى مساحة العمل.
An app is a collection of **entities** declared using `defineEntity()` functions from the `twenty-sdk` package. The SDK detects these declarations via AST analysis at build time and produces a **manifest** — a complete description of what your app adds to a workspace.
```
your-app/
@@ -29,32 +29,32 @@ your-app/
```
<Note>
**تنظيم الملفات متروك لك.** يعتمد اكتشاف الكيانات على AST — يعثر SDK على استدعاءات `export default defineEntity(...)` بغض النظر عن مكان وجود الملف. بنية المجلدات أعلاه هي اصطلاح وليست متطلبًا.
**File organization is up to you.** Entity detection is AST-based — the SDK finds `export default defineEntity(...)` calls regardless of where the file lives. The folder structure above is a convention, not a requirement.
</Note>
## أنواع الكيانات
## Entity types
| كيان | الغرض | وثائق |
| ---------------------- | ------------------------------------------------------ | -------------------------------------------------------------- |
| **تطبيق** | هوية التطبيق، الأذونات، المتغيرات | [نموذج البيانات](/l/ar/developers/extend/apps/data-model) |
| **دور** | مجموعات الأذونات للكائنات والحقول | [نموذج البيانات](/l/ar/developers/extend/apps/data-model) |
| **الكائن** | جداول بيانات مخصّصة مع حقول | [نموذج البيانات](/l/ar/developers/extend/apps/data-model) |
| **الحقل** | توسيع الكائنات الموجودة، تعريف العلاقات | [نموذج البيانات](/l/ar/developers/extend/apps/data-model) |
| **دالة منطقية** | TypeScript على جانب الخادم مع مشغّلات | [الوظائف المنطقية](/l/ar/developers/extend/apps/logic-functions) |
| **مكوّن أمامي** | واجهة مستخدم React معزولة داخل صفحة Twenty. | [المكوّنات الأمامية](/l/ar/developers/extend/apps/front-components) |
| **مهارة** | تعليمات قابلة لإعادة الاستخدام لوكلاء الذكاء الاصطناعي | [المهارات والوكلاء](/l/ar/developers/extend/apps/skills-and-agents) |
| **وكيل** | مساعدو الذكاء الاصطناعي بموجهات مخصّصة | [المهارات والوكلاء](/l/ar/developers/extend/apps/skills-and-agents) |
| **عرض** | عروض قوائم السجلات المكوّنة مسبقًا | [التخطيط](/l/ar/developers/extend/apps/layout) |
| **عنصر قائمة التنقّل** | عناصر الشريط الجانبي المخصّصة | [التخطيط](/l/ar/developers/extend/apps/layout) |
| **تخطيط الصفحة** | علامات تبويب وعناصر واجهة مخصّصة لصفحة السجل | [التخطيط](/l/ar/developers/extend/apps/layout) |
| كيان | الغرض | وثائق |
| ------------------------ | ----------------------------------------- | ------------------------------------------------------------ |
| **Application** | App identity, permissions, variables | [Data Model](/l/ar/developers/extend/apps/data-model) |
| **Role** | Permission sets for objects and fields | [Data Model](/l/ar/developers/extend/apps/data-model) |
| **الكائن** | Custom data tables with fields | [Data Model](/l/ar/developers/extend/apps/data-model) |
| **الحقل** | Extend existing objects, define relations | [Data Model](/l/ar/developers/extend/apps/data-model) |
| **Logic Function** | Server-side TypeScript with triggers | [الوظائف المنطقية](/l/ar/developers/extend/apps/logic-functions) |
| **Front Component** | Sandboxed React UI in Twenty's page | [Front Components](/l/ar/developers/extend/apps/front-components) |
| **Skill** | Reusable AI agent instructions | [Skills & Agents](/l/ar/developers/extend/apps/skills-and-agents) |
| **Agent** | AI assistants with custom prompts | [Skills & Agents](/l/ar/developers/extend/apps/skills-and-agents) |
| **View** | Pre-configured record list views | [Layout](/l/ar/developers/extend/apps/layout) |
| **Navigation Menu Item** | Custom sidebar entries | [Layout](/l/ar/developers/extend/apps/layout) |
| **Page Layout** | Custom record page tabs and widgets | [Layout](/l/ar/developers/extend/apps/layout) |
## العزل
## Sandboxing
* **الدوال المنطقية** تعمل في عمليات Node.js معزولة على الخادم. لا تصل إلى البيانات إلا عبر عميل API مضبوط الأنواع، ومقيَّد بأذونات دور التطبيق.
* **المكوّنات الأمامية** تعمل ضمن Web Workers باستخدام Remote DOM — معزولة عن الصفحة الرئيسية لكنها تعرض عناصر DOM الأصلية (وليس iframes). تتواصل مع Twenty عبر واجهة API للمضيف تعتمد تمرير الرسائل.
* **الأذونات** تُطبَّق على مستوى واجهة API. يُشتق رمز وقت التشغيل (`TWENTY_APP_ACCESS_TOKEN`) من الدور المعرَّف في `defineApplication()`.
* **Logic functions** run in isolated Node.js processes on the server. They only access data through the typed API client, scoped to the app's role permissions.
* **Front components** run in Web Workers using Remote DOM — sandboxed from the main page but rendering native DOM elements (not iframes). They communicate with Twenty via a message-passing host API.
* **Permissions** are enforced at the API level. The runtime token (`TWENTY_APP_ACCESS_TOKEN`) is derived from the role defined in `defineApplication()`.
## دورة حياة التطبيق
## App lifecycle
```
┌─────────────────────────────────────────────────────────┐
@@ -73,32 +73,32 @@ your-app/
└─────────────────────────────────────────────────────────┘
```
* **`yarn twenty dev`** — يراقب ملفات المصدر لديك ويزامن التغييرات مباشرةً إلى خادم Twenty متصل. يُعاد توليد عميل API مضبوط الأنواع تلقائيًا عند تغيّر المخطط.
* **`yarn twenty build`** — يجمّع TypeScript، ويضمّن الدوال المنطقية والمكوّنات الأمامية باستخدام esbuild، وينتج ملف بيان.
* **خطّافات ما قبل/ما بعد التثبيت** — دوال منطقية اختيارية تعمل أثناء التثبيت. راجع [الدوال المنطقية](/l/ar/developers/extend/apps/logic-functions) للحصول على التفاصيل.
* **`yarn twenty dev`** — watches your source files and live-syncs changes to a connected Twenty server. The typed API client is regenerated automatically when the schema changes.
* **`yarn twenty build`** — compiles TypeScript, bundles logic functions and front components with esbuild, and produces a manifest.
* **Pre/post-install hooks** — optional logic functions that run during installation. See [Logic Functions](/l/ar/developers/extend/apps/logic-functions) for details.
## الخطوات التالية
<CardGroup cols={٢}>
<Card title="نموذج البيانات" icon="database" href="/l/ar/developers/extend/apps/data-model">
عرّف الكائنات والحقول والأدوار والعلاقات.
Define objects, fields, roles, and relations.
</Card>
<Card title="الوظائف المنطقية" icon="bolt" href="/l/ar/developers/extend/apps/logic-functions">
دوال على جانب الخادم مع HTTP وcron ومشغّلات الأحداث.
Server-side functions with HTTP, cron, and event triggers.
</Card>
<Card title="المكوّنات الأمامية" icon="window-maximize" href="/l/ar/developers/extend/apps/front-components">
مكوّنات React معزولة داخل واجهة مستخدم Twenty.
Sandboxed React components inside Twenty's UI.
</Card>
<Card title="التخطيط" icon="table-columns" href="/l/ar/developers/extend/apps/layout">
العروض، وعناصر التنقّل، وتخطيطات صفحات السجل.
Views, navigation items, and record page layouts.
</Card>
<Card title="المهارات والوكلاء" icon="robot" href="/l/ar/developers/extend/apps/skills-and-agents">
مهارات ووكلاء ذكاء اصطناعي بموجهات مخصّصة.
AI skills and agents with custom prompts.
</Card>
<Card title="CLI والاختبار" icon="terminal" href="/l/ar/developers/extend/apps/cli-and-testing">
أوامر CLI، والاختبار، والأصول، والوحدات البعيدة، وCI.
<Card title="CLI & Testing" icon="terminal" href="/l/ar/developers/extend/apps/cli-and-testing">
CLI commands, testing, assets, remotes, and CI.
</Card>
<Card title="النشر" icon="rocket" href="/l/ar/developers/extend/apps/publishing">
انشر إلى خادم أو انشر في السوق.
Deploy to a server or publish to the marketplace.
</Card>
</CardGroup>
@@ -1,10 +1,10 @@
---
title: نموذج البيانات
description: عرّف الكائنات والحقول والأدوار وبيانات تعريف التطبيق باستخدام SDK الخاصة بـ Twenty.
description: Define objects, fields, roles, and application metadata with the Twenty SDK.
icon: database
---
توفر حزمة `twenty-sdk` دوالّ `defineEntity` لتعريف نموذج بيانات تطبيقك. يجب عليك استخدام `export default defineEntity({...})` لكي يكتشف SDK الكيانات الخاصة بك. تتحقق هذه الدوال من تكوينك وقت البناء وتوفّر إكمالًا تلقائيًا في بيئة التطوير وأمان الأنواع.
The `twenty-sdk` package provides `defineEntity` functions to declare your app's data model. يجب عليك استخدام `export default defineEntity({...})` لكي يكتشف SDK الكيانات الخاصة بك. تتحقق هذه الدوال من تكوينك وقت البناء وتوفّر إكمالًا تلقائيًا في بيئة التطوير وأمان الأنواع.
<Note>
**تنظيم الملفات يعود إليك.**
@@ -1,6 +1,6 @@
---
title: المكوّنات الأمامية
description: أنشئ مكونات React تُعرَض داخل واجهة مستخدم Twenty ضمن بيئة معزولة (sandbox).
description: Build React components that render inside Twenty's UI with sandboxed isolation.
icon: window-maximize
---
@@ -1,23 +1,23 @@
---
title: التخطيط
description: عرّف طرق العرض، وعناصر قائمة التنقّل، وتخطيطات الصفحات لتشكيل كيفية ظهور تطبيقك في Twenty.
description: Define views, navigation menu items, and page layouts to shape how your app appears in Twenty.
icon: table-columns
---
تتحكّم كيانات التخطيط في كيفية ظهور تطبيقك داخل واجهة مستخدم Twenty — ما الذي يوجد في الشريط الجانبي، وأي العروض المحفوظة تأتي مع التطبيق، وكيف يتم ترتيب صفحة تفاصيل السجل.
Layout entities control how your app surfaces inside Twenty's UI — what lives in the sidebar, which saved views ship with the app, and how a record detail page is arranged.
## مفاهيم التخطيط
## Layout concepts
| المفهوم | ما الذي يتحكّم فيه | كيان |
| ---------------------- | ------------------------------------------------------------------------------- | -------------------------- |
| **عرض** | تكوين قائمة محفوظة لكائن — الحقول المرئية، والترتيب، وعوامل التصفية، والمجموعات | `defineView` |
| **عنصر قائمة التنقّل** | عنصر في الشريط الجانبي الأيسر يرتبط بعرض أو بعنوان URL خارجي | `defineNavigationMenuItem` |
| **تخطيط الصفحة** | علامات التبويب وعناصر الواجهة التي تشكّل صفحة تفاصيل السجل | `definePageLayout` |
| Concept | What it controls | كيان |
| ------------------------ | --------------------------------------------------------------------------------- | -------------------------- |
| **View** | A saved list configuration for an object — visible fields, order, filters, groups | `defineView` |
| **Navigation Menu Item** | An entry in the left sidebar that links to a view or an external URL | `defineNavigationMenuItem` |
| **Page Layout** | The tabs and widgets that make up a record's detail page | `definePageLayout` |
تشير العروض، وعناصر التنقّل، وتخطيطات الصفحات إلى بعضها البعض عبر `universalIdentifier`:
Views, navigation items, and page layouts reference each other by `universalIdentifier`:
* يشير **عنصر قائمة التنقّل** من النوع `VIEW` إلى معرّف `defineView`، بحيث يفتح رابط الشريط الجانبي ذلك العرض المحفوظ.
* يستهدف **تخطيط الصفحة** من النوع `RECORD_PAGE` كائنًا ويمكنه تضمين [مكوّنات الواجهة الأمامية](/l/ar/developers/extend/apps/front-components) داخل علامات التبويب الخاصة به بوصفها عناصر واجهة.
* A **navigation menu item** of type `VIEW` points at a `defineView` identifier, so the sidebar link opens that saved view.
* A **page layout** of type `RECORD_PAGE` targets an object and can embed [front components](/l/ar/developers/extend/apps/front-components) inside its tabs as widgets.
<AccordionGroup>
<Accordion title="defineView" description="تعريف العروض المحفوظة للكائنات">
@@ -1,10 +1,10 @@
---
title: الوظائف المنطقية
description: عرّف دوال TypeScript على جانب الخادم مع HTTP وcron ومشغّلات أحداث قاعدة البيانات.
description: Define server-side TypeScript functions with HTTP, cron, and database event triggers.
icon: bolt
---
دوال المنطق هي دوال TypeScript على جانب الخادم تعمل على منصة Twenty. يمكن تشغيلها بواسطة طلبات HTTP أو جداول cron أو أحداث قاعدة البيانات — كما يمكن إتاحتها كأدوات لوكلاء الذكاء الاصطناعي.
Logic functions are server-side TypeScript functions that run on the Twenty platform. They can be triggered by HTTP requests, cron schedules, or database events — and can also be exposed as tools for AI agents.
<AccordionGroup>
<Accordion title="defineLogicFunction" description="عرّف الدوال المنطقية ومشغّلاتها">
@@ -387,7 +387,7 @@ export default definePreInstallLogicFunction({
**قاعدة عامة:**
| ترغب في... | استخدام |
| You want to... | استخدام |
| ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
| بذر بيانات افتراضية، تهيئة مساحة العمل، تسجيل موارد خارجية | `post-install` |
| تشغيل بذر طويل الأمد أو استدعاءات أطراف ثالثة لا ينبغي أن تحجب استجابة التثبيت | `post-install` (الإعداد الافتراضي — `shouldRunSynchronously: false`، مع محاولات إعادة من العامل) |
@@ -1,6 +1,6 @@
---
title: المهارات والوكلاء
description: عرّف مهارات ووكلاء الذكاء الاصطناعي لتطبيقك.
description: Define AI skills and agents for your app.
icon: robot
---
@@ -8,7 +8,7 @@ icon: robot
Skills and agents are currently in alpha. الميزة تعمل لكنها لا تزال قيد التطور.
</Warning>
يمكن للتطبيقات تعريف قدرات ذكاء اصطناعي تعمل داخل مساحة العمل — تعليمات مهارات قابلة لإعادة الاستخدام ووكلاء بموجهات نظام مخصّصة.
Apps can define AI capabilities that live inside the workspace — reusable skill instructions and agents with custom system prompts.
<AccordionGroup>
<Accordion title="defineSkill" description="عرّف مهارات وكلاء الذكاء الاصطناعي">
@@ -1,23 +1,23 @@
---
title: OAuth
icon: المفتاح
description: تدفق رمز التفويض مع PKCE وبيانات اعتماد العميل للوصول من خادم إلى خادم.
description: Authorization code flow with PKCE and client credentials for server-to-server access.
---
تُطبِّق Twenty بروتوكول OAuth 2.0 باستخدام رمز التفويض + PKCE للتطبيقات المواجهة للمستخدم، وبيانات اعتماد العميل للوصول من خادم إلى خادم. يُجرى تسجيل العملاء ديناميكيًا عبر [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591) — دون إعداد يدوي في لوحة التحكم.
Twenty implements OAuth 2.0 with authorization code + PKCE for user-facing apps and client credentials for server-to-server access. Clients are registered dynamically via [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591) — no manual setup in a dashboard.
## متى تستخدم OAuth
## When to Use OAuth
| السيناريو | طريقة المصادقة |
| -------------------------------------------- | ------------------------------------------------------------------------------------ |
| البرامج النصية الداخلية، والأتمتة | [مفتاح API](/l/ar/developers/extend/api#authentication) |
| تطبيق خارجي يعمل نيابةً عن مستخدم | **OAuth — رمز التفويض** |
| من خادم إلى خادم، دون سياق مستخدم | **OAuth — بيانات اعتماد العميل** |
| تطبيق Twenty مع امتدادات واجهة المستخدم (UI) | [التطبيقات](/l/ar/developers/extend/apps/getting-started) (يتم التعامل مع OAuth تلقائيًا) |
| السيناريو | Auth Method |
| --------------------------------------- | -------------------------------------------------------------------------------- |
| Internal scripts, automation | [API Key](/l/ar/developers/extend/api#authentication) |
| External app acting on behalf of a user | **OAuth — Authorization Code** |
| Server-to-server, no user context | **OAuth — Client Credentials** |
| Twenty App with UI extensions | [Apps](/l/ar/developers/extend/apps/getting-started) (OAuth is handled automatically) |
## تسجيل عميل
## Register a Client
تدعم Twenty **التسجيل الديناميكي للعملاء** وفقًا لـ[RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591). لا حاجة إلى إعداد يدوي — سجّل برمجيًا:
Twenty supports **dynamic client registration** per [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591). No manual setup needed — register programmatically:
```bash
POST /oauth/register
@@ -31,7 +31,7 @@ Content-Type: application/json
}
```
**الاستجابة:**
**Response:**
```json
{
@@ -43,23 +43,23 @@ Content-Type: application/json
```
<Warning>
احفظ `client_secret` بأمان — لا يمكن استرجاعه لاحقًا.
Store the `client_secret` securely — it cannot be retrieved later.
</Warning>
## النطاقات
| النطاق | الوصول |
| --------- | -------------------------------------------------------------- |
| `api` | إمكانية قراءة/كتابة كاملة لواجهات برمجة تطبيقات Core وMetadata |
| `profile` | قراءة معلومات ملف تعريف المستخدم المُصادَق عليه |
| Scope | الوصول |
| --------- | ---------------------------------------------------- |
| `api` | Full read/write access to the Core and Metadata APIs |
| `profile` | Read the authenticated user's profile information |
اطلب النطاقات كسلسلة مفصولة بمسافات: `scope=api profile`
Request scopes as a space-separated string: `scope=api profile`
## تدفق رمز التفويض
## Authorization Code Flow
استخدم هذا التدفق عندما يعمل تطبيقك نيابةً عن مستخدم Twenty.
Use this flow when your app acts on behalf of a Twenty user.
### 1. أعد توجيه المستخدم للتفويض
### 1. Redirect the user to authorize
```
GET /oauth/authorize?
@@ -72,29 +72,29 @@ GET /oauth/authorize?
code_challenge_method=S256
```
| المعلمة | مطلوب | الوصف |
| ----------------------- | -------- | -------------------------------------------------------- |
| `client_id` | نعم | معرّف العميل المسجّل الخاص بك |
| `response_type` | نعم | يجب أن يكون `code` |
| `redirect_uri` | نعم | يجب أن يطابق عنوان URI لإعادة التوجيه المسجّل |
| `scope` | لا | نطاقات مفصولة بمسافات (القيمة الافتراضية هي `api`) |
| `state` | مُوصى به | سلسلة عشوائية لمنع هجمات CSRF |
| `code_challenge` | مُوصى به | تحدّي PKCE (تجزئة SHA-256 لـ verifier، بترميز base64url) |
| `code_challenge_method` | مُوصى به | يجب أن تكون `S256` عند استخدام PKCE |
| المعلمة | مطلوب | الوصف |
| ----------------------- | -------- | ------------------------------------------------------------ |
| `client_id` | نعم | Your registered client ID |
| `response_type` | نعم | Must be `code` |
| `redirect_uri` | نعم | Must match a registered redirect URI |
| `scope` | لا | Space-separated scopes (defaults to `api`) |
| `الحالة` | مُوصى به | Random string to prevent CSRF attacks |
| `code_challenge` | مُوصى به | PKCE challenge (SHA-256 hash of verifier, base64url-encoded) |
| `code_challenge_method` | مُوصى به | Must be `S256` when using PKCE |
يرى المستخدم شاشة موافقة ويوافق على الوصول أو يرفضه.
The user sees a consent screen and approves or denies access.
### ٢. معالجة الاستدعاء المرتجع
### ٢. Handle the callback
بعد التفويض، تعيد Twenty التوجيه إلى `redirect_uri` الخاص بك:
After authorization, Twenty redirects back to your `redirect_uri`:
```
https://myapp.com/callback?code=AUTH_CODE&state=random_state_value
```
تحقّق من أن قيمة `state` تطابق ما أرسلته.
Verify that `state` matches what you sent.
### ٣. استبدِل الرمز بالرموز
### ٣. Exchange the code for tokens
```bash
POST /oauth/token
@@ -108,7 +108,7 @@ client_secret=YOUR_CLIENT_SECRET&
code_verifier=YOUR_PKCE_VERIFIER
```
**الاستجابة:**
**Response:**
```json
{
@@ -119,14 +119,14 @@ code_verifier=YOUR_PKCE_VERIFIER
}
```
### 4. استخدم رمز الوصول
### 4. Use the access token
```bash
GET /rest/companies
Authorization: Bearer ACCESS_TOKEN
```
### 5. حدِّث عند انتهاء الصلاحية
### 5. Refresh when expired
```bash
POST /oauth/token
@@ -138,9 +138,9 @@ client_id=YOUR_CLIENT_ID&
client_secret=YOUR_CLIENT_SECRET
```
## تدفق بيانات اعتماد العميل
## Client Credentials Flow
لعمليات التكامل من خادم إلى خادم دون تفاعل مستخدم:
For server-to-server integrations with no user interaction:
```bash
POST /oauth/token
@@ -152,38 +152,38 @@ client_secret=YOUR_CLIENT_SECRET&
scope=api
```
الرمز المُعاد يمتلك وصولًا على مستوى مساحة العمل، وغير مرتبط بأي مستخدم محدّد.
The returned token has workspace-level access, not tied to any specific user.
## اكتشاف الخادم
## Server Discovery
تنشر Twenty إعدادات OAuth الخاصة بها عند نقطة اكتشاف قياسية:
Twenty publishes its OAuth configuration at a standard discovery endpoint:
```
GET /.well-known/oauth-authorization-server
```
يعيد هذا جميع نقاط النهاية وأنواع المنح المدعومة والنطاقات والقدرات — وهو مفيد لبناء عملاء OAuth عامّين.
This returns all endpoints, supported grant types, scopes, and capabilities — useful for building generic OAuth clients.
## ملخص نقاط نهاية API
## API Endpoints Summary
| نقطة النهاية | الغرض |
| ----------------------------------------- | -------------------------- |
| `/.well-known/oauth-authorization-server` | اكتشاف بيانات تعريف الخادم |
| `/oauth/register` | التسجيل الديناميكي للعميل |
| `/oauth/authorize` | تفويض المستخدم |
| `/oauth/token` | مبادلة الرموز وتحديثها |
| نقطة النهاية | الغرض |
| ----------------------------------------- | --------------------------- |
| `/.well-known/oauth-authorization-server` | Server metadata discovery |
| `/oauth/register` | Dynamic client registration |
| `/oauth/authorize` | User authorization |
| `/oauth/token` | Token exchange and refresh |
| البيئة | عنوان URL الأساسي |
| --------------------- | ------------------------ |
| **السحابة** | `https://api.twenty.com` |
| **الاستضافة الذاتية** | `https://{your-domain}` |
## OAuth مقابل مفاتيح API
## OAuth vs API Keys
| | مفاتيح واجهة برمجة التطبيقات | OAuth |
| ------------------------ | -------------------------------- | ------------------------------------------ |
| **الإعداد** | إنشاء من الإعدادات | تسجيل عميل، وتنفيذ التدفق |
| **سياق المستخدم** | لا يوجد (على مستوى مساحة العمل) | أذونات مستخدم محدّد |
| **الأفضل لـ** | البرامج النصية، الأدوات الداخلية | تطبيقات خارجية، وتكاملات متعددة المستخدمين |
| **تدوير الرموز** | يدوي | تلقائي عبر رموز التحديث |
| **وصول محدود بالنطاقات** | وصول كامل إلى API | تفصيلي عبر النطاقات |
| | مفاتيح واجهة برمجة التطبيقات | OAuth |
| ------------------ | ---------------------------- | -------------------------------------- |
| **الإعداد** | Generate in Settings | Register a client, implement flow |
| **User context** | None (workspace-level) | Specific user's permissions |
| **الأفضل لـ** | Scripts, internal tools | External apps, multi-user integrations |
| **Token rotation** | يدوي | Automatic via refresh tokens |
| **Scoped access** | Full API access | Granular via scopes |
@@ -1,12 +1,12 @@
---
title: خطافات الويب
icon: satellite-dish
description: احصل على إشعار عند تغيّر السجلات — سيتم إرسال طلب HTTP POST إلى endpoint الخاص بك عند كل عملية إنشاء أو تحديث أو حذف.
description: Get notified when records change — HTTP POST to your endpoint on every create, update, or delete.
---
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
يقوم Twenty بإرسال طلب HTTP POST إلى URL الخاص بك كلما تم إنشاء سجل أو تحديثه أو حذفه. جميع أنواع الكائنات مشمولة، بما في ذلك الكائنات المخصصة.
Twenty sends an HTTP POST to your URL whenever a record is created, updated, or deleted. All object types are covered, including custom objects.
## إنشاء خطاف ويب
@@ -1,28 +1,28 @@
---
title: المطورون
description: أنشئ تطبيقات، استخدم واجهة برمجة التطبيقات، استضف ذاتياً، أو ساهم في قاعدة الشفرة.
description: Build apps, use the API, self-host, or contribute to the codebase.
---
import { CardTitle } from "/snippets/card-title.mdx"
<CardGroup cols={٣}>
<Card href="/l/ar/developers/extend/apps/getting-started" img="/images/user-guide/halftone/dev-apps.png">
<CardTitle>التطبيقات</CardTitle>
وسّع Twenty بكائنات مخصصة، ومنطق على جانب الخادم، ومكونات واجهة المستخدم، ووكلاء الذكاء الاصطناعي — جميعها كحزم TypeScript.
<CardTitle>Apps</CardTitle>
Extend Twenty with custom objects, server-side logic, UI components, and AI agents — all as TypeScript packages.
</Card>
<Card href="/l/ar/developers/extend/api" img="/images/user-guide/halftone/dev-api.png">
<CardTitle>API</CardTitle>
واجهات برمجة تطبيقات REST وGraphQL، وخطافات الويب، وOAuth.
REST and GraphQL APIs, webhooks, and OAuth.
</Card>
<Card href="/l/ar/developers/self-host/capabilities/docker-compose" img="/images/user-guide/halftone/dev-self-host.png">
<CardTitle>الاستضافة الذاتية</CardTitle>
شغّل Twenty على البنية التحتية الخاصة بك.
<CardTitle>Self-Host</CardTitle>
Run Twenty on your own infrastructure.
</Card>
<Card href="/l/ar/developers/contribute/capabilities/local-setup" img="/images/user-guide/halftone/dev-contribute.png">
<CardTitle>المساهمة</CardTitle>
قم بإعداد المستودع الأحادي محلياً وقدّم طلبات السحب.
<CardTitle>Contribute</CardTitle>
Set up the monorepo locally and submit PRs.
</Card>
</CardGroup>
@@ -1,6 +1,6 @@
---
title: إعداد
icon: ترس
icon: gear
---
# إدارة الإعدادات
@@ -38,7 +38,7 @@ export const MyComponent = () => {
<Tab title="المحددات">
| الخصائص | النوع | الوصف |
| المحددات | النوع | الوصف |
| ------------------ | ----------------------- | ---------------------------------------------------------------------- |
| linkToEntity | نص | الرابط إلى الكيان |
| معرف الكيان | نص | المعرف الفريد للكيان |
@@ -26,9 +26,9 @@ export const MyComponent = () => {
<Tab title="المحددات">
| الخصائص | النوع | الوصف |
| ------- | ----------------- | ------------------------ |
| محرر | `BlockNoteEditor` | مثيل أو تكوين محرر الكتل |
| المحددات | النوع | الوصف |
| -------- | ----------------- | ------------------------ |
| محرر | `BlockNoteEditor` | مثيل أو تكوين محرر الكتل |
@@ -40,7 +40,7 @@ export const MyComponent = () => {
<Tab title="المحددات">
| الخصائص | النوع | الوصف |
| المحددات | النوع | الوصف |
| ----------------------- | ----------- | ------------------------------------------------------------------------------------------------------------ |
| معطل | قيمة منطقية | يقوم بتعطيل منتقى الأيقونات إذا تم تعيينه إلى `true` |
| عند التغيير | دالة | الدالة الارتجاعية التي تُفعل عندما يختار المستخدم أيقونة. يستقبل كائنًا يحتوي على الخصائص `iconKey` و `Icon` |
@@ -23,7 +23,7 @@ export const MyComponent = () => {
<Tab title="المحددات">
| الخصائص | النوع | الوصف |
| المحددات | النوع | الوصف |
| ------------ | ----------- | --------------------------------------------------------------------------------- |
| صورة | نص | 3946482746 45352F31 274435483129 27442544432A3148464A |
| onUpload | دالة | الدالة التي تُستدعى عند قيام المستخدم بتحميل صورة جديدة. تستقبل كائن `File` كوسيط |
@@ -38,7 +38,7 @@ export const MyComponent = () => {
<Tab title="المحددات">
| الخصائص | النوع | الوصف |
| المحددات | النوع | الوصف |
| ----------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| اسم الفئة | نص | فئة CSS اختيارية للتنسيق الإضافي |
| معطل | قيمة منطقية | عند ضبطها على `true`، يتم تعطيل تفاعل المستخدم مع المكون |
@@ -35,7 +35,7 @@ export const MyComponent = () => {
<Tab title="المحددات">
| الخصائص | النوع | الوصف |
| المحددات | النوع | الوصف |
| --------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| اسم الفئة | نص | اسم فئة اختياري لتنسيقات إضافية |
| روابط | مصفوفة | مصفوفة من الكائنات، يمثّل كلٌّ منها رابطًا في مسار التنقّل. كل كائن يحتوي على خاصية `children` (محتوى النص للرابط) وخاصية `href` اختيارية (رابط URL للتنقل إليه عند النقر على الرابط) |
@@ -30,7 +30,7 @@ export const MyComponent = () => {
<Tab title="المحددات">
| الخصائص | النوع | الوصف |
| المحددات | النوع | الوصف |
| ------------- | ----- | ----------------------------------------------------------------- |
| الخطوة النشطة | رقم | مؤشر للخطوة النشطة حاليًا. هذا يحدد أي خطوة يجب إبرازها بشكل مرئي |
@@ -1,6 +1,6 @@
---
title: Osvědčené postupy
icon: hvězda
icon: star
---
Tento dokument popisuje osvědčené postupy, které byste měli dodržovat při práci na frontend.
@@ -1,12 +1,12 @@
---
title: Příkazy
title: Commands
icon: terminal
description: Užitečné příkazy pro vývoj Twenty.
description: Useful commands for developing Twenty.
---
Příkazy je možné spouštět z kořene repozitáře pomocí `npx nx`. Pro explicitní cílení použijte `npx nx run {project}:{command}`.
Commands can be run from the repository root using `npx nx`. Use `npx nx run {project}:{command}` for explicit targeting.
## Spuštění aplikace
## Starting the App
```bash
npx nx start twenty-front # Frontend dev server (http://localhost:3001)
@@ -14,7 +14,7 @@ npx nx start twenty-server # Backend server (http://localhost:3000)
npx nx run twenty-server:worker # Background worker
```
## Databáze
## Database
```bash
npx nx database:reset twenty-server # Reset and seed database
@@ -22,7 +22,7 @@ npx nx run twenty-server:database:migrate:prod # Run migrations
npx nx run twenty-server:database:migrate:generate --name <name> --type <fast|slow> # Generate a migration
```
## Lintování
## Linting
```bash
npx nx lint:diff-with-main twenty-front # Lint changed files (fastest)
@@ -30,7 +30,7 @@ npx nx lint:diff-with-main twenty-server
npx nx lint twenty-front --configuration=fix # Auto-fix
```
## Kontrola typů
## Type Checking
```bash
npx nx typecheck twenty-front
@@ -68,7 +68,7 @@ npx nx run twenty-front:lingui:extract # Extract strings
npx nx run twenty-front:lingui:compile # Compile translations
```
## Sestavení
## Build
```bash
npx nx build twenty-shared # Must be built first
@@ -1,14 +1,14 @@
---
title: Stylová příručka
icon: paintbrush
description: Konvence kódu a osvědčené postupy pro přispívání do Twenty.
description: Code conventions and best practices for contributing to Twenty.
---
## React
### Pouze funkcionální komponenty
### Functional components only
Vždy používejte funkcionální komponenty TSX s pojmenovanými exporty.
Always use TSX functional components with named exports.
```tsx
// ❌ Bad
@@ -25,7 +25,7 @@ export function MyComponent() {
### Vlastnosti
Vytvořte typ s názvem `{ComponentName}Props`. Používejte destrukturalizaci. Nepoužívejte `React.FC`.
Create a type named `{ComponentName}Props`. Use destructuring. Don't use `React.FC`.
```tsx
type MyComponentProps = {
@@ -35,7 +35,7 @@ type MyComponentProps = {
export const MyComponent = ({ name }: MyComponentProps) => <div>Hello {name}</div>;
```
### Nepoužívejte prop spreading jediné proměnné
### No single-variable prop spreading
```tsx
// ❌ Bad
@@ -47,7 +47,7 @@ const MyComponent = ({ prop1, prop2 }: MyComponentProps) => <Other {...{ prop1,
## Správa stavu
### Atomy Jotai pro globální stav
### Jotai atoms for global state
```tsx
import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
@@ -59,16 +59,16 @@ export const myAtomState = createAtomState<string>({
});
```
* Upřednostňujte atomy před prop drillingem
* Nepoužívejte `useRef` pro stavpoužijte `useState` nebo atomy
* Používejte rodiny atomů a selektory pro seznamy
* Prefer atoms over prop drilling
* Don't use `useRef` for stateuse `useState` or atoms
* Use atom families and selectors for lists
### Vyhněte se zbytečnému opakovanému vykreslování
### Avoid unnecessary re-renders
* Přesuňte `useEffect` a načítání dat do sesterských sidecar komponent
* Upřednostňujte obslužné funkce událostí (`handleClick`, `handleChange`) před `useEffect`
* Nepoužívejte `React.memo()` — místo toho opravte kořenovou příčinu
* Omezte používání `useCallback` / `useMemo`
* Extract `useEffect` and data fetching into sibling sidecar components
* Prefer event handlers (`handleClick`, `handleChange`) over `useEffect`
* Don't use `React.memo()` — fix the root cause instead
* Limit `useCallback` / `useMemo` usage
```tsx
// ❌ Bad — useEffect in the same component causes re-renders
@@ -94,11 +94,11 @@ export const Page = () => {
## TypeScript
* **`type` místo `interface`** — flexibilnější, lépe kombinovatelný
* **Řetězcové literály místo výčtů** — s výjimkou enumů GraphQL codegenu a interních API knihoven
* **Žádné `any`** — vynucený přísný TypeScript
* **Žádné importy typů** — používejte běžné importy (vynuceno nástrojem Oxlint `typescript/consistent-type-imports`)
* **Používejte [Zod](https://github.com/colinhacks/zod)** pro runtime validaci netypovaných objektů
* **`type` over `interface`** — more flexible, easier to compose
* **String literals over enums** — except for GraphQL codegen enums and internal library APIs
* **No `any`** — strict TypeScript enforced
* **No type imports** — use regular imports (enforced by Oxlint `typescript/consistent-type-imports`)
* **Use [Zod](https://github.com/colinhacks/zod)** for runtime validation of untyped objects
## JavaScript
@@ -112,17 +112,17 @@ onClick?.();
## Pojmenovávání
* **Proměnné**: camelCase, popisné (`email` nikoli `value`, `fieldMetadata` nikoli `fm`)
* **Konstanty**: SCREAMING_SNAKE_CASE
* **Typy/Třídy**: PascalCase
* **Soubory/adresáře**: kebab-case (`.component.tsx`, `.service.ts`, `.entity.ts`)
* **Obslužné funkce událostí**: `handleClick` (nikoli `onClick` pro obslužnou funkci)
* **Vlastnosti komponenty (props)**: předponu tvoří název komponenty (`ButtonProps`)
* **Stylované komponenty**: předpona `Styled` (`StyledTitle`)
* **Variables**: camelCase, descriptive (`email` not `value`, `fieldMetadata` not `fm`)
* **Constants**: SCREAMING_SNAKE_CASE
* **Types/Classes**: PascalCase
* **Files/directories**: kebab-case (`.component.tsx`, `.service.ts`, `.entity.ts`)
* **Event handlers**: `handleClick` (not `onClick` for the handler function)
* **Component props**: prefix with component name (`ButtonProps`)
* **Styled components**: prefix with `Styled` (`StyledTitle`)
## Styling
Používejte stylované komponenty [Linaria](https://github.com/callstack/linaria). Používejte hodnoty z tématu — vyhněte se napevno zadaným `px`, `rem` nebo barvám.
Use [Linaria](https://github.com/callstack/linaria) styled components. Use theme values — avoid hardcoded `px`, `rem`, or colors.
```tsx
// ❌ Bad
@@ -142,7 +142,7 @@ const StyledButton = styled.button`
## Importy
Používejte aliasy místo relativních cest:
Use aliases instead of relative paths:
```tsx
// ❌ Bad
@@ -153,7 +153,7 @@ import { Foo } from '~/testing/decorators/Foo';
import { Bar } from '@/modules/bar/components/Bar';
```
## Struktura složek
## Folder Structure
```
front
@@ -171,6 +171,6 @@ front
└── ui/ # Reusable UI components (display, input, feedback, ...)
```
* Moduly mohou importovat z jiných modulů, ale `ui/` by mělo zůstat bez závislostí
* Používejte podadresáře `internal/` pro interní kód modulu
* Komponenty do 300 řádků, služby do 500 řádků
* Modules can import from other modules, but `ui/` should stay dependency-free
* Use `internal/` subfolders for module-private code
* Components under 300 lines, services under 500 lines
@@ -1,14 +1,14 @@
---
title: Architektura
description: Jak fungují aplikace Twenty — sandboxing, životní cyklus a stavební bloky.
description: How Twenty apps work — sandboxing, lifecycle, and the building blocks.
icon: sitemap
---
Aplikace Twenty jsou balíčky TypeScriptu, které rozšiřují váš pracovní prostor o vlastní objekty, logiku, komponenty UI a funkce AI. Běží na platformě Twenty s plnou izolací (sandboxingem) a řízením oprávnění.
Twenty apps are TypeScript packages that extend your workspace with custom objects, logic, UI components, and AI capabilities. They run on the Twenty platform with full sandboxing and permission controls.
## Jak aplikace fungují
## How apps work
Aplikace je kolekce **entit** deklarovaných pomocí funkcí `defineEntity()` z balíčku `twenty-sdk`. SDK tyto deklarace detekuje pomocí analýzy AST při sestavení a vytváří **manifest** — úplný popis toho, co vaše aplikace přidává do pracovního prostoru.
An app is a collection of **entities** declared using `defineEntity()` functions from the `twenty-sdk` package. The SDK detects these declarations via AST analysis at build time and produces a **manifest** — a complete description of what your app adds to a workspace.
```
your-app/
@@ -29,32 +29,32 @@ your-app/
```
<Note>
**Uspořádání souborů je na vás.** Detekce entit je založená na AST — SDK najde volání `export default defineEntity(...)` bez ohledu na to, kde se soubor nachází. Výše uvedená struktura složek je konvence, nikoli požadavek.
**File organization is up to you.** Entity detection is AST-based — the SDK finds `export default defineEntity(...)` calls regardless of where the file lives. The folder structure above is a convention, not a requirement.
</Note>
## Typy entit
## Entity types
| Entita | Účel | Dokumentace |
| ----------------------------- | ----------------------------------------------- | ------------------------------------------------------------------ |
| **Aplikace** | Identita aplikace, oprávnění, proměnné | [Datový model](/l/cs/developers/extend/apps/data-model) |
| **Role** | Sady oprávnění pro objekty a pole | [Datový model](/l/cs/developers/extend/apps/data-model) |
| **Objekt** | Vlastní datové tabulky s poli | [Datový model](/l/cs/developers/extend/apps/data-model) |
| **Pole** | Rozšíření existujících objektů, definice rela | [Datový model](/l/cs/developers/extend/apps/data-model) |
| **Logická funkce** | TypeScript na straně serveru se spouštěči | [Logické funkce](/l/cs/developers/extend/apps/logic-functions) |
| **Frontendová komponenta** | Izolované React UI na stránce Twenty | [Frontendové komponenty](/l/cs/developers/extend/apps/front-components) |
| **Dovednost** | Znovupoužitelné pokyny pro AI agenty | [Dovednosti a agenti](/l/cs/developers/extend/apps/skills-and-agents) |
| **Agent** | AI asistenti s vlastními prompty | [Dovednosti a agenti](/l/cs/developers/extend/apps/skills-and-agents) |
| **Pohled** | Předkonfigurovaná zobrazení seznamu záznamů | [Rozvržení](/l/cs/developers/extend/apps/layout) |
| **Položka navigační nabídky** | Vlastní položky postranního panelu | [Rozvržení](/l/cs/developers/extend/apps/layout) |
| **Rozvržení stránky** | Vlastní karty a widgety na stránce záznamu | [Rozvržení](/l/cs/developers/extend/apps/layout) |
| Entita | Účel | Dokumentace |
| ------------------------ | ----------------------------------------- | ------------------------------------------------------------ |
| **Application** | App identity, permissions, variables | [Data Model](/l/cs/developers/extend/apps/data-model) |
| **Role** | Permission sets for objects and fields | [Data Model](/l/cs/developers/extend/apps/data-model) |
| **Objekt** | Custom data tables with fields | [Data Model](/l/cs/developers/extend/apps/data-model) |
| **Pole** | Extend existing objects, define relations | [Data Model](/l/cs/developers/extend/apps/data-model) |
| **Logic Function** | Server-side TypeScript with triggers | [Logické funkce](/l/cs/developers/extend/apps/logic-functions) |
| **Front Component** | Sandboxed React UI in Twenty's page | [Front Components](/l/cs/developers/extend/apps/front-components) |
| **Skill** | Reusable AI agent instructions | [Skills & Agents](/l/cs/developers/extend/apps/skills-and-agents) |
| **Agent** | AI assistants with custom prompts | [Skills & Agents](/l/cs/developers/extend/apps/skills-and-agents) |
| **View** | Pre-configured record list views | [Layout](/l/cs/developers/extend/apps/layout) |
| **Navigation Menu Item** | Custom sidebar entries | [Layout](/l/cs/developers/extend/apps/layout) |
| **Page Layout** | Custom record page tabs and widgets | [Layout](/l/cs/developers/extend/apps/layout) |
## Izolace (sandboxing)
## Sandboxing
* **Logic funkce** běží v izolovaných procesech Node.js na serveru. K datům přistupují pouze prostřednictvím typovaného klienta API, a to v rozsahu oprávnění role aplikace.
* **Frontendové komponenty** běží ve Web Workerech s využitím Remote DOM — jsou oddělené od hlavní stránky, ale vykreslují nativní prvky DOM (nikoli iframy). Komunikují s Twenty prostřednictvím hostitelského API pro předávání zpráv.
* **Oprávnění** jsou vynucována na úrovni API. Běhový token (`TWENTY_APP_ACCESS_TOKEN`) je odvozen z role definované v `defineApplication()`.
* **Logic functions** run in isolated Node.js processes on the server. They only access data through the typed API client, scoped to the app's role permissions.
* **Front components** run in Web Workers using Remote DOM — sandboxed from the main page but rendering native DOM elements (not iframes). They communicate with Twenty via a message-passing host API.
* **Permissions** are enforced at the API level. The runtime token (`TWENTY_APP_ACCESS_TOKEN`) is derived from the role defined in `defineApplication()`.
## Životní cyklus aplikace
## App lifecycle
```
┌─────────────────────────────────────────────────────────┐
@@ -73,32 +73,32 @@ your-app/
└─────────────────────────────────────────────────────────┘
```
* **`yarn twenty dev`** — sleduje vaše zdrojové soubory a průběžně synchronizuje změny s připojeným serverem Twenty. Typovaný klient API se při změně schématu automaticky znovu vygeneruje.
* **`yarn twenty build`** — zkompiluje TypeScript, zabalí logic funkce a frontendové komponenty pomocí esbuild a vytvoří manifest.
* **Pre/post-install hooks** — volitelné logic funkce, které běží během instalace. Podrobnosti najdete v [Logických funkcích](/l/cs/developers/extend/apps/logic-functions).
* **`yarn twenty dev`** — watches your source files and live-syncs changes to a connected Twenty server. The typed API client is regenerated automatically when the schema changes.
* **`yarn twenty build`** — compiles TypeScript, bundles logic functions and front components with esbuild, and produces a manifest.
* **Pre/post-install hooks** — optional logic functions that run during installation. See [Logic Functions](/l/cs/developers/extend/apps/logic-functions) for details.
## Další kroky
<CardGroup cols={2}>
<Card title="Datový model" icon="database" href="/l/cs/developers/extend/apps/data-model">
Definujte objekty, pole, role a relace.
Define objects, fields, roles, and relations.
</Card>
<Card title="Logické funkce" icon="bolt" href="/l/cs/developers/extend/apps/logic-functions">
Funkce na straně serveru s HTTP, cron a událostními spouštěči.
Server-side functions with HTTP, cron, and event triggers.
</Card>
<Card title="Frontendové komponenty" icon="window-maximize" href="/l/cs/developers/extend/apps/front-components">
Izolované komponenty Reactu v uživatelském rozhraní Twenty.
Sandboxed React components inside Twenty's UI.
</Card>
<Card title="Rozvržení" icon="table-columns" href="/l/cs/developers/extend/apps/layout">
Pohledy, položky navigace a rozvržení stránek záznamů.
Views, navigation items, and record page layouts.
</Card>
<Card title="Dovednosti a agenti" icon="robot" href="/l/cs/developers/extend/apps/skills-and-agents">
AI dovednosti a agenti s vlastními prompty.
AI skills and agents with custom prompts.
</Card>
<Card title="CLI a testování" icon="terminal" href="/l/cs/developers/extend/apps/cli-and-testing">
Příkazy CLI, testování, prostředky, vzdálené zdroje a CI.
<Card title="CLI & Testing" icon="terminal" href="/l/cs/developers/extend/apps/cli-and-testing">
CLI commands, testing, assets, remotes, and CI.
</Card>
<Card title="Publikování" icon="rocket" href="/l/cs/developers/extend/apps/publishing">
Nasaďte na server nebo publikujte na tržišti.
Deploy to a server or publish to the marketplace.
</Card>
</CardGroup>
@@ -1,10 +1,10 @@
---
title: Datový model
description: Definujte objekty, pole, role a metadata aplikace pomocí Twenty SDK.
description: Define objects, fields, roles, and application metadata with the Twenty SDK.
icon: database
---
Balíček `twenty-sdk` poskytuje funkce `defineEntity` pro deklaraci datového modelu vaší aplikace. Abyste umožnili SDK detekovat vaše entity, musíte použít `export default defineEntity({...})`. Tyto funkce validují vaši konfiguraci v době sestavení a poskytují automatické doplňování v IDE a typovou bezpečnost.
The `twenty-sdk` package provides `defineEntity` functions to declare your app's data model. Abyste umožnili SDK detekovat vaše entity, musíte použít `export default defineEntity({...})`. Tyto funkce validují vaši konfiguraci v době sestavení a poskytují automatické doplňování v IDE a typovou bezpečnost.
<Note>
**Uspořádání souborů je na vás.**
@@ -1,6 +1,6 @@
---
title: Frontendové komponenty
description: Vytvářejte komponenty Reactu, které se vykreslují uvnitř uživatelského rozhraní Twenty se sandboxovou izola.
description: Build React components that render inside Twenty's UI with sandboxed isolation.
icon: window-maximize
---
@@ -1,23 +1,23 @@
---
title: Rozvržení
description: Definujte pohledy, položky navigační nabídky a rozvržení stránek, abyste utvářeli, jak se vaše aplikace zobrazuje v Twenty.
description: Define views, navigation menu items, and page layouts to shape how your app appears in Twenty.
icon: table-columns
---
Prvky rozvržení řídí, jak se vaše aplikace zobrazuje v uživatelském rozhraní Twenty — co je v postranním panelu, které uložené pohledy jsou součástí aplikace a jak je uspořádána stránka s podrobnostmi záznamu.
Layout entities control how your app surfaces inside Twenty's UI — what lives in the sidebar, which saved views ship with the app, and how a record detail page is arranged.
## Pojmy rozvržení
## Layout concepts
| Pojem | Co řídí | Entita |
| ----------------------------- | ------------------------------------------------------------------------------ | -------------------------- |
| **Pohled** | Uložené nastavení seznamu pro objekt — viditelná pole, pořadí, filtry, skupiny | `defineView` |
| **Položka navigační nabídky** | Položka v levém postranním panelu, která odkazuje na pohled nebo externí URL | `defineNavigationMenuItem` |
| **Rozvržení stránky** | Karty a widgety, které tvoří stránku s podrobnostmi záznamu | `definePageLayout` |
| Concept | What it controls | Entita |
| ------------------------ | --------------------------------------------------------------------------------- | -------------------------- |
| **View** | A saved list configuration for an object — visible fields, order, filters, groups | `defineView` |
| **Navigation Menu Item** | An entry in the left sidebar that links to a view or an external URL | `defineNavigationMenuItem` |
| **Page Layout** | The tabs and widgets that make up a record's detail page | `definePageLayout` |
Pohledy, položky navigační nabídky a rozvržení stránek se na sebe odkazují pomocí `universalIdentifier`:
Views, navigation items, and page layouts reference each other by `universalIdentifier`:
* Položka **navigační nabídky** typu `VIEW` odkazuje na identifikátor `defineView`, takže odkaz v postranním panelu otevře daný uložený pohled.
* **Rozvržení stránky** typu `RECORD_PAGE` cílí na objekt a může vkládat [front components](/l/cs/developers/extend/apps/front-components) do svých karet jako widgety.
* A **navigation menu item** of type `VIEW` points at a `defineView` identifier, so the sidebar link opens that saved view.
* A **page layout** of type `RECORD_PAGE` targets an object and can embed [front components](/l/cs/developers/extend/apps/front-components) inside its tabs as widgets.
<AccordionGroup>
<Accordion title="defineView" description="Definujte uložená zobrazení pro objekty">
@@ -1,10 +1,10 @@
---
title: Logické funkce
description: Definujte serverové funkce v TypeScriptu se spouštěči pro HTTP, cron a databázové události.
description: Define server-side TypeScript functions with HTTP, cron, and database event triggers.
icon: bolt
---
Logic funkce jsou serverové funkce v TypeScriptu, které běží na platformě Twenty. Mohou být spouštěny požadavky HTTP, plány cronu nebo databázovými událostmi — a lze je také zpřístupnit jako nástroje pro agenty AI.
Logic functions are server-side TypeScript functions that run on the Twenty platform. They can be triggered by HTTP requests, cron schedules, or database events — and can also be exposed as tools for AI agents.
<AccordionGroup>
<Accordion title="defineLogicFunction" description="Definujte logické funkce a jejich spouštěče">
@@ -388,7 +388,7 @@ export default definePreInstallLogicFunction({
**Zlaté pravidlo:**
| Chcete... | Použít |
| You want to... | Použít |
| ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| Naplňte výchozí data, nakonfigurujte pracovní prostor, zaregistrujte externí prostředky | `post-install` |
| Spusťte dlouho běžící plnění nebo volání třetích stran, která by neměla blokovat odezvu instalace | `post-install` (výchozí — `shouldRunSynchronously: false`, s opakovanými pokusy workeru) |
@@ -1,6 +1,6 @@
---
title: Dovednosti a agenti
description: Definujte dovednosti a agenty AI pro svou aplikaci.
description: Define AI skills and agents for your app.
icon: robot
---
@@ -8,7 +8,7 @@ icon: robot
Skills and agents are currently in alpha. Funkce funguje, ale stále se vyvíjí.
</Warning>
Aplikace mohou definovat schopnosti AI, které fungují přímo v pracovním prostoru — znovupoužitelné pokyny pro dovednosti a agenty s vlastními systémovými prompty.
Apps can define AI capabilities that live inside the workspace — reusable skill instructions and agents with custom system prompts.
<AccordionGroup>
<Accordion title="defineSkill" description="Definujte dovednosti agenta AI">
@@ -1,23 +1,23 @@
---
title: OAuth
icon: klíč
description: Tok s autorizačním kódem s PKCE a přihlašovacími údaji klienta pro přístup server-to-server.
description: Authorization code flow with PKCE and client credentials for server-to-server access.
---
Twenty implementuje OAuth 2.0 s autorizačním kódem + PKCE pro aplikace pro uživatele a přihlašovací údaje klienta pro přístup server-to-server. Klienti se registrují dynamicky přes [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591) — žádné ruční nastavení v dashboardu.
Twenty implements OAuth 2.0 with authorization code + PKCE for user-facing apps and client credentials for server-to-server access. Clients are registered dynamically via [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591) — no manual setup in a dashboard.
## Kdy použít OAuth
## When to Use OAuth
| Scénář | Metoda ověřování |
| ---------------------------------------------------- | -------------------------------------------------------------------------------- |
| Interní skripty, automatizace | [Klíč API](/l/cs/developers/extend/api#authentication) |
| Externí aplikace jednající jménem uživatele | **OAuth — autorizační kód** |
| Server-to-server, bez uživatelského kontextu | **OAuth — přihlašovací údaje klienta** |
| Aplikace Twenty s rozšířeními uživatelského rozhraní | [Aplikace](/l/cs/developers/extend/apps/getting-started) (OAuth je řešen automaticky) |
| Scénář | Auth Method |
| --------------------------------------- | -------------------------------------------------------------------------------- |
| Internal scripts, automation | [API Key](/l/cs/developers/extend/api#authentication) |
| External app acting on behalf of a user | **OAuth — Authorization Code** |
| Server-to-server, no user context | **OAuth — Client Credentials** |
| Twenty App with UI extensions | [Apps](/l/cs/developers/extend/apps/getting-started) (OAuth is handled automatically) |
## Registrace klienta
## Register a Client
Twenty podporuje **dynamickou registraci klienta** podle [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591). Není potřeba žádné ruční nastavení — registrujte programově:
Twenty supports **dynamic client registration** per [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591). No manual setup needed — register programmatically:
```bash
POST /oauth/register
@@ -31,7 +31,7 @@ Content-Type: application/json
}
```
**Odpověď:**
**Response:**
```json
{
@@ -43,23 +43,23 @@ Content-Type: application/json
```
<Warning>
Uložte `client_secret` bezpečně — později jej nelze získat zpět.
Store the `client_secret` securely — it cannot be retrieved later.
</Warning>
## Oprávnění
| Oprávnění | Přístup |
| --------- | ----------------------------------------------------- |
| `api` | Úplný přístup pro čtení i zápis k API Core a Metadata |
| `profile` | Čtení informací o profilu ověřeného uživatele |
| Scope | Přístup |
| -------- | ---------------------------------------------------- |
| `api` | Full read/write access to the Core and Metadata APIs |
| `profil` | Read the authenticated user's profile information |
Vyžádejte oprávnění jako řetězec oddělený mezerami: `scope=api profile`
Request scopes as a space-separated string: `scope=api profile`
## Tok s autorizačním kódem
## Authorization Code Flow
Tento tok použijte, když vaše aplikace jedná jménem uživatele Twenty.
Use this flow when your app acts on behalf of a Twenty user.
### 1. Přesměrujte uživatele k autorizaci
### 1. Redirect the user to authorize
```
GET /oauth/authorize?
@@ -72,29 +72,29 @@ GET /oauth/authorize?
code_challenge_method=S256
```
| Parametr | Povinné | Popis |
| ----------------------- | ---------- | -------------------------------------------------------------- |
| `client_id` | Ano | Vaše registrované ID klienta |
| `response_type` | Ano | Musí být `code` |
| `redirect_uri` | Ano | Musí odpovídat registrované adrese URI pro přesměrování |
| `scope` | Ne | Oprávnění oddělená mezerami (výchozí je `api`) |
| `state` | Doporučeno | Náhodný řetězec k prevenci útoků CSRF |
| `code_challenge` | Doporučeno | Výzva PKCE (hash SHA-256 z verifieru, kódovaný jako base64url) |
| `code_challenge_method` | Doporučeno | Při použití PKCE musí být `S256` |
| Parametr | Povinné | Popis |
| ----------------------- | ---------- | ------------------------------------------------------------ |
| `client_id` | Ano | Your registered client ID |
| `response_type` | Ano | Must be `code` |
| `redirect_uri` | Ano | Must match a registered redirect URI |
| `scope` | Ne | Space-separated scopes (defaults to `api`) |
| `stav` | Doporučeno | Random string to prevent CSRF attacks |
| `code_challenge` | Doporučeno | PKCE challenge (SHA-256 hash of verifier, base64url-encoded) |
| `code_challenge_method` | Doporučeno | Must be `S256` when using PKCE |
Uživatel uvidí souhlasovou obrazovku a přístup schválí nebo zamítne.
The user sees a consent screen and approves or denies access.
### 2. Zpracujte callback
### 2. Handle the callback
Po autorizaci Twenty přesměruje zpět na vaše `redirect_uri`:
After authorization, Twenty redirects back to your `redirect_uri`:
```
https://myapp.com/callback?code=AUTH_CODE&state=random_state_value
```
Ověřte, že `state` odpovídá tomu, co jste poslali.
Verify that `state` matches what you sent.
### 3. Vyměňte kód za tokeny
### 3. Exchange the code for tokens
```bash
POST /oauth/token
@@ -108,7 +108,7 @@ client_secret=YOUR_CLIENT_SECRET&
code_verifier=YOUR_PKCE_VERIFIER
```
**Odpověď:**
**Response:**
```json
{
@@ -119,14 +119,14 @@ code_verifier=YOUR_PKCE_VERIFIER
}
```
### 4. Použijte přístupový token
### 4. Use the access token
```bash
GET /rest/companies
Authorization: Bearer ACCESS_TOKEN
```
### 5. Obnovte po vypršení platnosti
### 5. Refresh when expired
```bash
POST /oauth/token
@@ -138,9 +138,9 @@ client_id=YOUR_CLIENT_ID&
client_secret=YOUR_CLIENT_SECRET
```
## Tok s přihlašovacími údaji klienta
## Client Credentials Flow
Pro integrace server-to-server bez interakce uživatele:
For server-to-server integrations with no user interaction:
```bash
POST /oauth/token
@@ -152,38 +152,38 @@ client_secret=YOUR_CLIENT_SECRET&
scope=api
```
Vrácený token má přístup na úrovni pracovního prostoru, není vázán na žádného konkrétního uživatele.
The returned token has workspace-level access, not tied to any specific user.
## Zjišťování serveru
## Server Discovery
Twenty zveřejňuje svou konfiguraci OAuth na standardním koncovém bodu pro zjišťování:
Twenty publishes its OAuth configuration at a standard discovery endpoint:
```
GET /.well-known/oauth-authorization-server
```
Vrací všechny koncové body, podporované typy grantů, oprávnění a možnosti — užitečné pro tvorbu obecných klientů OAuth.
This returns all endpoints, supported grant types, scopes, and capabilities — useful for building generic OAuth clients.
## Přehled koncových bodů API
## API Endpoints Summary
| Koncový bod | Účel |
| ----------------------------------------- | ---------------------------- |
| `/.well-known/oauth-authorization-server` | Zjišťování metadat serveru |
| `/oauth/register` | Dynamic registrace klienta |
| `/oauth/authorize` | Autorizace uživatele |
| `/oauth/token` | Výměna a obnovení tokenu |
| Koncový bod | Účel |
| ----------------------------------------- | --------------------------- |
| `/.well-known/oauth-authorization-server` | Server metadata discovery |
| `/oauth/register` | Dynamic client registration |
| `/oauth/authorize` | User authorization |
| `/oauth/token` | Token exchange and refresh |
| Prostředí | Základní URL |
| ------------------- | ------------------------ |
| **Cloud** | `https://api.twenty.com` |
| **Vlastní hosting** | `https://{your-domain}` |
## OAuth vs klíče API
## OAuth vs API Keys
| | API Klíče | OAuth |
| --------------------------- | ------------------------------------- | ------------------------------------------- |
| **Nastavení** | Generovat v Nastavení | Zaregistrovat klienta, implementovat tok |
| **Uživatelský kontext** | Žádný (na úrovni pracovního prostoru) | Oprávnění konkrétního uživatele |
| **Vhodné pro** | Skripty, interní nástroje | Externí aplikace, víceuživatelské integrace |
| **Rotace tokenů** | Ruční | Automaticky prostřednictvím refresh tokenů |
| **Přístup podle oprávnění** | Plný přístup k API | Jemně odstupňovaný pomocí oprávnění |
| | API Klíče | OAuth |
| ------------------ | ----------------------- | -------------------------------------- |
| **Nastavení** | Generate in Settings | Register a client, implement flow |
| **User context** | None (workspace-level) | Specific user's permissions |
| **Vhodné pro** | Scripts, internal tools | External apps, multi-user integrations |
| **Token rotation** | Ruční | Automatic via refresh tokens |
| **Scoped access** | Full API access | Granular via scopes |
@@ -1,12 +1,12 @@
---
title: Webhooky
icon: satellite-dish
description: Dostávejte upozornění při změnách záznamů — HTTP POST na váš koncový bod při každém vytvoření, aktualizaci nebo smazání.
description: Get notified when records change — HTTP POST to your endpoint on every create, update, or delete.
---
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
Twenty odešle HTTP POST na vaši adresu URL pokaždé, když je záznam vytvořen, aktualizován nebo smazán. Všechny typy objektů jsou podporovány, včetně vlastních objektů.
Twenty sends an HTTP POST to your URL whenever a record is created, updated, or deleted. All object types are covered, including custom objects.
## Vytvořit Webhook
@@ -1,28 +1,28 @@
---
title: Vývojáři
description: Vytvářejte aplikace, používejte API, hostujte sami nebo přispívejte do kódu.
description: Build apps, use the API, self-host, or contribute to the codebase.
---
import { CardTitle } from "/snippets/card-title.mdx"
<CardGroup cols={3}>
<Card href="/l/cs/developers/extend/apps/getting-started" img="/images/user-guide/halftone/dev-apps.png">
<CardTitle>Aplikace</CardTitle>
Rozšiřte Twenty pomocí vlastních objektů, serverové logiky, UI komponent a AI agentůto vše jako balíčky TypeScriptu.
<CardTitle>Apps</CardTitle>
Extend Twenty with custom objects, server-side logic, UI components, and AI agentsall as TypeScript packages.
</Card>
<Card href="/l/cs/developers/extend/api" img="/images/user-guide/halftone/dev-api.png">
<CardTitle>API</CardTitle>
Rozhraní API REST a GraphQL, webhooky a OAuth.
REST and GraphQL APIs, webhooks, and OAuth.
</Card>
<Card href="/l/cs/developers/self-host/capabilities/docker-compose" img="/images/user-guide/halftone/dev-self-host.png">
<CardTitle>Hostujte sami</CardTitle>
Provozujte Twenty na vlastní infrastruktuře.
<CardTitle>Self-Host</CardTitle>
Run Twenty on your own infrastructure.
</Card>
<Card href="/l/cs/developers/contribute/capabilities/local-setup" img="/images/user-guide/halftone/dev-contribute.png">
<CardTitle>Přispějte</CardTitle>
Nastavte si monorepo lokálně a odesílejte PR.
<CardTitle>Contribute</CardTitle>
Set up the monorepo locally and submit PRs.
</Card>
</CardGroup>
@@ -1,6 +1,6 @@
---
title: Řešení potíží
icon: klíč
icon: wrench
---
## Řešení potíží
@@ -1,6 +1,6 @@
---
title: Rádio
icon: kruh s tečkou
icon: circle-dot
---
<Frame>
@@ -1,5 +1,5 @@
---
title: Stránky záznamů
title: Záznamové stránky},{
description: Přizpůsobte rozvržení jednotlivých stránek detailu záznamu pomocí karet a widgetů.
---
@@ -1,12 +1,12 @@
---
title: Befehle
title: Commands
icon: terminal
description: Nützliche Befehle für die Entwicklung von Twenty.
description: Useful commands for developing Twenty.
---
Befehle können vom Repository-Stammverzeichnis mit `npx nx` ausgeführt werden. Verwende `npx nx run {project}:{command}` für eine explizite Zielangabe.
Commands can be run from the repository root using `npx nx`. Use `npx nx run {project}:{command}` for explicit targeting.
## Die App starten
## Starting the App
```bash
npx nx start twenty-front # Frontend dev server (http://localhost:3001)
@@ -14,7 +14,7 @@ npx nx start twenty-server # Backend server (http://localhost:3000)
npx nx run twenty-server:worker # Background worker
```
## Datenbank
## Database
```bash
npx nx database:reset twenty-server # Reset and seed database
@@ -30,7 +30,7 @@ npx nx lint:diff-with-main twenty-server
npx nx lint twenty-front --configuration=fix # Auto-fix
```
## Typprüfung
## Type Checking
```bash
npx nx typecheck twenty-front
@@ -1,14 +1,14 @@
---
title: Styleguide
icon: paintbrush
description: Code-Konventionen und bewährte Verfahren für Beiträge zu Twenty.
description: Code conventions and best practices for contributing to Twenty.
---
## React
### Ausschließlich funktionale Komponenten
### Functional components only
Verwenden Sie immer TSX-Funktionskomponenten mit benannten Exporten.
Always use TSX functional components with named exports.
```tsx
// ❌ Bad
@@ -25,7 +25,7 @@ export function MyComponent() {
### Props
Erstellen Sie einen Typ namens `{ComponentName}Props`. Verwenden Sie Destrukturierung. Verwenden Sie `React.FC` nicht.
Create a type named `{ComponentName}Props`. Use destructuring. Don't use `React.FC`.
```tsx
type MyComponentProps = {
@@ -35,7 +35,7 @@ type MyComponentProps = {
export const MyComponent = ({ name }: MyComponentProps) => <div>Hello {name}</div>;
```
### Kein Prop-Spreading mit einer einzelnen Variablen
### No single-variable prop spreading
```tsx
// ❌ Bad
@@ -47,7 +47,7 @@ const MyComponent = ({ prop1, prop2 }: MyComponentProps) => <Other {...{ prop1,
## Zustandsverwaltung
### Jotai-Atome für globalen Zustand
### Jotai atoms for global state
```tsx
import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
@@ -59,16 +59,16 @@ export const myAtomState = createAtomState<string>({
});
```
* Bevorzugen Sie Atome gegenüber Prop-Drilling
* Verwenden Sie `useRef` nicht für den Zustandverwenden Sie `useState` oder Atome
* Verwenden Sie Atomfamilien und Selektoren für Listen
* Prefer atoms over prop drilling
* Don't use `useRef` for stateuse `useState` or atoms
* Use atom families and selectors for lists
### Vermeiden Sie unnötige Re-Renders
### Avoid unnecessary re-renders
* Lagern Sie `useEffect` und das Daten-Fetching in gleichrangige Sidecar-Komponenten aus
* Bevorzugen Sie Event-Handler (`handleClick`, `handleChange`) gegenüber `useEffect`
* Verwenden Sie `React.memo()` nicht — beheben Sie stattdessen die Grundursache
* Beschränken Sie die Nutzung von `useCallback`/`useMemo`
* Extract `useEffect` and data fetching into sibling sidecar components
* Prefer event handlers (`handleClick`, `handleChange`) over `useEffect`
* Don't use `React.memo()` — fix the root cause instead
* Limit `useCallback` / `useMemo` usage
```tsx
// ❌ Bad — useEffect in the same component causes re-renders
@@ -94,11 +94,11 @@ export const Page = () => {
## TypeScript
* **`type` statt `interface`** — flexibler, leichter zu kombinieren
* **String-Literale statt Enums** — außer für GraphQL-Codegen-Enums und interne Bibliotheks-APIs
* **Kein `any`** — striktes TypeScript wird durchgesetzt
* **Keine Type-Imports** — verwenden Sie reguläre Imports (erzwungen durch Oxlint `typescript/consistent-type-imports`)
* **Verwenden Sie [Zod](https://github.com/colinhacks/zod)** für die Laufzeitvalidierung ungetypter Objekte
* **`type` over `interface`** — more flexible, easier to compose
* **String literals over enums** — except for GraphQL codegen enums and internal library APIs
* **No `any`** — strict TypeScript enforced
* **No type imports** — use regular imports (enforced by Oxlint `typescript/consistent-type-imports`)
* **Use [Zod](https://github.com/colinhacks/zod)** for runtime validation of untyped objects
## JavaScript
@@ -112,17 +112,17 @@ onClick?.();
## Namensgebung
* **Variablen**: camelCase, aussagekräftig (`email` statt `value`, `fieldMetadata` statt `fm`)
* **Konstanten**: SCREAMING_SNAKE_CASE
* **Typen/Klassen**: PascalCase
* **Dateien/Verzeichnisse**: kebab-case (`.component.tsx`, `.service.ts`, `.entity.ts`)
* **Event-Handler**: `handleClick` (nicht `onClick` für die Handler-Funktion)
* **Komponenten-Props**: mit dem Komponentennamen präfixieren (`ButtonProps`)
* **Styled Components**: mit `Styled` präfixieren (`StyledTitle`)
* **Variables**: camelCase, descriptive (`email` not `value`, `fieldMetadata` not `fm`)
* **Constants**: SCREAMING_SNAKE_CASE
* **Types/Classes**: PascalCase
* **Files/directories**: kebab-case (`.component.tsx`, `.service.ts`, `.entity.ts`)
* **Event handlers**: `handleClick` (not `onClick` for the handler function)
* **Component props**: prefix with component name (`ButtonProps`)
* **Styled components**: prefix with `Styled` (`StyledTitle`)
## Styling
Verwenden Sie [Linaria](https://github.com/callstack/linaria) Styled Components. Verwenden Sie Theme-Werte — vermeiden Sie hartkodierte `px`, `rem` oder Farben.
Use [Linaria](https://github.com/callstack/linaria) styled components. Use theme values — avoid hardcoded `px`, `rem`, or colors.
```tsx
// ❌ Bad
@@ -142,7 +142,7 @@ const StyledButton = styled.button`
## Importe
Verwenden Sie Aliase statt relativer Pfade:
Use aliases instead of relative paths:
```tsx
// ❌ Bad
@@ -153,7 +153,7 @@ import { Foo } from '~/testing/decorators/Foo';
import { Bar } from '@/modules/bar/components/Bar';
```
## Ordnerstruktur
## Folder Structure
```
front
@@ -171,6 +171,6 @@ front
└── ui/ # Reusable UI components (display, input, feedback, ...)
```
* Module können aus anderen Modulen importieren, aber `ui/` sollte abhängigkeitsfrei bleiben
* Verwenden Sie `internal/`-Unterordner für modulinternen Code
* Komponenten unter 300 Zeilen, Services unter 500 Zeilen
* Modules can import from other modules, but `ui/` should stay dependency-free
* Use `internal/` subfolders for module-private code
* Components under 300 lines, services under 500 lines
@@ -1,35 +1,35 @@
---
title: APIs
icon: plug
description: Vom Schema Ihres Arbeitsbereichs generierte REST- und GraphQL-APIs.
description: REST and GraphQL APIs generated from your workspace schema.
---
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
## Schema-pro-Mandant-APIs
## Schema-per-tenant APIs
Es gibt keine statische API-Referenz für Twenty. Jeder Arbeitsbereich hat sein eigenes Schema — wenn Sie ein benutzerdefiniertes Objekt hinzufügen (z. B. `Invoice`), erhält es sofort REST- und GraphQL-Endpunkte, die mit den integrierten Objekten wie `Company` oder `Person` identisch sind. Die API wird aus dem Schema generiert, daher verwenden die Endpunkte Ihre Objekt- und Feldnamen direkt — keine undurchsichtigen IDs.
There is no static API reference for Twenty. Each workspace has its own schema — when you add a custom object (say `Invoice`), it immediately gets REST and GraphQL endpoints identical to built-in objects like `Company` or `Person`. The API is generated from the schema, so endpoints use your object and field names directly — no opaque IDs.
Ihre arbeitsbereichsspezifische API-Dokumentation ist nach dem Erstellen eines API-Schlüssels unter **Einstellungen → API & Webhooks** verfügbar. Sie umfasst einen interaktiven Playground, in dem Sie echte Aufrufe gegen Ihre Daten ausführen können.
Your workspace-specific API documentation is available under **Settings → API & Webhooks** after creating an API key. It includes an interactive playground where you can execute real calls against your data.
## Zwei APIs
## Two APIs
**Core-API** — `/rest/` und `/graphql/`
**Core API** — `/rest/` and `/graphql/`
CRUD für Datensätze: Personen, Unternehmen, Verkaufschancen, Ihre benutzerdefinierten Objekte. Abfragen, filtern, Beziehungen durchlaufen.
CRUD on records: People, Companies, Opportunities, your custom objects. Query, filter, traverse relations.
**Metadaten-API** — `/rest/metadata/` und `/metadata/`
**Metadata API** — `/rest/metadata/` and `/metadata/`
Schemaverwaltung: Objekte, Felder und Beziehungen erstellen/ändern/löschen. So ändern Sie Ihr Datenmodell programmatisch.
Schema management: create/modify/delete objects, fields, and relations. This is how you programmatically change your data model.
Beide sind als REST und GraphQL verfügbar. GraphQL bietet Batch-Upserts und die Möglichkeit, Beziehungen in einer einzigen Abfrage zu durchlaufen. Die zugrunde liegenden Daten sind in beiden Fällen gleich.
Both are available as REST and GraphQL. GraphQL adds batch upserts and the ability to traverse relations in a single query. Same underlying data either way.
## Basis-URLs
## Base URLs
| Umgebung | Basis-URL |
| ------------- | ------------------------- |
| Cloud | `https://api.twenty.com/` |
| Selbsthosting | `https://{your-domain}/` |
| Umgebung | Basis-URL |
| ----------- | ------------------------- |
| Cloud | `https://api.twenty.com/` |
| Self-Hosted | `https://{your-domain}/` |
## Authentifizierung
@@ -37,19 +37,19 @@ Beide sind als REST und GraphQL verfügbar. GraphQL bietet Batch-Upserts und die
Authorization: Bearer YOUR_API_KEY
```
Erstellen Sie einen API-Schlüssel unter **Settings > APIs & Webhooks > + Create key**. Kopieren Sie ihn sofort — er wird nur einmal angezeigt. Schlüssel können unter **Settings > Roles > Assignment tab** auf eine bestimmte Rolle beschränkt werden, um ihren Zugriff einzuschränken.
Create an API key in **Settings API & Webhooks + Create key**. Copy it immediately — it's shown once. Keys can be scoped to a specific role under **Settings Roles Assignment tab** to limit what they can access.
<VimeoEmbed videoId="928786722" title="API-Schlüssel erstellen" />
Für OAuth-basierten Zugriff (externe Apps, die im Namen von Nutzern handeln), siehe [OAuth](/l/de/developers/extend/oauth).
For OAuth-based access (external apps acting on behalf of users), see [OAuth](/l/de/developers/extend/oauth).
## Batch-Vorgänge
## Batch operations
Sowohl REST als auch GraphQL unterstützen Batching von bis zu 60 Datensätzen pro Anfrage — erstellen, aktualisieren oder löschen. GraphQL unterstützt außerdem Batch-Upsert (Erstellen-oder-Aktualisieren in einem Aufruf) mit Pluralnamen wie `CreateCompanies`.
Both REST and GraphQL support batching up to 60 records per request — create, update, or delete. GraphQL also supports batch upsert (create-or-update in one call) using plural names like `CreateCompanies`.
## Rate Limits
## Rate limits
| Limit | Wert |
| ----------- | ------------------------ |
| Anfragen | 100 Aufrufe pro Minute |
| Batch-Größe | 60 Datensätze pro Aufruf |
| Limit | Wert |
| ---------- | ------------------------ |
| Requests | 100 per minute |
| Batch size | 60 Datensätze pro Aufruf |
@@ -1,14 +1,14 @@
---
title: Architektur
description: Wie Twenty-Apps funktionierenSandboxing, Lebenszyklus und Bausteine.
description: How Twenty apps worksandboxing, lifecycle, and the building blocks.
icon: sitemap
---
Twenty-Apps sind TypeScript-Pakete, die Ihren Arbeitsbereich mit benutzerdefinierten Objekten, Logik, UI-Komponenten und KI-Funktionen erweitern. Sie laufen auf der Twenty-Plattform mit vollständigem Sandboxing und Berechtigungsverwaltung.
Twenty apps are TypeScript packages that extend your workspace with custom objects, logic, UI components, and AI capabilities. They run on the Twenty platform with full sandboxing and permission controls.
## Wie Apps funktionieren
## How apps work
Eine App ist eine Sammlung von **Entitäten**, die mithilfe von `defineEntity()`-Funktionen aus dem Paket `twenty-sdk` deklariert werden. Das SDK erkennt diese Deklarationen zur Build-Zeit per AST-Analyse und erzeugt ein **Manifest** — eine vollständige Beschreibung dessen, was Ihre App zu einem Arbeitsbereich hinzufügt.
An app is a collection of **entities** declared using `defineEntity()` functions from the `twenty-sdk` package. The SDK detects these declarations via AST analysis at build time and produces a **manifest** — a complete description of what your app adds to a workspace.
```
your-app/
@@ -29,32 +29,32 @@ your-app/
```
<Note>
**Die Dateiorganisation liegt bei Ihnen.** Die Entitätserkennung ist AST-basiert — das SDK findet Aufrufe von `export default defineEntity(...)`, unabhängig davon, wo sich die Datei befindet. Die obige Ordnerstruktur ist eine Konvention, keine Anforderung.
**File organization is up to you.** Entity detection is AST-based — the SDK finds `export default defineEntity(...)` calls regardless of where the file lives. The folder structure above is a convention, not a requirement.
</Note>
## Entitätstypen
## Entity types
| Entität | Zweck | Dokumentation |
| -------------------------- | ----------------------------------------------------------------- | ---------------------------------------------------------------- |
| **Anwendung** | App-Identität, Berechtigungen, Variablen | [Datenmodell](/l/de/developers/extend/apps/data-model) |
| **Rolle** | Berechtigungssätze für Objekte und Felder | [Datenmodell](/l/de/developers/extend/apps/data-model) |
| **Object** | Benutzerdefinierte Datentabellen mit Feldern | [Datenmodell](/l/de/developers/extend/apps/data-model) |
| **Feld** | Bestehende Objekte erweitern, Relationen definieren | [Datenmodell](/l/de/developers/extend/apps/data-model) |
| **Logikfunktion** | Serverseitiges TypeScript mit Triggern | [Logikfunktionen](/l/de/developers/extend/apps/logic-functions) |
| **Frontend-Komponente** | Sandboxed React-UI auf der Twenty-Seite | [Frontend-Komponenten](/l/de/developers/extend/apps/front-components) |
| **Skill** | Wiederverwendbare Anweisungen für KI-Agenten | [Skills & Agenten](/l/de/developers/extend/apps/skills-and-agents) |
| **Agent** | KI-Assistenten mit benutzerdefinierten Prompts | [Skills & Agenten](/l/de/developers/extend/apps/skills-and-agents) |
| **Ansicht** | Vorkonfigurierte Listenansichten für Datensätze | [Layout](/l/de/developers/extend/apps/layout) |
| **Navigationsmenüeintrag** | Benutzerdefinierte Seitenleisten-Einträge | [Layout](/l/de/developers/extend/apps/layout) |
| **Seitenlayout** | Benutzerdefinierte Registerkarten und Widgets auf Datensatzseiten | [Layout](/l/de/developers/extend/apps/layout) |
| Entität | Zweck | Dokumentation |
| ------------------------ | ----------------------------------------- | ------------------------------------------------------------ |
| **Application** | App identity, permissions, variables | [Data Model](/l/de/developers/extend/apps/data-model) |
| **Role** | Permission sets for objects and fields | [Data Model](/l/de/developers/extend/apps/data-model) |
| **Object** | Custom data tables with fields | [Data Model](/l/de/developers/extend/apps/data-model) |
| **Feld** | Extend existing objects, define relations | [Data Model](/l/de/developers/extend/apps/data-model) |
| **Logic Function** | Server-side TypeScript with triggers | [Logikfunktionen](/l/de/developers/extend/apps/logic-functions) |
| **Front Component** | Sandboxed React UI in Twenty's page | [Front Components](/l/de/developers/extend/apps/front-components) |
| **Skill** | Reusable AI agent instructions | [Skills & Agents](/l/de/developers/extend/apps/skills-and-agents) |
| **Agent** | AI assistants with custom prompts | [Skills & Agents](/l/de/developers/extend/apps/skills-and-agents) |
| **View** | Pre-configured record list views | [Layout](/l/de/developers/extend/apps/layout) |
| **Navigation Menu Item** | Custom sidebar entries | [Layout](/l/de/developers/extend/apps/layout) |
| **Page Layout** | Custom record page tabs and widgets | [Layout](/l/de/developers/extend/apps/layout) |
## Sandboxing
* **Logikfunktionen** laufen in isolierten Node.js-Prozessen auf dem Server. Sie greifen nur über den typisierten API-Client auf Daten zu, begrenzt durch die Rollenberechtigungen der App.
* **Frontend-Komponenten** laufen in Web Workers mit Remote DOM — von der Hauptseite isoliert, rendern aber native DOM-Elemente (keine iframes). Sie kommunizieren über eine Message-Passing-Host-API mit Twenty.
* **Berechtigungen** werden auf API-Ebene durchgesetzt. Das Laufzeit-Token (`TWENTY_APP_ACCESS_TOKEN`) wird aus der in `defineApplication()` definierten Rolle abgeleitet.
* **Logic functions** run in isolated Node.js processes on the server. They only access data through the typed API client, scoped to the app's role permissions.
* **Front components** run in Web Workers using Remote DOM — sandboxed from the main page but rendering native DOM elements (not iframes). They communicate with Twenty via a message-passing host API.
* **Permissions** are enforced at the API level. The runtime token (`TWENTY_APP_ACCESS_TOKEN`) is derived from the role defined in `defineApplication()`.
## App-Lebenszyklus
## App lifecycle
```
┌─────────────────────────────────────────────────────────┐
@@ -73,32 +73,32 @@ your-app/
└─────────────────────────────────────────────────────────┘
```
* **`yarn twenty dev`** — überwacht Ihre Quelldateien und synchronisiert Änderungen in Echtzeit mit einem verbundenen Twenty-Server. Der typisierte API-Client wird automatisch neu erzeugt, wenn sich das Schema ändert.
* **`yarn twenty build`** — kompiliert TypeScript, bündelt Logikfunktionen und Frontend-Komponenten mit esbuild und erzeugt ein Manifest.
* **Pre/Post-Install-Hooks** — optionale Logikfunktionen, die während der Installation ausgeführt werden. Details finden Sie unter [Logikfunktionen](/l/de/developers/extend/apps/logic-functions).
* **`yarn twenty dev`** — watches your source files and live-syncs changes to a connected Twenty server. The typed API client is regenerated automatically when the schema changes.
* **`yarn twenty build`** — compiles TypeScript, bundles logic functions and front components with esbuild, and produces a manifest.
* **Pre/post-install hooks** — optional logic functions that run during installation. See [Logic Functions](/l/de/developers/extend/apps/logic-functions) for details.
## Nächste Schritte
<CardGroup cols={2}>
<Card title="Datenmodell" icon="database" href="/l/de/developers/extend/apps/data-model">
Objekte, Felder, Rollen und Relationen definieren.
Define objects, fields, roles, and relations.
</Card>
<Card title="Logikfunktionen" icon="bolt" href="/l/de/developers/extend/apps/logic-functions">
Serverseitige Funktionen mit HTTP-, cron- und Ereignis-Triggern.
Server-side functions with HTTP, cron, and event triggers.
</Card>
<Card title="Frontend-Komponenten" icon="window-maximize" href="/l/de/developers/extend/apps/front-components">
Sandboxed React-Komponenten innerhalb der UI von Twenty.
Sandboxed React components inside Twenty's UI.
</Card>
<Card title="Layout" icon="table-columns" href="/l/de/developers/extend/apps/layout">
Ansichten, Navigationseinträge und Layouts von Datensatzseiten.
Views, navigation items, and record page layouts.
</Card>
<Card title="Fähigkeiten & Agenten" icon="robot" href="/l/de/developers/extend/apps/skills-and-agents">
KI-Skills und Agenten mit benutzerdefinierten Prompts.
AI skills and agents with custom prompts.
</Card>
<Card title="CLI & Tests" icon="terminal" href="/l/de/developers/extend/apps/cli-and-testing">
CLI-Befehle, Tests, Assets, Remotes und CI.
<Card title="CLI & Testing" icon="terminal" href="/l/de/developers/extend/apps/cli-and-testing">
CLI commands, testing, assets, remotes, and CI.
</Card>
<Card title="Veröffentlichen" icon="rocket" href="/l/de/developers/extend/apps/publishing">
Auf einem Server bereitstellen oder auf dem Marktplatz veröffentlichen.
Deploy to a server or publish to the marketplace.
</Card>
</CardGroup>
@@ -1,6 +1,6 @@
---
title: Frontend-Komponenten
description: Erstellen Sie React-Komponenten, die innerhalb der Twenty-UI gerendert werden und durch eine Sandbox isoliert sind.
description: Build React components that render inside Twenty's UI with sandboxed isolation.
icon: window-maximize
---
@@ -1,23 +1,23 @@
---
title: Layout
description: Definieren Sie Ansichten, Navigationsmenüeinträge und Seitenlayouts, um das Erscheinungsbild Ihrer App in Twenty zu gestalten.
description: Define views, navigation menu items, and page layouts to shape how your app appears in Twenty.
icon: table-columns
---
Layout-Entitäten steuern, wie Ihre App innerhalb der Benutzeroberfläche von Twenty dargestellt wird — was in der Seitenleiste angezeigt wird, welche gespeicherten Ansichten mit der App ausgeliefert werden und wie eine Detailseite eines Datensatzes angeordnet ist.
Layout entities control how your app surfaces inside Twenty's UI — what lives in the sidebar, which saved views ship with the app, and how a record detail page is arranged.
## Layout-Konzepte
## Layout concepts
| Konzept | Was es steuert | Entität |
| -------------------------- | ------------------------------------------------------------------------------------------------------ | -------------------------- |
| **Ansicht** | Eine gespeicherte Listen-Konfiguration für ein Objekt — sichtbare Felder, Reihenfolge, Filter, Gruppen | `defineView` |
| **Navigationsmenüeintrag** | Ein Eintrag in der linken Seitenleiste, der auf eine Ansicht oder eine externe URL verweist | `defineNavigationMenuItem` |
| **Seitenlayout** | Die Tabs und Widgets, aus denen die Detailseite eines Datensatzes besteht | `definePageLayout` |
| Concept | What it controls | Entität |
| ------------------------ | --------------------------------------------------------------------------------- | -------------------------- |
| **View** | A saved list configuration for an object — visible fields, order, filters, groups | `defineView` |
| **Navigation Menu Item** | An entry in the left sidebar that links to a view or an external URL | `defineNavigationMenuItem` |
| **Page Layout** | The tabs and widgets that make up a record's detail page | `definePageLayout` |
Ansichten, Navigationsmenüeinträge und Seitenlayouts verweisen über `universalIdentifier` aufeinander:
Views, navigation items, and page layouts reference each other by `universalIdentifier`:
* Ein **Navigationsmenüeintrag** vom Typ `VIEW` verweist auf einen `defineView`-Bezeichner, sodass der Seitenleistenlink diese gespeicherte Ansicht öffnet.
* Ein **Seitenlayout** vom Typ `RECORD_PAGE` zielt auf ein Objekt ab und kann [Frontkomponenten](/l/de/developers/extend/apps/front-components) innerhalb seiner Tabs als Widgets einbetten.
* A **navigation menu item** of type `VIEW` points at a `defineView` identifier, so the sidebar link opens that saved view.
* A **page layout** of type `RECORD_PAGE` targets an object and can embed [front components](/l/de/developers/extend/apps/front-components) inside its tabs as widgets.
<AccordionGroup>
<Accordion title="defineView" description="Gespeicherte Views für Objekte definieren">
@@ -1,6 +1,6 @@
---
title: Fähigkeiten & Agenten
description: Definieren Sie KI-Skills und Agenten für Ihre App.
description: Define AI skills and agents for your app.
icon: robot
---
@@ -8,7 +8,7 @@ icon: robot
Skills and agents are currently in alpha. Die Funktion ist funktionsfähig, entwickelt sich jedoch noch weiter.
</Warning>
Apps können KI-Funktionen definieren, die im Arbeitsbereich verfügbar sind — wiederverwendbare Skill-Anweisungen und Agenten mit benutzerdefinierten System-Prompts.
Apps can define AI capabilities that live inside the workspace — reusable skill instructions and agents with custom system prompts.
<AccordionGroup>
<Accordion title="defineSkill" description="Skills für KI-Agenten definieren">
@@ -1,23 +1,23 @@
---
title: OAuth
icon: schlüssel
description: Autorisierungscode-Flow mit PKCE und Client-Anmeldedaten für Server-zu-Server-Zugriff.
description: Authorization code flow with PKCE and client credentials for server-to-server access.
---
Twenty implementiert OAuth 2.0 mit Autorisierungscode + PKCE für benutzerorientierte Apps und Client-Anmeldedaten für Server-zu-Server-Zugriff. Clients werden dynamisch über [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591) registriert — keine manuelle Einrichtung in einem Dashboard.
Twenty implements OAuth 2.0 with authorization code + PKCE for user-facing apps and client credentials for server-to-server access. Clients are registered dynamically via [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591) — no manual setup in a dashboard.
## Wann Sie OAuth verwenden sollten
## When to Use OAuth
| Szenario | Authentifizierungsmethode |
| ------------------------------------------------- | ----------------------------------------------------------------------------------- |
| Interne Skripte, Automatisierung | [API-Schlüssel](/l/de/developers/extend/api#authentication) |
| Externe App, die im Namen eines Benutzers handelt | **OAuth — Autorisierungscode** |
| Server-zu-Server, kein Benutzerkontext | **OAuth — Client-Anmeldedaten** |
| Twenty-App mit UI-Erweiterungen | [Apps](/l/de/developers/extend/apps/getting-started) (OAuth wird automatisch gehandhabt) |
| Szenario | Auth Method |
| --------------------------------------- | -------------------------------------------------------------------------------- |
| Internal scripts, automation | [API Key](/l/de/developers/extend/api#authentication) |
| External app acting on behalf of a user | **OAuth — Authorization Code** |
| Server-to-server, no user context | **OAuth — Client Credentials** |
| Twenty App with UI extensions | [Apps](/l/de/developers/extend/apps/getting-started) (OAuth is handled automatically) |
## Einen Client registrieren
## Register a Client
Twenty unterstützt die **dynamische Client-Registrierung** gemäß [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591). Keine manuelle Einrichtung erforderlich — registrieren Sie den Client programmgesteuert:
Twenty supports **dynamic client registration** per [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591). No manual setup needed — register programmatically:
```bash
POST /oauth/register
@@ -31,7 +31,7 @@ Content-Type: application/json
}
```
**Antwort:**
**Response:**
```json
{
@@ -43,23 +43,23 @@ Content-Type: application/json
```
<Warning>
Speichern Sie das `client_secret` sicher — es kann später nicht mehr abgerufen werden.
Store the `client_secret` securely — it cannot be retrieved later.
</Warning>
## Geltungsbereiche
| Geltungsbereich | Zugriff |
| --------------- | ------------------------------------------------------------ |
| `api` | Voller Lese-/Schreibzugriff auf die Core- und Metadaten-APIs |
| `profile` | Profilinformationen des authentifizierten Benutzers lesen |
| Scope | Zugriff |
| -------- | ---------------------------------------------------- |
| `api` | Full read/write access to the Core and Metadata APIs |
| `profil` | Read the authenticated user's profile information |
Fordern Sie Geltungsbereiche als durch Leerzeichen getrennte Zeichenfolge an: `scope=api profile`
Request scopes as a space-separated string: `scope=api profile`
## Autorisierungscode-Flow
## Authorization Code Flow
Verwenden Sie diesen Flow, wenn Ihre App im Namen eines Twenty-Benutzers handelt.
Use this flow when your app acts on behalf of a Twenty user.
### 1. Leiten Sie den Benutzer zur Autorisierung weiter
### 1. Redirect the user to authorize
```
GET /oauth/authorize?
@@ -72,29 +72,29 @@ GET /oauth/authorize?
code_challenge_method=S256
```
| Parameter | Erforderlich | Beschreibung |
| ----------------------- | ------------ | -------------------------------------------------------------- |
| `client_id` | Ja | Ihre registrierte Client-ID |
| `response_type` | Ja | Muss `code` sein |
| `redirect_uri` | Ja | Muss einer registrierten Redirect-URI entsprechen |
| `scope` | Nein | Durch Leerzeichen getrennte Geltungsbereiche (Standard: `api`) |
| `state` | Empfohlen | Zufällige Zeichenfolge zur Verhinderung von CSRF-Angriffen |
| `code_challenge` | Empfohlen | PKCE-Challenge (SHA-256-Hash des Verifiers, base64url-codiert) |
| `code_challenge_method` | Empfohlen | Muss bei Verwendung von PKCE `S256` sein |
| Parameter | Erforderlich | Beschreibung |
| ----------------------- | ------------ | ------------------------------------------------------------ |
| `client_id` | Ja | Your registered client ID |
| `response_type` | Ja | Must be `code` |
| `redirect_uri` | Ja | Must match a registered redirect URI |
| `scope` | Nein | Space-separated scopes (defaults to `api`) |
| `zustand` | Empfohlen | Random string to prevent CSRF attacks |
| `code_challenge` | Empfohlen | PKCE challenge (SHA-256 hash of verifier, base64url-encoded) |
| `code_challenge_method` | Empfohlen | Must be `S256` when using PKCE |
Der Benutzer sieht einen Zustimmungsbildschirm und stimmt dem Zugriff zu oder lehnt ihn ab.
The user sees a consent screen and approves or denies access.
### 2. Den Callback verarbeiten
### 2. Handle the callback
Nach der Autorisierung leitet Twenty zurück zu Ihrer `redirect_uri` weiter:
After authorization, Twenty redirects back to your `redirect_uri`:
```
https://myapp.com/callback?code=AUTH_CODE&state=random_state_value
```
Überprüfen Sie, dass `state` mit dem übereinstimmt, was Sie gesendet haben.
Verify that `state` matches what you sent.
### 3. Tauschen Sie den Code gegen Token aus
### 3. Exchange the code for tokens
```bash
POST /oauth/token
@@ -108,7 +108,7 @@ client_secret=YOUR_CLIENT_SECRET&
code_verifier=YOUR_PKCE_VERIFIER
```
**Antwort:**
**Response:**
```json
{
@@ -119,14 +119,14 @@ code_verifier=YOUR_PKCE_VERIFIER
}
```
### 4. Verwenden Sie das Zugriffstoken
### 4. Use the access token
```bash
GET /rest/companies
Authorization: Bearer ACCESS_TOKEN
```
### 5. Aktualisieren, wenn abgelaufen
### 5. Refresh when expired
```bash
POST /oauth/token
@@ -138,9 +138,9 @@ client_id=YOUR_CLIENT_ID&
client_secret=YOUR_CLIENT_SECRET
```
## Client-Anmeldedaten-Flow
## Client Credentials Flow
Für Server-zu-Server-Integrationen ohne Benutzerinteraktion:
For server-to-server integrations with no user interaction:
```bash
POST /oauth/token
@@ -152,38 +152,38 @@ client_secret=YOUR_CLIENT_SECRET&
scope=api
```
Das zurückgegebene Token hat Zugriff auf Arbeitsbereichsebene und ist an keinen bestimmten Benutzer gebunden.
The returned token has workspace-level access, not tied to any specific user.
## Server-Ermittlung
## Server Discovery
Twenty veröffentlicht seine OAuth-Konfiguration an einem standardisierten Discovery-Endpunkt:
Twenty publishes its OAuth configuration at a standard discovery endpoint:
```
GET /.well-known/oauth-authorization-server
```
Dies liefert alle Endpunkte, unterstützte Grant-Typen, Geltungsbereiche und Fähigkeiten — nützlich, um generische OAuth-Clients zu erstellen.
This returns all endpoints, supported grant types, scopes, and capabilities — useful for building generic OAuth clients.
## Zusammenfassung der API-Endpunkte
## API Endpoints Summary
| Endpunkt | Zweck |
| ----------------------------------------- | ----------------------------------- |
| `/.well-known/oauth-authorization-server` | Ermittlung von Servermetadaten |
| `/oauth/register` | Dynamische Client-Registrierung |
| `/oauth/authorize` | Benutzerautorisierung |
| `/oauth/token` | Token-Austausch und -Aktualisierung |
| Endpunkt | Zweck |
| ----------------------------------------- | --------------------------- |
| `/.well-known/oauth-authorization-server` | Server metadata discovery |
| `/oauth/register` | Dynamic client registration |
| `/oauth/authorize` | User authorization |
| `/oauth/token` | Token exchange and refresh |
| Umgebung | Basis-URL |
| ----------------- | ------------------------ |
| **Cloud** | `https://api.twenty.com` |
| **Selbsthosting** | `https://{your-domain}` |
## OAuth vs. API-Schlüssel
## OAuth vs API Keys
| | API-Schlüssel | OAuth |
| ------------------------------------- | ------------------------------- | ----------------------------------------- |
| **Einrichtung** | In den Einstellungen generieren | Client registrieren, Flow implementieren |
| **Benutzerkontext** | Keiner (Arbeitsbereichsebene) | Berechtigungen eines bestimmten Benutzers |
| **Am besten geeignet für** | Skripte, interne Tools | Externe Apps, Multi-User-Integrationen |
| **Token-Rotation** | Manuell | Automatisch über Refresh-Tokens |
| **Geltungsbereichsbasierter Zugriff** | Voller API-Zugriff | Granular über Geltungsbereiche |
| | API-Schlüssel | OAuth |
| -------------------------- | ----------------------- | -------------------------------------- |
| **Einrichtung** | Generate in Settings | Register a client, implement flow |
| **User context** | None (workspace-level) | Specific user's permissions |
| **Am besten geeignet für** | Scripts, internal tools | External apps, multi-user integrations |
| **Token rotation** | Manuell | Automatic via refresh tokens |
| **Scoped access** | Full API access | Granular via scopes |
@@ -1,12 +1,12 @@
---
title: Webhooks
icon: satellite-dish
description: Lassen Sie sich benachrichtigen, wenn sich Datensätze ändern — HTTP POST an Ihren Endpunkt bei jeder Erstellung, Aktualisierung oder Löschung.
description: Get notified when records change — HTTP POST to your endpoint on every create, update, or delete.
---
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
Twenty sendet einen HTTP POST an Ihre URL, wenn ein Datensatz erstellt, aktualisiert oder gelöscht wird. Alle Objekttypen sind abgedeckt, einschließlich benutzerdefinierter Objekte.
Twenty sends an HTTP POST to your URL whenever a record is created, updated, or deleted. All object types are covered, including custom objects.
## Webhook erstellen
@@ -1,6 +1,6 @@
---
title: Entwickler
description: Entwickeln Sie Apps, nutzen Sie die API, hosten Sie selbst oder tragen Sie zur Codebasis bei.
description: Build apps, use the API, self-host, or contribute to the codebase.
---
import { CardTitle } from "/snippets/card-title.mdx"
@@ -8,21 +8,21 @@ import { CardTitle } from "/snippets/card-title.mdx"
<CardGroup cols={3}>
<Card href="/l/de/developers/extend/apps/getting-started" img="/images/user-guide/halftone/dev-apps.png">
<CardTitle>Apps</CardTitle>
Erweitern Sie Twenty mit benutzerdefinierten Objekten, serverseitiger Logik, UI-Komponenten und KI-Agenten — alles als TypeScript-Pakete.
Extend Twenty with custom objects, server-side logic, UI components, and AI agents — all as TypeScript packages.
</Card>
<Card href="/l/de/developers/extend/api" img="/images/user-guide/halftone/dev-api.png">
<CardTitle>API</CardTitle>
REST- und GraphQL-APIs, Webhooks und OAuth.
REST and GraphQL APIs, webhooks, and OAuth.
</Card>
<Card href="/l/de/developers/self-host/capabilities/docker-compose" img="/images/user-guide/halftone/dev-self-host.png">
<CardTitle>Selbst hosten</CardTitle>
Betreiben Sie Twenty auf Ihrer eigenen Infrastruktur.
<CardTitle>Self-Host</CardTitle>
Run Twenty on your own infrastructure.
</Card>
<Card href="/l/de/developers/contribute/capabilities/local-setup" img="/images/user-guide/halftone/dev-contribute.png">
<CardTitle>Mitwirken</CardTitle>
Richten Sie das Monorepo lokal ein und reichen Sie PRs ein.
<CardTitle>Contribute</CardTitle>
Set up the monorepo locally and submit PRs.
</Card>
</CardGroup>
@@ -1,6 +1,6 @@
---
title: Fehlerbehebung
icon: Schraubenschlüssel
icon: wrench
---
## Fehlerbehebung
@@ -1,6 +1,6 @@
---
title: App-Tooltip
icon: Nachricht
icon: nachricht
---
<Frame>
@@ -38,15 +38,15 @@ export const MyComponent = () => {
<Tab title="&#x22;Eigenschaften&#x22;">
| Props | Typ | Beschreibung |
| ------------ | ------------------------- | ------------------------------------------------------------------------------------------------------ |
| linkToEntity | Zeichenkette | Der Link zur Entität |
| entityId | Zeichenkette | Der eindeutige Identifikator für die Entität |
| name | string | Der Name der Entität |
| pictureUrl | Zeichenkette | s Bild", |
| avatarType | Avatar-Typ | Der Typ des Avatars, den Sie anzeigen möchten. Hat zwei Optionen: `abgerundet` und `quadratisch` |
| Variante | `EntityChipVariante` enum | Variante des Entity-Chips, die Sie anzeigen möchten. Hat zwei Optionen: `regelmäßig` und `transparent` |
| LeftIcon | Icon-Komponente | Eine React-Komponente, die ein Symbol darstellt. Wird auf der linken Seite des Chips angezeigt |
| "Eigenschaften" | Typ | Beschreibung |
| --------------- | ------------------------- | ------------------------------------------------------------------------------------------------------ |
| linkToEntity | Zeichenkette | Der Link zur Entität |
| entityId | Zeichenkette | Der eindeutige Identifikator für die Entität |
| name | string | Der Name der Entität |
| pictureUrl | Zeichenkette | s Bild", |
| avatarType | Avatar-Typ | Der Typ des Avatars, den Sie anzeigen möchten. Hat zwei Optionen: `abgerundet` und `quadratisch` |
| Variante | `EntityChipVariante` enum | Variante des Entity-Chips, die Sie anzeigen möchten. Hat zwei Optionen: `regelmäßig` und `transparent` |
| LeftIcon | Icon-Komponente | Eine React-Komponente, die ein Symbol darstellt. Wird auf der linken Seite des Chips angezeigt |
@@ -137,15 +137,15 @@ export const MyComponent = () => {
<Tab title="Eigenschaften">
| Props | Typ | Beschreibung |
| ------------ | ------------------------- | ------------------------------------------------------------------------------------------------------ |
| linkToEntity | string | Der Link zur Entität |
| entityId | string | Der eindeutige Identifikator für die Entität |
| name | string | Der Name der Entität |
| pictureUrl | Zeichenfolge | s Bild", |
| avatarType | Avatar-Typ | Der Typ des Avatars, den Sie anzeigen möchten. Hat zwei Optionen: `abgerundet` und `quadratisch` |
| Variante | `EntityChipVariante` enum | Variante des Entity-Chips, die Sie anzeigen möchten. Hat zwei Optionen: `regelmäßig` und `transparent` |
| LeftIcon | Icon-Komponente | Eine React-Komponente, die ein Symbol darstellt. Wird auf der linken Seite des Chips angezeigt |
| Eigenschaften | Typ | Beschreibung |
| ------------- | ------------------------- | ------------------------------------------------------------------------------------------------------ |
| linkToEntity | string | Der Link zur Entität |
| entityId | string | Der eindeutige Identifikator für die Entität |
| name | string | Der Name der Entität |
| pictureUrl | Zeichenfolge | s Bild", |
| avatarType | Avatar-Typ | Der Typ des Avatars, den Sie anzeigen möchten. Hat zwei Optionen: `abgerundet` und `quadratisch` |
| Variante | `EntityChipVariante` enum | Variante des Entity-Chips, die Sie anzeigen möchten. Hat zwei Optionen: `regelmäßig` und `transparent` |
| LeftIcon | Icon-Komponente | Eine React-Komponente, die ein Symbol darstellt. Wird auf der linken Seite des Chips angezeigt |
@@ -1,6 +1,6 @@
---
title: '"Tag"'
icon: tag
icon: '"tag"'
---
Komponente zur visuellen Kategorisierung oder Kennzeichnung von Inhalten.
@@ -26,9 +26,9 @@ export const MyComponent = () => {
<Tab title="&#x22;Eigenschaften&#x22;">
| Props | Typ | Beschreibung |
| ------ | ----------------- | ------------------------------------------- |
| Editor | `BlockNoteEditor` | Instanz oder Konfiguration des Blockeditors |
| "Eigenschaften" | Typ | Beschreibung |
| --------------- | ----------------- | ------------------------------------------- |
| Editor | `BlockNoteEditor` | Instanz oder Konfiguration des Blockeditors |
@@ -40,7 +40,7 @@ export const MyComponent = () => {
<Tab title="&#x22;Eigenschaften&#x22;">
| Props | Typ | Beschreibung |
| "Eigenschaften" | Typ | Beschreibung |
| --------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------- |
| deaktiviert | boolesch | Deaktiviert die Symbolauswahl, wenn auf `true` gesetzt ist. |
| beiÄnderung | function | Die Rückruffunktion wird ausgelöst, wenn der Benutzer ein Symbol auswählt. Es erhält ein Objekt mit `iconKey` und `Icon` Eigenschaften |
@@ -23,15 +23,15 @@ export const MyComponent = () => {
<Tab title="&#x22;Eigenschaften&#x22;">
| Props | Typ | Beschreibung |
| ------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------ |
| bild | Zeichenkette | Die Bildquellen-URL |
| onUpload | Funktion | Die Funktion, die aufgerufen wird, wenn ein Benutzer ein neues Bild hochlädt. Es erhält das `Datei` Objekt als Parameter |
| onRemove | Funktion | Die Funktion wird aufgerufen, wenn der Benutzer auf die Entfernen-Schaltfläche klickt. |
| onAbort | Funktion | Die Funktion wird aufgerufen, wenn der Benutzer während des Bilduploads auf die Abbrechen-Schaltfläche klickt. |
| isUploading | boolesch | Gibt an, ob ein Bild derzeit hochgeladen wird |
| Fehlermeldung | Zeichenkette | Eine optionale Fehlermeldung, die unterhalb des Bildeingangs angezeigt wird. |
| deaktiviert | boolesch | Wenn `true`, ist die gesamte Eingabe deaktiviert und die Schaltflächen sind nicht anklickbar |
| "Eigenschaften" | Typ | Beschreibung |
| --------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------ |
| bild | Zeichenkette | Die Bildquellen-URL |
| onUpload | Funktion | Die Funktion, die aufgerufen wird, wenn ein Benutzer ein neues Bild hochlädt. Es erhält das `Datei` Objekt als Parameter |
| onRemove | Funktion | Die Funktion wird aufgerufen, wenn der Benutzer auf die Entfernen-Schaltfläche klickt. |
| onAbort | Funktion | Die Funktion wird aufgerufen, wenn der Benutzer während des Bilduploads auf die Abbrechen-Schaltfläche klickt. |
| isUploading | boolesch | Gibt an, ob ein Bild derzeit hochgeladen wird |
| Fehlermeldung | Zeichenkette | Eine optionale Fehlermeldung, die unterhalb des Bildeingangs angezeigt wird. |
| deaktiviert | boolesch | Wenn `true`, ist die gesamte Eingabe deaktiviert und die Schaltflächen sind nicht anklickbar |
@@ -38,14 +38,14 @@ export const MyComponent = () => {
<Tab title="&#x22;Eigenschaften&#x22;">
| Props | Typ | Beschreibung |
| ------------ | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Klassenname | Zeichenkette | Optionale CSS-Klasse für zusätzliche Stilgebung |
| deaktiviert | boolesch | Wenn auf `true` gesetzt, wird die Benutzerinteraktion mit der Komponente deaktiviert |
| Beschriftung | string | Die Beschriftung, um den Zweck der `Select`-Komponente zu beschreiben |
| onChange | Funktion | Die Funktion, die aufgerufen wird, wenn sich die ausgewählten Werte ändern |
| optionen | Array | Repräsentiert die verfügbaren Optionen für die `Select`-Komponente. Es ist ein Array von Objekten, bei dem jedes Objekt ein `value` (die eindeutige Kennung), `label` (die eindeutige Kennung) und ein optionales `Icon` hat |
| wert | Zeichenkette | Repräsentiert den aktuell ausgewählten Wert. Es sollte mit einem der `value`-Eigenschaften im `options`-Array übereinstimmen |
| "Eigenschaften" | Typ | Beschreibung |
| --------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Klassenname | Zeichenkette | Optionale CSS-Klasse für zusätzliche Stilgebung |
| deaktiviert | boolesch | Wenn auf `true` gesetzt, wird die Benutzerinteraktion mit der Komponente deaktiviert |
| Beschriftung | string | Die Beschriftung, um den Zweck der `Select`-Komponente zu beschreiben |
| onChange | Funktion | Die Funktion, die aufgerufen wird, wenn sich die ausgewählten Werte ändern |
| optionen | Array | Repräsentiert die verfügbaren Optionen für die `Select`-Komponente. Es ist ein Array von Objekten, bei dem jedes Objekt ein `value` (die eindeutige Kennung), `label` (die eindeutige Kennung) und ein optionales `Icon` hat |
| wert | Zeichenkette | Repräsentiert den aktuell ausgewählten Wert. Es sollte mit einem der `value`-Eigenschaften im `options`-Array übereinstimmen |
@@ -48,7 +48,7 @@ export const MyComponent = () => {
<Tab title="Eigenschaften">
| Props | Typ | Beschreibung |
| Eigenschaften | Typ | Beschreibung |
| -------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| className | Zeichenkette | Optionaler Name für zusätzliche Stile |
| Beschriftung | Zeichenkette | Stellt die Beschriftung für das Eingabefeld dar |
@@ -100,15 +100,15 @@ export const MyComponent = () => {
<Tab title="Eigenschaften">
| Props | Typ | Beschreibung |
| ----------- | ------------ | ---------------------------------------------------------------------------------------- |
| onValidate | Funktion | Die Callback-Funktion, die Sie auslösen möchten, wenn der Benutzer die Eingabe validiert |
| minRows | nummer | Die minimale Anzahl von Zeilen für den Textbereich |
| Platzhalter | Zeichenkette | Der Platzhaltertext, den Sie anzeigen möchten, wenn der Textbereich leer ist |
| onFocus | Funktion | Die Callback-Funktion, die Sie auslösen möchten, wenn der Textbereich den Fokus erlangt |
| Variante | Zeichenkette | Die Variante der Eingabe. Optionen umfassen: `Standard`, `Ikone` und `Schaltfläche` |
| buttonTitle | Zeichenkette | Der Titel für die Schaltfläche (nur für die Schaltflächenvariante anwendbar) |
| wert | Zeichenkette | Der Initialwert für den Textbereich |
| Eigenschaften | Typ | Beschreibung |
| ------------- | ------------ | ---------------------------------------------------------------------------------------- |
| onValidate | Funktion | Die Callback-Funktion, die Sie auslösen möchten, wenn der Benutzer die Eingabe validiert |
| minRows | nummer | Die minimale Anzahl von Zeilen für den Textbereich |
| Platzhalter | Zeichenkette | Der Platzhaltertext, den Sie anzeigen möchten, wenn der Textbereich leer ist |
| onFocus | Funktion | Die Callback-Funktion, die Sie auslösen möchten, wenn der Textbereich den Fokus erlangt |
| Variante | Zeichenkette | Die Variante der Eingabe. Optionen umfassen: `Standard`, `Ikone` und `Schaltfläche` |
| buttonTitle | Zeichenkette | Der Titel für die Schaltfläche (nur für die Schaltflächenvariante anwendbar) |
| wert | Zeichenkette | Der Initialwert für den Textbereich |
@@ -146,13 +146,13 @@ export const MyComponent = () => {
<Tab title="Eigenschaften">
| Props | Typ | Beschreibung |
| ----------- | ------------ | ---------------------------------------------------------------------------- |
| deaktiviert | boolesch | Gibt an, ob der Textbereich deaktiviert ist |
| minRows | nummer | Minimale Anzahl sichtbarer Zeilen für den Textbereich. |
| onChange | Funktion | Rückruffunktion wird ausgelöst, wenn sich der Inhalt des Textbereichs ändert |
| Platzhalter | Zeichenkette | Platzhaltertext, der angezeigt wird, wenn der Textbereich leer ist |
| wert | Zeichenkette | Der aktuelle Wert des Textbereichs |
| Eigenschaften | Typ | Beschreibung |
| ------------- | ------------ | ---------------------------------------------------------------------------- |
| deaktiviert | boolesch | Gibt an, ob der Textbereich deaktiviert ist |
| minRows | nummer | Minimale Anzahl sichtbarer Zeilen für den Textbereich. |
| onChange | Funktion | Rückruffunktion wird ausgelöst, wenn sich der Inhalt des Textbereichs ändert |
| Platzhalter | Zeichenkette | Platzhaltertext, der angezeigt wird, wenn der Textbereich leer ist |
| wert | Zeichenkette | Der aktuelle Wert des Textbereichs |
@@ -35,10 +35,10 @@ export const MyComponent = () => {
<Tab title="&#x22;Eigenschaften&#x22;">
| Props | Typ | Beschreibung |
| ----------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Klassenname | Zeichenkette | Optionaler Klassenname für zusätzliche Stilierung |
| Links | array | Ein Array von Objekten, die jeweils einen Breadcrumb-Link darstellen. Jedes Objekt hat eine `children`-Eigenschaft (den textlichen Inhalt des Links) und eine optionale `href`-Eigenschaft (die URL, zu der navigiert wird, wenn der Link angeklickt wird) |
| "Eigenschaften" | Typ | Beschreibung |
| --------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Klassenname | Zeichenkette | Optionaler Klassenname für zusätzliche Stilierung |
| Links | array | Ein Array von Objekten, die jeweils einen Breadcrumb-Link darstellen. Jedes Objekt hat eine `children`-Eigenschaft (den textlichen Inhalt des Links) und eine optionale `href`-Eigenschaft (die URL, zu der navigiert wird, wenn der Link angeklickt wird) |
@@ -30,9 +30,9 @@ export const MyComponent = () => {
<Tab title="&#x22;Eigenschaften&#x22;">
| Props | Typ | Beschreibung |
| -------------- | ------ | --------------------------------------------------------------------------------------------------------- |
| aktiverSchritt | nummer | Der Index des derzeit aktiven Schritts. Dies bestimmt, welcher Schritt visuell hervorgehoben werden soll. |
| "Eigenschaften" | Typ | Beschreibung |
| --------------- | ------ | --------------------------------------------------------------------------------------------------------- |
| aktiverSchritt | nummer | Der Index des derzeit aktiven Schritts. Dies bestimmt, welcher Schritt visuell hervorgehoben werden soll. |
@@ -3,7 +3,7 @@ title: Navigation
description: Passen Sie die linke Seitenleiste an die Arbeitsweise Ihres Teams an.
---
Die linke Seitenleiste ist Ihre wichtigste Möglichkeit, in Twenty zu navigieren. Sie ist vollständig anpassbar — Sie können sie neu organisieren, damit sie zu Ihrem Workflow passt, ohne eine Einstellungsseite zu öffnen.
Die linke Seitenleiste ist Ihre wichtigste Möglichkeit, sich in Twenty zu bewegen. Sie ist vollständig anpassbar — Sie können sie neu organisieren, damit sie zu Ihrem Workflow passt, ohne eine Einstellungsseite zu öffnen.
## Einträge neu anordnen
@@ -21,7 +21,7 @@ Objekte, die Sie nicht verwenden, können aus der Seitenleiste ausgeblendet werd
## Favoriten
Heften Sie Ansichten, Datensätze oder Suchvorgänge im Bereich Favoriten oben in der Seitenleiste an, um mit einem Klick darauf zuzugreifen. Favoriten sind persönlich — jeder Benutzer verwaltet seine eigenen.
Heften Sie Ansichten, Datensätze oder Suchvorgänge im Bereich Favoriten oben in der Seitenleiste an, um mit einem Klick darauf zuzugreifen. Favoriten sind persönlich — jeder Nutzer verwaltet seine eigenen.
## Benutzerdefinierte Links
@@ -1,6 +1,6 @@
---
title: Comandi Backend
icon: terminale
icon: terminal
---
## Comandi utili
@@ -1,12 +1,12 @@
---
title: Comandi
icon: terminale
description: Comandi utili per sviluppare Twenty.
title: Commands
icon: terminal
description: Useful commands for developing Twenty.
---
I comandi possono essere eseguiti dalla radice del repository usando `npx nx`. Usa `npx nx run {project}:{command}` per specificare esplicitamente il target.
Commands can be run from the repository root using `npx nx`. Use `npx nx run {project}:{command}` for explicit targeting.
## Avviare l'app
## Starting the App
```bash
npx nx start twenty-front # Frontend dev server (http://localhost:3001)
@@ -30,7 +30,7 @@ npx nx lint:diff-with-main twenty-server
npx nx lint twenty-front --configuration=fix # Auto-fix
```
## Controllo dei tipi
## Type Checking
```bash
npx nx typecheck twenty-front
@@ -68,7 +68,7 @@ npx nx run twenty-front:lingui:extract # Extract strings
npx nx run twenty-front:lingui:compile # Compile translations
```
## Compilazione
## Build
```bash
npx nx build twenty-shared # Must be built first
@@ -140,7 +140,7 @@ const StyledButton = styled.button`
`;
```
## Importazioni
## Importa
Use aliases instead of relative paths:
@@ -1,14 +1,14 @@
---
title: Architettura
description: Come funzionano le app di Twenty — sandboxing, ciclo di vita e componenti di base.
description: How Twenty apps work — sandboxing, lifecycle, and the building blocks.
icon: sitemap
---
Le app di Twenty sono pacchetti TypeScript che estendono il tuo spazio di lavoro con oggetti personalizzati, logica, componenti dell'interfaccia utente (UI) e funzionalità di IA. Vengono eseguite sulla piattaforma Twenty con sandboxing completo e controlli delle autorizzazioni.
Twenty apps are TypeScript packages that extend your workspace with custom objects, logic, UI components, and AI capabilities. They run on the Twenty platform with full sandboxing and permission controls.
## Come funzionano le app
## How apps work
Un'app è una raccolta di **entità** dichiarate utilizzando le funzioni `defineEntity()` del pacchetto `twenty-sdk`. L'SDK rileva queste dichiarazioni tramite analisi dell'AST in fase di build e produce un **manifest** — una descrizione completa di ciò che la tua app aggiunge a uno spazio di lavoro.
An app is a collection of **entities** declared using `defineEntity()` functions from the `twenty-sdk` package. The SDK detects these declarations via AST analysis at build time and produces a **manifest** — a complete description of what your app adds to a workspace.
```
your-app/
@@ -29,32 +29,32 @@ your-app/
```
<Note>
**L'organizzazione dei file dipende da te.** Il rilevamento delle entità è basato sull'AST — l'SDK trova le chiamate a `export default defineEntity(...)` indipendentemente da dove si trova il file. La struttura delle cartelle sopra è una convenzione, non un requisito.
**File organization is up to you.** Entity detection is AST-based — the SDK finds `export default defineEntity(...)` calls regardless of where the file lives. The folder structure above is a convention, not a requirement.
</Note>
## Tipi di entità
## Entity types
| Entità | Scopo | Documentazione |
| -------------------------------- | ------------------------------------------------------ | ---------------------------------------------------------------- |
| **Applicazione** | Identità dell'app, autorizzazioni, variabili | [Modello dati](/l/it/developers/extend/apps/data-model) |
| **Ruolo** | Set di autorizzazioni per oggetti e campi | [Modello dati](/l/it/developers/extend/apps/data-model) |
| **Oggetto** | Tabelle di dati personalizzate con campi | [Modello dati](/l/it/developers/extend/apps/data-model) |
| **Campo** | Estendi gli oggetti esistenti, definisci le relazioni | [Modello dati](/l/it/developers/extend/apps/data-model) |
| **Funzione logica** | TypeScript lato server con trigger | [Funzioni logiche](/l/it/developers/extend/apps/logic-functions) |
| **Componente front-end** | UI React in sandbox nella pagina di Twenty | [Componenti front-end](/l/it/developers/extend/apps/front-components) |
| **Abilità** | Istruzioni riutilizzabili per agenti IA | [Abilità e agenti](/l/it/developers/extend/apps/skills-and-agents) |
| **Agente** | Assistenti IA con prompt personalizzati | [Abilità e agenti](/l/it/developers/extend/apps/skills-and-agents) |
| **Vista** | Viste di elenco dei record preconfigurate | [Layout](/l/it/developers/extend/apps/layout) |
| **Voce del menu di navigazione** | Voci della barra laterale personalizzate | [Layout](/l/it/developers/extend/apps/layout) |
| **Layout di pagina** | Schede e widget personalizzati nelle pagine dei record | [Layout](/l/it/developers/extend/apps/layout) |
| Entità | Scopo | Documentazione |
| ------------------------ | ----------------------------------------- | ------------------------------------------------------------ |
| **Application** | App identity, permissions, variables | [Data Model](/l/it/developers/extend/apps/data-model) |
| **Role** | Permission sets for objects and fields | [Data Model](/l/it/developers/extend/apps/data-model) |
| **Oggetto** | Custom data tables with fields | [Data Model](/l/it/developers/extend/apps/data-model) |
| **Campo** | Extend existing objects, define relations | [Data Model](/l/it/developers/extend/apps/data-model) |
| **Logic Function** | Server-side TypeScript with triggers | [Funzioni logiche](/l/it/developers/extend/apps/logic-functions) |
| **Front Component** | Sandboxed React UI in Twenty's page | [Front Components](/l/it/developers/extend/apps/front-components) |
| **Skill** | Reusable AI agent instructions | [Skills & Agents](/l/it/developers/extend/apps/skills-and-agents) |
| **Agent** | AI assistants with custom prompts | [Skills & Agents](/l/it/developers/extend/apps/skills-and-agents) |
| **View** | Pre-configured record list views | [Layout](/l/it/developers/extend/apps/layout) |
| **Navigation Menu Item** | Custom sidebar entries | [Layout](/l/it/developers/extend/apps/layout) |
| **Page Layout** | Custom record page tabs and widgets | [Layout](/l/it/developers/extend/apps/layout) |
## Sandboxing
* **Le funzioni logiche** vengono eseguite in processi Node.js isolati sul server. Accedono ai dati solo tramite il client API tipizzato, con ambito limitato alle autorizzazioni del ruolo dell'app.
* **I componenti front-end** vengono eseguiti in Web Workers utilizzando il Remote DOM — isolati dalla pagina principale ma renderizzando elementi DOM nativi (non iframe). Comunicano con Twenty tramite un'API host basata sul passaggio di messaggi.
* **Le autorizzazioni** vengono applicate a livello di API. Il token di runtime (`TWENTY_APP_ACCESS_TOKEN`) è derivato dal ruolo definito in `defineApplication()`.
* **Logic functions** run in isolated Node.js processes on the server. They only access data through the typed API client, scoped to the app's role permissions.
* **Front components** run in Web Workers using Remote DOM — sandboxed from the main page but rendering native DOM elements (not iframes). They communicate with Twenty via a message-passing host API.
* **Permissions** are enforced at the API level. The runtime token (`TWENTY_APP_ACCESS_TOKEN`) is derived from the role defined in `defineApplication()`.
## Ciclo di vita dell'app
## App lifecycle
```
┌─────────────────────────────────────────────────────────┐
@@ -73,32 +73,32 @@ your-app/
└─────────────────────────────────────────────────────────┘
```
* **`yarn twenty dev`** — monitora i file sorgente e sincronizza in tempo reale le modifiche su un server Twenty connesso. Il client API tipizzato viene rigenerato automaticamente quando lo schema cambia.
* **`yarn twenty build`** — compila TypeScript, crea i bundle delle funzioni logiche e dei componenti front-end con esbuild e produce un manifest.
* **Hook di pre/post-installazione** — funzioni logiche opzionali che vengono eseguite durante l'installazione. Consulta [Funzioni logiche](/l/it/developers/extend/apps/logic-functions) per i dettagli.
* **`yarn twenty dev`** — watches your source files and live-syncs changes to a connected Twenty server. The typed API client is regenerated automatically when the schema changes.
* **`yarn twenty build`** — compiles TypeScript, bundles logic functions and front components with esbuild, and produces a manifest.
* **Pre/post-install hooks** — optional logic functions that run during installation. See [Logic Functions](/l/it/developers/extend/apps/logic-functions) for details.
## Prossimi passaggi
<CardGroup cols={2}>
<Card title="Modello dati" icon="database" href="/l/it/developers/extend/apps/data-model">
Definisci oggetti, campi, ruoli e relazioni.
Define objects, fields, roles, and relations.
</Card>
<Card title="Funzioni logiche" icon="bolt" href="/l/it/developers/extend/apps/logic-functions">
Funzioni lato server con trigger HTTP, cron ed eventi.
Server-side functions with HTTP, cron, and event triggers.
</Card>
<Card title="Componenti front-end" icon="window-maximize" href="/l/it/developers/extend/apps/front-components">
Componenti React in sandbox nell'UI di Twenty.
Sandboxed React components inside Twenty's UI.
</Card>
<Card title="Disposizione" icon="table-columns" href="/l/it/developers/extend/apps/layout">
Viste, voci di navigazione e layout delle pagine dei record.
Views, navigation items, and record page layouts.
</Card>
<Card title="Skill e agenti" icon="robot" href="/l/it/developers/extend/apps/skills-and-agents">
Abilità e agenti IA con prompt personalizzati.
AI skills and agents with custom prompts.
</Card>
<Card title="CLI e test" icon="terminal" href="/l/it/developers/extend/apps/cli-and-testing">
Comandi CLI, test, asset, remoti e CI.
<Card title="CLI & Testing" icon="terminal" href="/l/it/developers/extend/apps/cli-and-testing">
CLI commands, testing, assets, remotes, and CI.
</Card>
<Card title="Pubblicazione" icon="rocket" href="/l/it/developers/extend/apps/publishing">
Distribuisci su un server o pubblica sul marketplace.
Deploy to a server or publish to the marketplace.
</Card>
</CardGroup>
@@ -1,5 +1,5 @@
---
title: Layout
title: Disposizione
description: Define views, navigation menu items, and page layouts to shape how your app appears in Twenty.
icon: table-columns
---
@@ -1,6 +1,6 @@
---
title: Skill e agenti
description: Definisci skill e agenti di IA per la tua app.
description: Define AI skills and agents for your app.
icon: robot
---
@@ -8,7 +8,7 @@ icon: robot
Skills and agents are currently in alpha. La funzionalità funziona ma è ancora in evoluzione.
</Warning>
Le app possono definire capacità di IA che risiedono all'interno dello spazio di lavoro — istruzioni di skill riutilizzabili e agenti con prompt di sistema personalizzati.
Apps can define AI capabilities that live inside the workspace — reusable skill instructions and agents with custom system prompts.
<AccordionGroup>
<Accordion title="defineSkill" description="Definisci le skill degli agenti IA">
@@ -1,23 +1,23 @@
---
title: OAuth
icon: chiave
description: Flusso del codice di autorizzazione con PKCE e credenziali client per l'accesso da server a server.
description: Authorization code flow with PKCE and client credentials for server-to-server access.
---
Twenty implementa OAuth 2.0 con codice di autorizzazione + PKCE per le app rivolte agli utenti e credenziali client per l'accesso da server a server. I client vengono registrati dinamicamente tramite [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591) — nessuna configurazione manuale in una dashboard.
Twenty implements OAuth 2.0 with authorization code + PKCE for user-facing apps and client credentials for server-to-server access. Clients are registered dynamically via [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591) — no manual setup in a dashboard.
## Quando utilizzare OAuth
## When to Use OAuth
| Scenario | Metodo di autenticazione |
| ------------------------------------------------- | -------------------------------------------------------------------------------- |
| Script interni, automazioni | [Chiave API](/l/it/developers/extend/api#authentication) |
| App esterna che agisce per conto di un utente | **OAuth — Codice di autorizzazione** |
| Da server a server, nessun contesto utente | **OAuth — Credenziali client** |
| App Twenty con estensioni dell'interfaccia utente | [App](/l/it/developers/extend/apps/getting-started) (OAuth è gestito automaticamente) |
| Scenario | Auth Method |
| --------------------------------------- | -------------------------------------------------------------------------------- |
| Internal scripts, automation | [API Key](/l/it/developers/extend/api#authentication) |
| External app acting on behalf of a user | **OAuth — Authorization Code** |
| Server-to-server, no user context | **OAuth — Client Credentials** |
| Twenty App with UI extensions | [Apps](/l/it/developers/extend/apps/getting-started) (OAuth is handled automatically) |
## Registrare un client
## Register a Client
Twenty supporta la **registrazione dinamica dei client** secondo [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591). Non è necessaria alcuna configurazione manuale — registra a livello di codice:
Twenty supports **dynamic client registration** per [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591). No manual setup needed — register programmatically:
```bash
POST /oauth/register
@@ -31,7 +31,7 @@ Content-Type: application/json
}
```
**Risposta:**
**Response:**
```json
{
@@ -43,23 +43,23 @@ Content-Type: application/json
```
<Warning>
Conserva `client_secret` in modo sicuro — non potrà essere recuperato in seguito.
Store the `client_secret` securely — it cannot be retrieved later.
</Warning>
## Ambiti
| Ambito | Accesso |
| --------- | -------------------------------------------------------------- |
| `api` | Accesso completo in lettura/scrittura alle API Core e Metadata |
| `profilo` | Legge le informazioni del profilo dell'utente autenticato |
| Scope | Accesso |
| --------- | ---------------------------------------------------- |
| `api` | Full read/write access to the Core and Metadata APIs |
| `profilo` | Read the authenticated user's profile information |
Richiedi gli ambiti come stringa separata da spazi: `scope=api profile`
Request scopes as a space-separated string: `scope=api profile`
## Flusso con codice di autorizzazione
## Authorization Code Flow
Usa questo flusso quando la tua app agisce per conto di un utente Twenty.
Use this flow when your app acts on behalf of a Twenty user.
### 1. Reindirizza l'utente per autorizzare
### 1. Redirect the user to authorize
```
GET /oauth/authorize?
@@ -72,29 +72,29 @@ GET /oauth/authorize?
code_challenge_method=S256
```
| Parametro | Obbligatorio | Descrizione |
| ----------------------- | ------------ | ------------------------------------------------------------------- |
| `client_id` | Sì | ID client registrato |
| `response_type` | Sì | Deve essere `code` |
| `redirect_uri` | Sì | Deve corrispondere a un URI di reindirizzamento registrato |
| `scope` | No | Ambiti separati da spazi (predefinito `api`) |
| `stato` | Consigliato | Stringa casuale per prevenire attacchi CSRF |
| `code_challenge` | Consigliato | Challenge PKCE (hash SHA-256 del verifier, codificato in base64url) |
| `code_challenge_method` | Consigliato | Deve essere `S256` quando si usa PKCE |
| Parametro | Obbligatorio | Descrizione |
| ----------------------- | ------------ | ------------------------------------------------------------ |
| `client_id` | Sì | Your registered client ID |
| `response_type` | Sì | Must be `code` |
| `redirect_uri` | Sì | Must match a registered redirect URI |
| `scope` | No | Space-separated scopes (defaults to `api`) |
| `stato` | Consigliato | Random string to prevent CSRF attacks |
| `code_challenge` | Consigliato | PKCE challenge (SHA-256 hash of verifier, base64url-encoded) |
| `code_challenge_method` | Consigliato | Must be `S256` when using PKCE |
L'utente vede una schermata di consenso e approva o nega l'accesso.
The user sees a consent screen and approves or denies access.
### 2. Gestisci la callback
### 2. Handle the callback
Dopo l'autorizzazione, Twenty reindirizza al tuo `redirect_uri`:
After authorization, Twenty redirects back to your `redirect_uri`:
```
https://myapp.com/callback?code=AUTH_CODE&state=random_state_value
```
Verifica che `state` corrisponda a quanto inviato.
Verify that `state` matches what you sent.
### 3. Scambia il codice con i token
### 3. Exchange the code for tokens
```bash
POST /oauth/token
@@ -108,7 +108,7 @@ client_secret=YOUR_CLIENT_SECRET&
code_verifier=YOUR_PKCE_VERIFIER
```
**Risposta:**
**Response:**
```json
{
@@ -119,14 +119,14 @@ code_verifier=YOUR_PKCE_VERIFIER
}
```
### 4. Usa il token di accesso
### 4. Use the access token
```bash
GET /rest/companies
Authorization: Bearer ACCESS_TOKEN
```
### 5. Aggiorna alla scadenza
### 5. Refresh when expired
```bash
POST /oauth/token
@@ -138,9 +138,9 @@ client_id=YOUR_CLIENT_ID&
client_secret=YOUR_CLIENT_SECRET
```
## Flusso delle credenziali del client
## Client Credentials Flow
Per integrazioni da server a server senza interazione dell'utente:
For server-to-server integrations with no user interaction:
```bash
POST /oauth/token
@@ -152,38 +152,38 @@ client_secret=YOUR_CLIENT_SECRET&
scope=api
```
Il token restituito ha accesso a livello di spazio di lavoro, non legato a un utente specifico.
The returned token has workspace-level access, not tied to any specific user.
## Scoperta del server
## Server Discovery
Twenty pubblica la propria configurazione OAuth in un endpoint di discovery standard:
Twenty publishes its OAuth configuration at a standard discovery endpoint:
```
GET /.well-known/oauth-authorization-server
```
Questo restituisce tutti gli endpoint, i tipi di grant supportati, gli ambiti e le funzionalità — utile per creare client OAuth generici.
This returns all endpoints, supported grant types, scopes, and capabilities — useful for building generic OAuth clients.
## Riepilogo degli endpoint API
## API Endpoints Summary
| Endpoint | Scopo |
| ----------------------------------------- | -------------------------------------- |
| `/.well-known/oauth-authorization-server` | Individuazione dei metadati del server |
| `/oauth/register` | Registrazione dinamica dei client |
| `/oauth/authorize` | Autorizzazione utente |
| `/oauth/token` | Scambio e aggiornamento dei token |
| Endpoint | Scopo |
| ----------------------------------------- | --------------------------- |
| `/.well-known/oauth-authorization-server` | Server metadata discovery |
| `/oauth/register` | Dynamic client registration |
| `/oauth/authorize` | User authorization |
| `/oauth/token` | Token exchange and refresh |
| Ambiente | URL di base |
| ----------------- | ------------------------ |
| **Cloud** | `https://api.twenty.com` |
| **Auto-ospitato** | `https://{your-domain}` |
## OAuth vs Chiavi API
## OAuth vs API Keys
| | API Keys | OAuth |
| ----------------------- | --------------------------------------- | ---------------------------------------- |
| **Impostazione** | Genera nelle Impostazioni | Registra un client, implementa il flusso |
| **Contesto utente** | Nessuno (a livello di spazio di lavoro) | Autorizzazioni dell'utente specifico |
| **Ideale per** | Script, strumenti interni | App esterne, integrazioni multiutente |
| **Rotazione dei token** | Manuale | Automatica tramite token di refresh |
| **Accesso con ambiti** | Accesso completo alle API | Granulare tramite ambiti |
| | API Keys | OAuth |
| ------------------ | ----------------------- | -------------------------------------- |
| **Impostazione** | Generate in Settings | Register a client, implement flow |
| **User context** | None (workspace-level) | Specific user's permissions |
| **Ideale per** | Scripts, internal tools | External apps, multi-user integrations |
| **Token rotation** | Manuale | Automatic via refresh tokens |
| **Scoped access** | Full API access | Granular via scopes |
@@ -1,12 +1,12 @@
---
title: Webhooks
icon: satellite-dish
description: Ricevi una notifica quando i record cambiano — HTTP POST al tuo endpoint a ogni creazione, aggiornamento o eliminazione.
description: Get notified when records change — HTTP POST to your endpoint on every create, update, or delete.
---
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
Twenty invia un HTTP POST al tuo URL ogni volta che un record viene creato, aggiornato o eliminato. Tutti i tipi di oggetto sono supportati, inclusi gli oggetti personalizzati.
Twenty sends an HTTP POST to your URL whenever a record is created, updated, or deleted. All object types are covered, including custom objects.
## Crea un Webhook
@@ -1,28 +1,28 @@
---
title: Sviluppatori
description: Crea app, usa le API, esegui in self-hosting o contribuisci alla codebase.
description: Build apps, use the API, self-host, or contribute to the codebase.
---
import { CardTitle } from "/snippets/card-title.mdx"
<CardGroup cols={3}>
<Card href="/l/it/developers/extend/apps/getting-started" img="/images/user-guide/halftone/dev-apps.png">
<CardTitle>App</CardTitle>
Estendi Twenty con oggetti personalizzati, logica lato server, componenti UI e agenti IA — tutto come pacchetti TypeScript.
<CardTitle>Apps</CardTitle>
Extend Twenty with custom objects, server-side logic, UI components, and AI agents — all as TypeScript packages.
</Card>
<Card href="/l/it/developers/extend/api" img="/images/user-guide/halftone/dev-api.png">
<CardTitle>API</CardTitle>
API REST e GraphQL, webhook e OAuth.
REST and GraphQL APIs, webhooks, and OAuth.
</Card>
<Card href="/l/it/developers/self-host/capabilities/docker-compose" img="/images/user-guide/halftone/dev-self-host.png">
<CardTitle>Self-hosting</CardTitle>
Esegui Twenty sulla tua infrastruttura.
<CardTitle>Self-Host</CardTitle>
Run Twenty on your own infrastructure.
</Card>
<Card href="/l/it/developers/contribute/capabilities/local-setup" img="/images/user-guide/halftone/dev-contribute.png">
<CardTitle>Contribuisci</CardTitle>
Configura il monorepo in locale e invia PR.
<CardTitle>Contribute</CardTitle>
Set up the monorepo locally and submit PRs.
</Card>
</CardGroup>
@@ -26,9 +26,9 @@ export const MyComponent = () => {
<Tab title="Props">
| Proprietà | Tipo | Descrizione |
| --------- | ----------------- | ---------------------------------------------------- |
| editor | `BlockNoteEditor` | L'istanza o la configurazione dell'editor di blocchi |
| Props | Tipo | Descrizione |
| ------ | ----------------- | ---------------------------------------------------- |
| editor | `BlockNoteEditor` | L'istanza o la configurazione dell'editor di blocchi |
@@ -40,7 +40,7 @@ export const MyComponent = () => {
<Tab title="Props">
| Proprietà | Tipo | Descrizione |
| Props | Tipo | Descrizione |
| ---------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------- |
| disabilitato | booleano | Disabilita il selettore di icone se impostato su `true` |
| onChange | funzione | La funzione di callback attivata quando l'utente seleziona un'icona. Riceve un oggetto con le proprietà `iconKey` e `Icon` |
@@ -48,7 +48,7 @@ export const MyComponent = () => {
<Tab title="Proprietà">
| Props | Tipo | Descrizione |
| Proprietà | Tipo | Descrizione |
| -------------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| nomeClasse | stringa | Nome opzionale per lo stile aggiuntivo |
| etichetta | stringa | Rappresenta l'etichetta per l'input |
@@ -100,7 +100,7 @@ export const MyComponent = () => {
<Tab title="Proprietà">
| Props | Tipo | Descrizione |
| Proprietà | Tipo | Descrizione |
| -------------- | -------- | ------------------------------------------------------------------------------------- |
| suValida | funzione | La funzione di callback che si vuole attivare quando l'utente valida l'input |
| righeMinime | numero | Il numero minimo di righe per l'area di testo |
@@ -146,7 +146,7 @@ export const MyComponent = () => {
<Tab title="Proprietà">
| Props | Tipo | Descrizione |
| Proprietà | Tipo | Descrizione |
| ------------- | -------- | --------------------------------------------------------------------------- |
| disabilitato | booleano | Indica se l'area di testo è disabilitata |
| righeMinime | numero | Numero minimo di righe visibili per l'area di testo. |
@@ -1,12 +1,12 @@
---
title: Comandos
title: Commands
icon: terminal
description: Comandos úteis para desenvolver o Twenty.
description: Useful commands for developing Twenty.
---
Os comandos podem ser executados a partir da raiz do repositório usando `npx nx`. Use `npx nx run {project}:{command}` para direcionar explicitamente.
Commands can be run from the repository root using `npx nx`. Use `npx nx run {project}:{command}` for explicit targeting.
## Iniciando o aplicativo
## Starting the App
```bash
npx nx start twenty-front # Frontend dev server (http://localhost:3001)
@@ -14,7 +14,7 @@ npx nx start twenty-server # Backend server (http://localhost:3000)
npx nx run twenty-server:worker # Background worker
```
## Banco de Dados
## Database
```bash
npx nx database:reset twenty-server # Reset and seed database
@@ -30,7 +30,7 @@ npx nx lint:diff-with-main twenty-server
npx nx lint twenty-front --configuration=fix # Auto-fix
```
## Verificação de tipos
## Type Checking
```bash
npx nx typecheck twenty-front
@@ -68,7 +68,7 @@ npx nx run twenty-front:lingui:extract # Extract strings
npx nx run twenty-front:lingui:compile # Compile translations
```
## Compilação
## Build
```bash
npx nx build twenty-shared # Must be built first
@@ -110,7 +110,7 @@ const value = process.env.MY_VALUE ?? 'default';
onClick?.();
```
## Nomenclatura
## Nomeação
* **Variables**: camelCase, descriptive (`email` not `value`, `fieldMetadata` not `fm`)
* **Constants**: SCREAMING_SNAKE_CASE
@@ -1,14 +1,14 @@
---
title: Arquitetura
description: Como as aplicações Twenty funcionam — sandboxing, ciclo de vida e os blocos de construção.
description: How Twenty apps work — sandboxing, lifecycle, and the building blocks.
icon: sitemap
---
As aplicações Twenty são pacotes TypeScript que estendem seu espaço de trabalho com objetos personalizados, lógica, componentes de UI e recursos de IA. Elas são executadas na plataforma Twenty com sandboxing completo e controles de permissão.
Twenty apps are TypeScript packages that extend your workspace with custom objects, logic, UI components, and AI capabilities. They run on the Twenty platform with full sandboxing and permission controls.
## Como as aplicações funcionam
## How apps work
Uma aplicação é uma coleção de **entidades** declaradas usando funções `defineEntity()` do pacote `twenty-sdk`. O SDK detecta essas declarações via análise de AST no momento da compilação e produz um **manifesto** — uma descrição completa do que seu aplicativo adiciona a um espaço de trabalho.
An app is a collection of **entities** declared using `defineEntity()` functions from the `twenty-sdk` package. The SDK detects these declarations via AST analysis at build time and produces a **manifest** — a complete description of what your app adds to a workspace.
```
your-app/
@@ -29,32 +29,32 @@ your-app/
```
<Note>
**A organização de arquivos fica a seu critério.** A detecção de entidades é baseada em AST — o SDK encontra chamadas a `export default defineEntity(...)` independentemente de onde o arquivo esteja. A estrutura de pastas acima é uma convenção, não um requisito.
**File organization is up to you.** Entity detection is AST-based — the SDK finds `export default defineEntity(...)` calls regardless of where the file lives. The folder structure above is a convention, not a requirement.
</Note>
## Tipos de entidade
## Entity types
| Entidade | Finalidade | Documentação |
| ----------------------------- | ----------------------------------------------------- | -------------------------------------------------------------------- |
| **Aplicação** | Identidade da aplicação, permissões, variáveis | [Modelo de Dados](/l/pt/developers/extend/apps/data-model) |
| **Papel** | Conjuntos de permissões para objetos e campos | [Modelo de Dados](/l/pt/developers/extend/apps/data-model) |
| **Objeto** | Tabelas de dados personalizadas com campos | [Modelo de Dados](/l/pt/developers/extend/apps/data-model) |
| **Campo** | Estender objetos existentes, definir relações | [Modelo de Dados](/l/pt/developers/extend/apps/data-model) |
| **Função lógica** | TypeScript no lado do servidor com gatilhos | [Funções lógicas](/l/pt/developers/extend/apps/logic-functions) |
| **Componente de front-end** | UI React em sandbox na página do Twenty | [Componentes de front-end](/l/pt/developers/extend/apps/front-components) |
| **Habilidade** | Instruções reutilizáveis para agentes de IA | [Habilidades e Agentes](/l/pt/developers/extend/apps/skills-and-agents) |
| **Agente** | Assistentes de IA com prompts personalizados | [Habilidades e Agentes](/l/pt/developers/extend/apps/skills-and-agents) |
| **Vista** | Vistas de lista de registros pré-configuradas | [Layout](/l/pt/developers/extend/apps/layout) |
| **Item do menu de navegação** | Entradas personalizadas na barra lateral | [Layout](/l/pt/developers/extend/apps/layout) |
| **Layout da Página** | Abas e widgets personalizados nas páginas de registro | [Layout](/l/pt/developers/extend/apps/layout) |
| Entidade | Finalidade | Documentação |
| ------------------------ | ----------------------------------------- | ------------------------------------------------------------ |
| **Application** | App identity, permissions, variables | [Data Model](/l/pt/developers/extend/apps/data-model) |
| **Role** | Permission sets for objects and fields | [Data Model](/l/pt/developers/extend/apps/data-model) |
| **Objeto** | Custom data tables with fields | [Data Model](/l/pt/developers/extend/apps/data-model) |
| **Campo** | Extend existing objects, define relations | [Data Model](/l/pt/developers/extend/apps/data-model) |
| **Logic Function** | Server-side TypeScript with triggers | [Funções lógicas](/l/pt/developers/extend/apps/logic-functions) |
| **Front Component** | Sandboxed React UI in Twenty's page | [Front Components](/l/pt/developers/extend/apps/front-components) |
| **Skill** | Reusable AI agent instructions | [Skills & Agents](/l/pt/developers/extend/apps/skills-and-agents) |
| **Agent** | AI assistants with custom prompts | [Skills & Agents](/l/pt/developers/extend/apps/skills-and-agents) |
| **View** | Pre-configured record list views | [Layout](/l/pt/developers/extend/apps/layout) |
| **Navigation Menu Item** | Custom sidebar entries | [Layout](/l/pt/developers/extend/apps/layout) |
| **Page Layout** | Custom record page tabs and widgets | [Layout](/l/pt/developers/extend/apps/layout) |
## Sandboxing
* **Funções lógicas** são executadas em processos Node.js isolados no servidor. Elas acessam dados apenas por meio do cliente de API tipado, restrito às permissões do papel do aplicativo.
* **Componentes de front-end** executam em Web Workers usando Remote DOM — isolados da página principal, mas renderizando elementos DOM nativos (não iframes). Eles se comunicam com o Twenty por meio de uma API de host com passagem de mensagens.
* **Permissões** são aplicadas no nível da API. O token de tempo de execução (`TWENTY_APP_ACCESS_TOKEN`) é derivado do papel definido em `defineApplication()`.
* **Logic functions** run in isolated Node.js processes on the server. They only access data through the typed API client, scoped to the app's role permissions.
* **Front components** run in Web Workers using Remote DOM — sandboxed from the main page but rendering native DOM elements (not iframes). They communicate with Twenty via a message-passing host API.
* **Permissions** are enforced at the API level. The runtime token (`TWENTY_APP_ACCESS_TOKEN`) is derived from the role defined in `defineApplication()`.
## Ciclo de vida do aplicativo
## App lifecycle
```
┌─────────────────────────────────────────────────────────┐
@@ -73,32 +73,32 @@ your-app/
└─────────────────────────────────────────────────────────┘
```
* **`yarn twenty dev`** — observa seus arquivos-fonte e sincroniza ao vivo as alterações com um servidor Twenty conectado. O cliente de API tipado é regenerado automaticamente quando o esquema muda.
* **`yarn twenty build`** — compila TypeScript, empacota funções de lógica e componentes de front-end com o esbuild e produz um manifesto.
* **Hooks de pré/pós-instalação** — funções de lógica opcionais que são executadas durante a instalação. Veja [Funções de Lógica](/l/pt/developers/extend/apps/logic-functions) para detalhes.
* **`yarn twenty dev`** — watches your source files and live-syncs changes to a connected Twenty server. The typed API client is regenerated automatically when the schema changes.
* **`yarn twenty build`** — compiles TypeScript, bundles logic functions and front components with esbuild, and produces a manifest.
* **Pre/post-install hooks** — optional logic functions that run during installation. See [Logic Functions](/l/pt/developers/extend/apps/logic-functions) for details.
## Próximos passos
<CardGroup cols={2}>
<Card title="Modelo de dados" icon="database" href="/l/pt/developers/extend/apps/data-model">
Defina objetos, campos, papéis e relações.
Define objects, fields, roles, and relations.
</Card>
<Card title="Funções lógicas" icon="bolt" href="/l/pt/developers/extend/apps/logic-functions">
Funções no lado do servidor com gatilhos HTTP, cron e de eventos.
Server-side functions with HTTP, cron, and event triggers.
</Card>
<Card title="Componentes de front-end" icon="window-maximize" href="/l/pt/developers/extend/apps/front-components">
Componentes React em sandbox dentro da UI do Twenty.
Sandboxed React components inside Twenty's UI.
</Card>
<Card title="Layout" icon="table-columns" href="/l/pt/developers/extend/apps/layout">
Vistas, itens de navegação e layouts de página de registro.
Views, navigation items, and record page layouts.
</Card>
<Card title="Habilidades e agentes" icon="robot" href="/l/pt/developers/extend/apps/skills-and-agents">
Habilidades e agentes de IA com prompts personalizados.
AI skills and agents with custom prompts.
</Card>
<Card title="CLI e Testes" icon="terminal" href="/l/pt/developers/extend/apps/cli-and-testing">
Comandos de CLI, testes, assets, remotes e CI.
<Card title="CLI & Testing" icon="terminal" href="/l/pt/developers/extend/apps/cli-and-testing">
CLI commands, testing, assets, remotes, and CI.
</Card>
<Card title="Publicação" icon="rocket" href="/l/pt/developers/extend/apps/publishing">
Implante em um servidor ou publique no marketplace.
Deploy to a server or publish to the marketplace.
</Card>
</CardGroup>
@@ -1,6 +1,6 @@
---
title: Componentes de front-end
description: Crie componentes React que renderizam dentro da UI do Twenty com isolamento em sandbox.
description: Build React components that render inside Twenty's UI with sandboxed isolation.
icon: window-maximize
---
@@ -74,7 +74,7 @@ Os componentes de front-end têm dois modos de renderização controlados pela o
**Não headless (padrão)** — O componente renderiza uma interface visível. Quando acionado pelo menu de comandos, ele é aberto no painel lateral. Este é o comportamento padrão quando `isHeadless` é `false` ou omitido.
**Headless (`isHeadless: true`)** — O componente é montado de forma invisível em segundo plano. Ele não abre o painel lateral. Componentes headless são projetados para ações que executam lógica e, em seguida, se desmontam — por exemplo, executar uma tarefa assíncrona, navegar para uma página ou exibir um modal de confirmação. Eles se combinam naturalmente com os componentes Command do SDK descritos abaixo.
**Headless (`isHeadless: true`)** — The component mounts invisibly in the background. Ele não abre o painel lateral. Componentes headless são projetados para ações que executam lógica e, em seguida, se desmontam — por exemplo, executar uma tarefa assíncrona, navegar para uma página ou exibir um modal de confirmação. Eles se combinam naturalmente com os componentes Command do SDK descritos abaixo.
```tsx src/front-components/sync-tracker.tsx
import { defineFrontComponent } from 'twenty-sdk/define';
@@ -20,7 +20,7 @@ Views, navigation items, and page layouts reference each other by `universalIden
* A **page layout** of type `RECORD_PAGE` targets an object and can embed [front components](/l/pt/developers/extend/apps/front-components) inside its tabs as widgets.
<AccordionGroup>
<Accordion title="defineView" description="Defina visualizações salvas para objetos">
<Accordion title="defineView" description="Define visualizações salvas para objetos">
As visualizações são configurações salvas de como os registros de um objeto são exibidos — incluindo quais campos são visíveis, sua ordem e quaisquer filtros ou grupos aplicados. Use `defineView()` para enviar visualizações pré-configuradas com seu app:
@@ -56,7 +56,7 @@ Pontos-chave:
* `position` controla a ordenação quando existem várias visualizações para o mesmo objeto.
</Accordion>
<Accordion title="defineNavigationMenuItem" description="Defina links de navegação da barra lateral">
<Accordion title="defineNavigationMenuItem" description="Define links de navegação da barra lateral">
Os itens do menu de navegação adicionam entradas personalizadas à barra lateral do espaço de trabalho. Use `defineNavigationMenuItem()` para vincular a visualizações, URLs externas ou objetos:
@@ -1,6 +1,6 @@
---
title: Habilidades e agentes
description: Defina habilidades e agentes de IA para o seu aplicativo.
description: Define AI skills and agents for your app.
icon: robot
---
@@ -8,7 +8,7 @@ icon: robot
Skills and agents are currently in alpha. O recurso é funcional, mas ainda está evoluindo.
</Warning>
Os aplicativos podem definir capacidades de IA que residem dentro do espaço de trabalho — instruções de habilidades reutilizáveis e agentes com prompts de sistema personalizados.
Apps can define AI capabilities that live inside the workspace — reusable skill instructions and agents with custom system prompts.
<AccordionGroup>
<Accordion title="defineSkill" description="Defina habilidades de agentes de IA">
@@ -1,23 +1,23 @@
---
title: OAuth
icon: chave
description: Fluxo de código de autorização com PKCE e credenciais de cliente para acesso servidor a servidor.
description: Authorization code flow with PKCE and client credentials for server-to-server access.
---
A Twenty implementa OAuth 2.0 com código de autorização + PKCE para aplicações voltadas ao utilizador e credenciais de cliente para acesso servidor a servidor. Os clientes são registados dinamicamente via [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591) — sem configuração manual num painel.
Twenty implements OAuth 2.0 with authorization code + PKCE for user-facing apps and client credentials for server-to-server access. Clients are registered dynamically via [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591) — no manual setup in a dashboard.
## Quando usar OAuth
## When to Use OAuth
| Cenário | Método de autenticação |
| -------------------------------------------------- | --------------------------------------------------------------------------------------- |
| Scripts internos, automatização | [Chave de API](/l/pt/developers/extend/api#authentication) |
| Aplicação externa atuando em nome de um utilizador | **OAuth — Código de Autorização** |
| Servidor a servidor, sem contexto de utilizador | **OAuth — Credenciais do Cliente** |
| Aplicação Twenty com extensões de UI | [Aplicações](/l/pt/developers/extend/apps/getting-started) (OAuth é tratado automaticamente) |
| Cenário | Auth Method |
| --------------------------------------- | -------------------------------------------------------------------------------- |
| Internal scripts, automation | [API Key](/l/pt/developers/extend/api#authentication) |
| External app acting on behalf of a user | **OAuth — Authorization Code** |
| Server-to-server, no user context | **OAuth — Client Credentials** |
| Twenty App with UI extensions | [Apps](/l/pt/developers/extend/apps/getting-started) (OAuth is handled automatically) |
## Registar um cliente
## Register a Client
A Twenty suporta **registo dinâmico de clientes** conforme [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591). Sem necessidade de configuração manual — registe programaticamente:
Twenty supports **dynamic client registration** per [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591). No manual setup needed — register programmatically:
```bash
POST /oauth/register
@@ -31,7 +31,7 @@ Content-Type: application/json
}
```
**Resposta:**
**Response:**
```json
{
@@ -43,23 +43,23 @@ Content-Type: application/json
```
<Warning>
Guarde o `client_secret` com segurança — não poderá ser recuperado mais tarde.
Store the `client_secret` securely — it cannot be retrieved later.
</Warning>
## Escopos
| Escopo | Acesso |
| -------- | ------------------------------------------------------- |
| `api` | Acesso total de leitura/escrita às APIs Core e Metadata |
| `perfil` | Leia as informações do perfil do utilizador autenticado |
| Scope | Acesso |
| -------- | ---------------------------------------------------- |
| `api` | Full read/write access to the Core and Metadata APIs |
| `perfil` | Read the authenticated user's profile information |
Solicite escopos como uma cadeia separada por espaços: `scope=api profile`
Request scopes as a space-separated string: `scope=api profile`
## Fluxo de Código de Autorização
## Authorization Code Flow
Use este fluxo quando a sua aplicação atuar em nome de um utilizador da Twenty.
Use this flow when your app acts on behalf of a Twenty user.
### 1. Redirecione o utilizador para autorizar
### 1. Redirect the user to authorize
```
GET /oauth/authorize?
@@ -72,29 +72,29 @@ GET /oauth/authorize?
code_challenge_method=S256
```
| Parâmetro | Obrigatório | Descrição |
| ----------------------- | ----------- | ------------------------------------------------------------------- |
| `client_id` | Sim | O seu ID de cliente registado |
| `response_type` | Sim | Deve ser `code` |
| `redirect_uri` | Sim | Deve corresponder a um URI de redirecionamento registado |
| `scope` | Não | Escopos separados por espaços (predefinido para `api`) |
| `estado` | Recomendado | Cadeia aleatória para prevenir ataques CSRF |
| `code_challenge` | Recomendado | Desafio PKCE (hash SHA-256 do verificador, codificado em base64url) |
| `code_challenge_method` | Recomendado | Deve ser `S256` ao usar PKCE |
| Parâmetro | Obrigatório | Descrição |
| ----------------------- | ----------- | ------------------------------------------------------------ |
| `client_id` | Sim | Your registered client ID |
| `response_type` | Sim | Must be `code` |
| `redirect_uri` | Sim | Must match a registered redirect URI |
| `scope` | Não | Space-separated scopes (defaults to `api`) |
| `estado` | Recomendado | Random string to prevent CSRF attacks |
| `code_challenge` | Recomendado | PKCE challenge (SHA-256 hash of verifier, base64url-encoded) |
| `code_challenge_method` | Recomendado | Must be `S256` when using PKCE |
O utilizador vê um ecrã de consentimento e aprova ou nega o acesso.
The user sees a consent screen and approves or denies access.
### 2. Trate o callback
### 2. Handle the callback
Após a autorização, a Twenty redireciona de volta para o seu `redirect_uri`:
After authorization, Twenty redirects back to your `redirect_uri`:
```
https://myapp.com/callback?code=AUTH_CODE&state=random_state_value
```
Verifique se `state` corresponde ao que enviou.
Verify that `state` matches what you sent.
### 3. Troque o código por tokens
### 3. Exchange the code for tokens
```bash
POST /oauth/token
@@ -108,7 +108,7 @@ client_secret=YOUR_CLIENT_SECRET&
code_verifier=YOUR_PKCE_VERIFIER
```
**Resposta:**
**Response:**
```json
{
@@ -119,14 +119,14 @@ code_verifier=YOUR_PKCE_VERIFIER
}
```
### 4. Use o token de acesso
### 4. Use the access token
```bash
GET /rest/companies
Authorization: Bearer ACCESS_TOKEN
```
### 5. Atualize quando expirar
### 5. Refresh when expired
```bash
POST /oauth/token
@@ -138,9 +138,9 @@ client_id=YOUR_CLIENT_ID&
client_secret=YOUR_CLIENT_SECRET
```
## Fluxo de Credenciais do Cliente
## Client Credentials Flow
Para integrações servidor a servidor sem interação do utilizador:
For server-to-server integrations with no user interaction:
```bash
POST /oauth/token
@@ -152,38 +152,38 @@ client_secret=YOUR_CLIENT_SECRET&
scope=api
```
O token retornado tem acesso ao nível do espaço de trabalho, não vinculado a nenhum utilizador específico.
The returned token has workspace-level access, not tied to any specific user.
## Descoberta do servidor
## Server Discovery
A Twenty publica a sua configuração OAuth num endpoint padrão de descoberta:
Twenty publishes its OAuth configuration at a standard discovery endpoint:
```
GET /.well-known/oauth-authorization-server
```
Isto retorna todos os endpoints, tipos de concessão suportados, escopos e capacidades — útil para criar clientes OAuth genéricos.
This returns all endpoints, supported grant types, scopes, and capabilities — useful for building generic OAuth clients.
## Resumo de endpoints da API
## API Endpoints Summary
| Endpoint | Finalidade |
| ----------------------------------------- | ----------------------------------- |
| `/.well-known/oauth-authorization-server` | Descoberta de metadados do servidor |
| `/oauth/register` | Registo dinâmico de cliente |
| `/oauth/authorize` | Autorização do utilizador |
| `/oauth/token` | Troca e atualização de tokens |
| Endpoint | Finalidade |
| ----------------------------------------- | --------------------------- |
| `/.well-known/oauth-authorization-server` | Server metadata discovery |
| `/oauth/register` | Dynamic client registration |
| `/oauth/authorize` | User authorization |
| `/oauth/token` | Token exchange and refresh |
| Ambiente | URL base |
| ------------------ | ------------------------ |
| **Nuvem** | `https://api.twenty.com` |
| **Auto-hospedado** | `https://{your-domain}` |
## OAuth vs Chaves de API
## OAuth vs API Keys
| | Chaves API | OAuth |
| ----------------------------- | ------------------------------------ | ------------------------------------------------ |
| **Configuração** | Gerar em Configurações | Registar um cliente, implementar o fluxo |
| **Contexto do utilizador** | Nenhum (nível de espaço de trabalho) | Permissões de um utilizador específico |
| **Melhor para** | Scripts, ferramentas internas | Aplicações externas, integrações multiutilizador |
| **Rotação de tokens** | Manual | Automática via tokens de atualização |
| **Acesso baseado em escopos** | Acesso total à API | Granular por escopos |
| | Chaves API | OAuth |
| ------------------ | ----------------------- | -------------------------------------- |
| **Configuração** | Generate in Settings | Register a client, implement flow |
| **User context** | None (workspace-level) | Specific user's permissions |
| **Melhor para** | Scripts, internal tools | External apps, multi-user integrations |
| **Token rotation** | Manual | Automatic via refresh tokens |
| **Scoped access** | Full API access | Granular via scopes |
@@ -1,12 +1,12 @@
---
title: Webhooks
icon: satellite-dish
description: Receba notificações quando os registros mudarem — HTTP POST para o seu endpoint a cada criação, atualização ou exclusão.
description: Get notified when records change — HTTP POST to your endpoint on every create, update, or delete.
---
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
Twenty envia um HTTP POST para sua URL sempre que um registro é criado, atualizado ou excluído. Todos os tipos de objeto estão cobertos, incluindo objetos personalizados.
Twenty sends an HTTP POST to your URL whenever a record is created, updated, or deleted. All object types are covered, including custom objects.
## Criar Webhook
@@ -1,28 +1,28 @@
---
title: Programadores
description: Crie aplicativos, use a API, hospede por conta própria ou contribua para o código-fonte.
description: Build apps, use the API, self-host, or contribute to the codebase.
---
import { CardTitle } from "/snippets/card-title.mdx"
<CardGroup cols={3}>
<Card href="/l/pt/developers/extend/apps/getting-started" img="/images/user-guide/halftone/dev-apps.png">
<CardTitle>Aplicativos</CardTitle>
Estenda o Twenty com objetos personalizados, lógica do lado do servidor, componentes de UI e agentes de IA — tudo como pacotes em TypeScript.
<CardTitle>Apps</CardTitle>
Extend Twenty with custom objects, server-side logic, UI components, and AI agents — all as TypeScript packages.
</Card>
<Card href="/l/pt/developers/extend/api" img="/images/user-guide/halftone/dev-api.png">
<CardTitle>API</CardTitle>
APIs REST e GraphQL, webhooks e OAuth.
REST and GraphQL APIs, webhooks, and OAuth.
</Card>
<Card href="/l/pt/developers/self-host/capabilities/docker-compose" img="/images/user-guide/halftone/dev-self-host.png">
<CardTitle>Auto-hospedar</CardTitle>
Execute o Twenty na sua própria infraestrutura.
<CardTitle>Self-Host</CardTitle>
Run Twenty on your own infrastructure.
</Card>
<Card href="/l/pt/developers/contribute/capabilities/local-setup" img="/images/user-guide/halftone/dev-contribute.png">
<CardTitle>Contribuir</CardTitle>
Configure o monorepo localmente e envie PRs.
<CardTitle>Contribute</CardTitle>
Set up the monorepo locally and submit PRs.
</Card>
</CardGroup>
@@ -1,12 +1,12 @@
---
title: Команды
title: Commands
icon: terminal
description: Полезные команды для разработки Twenty.
description: Useful commands for developing Twenty.
---
Команды можно запускать из корня репозитория с помощью `npx nx`. Используйте `npx nx run {project}:{command}` для явного указания цели.
Commands can be run from the repository root using `npx nx`. Use `npx nx run {project}:{command}` for explicit targeting.
## Запуск приложения
## Starting the App
```bash
npx nx start twenty-front # Frontend dev server (http://localhost:3001)
@@ -14,7 +14,7 @@ npx nx start twenty-server # Backend server (http://localhost:3000)
npx nx run twenty-server:worker # Background worker
```
## База данных
## Database
```bash
npx nx database:reset twenty-server # Reset and seed database
@@ -22,7 +22,7 @@ npx nx run twenty-server:database:migrate:prod # Run migrations
npx nx run twenty-server:database:migrate:generate --name <name> --type <fast|slow> # Generate a migration
```
## Линтинг
## Linting
```bash
npx nx lint:diff-with-main twenty-front # Lint changed files (fastest)
@@ -30,7 +30,7 @@ npx nx lint:diff-with-main twenty-server
npx nx lint twenty-front --configuration=fix # Auto-fix
```
## Проверка типов
## Type Checking
```bash
npx nx typecheck twenty-front
@@ -68,7 +68,7 @@ npx nx run twenty-front:lingui:extract # Extract strings
npx nx run twenty-front:lingui:compile # Compile translations
```
## Сборка
## Build
```bash
npx nx build twenty-shared # Must be built first
@@ -110,7 +110,7 @@ const value = process.env.MY_VALUE ?? 'default';
onClick?.();
```
## Именование
## Называние
* **Variables**: camelCase, descriptive (`email` not `value`, `fieldMetadata` not `fm`)
* **Constants**: SCREAMING_SNAKE_CASE
@@ -1,14 +1,14 @@
---
title: Архитектура
description: Как работают приложения Twenty — изоляция в песочнице, жизненный цикл и базовые элементы.
description: How Twenty apps work — sandboxing, lifecycle, and the building blocks.
icon: sitemap
---
Приложения Twenty — это пакеты TypeScript, которые расширяют ваше рабочее пространство пользовательскими объектами, логикой, компонентами интерфейса и возможностями ИИ. Они работают на платформе Twenty с полной изоляцией в песочнице и контролем прав доступа.
Twenty apps are TypeScript packages that extend your workspace with custom objects, logic, UI components, and AI capabilities. They run on the Twenty platform with full sandboxing and permission controls.
## Как работают приложения
## How apps work
Приложение — это набор **сущностей**, объявленных с помощью функций `defineEntity()` из пакета `twenty-sdk`. SDK обнаруживает эти объявления посредством анализа AST на этапе сборки и формирует **манифест** — полное описание того, что ваше приложение добавляет в рабочее пространство.
An app is a collection of **entities** declared using `defineEntity()` functions from the `twenty-sdk` package. The SDK detects these declarations via AST analysis at build time and produces a **manifest** — a complete description of what your app adds to a workspace.
```
your-app/
@@ -29,32 +29,32 @@ your-app/
```
<Note>
**Организация файлов — на ваше усмотрение.** Обнаружение сущностей основано на AST — SDK находит вызовы `export default defineEntity(...)` независимо от расположения файла. Структура папок выше — это соглашение, а не требование.
**File organization is up to you.** Entity detection is AST-based — the SDK finds `export default defineEntity(...)` calls regardless of where the file lives. The folder structure above is a convention, not a requirement.
</Note>
## Типы сущностей
## Entity types
| Сущность | Назначение | Документация |
| ------------------------ | ------------------------------------------------------------ | ---------------------------------------------------------------- |
| **Приложение** | Идентификация приложения, права доступа, переменные | [Модель данных](/l/ru/developers/extend/apps/data-model) |
| **Роль** | Наборы прав для объектов и полей | [Модель данных](/l/ru/developers/extend/apps/data-model) |
| **Object** | Пользовательские таблицы данных с полями | [Модель данных](/l/ru/developers/extend/apps/data-model) |
| **Поле** | Расширение существующих объектов, определение связей | [Модель данных](/l/ru/developers/extend/apps/data-model) |
| **Логическая функция** | Серверный TypeScript с триггерами | [Логические функции](/l/ru/developers/extend/apps/logic-functions) |
| **Компонент фронтенда** | Изолированный в песочнице интерфейс React на странице Twenty | [Компоненты фронтенда](/l/ru/developers/extend/apps/front-components) |
| **Навык** | Повторно используемые инструкции для ИИ-агента | [Навыки и агенты](/l/ru/developers/extend/apps/skills-and-agents) |
| **Агент** | ИИ-агенты с пользовательскими промптами | [Навыки и агенты](/l/ru/developers/extend/apps/skills-and-agents) |
| **Представление** | Преднастроенные представления списков записей | [Макет](/l/ru/developers/extend/apps/layout) |
| **Пункт меню навигации** | Пользовательские элементы боковой панели | [Макет](/l/ru/developers/extend/apps/layout) |
| **Макет страницы** | Пользовательские вкладки и виджеты страницы записи | [Макет](/l/ru/developers/extend/apps/layout) |
| Сущность | Назначение | Документация |
| ------------------------ | ----------------------------------------- | ------------------------------------------------------------- |
| **Application** | App identity, permissions, variables | [Data Model](/l/ru/developers/extend/apps/data-model) |
| **Role** | Permission sets for objects and fields | [Data Model](/l/ru/developers/extend/apps/data-model) |
| **Object** | Custom data tables with fields | [Data Model](/l/ru/developers/extend/apps/data-model) |
| **Поле** | Extend existing objects, define relations | [Data Model](/l/ru/developers/extend/apps/data-model) |
| **Logic Function** | Server-side TypeScript with triggers | [Логические функции](/l/ru/developers/extend/apps/logic-functions) |
| **Front Component** | Sandboxed React UI in Twenty's page | [Front Components](/l/ru/developers/extend/apps/front-components) |
| **Skill** | Reusable AI agent instructions | [Skills & Agents](/l/ru/developers/extend/apps/skills-and-agents) |
| **Agent** | AI assistants with custom prompts | [Skills & Agents](/l/ru/developers/extend/apps/skills-and-agents) |
| **View** | Pre-configured record list views | [Layout](/l/ru/developers/extend/apps/layout) |
| **Navigation Menu Item** | Custom sidebar entries | [Layout](/l/ru/developers/extend/apps/layout) |
| **Page Layout** | Custom record page tabs and widgets | [Layout](/l/ru/developers/extend/apps/layout) |
## Изоляция в песочнице
## Sandboxing
* **Логические функции** выполняются в изолированных процессах Node.js на сервере. Они получают доступ к данным только через типизированный клиент API, ограниченный правами роли приложения.
* **Компоненты фронтенда** запускаются в Web Workers с использованием Remote DOM — изолированы от основной страницы, но при этом рендерят нативные элементы DOM (не iframes). Они взаимодействуют с Twenty через хостовый API обмена сообщениями.
* **Права доступа** применяются на уровне API. Токен времени выполнения (`TWENTY_APP_ACCESS_TOKEN`) выводится из роли, определённой в `defineApplication()`.
* **Logic functions** run in isolated Node.js processes on the server. They only access data through the typed API client, scoped to the app's role permissions.
* **Front components** run in Web Workers using Remote DOM — sandboxed from the main page but rendering native DOM elements (not iframes). They communicate with Twenty via a message-passing host API.
* **Permissions** are enforced at the API level. The runtime token (`TWENTY_APP_ACCESS_TOKEN`) is derived from the role defined in `defineApplication()`.
## Жизненный цикл приложения
## App lifecycle
```
┌─────────────────────────────────────────────────────────┐
@@ -73,32 +73,32 @@ your-app/
└─────────────────────────────────────────────────────────┘
```
* **`yarn twenty dev`** — следит за исходными файлами и синхронизирует изменения в реальном времени с подключённым сервером Twenty. Типизированный клиент API автоматически пересоздаётся при изменении схемы.
* **`yarn twenty build`** — компилирует TypeScript, упаковывает логические функции и фронтенд-компоненты с помощью esbuild и формирует манифест.
* **Хуки до/после установки** — необязательные логические функции, которые выполняются во время установки. См. [Логические функции](/l/ru/developers/extend/apps/logic-functions) для подробностей.
* **`yarn twenty dev`** — watches your source files and live-syncs changes to a connected Twenty server. The typed API client is regenerated automatically when the schema changes.
* **`yarn twenty build`** — compiles TypeScript, bundles logic functions and front components with esbuild, and produces a manifest.
* **Pre/post-install hooks** — optional logic functions that run during installation. See [Logic Functions](/l/ru/developers/extend/apps/logic-functions) for details.
## Следующие шаги
<CardGroup cols={2}>
<Card title="Модель данных" icon="database" href="/l/ru/developers/extend/apps/data-model">
Определяйте объекты, поля, роли и связи.
Define objects, fields, roles, and relations.
</Card>
<Card title="Логические функции" icon="bolt" href="/l/ru/developers/extend/apps/logic-functions">
Серверные функции с HTTP-, cron- и событийными триггерами.
Server-side functions with HTTP, cron, and event triggers.
</Card>
<Card title="Компоненты фронтенда" icon="window-maximize" href="/l/ru/developers/extend/apps/front-components">
Изолированные в песочнице компоненты React внутри интерфейса Twenty.
Sandboxed React components inside Twenty's UI.
</Card>
<Card title="Макет" icon="table-columns" href="/l/ru/developers/extend/apps/layout">
Представления, пункты навигации и макеты страниц записей.
Views, navigation items, and record page layouts.
</Card>
<Card title="Навыки и агенты" icon="robot" href="/l/ru/developers/extend/apps/skills-and-agents">
ИИ-навыки и агенты с пользовательскими промптами.
AI skills and agents with custom prompts.
</Card>
<Card title="CLI и тестирование" icon="terminal" href="/l/ru/developers/extend/apps/cli-and-testing">
Команды CLI, тестирование, ассеты, удалённые модули и CI.
<Card title="CLI & Testing" icon="terminal" href="/l/ru/developers/extend/apps/cli-and-testing">
CLI commands, testing, assets, remotes, and CI.
</Card>
<Card title="Публикация" icon="rocket" href="/l/ru/developers/extend/apps/publishing">
Разверните на сервере или опубликуйте в маркетплейсе.
Deploy to a server or publish to the marketplace.
</Card>
</CardGroup>
@@ -1,6 +1,6 @@
---
title: CLI и тестирование
description: Команды CLI, настройка тестирования, публичные ресурсы, пакеты npm, удалённые репозитории и конфигурация CI.
title: CLI & Testing
description: CLI commands, testing setup, public assets, npm packages, remotes, and CI configuration.
icon: terminal
---
@@ -1,6 +1,6 @@
---
title: Навыки и агенты
description: Определите навыки и агентов ИИ для вашего приложения.
description: Define AI skills and agents for your app.
icon: robot
---
@@ -8,7 +8,7 @@ icon: robot
Skills and agents are currently in alpha. Функция работает, но продолжает развиваться.
</Warning>
Приложения могут определять возможности ИИ, которые находятся внутри рабочего пространства — повторно используемые инструкции для навыков и агенты с настраиваемыми системными подсказками.
Apps can define AI capabilities that live inside the workspace — reusable skill instructions and agents with custom system prompts.
<AccordionGroup>
<Accordion title="defineSkill" description="Определяйте навыки ИИ-агентов">
@@ -1,23 +1,23 @@
---
title: OAuth
icon: ключ
description: Поток авторизационного кода с PKCE и учётными данными клиента для доступа между серверами.
description: Authorization code flow with PKCE and client credentials for server-to-server access.
---
Twenty реализует OAuth 2.0 с потоком авторизационного кода + PKCE для пользовательских приложений и с учётными данными клиента для доступа между серверами. Клиенты регистрируются динамически по [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591) — никакой ручной настройки в панели управления.
Twenty implements OAuth 2.0 with authorization code + PKCE for user-facing apps and client credentials for server-to-server access. Clients are registered dynamically via [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591) — no manual setup in a dashboard.
## Когда использовать OAuth
## When to Use OAuth
| Сценарий | Метод аутентификации |
| ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ |
| Внутренние скрипты, автоматизация | [Ключ API](/l/ru/developers/extend/api#authentication) |
| Внешнее приложение, действующее от имени пользователя | **OAuth — авторизационный код** |
| Между серверами, без контекста пользователя | **OAuth — клиентские учётные данные** |
| Приложение Twenty с расширениями пользовательского интерфейса (UI) | [Приложения](/l/ru/developers/extend/apps/getting-started) (OAuth обрабатывается автоматически) |
| Сценарий | Auth Method |
| --------------------------------------- | -------------------------------------------------------------------------------- |
| Internal scripts, automation | [API Key](/l/ru/developers/extend/api#authentication) |
| External app acting on behalf of a user | **OAuth — Authorization Code** |
| Server-to-server, no user context | **OAuth — Client Credentials** |
| Twenty App with UI extensions | [Apps](/l/ru/developers/extend/apps/getting-started) (OAuth is handled automatically) |
## Зарегистрировать клиента
## Register a Client
Twenty поддерживает **динамическую регистрацию клиентов** по [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591). Ручная настройка не требуется — регистрируйте программно:
Twenty supports **dynamic client registration** per [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591). No manual setup needed — register programmatically:
```bash
POST /oauth/register
@@ -31,7 +31,7 @@ Content-Type: application/json
}
```
**Ответ:**
**Response:**
```json
{
@@ -43,23 +43,23 @@ Content-Type: application/json
```
<Warning>
Храните `client_secret` в надёжном месте — позже его нельзя будет получить.
Store the `client_secret` securely — it cannot be retrieved later.
</Warning>
## Области действия
| Область действия | Доступ |
| ---------------- | ----------------------------------------------------------- |
| `api` | Полный доступ на чтение/запись к Core и Metadata API |
| `profile` | Чтение информации профиля аутентифицированного пользователя |
| Scope | Доступ |
| --------- | ---------------------------------------------------- |
| `api` | Full read/write access to the Core and Metadata APIs |
| `профиль` | Read the authenticated user's profile information |
Запрашивайте области действия как строку, разделённую пробелами: `scope=api profile`
Request scopes as a space-separated string: `scope=api profile`
## Поток авторизационного кода
## Authorization Code Flow
Используйте этот поток, когда ваше приложение действует от имени пользователя Twenty.
Use this flow when your app acts on behalf of a Twenty user.
### 1. Перенаправьте пользователя для авторизации
### 1. Redirect the user to authorize
```
GET /oauth/authorize?
@@ -72,29 +72,29 @@ GET /oauth/authorize?
code_challenge_method=S256
```
| Параметр | Обязательно | Описание |
| ----------------------- | ------------- | --------------------------------------------------------------- |
| `client_id` | Да | Идентификатор вашего зарегистрированного клиента |
| `response_type` | Да | Должно быть `code` |
| `redirect_uri` | Да | Должен совпадать с зарегистрированным redirect URI |
| `scope` | Нет | Области действия, разделённые пробелами (по умолчанию `api`) |
| `state` | Рекомендуется | Случайная строка для предотвращения CSRF-атак |
| `code_challenge` | Рекомендуется | Вызов PKCE (хэш SHA-256 от верификатора, в кодировке base64url) |
| `code_challenge_method` | Рекомендуется | Должно быть `S256` при использовании PKCE |
| Параметр | Обязательно | Описание |
| ----------------------- | ------------- | ------------------------------------------------------------ |
| `client_id` | Да | Your registered client ID |
| `response_type` | Да | Must be `code` |
| `redirect_uri` | Да | Must match a registered redirect URI |
| `scope` | Нет | Space-separated scopes (defaults to `api`) |
| `состояние` | Рекомендуется | Random string to prevent CSRF attacks |
| `code_challenge` | Рекомендуется | PKCE challenge (SHA-256 hash of verifier, base64url-encoded) |
| `code_challenge_method` | Рекомендуется | Must be `S256` when using PKCE |
Пользователь видит экран согласия и подтверждает или отклоняет доступ.
The user sees a consent screen and approves or denies access.
### 2. Обработайте обратный вызов
### 2. Handle the callback
После авторизации Twenty перенаправляет обратно на ваш `redirect_uri`:
After authorization, Twenty redirects back to your `redirect_uri`:
```
https://myapp.com/callback?code=AUTH_CODE&state=random_state_value
```
Проверьте, что `state` совпадает с отправленным значением.
Verify that `state` matches what you sent.
### 3. Обменяйте код на токены
### 3. Exchange the code for tokens
```bash
POST /oauth/token
@@ -108,7 +108,7 @@ client_secret=YOUR_CLIENT_SECRET&
code_verifier=YOUR_PKCE_VERIFIER
```
**Ответ:**
**Response:**
```json
{
@@ -119,14 +119,14 @@ code_verifier=YOUR_PKCE_VERIFIER
}
```
### 4. Используйте токен доступа
### 4. Use the access token
```bash
GET /rest/companies
Authorization: Bearer ACCESS_TOKEN
```
### 5. Обновляйте при истечении срока действия
### 5. Refresh when expired
```bash
POST /oauth/token
@@ -138,9 +138,9 @@ client_id=YOUR_CLIENT_ID&
client_secret=YOUR_CLIENT_SECRET
```
## Поток клиентских учётных данных
## Client Credentials Flow
Для интеграций между серверами без участия пользователя:
For server-to-server integrations with no user interaction:
```bash
POST /oauth/token
@@ -152,38 +152,38 @@ client_secret=YOUR_CLIENT_SECRET&
scope=api
```
Возвращаемый токен имеет доступ на уровне рабочей области и не привязан к конкретному пользователю.
The returned token has workspace-level access, not tied to any specific user.
## Обнаружение сервера
## Server Discovery
Twenty публикует свою конфигурацию OAuth на стандартной конечной точке обнаружения:
Twenty publishes its OAuth configuration at a standard discovery endpoint:
```
GET /.well-known/oauth-authorization-server
```
Это возвращает все конечные точки, поддерживаемые типы грантов, области действия и возможности — полезно для создания универсальных OAuth-клиентов.
This returns all endpoints, supported grant types, scopes, and capabilities — useful for building generic OAuth clients.
## Сводка конечных точек API
## API Endpoints Summary
| Конечная точка | Назначение |
| ----------------------------------------- | --------------------------------- |
| `/.well-known/oauth-authorization-server` | Обнаружение метаданных сервера |
| `/oauth/register` | Динамическая регистрация клиентов |
| `/oauth/authorize` | Авторизация пользователя |
| `/oauth/token` | Обмен и обновление токена |
| Конечная точка | Назначение |
| ----------------------------------------- | --------------------------- |
| `/.well-known/oauth-authorization-server` | Server metadata discovery |
| `/oauth/register` | Dynamic client registration |
| `/oauth/authorize` | User authorization |
| `/oauth/token` | Token exchange and refresh |
| Среда | Базовый URL |
| --------------------------- | ------------------------ |
| **Облако** | `https://api.twenty.com` |
| **Самостоятельный хостинг** | `https://{your-domain}` |
## OAuth против ключей API
## OAuth vs API Keys
| | API ключи | OAuth |
| ------------------------------- | ------------------------------------- | ----------------------------------------------------- |
| **Настройка** | Создаются в разделе «Настройки» | Зарегистрировать клиента, реализовать поток |
| **Контекст пользователя** | Отсутствует (уровень рабочей области) | Права конкретного пользователя |
| **Лучше всего подходит для** | Скрипты, внутренние инструменты | Внешние приложения, мультипользовательские интеграции |
| **Ротация токенов** | Вручную | Автоматическая с помощью refresh-токенов |
| **Доступ по областям действия** | Полный доступ к API | Детализированный через области действия |
| | API ключи | OAuth |
| ---------------------------- | ----------------------- | -------------------------------------- |
| **Настройка** | Generate in Settings | Register a client, implement flow |
| **User context** | None (workspace-level) | Specific user's permissions |
| **Лучше всего подходит для** | Scripts, internal tools | External apps, multi-user integrations |
| **Token rotation** | Вручную | Automatic via refresh tokens |
| **Scoped access** | Full API access | Granular via scopes |
@@ -1,12 +1,12 @@
---
title: Вебхуки
icon: satellite-dish
description: Получайте уведомления при изменении записей — HTTP POST на вашу конечную точку при каждом создании, обновлении или удалении.
description: Get notified when records change — HTTP POST to your endpoint on every create, update, or delete.
---
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
Twenty отправляет запрос HTTP POST на ваш URL каждый раз, когда запись создаётся, обновляется или удаляется. Поддерживаются все типы объектов, включая пользовательские объекты.
Twenty sends an HTTP POST to your URL whenever a record is created, updated, or deleted. All object types are covered, including custom objects.
## Создать вебхук
@@ -1,12 +1,12 @@
---
title: Komutlar
title: Commands
icon: terminal
description: Twenty geliştirmek için yararlı komutlar.
description: Useful commands for developing Twenty.
---
Komutlar, deponun kök dizininden `npx nx` kullanılarak çalıştırılabilir. Açık hedefleme için `npx nx run {project}:{command}` kullanın.
Commands can be run from the repository root using `npx nx`. Use `npx nx run {project}:{command}` for explicit targeting.
## Uygulamayı Başlatma
## Starting the App
```bash
npx nx start twenty-front # Frontend dev server (http://localhost:3001)
@@ -14,7 +14,7 @@ npx nx start twenty-server # Backend server (http://localhost:3000)
npx nx run twenty-server:worker # Background worker
```
## Veritabanı
## Database
```bash
npx nx database:reset twenty-server # Reset and seed database
@@ -22,7 +22,7 @@ npx nx run twenty-server:database:migrate:prod # Run migrations
npx nx run twenty-server:database:migrate:generate --name <name> --type <fast|slow> # Generate a migration
```
## Lint denetimi
## Linting
```bash
npx nx lint:diff-with-main twenty-front # Lint changed files (fastest)
@@ -30,7 +30,7 @@ npx nx lint:diff-with-main twenty-server
npx nx lint twenty-front --configuration=fix # Auto-fix
```
## Tip denetimi
## Type Checking
```bash
npx nx typecheck twenty-front
@@ -68,7 +68,7 @@ npx nx run twenty-front:lingui:extract # Extract strings
npx nx run twenty-front:lingui:compile # Compile translations
```
## Derleme
## Build
```bash
npx nx build twenty-shared # Must be built first
@@ -1,14 +1,14 @@
---
title: Mimari
description: Twenty uygulamaları nasıl çalışır — korumalı alan, yaşam döngüsü ve yapı taşları.
description: How Twenty apps work — sandboxing, lifecycle, and the building blocks.
icon: sitemap
---
Twenty uygulamaları, çalışma alanınızı özel nesneler, mantık, UI bileşenleri ve yapay zekâ yetenekleriyle genişleten TypeScript paketleridir. Tam korumalı alan ve izin kontrolleriyle Twenty platformunda çalışırlar.
Twenty apps are TypeScript packages that extend your workspace with custom objects, logic, UI components, and AI capabilities. They run on the Twenty platform with full sandboxing and permission controls.
## Uygulamalar nasıl çalışır
## How apps work
Bir uygulama, `twenty-sdk` paketindeki `defineEntity()` işlevleri kullanılarak bildirilen **varlıklar** koleksiyonudur. SDK, bu bildirimleri derleme sırasında AST analiziyle algılar ve bir **manifest** üretir — uygulamanızın bir çalışma alanına neler eklediğinin eksiksiz bir açıklaması.
An app is a collection of **entities** declared using `defineEntity()` functions from the `twenty-sdk` package. The SDK detects these declarations via AST analysis at build time and produces a **manifest** — a complete description of what your app adds to a workspace.
```
your-app/
@@ -29,32 +29,32 @@ your-app/
```
<Note>
**Dosya organizasyonu size kalmış.** Varlık algılama AST tabanlıdır — dosyanın nerede bulunduğundan bağımsız olarak SDK `export default defineEntity(...)` çağrılarını bulur. Yukarıdaki klasör yapısı bir gelenektir, zorunluluk değildir.
**File organization is up to you.** Entity detection is AST-based — the SDK finds `export default defineEntity(...)` calls regardless of where the file lives. The folder structure above is a convention, not a requirement.
</Note>
## Varlık türleri
## Entity types
| Varlık | Amaç | Belgeler |
| ------------------------ | ------------------------------------------------------------- | --------------------------------------------------------------------- |
| **Uygulama** | Uygulama kimliği, izinler, değişkenler | [Veri Modeli](/l/tr/developers/extend/apps/data-model) |
| **Rol** | Nesneler ve alanlar için izin kümeleri | [Veri Modeli](/l/tr/developers/extend/apps/data-model) |
| **Object** | Alanlara sahip özel veri tabloları | [Veri Modeli](/l/tr/developers/extend/apps/data-model) |
| **Alan** | Mevcut nesneleri genişletme, ilişkileri tanımlama | [Veri Modeli](/l/tr/developers/extend/apps/data-model) |
| **Mantık İşlevi** | Tetikleyicilerle sunucu tarafı TypeScript | [Mantıksal İşlevler](/l/tr/developers/extend/apps/logic-functions) |
| **Ön Uç Bileşeni** | Twenty'nin sayfasında korumalı alanda React kullanıcı arayüzü | [Ön Uç Bileşenleri](/l/tr/developers/extend/apps/front-components) |
| **Beceri** | Yeniden kullanılabilir yapay zekâ temsilcisi yönergeleri | [Beceriler ve Temsilciler](/l/tr/developers/extend/apps/skills-and-agents) |
| **Temsilci** | Özel istemlere sahip yapay zekâ asistanları | [Beceriler ve Temsilciler](/l/tr/developers/extend/apps/skills-and-agents) |
| **Görünüm** | Önceden yapılandırılmış kayıt listesi görünümleri | [Düzen](/l/tr/developers/extend/apps/layout) |
| **Gezinme Menüsü Öğesi** | Özel kenar çubuğu öğeleri | [Düzen](/l/tr/developers/extend/apps/layout) |
| **Sayfa Düzeni** | Özel kayıt sayfası sekmeleri ve widget'lar | [Düzen](/l/tr/developers/extend/apps/layout) |
| Varlık | Amaç | Belgeler |
| ------------------------ | ----------------------------------------- | ------------------------------------------------------------- |
| **Application** | App identity, permissions, variables | [Data Model](/l/tr/developers/extend/apps/data-model) |
| **Role** | Permission sets for objects and fields | [Data Model](/l/tr/developers/extend/apps/data-model) |
| **Object** | Custom data tables with fields | [Data Model](/l/tr/developers/extend/apps/data-model) |
| **Alan** | Extend existing objects, define relations | [Data Model](/l/tr/developers/extend/apps/data-model) |
| **Logic Function** | Server-side TypeScript with triggers | [Mantıksal İşlevler](/l/tr/developers/extend/apps/logic-functions) |
| **Front Component** | Sandboxed React UI in Twenty's page | [Front Components](/l/tr/developers/extend/apps/front-components) |
| **Skill** | Reusable AI agent instructions | [Skills & Agents](/l/tr/developers/extend/apps/skills-and-agents) |
| **Agent** | AI assistants with custom prompts | [Skills & Agents](/l/tr/developers/extend/apps/skills-and-agents) |
| **View** | Pre-configured record list views | [Layout](/l/tr/developers/extend/apps/layout) |
| **Navigation Menu Item** | Custom sidebar entries | [Layout](/l/tr/developers/extend/apps/layout) |
| **Page Layout** | Custom record page tabs and widgets | [Layout](/l/tr/developers/extend/apps/layout) |
## Korumalı alan
## Sandboxing
* **Mantık işlevleri** sunucuda yalıtılmış Node.js işlemlerinde çalışır. Verilere yalnızca, kapsamı uygulamanın rol izinleriyle sınırlandırılmış tipli API istemcisi üzerinden erişirler.
* **Ön uç bileşenleri**, Remote DOM kullanan Web Worker'larda çalışır — ana sayfadan yalıtılmıştır ancak yerel DOM öğelerini (iframe'ler değil) oluşturur. Twenty ile mesaj iletimi yapan bir ana makine API'si aracılığıyla iletişim kurarlar.
* **İzinler**, API düzeyinde uygulanır. Çalışma zamanı belirteci (`TWENTY_APP_ACCESS_TOKEN`), `defineApplication()` içinde tanımlanan rolden türetilir.
* **Logic functions** run in isolated Node.js processes on the server. They only access data through the typed API client, scoped to the app's role permissions.
* **Front components** run in Web Workers using Remote DOM — sandboxed from the main page but rendering native DOM elements (not iframes). They communicate with Twenty via a message-passing host API.
* **Permissions** are enforced at the API level. The runtime token (`TWENTY_APP_ACCESS_TOKEN`) is derived from the role defined in `defineApplication()`.
## Uygulama yaşam döngüsü
## App lifecycle
```
┌─────────────────────────────────────────────────────────┐
@@ -73,32 +73,32 @@ your-app/
└─────────────────────────────────────────────────────────┘
```
* **`yarn twenty dev`** — kaynak dosyalarınızı izler ve bağlı bir Twenty sunucusuna değişiklikleri canlı olarak senkronize eder. Şema değiştiğinde tipli API istemcisi otomatik olarak yeniden oluşturulur.
* **`yarn twenty build`** — TypeScript'i derler, mantık işlevlerini ve ön uç bileşenlerini esbuild ile paketler ve bir manifest üretir.
* **Kurulum öncesi/sonrası kancaları** — kurulum sırasında çalışan isteğe bağlı mantık işlevleri. Ayrıntılar için [Mantık İşlevleri](/l/tr/developers/extend/apps/logic-functions) bölümüne bakın.
* **`yarn twenty dev`** — watches your source files and live-syncs changes to a connected Twenty server. The typed API client is regenerated automatically when the schema changes.
* **`yarn twenty build`** — compiles TypeScript, bundles logic functions and front components with esbuild, and produces a manifest.
* **Pre/post-install hooks** — optional logic functions that run during installation. See [Logic Functions](/l/tr/developers/extend/apps/logic-functions) for details.
## Sonraki adımlar
<CardGroup cols={2}>
<Card title="Veri modeli" icon="database" href="/l/tr/developers/extend/apps/data-model">
Nesneleri, alanları, rolleri ve ilişkileri tanımlayın.
Define objects, fields, roles, and relations.
</Card>
<Card title="Mantıksal işlevler" icon="bolt" href="/l/tr/developers/extend/apps/logic-functions">
HTTP, cron ve olay tetikleyicilerine sahip sunucu tarafı işlevler.
Server-side functions with HTTP, cron, and event triggers.
</Card>
<Card title="Ön uç bileşenleri" icon="window-maximize" href="/l/tr/developers/extend/apps/front-components">
Twenty'nin kullanıcı arayüzünde korumalı alanda React bileşenleri.
Sandboxed React components inside Twenty's UI.
</Card>
<Card title="Düzen" icon="table-columns" href="/l/tr/developers/extend/apps/layout">
Görünümler, gezinme öğeleri ve kayıt sayfası düzenleri.
Views, navigation items, and record page layouts.
</Card>
<Card title="Beceriler ve Ajanlar" icon="robot" href="/l/tr/developers/extend/apps/skills-and-agents">
Özel istemlere sahip yapay zekâ becerileri ve temsilciler.
AI skills and agents with custom prompts.
</Card>
<Card title="CLI ve Testler" icon="terminal" href="/l/tr/developers/extend/apps/cli-and-testing">
CLI komutları, test, varlıklar, uzak depolar ve CI.
<Card title="CLI & Testing" icon="terminal" href="/l/tr/developers/extend/apps/cli-and-testing">
CLI commands, testing, assets, remotes, and CI.
</Card>
<Card title="Yayımlama" icon="rocket" href="/l/tr/developers/extend/apps/publishing">
Bir sunucuya dağıtın veya pazaryerine yayınlayın.
Deploy to a server or publish to the marketplace.
</Card>
</CardGroup>
@@ -1,6 +1,6 @@
---
title: CLI ve Testler
description: CLI komutları, test kurulumu, genel varlıklar, npm paketleri, uzaklar ve CI yapılandırması.
title: CLI & Testing
description: CLI commands, testing setup, public assets, npm packages, remotes, and CI configuration.
icon: terminal
---
@@ -1,6 +1,6 @@
---
title: Beceriler ve Ajanlar
description: Uygulamanız için yapay zekâ yetenekleri ve ajanları tanımlayın.
description: Define AI skills and agents for your app.
icon: robot
---
@@ -8,7 +8,7 @@ icon: robot
Skills and agents are currently in alpha. Özellik işlevsel ancak hâlâ gelişmekte.
</Warning>
Uygulamalar, çalışma alanıinde yer alan yapay zekâ yeteneklerini — yeniden kullanılabilir yetenek yönergeleri ve özel sistem istemlerine sahip ajanları — tanımlayabilir.
Apps can define AI capabilities that live inside the workspace — reusable skill instructions and agents with custom system prompts.
<AccordionGroup>
<Accordion title="defineSkill" description="Yapay zekâ ajanı yeteneklerini tanımlayın">
@@ -1,23 +1,23 @@
---
title: OAuth
icon: anahtar
description: PKCE'li yetkilendirme kodu akışı ve sunucudan sunucuya erişim için istemci kimlik bilgileri.
description: Authorization code flow with PKCE and client credentials for server-to-server access.
---
Twenty, kullanıcıya dönük uygulamalar için yetkilendirme kodu + PKCE'yi ve sunucudan sunucuya erişim için istemci kimlik bilgilerini kullanarak OAuth 2.0'ı uygular. İstemciler [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591) aracılığıyla dinamik olarak kaydedilir — bir kontrol panelinde manuel kurulum gerekmez.
Twenty implements OAuth 2.0 with authorization code + PKCE for user-facing apps and client credentials for server-to-server access. Clients are registered dynamically via [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591) — no manual setup in a dashboard.
## OAuth Ne Zaman Kullanılır
## When to Use OAuth
| Senaryo | Kimlik Doğrulama Yöntemi |
| --------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| Dahili betikler, otomasyon | [API Anahtarı](/l/tr/developers/extend/api#authentication) |
| Bir kullanıcının adına hareket eden harici uygulama | **OAuth — Yetkilendirme Kodu** |
| Sunucudan sunucuya, kullanıcı bağlamı yok | **OAuth — İstemci Kimlik Bilgileri** |
| UI uzantılarına sahip Twenty Uygulaması | [Uygulamalar](/l/tr/developers/extend/apps/getting-started) (OAuth otomatik olarak yönetilir) |
| Senaryo | Auth Method |
| --------------------------------------- | -------------------------------------------------------------------------------- |
| Internal scripts, automation | [API Key](/l/tr/developers/extend/api#authentication) |
| External app acting on behalf of a user | **OAuth — Authorization Code** |
| Server-to-server, no user context | **OAuth — Client Credentials** |
| Twenty App with UI extensions | [Apps](/l/tr/developers/extend/apps/getting-started) (OAuth is handled automatically) |
## Bir İstemci Kaydedin
## Register a Client
Twenty, [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591) uyarınca **dinamik istemci kaydını** destekler. Manuel kurulum gerekmez — programatik olarak kaydedin:
Twenty supports **dynamic client registration** per [RFC 7591](https://datatracker.ietf.org/doc/html/rfc7591). No manual setup needed — register programmatically:
```bash
POST /oauth/register
@@ -31,7 +31,7 @@ Content-Type: application/json
}
```
**Yanıt:**
**Response:**
```json
{
@@ -43,23 +43,23 @@ Content-Type: application/json
```
<Warning>
`client_secret` değerini güvenli bir şekilde saklayın — daha sonra geri alınamaz.
Store the `client_secret` securely — it cannot be retrieved later.
</Warning>
## Kapsamlar
| Kapsam | Erişim |
| --------- | ---------------------------------------------------------- |
| `api` | Core ve Metadata API'lerine tam okuma/yazma erişimi |
| `profile` | Kimliği doğrulanmış kullanıcının profil bilgilerini okuyun |
| Scope | Erişim |
| -------- | ---------------------------------------------------- |
| `api` | Full read/write access to the Core and Metadata APIs |
| `profil` | Read the authenticated user's profile information |
Kapsamları boşlukla ayrılmış bir dize olarak isteyin: `scope=api profile`
Request scopes as a space-separated string: `scope=api profile`
## Yetkilendirme Kodu Akışı
## Authorization Code Flow
Uygulamanız bir Twenty kullanıcısı adına hareket ettiğinde bu akışı kullanın.
Use this flow when your app acts on behalf of a Twenty user.
### 1. Kullanıcıyı yetkilendirmek için yönlendirin
### 1. Redirect the user to authorize
```
GET /oauth/authorize?
@@ -72,29 +72,29 @@ GET /oauth/authorize?
code_challenge_method=S256
```
| Parametre | Zorunlu | Açıklama |
| ----------------------- | -------- | ------------------------------------------------------------------------ |
| `client_id` | Evet | Kayıtlı istemci kimliğiniz |
| `response_type` | Evet | `code` olmalıdır |
| `redirect_uri` | Evet | Kayıtlı bir yönlendirme URI'siyle eşleşmelidir |
| `scope` | Hayır | Boşlukla ayrılmış kapsamlar (varsayılan: `api`) |
| `state` | Önerilen | CSRF saldırılarını önlemek için rastgele bir dize |
| `code_challenge` | Önerilen | PKCE challenge (doğrulayıcının SHA-256 karması, base64url ile kodlanmış) |
| `code_challenge_method` | Önerilen | PKCE kullanılırken `S256` olmalıdır |
| Parametre | Zorunlu | Açıklama |
| ----------------------- | -------- | ------------------------------------------------------------ |
| `client_id` | Evet | Your registered client ID |
| `response_type` | Evet | Must be `code` |
| `redirect_uri` | Evet | Must match a registered redirect URI |
| `scope` | Hayır | Space-separated scopes (defaults to `api`) |
| `durum` | Önerilen | Random string to prevent CSRF attacks |
| `code_challenge` | Önerilen | PKCE challenge (SHA-256 hash of verifier, base64url-encoded) |
| `code_challenge_method` | Önerilen | Must be `S256` when using PKCE |
Kullanıcı bir onay ekranı görür ve erişimi onaylar veya reddeder.
The user sees a consent screen and approves or denies access.
### 2. Geri dönüşü işleyin
### 2. Handle the callback
Yetkilendirmeden sonra, Twenty `redirect_uri` adresinize geri yönlendirir:
After authorization, Twenty redirects back to your `redirect_uri`:
```
https://myapp.com/callback?code=AUTH_CODE&state=random_state_value
```
`state` değerinin gönderdiğinizle eşleştiğini doğrulayın.
Verify that `state` matches what you sent.
### 3. Kodu belirteçlerle değiş tokuş edin
### 3. Exchange the code for tokens
```bash
POST /oauth/token
@@ -108,7 +108,7 @@ client_secret=YOUR_CLIENT_SECRET&
code_verifier=YOUR_PKCE_VERIFIER
```
**Yanıt:**
**Response:**
```json
{
@@ -119,14 +119,14 @@ code_verifier=YOUR_PKCE_VERIFIER
}
```
### 4. Erişim belirtecini kullanın
### 4. Use the access token
```bash
GET /rest/companies
Authorization: Bearer ACCESS_TOKEN
```
### 5. Süresi dolduğunda yenileyin
### 5. Refresh when expired
```bash
POST /oauth/token
@@ -138,9 +138,9 @@ client_id=YOUR_CLIENT_ID&
client_secret=YOUR_CLIENT_SECRET
```
## İstemci Kimlik Bilgileri Akışı
## Client Credentials Flow
Sunucudan sunucuya, kullanıcı etkileşimi olmayan entegrasyonlar için:
For server-to-server integrations with no user interaction:
```bash
POST /oauth/token
@@ -152,38 +152,38 @@ client_secret=YOUR_CLIENT_SECRET&
scope=api
```
Döndürülen belirteç, belirli bir kullanıcıya bağlı olmayan, çalışma alanı düzeyinde erişime sahiptir.
The returned token has workspace-level access, not tied to any specific user.
## Sunucu Keşfi
## Server Discovery
Twenty, OAuth yapılandırmasını standart bir keşif uç noktasında yayımlar:
Twenty publishes its OAuth configuration at a standard discovery endpoint:
```
GET /.well-known/oauth-authorization-server
```
Bu, tüm uç noktaları, desteklenen grant türlerini, kapsamları ve yetenekleri döndürür — genel OAuth istemcileri oluşturmak için kullanışlıdır.
This returns all endpoints, supported grant types, scopes, and capabilities — useful for building generic OAuth clients.
## API Uç Noktaları Özeti
## API Endpoints Summary
| Uç nokta | Amaç |
| ----------------------------------------- | ----------------------------- |
| `/.well-known/oauth-authorization-server` | Sunucu üstverisi keşfi |
| `/oauth/register` | Dinamik istemci kaydı |
| `/oauth/authorize` | Kullanıcı yetkilendirmesi |
| `/oauth/token` | Belirteç değişimi ve yenileme |
| Uç nokta | Amaç |
| ----------------------------------------- | --------------------------- |
| `/.well-known/oauth-authorization-server` | Server metadata discovery |
| `/oauth/register` | Dynamic client registration |
| `/oauth/authorize` | User authorization |
| `/oauth/token` | Token exchange and refresh |
| Ortam | Temel URL |
| ---------------------------- | ------------------------ |
| **Bulut** | `https://api.twenty.com` |
| **Kendi Kendine Barındırma** | `https://{your-domain}` |
## OAuth ve API Anahtarları
## OAuth vs API Keys
| | API Anahtarları | OAuth |
| ------------------------- | -------------------------- | -------------------------------------------------- |
| **Kurulum** | Ayarlar'da oluşturun | Bir istemci kaydedin, akışı uygulayın |
| **Kullanıcı bağlamı** | Yok (çalışma alanı düzeyi) | Belirli bir kullanıcının izinleri |
| **En uygun** | Betikler, dahili araçlar | Harici uygulamalar, çok kullanıcılı entegrasyonlar |
| **Belirteç döndürme** | Manuel | Yenileme belirteçleri aracılığıyla otomatik olarak |
| **Kapsama dayalı erişim** | Tam API erişimi | Kapsamlar aracılığıyla ayrıntılı |
| | API Anahtarları | OAuth |
| ------------------ | ----------------------- | -------------------------------------- |
| **Kurulum** | Generate in Settings | Register a client, implement flow |
| **User context** | None (workspace-level) | Specific user's permissions |
| **En uygun** | Scripts, internal tools | External apps, multi-user integrations |
| **Token rotation** | Manuel | Automatic via refresh tokens |
| **Scoped access** | Full API access | Granular via scopes |
@@ -1,12 +1,12 @@
---
title: Webhook'lar
icon: satellite-dish
description: Kayıtlar değiştiğinde bildirim alın — her oluşturma, güncelleme veya silme işleminde uç noktanıza HTTP POST gönderilir.
description: Get notified when records change — HTTP POST to your endpoint on every create, update, or delete.
---
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
Bir kayıt oluşturulduğunda, güncellendiğinde veya silindiğinde Twenty URL'inize bir HTTP POST gönderir. Özel nesneler dahil tüm nesne türleri kapsanır.
Twenty sends an HTTP POST to your URL whenever a record is created, updated, or deleted. All object types are covered, including custom objects.
## Webhook oluştur
@@ -1,6 +1,6 @@
---
title: Sorun Giderme
icon: anahtar
icon: wrench
---
## Sorun Giderme
@@ -1,6 +1,6 @@
---
title: İkonlar
icon: ikonlar
icon: i̇konlar
---
<Frame>
@@ -9,13 +9,13 @@ Twenty'nin yerleşimi üç düzeyde özelleştirilebilir: uygulamada nasıl gezi
Sol kenar çubuğu tamamen özelleştirilebilir. Şunları yapabilirsiniz:
* **Öğeleri yeniden sıralayın** sürükleyip bırakarak
* **Öğeleri sürükleyip bırakarak yeniden sıralayın**
* **Klasörler oluşturun** ilgili nesneleri ve görünümleri gruplamak için
* **Nesneleri gizleyin** — kullanmadıklarınızı
* **Özel bağlantılar ekleyin** harici araçlara
* **Favorileri sabitleyin** görünümlere, kayıtlara veya aramalara hızlı erişim için
[Gezinme referansı →](/l/tr/user-guide/layout/capabilities/navigation)
[Gezinme başvurusu →](/l/tr/user-guide/layout/capabilities/navigation)
## Görünümler
@@ -42,4 +42,4 @@ Bir kaydı açtığınızda, ayrıntı sayfası yapılandırılabilir sekmeler v
Komut menüsünden yerleşim özelleştirme moduna girin (`Cmd+K` → "Kayıt sayfası yerleşimini düzenle").
[Kayıt sayfaları referansı →](/l/tr/user-guide/layout/capabilities/record-pages)
[Kayıt sayfaları başvurusu →](/l/tr/user-guide/layout/capabilities/record-pages)
@@ -1,12 +1,12 @@
---
title: 命令
title: Commands
icon: terminal
description: 用于开发 Twenty 的实用命令。
description: Useful commands for developing Twenty.
---
可以在存储库根目录使用 `npx nx` 运行命令。 使用 `npx nx run {project}:{command}` 显式指定目标。
Commands can be run from the repository root using `npx nx`. Use `npx nx run {project}:{command}` for explicit targeting.
## 启动应用
## Starting the App
```bash
npx nx start twenty-front # Frontend dev server (http://localhost:3001)
@@ -14,7 +14,7 @@ npx nx start twenty-server # Backend server (http://localhost:3000)
npx nx run twenty-server:worker # Background worker
```
## 数据库
## Database
```bash
npx nx database:reset twenty-server # Reset and seed database
@@ -22,7 +22,7 @@ npx nx run twenty-server:database:migrate:prod # Run migrations
npx nx run twenty-server:database:migrate:generate --name <name> --type <fast|slow> # Generate a migration
```
## 代码检查
## Linting
```bash
npx nx lint:diff-with-main twenty-front # Lint changed files (fastest)
@@ -30,7 +30,7 @@ npx nx lint:diff-with-main twenty-server
npx nx lint twenty-front --configuration=fix # Auto-fix
```
## 类型检查
## Type Checking
```bash
npx nx typecheck twenty-front
@@ -68,7 +68,7 @@ npx nx run twenty-front:lingui:extract # Extract strings
npx nx run twenty-front:lingui:compile # Compile translations
```
## 构建
## Build
```bash
npx nx build twenty-shared # Must be built first

Some files were not shown because too many files have changed in this diff Show More