snapshot of https://github.com/twentyhq/twenty.git (main, 2026-09-17; blobs > 131072B omitted)
Some checks failed
App Prod-Parity E2E Dispatch / dispatch (push) Failing after 10s
CD Storybook UI / build (push) Failing after 3m25s
CD Storybook UI / dispatch (push) Has been skipped
CD deploy main / website-changed-files (push) Successful in 18m8s
CI Agent Skills / changed-files-check (push) Successful in 18m9s
CI Create App E2E minimal / changed-files-check (push) Successful in 24s
CI Create App / changed-files-check (push) Successful in 26s
CI Docs / changed-files-check (push) Successful in 26s
CI Emails / changed-files-check (push) Successful in 28s
CI Example App Hello World / changed-files-check (push) Successful in 23s
CI Front / changed-files-check (push) Has been skipped
CI Example App Postcard / changed-files-check (push) Successful in 27s
CI UI / changed-files-check (push) Has been skipped
CI Utils Test / changed-files-check (push) Successful in 45s
CI Twenty Apps / discover (push) Successful in 1m3s
CD deploy main / deploy-main (push) Failing after 3s
CI Agent Skills / agent-skills-validate (push) Has been skipped
CI Create App / create-app-test (lint) (push) Has been skipped
CI Emails / emails-test (push) Has been skipped
CI Front / front-task (lingui:compile) (push) Has been skipped
CI Front / front-task (lint) (push) Has been skipped
CI Example App Postcard / example-app-postcard (push) Has been skipped
CI UI / ui-task (lint) (push) Has been skipped
CI UI / ui-task (pack-size) (push) Has been skipped
CI UI / ui-task (size) (push) Has been skipped
CI UI / ui-task (test) (push) Has been skipped
CI UI / ui-task (typecheck) (push) Has been skipped
CI Utils Test / utils-test (push) Has been skipped
CI Twenty Apps / ${{ matrix.app.name }} (push) Has been skipped
CI Emails / ci-emails-status-check (push) Successful in 2s
CI Example App Hello World / ci-example-app-hello-world-status-check (push) Successful in 2s
CI Example App Postcard / ci-example-app-postcard-status-check (push) Successful in 3s
CI UI / ui-sb-test (push) Has been skipped
CI Utils Test / ci-utils-test-status-check (push) Successful in 2s
CI Twenty Apps / ci-twenty-apps-status-check (push) Successful in 2s
CI UI / ci-ui-status-check (push) Successful in 2s
CI Desktop / desktop (push) Failing after 1m8s
Push docs to Crowdin / Push documentation to Crowdin (push) Failing after 55s
Push translations to Crowdin / Extract and upload translations (push) Failing after 5s
Push website translations to Crowdin / Extract and upload website translations (push) Failing after 5s
CI Create App / create-app-test (test) (push) Has been skipped
CI Create App / create-app-test (typecheck) (push) Has been skipped
CI Docs / docs-lint (push) Has been skipped
CI Example App Hello World / example-app-hello-world (push) Has been skipped
CI Front / front-task (lingui:extract) (push) Has been skipped
CI Front / front-task (test) (push) Has been skipped
CI Front / front-task (typecheck) (push) Has been skipped
CI UI / ui-sb-build (push) Failing after 1m32s
CI Twenty Apps / ${{ matrix.app.name }} (${{ matrix.server-source }}) (push) Has been skipped
CI Agent Skills / agent-skills-publish (push) Has been skipped
CI Create App / ci-create-app-status-check (push) Successful in 2s
CI Agent Skills / agent-skills-remote-source (push) Has been skipped
CI Create App E2E minimal / create-app-e2e-minimal (push) Has been cancelled
CI E2E Main / e2e-test (push) Has been cancelled
CI Front / front-sb-build (push) Has been cancelled
CI Front / front-build (push) Has been cancelled
CI Create App E2E minimal / ci-create-app-e2e-minimal-status-check (push) Has been cancelled
CI E2E Main / ci-e2e-main-status-check (push) Has been cancelled
CI E2E Main / notify-main-ci-failure (push) Has been cancelled
CI E2E Main / qa-scout-comment (push) Has been cancelled
CI Front / front-sb-test (push) Has been cancelled
CI Front / front-sb-screenshots (push) Has been cancelled
CI Front / ci-front-status-check (push) Has been cancelled
DPA Sub-Processor Sync / sync-subprocessors (push) Failing after 3s
AI Catalog Sync / sync-catalog (push) Failing after 2s

This commit is contained in:
upstream-mirror
2026-09-17 23:28:13 +05:00
commit e7da97194a
32688 changed files with 4208681 additions and 0 deletions

View File

