

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á.

# Desenvolvimento de um esquema personalizado para satisfazer os requisitos do projeto
<a name="develop-bp"></a>

Antes de publicar um esquema personalizado, você pode desenvolver o esquema para satisfazer requisitos específicos. Você pode desenvolver seu esquema personalizado e testar o esquema criando um projeto durante a pré-visualização. Você pode desenvolver o esquema personalizado para incluir componentes do projeto, como código-fonte específico, conexões de conta, fluxos de trabalho, problemas ou qualquer outro componente que possa ser criado no CodeCatalyst.

**Importante**  
Se você quiser usar pacotes de esquema de fontes externas, considere os riscos que podem vir com esses pacotes. Você é responsável pelos esquemas personalizados que adiciona ao seu espaço e pelo código que eles geram.

**Importante**  
Para desenvolver um esquema personalizado ao espaço do CodeCatalyst, você deve estar conectado com uma conta que tenha o perfil de **Administrador do espaço** ou **Usuário avançado** no espaço.

**Para desenvolver ou atualizar um esquema personalizado**

1. Retome o Ambiente de Desenvolvimento. Para obter mais informações, consulte [Retomar um Ambiente de Desenvolvimento](devenvironment-resume.md).

   Caso você não tenha um Ambiente de Desenvolvimento, primeiro será necessário criar um. Para obter mais informações, consulte [Criar um Ambiente de Desenvolvimento](devenvironment-create.md).

1. Abra um terminal funcional no Ambiente de Desenvolvimento.

1. Se você optou por um fluxo de trabalho de lançamento ao criar seu esquema, a versão mais recente do esquema será publicada automaticamente. Faça as alterações para garantir que o arquivo `package.json` tenha a versão incrementada. Use o seguinte comando:

   ```
   git pull
   ```

1. No arquivo `src/blueprint.ts`, edite as opções do esquema personalizado. A interface `Options` é interpretada dinamicamente pelo assistente do CodeCatalyst para gerar uma interface de usuário (UI) de seleção. Você pode desenvolver seu esquema personalizado adicionando componentes e tags compatíveis. Para obter mais informações, consulte [Modificar os recursos do esquema com um assistente de frontend](wizard-bp.md), [Adicionar componentes do ambiente a um esquema](comp-env-bp.md), [Adição de componentes da região a um esquema](region-comp-bp.md), [Adicionar componentes de repositório e código-fonte a um esquema](comp-repo-source-bp.md), [Adição de componentes de fluxo de trabalho a um esquema](comp-workflow-bp.md) e [Adicionar componentes do Ambiente de Desenvolvimento a um esquema](comp-dev-env-bp.md).

   Você também pode visualizar o SDK de esquemas e exemplos de esquema para ter suporte adicional ao desenvolver seu esquema personalizado. Para ter mais informações, consulte o [repositório de código aberto do GitHub](https://github.com/aws/codecatalyst-blueprints).

Esquemas personalizados fornecem pacotes de pré-visualização como resultado de uma síntese bem-sucedida. O pacote do projeto representa o código-fonte, a configuração e os recursos em um projeto e é usado pelas operações da API de implantação do CodeCatalyst para implantar em um projeto. Se você quiser continuar desenvolvendo seu esquema personalizado, execute novamente o processo de síntese do esquema. Para obter mais informações, consulte [Conceitos de esquemas personalizados](custom-bp-concepts.md).

# Modificar os recursos do esquema com um assistente de frontend
<a name="wizard-bp"></a>

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
<a name="supported-tags-bp"></a>

As seguintes tags JSDOC são compatíveis com `Options` do esquema personalizado no assistente de front-end.

### @inlinePolicy ./path/to/policy/file.json
<a name="inline-policy-tag"></a>
+ **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
<a name="trust-policy-tag"></a>
+ **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
<a name="validation-regex-tag"></a>
+ **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
<a name="validation-message-tag"></a>
+ **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)
<a name="collapsed-boolean-tag"></a>
+ **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
<a name="display-name-tag"></a>
+ **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
<a name="display-name-tag"></a>
+ **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
<a name="default-entropy-tag"></a>
+ **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)
<a name="placeholder-tag"></a>
+ **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)
<a name="text-area-tag"></a>
+ **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)
<a name="hidden-tag"></a>
+ **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)
<a name="button-tag"></a>
+ **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)
<a name="show-name-tag"></a>
+ **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)
<a name="show-environment-tag"></a>
+ **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)
<a name="force-default-tag"></a>
+ **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
<a name="requires-tag"></a>
+ **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
<a name="filter-regex-tag"></a>
+ **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<BlueprintInstantiation>;
  ...
  ```

## Tipos de TypeScript compatíveis
<a name="supported-typescript-bp"></a>

Os seguintes tipos TypeScript são compatíveis com `Options` do esquema personalizado no assistente de front-end.

### Número
<a name="number-ts-tag"></a>
+ **Requer**: opção de ser um tipo `number`.
+ **Uso** – Gere um campo de entrada numérica.
+ **Exemplo**: `age: number`

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

### String
<a name="string-ts-tag"></a>
+ **Requer**: opção de ser um tipo `string`.
+ **Uso** – Gere uma string de entrada numérica.
+ **Exemplo**: `name: string`

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

### Lista de strings
<a name="string-list-ts-tag"></a>
+ **Requer** – Opção de ser uma array do tipo `string`.
+ **Uso** – Gerar uma entrada de lista de strings.
+ **Exemplo**: `isProduction: boolean`

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

### Checkbox
<a name="checkbox-ts-tag"></a>
+ **Requer** – Opção de ser um `boolean`.
+ **Uso** – Gere uma caixa de seleção.
+ **Exemplo**: `isProduction: boolean`

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

### Seleção
<a name="radio-ts-tag"></a>
+ **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
<a name="dropdown-ts-tag"></a>
+ **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
<a name="expandable-ts-tag"></a>
+ **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
<a name="tuple-ts-tag"></a>
+ **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
<a name="tuple-list-ts-tag"></a>
+ **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
<a name="selector-ts-tag"></a>
+ **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<SourceRepository>`

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

