Tag supportati TypeScript Tipi supportati Comunicare con l'utente durante la sintesi

Modifica delle funzionalità del blueprint con una procedura guidata di front-end

Una procedura guidata di selezione dei progetti CodeCatalyst viene generata automaticamente dall'Optionsinterfaccia nel file. blueprint.ts La procedura guidata front-end supporta le modifiche e le funzionalità di un blueprint utilizzando commenti e tag di stile. Options JSDOC È possibile utilizzare commenti e tag di JSDOC stile per eseguire attività. Ad esempio, è possibile selezionare il testo visualizzato sopra un'opzione, abilitare funzionalità come la convalida dell'input o rendere comprimibile un'opzione. La procedura guidata funziona interpretando un albero di sintassi astratto (AST) generato dal tipo dell' TypeScript interfaccia. Options La procedura guidata si configura automaticamente nel miglior modo possibile nel tipo descritto. Non tutti i tipi sono supportati. Altri tipi supportati includono il selettore di regione e il selettore di ambiente.

Di seguito è riportato un esempio di procedura guidata che utilizza JSDOC commenti e tag con blueprint: 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[];
}

Per impostazione predefinita, il nome visualizzato di ciascuna opzione dell'Optionsinterfaccia viene visualizzato incamelCase. Il testo normale nel commento di JSDOC stile viene visualizzato come testo sopra l'opzione nella procedura guidata.

Argomenti

Tag supportati
TypeScript Tipi supportati
Comunicare con l'utente durante la sintesi

Tag supportati

I seguenti JSDOC tag sono supportati da un blueprint personalizzato Options nella procedura guidata di front-end.

@. inlinePolicy /path/to/policy/file.json

Richiede: l'opzione deve essere un tipo. Role
Utilizzo: consente di comunicare le politiche in linea necessarie per un ruolo. Il policy.json percorso dovrebbe essere in codice sorgente. Usa questo tag quando hai bisogno di una politica personalizzata per un ruolo.
Dipendenze - blueprint-cli 0.1.12 e oltre
Esempio - @inlinePolicy ./deployment-policy.json


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

@trustPolicy . /path/to/policy/file.json

Richiede: l'opzione deve essere un tipo. Role
Utilizzo: consente di comunicare le politiche di fiducia necessarie per un ruolo. Il policy.json percorso dovrebbe essere in codice sorgente. Usa questo tag quando hai bisogno di una politica personalizzata per un ruolo.
Dipendenze - blueprint-cli 0.1.12 e oltre
Esempio - @trustPolicy ./trust-policy.json


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

@ validationRegex espressione Regex

Richiede: l'opzione deve essere una stringa.
Utilizzo: esegue la convalida dell'input sull'opzione utilizzando l'espressione regex e i display specificati. @validationMessage
Esempio - @validationRegex /^[a-zA-Z0-9_]+$/
Raccomandazione: utilizzare con@validationMessage. Il messaggio di convalida è vuoto per impostazione predefinita.

@ stringa validationMessage

Richiede - @validationRegex o altri errori per verificare l'utilizzo.
Utilizzo: visualizza un messaggio di convalida in @validation* caso di errore.
Esempio -@validationMessage Must contain only upper and lowercase letters, numbers, and underscores.
Raccomandazione: utilizzare con@validationMessage. Il messaggio di convalida è vuoto per impostazione predefinita.

@collapsed boolean (opzionale)

Richiede: N/A
Utilizzo: valore booleano che consente a una sottoopzione di essere comprimibile. Se l'annotazione compressa è presente, il suo valore predefinito è true. L'impostazione del valore su @collapsed false crea una sezione comprimibile inizialmente aperta.
Esempio - @collapsed true

@ displayName stringa

Richiede - N/A
Utilizzo: modifica il nome visualizzato dell'opzione. Consente formati diversi camelCase dal nome visualizzato.
Esempio - @displayName Blueprint Name

@ displayName stringa

Richiede - N/A
Utilizzo: modifica il nome visualizzato dell'opzione. Consente formati diversi camelCasedal nome visualizzato.
Esempio - @displayName Blueprint Name

@ defaultEntropy numero

Richiede: l'opzione deve essere una stringa.
Utilizzo: aggiunge all'opzione una stringa alfanumerica randomizzata di una lunghezza specificata.
Esempio - @defaultEntropy 5

stringa @placeholder (opzionale)

Richiede: N/A
Utilizzo: modifica il segnaposto predefinito del campo di testo.
Esempio - @placeholder type project name here

@ textArea numero (opzionale)

Richiede: N/A
Utilizzo: converte la stringa immessa in un componente dell'area di testo per sezioni di testo più grandi. L'aggiunta di un numero definisce il numero di righe. L'impostazione predefinita è cinque righe.
Esempio - @textArea 10

@hidden boolean (opzionale)

Richiede: N/A
Utilizzo: nasconde il file all'utente a meno che il controllo di convalida non fallisca. Il valore predefinito è true.
Esempio - @hidden

@button boolean (opzionale)

Richiede: N/A
Utilizzo: l'annotazione deve trovarsi su una proprietà booleana. Aggiunge un pulsante che verrà sintetizzato come vero quando viene selezionato. Non è un interruttore.

Esempio - buttonExample: boolean;


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

@ showName boolean (opzionale)

Richiede: N/A
Utilizzo: può essere utilizzato solo su un tipo di connessione a un account. Mostra l'inserimento del nome nascosto. L'impostazione predefinita è default_environment.

Esempio - @showName true


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

@ showEnvironmentType boolean (opzionale)

