A Amazon não CodeCatalyst está mais aberta a novos clientes. Os clientes atuais podem continuar usando o serviço normalmente. Para obter mais informações, consulte [Como migrar do CodeCatalyst](migration.md).
As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.
# Modificar os recursos do esquema com um assistente de frontend
Um assistente de seleção de esquema no CodeCatalyst é gerado automaticamente pela interface de `Options` no arquivo `blueprint.ts`. O assistente de front-end é compatível com modificações e recursos de `Options` do esquema usando [comentários e tags no estilo JSDOC](https://jsdoc.app/about-getting-started.html). Use comentários e tags no estilo JSDOC para realizar tarefas. Por exemplo, você pode selecionar o texto exibido acima de uma opção, habilitar recursos, como validação de entrada, ou tornar uma opção recolhível. O assistente funciona interpretando uma árvore de sintaxe abstrata (AST) gerada a partir do tipo TypeScript da interface `Options`. O assistente é configurado automaticamente para o tipo descrito da melhor maneira possível. Nem todos os tipos são compatíveis. Outros tipos compatíveis incluem o seletor de região e o seletor de ambiente.
Veja a seguir um exemplo de um assistente que usa comentários e tags JSDOC com `Options` do esquema:
```
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[];
}
```
O nome de exibição de cada opção da interface de `Options` aparece em `camelCase` por padrão. O texto simples no comentário no estilo JSDOC é exibido como texto acima da opção no assistente.
**Topics**
+ [Tags compatíveis](#supported-tags-bp)
+ [Tipos de TypeScript compatíveis](#supported-typescript-bp)
+ [Comunicação com o usuário durante a síntese](#communication-mid-synthesis)
## Tags compatíveis
As seguintes tags JSDOC são compatíveis com `Options` do esquema personalizado no assistente de front-end.
### @inlinePolicy ./path/to/policy/file.json
+ **Requer**: opção de ser um tipo `Role`.
+ **Uso** – Permite comunicar as políticas em linha necessárias para um perfil. Espera-se que o caminho `policy.json` esteja no código-fonte. Use essa tag quando precisar de uma política personalizada para um perfil.
+ **Dependências**: `blueprint-cli 0.1.12` e posterior
+ **Exemplo**: `@inlinePolicy ./deployment-policy.json`
```
environment: EnvironmentDefinition{
awsAccountConnection: AccountConnection{
/**
* @inlinePolicy ./path/to/deployment-policy.json
*/
cdkRole: Role[];
};
};
```
### @trustPolicy ./path/to/policy/file.json
+ **Requer**: opção de ser um tipo `Role`.
+ **Uso**: permite comunicar as políticas de confiança necessárias para um perfil. Espera-se que o caminho `policy.json` esteja no código-fonte. Use essa tag quando precisar de uma política personalizada para um perfil.
+ **Dependências**: `blueprint-cli 0.1.12` e posterior
+ **Exemplo**: `@trustPolicy ./trust-policy.json`
```
environment: EnvironmentDefinition{
awsAccountConnection: AccountConnection{
/**
* @trustPolicy ./path/to/trust-policy.json
*/
cdkRole: Role[];
};
};
```
### Expressão Regex @validationRegex
+ **Requer** – Opção de ser uma string.
+ **Uso** – Executa a validação de entrada na opção usando a expressão regex e exibições `@validationMessage` fornecidas.
+ **Exemplo**: `@validationRegex /^[a-zA-Z0-9_]+$/`
+ **Recomendação** – Use com `@validationMessage`. A mensagem de validação está vazia por padrão.
### string @validationMessage
+ **Requer** – `@validationRegex` ou outros erros para revisar o uso.
+ **Uso** – Exibe mensagem de validação quando houver falha em `@validation*`.
+ **Exemplo** – `@validationMessage Must contain only upper and lowercase letters, numbers, and underscores`.
+ **Recomendação** – Use com `@validationMessage`. A mensagem de validação está vazia por padrão.
### booleano @collapsed (opcional)
+ **Requer** – N/A
+ **Uso** – Booleano que permite que uma subopção seja recolhível. Se a anotação recolhida estiver presente, seu valor padrão será verdadeiro. Definir o valor como `@collapsed false` cria uma seção recolhível que é inicialmente aberta.
+ **Exemplo**: `@collapsed true`
### string @displayName
+ **Requer** – N/A
+ **Uso** – Altera o nome de exibição da opção. Permite formatos diferentes de camelCase para o nome de exibição.
+ **Exemplo**: `@displayName Blueprint Name`
### string @displayName
+ **Requer** – N/A
+ **Uso** – Altera o nome de exibição da opção. Permite formatos diferentes de [camelCase](https://en.wikipedia.org/wiki/Camel_case) para o nome de exibição.
+ **Exemplo**: `@displayName Blueprint Name`
### número @defaultEntropy
+ **Requer** – Opção de ser uma string.
+ **Uso** – Anexa uma string alfanumérica randomizada de um comprimento especificado à opção.
+ **Exemplo**: `@defaultEntropy 5`
### string @placeholder (opcional)
+ **Requer** – N/A
+ **Uso** – Altera o espaço reservado padrão para o campo de texto.
+ **Exemplo**: `@placeholder type project name here`
### número @textArea (opcional)
+ **Requer** – N/A
+ **Uso** – Converte a entrada de string em um componente de área de texto para seções maiores de texto. Adicionar um número define o número de linhas. O padrão é cinco linhas.
+ **Exemplo**: `@textArea 10`
### booleano @hidden (opcional)
+ **Requer** – N/A
+ **Uso** – Oculta o arquivo do usuário, a menos que a verificação de validação falhe. O valor padrão é verdadeiro.
+ **Exemplo**: `@hidden`
### booleano @button (opcional)
+ **Requer** – N/A
+ **Uso** – A anotação deve estar em uma propriedade booleana. Adiciona um botão que será sintetizado como verdadeiro quando selecionado. Não é uma alternância.
+ **Exemplo**: `buttonExample: boolean;`
```
/**
* @button
*/
buttonExample: boolean;
```
### booleano @showName (opcional)
+ **Requer** – N/A
+ **Uso** – Só pode ser usado em um tipo de conexão de conta. Mostra a entrada de nome oculto. O padrão é `default_environment`.
+ **Exemplo**: `@showName true`
```
/**
* @showName true
*/
accountConnection: AccountConnection<{
...
}>;
```
### booleano @showEnvironmentType (opcional)
+ **Requer** – N/A
+ **Uso** – Só pode ser usado em um tipo de conexão de conta. Mostra o menu suspenso do tipo de ambiente oculto. Todas as conexões são padronizadas para `production`. As opções são **Não produção** ou **Produção**.
+ **Exemplo**: `@showEnvironmentType true`
```
/**
* @showEnvironmentType true
*/
accountConnection: AccountConnection<{
...
}>;
```
### booleano @forceDefault (opcional)
+ **Requer** – N/A
+ **Uso** – Usa o valor padrão fornecido pelo autor do esquema em vez do valor usado anteriormente pelo usuário.
+ **Exemplo**: `forceDeafultExample: any;`
```
/**
* @forceDefault
*/
forceDeafultExample: any;
```
### @requires blueprintName
+ **Requer** – Anota a interface de `Options`.
+ **Uso** – Avisa o usuário para adicionar o `blueprintName` especificado ao projeto como um requisito para o esquema atual.
+ **Exemplo**: `@requires '@amazon-codecatalyst/blueprints.blueprint-builder'`
```
/*
* @requires '@amazon-codecatalyst/blueprints.blueprint-builder'
*/
export interface Options extends ParentOptions {
...
```
### regex @filter
+ **Requer** – Anota a interface de `Selector` ou `MultiSelect`.
+ **Uso** – Lista suspensa de filtros no assistente para opções que correspondem ao regex especificado.
+ **Exemplo**: `@filter /blueprintPackageName/`
```
/**
* @filter /myPackageName/
*/
blueprintInstantiation?: Selector;
...
```
## Tipos de TypeScript compatíveis
Os seguintes tipos TypeScript são compatíveis com `Options` do esquema personalizado no assistente de front-end.
### Número
+ **Requer**: opção de ser um tipo `number`.
+ **Uso** – Gere um campo de entrada numérica.
+ **Exemplo**: `age: number`
```
{
age: number
...
}
```
### String
+ **Requer**: opção de ser um tipo `string`.
+ **Uso** – Gere uma string de entrada numérica.
+ **Exemplo**: `name: string`
```
{
age: string
...
}
```
### Lista de strings
+ **Requer** – Opção de ser uma array do tipo `string`.
+ **Uso** – Gerar uma entrada de lista de strings.
+ **Exemplo**: `isProduction: boolean`
```
{
isProduction: boolean
...
}
```
### Checkbox
+ **Requer** – Opção de ser um `boolean`.
+ **Uso** – Gere uma caixa de seleção.
+ **Exemplo**: `isProduction: boolean`
```
{
isProduction: boolean
...
}
```
### Seleção
+ **Requer** – Opção de ser uma união de três ou menos strings.
+ **Uso** – Gere um botão de seleção selecionado.
**nota**
Quando há quatro ou mais itens, esse tipo é renderizado como uma lista suspensa.
+ **Exemplo**: `color: 'red' | 'blue' | 'green'`
```
{
color: 'red' | 'blue' | 'green'
...
}
```
### Dropdown
+ **Requer** – Opção de ser uma união de quatro ou mais strings.
+ **Uso** – Gere uma lista suspensa.
+ **Exemplo**: `runtimes: 'nodejs' | 'python' | 'java' | 'dotnetcore' | 'ruby'`
```
{
runtimes: 'nodejs' | 'python' | 'java' | 'dotnetcore' | 'ruby'
...
}
```
### Seção expansível
+ **Requer** – Opção de ser um objeto.
+ **Uso** – Gere uma seção expansível. As opções no objeto serão aninhadas dentro da seção expansível do assistente.
+ **Exemplo** –
```
{
expandableSectionTitle: {
nestedString: string;
nestedNumber: number;
}
}
```
### Tupla
+ **Requer** – Opção de ser do tipo `Tuple`.
+ **Uso** – Gere uma entrada paga de valor-chave.
+ **Exemplo**: `tuple: Tuple[string, string]>`
```
{
tuple: Tuple[string, string]>;
...
}
```
### Lista de tuplas
+ **Requer** – Opção de ser uma array do tipo `Tuple`.
+ **Uso** – Gere uma entrada de lista de tuplas.
+ **Exemplo**: `tupleList: Tuple[string, string]>[]`
```
{
tupleList: Tuple[string, string]>[];
...
}
```
### Seletor
+ **Requer** – Opção de ser do tipo `Selector`.
+ **Uso** – Gere uma lista suspensa de repositórios de origem ou esquemas aplicados a um projeto.
+ **Exemplo**: `sourceRepo: Selector`
```
{
sourceRepo: Selector;
sourceRepoOrAdd: Selector;
blueprintInstantiation: Selector;
...
}
```
### Seleção múltipla
+ **Requer** – Opção de ser do tipo `Selector`.
+ **Uso** – Gere uma entrada de seleção múltipla.
+ **Exemplo**: `multiselect: MultiSelect['A' | 'B' | 'C' | 'D' | 'E']>`
```
{
multiselect: MultiSelect['A' | 'B' | 'C' | 'D' | 'E']>;
...
}
```
## Comunicação com o usuário durante a síntese
Como autor do esquema, você pode se comunicar com os usuários além das mensagens de validação. Por exemplo, um membro do espaço pode visualizar uma combinação de opções que produz um esquema que não está claro. Os esquemas personalizados são compatíveis com a capacidade de comunicar mensagens de erro aos usuários invocando a síntese. O esquema básico implementa um perfil de `throwSynthesisError(...)` que espera uma mensagem de erro clara. Você pode invocar a mensagem usando o seguinte:
```
//blueprint.ts
this.throwSynthesisError({
name: BlueprintSynthesisErrorTypes.BlueprintSynthesisError,
message: 'hello from the blueprint! This is a custom error communicated to the user.'
})
```