Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
3527db9866 | ||
|
|
ff6cc138dd |
@@ -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
-1
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: أفضل الممارسات
|
||||
icon: نجمة
|
||||
icon: star
|
||||
---
|
||||
|
||||
تحدد هذه الوثيقة أفضل الممارسات التي يجب اتباعها عند العمل في الواجهة الأمامية.
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: أوامر الواجهة الأمامية
|
||||
icon: الطرفية
|
||||
icon: terminal
|
||||
---
|
||||
|
||||
## الأوامر المفيدة
|
||||
|
||||
+1
-1
@@ -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
-1
@@ -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 stav — použijte `useState` nebo atomy
|
||||
* Používejte rodiny atomů a selektory pro seznamy
|
||||
* Prefer atoms over prop drilling
|
||||
* Don't use `useRef` for state — use `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 relací | [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
|
||||
|
||||
* **Logické 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í logické funkce a frontendové komponenty pomocí esbuild a vytvoří manifest.
|
||||
* **Pre/post-install hooks** — volitelné logické 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 izolací.
|
||||
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
|
||||
---
|
||||
|
||||
Logické 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` | Dynamická 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 agents — all 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 Zustand — verwenden Sie `useState` oder Atome
|
||||
* Verwenden Sie Atomfamilien und Selektoren für Listen
|
||||
* Prefer atoms over prop drilling
|
||||
* Don't use `useRef` for state — use `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 funktionieren — Sandboxing, Lebenszyklus und Bausteine.
|
||||
description: How Twenty apps work — sandboxing, 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=""Eigenschaften"">
|
||||
|
||||
|
||||
| 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=""Eigenschaften"">
|
||||
|
||||
|
||||
| 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=""Eigenschaften"">
|
||||
|
||||
|
||||
| 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=""Eigenschaften"">
|
||||
|
||||
|
||||
| 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=""Eigenschaften"">
|
||||
|
||||
|
||||
| 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=""Eigenschaften"">
|
||||
|
||||
|
||||
| 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=""Eigenschaften"">
|
||||
|
||||
|
||||
| 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
-1
@@ -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ı iç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
Reference in New Issue
Block a user