105 lines
7.9 KiB
Plaintext
105 lines
7.9 KiB
Plaintext
---
|
|
title: Arhitectură
|
|
description: Cum funcționează aplicațiile Twenty — izolarea (sandboxing), ciclul de viață și elementele de bază.
|
|
icon: sitemap
|
|
---
|
|
|
|
Aplicațiile Twenty sunt pachete TypeScript care vă extind spațiul de lucru cu obiecte personalizate, logică, componente UI și capabilități AI. Acestea rulează pe platforma Twenty, cu izolare completă (sandboxing) și controale de permisiuni.
|
|
|
|
## Cum funcționează aplicațiile
|
|
|
|
O aplicație este o colecție de **entități** declarate folosind funcțiile `defineEntity()` din pachetul `twenty-sdk`. SDK-ul detectează aceste declarații prin analiză AST în timpul construirii și produce un **manifest** — o descriere completă a ceea ce aplicația dvs. adaugă unui spațiu de lucru.
|
|
|
|
```
|
|
your-app/
|
|
├── src/
|
|
│ ├── application-config.ts ← defineApplication (required, one per app)
|
|
│ ├── roles/ ← defineRole
|
|
│ ├── objects/ ← defineObject
|
|
│ ├── fields/ ← defineField
|
|
│ ├── logic-functions/ ← defineLogicFunction
|
|
│ ├── front-components/ ← defineFrontComponent
|
|
│ ├── skills/ ← defineSkill
|
|
│ ├── agents/ ← defineAgent
|
|
│ ├── views/ ← defineView
|
|
│ ├── navigation-menu-items/ ← defineNavigationMenuItem
|
|
│ └── page-layouts/ ← definePageLayout
|
|
├── public/ ← Static assets (images, icons)
|
|
└── package.json
|
|
```
|
|
|
|
<Note>
|
|
**Organizarea fișierelor ține de dvs.** Detectarea entităților este bazată pe AST — SDK-ul găsește apelurile `export default defineEntity(...)` indiferent unde se află fișierul. Structura de foldere de mai sus este o convenție, nu o cerință.
|
|
</Note>
|
|
|
|
## Tipuri de entități
|
|
|
|
| Entitate | Scop | Documentație |
|
|
| -------------------------------- | ----------------------------------------------------------- | ---------------------------------------------------------------- |
|
|
| **Aplicație** | Identitatea aplicației, permisiuni, variabile | [Model de date](/l/ro/developers/extend/apps/data-model) |
|
|
| **Rol** | Seturi de permisiuni pentru obiecte și câmpuri | [Model de date](/l/ro/developers/extend/apps/data-model) |
|
|
| **Obiect** | Tabele de date personalizate cu câmpuri | [Model de date](/l/ro/developers/extend/apps/data-model) |
|
|
| **Câmp** | Extindeți obiectele existente, definiți relații | [Model de date](/l/ro/developers/extend/apps/data-model) |
|
|
| **Funcție logică** | TypeScript pe partea de server cu declanșatoare | [Funcții logice](/l/ro/developers/extend/apps/logic-functions) |
|
|
| **Componentă front-end** | UI React izolat în pagina Twenty | [Componente front-end](/l/ro/developers/extend/apps/front-components) |
|
|
| **Abilitate** | Instrucțiuni reutilizabile pentru agenți AI | [Abilități și agenți](/l/ro/developers/extend/apps/skills-and-agents) |
|
|
| **Agent** | Agenți AI cu prompturi personalizate | [Abilități și agenți](/l/ro/developers/extend/apps/skills-and-agents) |
|
|
| **Vizualizare** | Vizualizări preconfigurate ale listelor de înregistrări | [Aspect](/l/ro/developers/extend/apps/layout) |
|
|
| **Element de meniu de navigare** | Intrări personalizate în bara laterală | [Aspect](/l/ro/developers/extend/apps/layout) |
|
|
| **Layout pagină** | File și widgeturi personalizate ale paginii de înregistrare | [Aspect](/l/ro/developers/extend/apps/layout) |
|
|
|
|
## Izolare (sandboxing)
|
|
|
|
* **Funcțiile logice** rulează în procese Node.js izolate pe server. Acestea accesează datele doar prin clientul API tipizat, limitat de permisiunile rolului aplicației.
|
|
* **Componentele front-end** rulează în Web Workers folosind Remote DOM — izolate de pagina principală, dar randând elemente DOM native (nu iframes). Acestea comunică cu Twenty printr-un API al gazdei bazat pe transmiterea de mesaje.
|
|
* **Permisiunile** sunt aplicate la nivelul API-ului. Tokenul de rulare (`TWENTY_APP_ACCESS_TOKEN`) este derivat din rolul definit în `defineApplication()`.
|
|
|
|
## Ciclul de viață al aplicației
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────┐
|
|
│ Development │
|
|
│ npx create-twenty-app → yarn twenty dev (live sync) │
|
|
├─────────────────────────────────────────────────────────┤
|
|
│ Build & Deploy │
|
|
│ yarn twenty build → yarn twenty deploy │
|
|
├─────────────────────────────────────────────────────────┤
|
|
│ Install flow │
|
|
│ upload → [pre-install] → metadata migration → │
|
|
│ generate SDK → [post-install] │
|
|
├─────────────────────────────────────────────────────────┤
|
|
│ Publish │
|
|
│ npm publish → appears in Twenty marketplace │
|
|
└─────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
* **`yarn twenty dev`** — monitorizează fișierele sursă și sincronizează în timp real modificările către un server Twenty conectat. Clientul API tipizat este regenerat automat atunci când schema se schimbă.
|
|
* **`yarn twenty build`** — compilează TypeScript, împachetează funcțiile logice și componentele front-end cu esbuild și produce un manifest.
|
|
* **Hook-uri pre/post-instalare** — funcții logice opționale care rulează în timpul instalării. Consultați [Funcții logice](/l/ro/developers/extend/apps/logic-functions) pentru detalii.
|
|
|
|
## Pașii următori
|
|
|
|
<CardGroup cols={2}>
|
|
<Card title="Model de date" icon="database" href="/l/ro/developers/extend/apps/data-model">
|
|
Definiți obiecte, câmpuri, roluri și relații.
|
|
</Card>
|
|
<Card title="Funcții logice" icon="bolt" href="/l/ro/developers/extend/apps/logic-functions">
|
|
Funcții pe partea de server cu declanșatoare HTTP, cron și de evenimente.
|
|
</Card>
|
|
<Card title="Componente front-end" icon="window-maximize" href="/l/ro/developers/extend/apps/front-components">
|
|
Componente React izolate în interfața Twenty.
|
|
</Card>
|
|
<Card title="Aspect" icon="table-columns" href="/l/ro/developers/extend/apps/layout">
|
|
Vizualizări, elemente de navigare și layout-uri ale paginilor de înregistrare.
|
|
</Card>
|
|
<Card title="Abilități și agenți" icon="robot" href="/l/ro/developers/extend/apps/skills-and-agents">
|
|
Abilități și agenți AI cu prompturi personalizate.
|
|
</Card>
|
|
<Card title="CLI & Testare" icon="terminal" href="/l/ro/developers/extend/apps/cli-and-testing">
|
|
Comenzi CLI, testare, resurse, remote-uri și CI.
|
|
</Card>
|
|
<Card title="Publicare" icon="rocket" href="/l/ro/developers/extend/apps/publishing">
|
|
Implementați pe un server sau publicați în marketplace.
|
|
</Card>
|
|
</CardGroup>
|