i18n - docs translations (#21789)
Created by Github action Co-authored-by: github-actions <github-actions@twenty.com>
This commit is contained in:
github-actions[bot]
committed by
GitHub
GitHub
parent
22baf2c6c5
commit
2b3b2362db
@@ -0,0 +1,101 @@
|
||||
---
|
||||
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) |
|
||||
| **É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. Elles n’accèdent aux données qu’au moyen du client d’API typé, limité par les autorisations du rôle de l’application.
|
||||
* **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. Le jeton d’exécution (`TWENTY_APP_ACCESS_TOKEN`) est dérivé du rôle défini dans `defineApplication()`.
|
||||
|
||||
## 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] │
|
||||
├─────────────────────────────────────────────────────────┤
|
||||
│ 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** — fonctions optionnelles qui s’exécutent pendant l’installation. 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.
|
||||
</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>
|
||||
@@ -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>
|
||||
+61
@@ -0,0 +1,61 @@
|
||||
---
|
||||
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
|
||||
__tests__/
|
||||
setup-test.ts
|
||||
app-install.integration-test.ts
|
||||
.github/workflows/ci.yml # GitHub Actions
|
||||
public/ # Static assets
|
||||
vitest.config.ts # Test runner config
|
||||
tsconfig.json, tsconfig.spec.json
|
||||
.nvmrc, .yarnrc.yml, .oxlintrc.json
|
||||
README.md, LLMS.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/__tests__/` | Tests d’intégration (configuration + test d’exemple). |
|
||||
| `public/` | Ressources statiques (images, polices) servies avec votre application. |
|
||||
|
||||
<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.13.0",
|
||||
"twenty-sdk": "^2.13.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
* **`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 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.
|
||||
@@ -0,0 +1,176 @@
|
||||
---
|
||||
title: Démarrage rapide
|
||||
icon: rocket
|
||||
description: Créez votre première application Twenty en quelques minutes.
|
||||
---
|
||||
|
||||
## Prérequis
|
||||
|
||||
* **Node.js 24+** — [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 server` | 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
|
||||
```
|
||||
|
||||
On vous demandera un nom et une description — appuyez sur **Entrée** pour utiliser les valeurs par défaut. 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, un workflow CI 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 propose d’en démarrer un pour vous :
|
||||
|
||||
> **Souhaitez-vous configurer une instance locale de Twenty ?**
|
||||
|
||||
* **Oui (recommandé)** — récupère l’image Docker `twentycrm/twenty-app-dev` et la démarre sur le port `2020`. Assurez-vous d’abord que Docker est en cours d’exécution.
|
||||
* **Non** — choisissez cette option si vous avez déjà un serveur Twenty auquel vous souhaitez vous connecter. Vous pourrez le connecter plus tard avec `yarn twenty remote:add`.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img src="/images/docs/developers/extends/apps/start-instance.png" alt="Faut-il démarrer l’instance locale ?" />
|
||||
</div>
|
||||
|
||||
Une fois le serveur démarré, un navigateur s’ouvre pour la connexion. Utilisez le compte de démonstration prérempli :
|
||||
|
||||
* **E-mail :** `tim@apple.dev`
|
||||
* **Mot de passe :** `tim@apple.dev`
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img src="/images/docs/developers/extends/apps/login.png" alt="Écran de connexion Twenty" />
|
||||
</div>
|
||||
|
||||
Cliquez sur **Authorize** sur l’écran suivant — cela donne à la CLI l’accès à votre espace de travail.
|
||||
|
||||
<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
|
||||
|
||||
Passez `--once` pour exécuter une seule opération de build + synchronisation puis quitter — même pipeline, pas de watcher :
|
||||
|
||||
```bash filename="Terminal"
|
||||
yarn twenty dev --once
|
||||
```
|
||||
|
||||
| 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 dev --once` | Une seule opération de build + synchronisation, se termine avec le code `0` en cas de réussite et `1` en cas d’échec. | CI, hooks de pré-commit, agents IA et flux de travail scriptés. |
|
||||
| `yarn twenty dev --once --dry-run` | Construit et affiche les modifications de métadonnées **sans les appliquer**. | Inspection de ce qu’une synchronisation changerait avant de s’y engager. |
|
||||
|
||||
Les deux modes nécessitent un serveur distant authentifié. Voir [synchronisation et récupération](/l/fr/developers/extend/apps/operations/sync-and-recovery#previewing-changes-dry-run) pour plus d’informations sur `--dry-run`.
|
||||
|
||||
### Options du mode de développement
|
||||
|
||||
| Option | Description |
|
||||
| ------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
|
||||
| `--once` | Construire et synchroniser une fois, puis quitter. |
|
||||
| `--dry-run` | Avec `--once`, prévisualisez les modifications de métadonnées sans les appliquer. N’écrit rien. |
|
||||
| `--debounceMs \<ms>` | Définir le délai de temporisation des modifications de fichiers en millisecondes (valeur par défaut : `2000`). |
|
||||
| `--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, 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>
|
||||
@@ -0,0 +1,58 @@
|
||||
---
|
||||
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` |
|
||||
|
||||
## 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
|
||||
```
|
||||
@@ -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: clé
|
||||
---
|
||||
|
||||
* **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** — la version 24+ est requise. 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 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).
|
||||
Reference in New Issue
Block a user