upstream-twenty/packages/twenty-docs/l/de/developers/extend/apps/getting-started/concepts.mdx

---
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)                                                   |
| **Gemeinsame Abhängigkeiten** | Von den Frontend-Komponenten der App gemeinsam genutzte Abhängigkeiten, die in package.json deklariert sind | [Gemeinsame Abhängigkeiten](/l/de/developers/extend/apps/layout/front-components#sharing-dependencies-across-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, der entweder als die Person fungiert, die die Ausführung ausgelöst hat, oder als die App selbst. Siehe [Wessen Zugriff ein Aufruf verwendet](/l/de/developers/extend/apps/logic/logic-functions#whose-access-a-call-uses).
* **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. Zwei Laufzeit-Token werden eingefügt, die beide von der mit `defineApplicationRole()` deklarierten Rolle abgeleitet sind; das Standard-Token wird weiter auf das eingeschränkt, was die auslösende Person tun kann, wenn jemand hinter der Ausführung steht.

## 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] → … → [uninstall]       │
├─────────────────────────────────────────────────────────┤
│ 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 und Uninstall-Hooks** — optionale Funktionen, die während der Installation oder direkt vor der Deinstallation 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 sowie Install- und Uninstall-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>