### Seleção múltipla
<a name="multiselect-ts-tag"></a>
+ **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
<a name="communication-mid-synthesis"></a>

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.'
})
```

# Geração de entradas e nova renderização de os elementos do assistente de frontend
<a name="comp-dynamic-input-bp"></a>

Você pode gerar entradas de assistente com o DynamicKVInput e criar dinamicamente elementos de assistente de frontend para o esquema personalizado.

**Topics**
+ [Criar Ambientes de Desenvolvimento](#dynamickvinput-bp)
+ [Criar dinamicamente elementos de assistente](#create-wizard-elements-bp)

## Criar Ambientes de Desenvolvimento
<a name="dynamickvinput-bp"></a>

O tipo DynamicKVInput pode ser usado para gerar entradas de assistente de frontend usando os padrões do esquema personalizado. Para ver o esquema mais atualizado, consulte a [definição de DynamicKVInput](https://github.com/aws/codecatalyst-blueprints/blob/main/packages/blueprints/blueprint/src/ui-selectors/dynamic-kv-input.ts).

O exemplo a seguir mostra como é possível usar `Options` para moldar um objeto:

```
import { DynamicKVInput } from '@amazon-codecatalyst/blueprints.blueprint';

export interface Options extends ParentOptions {

  parameters: DynamicKVInput[];

}
```

O exemplo a seguir mostra como é possível configurar parâmetros padrão com várias propriedades:

```
{ 
"parameters": [
        {
            "key": "AWS_REGION",
            "value": "us-west-2",
            "displayType": "region",
            "possibleValues": [
                "us-west-1",
                "us-west-2",
                "us-east-1",
                "us-east-2"
            ],
            "displayName": "AWS Region",
            "description": "AWS Region to deploy the solution to."
        },
        {
            "key": "SchedulingActive",
            "value": "Yes",
            "displayType": "dropdown",
            "possibleValues": [
                "Yes",
                "No"
            ],
            "displayName": "Scheduling Active",
            "description": "Activate or deactivate scheduling."
        },
        {
            "key": "ScheduledServices",
            "value": "Both",
            "displayType": "dropdown",
            "possibleValues": [
                "EC2",
                "RDS",
                "Both"
            ],
            "displayName": "Scheduled Services",
            "description": "Services to schedule."
        },
        {
            "key": "ScheduleRdsClusters",
            "value": "No",
            "displayType": "dropdown",
            "possibleValues": [
                "Yes",
                "No"
            ],
            "displayName": "Schedule RDS Clusters",
            "description": "Enable scheduling of Aurora clusters for RDS service."
        },
        {
            "key": "CreateRdsSnapshot",
            "value": "No",
            "displayType": "dropdown",
            "possibleValues": [
                "Yes",
                "No"
            ],
            "displayName": "Create RDS Snapshot",
            "description": "Create snapshot before stopping RDS instances (does not apply to Aurora Clusters)."
        },
        {
            "key": "MemorySize",
            "value": "128",
            "displayType": "dropdown",
            "possibleValues": [
                "128",
                "384",
                "512",
                "640",
                "768",
                "896",
                "1024",
                "1152",
                "1280",
                "1408",
                "1536"
            ],
            "displayName": "Memory Size",
            "description": "Size of the Lambda function running the scheduler, increase size when processing large numbers of instances."
        },
        {
            "key": "UseCloudWatchMetrics",
            "value": "No",
            "displayType": "dropdown",
            "possibleValues": [
                "Yes",
                "No"
            ],
            "displayName": "Use CloudWatch Metrics",
            "description": "Collect instance scheduling data using CloudWatch metrics."
        },
        {
            "key": "LogRetentionDays",
            "value": "30",
            "displayType": "dropdown",
            "possibleValues": [
                "1",
                "3",
                "5",
                "7",
                "14",
                "30",
                "60",
                "90",
                "120",
                "150",
                "180",
                "365",
                "400",
                "545",
                "731",
                "1827",
                "3653"
            ],
            "displayName": "Log Retention Days",
            "description": "Retention days for scheduler logs."
        },
        {
            "key": "Trace",
            "value": "No",
            "displayType": "dropdown",
            "possibleValues": [
                "Yes",
                "No"
            ],
            "displayName": "Trace",
            "description": "Enable debug-level logging in CloudWatch logs."
        },
        {
            "key": "EnableSSMMaintenanceWindows",
            "value": "No",
            "displayType": "dropdown",
            "possibleValues": [
                "Yes",
                "No"
            ],
            "displayName": "Enable SSM Maintenance Windows",
            "description": "Enable the solution to load SSM Maintenance Windows, so that they can be used for EC2 instance Scheduling."
        },
        {
            "key": "DefaultTimezone",
            "value": "UTC",
            "displayType": "string",
            "displayName": "Default Timezone",
            "description": "Default timezone to use for scheduling."
        },
        {
            "key": "Regions",
            "value": "us-west-2",
            "displayType": "string",
            "displayName": "Regions",
            "description": "List of regions in which instances should be scheduled, leave blank for current region only."
        },
        {
            "key": "UsingAWSOrganizations",
            "value": "No",
            "displayType": "dropdown",
            "possibleValues": [
                "Yes",
                "No"
            ],
            "displayName": "Using AWS Organizations",
            "description": "Use AWS Organizations to automate spoke account registration."
        },
        {
            "key": "Principals",
            "displayType": "string",
			      "optional": false,
            "displayName": "Principals",
            "description": "(Required) If using AWS Organizations, provide the Organization ID. Eg. o-xxxxyyy. Else, provide a comma separated list of spoke account ids to schedule. Eg.: 1111111111, 2222222222 or {param: ssm-param-name}"
        },
        {
            "key": "Namespace",
            "value": "Default",
            "displayType": "string",
            "displayName": "Namespace",
            "description": "Provide unique identifier to differentiate between multiple solution deployments (No Spaces). Example: Dev"
        },
        {
            "key": "SchedulerFrequency",
            "value": 5,
            "displayType": "number",
            "displayName": "Scheduler Frequency",
            "description": "Scheduler running frequency in minutes."
        }
    ]
}
```

## Criar dinamicamente elementos de assistente
<a name="create-wizard-elements-bp"></a>

O mesmo esquema da criação de entradas do assistente pode ser usado para renderizar dinamicamente um assistente durante a síntese. Isso pode ser usado para responder às perguntas de acompanhamento de um usuário quando necessário.

```
//blueprint.ts

