> ## Documentation Index
> Fetch the complete documentation index at: https://docs.upshiftcloud.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tutoriel : Document Generator

> Créez une véritable application Upshift qui génère des documents personnalisés à partir des données d'Upshift.

Dans ce tutoriel, vous allez créer **Document Generator** — une application qui transforme des modèles réutilisables
en documents personnalisés en utilisant les données déjà présentes dans Upshift.

Rédigez un modèle une seule fois avec `{{placeholders}}`, puis générez un document rempli
pour n’importe quelle personne ou entreprise en un clic — depuis le menu de commande, depuis un
agent IA ou depuis un workflow.

![Un document de proposition commerciale généré](https://mintcdn.com/exceev-group/1cFKDdENVawzNm26/images/docs/developers/extends/apps/document-generator/07-rendered-document.png?fit=max\&auto=format\&n=1cFKDdENVawzNm26\&q=85\&s=9f3cea5581fa05694f7b4e92f194d675)

Un modèle, généré pour une personne spécifique, ouvert comme une page imprimable.

## Ce que vous apprendrez

Chaque chapitre ajoute une capacité. À la fin, vous aurez utilisé la plupart du SDK.

| Chapitre | Capacité | Référence |
| - | - | - |
| [1. Modèle de données](https://docs.upshiftcloud.com/developers/extend/apps/tutorials/document-generator/data-model.md) | Objets, champs et une relation | [Données](https://docs.upshiftcloud.com/developers/extend/apps/data/overview.md) |
| [2. Générer des documents](https://docs.upshiftcloud.com/developers/extend/apps/tutorials/document-generator/generating-documents.md) | Une fonction logique (outil IA + action de workflow) qui remplit un modèle Markdown et y joint un PDF soigné | [Fonctions logiques](https://docs.upshiftcloud.com/developers/extend/apps/logic/logic-functions.md) |
| [3. Routes HTTP](https://docs.upshiftcloud.com/developers/extend/apps/tutorials/document-generator/http-routes.md) | Servir du JSON et une page HTML partageable depuis des routes | [Fonctions logiques](https://docs.upshiftcloud.com/developers/extend/apps/logic/logic-functions.md) |
| [4. Créer l’interface utilisateur](https://docs.upshiftcloud.com/developers/extend/apps/tutorials/document-generator/building-the-ui.md) | Vues, navigation, menu de commandes et composants frontaux qui prévisualisent un document et modifient un modèle | [Mise en page](https://docs.upshiftcloud.com/developers/extend/apps/layout/overview.md) |
| [5. Un agent IA](https://docs.upshiftcloud.com/developers/extend/apps/tutorials/document-generator/ai-agent.md) | Agent + compétence | [Compétences et agents](https://docs.upshiftcloud.com/developers/extend/apps/logic/skills-and-agents.md) |
| [6. Publication](https://docs.upshiftcloud.com/developers/extend/apps/tutorials/document-generator/publishing.md) | Publiez-la sur la place de marché | [Publication](https://docs.upshiftcloud.com/developers/extend/apps/operations/publishing.md) |

## Prérequis

Vous devez avoir terminé le [démarrage rapide](https://docs.upshiftcloud.com/developers/extend/apps/getting-started/quick-start.md) :
un serveur Upshift local en cours d’exécution sur le port `2020` et le CLI authentifié dessus.

Sinon, générez-en un et lancez-le maintenant :

```bash filename="Terminal" theme={null}
npx create-twenty-app@latest document-generator
cd document-generator
yarn twenty dev
```

> [!NOTE]
>
> Vous préférez lire le code finalisé ? L’application complète se trouve dans
> [`packages/twenty-apps/examples/document-generator`](https://github.com/exceev-technology/upshift/tree/main/packages/twenty-apps/examples/document-generator).
> Chaque extrait ci-dessous en est tiré.

## Comment l’application s’assemble

![Un modèle avec des espaces réservés est transformé en un document soigné avec un PDF, déclenché depuis le menu de commandes, un agent IA, un workflow ou un lien partageable](https://mintcdn.com/exceev-group/1cFKDdENVawzNm26/images/docs/developers/extends/apps/document-generator/how-it-fits.svg?fit=max\&auto=format\&n=1cFKDdENVawzNm26\&q=85\&s=170a865069715e9dc919739bafb20f04)

Vous rédigez un **modèle** une seule fois dans un éditeur de texte enrichi, avec `{{placeholders}}`. Choisir un
modèle et un enregistrement remplit les espaces réservés et stocke un
**document** soigné (avec un fichier PDF). Tout le reste — le menu de commandes, l’agent IA,
l’étape de workflow, le lien partageable — n’est qu’une façon différente de déclencher ce
même générateur.

## Gardez cette boucle en marche

Laissez `yarn twenty dev` s’exécuter dans un terminal pendant tout le tutoriel. Chaque fois que
vous ajoutez ou modifiez un fichier sous `src/`, il est resynchronisé avec votre serveur en quelques
secondes, afin que vous puissiez voir chaque capacité apparaître dans l’interface utilisateur au fur et à mesure que vous la construisez.

> **[Commencez à construire →](https://docs.upshiftcloud.com/developers/extend/apps/tutorials/document-generator/data-model.md)**
>
> Chapitre 1 : modéliser des documents et des modèles.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.