@@ -0,0 +1,102 @@
---
title: Concepts
description: Fonctionnement des applications Twenty — modèle d’entité, sandboxing et cycle de vie de l’installation.
icon: sitemap
---
Les applications Twenty sont des packages TypeScript qui étendent votre espace de travail avec des objets personnalisés, de la logique, des composants d’interface utilisateur et des capacités d’IA. Elles s’exécutent sur la plateforme Twenty avec une isolation complète en bac à sable et des contrôles d’autorisations.
## Fonctionnement des applications
Une application est un ensemble d’**entités** déclarées à l’aide des fonctions `defineEntity()` du package `twenty-sdk`. Le SDK détecte ces déclarations via une analyse de l’AST au moment de la compilation et produit un **manifeste** — une description complète de ce que votre application ajoute à un espace de travail. Ces fonctions valident votre configuration au moment de la compilation et offrent l’autocomplétion dans l’IDE et une sécurité de typage.
```
your-app/
├── src/
│ ├── application-config.ts ← defineApplication (required, one per app)
│ ├── roles/ ← defineRole
│ ├── objects/ ← defineObject
│ ├── fields/ ← defineField
│ ├── logic-functions/ ← defineLogicFunction
│ ├── front-components/ ← defineFrontComponent
│ ├── skills/ ← defineSkill
│ ├── agents/ ← defineAgent
│ ├── views/ ← defineView
│ ├── navigation-menu-items/ ← defineNavigationMenuItem
│ └── page-layouts/ ← definePageLayout
├── public/ ← Static assets (images, icons)
└── package.json
```
<Note>
**L’organisation des fichiers vous revient.** La détection des entités est basée sur l’AST — le SDK trouve les appels à `export default defineEntity(...)` quel que soit l’emplacement du fichier. La structure de dossiers ci-dessus est une convention, pas une obligation.
</Note>
## Types d’entités
| Entité | Objectif | Documentation |
| --------------------------------- | ----------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| **Application** | Identité de l’application, rôle par défaut, variables | [Configuration de l’application](/l/fr/developers/extend/apps/config/application) |
| **Rôle** | Ensembles d’autorisations pour les objets et les champs | [Rôles et autorisations](/l/fr/developers/extend/apps/config/roles) |
| **Objet** | Types d’enregistrements personnalisés avec des champs | [Objets](/l/fr/developers/extend/apps/data/objects) |
| **Champ** | Ajouter des champs à des objets provenant d’autres applications | [Extension des objets](/l/fr/developers/extend/apps/data/extending-objects) |
| **Relation** | Liens bidirectionnels entre les objets | [Relations](/l/fr/developers/extend/apps/data/relations) |
| **Fonction logique** | TypeScript côté serveur avec des déclencheurs | [Fonctions logiques](/l/fr/developers/extend/apps/logic/logic-functions) |
| **Compétence** | Instructions réutilisables pour des agents d’IA | [Compétences et agents](/l/fr/developers/extend/apps/logic/skills-and-agents) |
| **Agent** | Assistants d’IA avec des prompts personnalisés | [Compétences et agents](/l/fr/developers/extend/apps/logic/skills-and-agents) |
| **Fournisseur de connexion** | Identifiants OAuth pour les API tierces | [Connexions](/l/fr/developers/extend/apps/logic/connections) |
| **Vue** | Vues de liste d’enregistrements préconfigurées | [Vues](/l/fr/developers/extend/apps/layout/views) |
| **Élément de menu de navigation** | Entrées personnalisées de la barre latérale | [Éléments du menu de navigation](/l/fr/developers/extend/apps/layout/navigation-menu-items) |
| **Mise en page** | Onglets et widgets sur la page de détails d’un enregistrement | [Mises en page](/l/fr/developers/extend/apps/layout/page-layouts) |
| **Composant frontal** | Interface React isolée en bac à sable dans Twenty | [Composants frontaux](/l/fr/developers/extend/apps/layout/front-components) |
| **Dépendances partagées** | Dépendances partagées par les composants frontaux de l’application, déclarées dans package.json | [Dépendances partagées](/l/fr/developers/extend/apps/layout/front-components#sharing-dependencies-across-front-components) |
| **Élément du menu de commande** | Actions rapides et entrées Cmd+K | [Éléments du menu de commande](/l/fr/developers/extend/apps/layout/command-menu-items) |
## Exécution en bac à sable
* **Les fonctions logiques** s’exécutent dans des processus Node.js isolés sur le serveur. Ils accèdent uniquement aux données via le client d’API typé, qui agit soit en tant que personne ayant déclenché l’exécution, soit en tant que l’application elle-même. Consultez [Les accès utilisés par un appel](/l/fr/developers/extend/apps/logic/logic-functions#whose-access-a-call-uses).
* **Les composants frontaux** s’exécutent dans des Web Workers en utilisant Remote DOM — isolés en bac à sable de la page principale mais rendant des éléments DOM natifs (pas d’iframes). Ils communiquent avec Twenty via une API hôte de passage de messages.
* **Les autorisations** sont appliquées au niveau de l’API. Deux jetons d’exécution sont injectés, tous deux dérivés du rôle déclaré avec `defineApplicationRole()` ; le jeton par défaut est davantage restreint à ce que la personne ayant déclenché l’exécution peut faire lorsqu’une personne est à l’origine de l’exécution.
## Cycle de vie de l’application
```
┌─────────────────────────────────────────────────────────┐
│ Development │
│ npx create-twenty-app → yarn twenty dev (live sync) │
├─────────────────────────────────────────────────────────┤
│ Build & Deploy │
│ yarn twenty dev:build → yarn twenty app:publish │
├─────────────────────────────────────────────────────────┤
│ Install flow │
│ upload → [pre-install] → metadata migration → │
│ generate SDK → [post-install] → … → [uninstall] │
├─────────────────────────────────────────────────────────┤
│ Publish │
│ npm publish → appears in Twenty marketplace │
└─────────────────────────────────────────────────────────┘
```
* **`yarn twenty dev`** — surveille vos fichiers source et synchronise en direct les modifications avec un serveur Twenty connecté. Le client d’API typé est régénéré automatiquement lorsque le schéma change.
* **`yarn twenty dev:build`** — compile TypeScript, regroupe les fonctions logiques et les composants frontaux avec esbuild, et produit un manifeste.
* **Hooks pré/post-install et de désinstallation** — fonctions optionnelles qui s’exécutent pendant l’installation ou juste avant la désinstallation. Voir [Install Hooks](/l/fr/developers/extend/apps/config/install-hooks) pour plus de détails.
## Prochaines étapes
<CardGroup cols={2}>
<Card title="Configuration" icon="screwdriver-wrench" href="/l/fr/developers/extend/apps/config/overview">
Identité de l’application, rôle par défaut et hooks d’installation et de désinstallation.
</Card>
<Card title="Données" icon="database" href="/l/fr/developers/extend/apps/data/overview">
Objets, champs et relations bidirectionnelles.
</Card>
<Card title="Logique" icon="bolt" href="/l/fr/developers/extend/apps/logic/overview">
Fonctions logiques, compétences, agents et connexions OAuth.
</Card>
<Card title="Disposition" icon="table-columns" href="/l/fr/developers/extend/apps/layout/overview">
Vues, navigation, mises en page, composants front-end.
</Card>
<Card title="Opérations" icon="rocket" href="/l/fr/developers/extend/apps/operations/overview">
CLI, tests, dépôts distants, CI et publication de votre application.
</Card>
</CardGroup>

View File

@@ -0,0 +1,87 @@
---
title: Serveur local
description: Gérez le serveur Docker local de Twenty — démarrage, arrêt, mise à niveau, instance de test parallèle et configuration manuelle du SDK.
icon: server
---
## Gestion du serveur local
Utilisez `yarn twenty docker:*` pour contrôler le conteneur Twenty local :
| Commande | Ce que cela fait |
| -------------------------------------- | ---------------------------------------------------------- |
| `yarn twenty docker:start` | Démarre le serveur (récupère l’image si nécessaire) |
| `yarn twenty docker:start 2.2.0` | Démarrer une version spécifique du serveur |
| `yarn twenty docker:start --port 3030` | Démarre sur un port personnalisé |
| `yarn twenty docker:stop` | Arrête le serveur (préserve les données) |
| `yarn twenty docker:status` | Affiche l’URL, la version et les identifiants de connexion |
| `yarn twenty docker:logs` | Diffuse les journaux du serveur |
| `yarn twenty docker:reset` | Efface les données et repart de zéro |
| `yarn twenty docker:upgrade` | Récupère la dernière image `twenty-app-dev` |
| `yarn twenty docker:upgrade 2.2.0` | Met à niveau vers une version spécifique |
Les données sont conservées entre les redémarrages dans deux volumes Docker (`twenty-app-dev-data` pour PostgreSQL, `twenty-app-dev-storage` pour les fichiers). Utilisez `reset` pour tout effacer.
## Figer la version du serveur
Lorsqu’aucune version n’est fournie, `docker:start` résout la version à partir de la plage `engines.twenty` de votre `package.json` — la même plage que le serveur utilise pour la validation lors de l’installation de votre application. Il démarre l’image `twenty-app-dev` la plus récente publiée qui satisfait la plage, et revient à `latest` lorsque le champ est absent ou qu’aucune version publiée ne correspond :
```json filename="package.json"
{
"engines": {
"twenty": ">=2.2.0"
}
}
```
Passez explicitement une version pour remplacer la plage pour une seule exécution : `yarn twenty docker:start 2.3.0`. Si un conteneur existe déjà avec une version différente, `docker:start` le met à niveau sur place (en recréant le conteneur tout en préservant vos volumes de données).
## Mise à niveau de l’image du serveur
`yarn twenty docker:upgrade` récupère la dernière image, compare les empreintes et ne recrée le conteneur que si quelque chose a réellement changé. Les volumes sont conservés — seul le conteneur est remplacé. Si une nouvelle image a été récupérée et que le conteneur était en cours d’exécution, la mise à niveau démarre automatiquement un nouveau conteneur ; exécutez ensuite `yarn twenty docker:start` pour attendre qu’il devienne opérationnel.
```bash filename="Terminal"
yarn twenty docker:upgrade # Latest
yarn twenty docker:upgrade 2.2.0 # Specific version
```
Vérifiez la version en cours d’exécution avec `yarn twenty docker:status` (elle affiche la valeur de `APP_VERSION` intégrée au conteneur).
## Exécuter une instance de test parallèle
Passez `--test` à n’importe quelle commande `docker:*` pour gérer une deuxième instance totalement isolée — utile pour les tests d’intégration ou pour expérimenter sans toucher à vos données de développement principales :
| Commande | Ce que cela fait |
| ----------------------------------- | ------------------------------------------------- |
| `yarn twenty docker:start --test` | Démarre l’instance de test (port 2021 par défaut) |
| `yarn twenty docker:stop --test` | L’arrête |
| `yarn twenty docker:status --test` | Affiche son statut |
| `yarn twenty docker:logs --test` | Diffuse ses journaux |
| `yarn twenty docker:reset --test` | Efface ses données |
| `yarn twenty docker:upgrade --test` | Met à niveau son image |
L’instance de test possède son propre conteneur (`twenty-app-dev-test`), ses volumes (`twenty-app-dev-test-data`, `twenty-app-dev-test-storage`) et sa configuration — elle s’exécute parallèlement à votre instance principale sans conflits. Combinez `--test` avec `--port` pour remplacer le port 2021.
## Configuration manuelle (sans le générateur)
Ignorez le générateur si vous ajoutez le SDK à un projet existant :
```bash filename="Terminal"
yarn add twenty-sdk twenty-client-sdk
```
Ajoutez le script à `package.json` :
```json filename="package.json"
{
"scripts": {
"twenty": "twenty"
}
}
```
Vous pouvez maintenant exécuter `yarn twenty dev`, `yarn twenty docker:start` et le reste.
<Note>
N’installez pas `twenty-sdk` globalement — figez-le par projet afin que chaque application utilise sa propre version.
</Note>

View File

@@ -0,0 +1,79 @@
---
title: Structure du projet
description: Ce qui se trouve à l’intérieur d’une application Twenty générée par un modèle — fichiers, dossiers et le rôle de chacun.
icon: folder-tree
---
Une nouvelle application générée par `npx create-twenty-app` ressemble à ceci :
```text filename="my-twenty-app/"
my-twenty-app/
package.json
src/
application-config.ts # Required — your app's entry point
default-role.ts # Permissions for logic functions
constants/
universal-identifiers.ts # Auto-generated UUIDs and metadata
front-components/
main-page.tsx # Welcome page component
navigation-menu-items/
main-page.navigation-menu-item.ts # Sidebar entry for the welcome page
page-layouts/
main-page.page-layout.ts # Standalone page hosting the component
__tests__/
application-config.test.ts # Unit test
global-setup.ts # Integration test setup (sync + uninstall)
schema.integration-test.ts # Integration test against a live server
.github/workflows/
ci.yml # Lint, typecheck, unit + integration tests
cd.yml # Deploy + install on push to main
publish.yml # Publish to npm on version tags (with provenance)
public/
logo.svg # Static assets
vitest.config.ts # Integration test runner config
vitest.unit.config.ts # Unit test runner config
tsconfig.json, tsconfig.spec.json
.nvmrc, .yarnrc.yml, .oxlintrc.json
README.md, AGENTS.md, CLAUDE.md, CHANGELOG.md, SETUP.md
```
## Fichiers clés
| Fichier / Dossier | Objectif |
| -------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| `src/application-config.ts` | **Requis.** Le fichier de configuration principal de votre application. |
| `src/default-role.ts` | Rôle par défaut qui contrôle ce à quoi vos fonctions de logique peuvent accéder. |
| `src/constants/universal-identifiers.ts` | UUID générés automatiquement et métadonnées de l’application (nom d’affichage, description). |
| `src/front-components/`, `src/navigation-menu-items/`, `src/page-layouts/` | Une page d’accueil de démarrage : un composant frontal rendu par une mise en page autonome, accessible depuis la barre latérale. |
| `src/__tests__/` | Un test unitaire plus un test d’intégration (avec sa configuration globale) qui synchronise l’application avec un serveur réel. |
| `public/` | Ressources statiques (images, polices) servies avec votre application. |
| `AGENTS.md` / `CLAUDE.md` | Consignes pour les agents IA de programmation travaillant sur l’application. |
| `CHANGELOG.md` / `SETUP.md` | Journal des modifications notables et instructions de configuration pour le développement local. |
<Note>
**L’organisation des fichiers vous revient.** Les dossiers ci-dessus sont des conventions — le SDK détecte les entités via une analyse AST sur les appels à `export default defineEntity(...)` quel que soit l’emplacement du fichier.
</Note>
## Dépendances
Les deux packages du SDK Twenty doivent être placés dans `devDependencies`, et non dans `dependencies` :
```json filename="package.json"
{
"dependencies": {},
"devDependencies": {
"twenty-client-sdk": "2.20.0",
"twenty-sdk": "2.20.0",
"twenty-ui": "1.0.0-alpha.1"
}
}
```
Le générateur de projet fige `twenty-sdk` et `twenty-client-sdk` sur sa propre version — gardez les deux synchronisés lors de la mise à niveau.
* **`twenty-sdk`** fournit le CLI `twenty` ainsi que les outils de build et de scaffolding. Il ne s’exécute qu’au moment du développement et du build et n’est jamais importé par le runtime de l’application que vous publiez.
* **`twenty-client-sdk`** *est* importé par le code de votre application (`CoreApiClient`, `MetadataApiClient`, `RestApiClient`), mais Twenty le fournit au moment de l’exécution : les fonctions de logique l’obtiennent à partir d’une couche SDK générée, et les composants front le résolvent à partir de modules servis par le serveur. La copie que vous avez installée est uniquement utilisée pour la vérification de type et le build au moment du déploiement, elle n’a donc jamais besoin d’être incluse dans le bundle déployé.
Conserver l’un ou l’autre package dans `dependencies` l’intègre dans le bundle runtime de l’application installée, où il ne fait que l’alourdir inutilement. `twenty dev:build` émet un avertissement lorsque l’un ou l’autre est encore répertorié dans `dependencies`.
Ajoutez les dépendances runtime propres à votre application (les bibliothèques que vos fonctions logiques importent réellement à l’exécution) dans `dependencies` comme d’habitude. Gardez l’arborescence légère : les `dependencies` sont installées dans une couche d’exécution limitée à 250 Mo décompressés, et une synchronisation ou une installation échoue avec une erreur de taille des dépendances au-delà de cette limite — les bibliothèques d’interface utilisateur et les outils de développement doivent aller dans `devDependencies`.

View File

@@ -0,0 +1,166 @@
---
title: Démarrage rapide
icon: rocket
description: Créez votre première application Twenty en quelques minutes.
---
## Prérequis
* **Node.js 24.5+** — [Télécharger](https://nodejs.org/)
* **Yarn 4** — fourni avec Node.js via Corepack. Activez-le : `corepack enable`
* **Docker** — [Télécharger](https://www.docker.com/products/docker-desktop/). Nécessaire pour exécuter un serveur Twenty local. Ignorez si vous avez déjà Twenty en cours d’exécution ailleurs.
La création d’une application Twenty comporte trois phases. Le générateur les regroupe en une seule commande pour le parcours idéal, mais chaque phase est un concept distinct — en cas d’échec, savoir dans quelle phase vous vous trouvez indique ce qu’il faut corriger.
| Phase | Ce que vous faites | Outil | Résultat |
| -------------------------- | ------------------------------------------------------ | ----------------------------------- | ----------------------------------------------------------- |
| **1. Génération** | Générer le code source de l’application | `npx create-twenty-app` | Un projet TypeScript sur le disque |
| **2. Exécuter un serveur** | Démarrer un serveur Twenty vers lequel se synchroniser | Docker + `yarn twenty docker:start` | Une instance Twenty en cours d’exécution |
| **3. Synchroniser** | Synchroniser en direct votre code avec le serveur | `yarn twenty dev` | Vos modifications apparaissent dans l’interface utilisateur |
---
## Phase 1 — Générez le squelette de votre projet
Créez une nouvelle application à partir du modèle :
```bash filename="Terminal"
npx create-twenty-app@latest my-twenty-app
```
Le générateur est non interactif : le nom du répertoire devient le nom de l’application. Passez `--display-name` et `--description` pour personnaliser les métadonnées générées (vous pouvez également les modifier plus tard dans `src/constants/universal-identifiers.ts`). Cela génère un projet TypeScript dans `my-twenty-app/` avec un fichier de démarrage `application-config.ts`, un rôle par défaut, des workflows CI/CD et un test d’intégration.
**Après cette phase :** vous disposez du code source d’une application sur votre machine. Elle ne s’exécute pas encore — c’est la phase 2.
---
## Phase 2 — Exécuter un serveur Twenty local
Votre application a besoin d’un serveur Twenty vers lequel se synchroniser. Le serveur est une instance Twenty complète — interface utilisateur, API GraphQL, PostgreSQL — exécutée localement dans Docker. Votre code local envoie ses définitions à ce serveur, qui les fait apparaître dans l’interface utilisateur.
Le générateur de projet en crée un pour vous : avec Docker en cours d’exécution, il récupère l’image `twentycrm/twenty-app-dev`, la démarre sur le port `2020`, et authentifie le CLI auprès de l’espace de travail de démonstration prérempli (`tim@apple.dev`) — aucune connexion requise.
Pour vous connecter à un serveur Twenty existant à la place, passez `--url \<your-server-url>`. Les serveurs distants s’authentifient avec OAuth : un navigateur s’ouvre pour que vous puissiez vous connecter et cliquer sur **Authorize**, ce qui donne au CLI l’accès à votre espace de travail. (Vous pouvez aussi choisir OAuth en local avec `--authentication-method oauth` — connectez-vous avec `tim@apple.dev` / `tim@apple.dev`.)
<div style={{textAlign: 'center'}}>
<img src="/images/docs/developers/extends/apps/login.png" alt="Écran de connexion Twenty" />
</div>
<div style={{textAlign: 'center'}}>
<img src="/images/docs/developers/extends/apps/authorize.png" alt="Écran d’autorisation de la CLI Twenty" />
</div>
Votre terminal confirmera que tout est configuré.
<div style={{textAlign: 'center'}}>
<img src="/images/docs/developers/extends/apps/scaffolded.png" alt="Application initialisée avec succès" />
</div>
**Après cette phase :** vous disposez d’un serveur Twenty en cours d’exécution sur [http://localhost:2020](http://localhost:2020) avec votre CLI autorisée à s’y synchroniser.
<Note>
Si Docker n’est pas installé ou en cours d’exécution, le générateur vous indiquera la bonne commande de démarrage pour votre système d’exploitation. Une fois Docker lancé, vous pouvez reprendre avec `yarn twenty docker:start` — pas besoin de régénérer le squelette.
</Note>
---
## Phase 3 — Synchroniser vos modifications
C’est la boucle interne dans laquelle vous passerez la plupart de votre temps.
```bash filename="Terminal"
cd my-twenty-app
yarn twenty dev
```
Cela surveille `src/`, reconstruit à chaque modification et synchronise le résultat avec le serveur. Modifiez un fichier, enregistrez, et en quelques secondes le serveur reflète la modification. Vous verrez un panneau d’état en direct dans votre terminal.
Pour une sortie plus détaillée (journaux de build, requêtes de synchronisation, traces d’erreurs), ajoutez `--verbose`.
<div style={{textAlign: 'center'}}>
<img src="/images/docs/developers/extends/apps/dev.png" alt="Sortie du terminal en mode dev" />
</div>
Ouvrez [http://localhost:2020/settings/applications#developer](http://localhost:2020/settings/applications#developer). Vous devriez voir votre application sous **Your Apps**.
<div style={{textAlign: 'center'}}>
<img src="/images/docs/developers/extends/apps/app-in-ui-1.png" alt="La liste Your Apps affichant My twenty app" />
</div>
Cliquez sur **My twenty app** pour voir son **application registration** — un enregistrement au niveau du serveur décrivant votre application (nom, identifiant, informations d’identification OAuth, source). Un même enregistrement peut être installé dans plusieurs espaces de travail sur le même serveur.
<div style={{textAlign: 'center'}}>
<img src="/images/docs/developers/extends/apps/app-in-ui-2.png" alt="Détails de l’enregistrement d’application" />
</div>
Cliquez sur **View installed app** pour voir l’installation dans l’espace de travail. L’onglet **About** affiche la version et les options de gestion.
<div style={{textAlign: 'center'}}>
<img src="/images/docs/developers/extends/apps/app-in-ui-3.png" alt="Application installée" />
</div>
**Après cette phase :** vous disposez d’une boucle de développement en direct. Modifiez n’importe quel fichier dans `src/` et il apparaît dans l’interface utilisateur.
### Synchronisation ponctuelle pour la CI et les scripts
Utilisez `plan` et `apply` pour exécuter une fois le même pipeline, sans surveillance :
```bash filename="Terminal"
yarn twenty plan # preview the metadata changes without applying them
yarn twenty apply # show the plan, then apply it
```
| Commande | Comportement | Quand l'utiliser : |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
| `yarn twenty dev` | Surveille et resynchronise à chaque modification. Reste en cours d’exécution jusqu’à ce que vous l’arrêtiez. | Développement local interactif. |
| `yarn twenty apply` | Une seule opération de build + synchronisation, se termine avec le code `0` en cas de réussite et `1` en cas d’échec. Demande une confirmation pour les modifications destructrices (passez `--force` pour l’ignorer). | CI, hooks de pré-commit, agents IA et flux de travail scriptés. |
| `yarn twenty plan` | Construit et affiche les modifications de métadonnées **sans les appliquer**. | Inspection de ce qu’une synchronisation changerait avant de s’y engager. |
Tous les modes nécessitent un serveur distant authentifié. Voir [synchronisation et récupération](/l/fr/developers/extend/apps/operations/sync-and-recovery#previewing-changes-plan) pour plus d’informations sur `plan`.
<Note>
`yarn twenty dev --once` et `yarn twenty dev --once --dry-run` sont des alias obsolètes pour `yarn twenty apply` et `yarn twenty plan`.
</Note>
### Options du mode de développement
| Option | Description |
| ------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| `--force` | Applique les modifications destructrices (suppressions) sans confirmation. |
| `--debounceMs \<ms>` | Définir le délai de temporisation des modifications de fichiers en millisecondes (valeur par défaut : `1000`). |
| `--verbose` / `--debug` | Afficher des journaux de build détaillés, les requêtes de synchronisation et les traces d’erreur. |
## Ce que vous pouvez créer
Les applications sont composées d’**entités** — chacune définie comme un fichier TypeScript avec un seul `export default` :
| Entité | Ce que cela fait |
| ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| **Objets et champs** | Modèles de données personnalisés (carte postale, facture, etc.) avec des champs typés |
| **Fonctions logiques** | Fonctions TypeScript côté serveur déclenchées par des routes HTTP, des tâches cron ou des événements de base de données |
| **Composants d’interface utilisateur (UI)** | Composants React qui s’affichent dans l’interface de Twenty (panneau latéral, widgets, menu de commandes) |
| **Compétences et agents** | Fonctionnalités d’IA — instructions réutilisables et assistants autonomes |
| **Vues et navigation** | Vues de liste préconfigurées et éléments de menu de la barre latérale |
| **Mises en page** | Pages de détail d’enregistrement personnalisées avec des onglets et des widgets |
Référence complète : [Concepts](/l/fr/developers/extend/apps/getting-started/concepts).
## Prochaines étapes
<CardGroup cols={2}>
<Card title="Configuration" icon="screwdriver-wrench" href="/l/fr/developers/extend/apps/config/overview">
Identité de l’application, rôle par défaut, hooks d’installation et de désinstallation, ressources publiques.
</Card>
<Card title="Données" icon="database" href="/l/fr/developers/extend/apps/data/overview">
Objets, champs et relations bidirectionnelles.
</Card>
<Card title="Logique" icon="bolt" href="/l/fr/developers/extend/apps/logic/overview">
Fonctions logiques, compétences, agents et connexions OAuth.
</Card>
<Card title="Disposition" icon="table-columns" href="/l/fr/developers/extend/apps/layout/overview">
Vues, navigation, mises en page, composants front-end.
</Card>
<Card title="Opérations" icon="rocket" href="/l/fr/developers/extend/apps/operations/overview">
CLI, tests, dépôts distants, CI et publication de votre application.
</Card>
</CardGroup>

View File

@@ -0,0 +1,63 @@
---
title: Génération
description: Générez des fichiers d'entité de manière interactive avec `yarn twenty dev:add` — objets, champs, vues, fonctions logiques et plus encore.
icon: wand-magic-sparkles
---
Au lieu de créer manuellement les fichiers d'entité, utilisez l'outil de génération interactif :
```bash filename="Terminal"
yarn twenty dev:add
```
Il vous invite à choisir un type d'entité, vous guide à travers les champs requis, puis écrit un fichier prêt à l'emploi avec un `universalIdentifier` stable et l'appel `defineEntity()` correct.
Vous pouvez également passer directement le type d'entité pour ignorer la première invite :
```bash filename="Terminal"
yarn twenty dev:add object
yarn twenty dev:add logicFunction
yarn twenty dev:add frontComponent
```
## Types d’entités disponibles
| Type d’entité | Commande | Fichier généré |
| --------------------------------- | ------------------------------------------ | --------------------------------------------------------- |
| Objet | `yarn twenty dev:add object` | `src/objects/\<name>.ts` |
| Champ | `yarn twenty dev:add field` | `src/fields/\<name>.ts` |
| Fonction logique | `yarn twenty dev:add logicFunction` | `src/logic-functions/\<name>.ts` |
| Composant frontal | `yarn twenty dev:add frontComponent` | `src/front-components/\<name>.tsx` |
| Rôle | `yarn twenty dev:add role` | `src/roles/\<name>.ts` |
| Compétence | `yarn twenty dev:add skill` | `src/skills/\<name>.ts` |
| Agent | `yarn twenty dev:add agent` | `src/agents/\<name>.ts` |
| Vue | `yarn twenty dev:add view` | `src/views/\<name>.ts` |
| Élément de menu de navigation | `yarn twenty dev:add navigationMenuItem` | `src/navigation-menu-items/\<name>.ts` |
| Mise en page | `yarn twenty dev:add pageLayout` | `src/page-layouts/\<name>.ts` |
| Onglet Mise en page | `yarn twenty dev:add pageLayoutTab` | `src/page-layout-tabs/\<name>.ts` |
| Élément du menu de commande | `yarn twenty dev:add commandMenuItem` | `src/command-menu-items/\<name>.ts` |
| Champ de vue | `yarn twenty dev:add viewField` | `src/view-fields/\<name>.ts` |
| Fournisseur de connexion | `yarn twenty dev:add connectionProvider` | `src/connection-providers/\<name>.ts` |
| Type d'activité de la chronologie | `yarn twenty dev:add timelineActivityType` | `src/timeline-activity-types/\<name>.ts` |
## Ce que génère l'outil de génération
Chaque type d'entité a son propre modèle. Par exemple, `yarn twenty dev:add object` demande :
1. **Nom (singulier)** — p. ex., `invoice`
2. **Nom (pluriel)** — p. ex., `invoices`
3. **Libellé (singulier)** — rempli automatiquement depuis le nom (p. ex., `Invoice`)
4. **Libellé (pluriel)** — rempli automatiquement (p. ex., `Invoices`)
5. **Créer une vue et un élément de navigation ?** — si vous répondez oui, l'outil génère également une vue correspondante et un lien de barre latérale pour le nouvel objet.
Les autres types d'entités ont des invites plus simples — la plupart ne demandent qu'un nom.
Le type d'entité `field` est plus détaillé : il demande le nom du champ, son libellé, son type (à partir d'une liste de tous les types de champs disponibles comme `TEXT`, `NUMBER`, `SELECT`, `RELATION`, etc.), et le `universalIdentifier` de l'objet cible.
## Chemin de sortie personnalisé
Utilisez l'option `--path` pour placer le fichier généré à un emplacement personnalisé :
```bash filename="Terminal"
yarn twenty dev:add logicFunction --path src/custom-folder
```

View File

@@ -0,0 +1,14 @@
---
title: Résolution des problèmes
description: Problèmes courants lors de la première exécution — Docker, version de Node, Yarn, dépendances.
icon: wrench
---
* **Erreurs Docker** — Assurez-vous que Docker Desktop (ou le démon) est en cours d’exécution avant `yarn twenty docker:start`. Le message d’erreur indiquera la bonne commande de démarrage pour votre système d’exploitation.
* **Mauvaise version de Node** — Version 24.5+ requise (`engines.node: ^24.5.0`). Vérifiez avec `node -v`.
* **Yarn 4 manquant** — Exécutez `corepack enable`.
* **Dépendances cassées** — `rm -rf node_modules && yarn install`.
* **Erreurs de `twenty-sdk` après la mise à niveau vers la v2.8.0** — il est passé de `dependencies` à `devDependencies` dans la v2.8.0. Voir [Structure du projet → Dépendances](/l/fr/developers/extend/apps/getting-started/project-structure#dependencies).
* **`twenty dev:build` avertit au sujet de `twenty-client-sdk` dans `dependencies`** — il est fourni au moment de l'exécution par Twenty, donc il devrait être déplacé vers `devDependencies` avec `twenty-sdk`. Voir [Structure du projet → Dépendances](/l/fr/developers/extend/apps/getting-started/project-structure#dependencies).
Bloqué ? Demandez de l’aide sur le [Discord de Twenty](https://discord.com/channels/1130383047699738754/1130386664812982322).