i18n - docs translations (#22624)
Created by Github action <!-- This is an auto-generated description by cubic. --> <a href="https://cubic.dev/pr/twentyhq/twenty/pull/22624?utm_source=github" target="_blank" rel="noopener noreferrer" data-no-image-dialog="true"><picture><source media="(prefers-color-scheme: dark)" srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img alt="Review in cubic" src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a> <!-- End of auto-generated description by cubic. --> Co-authored-by: github-actions <github-actions@twenty.com>
This commit is contained in:
github-actions[bot]
committed by
GitHub
GitHub
parent
6966af735b
commit
b6e74004d2
+1
-1
@@ -69,7 +69,7 @@ export default defineAgent({
|
||||
المستند الذي أنشأه — الذي يظهر الآن في عرض **Documents** لديك،
|
||||
تمامًا مثل مسارات قائمة الأوامر وسير العمل.
|
||||
|
||||
هذه هي ثمرة كشف المنطق كأداة: **دالة واحدة، والعديد من نقاط الدخول** —
|
||||
هذه هي ثمرة إتاحة المنطق كأداة: **دالة واحدة، وكثير من نقاط الدخول** —
|
||||
قائمة الأوامر، وHTTP، وخطوة سير العمل، والآن اللغة الطبيعية.
|
||||
|
||||
**بعد هذه الخطوة:** التطبيق كامل الميزة ومفيد حقا. حان الوقت
|
||||
|
||||
+3
-3
@@ -4,7 +4,7 @@ icon: table-columns
|
||||
description: المشاهدة، الملاحة الجانبية، الأوامر، والمكونات الأمامية.
|
||||
---
|
||||
|
||||
الآن يمكن الوصول إلى الكائنات فقط من خلال الإعدادات. لنمنح التطبيق حضورًا حقيقيًا في واجهة المستخدم: عروض قائمة، وعناصر في الشريط الجانبي، وأمر **Generate document** بنقرة واحدة، ومكوّن واجهة أمامية في صفحة السجل لِـ**preview** مستند، وعلامة تبويب **editor** نصيّة منسّقة (rich-text) أصلية للقوالب.
|
||||
الآن يمكن الوصول إلى الكائنات فقط من خلال الإعدادات. لنمنح التطبيق حضورًا حقيقيًا في واجهة المستخدم: طرق عرض القوائم، وعناصر في الشريط الجانبي، وأمر **إنشاء مستند** بنقرة واحدة، ومكوّن واجهة أمامية في صفحة السجل من أجل **معاينة** مستند، وعلامة تبويب **محرر** نص منسق أصلية للقوالب.
|
||||
|
||||
## وجهات النظر والملاحة
|
||||
|
||||
@@ -140,7 +140,7 @@ export default defineCommandMenuItem({
|
||||
|
||||
## جرب التدفق بأكمله
|
||||
|
||||
افتح **People**، وحدِّد شخصًا، ثم اضغط <kbd>⌘K</kbd> / <kbd>Ctrl K</kbd>.
|
||||
افتح **People**، حدِّد شخصًا، ثم اضغط <kbd>⌘K</kbd> / <kbd>Ctrl K</kbd>.
|
||||
يظهر "إنشاء مستند"، وسم مع التطبيق الخاص بك:
|
||||
|
||||
<Frame caption="يظهر الأمر عندما يتم اختيار شخص.">
|
||||
@@ -279,7 +279,7 @@ export default definePageLayout({
|
||||
```
|
||||
|
||||
يخزن حقل "RICH_TEXT" كتلة المحرر JSON وإسقاط Markdown
|
||||
على حد سواء. تقوم قناة التوليد بقراءة إسقاط Markdown هذا، بحيث تظل العناصر البديلة placeholders وملف PDF وصفحة الويب القابلة للمشاركة تعمل دون أي تغيير — اطّلع على الملف الكامل [`template-record.page-layout.ts`](https://github.com/twentyhq/twenty/blob/main/packages/twenty-apps/examples/document-generator/src/page-layouts/template-record.page-layout.ts).
|
||||
على حد سواء. خط أنابيب التوليد يقرأ إسقاط الـ Markdown هذا، لذا فإن العناصر النائبة وملف PDF وصفحة الويب القابلة للمشاركة تستمر جميعها في العمل دون تغيير — راجع الملف الكامل [`template-record.page-layout.ts`](https://github.com/twentyhq/twenty/blob/main/packages/twenty-apps/examples/document-generator/src/page-layouts/template-record.page-layout.ts).
|
||||
الآن المحررون يكتبون قوالب في محرر نص غني مناسب:
|
||||
|
||||
<Frame caption="علامة التبويب النموذج: محرر النص الغني الأصلي 20 مرتبط بحقل الجسم.">
|
||||
|
||||
+2
-2
@@ -80,8 +80,8 @@ yarn test:unit # unit tests
|
||||
yarn twenty dev --once --dry-run # preview the metadata diff
|
||||
```
|
||||
|
||||
يُظهر التشغيل التجريبي dry run بالضبط ما سيتغيّر على الخادم بدون تطبيقه —
|
||||
وهو فحص أخير جيّد للتأكّد من سلامة كل شيء. انظر
|
||||
يعرض التشغيل التجريبي بالضبط ما سيتغيّر على الخادم من دون تطبيقه —
|
||||
وهو فحص نهائي جيّد للسلامة. انظر
|
||||
[Testing](/l/ar/developers/extend/apps/operations/testing) و
|
||||
[المزامنة والاسترداد](/l/ar/developers/extend/apps/operations/sync-and-recovery).
|
||||
|
||||
|
||||
+14
-14
@@ -4,26 +4,26 @@ icon: wand-magic-sparkles
|
||||
description: Vytvořte skutečnou aplikaci Twenty, která generuje personalizované dokumenty z vašich CRM dat.
|
||||
---
|
||||
|
||||
V tomto tutoriálu vytvoříte **Generátor dokumentů** — aplikaci, která převádí znovu použitelná šablonová nastavení na personalizované dokumenty pomocí dat, která už máte ve svém CRM.
|
||||
V tomto tutoriálu vytvoříte **Generátor dokumentů** — aplikaci, která převádí znovupoužitelné šablony na personalizované dokumenty pomocí dat, která už máte ve svém CRM.
|
||||
|
||||
Napište šablonu jednou pomocí `{{placeholders}}` a poté vygenerujte vyplněný dokument pro libovolnou osobu nebo společnost jedním kliknutím — z příkazové nabídky, od AI agenta nebo z workflow.
|
||||
|
||||
<Frame caption="Jeden šablonový dokument, vygenerovaný pro konkrétní osobu, otevřený jako stránka připravená k tisku.">
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/07-rendered-document.png" alt="Vygenerovaný dokument obchodního návrhu" />
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/07-rendered-document.png" alt="Vygenerovaný dokument obchodní nabídky" />
|
||||
</Frame>
|
||||
|
||||
## Co se naučíte
|
||||
|
||||
Každá kapitola přidá jednu schopnost. Na konci se dotknete většiny SDK.
|
||||
Každá kapitola přidá jednu schopnost. Na konci se seznámíte s většinou SDK.
|
||||
|
||||
| Kapitola | Schopnost | Referenční dokumentace |
|
||||
| ----------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
|
||||
| [1. Datový model](/l/cs/developers/extend/apps/tutorials/document-generator/data-model) | Objekty, pole a relace | [Data](/l/cs/developers/extend/apps/data/overview) |
|
||||
| [2. Generování dokumentů](/l/cs/developers/extend/apps/tutorials/document-generator/generating-documents) | Logická funkce (nástroj AI + akce workflow), která vyplní šablonu v Markdownu a připojí vyladěné PDF | [Logické funkce](/l/cs/developers/extend/apps/logic/logic-functions) |
|
||||
| [3. HTTP trasy](/l/cs/developers/extend/apps/tutorials/document-generator/http-routes) | Poskytování JSONu a sdílené HTML stránky z tras | [Logické funkce](/l/cs/developers/extend/apps/logic/logic-functions) |
|
||||
| [4. Vytváření uživatelského rozhraní](/l/cs/developers/extend/apps/tutorials/document-generator/building-the-ui) | Zobrazení, navigace, příkazová nabídka a front komponenty, které zobrazují náhled dokumentu a upravují šablonu | [Rozvržení](/l/cs/developers/extend/apps/layout/overview) |
|
||||
| [5. Agent AI](/l/cs/developers/extend/apps/tutorials/document-generator/ai-agent) | Agent + dovednost | [Dovednosti a agenti](/l/cs/developers/extend/apps/logic/skills-and-agents) |
|
||||
| [6. Publikování](/l/cs/developers/extend/apps/tutorials/document-generator/publishing) | Dodejte ho na marketplace | [Publikování](/l/cs/developers/extend/apps/operations/publishing) |
|
||||
| Kapitola | Schopnost | Referenční dokumentace |
|
||||
| ----------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
|
||||
| [1. Datový model](/l/cs/developers/extend/apps/tutorials/document-generator/data-model) | Objekty, pole a relace | [Data](/l/cs/developers/extend/apps/data/overview) |
|
||||
| [2. Generování dokumentů](/l/cs/developers/extend/apps/tutorials/document-generator/generating-documents) | Logická funkce (nástroj AI + akce workflow), která vyplní šablonu v Markdownu a připojí vyladěné PDF | [Logické funkce](/l/cs/developers/extend/apps/logic/logic-functions) |
|
||||
| [3. HTTP trasy](/l/cs/developers/extend/apps/tutorials/document-generator/http-routes) | Poskytování JSONu a sdílitelné HTML stránky z tras | [Logické funkce](/l/cs/developers/extend/apps/logic/logic-functions) |
|
||||
| [4. Vytváření uživatelského rozhraní](/l/cs/developers/extend/apps/tutorials/document-generator/building-the-ui) | Zobrazení, navigace, příkazová nabídka a frontendové komponenty, které zobrazují náhled dokumentu a upravují šablonu | [Rozvržení](/l/cs/developers/extend/apps/layout/overview) |
|
||||
| [5. Agent AI](/l/cs/developers/extend/apps/tutorials/document-generator/ai-agent) | Agent + dovednost | [Dovednosti a agenti](/l/cs/developers/extend/apps/logic/skills-and-agents) |
|
||||
| [6. Publikování](/l/cs/developers/extend/apps/tutorials/document-generator/publishing) | Publikujte ji na marketplace | [Publikování](/l/cs/developers/extend/apps/operations/publishing) |
|
||||
|
||||
## Předpoklady
|
||||
|
||||
@@ -47,7 +47,7 @@ Každý úryvek níže je z ní zkopírovaný.
|
||||
## Jak do sebe aplikace zapadá
|
||||
|
||||
<Frame>
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/how-it-fits.svg" alt="Šablona se zástupnými symboly je převedena na vyladěný dokument s PDF souborem, spuštěná z příkazové nabídky, agenta AI, workflow nebo sdíleného odkazu" />
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/how-it-fits.svg" alt="Šablona se zástupnými symboly se převede na vyladěný dokument s PDF souborem; generování lze spustit z příkazové nabídky, agenta AI, workflow nebo pomocí sdílitelného odkazu" />
|
||||
</Frame>
|
||||
|
||||
**Šablonu** napíšete jednou v rich-text editoru pomocí `{{placeholders}}`. Výběr
|
||||
@@ -58,9 +58,9 @@ jeden generátor.
|
||||
|
||||
## Udržujte tento cyklus v chodu
|
||||
|
||||
Nechte `yarn twenty dev` běžet v terminálu po celý návod. Pokaždé, když
|
||||
Nechte `yarn twenty dev` běžet v terminálu po celý tutoriál. Pokaždé, když
|
||||
přidáte nebo upravíte soubor pod `src/`, během několika sekund se znovu synchronizuje s vaším serverem, takže můžete sledovat, jak se každá schopnost objevuje v uživatelském rozhraní, jak ji vytváříte.
|
||||
|
||||
<Card title="Začněte vytvářet →" icon="database" href="/l/cs/developers/extend/apps/tutorials/document-generator/data-model">
|
||||
Kapitola 1: model dokumentů a šablon.
|
||||
Kapitola 1: modelujte dokumenty a šablony.
|
||||
</Card>
|
||||
|
||||
+1
-1
@@ -182,7 +182,7 @@ selbst statt einer Wand aus Text.
|
||||
</Frame>
|
||||
|
||||
<Note>
|
||||
Die in pdf-lib integrierten Schriftarten verwenden WinAnsi-Codierung, sodass westeuropäische Akzente direkt funktionieren; der Helfer ordnet typografische Anführungszeichen und Gedankenstriche zu und verwirft Zeichen, die er nicht codieren kann. Das Rendern nicht-lateinischer Skripte (chinesisch, arabisch, kyrillisch) würde bedeuten, dass
|
||||
Die in pdf-lib integrierten Schriftarten verwenden die WinAnsi-Codierung, sodass westeuropäische Akzentzeichen standardmäßig korrekt dargestellt werden; die Hilfsfunktion ordnet typografische Anführungszeichen und Gedankenstriche zu und verwirft Zeichen, die nicht codiert werden können. Das Rendern nicht-lateinischer Skripte (chinesisch, arabisch, kyrillisch) würde bedeuten, dass
|
||||
eine Unicode-Schriftart einbettet.
|
||||
</Note>
|
||||
|
||||
|
||||
+13
-13
@@ -1,29 +1,29 @@
|
||||
---
|
||||
title: "Tutorial: Dokumentgenerator"
|
||||
icon: wand-magic-sparkles
|
||||
description: Erstelle eine echte Twenty-App, die personalisierte Dokumente aus deinen CRM-Daten generiert.
|
||||
description: Erstellen Sie eine echte Twenty-App, die personalisierte Dokumente aus Ihren CRM-Daten generiert.
|
||||
---
|
||||
|
||||
In diesem Tutorial erstellst du **Document Generator** – eine App, die wiederverwendbare Vorlagen in personalisierte Dokumente umwandelt, indem sie die bereits in deinem CRM vorhandenen Daten nutzt.
|
||||
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.
|
||||
|
||||
Schreibe einmal eine Vorlage mit `{{placeholders}}` und generiere 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.
|
||||
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.
|
||||
|
||||
<Frame caption="Eine Vorlage, die für eine bestimmte Person generiert wurde und als druckbare Seite geöffnet ist.">
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/07-rendered-document.png" alt="Ein generiertes Verkaufsangebotsdokument" />
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/07-rendered-document.png" alt="Ein generiertes Verkaufsangebot" />
|
||||
</Frame>
|
||||
|
||||
## Was Sie lernen werden
|
||||
|
||||
Jedes Kapitel fügt eine Funktion hinzu. Am Ende haben Sie den Großteil des SDK kennengelernt.
|
||||
|
||||
| Kapitel | Funktion | Referenz |
|
||||
| ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------- |
|
||||
| [1. Datenmodell](/l/de/developers/extend/apps/tutorials/document-generator/data-model) | Objekte, Felder und eine Relation | [Daten](/l/de/developers/extend/apps/data/overview) |
|
||||
| [2. Dokumente generieren](/l/de/developers/extend/apps/tutorials/document-generator/generating-documents) | Eine Logikfunktion (KI-Tool + Workflow-Aktion), die eine Markdown-Vorlage ausfüllt und ein fertiges PDF anhängt | [Logikfunktionen](/l/de/developers/extend/apps/logic/logic-functions) |
|
||||
| [3. HTTP-Routen](/l/de/developers/extend/apps/tutorials/document-generator/http-routes) | Ausliefern von JSON und einer teilbaren HTML-Seite über Routen | [Logikfunktionen](/l/de/developers/extend/apps/logic/logic-functions) |
|
||||
| [4. Die UI erstellen](/l/de/developers/extend/apps/tutorials/document-generator/building-the-ui) | Ansichten, Navigation, Befehlsmenü und Frontend-Komponenten, die ein Dokument anzeigen und eine Vorlage bearbeiten | [Layout](/l/de/developers/extend/apps/layout/overview) |
|
||||
| [5. Ein KI-Agent](/l/de/developers/extend/apps/tutorials/document-generator/ai-agent) | Agent + Skill | [Skills & Agenten](/l/de/developers/extend/apps/logic/skills-and-agents) |
|
||||
| [6. Veröffentlichen](/l/de/developers/extend/apps/tutorials/document-generator/publishing) | In den Marketplace veröffentlichen | [Veröffentlichen](/l/de/developers/extend/apps/operations/publishing) |
|
||||
| Kapitel | Funktion | Referenz |
|
||||
| ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
|
||||
| [1. Datenmodell](/l/de/developers/extend/apps/tutorials/document-generator/data-model) | Objekte, Felder und eine Relation | [Daten](/l/de/developers/extend/apps/data/overview) |
|
||||
| [2. Dokumente generieren](/l/de/developers/extend/apps/tutorials/document-generator/generating-documents) | Eine Logikfunktion (KI-Tool + Workflow-Aktion), die eine Markdown-Vorlage ausfüllt und ein fertiges PDF anhängt | [Logikfunktionen](/l/de/developers/extend/apps/logic/logic-functions) |
|
||||
| [3. HTTP-Routen](/l/de/developers/extend/apps/tutorials/document-generator/http-routes) | Ausliefern von JSON und einer teilbaren HTML-Seite über Routen | [Logikfunktionen](/l/de/developers/extend/apps/logic/logic-functions) |
|
||||
| [4. Die UI erstellen](/l/de/developers/extend/apps/tutorials/document-generator/building-the-ui) | Ansichten, Navigation, Befehlsmenü und Frontend-Komponenten, die eine Vorschau eines Dokuments anzeigen und eine Vorlage bearbeiten | [Layout](/l/de/developers/extend/apps/layout/overview) |
|
||||
| [5. Ein KI-Agent](/l/de/developers/extend/apps/tutorials/document-generator/ai-agent) | Agent + Skill | [Skills & Agenten](/l/de/developers/extend/apps/logic/skills-and-agents) |
|
||||
| [6. Veröffentlichen](/l/de/developers/extend/apps/tutorials/document-generator/publishing) | In den Marketplace veröffentlichen | [Veröffentlichen](/l/de/developers/extend/apps/operations/publishing) |
|
||||
|
||||
## Voraussetzungen
|
||||
|
||||
@@ -62,6 +62,6 @@ Lassen Sie `yarn twenty dev` während des gesamten Tutorials in einem Terminal l
|
||||
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.
|
||||
|
||||
<Card title="Beginnen Sie mit dem Bauen →" icon="database" href="/l/de/developers/extend/apps/tutorials/document-generator/data-model">
|
||||
<Card title="Beginnen Sie mit der Entwicklung →" icon="database" href="/l/de/developers/extend/apps/tutorials/document-generator/data-model">
|
||||
Kapitel 1: Dokumente und Vorlagen modellieren.
|
||||
</Card>
|
||||
|
||||
+3
-3
@@ -66,9 +66,9 @@ El agente sólo puede llamar a la herramienta si su papel lo permite. Ya estable
|
||||
## Pruébalo
|
||||
|
||||
Abre un chat con **Asistente de documentos** y pídele que elabore un documento para una personaformat@@0
|
||||
en tu CRM. Encuentra el registro, llama a `generate-document` e informa
|
||||
el documento que creó, el cual ahora aparece en tu vista de **Documents**,
|
||||
exactamente igual que las rutas del menú de comandos y del flujo de trabajo.
|
||||
en tu CRM. Encuentra el registro, llama a `generate-document` y devuelve
|
||||
el documento que creó — el cual ahora aparece en tu vista de **Documentos**,
|
||||
exactamente igual que mediante las rutas del menú de comandos y de los flujos de trabajo.
|
||||
|
||||
Esa es la ganancia de exponer la lógica como una herramienta: **una función, muchas puertas delanteras** —
|
||||
menú de comandos, HTTP, paso de flujo de trabajo y ahora lenguaje natural.
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: "Tutorial: Generador de documentos"
|
||||
title: "Tutorial: Document Generator"
|
||||
icon: wand-magic-sparkles
|
||||
description: Crea una aplicación real de Twenty que genere documentos personalizados a partir de los datos de tu CRM.
|
||||
---
|
||||
|
||||
+2
-1
@@ -65,7 +65,8 @@ L'agent ne peut appeler l'outil que si son rôle le permet. Nous avons déjà d
|
||||
|
||||
## Essayez-le
|
||||
|
||||
Ouvrez une conversation avec **Document Assistant** et demandez-lui de rédiger un document pour une personne dans votre CRM. Il trouve l'enregistrement, appelle `generate-document`, et rapporte
|
||||
Ouvrez une discussion avec **Document Assistant** et demandez-lui de rédiger un document pour une
|
||||
personne dans votre CRM. Il trouve l'enregistrement, appelle `generate-document`, et rapporte
|
||||
le document qu'il a créé — qui apparaît maintenant dans votre vue **Documents**
|
||||
exactement comme les chemins du menu de commande et du workflow.
|
||||
|
||||
|
||||
+1
-1
@@ -165,7 +165,7 @@ Chaque document généré enregistre votre application comme auteur:
|
||||
|
||||
## Aperçu d'un document sur sa page de dossier
|
||||
|
||||
Un composant frontal n’est pas seulement destiné aux menus de commandes — vous pouvez en monter un comme **onglet sur une page d’enregistrement**. Ajoutons un onglet *Aperçu* à l'enregistrement du document qui rend le corps
|
||||
Un composant frontal n’est pas seulement destiné aux menus de commande — vous pouvez en monter un comme **onglet sur une page d’enregistrement**. Ajoutons un onglet *Aperçu* à l'enregistrement du document qui rend le corps
|
||||
Markdown comme une page lisse et imprimable.
|
||||
|
||||
Le composant lit l'id de l'enregistrement courant depuis son contexte d'exécution, charge le document
|
||||
|
||||
+2
-2
@@ -10,7 +10,7 @@ qui charge un modèle et un enregistrement, remplit les marqueurs et enregistre
|
||||
|
||||
Nous allons écrire la logique commerciale une fois en tant que **gestionnaire**, puis l'exposer à travers
|
||||
plusieurs déclencheurs. Ce chapitre connecte deux d’entre eux — un **outil d’IA** et une
|
||||
**action de workflow**.
|
||||
**action de flux de travail**.
|
||||
|
||||
## L'assistant de rendu
|
||||
|
||||
@@ -82,7 +82,7 @@ export const generateDocumentHandler = async (
|
||||
};
|
||||
```
|
||||
|
||||
`loadRecordValues` exécute une requête différente pour une Person par rapport à une Company et aplatit
|
||||
`loadRecordValues` exécute une requête différente pour une personne par rapport à une entreprise et aplatit
|
||||
le résultat — voir
|
||||
[`load-record-values.ts`](https://github.com/twentyhq/twenty/blob/main/packages/twenty-apps/examples/document-generator/src/logic-functions/utils/load-record-values.ts).
|
||||
|
||||
|
||||
+2
-2
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: "Tutoriel : Générateur de documents"
|
||||
title: "Tutoriel : Document Generator"
|
||||
icon: wand-magic-sparkles
|
||||
description: Créez une véritable application Twenty qui génère des documents personnalisés à partir des données de votre CRM.
|
||||
---
|
||||
@@ -26,7 +26,7 @@ Chaque chapitre ajoute une capacité. À la fin, vous aurez utilisé la plupart
|
||||
| [3. Routes HTTP](/l/fr/developers/extend/apps/tutorials/document-generator/http-routes) | Servir du JSON et une page HTML partageable depuis des routes | [Fonctions logiques](/l/fr/developers/extend/apps/logic/logic-functions) |
|
||||
| [4. Créer l’interface utilisateur](/l/fr/developers/extend/apps/tutorials/document-generator/building-the-ui) | Vues, navigation, menu de commandes et composants frontaux qui prévisualisent un document et modifient un modèle | [Mise en page](/l/fr/developers/extend/apps/layout/overview) |
|
||||
| [5. Un agent IA](/l/fr/developers/extend/apps/tutorials/document-generator/ai-agent) | Agent + compétence | [Compétences et agents](/l/fr/developers/extend/apps/logic/skills-and-agents) |
|
||||
| [6. Publication](/l/fr/developers/extend/apps/tutorials/document-generator/publishing) | Livrez-la sur la place de marché | [Publication](/l/fr/developers/extend/apps/operations/publishing) |
|
||||
| [6. Publication](/l/fr/developers/extend/apps/tutorials/document-generator/publishing) | Publiez-la sur la place de marché | [Publication](/l/fr/developers/extend/apps/operations/publishing) |
|
||||
|
||||
## Prérequis
|
||||
|
||||
|
||||
+7
-7
@@ -6,7 +6,7 @@ description: Crea una vera app Twenty che genera documenti personalizzati a part
|
||||
|
||||
In questo tutorial creerai **Document Generator**, un'app che trasforma modelli riutilizzabili in documenti personalizzati usando i dati già presenti nel tuo CRM.
|
||||
|
||||
Scrivi una volta un modello con `{{placeholders}}`, quindi genera un documento compilato per qualsiasi Persona o Azienda con un solo clic, dal command menu, da un agente AI o da un workflow.
|
||||
Scrivi un modello una sola volta con `{{placeholders}}`, quindi genera un documento compilato per qualsiasi Persona o Azienda con un solo clic — dal menu dei comandi, da un agente IA o da un workflow.
|
||||
|
||||
<Frame caption="Un modello, generato per una persona specifica, aperto come pagina stampabile.">
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/07-rendered-document.png" alt="Un documento di proposta di vendita generato" />
|
||||
@@ -14,13 +14,13 @@ Scrivi una volta un modello con `{{placeholders}}`, quindi genera un documento c
|
||||
|
||||
## Cosa imparerai
|
||||
|
||||
Ogni capitolo aggiunge una funzionalità. Alla fine avrai toccato la maggior parte dell’SDK.
|
||||
Ogni capitolo aggiunge una funzionalità. Alla fine avrai esplorato gran parte dell’SDK.
|
||||
|
||||
| Capitolo | Funzionalità | Riferimento |
|
||||
| ------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
|
||||
| [1. Modello dati](/l/it/developers/extend/apps/tutorials/document-generator/data-model) | Oggetti, campi e una relazione | [Dati](/l/it/developers/extend/apps/data/overview) |
|
||||
| [2. Generare documenti](/l/it/developers/extend/apps/tutorials/document-generator/generating-documents) | Una funzione logica (strumento IA + azione del workflow) che compila un modello Markdown e allega un PDF rifinito | [Funzioni logiche](/l/it/developers/extend/apps/logic/logic-functions) |
|
||||
| [3. Route HTTP](/l/it/developers/extend/apps/tutorials/document-generator/http-routes) | Servire JSON e una pagina HTML condivisibile dalle route | [Funzioni logiche](/l/it/developers/extend/apps/logic/logic-functions) |
|
||||
| [3. Rotte HTTP](/l/it/developers/extend/apps/tutorials/document-generator/http-routes) | Servire JSON e una pagina HTML condivisibile dalle rotte | [Funzioni logiche](/l/it/developers/extend/apps/logic/logic-functions) |
|
||||
| [4. Creare l’interfaccia utente](/l/it/developers/extend/apps/tutorials/document-generator/building-the-ui) | Viste, navigazione, menu dei comandi e componenti front-end che mostrano l’anteprima di un documento e modificano un modello | [Layout](/l/it/developers/extend/apps/layout/overview) |
|
||||
| [5. Un agente IA](/l/it/developers/extend/apps/tutorials/document-generator/ai-agent) | Agente + abilità | [Abilità e agenti](/l/it/developers/extend/apps/logic/skills-and-agents) |
|
||||
| [6. Pubblicazione](/l/it/developers/extend/apps/tutorials/document-generator/publishing) | Pubblicala nel marketplace | [Pubblicazione](/l/it/developers/extend/apps/operations/publishing) |
|
||||
@@ -44,14 +44,14 @@ Preferisci leggere il codice finito? L’app completa si trova in
|
||||
Ogni snippet qui sotto è copiato da lì.
|
||||
</Note>
|
||||
|
||||
## Come si integra l’app
|
||||
## Come è strutturata l’app
|
||||
|
||||
<Frame>
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/how-it-fits.svg" alt="Un modello con segnaposto viene trasformato in un documento rifinito con un PDF, attivato dal menu dei comandi, da un agente IA, da un workflow o da un link condivisibile" />
|
||||
</Frame>
|
||||
|
||||
Scrivi una **template** una sola volta in un editor rich text, con `{{placeholders}}`. Scegliere una
|
||||
template e un record CRM compila i segnaposto e memorizza un
|
||||
Scrivi un **modello** una sola volta in un editor rich text, con `{{placeholders}}`. Scegliendo un
|
||||
modello e un record del CRM si compilano i segnaposto e si salva un
|
||||
**documento** rifinito (con un file PDF). Tutto il resto — il menu dei comandi, l’agente IA,
|
||||
lo step del workflow, il link condivisibile — è solo un modo diverso di attivare quell’unico generatore.
|
||||
|
||||
@@ -62,5 +62,5 @@ aggiungi o modifichi un file sotto `src/`, viene nuovamente sincronizzato con il
|
||||
secondi, così puoi vedere ogni funzionalità comparire nell’interfaccia utente mentre la costruisci.
|
||||
|
||||
<Card title="Inizia a sviluppare →" icon="database" href="/l/it/developers/extend/apps/tutorials/document-generator/data-model">
|
||||
Capitolo 1: modella documenti e template.
|
||||
Capitolo 1: modella documenti e modelli.
|
||||
</Card>
|
||||
|
||||
+1
-1
@@ -66,7 +66,7 @@ export default defineAgent({
|
||||
## お試しください
|
||||
|
||||
**ドキュメントアシスタント** とのチャットを開き、CRM内の
|
||||
人のためのドキュメントを下書きするように依頼します。 この処理はレコードを見つけて `generate-document` を呼び出し、作成したドキュメントを報告します。これにより、そのドキュメントは **Documents** ビューに表示されるようになり、コマンドメニューやワークフロー経路とまったく同じように扱えるようになります。
|
||||
人のためのドキュメントを下書きするように依頼します。 レコードを見つけて `generate-document` を呼び出し、作成したドキュメントを返します — そのドキュメントは、コマンドメニューやワークフロー経由の場合とまったく同様に、**Documents** ビューに表示されます。
|
||||
|
||||
これは、ロジックをツールとして公開するための報酬です: **1つの関数、多くのフロントドア** —
|
||||
コマンドメニュー、HTTP、ワークフローステップ、そして現在の自然言語。
|
||||
|
||||
+5
-10
@@ -4,9 +4,7 @@ icon: table-columns
|
||||
description: ビュー、サイドバーナビゲーション、コマンド、フロントコンポーネント。
|
||||
---
|
||||
|
||||
現在、オブジェクトは設定を通じてのみアクセス可能です。 アプリにUI上での
|
||||
本格的な存在感を持たせましょう。リストビュー、サイドバーエントリ、ワンクリックで実行できる
|
||||
**Generate document** コマンド、レコードページの先頭コンポーネントによるドキュメントの**プレビュー**、そしてテンプレート用のネイティブなリッチテキスト**エディタ**タブを追加します。
|
||||
現在、オブジェクトは設定を通じてのみアクセス可能です。 アプリに本物の存在感を持たせて、UI にしっかり組み込みましょう。リストビュー、サイドバーエントリ、ワンクリックで実行できる **Generate document** コマンド、レコードページのフロントコンポーネントによるドキュメントの**プレビュー**、そしてテンプレート用のネイティブなリッチテキスト**エディター**タブを追加します。
|
||||
|
||||
## ビューとナビゲーション
|
||||
|
||||
@@ -122,8 +120,7 @@ export default defineFrontComponent({
|
||||
|
||||
## 開くためのコマンド
|
||||
|
||||
People が選択されているときに表示され、サイドパネルでコンポーネントを開く
|
||||
`availabilityType: 'RECORD_SELECTION'` を指定した [command menu item](/l/ja/developers/extend/apps/layout/command-menu-items) を追加します。
|
||||
`availabilityType: 'RECORD_SELECTION'` を指定した [command menu item](/l/ja/developers/extend/apps/layout/command-menu-items) は、Person が選択されているときに表示され、サイドパネルでコンポーネントを開きます。
|
||||
|
||||
```ts filename="src/command-menu-items/generate-document.command-menu-item.ts"
|
||||
import { defineCommandMenuItem, STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS } from 'twenty-sdk/define';
|
||||
@@ -256,8 +253,7 @@ export default definePageLayout({
|
||||
|
||||
## リッチテキストエディタでテンプレートを編集
|
||||
|
||||
テンプレートにはカスタムコンポーネントは一切必要ありません。 `body` は
|
||||
`RICH_TEXT` フィールドなので、Twenty にはすでに完全なリッチテキストエディタが用意されています。これは、標準の Note および Task オブジェクトが使用しているものと同じです。
|
||||
テンプレートにはカスタムコンポーネントは一切必要ありません。 `body` は `RICH_TEXT` フィールドなので、Twenty にはすでにフル機能のリッチテキストエディターが用意されています。標準の Note および Task オブジェクトが使用しているものと同じエディターです。
|
||||
テンプレートのレコードページでサーフェスを作成します。
|
||||
|
||||
`EDITOR`ディスプレイモードで`FIELD`ウィジェットを持つタブを追加します。`fieldMetadataId`を介して`body`
|
||||
@@ -284,15 +280,14 @@ export default definePageLayout({
|
||||
```
|
||||
|
||||
`RICH_TEXT` フィールドには、エディタのブロック JSON と Markdown
|
||||
プロジェクションの両方が格納されます。 生成パイプラインはその Markdown プロジェクションを読み取るため、プレースホルダー、PDF、共有可能なウェブページはすべて変更なしで動作し続けます。詳しくは、
|
||||
[`template-record.page-layout.ts`](https://github.com/twentyhq/twenty/blob/main/packages/twenty-apps/examples/document-generator/src/page-layouts/template-record.page-layout.ts) を参照してください。
|
||||
プロジェクションの両方が格納されます。 生成パイプラインはその Markdown プロジェクションを読み取るため、プレースホルダー、PDF、共有可能なウェブページはすべてそのまま問題なく動作します。詳しくは、[`template-record.page-layout.ts`](https://github.com/twentyhq/twenty/blob/main/packages/twenty-apps/examples/document-generator/src/page-layouts/template-record.page-layout.ts) を参照してください。
|
||||
編集者は適切なリッチテキストエディタでテンプレートを書き込むようになりました：
|
||||
|
||||
<Frame caption="format@@0タブ:本文フィールドにバインドされている、Twentyのネイティブリッチテキストエディタ。">
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/10-template-editor.png" alt="ネイティブリッチテキストエディタタブのテンプレートレコード" />
|
||||
</Frame>
|
||||
|
||||
**このステップの完了後:** ドキュメントは美しくプレビューされ、テンプレートはアプリ内で編集可能になります。 次に、AIエージェントがチャットからそれらを生成します。
|
||||
**このステップの後:** ドキュメントは美しくプレビューでき、テンプレートはアプリ内で編集可能になります。 次に、AIエージェントがチャットからそれらを生成します。
|
||||
|
||||
<Card title="次へ: AI エージェント →" icon="robot" href="/l/ja/developers/extend/apps/tutorials/document-generator/ai-agent">
|
||||
エージェントとツールと呼ぶスキルを追加します。
|
||||
|
||||
+1
-1
@@ -51,7 +51,7 @@ export default defineLogicFunction({
|
||||
```
|
||||
|
||||
共有ハンドラーは失敗時に提案された `status` を返すので、ルートは適切な `4xx`/`5xx` コードで
|
||||
応答できます。 `isAuthRequired: true` は、呼び出し元が有効なトークンを提示しなければならないことを意味します。次の章のフロントコンポーネントは、ユーザーのアクセス トークンを自動的に渡します。
|
||||
応答できます。 `isAuthRequired: true` は、呼び出し元が有効なトークンを提示する必要があることを意味します。次の章のフロントエンドのコンポーネントは、ユーザーのアクセストークンを自動的に渡します。
|
||||
|
||||
## GET route — ウェブページとしてレンダリング
|
||||
|
||||
|
||||
+3
-3
@@ -9,7 +9,7 @@ description: 実際の Twenty アプリを構築し、CRM データからパー
|
||||
一度テンプレートを作成し、`{{placeholders}}` を記述しておけば、コマンドメニュー、AI エージェント、またはワークフローからワンクリックで、任意の Person または Company 用の入力済みドキュメントを生成できます。
|
||||
|
||||
<Frame caption="特定の人物向けに生成され、印刷可能なページとして開かれる 1 つのテンプレート。">
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/07-rendered-document.png" alt="生成された販売提案書ドキュメント" />
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/07-rendered-document.png" alt="生成された営業提案書" />
|
||||
</Frame>
|
||||
|
||||
## 学べること
|
||||
@@ -21,9 +21,9 @@ description: 実際の Twenty アプリを構築し、CRM データからパー
|
||||
| [1. データモデル](/l/ja/developers/extend/apps/tutorials/document-generator/data-model) | オブジェクト、フィールド、およびリレーション | [Data](/l/ja/developers/extend/apps/data/overview) |
|
||||
| [2. ドキュメント生成](/l/ja/developers/extend/apps/tutorials/document-generator/generating-documents) | Markdown テンプレートを埋めて、整えられた PDF を添付するロジック関数（AI ツール + ワークフローアクション） | [ロジック関数](/l/ja/developers/extend/apps/logic/logic-functions) |
|
||||
| [3. HTTP ルート](/l/ja/developers/extend/apps/tutorials/document-generator/http-routes) | ルートから JSON と共有可能な HTML ページを配信する | [ロジック関数](/l/ja/developers/extend/apps/logic/logic-functions) |
|
||||
| [4. UI 構築](/l/ja/developers/extend/apps/tutorials/document-generator/building-the-ui) | Views、ナビゲーション、コマンドメニュー、およびドキュメントをプレビューしてテンプレートを編集するフロントコンポーネント | [レイアウト](/l/ja/developers/extend/apps/layout/overview) |
|
||||
| [4. UI 構築](/l/ja/developers/extend/apps/tutorials/document-generator/building-the-ui) | ビュー、ナビゲーション、コマンドメニュー、ドキュメントのプレビューとテンプレート編集用のフロントエンドコンポーネント | [レイアウト](/l/ja/developers/extend/apps/layout/overview) |
|
||||
| [5. AI エージェント](/l/ja/developers/extend/apps/tutorials/document-generator/ai-agent) | エージェント + スキル | [スキルとエージェント](/l/ja/developers/extend/apps/logic/skills-and-agents) |
|
||||
| [6. 公開](/l/ja/developers/extend/apps/tutorials/document-generator/publishing) | マーケットプレイスに出荷する | [公開](/l/ja/developers/extend/apps/operations/publishing) |
|
||||
| [6. 公開](/l/ja/developers/extend/apps/tutorials/document-generator/publishing) | マーケットプレイスに公開する | [公開](/l/ja/developers/extend/apps/operations/publishing) |
|
||||
|
||||
## 前提条件
|
||||
|
||||
|
||||
+12
-8
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: 5. AI 에이전트 하나
|
||||
title: 5. AI 에이전트
|
||||
icon: robot
|
||||
description: 에이전트가 당신의 도구를 사용해서, 채팅으로부터 문서를 생성하도록 하세요.
|
||||
description: 에이전트가 귀하의 도구를 사용해 채팅에서 문서를 생성하도록 하세요.
|
||||
---
|
||||
|
||||
`generate-document`가 **tool**로 노출되어 있기 때문에, AI 에이전트가 이를 호출할 수 있습니다.
|
||||
@@ -10,8 +10,8 @@ Jeffery Griffin"\*이라고 말하기만 하면 되도록 에이전트와 스킬
|
||||
|
||||
## 스킬
|
||||
|
||||
[skill](/l/ko/developers/extend/apps/logic/skills-and-agents)은 재사용 가능한
|
||||
지시 사항으로, 에이전트에 연결하는 지식입니다. 우리 스킬은 모델에게 그 도구를 사용하는 방법을 가르칩니다.
|
||||
[skill](/l/ko/developers/extend/apps/logic/skills-and-agents)은(는) 재사용 가능한 지침으로,
|
||||
에이전트에 연결하는 지식입니다. 우리 스킬은 모델에게 그 도구를 어떻게 사용하는지 알려 줍니다.
|
||||
|
||||
```ts filename="src/skills/document-drafting.skill.ts"
|
||||
import { defineSkill } from 'twenty-sdk/define';
|
||||
@@ -34,7 +34,8 @@ export default defineSkill({
|
||||
|
||||
## 에이전트
|
||||
|
||||
[agent](/l/ko/developers/extend/apps/logic/skills-and-agents)는 프롬프트와 모델을 짝지어 줍니다. 빌드 경고를 피하려면 `responseFormat`을 명시적으로 설정하세요.
|
||||
[agent](/l/ko/developers/extend/apps/logic/skills-and-agents)는 프롬프트와 모델을
|
||||
연결합니다. 빌드 경고를 피하려면 `responseFormat`을 명시적으로 설정하세요.
|
||||
|
||||
```ts filename="src/agents/document-assistant.agent.ts"
|
||||
import { defineAgent } from 'twenty-sdk/define';
|
||||
@@ -59,11 +60,14 @@ export default defineAgent({
|
||||
에이전트는 자신의 역할이 허용할 때만 그 도구를 호출할 수 있습니다. 우리는 이미 [2장](/l/ko/developers/extend/apps/tutorials/document-generator/generating-documents#grant-it-access)에서 앱의 역할에 `canAccessAllTools: true` 및 `canBeAssignedToAgents: true`를 설정했습니다.
|
||||
</Note>
|
||||
|
||||
## 직접 해보기
|
||||
## 사용해 보기
|
||||
|
||||
**Document Assistant**와 채팅을 열고, CRM에 있는 사람을 위한 문서를 작성해 달라고 요청하세요. 에이전트는 레코드를 찾고 `generate-document`를 호출한 다음, 생성한 문서를 보고합니다. 이 문서는 이제 **Documents** 보기에도 표시되며, 명령 메뉴와 워크플로 경로를 통해 생성된 문서와 완전히 동일하게 취급됩니다.
|
||||
**Document Assistant**와 채팅을 열고, CRM에 있는 사람을 위한 문서를 작성해 달라고 요청하세요. 에이전트는 레코드를 찾고 `generate-document`를 호출한 다음,
|
||||
생성한 문서를 다시 알려 줍니다. 이 문서는 이제 **Documents** 보기에도 표시되며,
|
||||
명령 메뉴와 워크플로 경로를 사용할 때와 정확히 동일하게 동작합니다.
|
||||
|
||||
로직을 도구로 노출하는 것의 수확은 이것입니다: **하나의 함수, 여러 개의 진입점** — 명령 메뉴, HTTP, 워크플로 단계, 그리고 이제는 자연어까지.
|
||||
로직을 도구로 노출하면 이런 이점이 있습니다: **하나의 함수, 여러 개의 진입점** —
|
||||
명령 메뉴, HTTP, 워크플로 단계, 그리고 이제는 자연어.
|
||||
|
||||
**이 단계를 마치면:** 앱은 기능이 완전해지고 실제로 유용해집니다. 이제 배포할 시간입니다.
|
||||
|
||||
|
||||
+17
-17
@@ -4,12 +4,12 @@ icon: table-columns
|
||||
description: 뷰, 사이드바 내비게이션, 커맨드, 그리고 프런트 컴포넌트.
|
||||
---
|
||||
|
||||
현재는 객체에 설정(Settings)을 통해서만 접근할 수 있습니다. 이제 앱이 UI 에서 실제로 보이도록 해 봅시다. 리스트 뷰, 사이드바 항목, 원클릭 **Generate document** 커맨드, 문서를 **미리 보기(preview)** 위한 레코드 페이지 프런트 컴포넌트, 템플릿용 네이티브 리치 텍스트 **editor** 탭을 추가합니다.
|
||||
현재는 설정(Settings)에서만 해당 객체에 접근할 수 있습니다. 이제 앱이 UI에서 진짜 존재감을 갖도록 해 봅시다. 목록 뷰, 사이드바 항목, 원클릭 **Generate document** 명령, 문서를 **미리 보기** 위한 레코드 페이지용 프런트 컴포넌트, 템플릿용 기본 제공 리치 텍스트 **editor** 탭을 추가합니다.
|
||||
|
||||
## 뷰와 내비게이션
|
||||
|
||||
[뷰](/l/ko/developers/extend/apps/layout/views)는 특정 객체에 대한 저장된 리스트입니다.
|
||||
[내비게이션 메뉴 항목](/l/ko/developers/extend/apps/layout/navigation-menu-items)은 그 뷰를 사이드바에 배치합니다.
|
||||
[뷰](/l/ko/developers/extend/apps/layout/views)는 특정 객체에 대해 저장된 목록입니다.
|
||||
[내비게이션 메뉴 항목](/l/ko/developers/extend/apps/layout/navigation-menu-items)은 해당 뷰를 사이드바에 배치합니다.
|
||||
|
||||
```ts filename="src/views/documents.view.ts"
|
||||
import { defineView, ViewKey } from 'twenty-sdk/define';
|
||||
@@ -51,7 +51,7 @@ export default defineNavigationMenuItem({
|
||||
|
||||
템플릿에 대해서도 동일한 쌍을 추가하세요. 이제 둘 다 사이드바에 표시됩니다:
|
||||
|
||||
<Frame caption="사이드바의 Documents 및 Templates, 생성된 문서가 리스트에 표시됨.">
|
||||
<Frame caption="사이드바의 Documents와 Templates, 그리고 생성된 문서가 목록에 표시되어 있습니다.">
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/04-documents-view.png" alt="생성된 문서가 있는 Documents 뷰" />
|
||||
</Frame>
|
||||
|
||||
@@ -108,8 +108,8 @@ export default defineFrontComponent({
|
||||
```
|
||||
|
||||
<Warning>
|
||||
값을 `twenty-ui`에서 임포트하지 말고 인라인 CSS 변수(`var(--t-color-blue)`)로 스타일을 지정하세요. SDK 가 빌드 중에 해당 패키지를 모킹하므로, 테마 상수를 모듈 레벨에서 임포트하면 `undefined`가 됩니다. 전체
|
||||
[컴포넌트 전문](https://github.com/twentyhq/twenty/blob/main/packages/twenty-apps/examples/document-generator/src/front-components/generate-document-form.front-component.tsx)을 참고하세요.
|
||||
값을 `twenty-ui`에서 임포트하지 말고 인라인 CSS 변수(`var(--t-color-blue)`)로 스타일을 지정하세요. SDK 가 빌드 중에 해당 패키지를 모킹하므로, 테마 상수를 모듈 레벨에서 임포트하면 `undefined`가 됩니다. 자세한 내용은
|
||||
[전체 컴포넌트](https://github.com/twentyhq/twenty/blob/main/packages/twenty-apps/examples/document-generator/src/front-components/generate-document-form.front-component.tsx)를 참고하세요.
|
||||
</Warning>
|
||||
|
||||
## 이를 여는 커맨드
|
||||
@@ -132,7 +132,7 @@ export default defineCommandMenuItem({
|
||||
|
||||
## 전체 플로우 사용해 보기
|
||||
|
||||
**People**을 열고, 한 사람을 체크한 다음 <kbd>⌘K</kbd> / <kbd>Ctrl K</kbd>를 누르세요.
|
||||
**People**을 열고, 사람을 하나 선택한 뒤 <kbd>⌘K</kbd> / <kbd>Ctrl K</kbd>를 누르세요.
|
||||
"Generate document"가 앱 태그와 함께 표시됩니다:
|
||||
|
||||
<Frame caption="Person 이 선택되었을 때 이 커맨드가 표시됩니다.">
|
||||
@@ -145,17 +145,17 @@ export default defineCommandMenuItem({
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/06b-front-component.png" alt="Generate document 사이드 패널" />
|
||||
</Frame>
|
||||
|
||||
생성된 모든 문서는 앱을 작성자로 기록합니다:
|
||||
생성된 모든 문서는 작성자로 여러분의 앱을 기록합니다:
|
||||
|
||||
<Frame caption="Document Generator 가 생성했으며, 상태는 Generated.">
|
||||
<Frame caption="Document Generator가 생성자로 표시되고, 상태는 Generated입니다.">
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/05-document-record.png" alt="생성된 문서 레코드" />
|
||||
</Frame>
|
||||
|
||||
## 레코드 페이지에서 문서 미리 보기
|
||||
|
||||
프런트 컴포넌트는 커맨드 메뉴에만 쓰이는 것이 아닙니다. **레코드 페이지의 탭**으로 마운트할 수도 있습니다. 문서 레코드에 *Preview* 탭을 추가해, Markdown 본문을 다듬어진 인쇄용 페이지로 렌더링해 봅시다.
|
||||
프런트 컴포넌트는 커맨드 메뉴에만 쓰이는 것이 아닙니다. **레코드 페이지의 탭**으로 마운트할 수도 있습니다. 문서 레코드에 *Preview* 탭을 추가하여 Markdown 본문을 정돈된 인쇄용 페이지로 렌더링해 봅시다.
|
||||
|
||||
컴포넌트는 실행 컨텍스트에서 현재 레코드 ID 를 읽어 문서를 로드하고 렌더링합니다. 프런트 컴포넌트는 허용된 HTML 태그 화이트리스트만 허용하는 **샌드박스**에서 실행됩니다. 원시 HTML 인젝션(`dangerouslySetInnerHTML`)과 `\<style>`은 차단되므로, 작은 [`Markdown`](https://github.com/twentyhq/twenty/blob/main/packages/twenty-apps/examples/document-generator/src/utils/markdown-to-react.tsx) 헬퍼를 통해 Markdown 을 인라인 스타일이 적용된 React 요소로 렌더링합니다.
|
||||
컴포넌트는 실행 컨텍스트에서 현재 레코드 ID 를 읽어 문서를 로드하고 렌더링합니다. 프런트 컴포넌트는 허용된 HTML 태그 화이트리스트만 사용할 수 있는 **샌드박스**에서 실행됩니다. 원시 HTML 주입(`dangerouslySetInnerHTML`)과 `\<style>`은 차단되므로, 작은 [`Markdown`](https://github.com/twentyhq/twenty/blob/main/packages/twenty-apps/examples/document-generator/src/utils/markdown-to-react.tsx) 헬퍼를 통해 Markdown을 인라인 스타일이 적용된 React 엘리먼트로 렌더링합니다.
|
||||
|
||||
```tsx filename="src/front-components/document-viewer.front-component.tsx"
|
||||
import { CoreApiClient } from 'twenty-client-sdk/core';
|
||||
@@ -199,7 +199,7 @@ export default defineFrontComponent({
|
||||
});
|
||||
```
|
||||
|
||||
[페이지 레이아웃](/l/ko/developers/extend/apps/layout/page-layouts)으로 이를 마운트합니다. `RECORD_PAGE` 레이아웃은 객체의 레코드 뷰에 탭을 추가합니다. `CANVAS` 탭의 `FRONT_COMPONENT` 위젯이 컴포넌트를 호스팅합니다:
|
||||
[페이지 레이아웃](/l/ko/developers/extend/apps/layout/page-layouts)으로 이를 마운트합니다. `RECORD_PAGE` 레이아웃은 객체의 레코드 뷰에 탭을 추가합니다. `CANVAS` 탭의 `FRONT_COMPONENT` 위젯이 해당 컴포넌트를 호스팅합니다:
|
||||
|
||||
```ts filename="src/page-layouts/document-record.page-layout.ts"
|
||||
import { definePageLayout, PageLayoutTabLayoutMode } from 'twenty-sdk/define';
|
||||
@@ -228,7 +228,7 @@ export default definePageLayout({
|
||||
});
|
||||
```
|
||||
|
||||
아무 문서나 열면 **Preview** 탭이 문서를 보기 좋게 렌더링하고, 공유 가능한 웹 페이지와 PDF 로 가는 링크를 함께 제공합니다:
|
||||
아무 문서나 열어 보면 **Preview** 탭이 문서를 보기 좋게 렌더링하고, 공유 가능한 웹 페이지와 PDF 링크도 함께 제공합니다:
|
||||
|
||||
<Frame caption="Preview 탭은 인라인 스타일로 문서를 렌더링하고, 빠른 링크도 제공합니다.">
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/09-document-viewer.png" alt="레코드 페이지 탭 안의 문서 뷰어 프런트 컴포넌트" />
|
||||
@@ -236,7 +236,7 @@ export default definePageLayout({
|
||||
|
||||
## 리치 텍스트 에디터로 템플릿 편집하기
|
||||
|
||||
템플릿에는 별도의 커스텀 컴포넌트가 전혀 필요하지 않습니다. `body`가 `RICH_TEXT` 필드이기 때문에 Twenty 는 이미 완전한 리치 텍스트 에디터를 제공합니다. 표준 Note 및 Task 객체에서 사용하는 것과 동일한 에디터입니다. 우리는 이 에디터를 템플릿 레코드 페이지에 노출하기만 하면 됩니다.
|
||||
템플릿에는 별도의 커스텀 컴포넌트가 전혀 필요하지 않습니다. `body`가 `RICH_TEXT` 필드이기 때문에, Twenty는 이미 해당 필드에 사용할 수 있는 완전한 리치 텍스트 편집기를 제공합니다. 표준 Note 및 Task 객체에서 사용하는 것과 동일한 편집기입니다. 우리는 이 에디터를 템플릿 레코드 페이지에 노출하기만 하면 됩니다.
|
||||
|
||||
`EDITOR` 디스플레이 모드의 `FIELD` 위젯을 가진 탭을 추가하고, `fieldMetadataId`를 통해 `body` 필드를 가리키도록 설정하세요:
|
||||
|
||||
@@ -260,15 +260,15 @@ export default definePageLayout({
|
||||
}
|
||||
```
|
||||
|
||||
`RICH_TEXT` 필드는 에디터의 블록 JSON 과 Markdown 프로젝션을 둘 다 저장합니다. 생성 파이프라인은 그 Markdown 프로젝션을 읽으므로, 플레이스홀더, PDF, 공유 가능한 웹 페이지가 모두 변경 없이 계속 동작합니다. 전체 코드는
|
||||
`RICH_TEXT` 필드는 편집기의 블록 JSON과 Markdown 프로젝션을 모두 저장합니다. 생성 파이프라인은 그 Markdown 프로젝션을 읽으므로, 플레이스홀더, PDF, 공유 가능한 웹 페이지가 모두 변경 없이 계속 동작합니다. 전체 코드는
|
||||
[`template-record.page-layout.ts`](https://github.com/twentyhq/twenty/blob/main/packages/twenty-apps/examples/document-generator/src/page-layouts/template-record.page-layout.ts)에서 확인하세요.
|
||||
이제 에디터들은 제대로 된 리치 텍스트 에디터에서 템플릿을 작성할 수 있습니다:
|
||||
이제 편집자는 제대로 된 리치 텍스트 편집기에서 템플릿을 작성할 수 있습니다:
|
||||
|
||||
<Frame caption="Template 탭: Twenty 의 네이티브 리치 텍스트 에디터가 body 필드에 연결되어 있습니다.">
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/10-template-editor.png" alt="네이티브 리치 텍스트 에디터 탭이 있는 템플릿 레코드" />
|
||||
</Frame>
|
||||
|
||||
**이 단계를 마치면:** 문서는 보기 좋게 미리 볼 수 있고, 템플릿은 앱 안에서 편집할 수 있습니다. 이제 AI 에이전트가 채팅으로부터 문서를 생성하도록 해 봅시다.
|
||||
**이 단계를 마치면:** 문서는 보기 좋게 미리 볼 수 있고, 템플릿은 앱 내에서 편집할 수 있습니다. 다음으로, AI 에이전트가 채팅에서 문서를 생성하도록 만들어 봅시다.
|
||||
|
||||
<Card title="다음: AI 에이전트 →" icon="robot" href="/l/ko/developers/extend/apps/tutorials/document-generator/ai-agent">
|
||||
도구를 호출하는 에이전트와 스킬을 추가하세요.
|
||||
|
||||
+3
-3
@@ -10,7 +10,7 @@ description: 하나의 로직 함수로, AI 도구이자 워크플로 작업으
|
||||
|
||||
## 렌더링 헬퍼
|
||||
|
||||
순수 로직은 별도의 파일에 유지해 단위 테스트를 쉽게 할 수 있도록 하세요. 이는 레코드를 `{{dot.path}}` 토큰으로 평탄화하고, 해당 토큰을 치환합니다.
|
||||
순수 로직은 별도의 파일로 분리해 두어 단위 테스트를 쉽게 할 수 있도록 하세요. 이는 레코드를 `{{dot.path}}` 토큰으로 평탄화하고, 해당 토큰을 치환합니다.
|
||||
|
||||
```ts filename="src/logic-functions/utils/render-template.ts"
|
||||
const PLACEHOLDER_PATTERN = /\{\{\s*([\w.]+)\s*\}\}/g;
|
||||
@@ -27,7 +27,7 @@ export const renderTemplate = (body: string, values: Record<string, string>) =>
|
||||
```
|
||||
|
||||
<Tip>
|
||||
이 파일은 부작용이 없으므로, 빠른 단위 테스트(`yarn test:unit`)로 커버할 수 있습니다. [테스트](/l/ko/developers/extend/apps/operations/testing)를 참조하세요.
|
||||
이 파일은 부작용이 없으므로, 빠른 단위 테스트(`yarn test:unit`)로 검증할 수 있습니다. [테스트](/l/ko/developers/extend/apps/operations/testing)를 참조하세요.
|
||||
</Tip>
|
||||
|
||||
## 핸들러
|
||||
@@ -154,7 +154,7 @@ yarn add pdf-lib marked
|
||||
|
||||
전체 헬퍼 코드는
|
||||
[`generate-document-pdf.ts`](https://github.com/twentyhq/twenty/blob/main/packages/twenty-apps/examples/document-generator/src/logic-functions/utils/generate-document-pdf.ts)에 있습니다.
|
||||
이 헬퍼는 `marked.lexer`로 Markdown을 토큰으로 파싱한 뒤, pdf-lib으로 레이아웃합니다. 실제 제목, **굵게**/**기울임** 처리, 글머리 기호 및 번호 목록, 인용 블록과 가로줄 등, 텍스트 덩어리가 아니라 템플릿 자체를 다듬어진 다중 페이지 A4 렌더링으로 만들어 줍니다.
|
||||
이 헬퍼는 `marked.lexer`로 Markdown을 토큰으로 파싱한 뒤, pdf-lib으로 레이아웃합니다. 실제 제목, **굵게**/*기울임* 처리, 글머리 기호 및 번호 목록, 인용 블록과 구분선 등, 텍스트 덩어리가 아니라 템플릿 자체를 다듬어진 다중 페이지 A4 렌더링으로 만들어 줍니다.
|
||||
|
||||
<Frame caption="생성된 PDF: 실제 타이포그래피와 Markdown 서식을 사용해 템플릿 본문을 렌더링합니다.">
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/07b-generated-pdf.png" alt="다듬어진, 상용 수준의 생성된 PDF" />
|
||||
|
||||
+3
-3
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: 3. HTTP 경로들
|
||||
title: 3. HTTP 경로
|
||||
icon: globe
|
||||
description: HTTP를 통해 함수를 트리거하고 문서를 웹 페이지로 렌더링합니다.
|
||||
---
|
||||
@@ -13,7 +13,7 @@ description: HTTP를 통해 함수를 트리거하고 문서를 웹 페이지로
|
||||
|
||||
## POST 경로 — 온디맨드로 생성하기
|
||||
|
||||
이는 `generateDocumentHandler`를 재사용하므로, 반복해야 할 로직은 없고 요청 본문을 읽는 얇은 어댑터만 있으면 됩니다.
|
||||
이는 `generateDocumentHandler`를 재사용하므로 반복해야 할 로직은 없고, 요청 본문을 읽는 간단한 어댑터만 있으면 됩니다.
|
||||
|
||||
```ts filename="src/logic-functions/generate-document-route.ts"
|
||||
import { defineLogicFunction, type RoutePayload } from 'twenty-sdk/define';
|
||||
@@ -130,6 +130,6 @@ http://localhost:2020/s/documents/view?id=<documentId>
|
||||
|
||||
**이 단계를 마치면:** 앱은 HTTP를 통해 문서를 생성하고 이를 웹 페이지로 제공할 수 있습니다. 이제 `curl` 없이도 사용할 수 있도록 만들어 봅시다.
|
||||
|
||||
<Card title="다음: UI 빌드하기 →" icon="table-columns" href="/l/ko/developers/extend/apps/tutorials/document-generator/building-the-ui">
|
||||
<Card title="다음: UI 구성하기 →" icon="table-columns" href="/l/ko/developers/extend/apps/tutorials/document-generator/building-the-ui">
|
||||
뷰, 내비게이션, 커맨드, 그리고 프런트 컴포넌트.
|
||||
</Card>
|
||||
|
||||
+1
-1
@@ -8,7 +8,7 @@ description: 실제 Twenty 앱을 만들어 CRM 데이터에서 개인 맞춤형
|
||||
|
||||
`{{placeholders}}`로 한 번 템플릿을 작성한 다음, 명령 메뉴, AI 에이전트 또는 워크플로에서 한 번의 클릭으로 어떤 사람(Person)이나 회사(Company)에 대해서도 내용이 채워진 문서를 생성할 수 있습니다.
|
||||
|
||||
<Frame caption="특정 사람을 위해 생성된 하나의 템플릿이 인쇄 가능한 페이지로 열립니다.">
|
||||
<Frame caption="특정 사람을 위해 생성된 문서가 인쇄 가능한 페이지로 열려 있습니다.">
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/07-rendered-document.png" alt="생성된 영업 제안(Sales proposal) 문서" />
|
||||
</Frame>
|
||||
|
||||
|
||||
+6
-6
@@ -40,7 +40,7 @@ export default defineApplication({
|
||||
|
||||
## 갤러리 스크린샷 추가
|
||||
|
||||
마켓플레이스 목록은 스크린샷만으로도 스스로를 설명합니다. 몇 개의 PNG 파일을 `public/gallery/`에 넣고 `screenshots`로 참조하세요. 그러면 목록 페이지에서 갤러리로 렌더링됩니다.
|
||||
마켓플레이스 등록 정보는 스크린샷만으로도 충분히 어필됩니다. 몇 개의 PNG 파일을 `public/gallery/`에 넣고 `screenshots`로 참조하세요. 그러면 목록 페이지에서 갤러리로 렌더링됩니다.
|
||||
|
||||
```ts filename="src/application-config.ts"
|
||||
export default defineApplication({
|
||||
@@ -59,11 +59,11 @@ export default defineApplication({
|
||||
</Tip>
|
||||
|
||||
`README.md`도 동일한 방식으로 다뤄 주세요. npm과 GitHub에서의 첫 페이지 역할을 합니다.
|
||||
가치 제안과 스크린샷으로 시작하고, 핵심 기능을 나열한 다음, 빌드 세부 정보는 아래로 접어두세요.
|
||||
가치 제안과 스크린샷으로 시작하고 핵심 기능을 나열한 다음, 빌드 세부 정보는 접힌 영역 아래에 배치하세요.
|
||||
|
||||
## 출시 전 점검
|
||||
|
||||
CI가 수행하는 것과 동일한 게이트를 실행하세요:
|
||||
CI에서 수행하는 것과 동일한 검증 단계를 실행하세요:
|
||||
|
||||
```bash filename="Terminal"
|
||||
yarn lint # oxlint
|
||||
@@ -96,10 +96,10 @@ yarn twenty dev:catalog-sync -r <remote>
|
||||
|
||||
## 앱을 만들었습니다 🎉
|
||||
|
||||
여섯 개의 장에서 SDK 표면 대부분을 사용했습니다:
|
||||
여섯 개의 장에서 SDK의 대부분 기능 영역을 사용했습니다:
|
||||
|
||||
* 데이터를 모델링하기 위한 **오브젝트, 필드, 그리고 관계**
|
||||
* **AI 도구**로 노출되는 **로직 함수**, **워크플로 동작**, 그리고 **HTTP 라우트**
|
||||
* 데이터를 모델링하기 위한 **객체, 필드, 그리고 관계**
|
||||
* **AI 도구**, **워크플로 작업**, **HTTP 라우트**로 노출되는 **로직 함수**
|
||||
* UI를 위한 **뷰, 내비게이션, 커맨드, 프런트 컴포넌트**
|
||||
* 자연어 생성을 위한 **에이전트 + 스킬**
|
||||
* **마켓플레이스 메타데이터**와 게시 플로우
|
||||
|
||||
+1
-1
@@ -74,7 +74,7 @@ Esse é o benefício de expor a lógica como uma ferramenta: **uma função, mui
|
||||
menu de comando, HTTP, passo do fluxo de trabalho e agora a linguagem natural.
|
||||
|
||||
**Após este passo:** o aplicativo está cheio de recursos e realmente útil. Hora de
|
||||
enviar.
|
||||
lançar.
|
||||
|
||||
<Card title="Próximo: publicação →" icon="rocket" href="/desenvolvedores/adicionar/apps/tutorials/document-gerador/publicação">
|
||||
Adicionar metadados do mercado e publicar.
|
||||
|
||||
+2
-2
@@ -116,8 +116,8 @@ export default defineFrontComponent({
|
||||
|
||||
<Warning>
|
||||
Estilo com variáveis CSS inline (`var(--t-color-blue)`), não valores importados de
|
||||
`25ui`. O SDK simula esse pacote durante a build, portanto, imports em nível de módulo de
|
||||
constantes de tema seriam `undefined`. Veja o
|
||||
`25ui`. O SDK simula esse pacote durante a compilação, portanto, as importações em nível de módulo de
|
||||
constantes de tema ficariam `undefined`. Veja o
|
||||
[componente inteiro](https://github.com/twentyhq/twenty/blob/main/packages/twenty-apps/examples/document-generator/src/front-components/generate-document-form.front-component.tsx).
|
||||
</Warning>
|
||||
|
||||
|
||||
+2
-2
@@ -182,8 +182,8 @@ em si, ao invés de uma parede de texto.
|
||||
</Frame>
|
||||
|
||||
<Note>
|
||||
As fontes internas do pdf-lib usam codificação WinAnsi, portanto acentos da Europa Ocidental são renderizados
|
||||
prontos para uso; o helper mapeia aspas tipográficas e travessões e descarta caracteres que
|
||||
As fontes internas do pdf-lib usam codificação WinAnsi, portanto os acentos da Europa Ocidental são exibidos
|
||||
por padrão; o utilitário mapeia aspas tipográficas e travessões e descarta caracteres que
|
||||
não consegue codificar. Renderizar scripts não-latinos (chinês, árabe, cirílico) significaria que
|
||||
incorporando uma fonte Unicode.
|
||||
</Note>
|
||||
|
||||
+13
-17
@@ -7,9 +7,7 @@ description: Crie um aplicativo Twenty real que gera documentos personalizados a
|
||||
Neste tutorial, você vai criar o **Gerador de Documentos** — um aplicativo que transforma modelos reutilizáveis
|
||||
em documentos personalizados usando os dados que você já tem no seu CRM.
|
||||
|
||||
Escreva um modelo uma vez com `{{placeholders}}` e, em seguida, gere um documento preenchido
|
||||
para qualquer Pessoa ou Empresa com um clique — a partir do menu de comando, de um
|
||||
agente de IA ou de um workflow.
|
||||
Escreva um modelo uma vez com `{{placeholders}}` e, em seguida, gere um documento preenchido para qualquer Pessoa ou Empresa com um clique — a partir do menu de comandos, de um agente de IA ou de um fluxo de trabalho.
|
||||
|
||||
<Frame caption="Um modelo, gerado para uma pessoa específica, aberto como uma página para impressão.">
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/07-rendered-document.png" alt="Um documento de proposta de vendas gerado" />
|
||||
@@ -19,14 +17,14 @@ agente de IA ou de um workflow.
|
||||
|
||||
Cada capítulo adiciona uma capacidade. Ao final, você terá usado a maior parte do SDK.
|
||||
|
||||
| Capítulo | Capacidade | Referência |
|
||||
| ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
|
||||
| [1. Modelo de Dados](/l/pt/developers/extend/apps/tutorials/document-generator/data-model) | Objetos, campos e uma relação | [Dados](/l/pt/developers/extend/apps/data/overview) |
|
||||
| [2. Geração de documentos](/l/pt/developers/extend/apps/tutorials/document-generator/generating-documents) | Uma função lógica (ferramenta de IA + ação de workflow) que preenche um modelo Markdown e anexa um PDF finalizado | [Funções lógicas](/l/pt/developers/extend/apps/logic/logic-functions) |
|
||||
| [3. Rotas HTTP](/l/pt/developers/extend/apps/tutorials/document-generator/http-routes) | Servindo JSON e uma página HTML compartilhável a partir de rotas | [Funções lógicas](/l/pt/developers/extend/apps/logic/logic-functions) |
|
||||
| [4. Criando a UI](/l/pt/developers/extend/apps/tutorials/document-generator/building-the-ui) | Vistas, navegação, menu de comandos e componentes de front-end que preveem um documento e editam um modelo | [Layout](/l/pt/developers/extend/apps/layout/overview) |
|
||||
| [5. Um agente de IA](/l/pt/developers/extend/apps/tutorials/document-generator/ai-agent) | Agente + habilidade | [Habilidades e Agentes](/l/pt/developers/extend/apps/logic/skills-and-agents) |
|
||||
| [6. Publicação](/l/pt/developers/extend/apps/tutorials/document-generator/publishing) | Envie-o para o marketplace | [Publicação](/l/pt/developers/extend/apps/operations/publishing) |
|
||||
| Capítulo | Capacidade | Referência |
|
||||
| ----------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
|
||||
| [1. Modelo de Dados](/l/pt/developers/extend/apps/tutorials/document-generator/data-model) | Objetos, campos e uma relação | [Dados](/l/pt/developers/extend/apps/data/overview) |
|
||||
| [2. Geração de documentos](/l/pt/developers/extend/apps/tutorials/document-generator/generating-documents) | Uma função lógica (ferramenta de IA + ação de fluxo de trabalho) que preenche um modelo Markdown e anexa um PDF finalizado | [Funções lógicas](/l/pt/developers/extend/apps/logic/logic-functions) |
|
||||
| [3. Rotas HTTP](/l/pt/developers/extend/apps/tutorials/document-generator/http-routes) | Servindo JSON e uma página HTML compartilhável a partir de rotas | [Funções lógicas](/l/pt/developers/extend/apps/logic/logic-functions) |
|
||||
| [4. Criando a UI](/l/pt/developers/extend/apps/tutorials/document-generator/building-the-ui) | Vistas, navegação, menu de comandos e componentes de front-end que pré-visualizam um documento e editam um modelo | [Layout](/l/pt/developers/extend/apps/layout/overview) |
|
||||
| [5. Um agente de IA](/l/pt/developers/extend/apps/tutorials/document-generator/ai-agent) | Agente + habilidade | [Habilidades e Agentes](/l/pt/developers/extend/apps/logic/skills-and-agents) |
|
||||
| [6. Publicação](/l/pt/developers/extend/apps/tutorials/document-generator/publishing) | Envie-o para o marketplace | [Publicação](/l/pt/developers/extend/apps/operations/publishing) |
|
||||
|
||||
## Pré-requisitos
|
||||
|
||||
@@ -50,14 +48,12 @@ Cada trecho abaixo foi copiado de lá.
|
||||
## Como o aplicativo se encaixa
|
||||
|
||||
<Frame>
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/how-it-fits.svg" alt="Um modelo com placeholders é transformado em um documento finalizado com um PDF, acionado a partir do menu de comandos, de um agente de IA, de um workflow ou de um link compartilhável" />
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/how-it-fits.svg" alt="Um modelo com placeholders é transformado em um documento finalizado com um PDF, acionado a partir do menu de comandos, de um agente de IA, de um fluxo de trabalho ou de um link compartilhável" />
|
||||
</Frame>
|
||||
|
||||
Você escreve um **modelo** uma vez em um editor de rich text, com `{{placeholders}}`. Escolher um
|
||||
Você escreve um **modelo** uma vez em um editor de texto rico, com `{{placeholders}}`. Escolher um
|
||||
modelo e um registro de CRM preenche os placeholders e armazena um
|
||||
**documento** finalizado (com um arquivo PDF). Todo o resto — o menu de comandos, o agente de IA,
|
||||
o passo de workflow, o link compartilhável — é apenas uma forma diferente de acionar aquele
|
||||
único gerador.
|
||||
**documento** finalizado (com um arquivo PDF). Todo o resto — o menu de comandos, o agente de IA, a etapa do fluxo de trabalho, o link compartilhável — é apenas uma forma diferente de acionar aquele único gerador.
|
||||
|
||||
## Mantenha este ciclo em execução
|
||||
|
||||
@@ -66,5 +62,5 @@ você adicionar ou editar um arquivo em `src/`, ele será ressíncronizado com o
|
||||
segundos, para que você possa ver cada capacidade aparecer na UI conforme a constrói.
|
||||
|
||||
<Card title="Comece a construir →" icon="database" href="/l/pt/developers/extend/apps/tutorials/document-generator/data-model">
|
||||
Capítulo 1: modele documentos e modelos.
|
||||
Capítulo 1: modele documentos e modelos de documento.
|
||||
</Card>
|
||||
|
||||
+2
-2
@@ -31,7 +31,7 @@ export default defineApplication({
|
||||
```
|
||||
|
||||
<Tip>
|
||||
A função padrão é declarada com `defineApplicationRole()` em seu próprio arquivo — você
|
||||
O papel padrão é declarado com `defineApplicationRole()` em seu próprio arquivo — você
|
||||
não passa mais `defaultRoleUniversalIdentifier` aqui.
|
||||
</Tip>
|
||||
|
||||
@@ -116,7 +116,7 @@ Em seis capítulos você usou a maior parte da superfície SDK:
|
||||
* Um **agente + habilidade** para a geração de idioma natural
|
||||
* **Metadados do Marketplace** e o fluxo de publicação
|
||||
|
||||
O aplicativo finalizado está em
|
||||
O aplicativo completo está em
|
||||
[`packages/twenty-apps/examples/document-generator`](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/examples/document-generator).
|
||||
|
||||
## Para onde ir
|
||||
|
||||
+3
-3
@@ -1,14 +1,14 @@
|
||||
---
|
||||
title: "Tutorial: Generator de documente"
|
||||
title: "Tutorial: Document Generator"
|
||||
icon: wand-magic-sparkles
|
||||
description: Construiește o aplicație Twenty reală care generează documente personalizate din datele tale CRM.
|
||||
description: Construiește o aplicație Twenty reală care generează documente personalizate din datele din CRM-ul tău.
|
||||
---
|
||||
|
||||
În acest tutorial vei construi **Document Generator** — o aplicație care transformă șabloanele reutilizabile
|
||||
în documente personalizate folosind datele deja existente în CRM-ul tău.
|
||||
|
||||
Scrie un șablon o singură dată cu `{{placeholders}}`, apoi generează un document completat
|
||||
pentru orice Persoană sau Companie cu un singur clic — din meniul de comenzi, de la un
|
||||
pentru orice Persoană sau Companie cu un singur clic — din meniul de comenzi, printr-un
|
||||
agent AI sau dintr-un flux de lucru.
|
||||
|
||||
<Frame caption="Un șablon, generat pentru o anumită persoană, deschis ca o pagină imprimabilă.">
|
||||
|
||||
+2
-2
@@ -4,7 +4,7 @@ icon: table-columns
|
||||
description: Görünümler, kenar çubuğu gezinmesi, bir komut ve ön uç bileşenleri.
|
||||
---
|
||||
|
||||
Şu anda nesnelere yalnızca Settings üzerinden erişilebiliyor. Uygulamaya UI'de gerçek bir varlık kazandıralım: liste görünümleri, kenar çubuğu girişleri, tek tıkla **Generate document** komutu, bir belgeyi **önizlemek** için kayıt sayfası ön uç bileşeni ve şablonlar için yerel zengin metin **editor** sekmesi.
|
||||
Şu anda nesnelere yalnızca Settings üzerinden erişilebiliyor. Uygulamaya UI'de gerçek bir varlık kazandıralım: liste görünümleri, kenar çubuğu girişleri, tek tıkla **Generate document** komutu, bir belgeyi **önizlemek** için kayıt sayfası ön uç bileşeni ve şablonlar için yerel zengin metin **editör** sekmesi.
|
||||
|
||||
## Görünümler ve gezinme
|
||||
|
||||
@@ -140,7 +140,7 @@ export default defineCommandMenuItem({
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/06-command-menu.png" alt="Generate document ile komut menüsü" />
|
||||
</Frame>
|
||||
|
||||
Çalıştırın — bileşeniniz yan panelde açılır. Bir şablon seçin, **Generate**'a tıklayın ve **Documents** içinde yeni bir kayıt oluşsun.
|
||||
Çalıştırın — bileşeniniz yan panelde açılır. Bir şablon seçin, **Generate**'a tıklayın ve **Documents** içinde yeni bir kayıt oluşur.
|
||||
|
||||
<Frame caption="Ön uç bileşeni, şablonları yüklüyor ve tıklamayla oluşturuyor.">
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/06b-front-component.png" alt="Generate document yan paneli" />
|
||||
|
||||
+18
-18
@@ -1,16 +1,16 @@
|
||||
---
|
||||
title: 2. Belgeleri oluşturma
|
||||
icon: bolt
|
||||
description: Bir mantık fonksiyonu, bir yapay zekâ aracı ve bir iş akışı eylemi olarak sunulur.
|
||||
description: Yapay zekâ aracı ve iş akışı eylemi olarak sunulan tek bir mantık işlevi.
|
||||
---
|
||||
|
||||
Şimdi asıl kısma geçelim: bir şablon ve bir kaydı yükleyen, yer tutucuları dolduran ve yeni bir belge kaydeden bir [mantık fonksiyonu](/l/tr/developers/extend/apps/logic/logic-functions).
|
||||
Şimdi esas kısma geçelim: bir şablon ve bir kaydı yükleyen, yer tutucuları dolduran ve yeni bir belge kaydeden bir [mantık işlevi](/l/tr/developers/extend/apps/logic/logic-functions).
|
||||
|
||||
İş mantığını **handler** olarak bir kez yazacağız, sonra bunu birkaç tetikleyici üzerinden kullanıma sunacağız. Bu bölüm bunlardan ikisini birbirine bağlıyor — bir **AI aracı** ve bir **iş akışı eylemi**.
|
||||
İş mantığını **handler** olarak bir kez yazacağız, sonra bunu birkaç tetikleyici üzerinden kullanıma sunacağız. Bu bölüm bunlardan ikisini birleştiriyor — bir **yapay zekâ aracı** ve bir **iş akışı eylemi**.
|
||||
|
||||
## Oluşturma yardımcısı
|
||||
|
||||
Saf mantığı kendi dosyasında tutun ki birim testlerini yazmak kolay olsun. Bu, bir kaydı `{{dot.path}}` belirteçlerine düzleştirir ve bunların yerine değerlerini koyar.
|
||||
Saf mantığı kendi dosyasında tutun ki birim testi yapmak kolay olsun. Bu, bir kaydı `{{dot.path}}` belirteçlerine düzleştirir ve bunların yerine değerlerini koyar.
|
||||
|
||||
```ts filename="src/logic-functions/utils/render-template.ts"
|
||||
const PLACEHOLDER_PATTERN = /\{\{\s*([\w.]+)\s*\}\}/g;
|
||||
@@ -30,7 +30,7 @@ export const renderTemplate = (body: string, values: Record<string, string>) =>
|
||||
Bu dosyanın yan etkisi olmadığından, onu hızlı birim testleriyle kapsayabilirsiniz (`yarn test:unit`). Bkz. [Testing](/l/tr/developers/extend/apps/operations/testing).
|
||||
</Tip>
|
||||
|
||||
## Handler
|
||||
## İşleyici
|
||||
|
||||
Handler, CRM verilerini okumak ve yazmak için oluşturulmuş [`CoreApiClient`](/l/tr/developers/extend/apps/logic/logic-functions) kullanır. Şablonu yükler, hedef kaydı yükler, gövdeyi doldurur ve bir `document` oluşturur.
|
||||
|
||||
@@ -77,7 +77,7 @@ export const generateDocumentHandler = async (
|
||||
`loadRecordValues`, Kişi ile Şirket için farklı bir sorgu çalıştırır ve sonucu düzleştirir — bkz.
|
||||
[`load-record-values.ts`](https://github.com/twentyhq/twenty/blob/main/packages/twenty-apps/examples/document-generator/src/logic-functions/utils/load-record-values.ts).
|
||||
|
||||
## Bunu bir araç ve bir iş akışı eylemi olarak kullanıma sunma
|
||||
## Bunu bir araç ve iş akışı eylemi olarak kullanıma açın
|
||||
|
||||
Tek bir `defineLogicFunction` birden çok tetikleyici barındırabilir. Burada, `toolTriggerSettings` onu AI aracılarının çağırabileceği hâle getirir ve `workflowActionTriggerSettings` onu görsel iş akışı oluşturucusundaki bir adıma dönüştürür. Her ikisi de girdilerini bir JSON şemasıyla tanımlar.
|
||||
|
||||
@@ -112,7 +112,7 @@ Girdi şeması, `templateId` ve `recordId` değerlerini tanımlayan basit bir JS
|
||||
|
||||
## Erişim verin
|
||||
|
||||
Mantık fonksiyonları, uygulamanın rolüyle çalışır. Şablonları ve kayıtları okuması ve belgeler oluşturması gerektiğinden, `src/roles/default-role.ts` içinde buna izin verin:
|
||||
Mantık işlevleri uygulamanın rolü olarak çalışır. Şablonları ve kayıtları okuması ve belgeler oluşturması gerektiğinden, `src/roles/default-role.ts` içinde buna izin verin:
|
||||
|
||||
```ts
|
||||
export default defineApplicationRole({
|
||||
@@ -126,14 +126,14 @@ export default defineApplicationRole({
|
||||
});
|
||||
```
|
||||
|
||||
`UPLOAD_FILE`, bir sonraki bölümde fonksiyonun oluşturulan PDF'yi yüklemesine olanak tanır.
|
||||
`UPLOAD_FILE`, bir sonraki bölümde oluşturulan PDF'yi işlevin yüklemesine izin verir.
|
||||
Daha ayrıntılı izinler için bkz. [Roles](/l/tr/developers/extend/apps/config/roles).
|
||||
|
||||
## Gerçek bir PDF dosyası ekleyin
|
||||
|
||||
Oluşturulmuş bir metin alanı kullanışlıdır, ancak kullanıcılar gerçek bir belge ister. Bir **PDF** oluşturalım ve onu kayıt üzerinde indirilebilir bir dosya olarak saklayalım.
|
||||
|
||||
Önce, PDF'yi tutması için `document` nesnesine bir `FILES` alanı verin. Uygulamalar **kendi** dosya alanlarına yükleme yapar, dolayısıyla yüklemenin yönlendirildiği yer bu alandır:
|
||||
Önce, PDF'yi tutmak için `document` nesnesine bir `FILES` alanı verin. Uygulamalar **kendi** dosya alanlarına yükleme yapar, dolayısıyla yüklemenin yönlendirildiği yer bu alandır:
|
||||
|
||||
```ts filename="src/objects/document.object.ts"
|
||||
{
|
||||
@@ -146,24 +146,24 @@ Oluşturulmuş bir metin alanı kullanışlıdır, ancak kullanıcılar gerçek
|
||||
}
|
||||
```
|
||||
|
||||
Şimdi o PDF'yi oluşturun. Bir uygulama gerçek bir Node projesidir, bu yüzden ihtiyaç duyduğunuz herhangi bir npm paketini ekleyebilir ve onu başka yerlerde olduğu gibi içe aktarabilirsiniz. Biz, PDF'yi çizmek için **[pdf-lib](https://pdf-lib.js.org/)** ve Markdown gövdesini ayrıştırmak için **[marked](https://marked.js.org/)** kullanıyoruz — CLI bunları fonksiyonun çalışma zamanına sizin için kurar:
|
||||
Şimdi o PDF'yi oluşturun. Bir uygulama gerçek bir Node projesidir, bu yüzden ihtiyacınız olan herhangi bir npm paketini ekleyebilir ve onu başka yerlerde olduğu gibi içe aktarabilirsiniz. Biz, PDF'yi çizmek için **[pdf-lib](https://pdf-lib.js.org/)** ve Markdown gövdesini ayrıştırmak için **[marked](https://marked.js.org/)** kullanıyoruz — CLI bunları işlevin çalışma zamanına sizin için kurar:
|
||||
|
||||
```bash filename="Terminal"
|
||||
yarn add pdf-lib marked
|
||||
```
|
||||
|
||||
Tam yardımcı işlev şuradadır: [`generate-document-pdf.ts`](https://github.com/twentyhq/twenty/blob/main/packages/twenty-apps/examples/document-generator/src/logic-functions/utils/generate-document-pdf.ts).
|
||||
Bu yardımcı, Markdown'ı `marked.lexer` ile belirteçlere ayrıştırır, ardından onları pdf-lib ile yerleştirir: gerçek başlıklar, **kalın**/*italik* kısımlar, madde ve numaralı listeler, alıntı blokları ve çizgiler — şablonun kendisinin, sadece bir metin yığını yerine, cilalı, çok sayfalı A4 formatında bir oluşturması.
|
||||
Bu, Markdown'ı `marked.lexer` ile belirteçlere ayrıştırır, ardından bunları pdf-lib ile yerleştirir: gerçek başlıklar, **kalın**/*italik* metinler, madde ve numaralı listeler, alıntılar ve çizgiler — şablonun kendisinin duvar gibi bir metin yerine cilalı, çok sayfalı A4 işlenmesi.
|
||||
|
||||
<Frame caption="Oluşturulan PDF: gerçek tipografi ve Markdown biçimlendirmesiyle şablon gövdesinin oluşturulması.">
|
||||
<Frame caption="Oluşturulan PDF: gerçek tipografi ve Markdown biçimlendirmesiyle şablon gövdesinin işlenmiş hâli.">
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/07b-generated-pdf.png" alt="Cilalı, pazarlanabilir oluşturulmuş bir PDF" />
|
||||
</Frame>
|
||||
|
||||
<Note>
|
||||
pdf-lib'in yerleşik yazı tipleri WinAnsi kodlaması kullanır, bu nedenle Batı Avrupa aksanları kutudan çıktığı gibi oluşturulur; yardımcı, akıllı tırnak işaretlerini ve tireleri eşler ve kodlayamadığı karakterleri atar. Latin olmayan yazı sistemlerini (Çince, Arapça, Kiril) oluşturmak, bir Unicode yazı tipi gömmek anlamına gelir.
|
||||
pdf-lib'in yerleşik yazı tipleri WinAnsi kodlaması kullanır, bu nedenle Batı Avrupa aksanları kutudan çıktığı gibi oluşturulur; yardımcı, akıllı tırnak işaretlerini ve tireleri eşler ve kodlayamadığı karakterleri atar. Latin olmayan yazı sistemlerini (Çince, Arapça, Kiril) işlemek, bir Unicode yazı tipi gömmeyi gerektirir.
|
||||
</Note>
|
||||
|
||||
Sonra onu yükleyin ve başvurusunu kayıt üzerinde saklayın. `uploadFile`, baytları uygulamaya ait dosya alanınıza yönlendirir; döndürülen `id`, kaydettiğiniz değerdir:
|
||||
Sonra onu yükleyin ve referansını kayıt üzerinde saklayın. `uploadFile`, baytları uygulamanıza ait dosya alanına yönlendirir; döndürülen `id`, kaydettiğiniz değerdir:
|
||||
|
||||
```ts filename="src/logic-functions/handlers/generate-document-handler.ts"
|
||||
import { MetadataApiClient } from 'twenty-client-sdk/metadata';
|
||||
@@ -191,18 +191,18 @@ await client.mutation({
|
||||
});
|
||||
```
|
||||
|
||||
Artık oluşturulan belge indirilebilir bir PDF taşıyor:
|
||||
Oluşturulan belge artık indirilebilir bir PDF taşıyor:
|
||||
|
||||
<Frame caption="Oluşturulan PDF, belgenin Dosya alanında saklanır.">
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/08-document-with-pdf.png" alt="Oluşturulmuş PDF dosyasına sahip bir belge kaydı" />
|
||||
</Frame>
|
||||
|
||||
<Note>
|
||||
`uploadFile` yalnızca **uygulamaya ait** dosya alanlarını hedefler (bu nedenle yüklemeler her zaman alanın sahibi olan bir uygulama ve ayrıca `UPLOAD_FILE` rol bayrağı gerektirir). Bu nedenle PDF, kaydın kendi `file` alanına düşer — [call-recorder app](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/public/call-recorder) uygulamasının kayıtlar için kullandığıyla aynı desen.
|
||||
`uploadFile` yalnızca **uygulamaya ait** dosya alanlarını hedefler (bu nedenle yüklemeler her zaman alanın sahibi olan bir uygulama ve ayrıca `UPLOAD_FILE` rol bayrağı gerektirir). Bu nedenle PDF, kaydın kendi `file` alanına düşer — [call-recorder app](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/public/call-recorder) uygulamasının kayıtlar için kullandığı desenle aynıdır.
|
||||
</Note>
|
||||
|
||||
**Bu adımdan sonra:** her oluşturulan belgenin gerçek, indirilebilir bir PDF'si vardır. Ancak henüz hiçbir şey oluşturucuyu arayüzden *çağır*amıyor — bunun için bir HTTP rotasına ihtiyacımız var.
|
||||
**Bu adımdan sonra:** her oluşturulan belgenin gerçek, indirilebilir bir PDF'si vardır. Ancak henüz hiçbir şey oluşturucuyu arayüzden *çağıramıyor* — bunun için bir HTTP rotasına ihtiyacımız var.
|
||||
|
||||
<Card title="Sırada: HTTP rotaları →" icon="küre" href="/l/tr/developers/extend/apps/tutorials/document-generator/http-routes">
|
||||
<Card title="Sırada: HTTP rotaları →" icon="globe" href="/l/tr/developers/extend/apps/tutorials/document-generator/http-routes">
|
||||
Fonksiyonu HTTP üzerinden sunun ve belgeleri web sayfaları olarak oluşturun.
|
||||
</Card>
|
||||
|
||||
+6
-6
@@ -6,12 +6,12 @@ description: İşlevi HTTP üzerinden tetikleyin ve belgeleri web sayfaları ola
|
||||
|
||||
Aynı işleyici HTTP isteklerine de yanıt verebilir. İki rota ekleyeceğiz:
|
||||
|
||||
* belge oluşturmak için UI’ın çağırdığı bir **POST** uç noktası ve
|
||||
* belge oluşturmak için arayüzün çağırdığı bir **POST** uç noktası ve
|
||||
* belgeyi yazdırılabilir bir web sayfası olarak oluşturan herkese açık bir **GET** uç noktası.
|
||||
|
||||
Her ikisi de `httpRouteTriggerSettings` kullanır. Uygulama rotaları Twenty sunucunuzda `/s` altında sunulur (ör. `http://localhost:2020/s/documents/generate`).
|
||||
|
||||
## POST rotası — isteğe bağlı oluşturma
|
||||
## POST rotası — istek üzerine oluşturma
|
||||
|
||||
Bu, `generateDocumentHandler`’ı yeniden kullanır, bu nedenle tekrarlanacak bir mantık yoktur — yalnızca istek gövdesini okuyan ince bir adaptör vardır.
|
||||
|
||||
@@ -49,7 +49,7 @@ export default defineLogicFunction({
|
||||
});
|
||||
```
|
||||
|
||||
Paylaşılan işleyici, hata durumunda önerilen bir `status` döndürür; böylece rota uygun bir `4xx`/`5xx` koduyla yanıt verebilir. `isAuthRequired: true`, çağıranın geçerli bir belirteç sunması gerektiği anlamına gelir — bir sonraki bölümdeki ön bileşen, kullanıcının erişim belirtecini otomatik olarak iletir.
|
||||
Paylaşılan işleyici, hata durumunda önerilen bir `status` döndürür; böylece rota uygun bir `4xx`/`5xx` koduyla yanıt verebilir. `isAuthRequired: true`, çağıranın geçerli bir belirteç sunması gerektiği anlamına gelir — bir sonraki bölümdeki ön uç bileşeni, kullanıcının erişim belirtecini otomatik olarak iletir.
|
||||
|
||||
## GET rotası — web sayfası olarak oluşturma
|
||||
|
||||
@@ -105,7 +105,7 @@ export default defineLogicFunction({
|
||||
|
||||
## Deneyin
|
||||
|
||||
Çalışma alanınızda bir şablon ve bir Kişi ile rotayı çağırın (**Settings → APIs & Webhooks** bölümünden bir belirteç alın):
|
||||
Çalışma alanınızda bir şablon ve bir Kişi ile rotayı çağırın (**Ayarlar → API'ler ve Web kancaları** bölümünden bir belirteç alın):
|
||||
|
||||
```bash filename="Terminal"
|
||||
curl -X POST http://localhost:2020/s/documents/generate \
|
||||
@@ -121,7 +121,7 @@ http://localhost:2020/s/documents/view?id=<documentId>
|
||||
```
|
||||
|
||||
<Frame caption="Herkese açık GET rotası, belgeyi yazdırılabilir bir sayfa olarak oluşturur.">
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/07-rendered-document.png" alt="Oluşturulmuş bir belge web sayfası" />
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/07-rendered-document.png" alt="Oluşturulan bir belgenin web sayfası" />
|
||||
</Frame>
|
||||
|
||||
<Tip>
|
||||
@@ -131,5 +131,5 @@ Ayrıca test ederken bir işlevin günlüklerini `yarn twenty dev:function:logs`
|
||||
**Bu adımdan sonra:** uygulama HTTP üzerinden belgeler oluşturabilir ve bunları web sayfaları olarak sunabilir. Şimdi bunu `curl` olmadan kullanılabilir hale getirelim.
|
||||
|
||||
<Card title="Sıradaki: arayüzü oluşturma →" icon="table-columns" href="/l/tr/developers/extend/apps/tutorials/document-generator/building-the-ui">
|
||||
Görünümler, gezinme, komut ve bir ön bileşen.
|
||||
Görünümler, gezinme, bir komut ve bir ön uç bileşeni.
|
||||
</Card>
|
||||
|
||||
+14
-14
@@ -6,7 +6,7 @@ description: CRM verilerinizden kişiselleştirilmiş belgeler oluşturan gerçe
|
||||
|
||||
Bu eğitimde, yeniden kullanılabilir şablonları CRM’inizde zaten bulunan verileri kullanarak kişiselleştirilmiş belgelere dönüştüren bir uygulama olan **Belge Oluşturucu**’yu geliştireceksiniz.
|
||||
|
||||
`{{placeholders}}` ile bir kez şablon yazın, sonra komut menüsünden, bir yapay zeka aracısından veya bir iş akışından tek tıklamayla herhangi bir Kişi veya Şirket için doldurulmuş bir belge oluşturun.
|
||||
`{{placeholders}}` ile bir kez şablon yazın, sonra komut menüsünden, bir yapay zekâ ajanından veya bir iş akışından tek tıklamayla herhangi bir Kişi veya Şirket için doldurulmuş bir belge oluşturun.
|
||||
|
||||
<Frame caption="Belirli bir kişi için oluşturulmuş, yazdırılabilir bir sayfa olarak açılan bir şablon.">
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/07-rendered-document.png" alt="Oluşturulmuş bir Satış teklifi belgesi" />
|
||||
@@ -14,23 +14,23 @@ Bu eğitimde, yeniden kullanılabilir şablonları CRM’inizde zaten bulunan ve
|
||||
|
||||
## Neler öğreneceksiniz
|
||||
|
||||
Her bölüm bir yetenek ekler. Sonunda SDK’nin çoğuna dokunmuş olacaksınız.
|
||||
Her bölüm bir yetenek ekler. Sonunda SDK'nin büyük kısmını kullanmış olacaksınız.
|
||||
|
||||
| Bölüm | Yetenek | Başvuru |
|
||||
| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------ |
|
||||
| [1. Veri modeli](/l/tr/developers/extend/apps/tutorials/document-generator/data-model) | Nesneler, alanlar ve bir ilişki | [Veri](/l/tr/developers/extend/apps/data/overview) |
|
||||
| [2. Belgeler oluşturma](/l/tr/developers/extend/apps/tutorials/document-generator/generating-documents) | Bir Markdown şablonunu dolduran ve cilalı bir PDF ekleyen mantık işlevi (Yapay zekâ aracı + iş akışı eylemi) | [Mantık işlevleri](/l/tr/developers/extend/apps/logic/logic-functions) |
|
||||
| [3. HTTP rotaları](/l/tr/developers/extend/apps/tutorials/document-generator/http-routes) | Rotalardan JSON ve paylaşılabilir bir HTML sayfası sunma | [Mantık işlevleri](/l/tr/developers/extend/apps/logic/logic-functions) |
|
||||
| [4. Kullanıcı arayüzünü oluşturma](/l/tr/developers/extend/apps/tutorials/document-generator/building-the-ui) | Görünümler, gezinme, komut menüsü ve bir belgeyi önizleyen ve bir şablonu düzenleyen ön bileşenler | [Düzen](/l/tr/developers/extend/apps/layout/overview) |
|
||||
| [5. Bir yapay zekâ aracısı](/l/tr/developers/extend/apps/tutorials/document-generator/ai-agent) | Aracı + beceri | [Beceriler ve aracılar](/l/tr/developers/extend/apps/logic/skills-and-agents) |
|
||||
| [6. Yayınlama](/l/tr/developers/extend/apps/tutorials/document-generator/publishing) | Onu pazaryerine gönderin | [Yayınlama](/l/tr/developers/extend/apps/operations/publishing) |
|
||||
| Bölüm | Yetenek | Başvuru |
|
||||
| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------- |
|
||||
| [1. Veri Modeli](/l/tr/developers/extend/apps/tutorials/document-generator/data-model) | Nesneler, alanlar ve bir ilişki | [Veri](/l/tr/developers/extend/apps/data/overview) |
|
||||
| [2. Belgeler oluşturma](/l/tr/developers/extend/apps/tutorials/document-generator/generating-documents) | Bir Markdown şablonunu dolduran ve cilalı bir PDF ekleyen mantık işlevi (Yapay zekâ aracı + iş akışı eylemi) | [Mantık işlevleri](/l/tr/developers/extend/apps/logic/logic-functions) |
|
||||
| [3. HTTP rotaları](/l/tr/developers/extend/apps/tutorials/document-generator/http-routes) | Rotalardan JSON ve paylaşılabilir bir HTML sayfası sunma | [Mantık işlevleri](/l/tr/developers/extend/apps/logic/logic-functions) |
|
||||
| [4. Kullanıcı arayüzünü oluşturma](/l/tr/developers/extend/apps/tutorials/document-generator/building-the-ui) | Görünümler, gezinme, komut menüsü ve bir belgeyi önizleyen ve bir şablonu düzenleyen ön uç bileşenleri | [Düzen](/l/tr/developers/extend/apps/layout/overview) |
|
||||
| [5. Bir yapay zekâ ajanı](/l/tr/developers/extend/apps/tutorials/document-generator/ai-agent) | Ajan + beceri | [Beceriler ve Temsilciler](/l/tr/developers/extend/apps/logic/skills-and-agents) |
|
||||
| [6. Yayınlama](/l/tr/developers/extend/apps/tutorials/document-generator/publishing) | Onu pazaryerine gönderin | [Yayınlama](/l/tr/developers/extend/apps/operations/publishing) |
|
||||
|
||||
## Ön Gereksinimler
|
||||
|
||||
[Hızlı Başlangıç](/l/tr/developers/extend/apps/getting-started/quick-start) bölümünü tamamlamış olmalısınız:
|
||||
`2020` portunda çalışan yerel bir Twenty sunucusu ve ona kimlik doğrulaması yapılmış CLI.
|
||||
`2020` portunda çalışan yerel bir Twenty sunucusu ve ona kimliği doğrulanmış CLI.
|
||||
|
||||
Değilse, şimdi bir tane çatısını oluşturup başlatın:
|
||||
Değilse, şimdi bir tane iskeletini oluşturup başlatın:
|
||||
|
||||
```bash filename="Terminal"
|
||||
npx create-twenty-app@latest document-generator
|
||||
@@ -47,10 +47,10 @@ Aşağıdaki her kod parçası oradan kopyalanmıştır.
|
||||
## Uygulamanın nasıl bir araya geldiği
|
||||
|
||||
<Frame>
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/how-it-fits.svg" alt="Yer tutucular içeren bir şablon, komut menüsünden, bir yapay zekâ aracısından, bir iş akışından veya paylaşılabilir bir bağlantıdan tetiklenerek PDF’li cilalı bir belgeye dönüştürülür" />
|
||||
<img src="/images/docs/developers/extends/apps/document-generator/how-it-fits.svg" alt="Yer tutucular içeren bir şablon, komut menüsünden, bir yapay zekâ ajanından, bir iş akışından veya paylaşılabilir bir bağlantıdan tetiklenerek PDF’li cilalı bir belgeye dönüştürülür" />
|
||||
</Frame>
|
||||
|
||||
`{{placeholders}}` ile zengin metin düzenleyicide bir **şablonu** bir kez yazarsınız. Bir şablon ve bir CRM kaydı seçmek, yer tutucuları doldurur ve cilalı bir **belgeyi** (PDF dosyasıyla birlikte) depolar. Geri kalan her şey — komut menüsü, yapay zekâ aracısı, iş akışı adımı, paylaşılabilir bağlantı — o tek oluşturucuyu tetiklemenin sadece farklı bir yoludur.
|
||||
`{{placeholders}}` ile zengin metin düzenleyicide bir **şablonu** bir kez yazarsınız. Bir şablon ve bir CRM kaydı seçmek, yer tutucuları doldurur ve cilalı bir **belgeyi** (PDF dosyasıyla birlikte) depolar. Geri kalan her şey — komut menüsü, yapay zekâ ajanı, iş akışı adımı, paylaşılabilir bağlantı — o tek oluşturucuyu tetiklemenin sadece farklı bir yoludur.
|
||||
|
||||
## Bu döngüyü çalışır durumda tutun
|
||||
|
||||
|
||||
+5
-5
@@ -55,7 +55,7 @@ export default defineApplication({
|
||||
```
|
||||
|
||||
<Tip>
|
||||
Kazançla başlayın: ilk ekran görüntüsünü bitmiş sonuç (oluşturulmuş bir belge) yapın, ardından nasıl tetiklendiğini ve hazırlandığını gösterin. Net, yüksek çözünürlüklü görüntüler kullanın — bunlar bir kullanıcının gördüğü ilk şeydir.
|
||||
Sonuçla başlayın: ilk ekran görüntüsü bitmiş sonuç (oluşturulmuş bir belge) olsun, ardından bunun nasıl tetiklendiğini ve oluşturulduğunu gösterin. Net, yüksek çözünürlüklü görüntüler kullanın — bunlar bir kullanıcının gördüğü ilk şeydir.
|
||||
</Tip>
|
||||
|
||||
`README.md` dosyasına da aynı özeni gösterin — npm ve GitHub üzerindeki ön sayfadır.
|
||||
@@ -72,7 +72,7 @@ yarn test:unit # unit tests
|
||||
yarn twenty dev --once --dry-run # preview the metadata diff
|
||||
```
|
||||
|
||||
Taslak çalıştırma, sunucuda neyin değişeceğini uygulamadan, tam olarak yazdırır — iyi bir son akıl sağlığı kontrolüdür. Bkz.
|
||||
Deneme çalıştırması, sunucuda neyin değişeceğini uygulamadan tam olarak gösterir — iyi bir son sağlama kontrolüdür. Bkz.
|
||||
[Testing](/l/tr/developers/extend/apps/operations/testing) ve
|
||||
[Syncing & recovery](/l/tr/developers/extend/apps/operations/sync-and-recovery).
|
||||
|
||||
@@ -100,15 +100,15 @@ Tüm ayrıntılar ve yayımlama kontrol listesi:
|
||||
Altı bölümde SDK yüzeyinin büyük kısmını kullandınız:
|
||||
|
||||
* Verileri modellemek için **nesneler, alanlar ve bir ilişki**
|
||||
* Bir **mantık fonksiyonu**nun **AI aracı**, bir **iş akışı eylemi** ve **HTTP yolları** olarak sunulması
|
||||
* Arayüz için **görünümler, gezinme, bir komut ve bir ön bileşen**
|
||||
* Bir **mantık işlevinin**, bir **yapay zekâ aracı**, bir **iş akışı eylemi** ve **HTTP yolları** olarak sunulması
|
||||
* Arayüz için **görünümler, gezinme, bir komut ve bir ön uç bileşeni**
|
||||
* Doğal dil üretimi için bir **ajan + beceri**
|
||||
* **Pazaryeri meta verileri** ve yayımlama akışı
|
||||
|
||||
Bitmiş uygulama şurada bulunur:
|
||||
[`packages/twenty-apps/examples/document-generator`](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/examples/document-generator).
|
||||
|
||||
## Sırada nereye gidebilirsiniz
|
||||
## Sırada ne var
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card title="Veri başvurusu" icon="database" href="/l/tr/developers/extend/apps/data/overview">
|
||||
|
||||
+6
-6
@@ -4,7 +4,7 @@ icon: table-columns
|
||||
description: 查看、侧边栏导航、命令和前部件。
|
||||
---
|
||||
|
||||
现在，对象只能通过设置访问。 让这个应用在 UI 中真正“现身”：列表视图、侧边栏条目、一键式 **Generate document** 命令、用于**预览**文档的记录页面 front 组件，以及用于模板的原生富文本 **editor** 选项卡。
|
||||
现在，对象只能通过设置访问。 让应用在 UI 中真正“现身”：列表视图、侧边栏条目、一键式**生成文档**命令、用于**预览**文档的记录页面前端组件，以及用于模板的原生富文本**编辑器**选项卡。
|
||||
|
||||
## 视图和导航
|
||||
|
||||
@@ -58,7 +58,7 @@ export default defineNavigationMenuItem({
|
||||
|
||||
## 前台组件
|
||||
|
||||
[front component](/l/zh/developers/extend/apps/layout/front-components) 是在 Twenty 内部沙盒运行的 React 组件。 我们读取了选中的记录，通过 `CoreApiClient` 和 POSTs 将
|
||||
[前端组件](/l/zh/developers/extend/apps/layout/front-components)是一个被沙箱隔离在 Twenty 内部的 React 组件。 我们读取了选中的记录，通过 `CoreApiClient` 和 POSTs 将
|
||||
人模板加载到最后一章的
|
||||
路线。
|
||||
|
||||
@@ -119,7 +119,7 @@ export default defineFrontComponent({
|
||||
|
||||
## 打开它的命令
|
||||
|
||||
当选中一个 Person 时，带有 `availabilityType: 'RECORD_SELECTION'` 的 [command menu item](/l/zh/developers/extend/apps/layout/command-menu-items) 会显示出来，并在侧边面板中打开该组件。
|
||||
当选中某个 Person 时，带有 `availabilityType: 'RECORD_SELECTION'` 的[命令菜单项](/l/zh/developers/extend/apps/layout/command-menu-items)会出现，并在侧边面板中打开该组件。
|
||||
|
||||
```ts filename="src/command-menu-items/generate-document.command-menu-item.ts"
|
||||
import { defineCommandMenuItem, STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS } from 'twenty-sdk/define';
|
||||
@@ -137,7 +137,7 @@ export default defineCommandMenuItem({
|
||||
|
||||
## 尝试整个流程
|
||||
|
||||
打开 **People**，勾选一个人，然后按下 <kbd>⌘K</kbd> / <kbd>Ctrl K</kbd>。
|
||||
打开 **People**，勾选一位人员，然后按下 <kbd>⌘K</kbd> / <kbd>Ctrl K</kbd>。
|
||||
“生成文档”出现，标记为您的应用：
|
||||
|
||||
<Frame caption="命令显示何时选中某人。">
|
||||
@@ -164,7 +164,7 @@ export default defineCommandMenuItem({
|
||||
Markdown 物体作为一个可打印的打印页面。
|
||||
|
||||
组件从执行上下文读取当前记录ID，加载
|
||||
文档并将其渲染。 Front 组件运行在一个只允许白名单 HTML 标签的**沙盒**中——原始 HTML 注入（`dangerouslySetInnerHTML`）和 `\<style>` 会被阻止——因此我们通过一个小型 [`Markdown`](https://github.com/twentyhq/twenty/blob/main/packages/twenty-apps/examples/document-generator/src/utils/markdown-to-react.tsx) helper，将 Markdown 渲染为带有内联样式的 React 元素。
|
||||
文档并将其渲染。 前端组件运行在一个只允许白名单 HTML 标签的**沙箱**中——原始 HTML 注入（`dangerouslySetInnerHTML`）和 `\<style>` 会被阻止——因此我们通过一个小型的 [`Markdown`](https://github.com/twentyhq/twenty/blob/main/packages/twenty-apps/examples/document-generator/src/utils/markdown-to-react.tsx) 助手，将 Markdown 渲染为带内联样式的 React 元素。
|
||||
|
||||
```tsx filename="src/front-components/document-viewer.front-component.tsx"
|
||||
import { CoreApiClient } from 'twenty-client-sdk/core';
|
||||
@@ -208,7 +208,7 @@ export default defineFrontComponent({
|
||||
});
|
||||
```
|
||||
|
||||
用[页面布局](/l/zh/developers/extend/apps/layout/page-layouts)挂载它。 `RECORD_PAGE` 布局会在对象的记录视图中添加选项卡；`CANVAS` 选项卡中的 `FRONT_COMPONENT` 小部件则承载该组件：
|
||||
用[页面布局](/l/zh/developers/extend/apps/layout/page-layouts)挂载它。 `RECORD_PAGE` 布局会在对象的记录视图中添加选项卡；位于 `CANVAS` 选项卡中的 `FRONT_COMPONENT` 小部件则承载该组件：
|
||||
|
||||
```ts filename="src/page-layouts/document-record.page-layout.ts"
|
||||
import { definePageLayout, PageLayoutTabLayoutMode } from 'twenty-sdk/define';
|
||||
|
||||
+2
-2
@@ -14,8 +14,8 @@ description: 一个逻辑函数作为一个 AI 工具和工作流动作暴露。
|
||||
|
||||
## 渲染帮助器
|
||||
|
||||
将纯逻辑保留在它自己的文件中，这样便于拆除测试。 这会将一个记录
|
||||
展平成 `{{dot.path}}` 标记并对其进行替换。
|
||||
将纯逻辑保留在它自己的文件中，这样便于拆除测试。 这会将一条记录
|
||||
展平成 `{{dot.path}}` 占位符并进行替换。
|
||||
|
||||
```ts filename="src/logic-functions/utils/render-template.ts"
|
||||
const PLACEHOLDER_PATTERN = /\{\{\s*([\w.]+)\s*\}\}/g;
|
||||
|
||||
Reference in New Issue
Block a user