Richiede: N/A
Utilizzo: può essere utilizzato solo su un tipo di connessione a un account. Mostra il menu a discesa del tipo di ambiente nascosto. Tutte le connessioni sono predefinite su. production Le opzioni sono Non produzione o Produzione.

Esempio - @showEnvironmentType true


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

@ forceDefault boolean (opzionale)

Richiede: N/A
Utilizzo: utilizza il valore predefinito fornito dall'autore del blueprint anziché il valore utilizzato in precedenza dall'utente.

Esempio - forceDeafultExample: any;


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

@requires blueprintName

Richiede: annota l'Optionsinterfaccia.
Utilizzo: avvisa l'utente di aggiungere elementi specificati blueprintName al progetto come requisito per il blueprint corrente.

Esempio - @requires '@amazon-codecatalyst/blueprints.blueprint-builder'


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

Regex @filter

Richiede: annota l'interfaccia Selector orMultiSelect.
Utilizzo: filtra il menu a discesa nella procedura guidata in base alle opzioni che corrispondono all'espressione regolare specificata.

Esempio - @filter /blueprintPackageName/


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

TypeScript Tipi supportati

I seguenti TypeScript tipi sono supportati da un blueprint personalizzato Options nella procedura guidata di front-end.

Numero

Richiede: opzione per essere un tipo. number
Utilizzo: genera un campo di immissione numerico.
Esempio - age: number


{
  age: number
  ...
}

Stringa

Richiede: opzione per essere un tipostring.
Utilizzo: genera un campo di input di tipo stringa.
Esempio - name: string


{
  age: string
  ...
}

Elenco stringhe

Richiede: l'opzione deve essere una matrice di tipostring.
Utilizzo: genera un input per un elenco di stringhe.
Esempio - isProduction: boolean


{
  isProduction: boolean
  ...
}

Checkbox

Richiede: opzione per essere unboolean.
Utilizzo: genera una casella di controllo.
Esempio - isProduction: boolean


{
  isProduction: boolean
  ...
}

Radio

Richiede: l'opzione deve essere un'unione di tre o meno stringhe.
Utilizzo: genera una radio selezionata.

Nota
Quando ci sono quattro o più elementi, questo tipo viene visualizzato come un menu a discesa.
Esempio - color: 'red' | 'blue' | 'green'


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

Richiede - Opzione per essere un'unione di quattro o più stringhe.
Utilizzo: genera un menu a discesa.
Esempio - runtimes: 'nodejs' | 'python' | 'java' | 'dotnetcore' | 'ruby'


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

Sezione espandibile

Richiede: opzione per essere un oggetto.
Utilizzo: genera una sezione espandibile. Le opzioni dell'oggetto verranno annidate all'interno della sezione espandibile della procedura guidata.
Esempio -


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

Tupla

Richiede: l'opzione deve essere di tipoTuple.
Utilizzo: genera un input a pagamento con valore chiave.
Esempio - tuple: Tuple[string, string]>


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

Elenco di tuple

Richiede: opzione per essere un array di tipoTuple.
Utilizzo: genera un input per l'elenco delle tuple.
Esempio - tupleList: Tuple[string, string]>[]


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

Selector

Richiede: l'opzione deve essere di tipoSelector.
Utilizzo: genera un elenco a discesa dei repository o dei blueprint di origine applicati a un progetto.
Esempio - sourceRepo: Selector<SourceRepository>


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

Selezione multipla

Richiede: opzione per essere di tipo. Selector
Utilizzo: genera un input multiselezione.
Esempio - multiselect: MultiSelect['A' | 'B' | 'C' | 'D' | 'E']>


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

Comunicare con l'utente durante la sintesi

In qualità di autore del blueprint, puoi rispondere agli utenti oltre ai semplici messaggi di convalida. Ad esempio, un membro dello spazio potrebbe visualizzare una combinazione di opzioni che produce un blueprint non chiaro. I blueprint personalizzati supportano la capacità di comunicare messaggi di errore agli utenti richiamando la sintesi. Il blueprint di base implementa una throwSynthesisError(...) funzione che prevede un messaggio di errore chiaro. È possibile richiamare il messaggio utilizzando quanto segue:


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

Avvertimento JavaScript è disabilitato o non è disponibile nel tuo browser.

Per usare la documentazione AWS, JavaScript deve essere abilitato. Consulta le pagine della guida del browser per le istruzioni.

Convenzioni dei documenti

Sviluppo di un modello personalizzato per soddisfare i requisiti del progetto

Generazione di input e rirenderizzazione degli elementi della procedura guidata front-end

Modifica delle funzionalità del blueprint con una procedura guidata di front-end

Argomenti

Tag supportati

@. inlinePolicy /path/to/policy/file.json

@trustPolicy . /path/to/policy/file.json

@ validationRegex espressione Regex

@ stringa validationMessage

@collapsed boolean (opzionale)

@ displayName stringa

@ displayName stringa

@ defaultEntropy numero

stringa @placeholder (opzionale)

@ textArea numero (opzionale)

@hidden boolean (opzionale)

@button boolean (opzionale)

@ showName boolean (opzionale)

@ showEnvironmentType boolean (opzionale)

@ forceDefault boolean (opzionale)

@requires blueprintName

Regex @filter

TypeScript Tipi supportati

Numero

Stringa

Elenco stringhe

Checkbox

Radio

Nota

Elenco a discesa

Sezione espandibile

Tupla

Elenco di tuple

Selector

Selezione multipla

Comunicare con l'utente durante la sintesi