Zum Hauptinhalt springen
In diesem Tutorial erstellen Sie Document Generator – eine App, die wiederverwendbare Vorlagen in personalisierte Dokumente umwandelt, indem sie die bereits in Ihrem CRM vorhandenen Daten nutzt. Schreiben Sie eine Vorlage einmal mit {{placeholders}} und generieren Sie dann mit einem Klick ein ausgefülltes Dokument für jede Person oder jedes Unternehmen – über das Befehlsmenü, über einen KI-Agenten oder über einen Workflow.
Ein generiertes Verkaufsangebot

​
Was Sie lernen werden

Jedes Kapitel fügt eine Funktion hinzu. Am Ende haben Sie den Großteil des SDK kennengelernt.
KapitelFunktionReferenz
1. DatenmodellObjekte, Felder und eine RelationDaten
2. Dokumente generierenEine Logikfunktion (KI-Tool + Workflow-Aktion), die eine Markdown-Vorlage ausfüllt und ein fertiges PDF anhängtLogikfunktionen
3. HTTP-RoutenAusliefern von JSON und einer teilbaren HTML-Seite über RoutenLogikfunktionen
4. Die UI erstellenAnsichten, Navigation, Befehlsmenü und Frontend-Komponenten, die eine Vorschau eines Dokuments anzeigen und eine Vorlage bearbeitenLayout
5. Ein KI-AgentAgent + SkillSkills & Agenten
6. VeröffentlichenIn den Marketplace veröffentlichenVeröffentlichen

​
Voraussetzungen

Sie sollten den Quick Start abgeschlossen haben: einen lokalen Twenty-Server, der auf Port 2020 läuft, und die CLI, die damit authentifiziert ist. Falls nicht, erstellen und starten Sie jetzt einen: 
npx create-twenty-app@latest document-generator
cd document-generator
yarn twenty dev
Lesen Sie lieber den fertigen Code? Die vollständige App befindet sich unter packages/twenty-apps/examples/document-generator. Jedes der folgenden Codebeispiele ist daraus kopiert.

​
Wie die App zusammenpasst

Eine Vorlage mit Platzhaltern wird in ein fertiges Dokument mit PDF generiert, ausgelöst über das Befehlsmenü, einen KI-Agenten, einen Workflow oder einen teilbaren Link
Sie schreiben eine Vorlage einmal in einem Rich-Text-Editor mit {{placeholders}}. Die Auswahl einer Vorlage und eines CRM-Datensatzes füllt die Platzhalter aus und speichert ein fertiges Dokument (mit einer PDF-Datei). Alles andere – das Befehlsmenü, der KI-Agent, der Workflow-Schritt, der teilbare Link – ist nur eine andere Möglichkeit, denselben Generator auszulösen.

​
Diesen Kreislauf am Laufen halten

Lassen Sie yarn twenty dev während des gesamten Tutorials in einem Terminal laufen. Jedes Mal, wenn Sie eine Datei unter src/ hinzufügen oder bearbeiten, wird sie innerhalb weniger Sekunden mit Ihrem Server synchronisiert, sodass Sie beobachten können, wie jede Funktion in der UI erscheint, während Sie sie entwickeln.

Beginnen Sie mit der Entwicklung →

Kapitel 1: Dokumente und Vorlagen modellieren.