export interface Options extends ParentOptions {
...
 dynamicOptions: OptionsSchemaDefinition<'optionsIdentifier', KVSchema>;
}
```

O assistente pode ser configurado durante o período de síntese usando um componente de `Options`.

```
import {
  OptionsSchemaDefinition,
  OptionsSchema,
} from '@amazon-codecatalyst/blueprints.blueprint';

...

  // dynamically renders a number in the place where 'optionsIdentifier' was set in the original options type.
  new OptionsSchema<KVSchema>(this, 'optionsIdentifier', [
    {
            "key": "SchedulerFrequency",
            "value": 5,
            "displayType": "number",
            "displayName": "Scheduler Frequency",
            "description": "Scheduler running frequency in minutes."
    }
   ]);
```

# Adicionar componentes do ambiente a um esquema
<a name="comp-env-bp"></a>

O assistente de esquema personalizado é gerado dinamicamente na interface `Options` exposta por meio do assistente. Os esquemas oferecem suporte à geração de componentes de interface de usuário (UI) a partir de tipos expostos.

**Para importar componentes de ambiente de esquema do Amazon CodeCatalyst**

No arquivo `blueprint.ts`, adicione:

```
import {...} from '@amazon-codecatalyst/codecatalyst-environments'
```

**Topics**
+ [Criar Ambientes de Desenvolvimento](#create-dev-env-bp)
+ [Lista de ambientes](#list-env-bp)
+ [Simular exemplos de interface](#examples-comp-env-bp)

## Criar Ambientes de Desenvolvimento
<a name="create-dev-env-bp"></a>

O exemplo a seguir mostra como implantar a aplicação na nuvem:

```
export interface Options extends ParentOptions {
        ...
        myNewEnvironment:  EnvironmentDefinition{
            thisIsMyFirstAccountConnection: AccountConnection{
                thisIsARole: Role['lambda', 's3', 'dynamo'];
             };
        };
    }
