

Amazon n' CodeCatalyst est plus ouvert aux nouveaux clients. Les clients existants peuvent continuer à utiliser le service normalement. Pour de plus amples informations, veuillez consulter [Comment effectuer une migration depuis CodeCatalyst](migration.md).

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

# Modification des fonctionnalités du plan à l'aide d'un assistant frontal
<a name="wizard-bp"></a>

Un assistant de sélection de plans activé CodeCatalyst est généré automatiquement par l'`Options`interface du fichier. `blueprint.ts` L'assistant frontal prend en charge les modifications et les fonctionnalités d'un plan à l'`Options`aide de [commentaires et de balises de style JSDOC](https://jsdoc.app/about-getting-started.html). Vous pouvez utiliser des commentaires et des balises de style JSDOC pour effectuer des tâches. Par exemple, vous pouvez sélectionner le texte affiché au-dessus d'une option, activer des fonctionnalités telles que la validation des entrées ou rendre une option pliable. L'assistant fonctionne en interprétant un arbre syntaxique abstrait (AST) généré à partir du TypeScript type de l'`Options`interface. L'assistant se configure automatiquement selon le type décrit du mieux qu'il peut. Tous les types ne sont pas pris en charge. Les autres types pris en charge incluent le sélecteur de région et le sélecteur d'environnement.

Voici un exemple d'assistant qui utilise des commentaires et des balises JSDOC avec des plans : `Options`

```
export interface Options {
  /**
   * What do you want to call your new blueprint?
   * @validationRegex /^[a-zA-Z0-9_]+$/
   * @validationMessage Must contain only upper and lowercase letters, numbers and underscores
   */
  blueprintName: string;

  /**
   * Add a description for your new blueprint.
   */
   description?: string;

   /**
    * Tags for your Blueprint:
    * @collapsed true
    */
  tags?: string[];
}
```

Le nom d'affichage de chaque option de l'`Options`interface apparaît `camelCase` par défaut. Le texte brut dans le commentaire de style JSDOC est affiché sous forme de texte au-dessus de l'option dans l'assistant.

**Topics**
+ [Tags pris en charge](#supported-tags-bp)
+ [TypeScript Types pris en charge](#supported-typescript-bp)
+ [Communiquer avec l'utilisateur lors de la synthèse](#communication-mid-synthesis)

## Tags pris en charge
<a name="supported-tags-bp"></a>

Les balises JSDOC suivantes sont prises en charge par un plan personnalisé `Options` dans l'assistant frontal.

### @inlinePolicy. /path/to/policy/file.json
<a name="inline-policy-tag"></a>
+ **Nécessite** : l'option doit être un type`Role`.
+ **Utilisation** : vous permet de communiquer les politiques intégrées dont un rôle a besoin. Le `policy.json` chemin devrait se trouver sous le code source. Utilisez cette balise lorsque vous avez besoin d'une politique personnalisée pour un rôle.
+ **Dépendances** - `blueprint-cli 0.1.12` et supérieures
+ **Exemple** - `@inlinePolicy ./deployment-policy.json`

```
environment: EnvironmentDefinition{
    awsAccountConnection: AccountConnection{
      /**
       * @inlinePolicy ./path/to/deployment-policy.json
       */
      cdkRole: Role[];
    };
   };
```

### @trustPolicy. /path/to/policy/file.json
<a name="trust-policy-tag"></a>
+ **Nécessite** : l'option doit être un type`Role`.
+ **Utilisation** : vous permet de communiquer les politiques de confiance dont un rôle a besoin. Le `policy.json` chemin devrait se trouver sous le code source. Utilisez cette balise lorsque vous avez besoin d'une politique personnalisée pour un rôle.
+ **Dépendances** - `blueprint-cli 0.1.12` et supérieures
+ **Exemple** - `@trustPolicy ./trust-policy.json`

```
environment: EnvironmentDefinition{
    awsAccountConnection: AccountConnection{
      /**
       * @trustPolicy ./path/to/trust-policy.json
       */
      cdkRole: Role[];
    };
   };
```

### Expression Regex @validationRegex
<a name="validation-regex-tag"></a>
+ **Nécessite** : l'option doit être une chaîne.
+ **Utilisation** - Effectue la validation des entrées sur l'option en utilisant l'expression regex donnée et les affichages`@validationMessage`.
+ **Exemple** - `@validationRegex /^[a-zA-Z0-9_]+$/`
+ **Recommandation** - À utiliser avec`@validationMessage`. Le message de validation est vide par défaut.

### chaîne @validationMessage
<a name="validation-message-tag"></a>
+ **Nécessite** des erreurs `@validationRegex` ou d'autres erreurs pour vérifier l'utilisation.
+ **Utilisation** : affiche un message de validation en `@validation*` cas d'échec.
+ **Exemple** -`@validationMessage Must contain only upper and lowercase letters, numbers, and underscores`.
+ **Recommandation** - À utiliser avec`@validationMessage`. Le message de validation est vide par défaut.

### @collapsed boolean (facultatif)
<a name="collapsed-boolean-tag"></a>
+ **Nécessite** - N/A
+ **Utilisation** : booléen permettant à une sous-option d'être repliable. Si l'annotation réduite est présente, sa valeur par défaut est vraie. La définition de la valeur sur `@collapsed false` crée une section pliable qui est initialement ouverte.
+ **Exemple** - `@collapsed true`

### chaîne @displayName
<a name="display-name-tag"></a>
+ **Nécessite** - N/A
+ **Utilisation** - Modifie le nom d'affichage de l'option. Autorise des formats autres que CamelCase pour le nom d'affichage.
+ **Exemple** - `@displayName Blueprint Name`

### chaîne @displayName
<a name="display-name-tag"></a>
+ **Nécessite** - N/A
+ **Utilisation** - Modifie le nom d'affichage de l'option. Autorise des formats autres que [CamelCase](https://en.wikipedia.org/wiki/Camel_case) pour le nom d'affichage.
+ **Exemple** - `@displayName Blueprint Name`

### Numéro @defaultEntropy
<a name="default-entropy-tag"></a>
+ **Nécessite** : l'option doit être une chaîne.
+ **Utilisation** : ajoute une chaîne alphanumérique aléatoire d'une longueur spécifiée à l'option.
+ **Exemple** - `@defaultEntropy 5`

### chaîne @placeholder (facultatif)
<a name="placeholder-tag"></a>
+ **Nécessite** - N/A
+ **Utilisation - Modifie l'**espace réservé aux champs de texte par défaut.
+ **Exemple** - `@placeholder type project name here`

### Numéro @textArea (facultatif)
<a name="text-area-tag"></a>
+ **Nécessite** - N/A
+ **Utilisation** - Convertit l'entrée de chaîne en un composant de zone de texte pour les grandes sections de texte. L'ajout d'un nombre définit le nombre de lignes. La valeur par défaut est de cinq lignes.
+ **Exemple** - `@textArea 10`

### @hidden boolean (facultatif)
<a name="hidden-tag"></a>
+ **Nécessite** - N/A
+ **Utilisation** : masque le fichier à l'utilisateur sauf si le contrôle de validation échoue. La valeur par défaut est true.
+ **Exemple** - `@hidden`

### @button boolean (facultatif)
<a name="button-tag"></a>
+ **Nécessite** - N/A
+ **Utilisation : l'**annotation doit figurer sur une propriété booléenne. Ajoute un bouton qui sera synthétisé comme vrai une fois sélectionné. Ce n'est pas une bascule.
+ **Exemple** - `buttonExample: boolean;`

  ```
  /**
    * @button
    */
  buttonExample: boolean;
  ```

### @showName boolean (facultatif)
<a name="show-name-tag"></a>
+ **Nécessite** - N/A
+ **Utilisation** : ne peut être utilisé que sur un type de connexion à un compte. Affiche le nom masqué saisi. La valeur par défaut est `default_environment`.
+ **Exemple** - `@showName true`

  ```
  /**
    * @showName true
    */
  accountConnection: AccountConnection<{
      ...
  }>;
  ```

### @ showEnvironmentType boolean (facultatif)
<a name="show-environment-tag"></a>
+ **Nécessite** - N/A
+ **Utilisation** : ne peut être utilisé que sur un type de connexion à un compte. Affiche le menu déroulant des types d'environnement masqués. Toutes les connexions sont définies par défaut sur`production`. Les options sont **la non-production ou la** **production**.
+ **Exemple** - `@showEnvironmentType true`

  ```
  /**
    * @showEnvironmentType true
    */
  accountConnection: AccountConnection<{
      ...
  }>;
  ```

### @forceDefault boolean (facultatif)
<a name="force-default-tag"></a>
+ **Nécessite** - N/A
+ **Utilisation** : utilise la valeur par défaut fournie par l'auteur du plan au lieu de la valeur utilisée précédemment par l'utilisateur.
+ **Exemple** - `forceDeafultExample: any;`

  ```
  /**
    * @forceDefault
    */
  forceDeafultExample: any;
  ```

### Nom du plan @requires
<a name="requires-tag"></a>
+ **Nécessite** : annote l'`Options`interface.
+ **Utilisation** : avertit l'utilisateur d'ajouter un `blueprintName` élément spécifié au projet comme exigence pour le plan actuel.
+ **Exemple** - `@requires '@amazon-codecatalyst/blueprints.blueprint-builder'`

  ```
  /*
   * @requires '@amazon-codecatalyst/blueprints.blueprint-builder'
   */
  export interface Options extends ParentOptions {
  ...
  ```

### @filter regex
<a name="filter-regex-tag"></a>
+ **Nécessite** : annote l'`MultiSelect`interface `Selector` or.
+ **Utilisation** : filtre le menu déroulant dans l'assistant pour afficher les options correspondant à l'expression régulière spécifiée.
+ **Exemple** - `@filter /blueprintPackageName/`

  ```
   /**
       * @filter /myPackageName/
       */
      blueprintInstantiation?: Selector<BlueprintInstantiation>;
  ...
  ```

## TypeScript Types pris en charge
<a name="supported-typescript-bp"></a>

Les TypeScript types suivants sont pris en charge par un plan personnalisé `Options` dans l'assistant frontal.

### Nombre
<a name="number-ts-tag"></a>
+ **Nécessite** : l'option doit être un type`number`.
+ **Utilisation** - Générez un champ de saisie numérique.
+ **Exemple** - `age: number`

```
{
  age: number
  ...
}
```

### Chaîne
<a name="string-ts-tag"></a>
+ **Nécessite** : l'option doit être un type`string`.
+ **Utilisation** - Génère un champ de saisie de chaîne.
+ **Exemple** - `name: string`

```
{
  age: string
  ...
}
```

### Liste de chaînes
<a name="string-list-ts-tag"></a>
+ **Nécessite** : l'option doit être un tableau de types`string`.
+ **Utilisation** - Génère une entrée de liste de chaînes.
+ **Exemple** - `isProduction: boolean`

```
{
  isProduction: boolean
  ...
}
```

### Checkbox
<a name="checkbox-ts-tag"></a>
+ **Nécessite** : option pour être un`boolean`.
+ **Utilisation** - Générez une case à cocher.
+ **Exemple** - `isProduction: boolean`

```
{
  isProduction: boolean
  ...
}
```

### Radio
<a name="radio-ts-tag"></a>
+ **Nécessite** : cette option doit être une union de trois chaînes ou moins.
+ **Utilisation** - Génère une radio sélectionnée.
**Note**  
Lorsqu'il y a quatre éléments ou plus, ce type s'affiche sous forme de liste déroulante.
+ **Exemple** - `color: 'red' | 'blue' | 'green'`

```
{
  color: 'red' | 'blue' | 'green'
  ...
}
```

### Liste déroulante
<a name="dropdown-ts-tag"></a>
+ **Nécessite** : option devant être une union de quatre chaînes ou plus.
+ **Utilisation** : générez une liste déroulante.
+ **Exemple** - `runtimes: 'nodejs' | 'python' | 'java' | 'dotnetcore' | 'ruby'`

```
{
  runtimes: 'nodejs' | 'python' | 'java' | 'dotnetcore' | 'ruby'
  ...
}
```

### Section extensible
<a name="expandable-ts-tag"></a>
+ **Nécessite** : option pour être un objet.
+ **Utilisation** - Générez une section extensible. Les options de l'objet seront imbriquées dans la section extensible de l'assistant.
+ **Exemple** - 

```
{
     expandableSectionTitle: {
         nestedString: string;
         nestedNumber: number;
     }
}
```

### Tuple
<a name="tuple-ts-tag"></a>
+ **Nécessite** : l'option doit être de type`Tuple`.
+ **Utilisation** - Générez une entrée payante à valeur clé.
+ **Exemple** - `tuple: Tuple[string, string]>`

```
{
    tuple: Tuple[string, string]>;
    ...
}
```

### Liste de tuples
<a name="tuple-list-ts-tag"></a>
+ **Nécessite** : l'option doit être un tableau de types`Tuple`.
+ **Utilisation** - Générez une entrée de liste de tuples.
+ **Exemple** - `tupleList: Tuple[string, string]>[]`

```
{
  tupleList: Tuple[string, string]>[];
  ...
}
```

### Selector
<a name="selector-ts-tag"></a>
+ **Nécessite** : l'option doit être de type`Selector`.
+ **Utilisation** : générez une liste déroulante des référentiels sources ou des plans appliqués à un projet.
+ **Exemple** - `sourceRepo: Selector<SourceRepository>`

```
{
    sourceRepo: Selector<SourceRepository>;
    sourceRepoOrAdd: Selector<SourceRepository | string>;
    blueprintInstantiation: Selector<BlueprintInstantiation>;
  ...
}
```

### Sélection multiple
<a name="multiselect-ts-tag"></a>
+ **Nécessite** : l'option doit être de type`Selector`.
+ **Utilisation** - Génère une entrée à sélection multiple.
+ **Exemple** - `multiselect: MultiSelect['A' | 'B' | 'C' | 'D' | 'E']>`

```
{
  multiselect: MultiSelect['A' | 'B' | 'C' | 'D' | 'E']>;
  ...
}
```

## Communiquer avec l'utilisateur lors de la synthèse
<a name="communication-mid-synthesis"></a>

En tant qu'auteur d'un plan, vous pouvez communiquer avec les utilisateurs au-delà des simples messages de validation. Par exemple, un membre de l'espace peut afficher une combinaison d'options qui produit un plan qui n'est pas clair. Les plans personnalisés permettent de communiquer des messages d'erreur aux utilisateurs en invoquant la synthèse. Le plan de base implémente une `throwSynthesisError(...)` fonction qui attend un message d'erreur clair. Vous pouvez appeler le message en utilisant ce qui suit :

```
//blueprint.ts
this.throwSynthesisError({
   name: BlueprintSynthesisErrorTypes.BlueprintSynthesisError,
   message: 'hello from the blueprint! This is a custom error communicated to the user.'
})
```