102 lines
8.1 KiB
Plaintext
102 lines
8.1 KiB
Plaintext
---
|
||
title: Konzepte
|
||
description: Wie Twenty-Apps funktionieren – Entitätenmodell, Sandboxing und Installationslebenszyklus.
|
||
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.
|
||
|
||
## Wie Apps funktionieren
|
||
|
||
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. Diese Funktionen validieren Ihre Konfiguration zur Build-Zeit und bieten IDE-Autovervollständigung sowie Typsicherheit.
|
||
|
||
```
|
||
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>
|
||
**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.
|
||
</Note>
|
||
|
||
## Entitätstypen
|
||
|
||
| Entität | Zweck | Dokumentation |
|
||
| -------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------- |
|
||
| **Anwendung** | App-Identität, Standardrolle, Variablen | [Anwendungskonfiguration](/l/de/developers/extend/apps/config/application) |
|
||
| **Rolle** | Berechtigungssätze für Objekte und Felder | [Rollen & Berechtigungen](/l/de/developers/extend/apps/config/roles) |
|
||
| **Objekt** | Benutzerdefinierte Datensatztypen mit Feldern | [Objekte](/l/de/developers/extend/apps/data/objects) |
|
||
| **Feld** | Felder zu Objekten aus anderen Apps hinzufügen | [Objekte erweitern](/l/de/developers/extend/apps/data/extending-objects) |
|
||
| **Beziehung** | Bidirektionale Verknüpfungen zwischen Objekten | [Beziehungen](/l/de/developers/extend/apps/data/relations) |
|
||
| **Logikfunktion** | Serverseitiges TypeScript mit Triggern | [Logikfunktionen](/l/de/developers/extend/apps/logic/logic-functions) |
|
||
| **Skill** | Wiederverwendbare Anweisungen für KI-Agenten | [Skills & Agenten](/l/de/developers/extend/apps/logic/skills-and-agents) |
|
||
| **Agent** | KI-Assistenten mit benutzerdefinierten Prompts | [Skills & Agenten](/l/de/developers/extend/apps/logic/skills-and-agents) |
|
||
| **Verbindungsanbieter** | OAuth-Zugangsdaten für Drittanbieter-APIs | [Verbindungen](/l/de/developers/extend/apps/logic/connections) |
|
||
| **Ansicht** | Vorkonfigurierte Listenansichten für Datensätze | [Ansichten](/l/de/developers/extend/apps/layout/views) |
|
||
| **Navigationsmenüeintrag** | Benutzerdefinierte Seitenleisten-Einträge | [Navigationsmenüeinträge](/l/de/developers/extend/apps/layout/navigation-menu-items) |
|
||
| **Seitenlayout** | Tabs und Widgets auf der Detailseite eines Datensatzes | [Seiten-Layouts](/l/de/developers/extend/apps/layout/page-layouts) |
|
||
| **Frontend-Komponente** | Isolierte React-UI innerhalb von Twenty | [Frontend-Komponenten](/l/de/developers/extend/apps/layout/front-components) |
|
||
| **Befehlsmenü-Eintrag** | Schnellaktionen und Cmd+K-Einträge | [Befehlsmenü-Einträge](/l/de/developers/extend/apps/layout/command-menu-items) |
|
||
|
||
## 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.
|
||
|
||
## App-Lebenszyklus
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ Development │
|
||
│ npx create-twenty-app → yarn twenty dev (live sync) │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ Build & Deploy │
|
||
│ yarn twenty dev:build → yarn twenty app:publish │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ Install flow │
|
||
│ upload → [pre-install] → metadata migration → │
|
||
│ generate SDK → [post-install] │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ Publish │
|
||
│ npm publish → appears in Twenty marketplace │
|
||
└─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
* **`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 dev:build`** — kompiliert TypeScript, bündelt Logikfunktionen und Frontend-Komponenten mit esbuild und erzeugt ein Manifest.
|
||
* **Pre/Post-Install-Hooks** — optionale Funktionen, die während der Installation ausgeführt werden. Details finden Sie unter [Install Hooks](/l/de/developers/extend/apps/config/install-hooks).
|
||
|
||
## Nächste Schritte
|
||
|
||
<CardGroup cols={2}>
|
||
<Card title="Konfiguration" icon="screwdriver-wrench" href="/l/de/developers/extend/apps/config/overview">
|
||
App-Identität, Standardrolle und Install-Hooks.
|
||
</Card>
|
||
<Card title="Daten" icon="database" href="/l/de/developers/extend/apps/data/overview">
|
||
Objekte, Felder und bidirektionale Relationen.
|
||
</Card>
|
||
<Card title="Logik" icon="bolt" href="/l/de/developers/extend/apps/logic/overview">
|
||
Logikfunktionen, Skills, Agenten und OAuth-Verbindungen.
|
||
</Card>
|
||
<Card title="Layout" icon="table-columns" href="/l/de/developers/extend/apps/layout/overview">
|
||
Ansichten, Navigation, Seiten-Layouts, Frontend-Komponenten.
|
||
</Card>
|
||
<Card title="Operationen" icon="rocket" href="/l/de/developers/extend/apps/operations/overview">
|
||
CLI, Tests, Remotes, CI und das Veröffentlichen Ihrer App.
|
||
</Card>
|
||
</CardGroup>
|