```

A interface gera um componente de interface que solicita um novo ambiente (`myNewEnvironment`) com uma única conexão de conta (`thisIsMyFirstAccountConnection`). Um perfil na conexão da conta (`thisIsARole`) também é gerado com `['lambda', 's3', 'dynamo']` como os recursos de perfil mínimos necessários. Nem todos os usuários têm conexões de conta, então você deve verificar o caso em que um usuário não conecta uma conta ou não conecta uma conta com um perfil. Os perfis também podem ser anotados com `@inlinePolicies`. Para obter mais informações, consulte [@inlinePolicy ./path/to/policy/file.json](wizard-bp.md#inline-policy-tag).

O componente de ambiente requer um `name` e `environmentType`. O código a seguir é a forma padrão mínima exigida:

```
{
  ...
  "myNewEnvironment": {
    "name": "myProductionEnvironment",
    "environmentType": "PRODUCTION"
  },
}
```

Em seguida, o componente de interface solicita vários campos. Conforme você preenche os campos, o esquema ganha uma forma totalmente expandida. Pode ser útil incluir a simulação completa no arquivo `defaults.json` para fins de teste e desenvolvimento.

## Lista de ambientes
<a name="list-env-bp"></a>

Especificar uma matriz do tipo `EnvironmentDefinition` gerará uma lista de ambientes na interface do assistente.

```
export interface Options extends ParentOptions {
    ...
   /**
     @showName readOnly
   */
    myEnvironments:  EnvironmentDefinition<{
        thisIsMyFirstAccountConnection: AccountConnection<{
            thisIsARole: Role<['lambda', 's3', 'dynamo']>;
        }>;
    }>[];

}
```

O exemplo a seguir mostra os padrões de uma lista de ambientes:

```
{
  ...
  "myEnvironments": [
  {
    "name": "myProductionEnvironment",
    "environmentType": "PRODUCTION"
  },
  {
    "name": "myDevelopmentEnvironment",
    "environmentType": "DEVELOPMENT"
  },
  ]
}
```

## Simular exemplos de interface
<a name="examples-comp-env-bp"></a>

### Interface simulada simples
<a name="simple-comp-env-bp"></a>

```
{
    ...
    "thisIsMyEnvironment": {
        "name": "myProductionEnvironment",
        "environmentType": "PRODUCTION",
        "thisIsMySecondAccountConnection": {
            "id": "12345678910",
            "name": "my-account-connection-name",
            "secondAdminRole": {
                "arn": "arn:aws:iam::12345678910:role/ConnectedQuokkaRole",
                "name": "ConnectedQuokkaRole",
                "capabilities": [
                    "lambda",
                    "s3",
                    "dynamo"
                ]
            }
        }
    }
}
```

### Interface simulada complexa
<a name="complex-comp-env-bp"></a>

```
export interface Options extends ParentOptions {
  /**
   * The name of an environment
   * @displayName This is a Environment Name
   * @collapsed
   */
  thisIsMyEnvironment: EnvironmentDefinition{
    /**
     * comments about the account that is being deployed into
     * @displayName This account connection has an overriden name
     * @collapsed
     */
    thisIsMyFirstAccountConnection: AccountConnection{
      /**
       * Blah blah some information about the role that I expect
       * e.g. here's a copy-pastable policy: [to a link]
       * @displayName This role has an overriden name
       */
      adminRole: Role['admin', 'lambda', 's3', 'cloudfront'];
      /**
       * Blah blah some information about the second role that I expect
       * e.g. here's a copy-pastable policy: [to a link]
       */
      lambdaRole: Role['lambda', 's3'];
    };
    /**
     * comments about the account that is being deployed into
     */
    thisIsMySecondAccountConnection: AccountConnection{
      /**
         * Blah blah some information about the role that I expect
         * e.g. here's a copy-pastable policy: [to a link]
         */
      secondAdminRole: Role['admin', 'lambda', 's3', 'cloudfront'];
      /**
         * Blah blah some information about the second role that I expect
         * e.g. here's a copy-pastable policy: [to a link]
         */
      secondLambdaRole: Role['lambda', 's3'];
    };
  };
}
```

### Interface simulada completa
<a name="complete-comp-env-bp"></a>

```
{
  ...
  "thisIsMyEnvironment": {
    "name": "my-production-environment",
    "environmentType": "PRODUCTION",
    "thisIsMySecondAccountConnection": {
      "id": "12345678910",
      "name": "my-connected-account",
      "secondAdminRole": {
        "name": "LambdaQuokkaRole",
        "arn": "arn:aws:iam::12345678910:role/LambdaQuokkaRole",
        "capabilities": [
          "admin",
          "lambda",
          "s3",
          "cloudfront"
        ]
      },
      "secondLambdaRole": {
        "name": "LambdaQuokkaRole",
        "arn": "arn:aws:iam::12345678910:role/LambdaQuokkaRole",
        "capabilities": [
          "lambda",
          "s3"
        ]
      }
    },
    "thisIsMyFirstAccountConnection": {
      "id": "12345678910",
      "name": "my-connected-account",
      "adminRole": {
        "name": "LambdaQuokkaRole",
        "arn": "arn:aws:iam::12345678910:role/LambdaQuokkaRole",
        "capabilities": [
          "admin",
          "lambda",
          "s3",
          "cloudfront"
        ]
      },
      "lambdaRole": {
        "name": "LambdaQuokkaRole",
        "arn": "arn:aws:iam::12345678910:role/LambdaQuokkaRole",
        "capabilities": [
          "lambda",
          "s3"
        ]
      }
    }
  },
}
```

# Adicionar componentes de segredos a um esquema
<a name="secrets-comp-bp"></a>

Os segredos podem ser usados no CodeCatalyst para armazenar dados confidenciais que podem ser referenciados em fluxos de trabalho. Você pode adicionar um segredo ao seu esquema personalizado e referenciá-lo em seu fluxo de trabalho. Para obter mais informações, consulte [Mascarar dados usando segredos](workflows-secrets.md).

**Como importar o tipo de região de esquemas do Amazon CodeCatalyst**

No arquivo `blueprint.ts`, adicione:

```
import { Secret, SecretDefinition } from '@amazon-codecatalyst/blueprint-component.secrets'
```

**Topics**
+ [Criar um segredo](#comp-create-secrets-bp)
+ [Fazer referência a um segredo em um fluxo de trabalho](#comp-reference-secrets-bp)

## Criar um segredo
<a name="comp-create-secrets-bp"></a>

O exemplo a seguir cria um componente de interface do usuário que solicita que o usuário insira um valor de segredo e uma descrição opcional:

```
export interface Options extends ParentOptions {
    ...
    mySecret: SecretDefinition;
}


export class Blueprint extends ParentBlueprint {
  constructor(options_: Options) {
    new Secret(this, options.secret);
}
```

O componente secreto requer um `name`. O código a seguir é a forma padrão mínima exigida:

```
{
    ...
    "secret": {
        "name": "secretName"
    },

}
```

## Fazer referência a um segredo em um fluxo de trabalho
<a name="comp-reference-secrets-bp"></a>

O esquema de exemplo a seguir cria um segredo e um fluxo de trabalho que faz referência ao valor do segredo. Para obter mais informações, consulte [Fazer referência a um segredo em um fluxo de trabalho](workflows-secrets.using.md#workflows-using-secrets.using-identifier).

```
export interface Options extends ParentOptions {
    ...
/**
*
* @validationRegex /^\w+$/
*/
  username: string;


