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á.
# Tutorial: Criar e atualizar uma aplicação React
Como autor de esquemas, você pode desenvolver e adicionar esquemas personalizados ao catálogo de esquemas do espaço. Esses esquemas podem ser usados pelos membros do espaço para criar projetos ou adicioná-los a projetos existentes. Você pode continuar fazendo alterações nos esquemas, que são disponibilizadas como atualizações por meio de solicitações pull.
Este tutorial fornece um passo a passo do ponto de vista do autor e do usuário do esquema. O tutorial mostra como criar um esquema de aplicação web de página única do React. O esquema é usado para criar um projeto. Quando o esquema é atualizado com alterações, o projeto criado a partir do esquema incorpora essas alterações por meio de uma solicitação pull.
**Topics**
+ [Pré-requisitos](#blueprint-getting-started-prerequisites)
+ [Etapa 1: criar um esquema personalizado](#react-bluprint-tutorial-create-bp)
+ [Etapa 2: visualizar o fluxo de trabalho de lançamento](#blueprint-getting-started-view-workflow)
+ [Etapa 3: adicionar esquema ao catálogo](#blueprint-getting-started-add-to-catalog)
+ [Etapa 4: criar projeto com esquema](#blueprint-getting-started-create-project)
+ [Etapa 5: atualizar o esquema](#blueprint-getting-started-update-blueprint)
+ [Etapa 6: atualizar a versão publicada do catálogo do esquema para a nova versão](#blueprint-getting-started-update-catalog-version)
+ [Etapa 7: atualizar projeto com a nova versão do esquema](#blueprint-getting-started-update-project)
+ [Etapa 8: visualizar as alterações no projeto](#blueprint-getting-started-view-changes)
## Pré-requisitos
Para criar e atualizar um esquema personalizado, você deve ter concluído as tarefas descritas em [Configuração e login no CodeCatalystConfiguração e login no CodeCatalyst](setting-up-topnode.md) da seguinte forma:
+ Tenha um ID do builder AWS para fazer login no CodeCatalyst.
+ Você deve pertencer a um espaço e ter o perfil **Administrador do espaço** ou **Usuário avançado** atribuído a você nesse espaço. Para ter mais informações, consulte [Criar um espaço](spaces-create.md), [Concessão de permissões de espaço aos usuários](spaces-members.md) e [Perfil de administrador do espaço](ipa-role-types.md#ipa-role-space-admin).
## Etapa 1: criar um esquema personalizado
Quando você cria um esquema personalizado, é criado um projeto do CodeCatalyst que contém o código-fonte e as ferramentas e os recursos de desenvolvimento do esquema. Você desenvolverá, testará e publicará o esquema no projeto.
1. Abra o console do CodeCatalyst em [https://codecatalyst.aws/](https://codecatalyst.aws/).
1. No console do CodeCatalyst, acesse o espaço onde você deseja criar um esquema.
1. Escolha **Configurações** para navegar até as configurações de espaço.
1. Na guia **Configurações de espaço**, escolha **Esquemas** e **Criar esquema**.
1. Atualize os campos no assistente de criação de esquema com os seguintes valores:
+ Em **Nome do esquema**, insira `react-app-blueprint`.
+ Em **Nome de exibição do esquema**, insira `react-app-blueprint`.
1. Se desejar, escolha **Exibir código** para visualizar o código-fonte do esquema. Da mesma forma, escolha **Exibir fluxo de trabalho** para visualizar o fluxo de trabalho que será criado no projeto que cria e publica o esquema.
1. Escolha **Criar esquema**.
1. Depois que o esquema é criado, você é levado ao projeto do esquema. Esse projeto contém o código-fonte do esquema, junto com as ferramentas e os recursos necessários para desenvolver, testar e publicar o esquema. Um fluxo de trabalho de lançamento foi gerado e publicou automaticamente seu esquema no espaço.
1. Agora que o esquema e o projeto do esquema foram criados, a próxima etapa é configurá-los atualizando o código-fonte. Você pode usar Ambientes de Desenvolvimento para abrir e editar o repositório de origem diretamente no navegador.
No painel de navegação, escolha **Código** e **Ambientes de Desenvolvimento**.
1. Escolha **Criar ambiente de desenvolvimento** e **AWS Cloud9 (no navegador)**.
1. Mantenha o restante das configurações padrão e escolha **Criar**.
1. No terminal do AWS Cloud9, acesse o diretório do projeto do esquema e execute o seguinte comando:
```
cd react-app-blueprint
```
1. Uma pasta `static-assets` é criada e preenchida automaticamente quando um esquema é criado. Neste tutorial, você excluirá a pasta padrão e gerará uma nova para um esquema da aplicação react.
Exclua a pasta static-assets executando o seguinte comando:
```
rm -r static-assets
```
O AWS Cloud9 é desenvolvido em uma plataforma baseada em Linux. Se estiver usando um sistema operacional Windows, você poderá usar o seguinte comando:
```
rmdir /s /q static-assets
```
1. Agora que a pasta padrão foi excluída, crie uma pasta `static-assets` para um esquema da aplicação react executando o seguinte comando:
```
npx create-react-app static-assets
```
Se solicitado, insira `y` para continuar.
Uma nova aplicação react foi criada na pasta `static-assets` com os pacotes necessários. As alterações precisam ser enviadas ao repositório de origem remoto do CodeCatalyst.
1. Verifique se você tem as alterações mais recentes e, depois, confirme e envie as alterações para o repositório de origem do CodeCatalyst do esquema executando os seguintes comandos:
```
git pull
```
```
git add .
```
```
git commit -m "Add React app to static-assets"
```
```
git push
```
Quando uma alteração é enviada ao repositório de origem do esquema, o fluxo de trabalho de lançamento é iniciado automaticamente. Esse fluxo de trabalho aumenta a versão do esquema, cria o esquema e o publica no espaço. Na próxima etapa, você acessará a execução do fluxo de trabalho da versão para ver como está.
## Etapa 2: visualizar o fluxo de trabalho de lançamento
1. No console do CodeCatalyst, no painel de navegação, escolha **CI/CD** e **Fluxos de trabalho**.
1. Escolha o fluxo de trabalho **blueprint-release**.
1. O fluxo de trabalho tem ações para criar e publicar o esquema.
1. Em **Última execução**, escolha o link de execução do fluxo de trabalho para visualizar a execução a partir da alteração de código que você fez.
1. Depois que a execução for concluída, a nova versão do esquema será publicada. As versões publicadas do esquema podem ser vistas nas **Configurações** do espaço, mas não podem ser usadas em projetos até serem adicionadas ao catálogo de esquemas do espaço. Na próxima etapa, você adicionará o esquema ao catálogo.
## Etapa 3: adicionar esquema ao catálogo
Adicionar um esquema ao catálogo do espaço o torna disponível para uso em todos os projetos em um espaço. Os membros do espaço podem usar o esquema para criar novos projetos ou adicioná-lo aos projetos existentes.
1. No console do CodeCatalyst, navegue de volta ao espaço.
1. Escolha **Configurações** e **Esquemas**.
1. Escolha **react-app-blueprint** e **Adicionar ao catálogo**.
1. Escolha **Salvar**.
## Etapa 4: criar projeto com esquema
Agora que o esquema foi adicionado ao catálogo, ele pode ser usado em projetos. Nesta etapa, você criará um projeto com o esquema criado. Em uma etapa posterior, você atualizará esse projeto atualizando e publicando uma nova versão do esquema.
1. Escolha a guia **Projetos** e **Criar projeto**.
1. Escolha **Esquemas do espaço** e **react-app-blueprint**.
**nota**
Depois que o esquema for escolhido, você poderá ver o conteúdo do arquivo `README.md` do esquema.
1. Escolha **Próximo**.
1.
**nota**
O conteúdo desse assistente de criação de projeto pode ser configurado no esquema.
Insira o nome do projeto como usuário do esquema. Para este tutorial, insira `react-app-project`. Para obter mais informações, consulte [Desenvolvimento de um esquema personalizado para satisfazer os requisitos do projeto](develop-bp.md).
Depois, você atualizará o esquema e adicionará a nova versão ao catálogo, que será usada para atualizar esse projeto.
## Etapa 5: atualizar o esquema
Depois que um esquema é usado para criar um projeto ou aplicado a projetos existentes, você pode continuar fazendo atualizações como autor do esquema. Nesta etapa, você fará alterações no esquema e publicará automaticamente uma nova versão no espaço. A nova versão pode ser adicionada como a versão do catálogo.
1. Navegue até o projeto **react-app-blueprint** criado em [Tutorial: Criar e atualizar uma aplicação React](#blueprint-getting-started-tutorial).
1. Abra o Ambiente de Desenvolvimento criado em [Tutorial: Criar e atualizar uma aplicação React](#blueprint-getting-started-tutorial).
1. No painel de navegação, escolha **Código** e **Ambientes de desenvolvimento**.
1. Na tabela, localize o Ambiente de Desenvolvimento e escolha **Abrir n AWS Cloud9 (no navegador)**.
1. Quando o fluxo de trabalho de lançamento do esquema foi executado, ele aumentou a versão do esquema atualizando o arquivo `package.json`. Faça essa alteração executando o seguinte comando no terminal do AWS Cloud9:
```
git pull
```
1. Navegue até a pasta `static-assets` executando o seguinte comando:
```
cd /projects/react-app-blueprint/static-assets
```
1. Crie um arquivo `hello-world.txt` na pasta `static-assets` executando o seguinte comando:
```
touch hello-world.txt
```
O AWS Cloud9 é desenvolvido em uma plataforma baseada em Linux. Se estiver usando um sistema operacional Windows, você poderá usar o seguinte comando:
```
echo > hello-world.text
```
1. No painel de navegação à esquerda, clique duas vezes no arquivo `hello-world.txt` para abri-lo no editor e adicione o seguinte conteúdo:
```
Hello, world!
```
Salve o arquivo.
1. Verifique se você tem as alterações mais recentes e, depois, confirme e envie as alterações para o repositório de origem do CodeCatalyst do esquema executando os seguintes comandos:
```
git pull
```
```
git add .
```
```
git commit -m "prettier setup"
```
```
git push
```
O envio das alterações iniciou o fluxo de trabalho de lançamento, que publicará automaticamente a nova versão do esquema no espaço.
## Etapa 6: atualizar a versão publicada do catálogo do esquema para a nova versão
Depois que um esquema é usado para criar um projeto ou aplicado a projetos existentes, você ainda pode atualizar o esquema como autor. Nesta etapa, você fará alterações no esquema e alterará a versão do catálogo do esquema.
1. No console do CodeCatalyst, navegue de volta ao espaço.
1. Escolha **Configurações** e **Esquemas**.
1. Escolha **react-app-blueprint** e **Gerenciar versão do catálogo**.
1. Escolha a nova versão e **Salvar**.
## Etapa 7: atualizar projeto com a nova versão do esquema
Uma nova versão já está disponível no catálogo de esquemas do espaço. Como usuário do esquema, você pode atualizar a versão do projeto criado em [Etapa 4: criar projeto com esquema](#blueprint-getting-started-create-project). Isso garante que você tenha as alterações e correções mais recentes necessárias para atender às práticas recomendadas.
1. No console do CodeCatalyst, navegue até o projeto **react-app-project** criado em [Etapa 4: criar projeto com esquema](#blueprint-getting-started-create-project).
1. No painel de navegação, escolha **Esquemas**.
1. Escolha **Atualizar esquema** na caixa de informações.
1. No painel **Alterações de código** do lado direito, você pode ver as atualizações `hello-world.txt` e `package.json`.
1. Escolha **Aplicar atualização**.
Escolher **Aplicar atualização** cria uma solicitação pull no projeto com as alterações da versão atualizada do esquema. Para fazer as atualizações no projeto, você deve mesclar a solicitação pull. Para obter mais informações, consulte [Revisão de uma solicitação pull](pull-requests-review.md) e [Mesclar uma solicitação pull](pull-requests-merge.md).
1. Na tabela **Esquemas**, encontre o esquema. Na coluna **Status**, escolha **Solicitação pull pendente** e, depois, escolha o link para a solicitação pull aberta.
1. Revise a solicitação pull e escolha **Mesclar**.
1. Escolha **Mesclagem rápida** para manter os valores padrão e, depois, escolha **Mesclar**.
## Etapa 8: visualizar as alterações no projeto
As alterações no esquema agora estão disponíveis em seu projeto depois de [Etapa 7: atualizar projeto com a nova versão do esquema](#blueprint-getting-started-update-project). Como usuário do esquema, você pode visualizar as alterações no repositório de origem.
1. No painel de navegação, escolha **Repositórios de origem** e escolha o nome do repositório de origem criado quando o projeto foi criado.
1. Em **Arquivos**, você pode visualizar o arquivo `hello-world.txt` que foi criado em [Etapa 5: atualizar o esquema](#blueprint-getting-started-update-blueprint).
1. Escolha o `hello-world.txt` para visualizar o conteúdo do arquivo.
O gerenciamento do ciclo de vida fornece aos autores do esquema a capacidade de gerenciar centralmente o ciclo de vida de desenvolvimento de software de cada projeto que contém um esquema específico. Conforme visto neste tutorial, você pode enviar atualizações para o esquema que podem ser incorporadas por projetos que usaram o esquema para criar um projeto ou aplicá-lo a um projeto existente. Para obter mais informações, consulte [Trabalho com o gerenciamento do ciclo de vida como autor do esquema](lifecycle-management-dev.md).