  password: SecretDefinition;
}


export class Blueprint extends ParentBlueprint {
  constructor(options_: Options) {
    const password = new Secret(this, options_.password);

    const workflowBuilder = new WorkflowBuilder(this, {
      Name: 'my_workflow',
    });


    workflowBuilder.addBuildAction({
      actionName: 'download_files',
      input: {
        Sources: ['WorkflowSource'],
      },
      output: {
        Artifacts: [{ Name: 'download', Files: ['file1'] }],
      },
      steps: [
        `curl -u ${options_.username}:${password.reference} https://example.com`,
      ],
    });

    new Workflow(
      this,
      repo,
      workflowBuilder.getDefinition(),
    );

}
```

Para saber mais sobre como usar segredos no CodeCatalyst, consulte [Mascarar dados usando segredos](workflows-secrets.md).

# Adição de componentes da região a um esquema
<a name="region-comp-bp"></a>

O tipo de região pode ser adicionado à interface de `Options` do seu esquema personalizado para gerar um componente no assistente de esquema; é possível inserir uma ou mais regiões da AWS. O tipo de região pode ser importado do seu esquema base em seu arquivo `blueprint.ts`. Para ter mais informações, consulte [Regiões da AWS](https://aws.amazon.com/about-aws/global-infrastructure/regions_az/).

**Para importar Amazon CodeCatalyst blueprints, digite a região**

No arquivo `blueprint.ts`, adicione:

```
import { Region } from '@amazon-codecatalyst/blueprints.blueprint'
```

O parâmetro de tipo de região é uma matriz de códigos de região da AWS para escolher, ou você pode usar `*` para incluir todas as regiões da AWS compatíveis.

**Topics**
+ [Anotações](#region-annotations-bp)
+ [Exemplos de componentes de região](#region-components-examples)

## Anotações
<a name="region-annotations-bp"></a>

JSDoc tags podem ser adicionadas a cada campo na `Options` interface para personalizar como um campo aparece e se comporta no assistente. Para o tipo de região, as seguintes tags são compatíveis:
+ A anotação `@displayName` pode ser usada para alterar o rótulo do campo no assistente.

  Exemplo: `@displayName AWS Region`
+ A anotação `@placeholder` pode ser usada para alterar o espaço reservado do componente de seleção/seleção múltipla.

  Exemplo: `@placeholder Choose AWS Region`

## Exemplos de componentes de região
<a name="region-components-examples"></a>

### Escolha de uma região de uma lista especificada
<a name="region-specified-list-bp"></a>

```
export interface Options extends ParentOptions {
    ...
  /**
   * @displayName Region
   */
  region: Region<['us-east-1', 'us-east-2', 'us-west-1', 'us-west-2']>;
}
```

### Escolha de uma ou mais regiões de uma lista especificada
<a name="region-specified-list-bp"></a>

```
export interface Options extends ParentOptions {
    ...
  /**
   * @displayName Regions
   */
  multiRegion: Region<['us-east-1', 'us-east-2', 'us-west-1', 'us-west-2']>[];
}
```

### Escolha de uma região da AWS
<a name="region-one-bp"></a>

```
export interface Options extends ParentOptions {
    ...
  /**
   * @displayName Region
   */
  region: Region<['*']>;
}
```

### Escolha de uma ou mais regiões de uma lista especificada
<a name="region-specified-list-bp"></a>

```
export interface Options extends ParentOptions {
    ...
  /**
   * @displayName Regions
   */
  multiRegion: Region<['us-east-1', 'us-east-2', 'us-west-1', 'us-west-2']>[];
}
```

# Adicionar componentes de repositório e código-fonte a um esquema
<a name="comp-repo-source-bp"></a>

Um repositório é usado pelo Amazon CodeCatalyst para armazenar código. O repositório usa um nome como entrada. A maioria dos componentes é armazenada em um repositório, como arquivos de código-fonte, fluxos de trabalho e outros componentes, como ambientes de desenvolvimento gerenciado (MDE). O componente do repositório de origem também exporta componentes usados para gerenciar arquivos e ativos estáticos. Os repositórios têm restrições de nome. Para obter mais informações, consulte [Armazene e colabore no código com repositórios de origem no CodeCatalystArmazenamento e colaboração no código com repositórios de origem](source.md).

```
const repository = new SourceRepository(this, {
  title: 'my-new-repository-title',
});
```

**Para importar os componentes de código-fonte e repositório de esquemas do Amazon CodeCatalyst**

No arquivo `blueprint.ts`, adicione:

```
import {...} from '@caws-blueprint-component/caws-source-repositories'
```

**Topics**
+ [Adicionar um arquivo](#repo-add-file-bp)
+ [Adicionar um arquivo genérico](#repo-add-generic-file-bp)
+ [Copiar arquivos](#repo-copy-file-bp)
+ [Selecionar vários arquivos como destino](#target-multiple-files-bp)
+ [Criação de um novo repositório e adição de arquivos](#repo-code-examples-bp)

## Adicionar um arquivo
<a name="repo-add-file-bp"></a>

Você pode gravar um arquivo de texto em um repositório com o constructo `SourceFile`. A operação é um dos casos de uso mais comuns e usa um repositório, um caminho de arquivo e conteúdo de texto. Se o caminho do arquivo não existir em um repositório, o componente criará todas as pastas necessárias.

```
new SourceFile(repository, `path/to/my/file/in/repo/file.txt`, 'my file contents');
```

**nota**  
Se você gravar dois arquivos no mesmo local no mesmo repositório, a implementação mais recente substituirá a anterior. Você pode usar o recurso para criar camadas de código gerado, o que é especialmente útil para estender o código que os esquemas personalizados podem ter gerado.

## Adicionar um arquivo genérico
<a name="repo-add-generic-file-bp"></a>

Você pode gravar bits arbitrários no repositório. Você pode ler de um buffer e usar o constructo `File`.

```
new File(repository, `path/to/my/file/in/repo/file.img`, new Buffer(...));

new File(repository, `path/to/my/file/in/repo/new-img.img`, new StaticAsset('path/to/image.png').content());
```

## Copiar arquivos
<a name="repo-copy-file-bp"></a>

Você pode começar com o código gerado copiando e colando o código inicial e, depois, gerando mais código sobre essa base. Coloque o código dentro do diretório `static-assets` e, depois, direcione esse código com o constructo `StaticAsset`. Nesse caso, o caminho sempre começa na raiz do diretório `static-assets`.

```
const starterCode = new StaticAsset('path/to/file/file.txt')
const starterCodeText = new StaticAsset('path/to/file/file.txt').toString()
const starterCodeRawContent = new StaticAsset('path/to/image/hello.png').content()

const starterCodePath = new StaticAsset('path/to/image/hello.png').path()
// starterCodePath is equal to 'path/to/image/hello.png'
```

Uma subclasse de `StaticAsset` é `SubstitutionAsset`. A subclasse funciona exatamente da mesma forma, mas, em vez disso, você pode executar uma substituição de mustache no arquivo. Isso pode ser útil para realizar a geração de estilos de copiar e substituir.

A substituição estática de ativos usa um mecanismo de modelos de mustache para renderizar os arquivos estáticos que são implantados no repositório de origem gerado. As regras de modelos de mustache são aplicadas durante a renderização, o que significa que todos os valores são codificados em HTML por padrão. Para renderizar HTML sem escape, use a sintaxe de mustache triplo `{{{name}}}`. Para ter mais informações, consulte as [regras de modelos de mustache](https://github.com/janl/mustache.js?tab=readme-ov-file#variables).

**nota**  
Executar um substituto em arquivos que não são interpretáveis por texto pode produzir erros.

```
const starterCodeText = new SubstitionAsset('path/to/file/file.txt').subsitite({
  'my_variable': 'subbed value1',
  'another_variable': 'subbed value2'
})
```

## Selecionar vários arquivos como destino
<a name="target-multiple-files-bp"></a>

Os ativos estáticos oferecem suporte à segmentação global por meio de uma função estática em `StaticAsset` e das subclasses chamadas `findAll(...)`, o que retorna uma lista de ativos estáticos pré-carregados com caminhos, conteúdos e muito mais. Você pode encadear a lista com constructos `File` para copiar e colar conteúdo no diretório `static-assets`.

```
new File(repository, `path/to/my/file/in/repo/file.img`, new Buffer(...));

new File(repository, `path/to/my/file/in/repo/new-img.img`, new StaticAsset('path/to/image.png').content());
```

## Criação de um novo repositório e adição de arquivos
<a name="repo-code-examples-bp"></a>

Você pode usar um componente de repositório para criar um repositório em um projeto gerado. Depois, você pode adicionar arquivos ou fluxos de trabalho ao repositório criado.

```
import { SourceRepository } from '@amazon-codecatalyst/codecatalyst-source-repositories';
...
const repository = new SourceRepository(this, { title: 'myRepo' });
```

O exemplo a seguir mostra como adicionar arquivos e fluxos de trabalho a um repositório existente:

```
import { SourceFile } from '@amazon-codecatalyst/codecatalyst-source-repositories';
import { Workflow } from '@amazon-codecatalyst/codecatalyst-workflows';
...
new SourceFile(repository, 'README.md', 'This is the content of my readme');
new Workflow(this, repository, {/**...workflowDefinition...**/});
```

A combinação das duas partes do código gera um único repositório chamado `myRepo` com um arquivo de origem `README.md` e um fluxo de trabalho do CodeCatalyst na raiz.

# Adição de componentes de fluxo de trabalho a um esquema
<a name="comp-workflow-bp"></a>

Um fluxo de trabalho é usado pelos projetos do Amazon CodeCatalyst para executar ações com base em gatilhos. Você pode usar componentes de fluxo de trabalho para criar e reunir arquivos YAML do fluxo de trabalho. Para obter mais informações, consulte [Definição do YAML do fluxo de trabalho](workflow-reference.md).

**Para importar componentes de fluxos de trabalho de esquema do Amazon CodeCatalyst**

No arquivo `blueprint.ts`, adicione:

```
import { WorkflowBuilder, Workflow } from '@amazon-codecatalyst/codecatalyst-workflows'
```

**Topics**
+ [Exemplos de componentes de fluxo de trabalho](#comp-workflows-examples-bp)
+ [Conexão a um ambiente](#comp-workflows-connect-env-bp)

## Exemplos de componentes de fluxo de trabalho
<a name="comp-workflows-examples-bp"></a>

### Componente WorkflowBuilder
<a name="comp-workflows-workflowbuilder-bp"></a>

Você pode usar uma classe para criar uma definição de fluxo de trabalho. A definição pode ser dada a um componente do fluxo de trabalho para renderização em um repositório.

```
import { WorkflowBuilder } from '@amazon-codecatalyst/codecatalyst-workflows'

const workflowBuilder = new WorkflowBuilder({} as Blueprint, {
  Name: 'my_workflow',
});

// trigger the workflow on pushes to branch 'main'
workflowBuilder.addBranchTrigger(['main']);

// add a build action
workflowBuilder.addBuildAction({
  // give the action a name
  actionName: 'build_and_do_some_other_stuff',

  // the action pulls from source code
  input: {
    Sources: ['WorkflowSource'],
  },

  // the output attempts to autodiscover test reports, but not in the node modules
  output: {
    AutoDiscoverReports: {
      Enabled: true,
      ReportNamePrefix: AutoDiscovered,
      IncludePaths: ['**/*'],
      ExcludePaths: ['*/node_modules/**/*'],
    },
  },
  // execute some arbitrary steps
  steps: [
    'npm install',
    'npm run myscript',
    'echo hello-world',
  ],
  // add an account connection to the workflow
  environment: convertToWorkflowEnvironment(myEnv),
});
```

### Componente Projen de fluxo de trabalho
<a name="comp-workflows-projen-bp"></a>

O exemplo a seguir mostra como um componente Projen pode ser usado para gravar um YAML de fluxo de trabalho em um repositório:

```
import { Workflow } from '@amazon-codecatalyst/codecatalyst-workflows'

...

const repo = new SourceRepository
const blueprint = this;
const workflowDef = workflowBuilder.getDefinition()

// creates a workflow.yaml at .aws/workflows/${workflowDef.name}.yaml
new Workflow(blueprint, repo, workflowDef);

// can also pass in any object and have it rendered as a yaml. This is unsafe and may not produce a valid workflow
new Workflow(blueprint, repo, {... some object ...});
```

## Conexão a um ambiente
<a name="comp-workflows-connect-env-bp"></a>

Muitos fluxos de trabalho precisam ser executados em uma conexão de conta da AWS. Os fluxos de trabalho lidam com isso permitindo que as ações se conectem a ambientes com especificações de nome de conta e perfil.

```
import { convertToWorkflowEnvironment } from '@amazon-codecatalyst/codecatalyst-workflows'


const myEnv = new Environment(...);

// can be passed into a workflow constructor
const workflowEnvironment = convertToWorkflowEnvironment(myEnv);


// add a build action
workflowBuilder.addBuildAction({
  ...
  // add an account connection to the workflow
  environment: convertToWorkflowEnvironment(myEnv),
});
```

# Adicionar componentes do Ambiente de Desenvolvimento a um esquema
<a name="comp-dev-env-bp"></a>

Ambientes de desenvolvimento gerenciado (MDE) são usados para criar e configurar espaços de trabalho de MDE no CodeCatalyst. O componente gera um arquivo `devfile.yaml`. Para ter mais informações, consulte [Introdução a arquivos de desenvolvimento](https://redhat-developer.github.io/devfile/) e [Edição do repositório devfile para um Ambiente de Desenvolvimento](devenvironment-devfile-moving.md).

```
new Workspace(this, repository, SampleWorkspaces.default);
```

**Como importar componentes de espaços de trabalho de esquema do Amazon CodeCatalyst**

No arquivo `blueprint.ts`, adicione:

```
import {...} from '@amazon-codecatalyst/codecatalyst-workspaces'
```

# Adição de componentes de problema a um esquema
<a name="comp-issues-bp"></a>

No CodeCatalyst, você pode monitorar recursos, tarefas, bugs e qualquer outro trabalho envolvido no projeto. Cada parte do trabalho é mantida em um registro distinto, chamado de problema. Cada problema pode ter uma descrição, um responsável, status e outras propriedades, que você pode pesquisar, agrupar e filtrar. Você pode visualizar os problemas usando as visualizações padrão ou criar suas próprias visualizações com filtragem, classificação ou agrupamento personalizados. Para ter mais informações sobre conceitos relacionados a problemas, consulte [Conceitos de problemas](issues-concepts.md) e [Cotas para edições em CodeCatalyst](issues-quotas.md).

O componente de problema gera uma representação JSON de um problema. O componente usa um campo de ID e a definição do problema como entrada.

**Como importar componentes de problema de esquema do Amazon CodeCatalyst**

No arquivo `blueprint.ts`, adicione:

```
import {...} from '@amazon-codecatalyst/blueprint-component.issues'
```

**Topics**
+ [Exemplos de componentes de problema](#comp-issues-examples-bp)

## Exemplos de componentes de problema
<a name="comp-issues-examples-bp"></a>

### Criar um problema
<a name="comp-issues-create-bp"></a>

```
import { Issue } from '@amazon-codecatalyst/blueprint-component.issues';
...
new Issue(this, 'myFirstIssue', {
  title: 'myFirstIssue',
  content: 'This is an example issue.',
});
```

### Criar um problema de alta prioridade
<a name="comp-issues-high-priority-bp"></a>

```
import { Workflow } from '@amazon-codecatalyst/codecatalyst-workflows'
...
const repo = new SourceRepository
const blueprint = this;
const workflowDef = workflowBuilder.getDefinition()

// Creates a workflow.yaml at .aws/workflows/${workflowDef.name}.yaml
new Workflow(blueprint, repo, workflowDef);

// Can also pass in any object and have it rendered as a yaml. This is unsafe and may not produce a valid workflow
new Workflow(blueprint, repo, {... some object ...});
```

### Criar um problema de baixa prioridade com rótulos
<a name="comp-issues-low-priority-bp"></a>

```
import { Issue } from '@amazon-codecatalyst/blueprint-component.issues';
...
new Issue(this, 'myThirdIssue', {
  title: 'myThirdIssue',
  content: 'This is an example of a low priority issue with a label.',
  priority: 'LOW',
  labels: ['exampleLabel'],
});
```

# Trabalhar com ferramentas e CLI do esquema
<a name="bp-cli"></a>

A [CLI do esquema](https://www.npmjs.com/package/@amazon-codecatalyst/blueprint-util.cli) fornece ferramentas para gerenciar e trabalhar com esquemas personalizados.

**Topics**
+ [Trabalhar com ferramentas de esquema](#working-with-bp-cli)
+ [Ferramenta de upload de imagens](#image-upload-tool)

## Trabalhar com ferramentas de esquema
<a name="working-with-bp-cli"></a>

**Como trabalhar com as ferramentas do esquema**

1. Abra o console do CodeCatalyst em [https://codecatalyst.aws/](https://codecatalyst.aws/).

1. Retome o Ambiente de Desenvolvimento. Para obter mais informações, consulte [Retomar um Ambiente de Desenvolvimento](devenvironment-resume.md).

   Caso você não tenha um Ambiente de Desenvolvimento, primeiro será necessário criar um. Para obter mais informações, consulte [Criar um Ambiente de Desenvolvimento](devenvironment-create.md).

1. Em um terminal em funcionamento, execute o seguinte comando para instalar a CLI do esquema:

   ```
   npm install -g @amazon-codecatalyst/blueprint-util.cli
   ```

1. No arquivo `blueprint.ts`, importe as ferramentas que você deseja usar no seguinte formato:

   ```
   import { <tooling-function-name> } from '@amazon-codecatalyst/blueprint-util.cli/lib/<tooling-folder-name>/<tooling-file-name>;
   ```
**dica**  
É possível acessar o [https://github.com/aws/codecatalyst-blueprints/tree/main/packages/utils/blueprint-cli](https://github.com/aws/codecatalyst-blueprints/tree/main/packages/utils/blueprint-cli) para encontrar o nome da ferramenta que deseja usar.

   **Se quiser usar a ferramenta de upload de imagens, adicione o seguinte ao script:**

   ```
   import { uploadImagePublicly } from '@amazon-codecatalyst/blueprint-util.cli/lib/image-upload-tool/upload-image-to-aws';
   ```

   **Exemplos**
   + **Se quiser usar a função de publicação, adicione o seguinte ao script:**

     ```
     import { publish } from '@amazon-codecatalyst/blueprint-util.cli/lib/publish/publish';
     ```
   + **Se quiser usar a ferramenta de upload de imagens, adicione o seguinte ao script:**

     ```
     import { uploadImagePublicly } from '@amazon-codecatalyst/blueprint-util.cli/lib/image-upload-tool/upload-image-to-aws';
     ```

1. Chame a função.

   **Examples:**
   + **Se quiser usar a função de publicação, adicione o seguinte ao script:**

     ```
     await publish(logger, config.publishEndpoint, {<your publishing options>});
     ```
   + **Se quiser usar a ferramenta de upload de imagens, adicione o seguinte ao script:**

     ```
     const {imageUrl, imageName} = await uploadImagePublicly(logger, 'path/to/image'));
     ```

## Ferramenta de upload de imagens
<a name="image-upload-tool"></a>

A ferramenta de upload de imagens permite fazer upload da própria imagem em um bucket do S3 na conta da AWS e, depois, distribuir essa imagem publicamente por trás do CloudFront. A ferramenta usa um caminho de imagem no armazenamento local (e o nome opcional do bucket) como entrada e exibe o URL para a imagem que está disponível publicamente. Para ter mais informações, consulte [O que é o Amazon CloudFront?](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html) e [O que é o Amazon S3?](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html)

**Como trabalhar com a ferramenta de upload de imagens**

1. Clone o [repositório de esquemas de código aberto no GitHub](https://github.com/aws/codecatalyst-blueprints) que concede acesso ao SDK e a exemplos de esquema. Em um terminal em funcionamento, execute o seguinte comando:

   ```
   git clone https://github.com/aws/codecatalyst-blueprints.git
   ```

1. Execute o seguinte comando para navegar até o repositório de esquemas no GitHub:

   ```
   cd codecatalyst-blueprints
   ```

1. Execute o seguinte comando para instalar dependências:

   ```
   yarn && yarn build
   ```

1. Execute o seguinte comando para garantir que a versão mais recente da CLI do esquema esteja instalada:

   ```
   yarn upgrade @amazon-codecatalyst/blueprint-util.cli
   ```

1. Faça login na conta da AWS com o bucket do S3 no qual você deseja fazer upload da imagem. Para ter mais informações, consulte [Configure the AWS CLI](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-configure.html) e [Sign in through the AWS Command Line Interface](https://docs.aws.amazon.com/signin/latest/userguide/command-line-sign-in.html).

1. Execute o seguinte comando na raiz do repositório do CodeCatalyst para navegar até o diretório com a CLI do esquema:

   ```
   cd packages/utils/blueprint-cli
   ```

1. Execute o seguinte comando para fazer upload da imagem em um bucket S3:

   ```
   yarn blueprint upload-image-public <./path/to/your/image> 
         <optional:optional-bucket-name>
   ```

Um URL para a imagem é gerado. O URL não estará disponível imediatamente, pois requer algum tempo para que a distribuição do CloudFront seja implantada. Confira o status da distribuição para saber o status de implantação mais recente. Para ter mais informações, consulte [Trabalhar com distribuições](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/distribution-working-with.html).

# Avaliar as alterações na interface com testes de snapshot
<a name="testing-bp"></a>

Testes de snapshots gerados em várias configurações do seu esquema são compatíveis.

Os esquemas são compatíveis com o [teste de snapshot](https://jestjs.io/docs/snapshot-testing) em configurações fornecidas por você como autor do esquema. As configurações são substituições parciais, mescladas sobre o arquivo defaults.json na raiz de um esquema. Quando o teste de snapshot é ativado e configurado, o processo de compilação e teste sintetiza as configurações fornecidas e verifica se as saídas sintetizadas não foram alteradas em relação ao snapshot de referência. Para visualizar o código de teste de snapshot, consulte o [repositório GitHub de esquemas do CodeCatalyst](https://github.com/aws/codecatalyst-blueprints/blob/main/packages/utils/projen-blueprint/src/test-snapshot.ts#L12).

**Como habilitar o teste de snapshot**

1. No arquivo `.projenrc.ts`, atualize o objeto de entrada para ProjenBlueprint com os arquivos que você deseja capturar. Por exemplo:

   ```
   {
     ....
     blueprintSnapshotConfiguration: {
       snapshotGlobs: ['**', '!environments/**', '!aws-account-to-environment/**'],
     },
   }
   ```

1. Sintetize novamente o esquema para criar arquivos TypeScript em seu projeto de esquema. Não edite os arquivos de origem, pois eles são mantidos e regenerados pelo Projen. Use o seguinte comando:

   ```
   yarn projen
   ```

1. Navegue até o diretório `src/snapshot-configurations` para ver o arquivo `default-config.json` com um objeto vazio. Atualize ou substitua o arquivo por uma ou mais de suas próprias configurações de teste. Cada configuração de teste é então mesclada com o arquivo `defaults.json` do projeto, sintetizada e comparada aos instantâneos durante o teste. Use o comando a seguir para testar:

   ```
   yarn test
   ```

   A seguinte mensagem é exibida na primeira vez que você usa um comando de teste: `Snapshot Summary › NN snapshots written from 1 test suite`. Os testes subsequentes verificam se a saída sintetizada não foi alterada nos instantâneos e exibem a seguinte mensagem: `Snapshots: NN passed, NN total`.

   Se você alterar intencionalmente seu esquema para produzir uma saída diferente, execute o comando a seguir para atualizar os snapshots de referência:

   ```
   yarn test:update
   ```

Os snapshots esperam que as saídas sintetizadas sejam constantes entre cada execução. Se o seu esquema gerar arquivos que variam, você deve excluir esses arquivos do teste de snapshot. Atualize o objeto `blueprintSnapshotConfiguration` do seu objeto de entrada `ProjenBluerpint` para adicionar a propriedade `snapshotGlobs`. A propriedade `snapshotGlobs` é uma matriz de [globs](https://github.com/isaacs/node-glob#glob-primer) que determina quais arquivos são incluídos ou excluídos do snapshot.

**nota**  
Há uma lista padrão de globs. Se você especificar sua própria lista, talvez seja necessário trazer de volta explicitamente as entradas padrão.