Uso do Amazon Q Developer como um assistente de codificação para aumentar a produtividade

Criar um novo projeto da .

Para criar um novo projeto em seu ambiente de trabalho, execute o comando apresentado a seguir e aceite as configurações padrão para todas as perguntas:

npx create-next-app@latest

Teste a aplicação base.

Execute o comando apresentado a seguir e confirme que a aplicação base foi carregada com êxito no navegador:

npm run dev 

Limpe o código base.

Acesse o arquivo page.tsx, localizado na pasta src/app, e remova o conteúdo padrão para obter uma página em branco. Após a exclusão, o arquivo deve ter a seguinte aparência:

export default function Home() {
  return (<div></div>
      );
}

Obtenha uma visão geral das etapas.

Gere código para tic-tac-toe.

No painel de chat, inicie uma tarefa de desenvolvimento usando o comando /dev seguido da descrição da tarefa. Por exemplo:

/dev Create a React-based single-page application  written in TypeScript for a tic-tac-toe game with the following specifications:
1. Design an aesthetically pleasing interface with the game grid centered vertically and 
horizontally on the page. 
2. Include a heading and clear instructions on how to play the game.
3. Implement color-coding for X and O marks to distinguish them easily. 

O Amazon Q Developer gera código com base nas suas instruções.

Inspecione e aceite o código gerado.

Inspecione visualmente o código e clique em Aceitar código para substituir automaticamente o arquivo page.tsx.

Se houver algum problema, escolha Fornecer feedback e gerar novamente e descreva o que aconteceu.

Corrija os erros de análise de código.

O tic-tac-toe jogo de exemplo inclui uma grade. O código gerado pelo Amazon Q Developer pode usar o tipo padrão any. É possível reforçar a segurança de tipos ao instruir o Amazon Q Developer desta maneira:

/dev Ensure proper TypeScript typing for the onSquare Click event handler 
to resolve any 'any' type issues.

Adicione atratividade visual.

Você pode dividir o requisito original em fragmentos menores. Por exemplo, é possível otimizar a interface do usuário do jogo com os prompts apresentados a seguir para as tarefas de desenvolvimento. Este prompt aprimora os estilos em Cascading Style Sheets (CSS) e exporta a aplicação para implantação.

/dev Debug and fix any CSS issues to correctly display the game grid and overall layout. 

Simplify the code by removing game history functionality and related components. 

Implement static file export to an 'out' directory for easy deployment. The solution 
should be fully functional, visually appealing, and free of typing errors or layout issues. 

Teste novamente.

Crie as pastas e os arquivos necessários para a implantação.

No projeto, em seu ambiente de trabalho, crie uma pasta de implantação e, dentro dela, dois arquivos: pushtos3.sh e cloudformation.yml:

mkdir deployment && cd deployment
touch pushtos3.sh && chmod +x pushtos3.sh
touch cloudformation.yml

Gere o código de automação.

Gere o conteúdo para o script.

Para criar um script de implantação, use o seguinte prompt:

/dev Modify the pushtos3 shell script so that it can use AWS CLI commands to create a 
CloudFormation stack named tictactoe-stack if it does not exist already, and use 
cloudformation.yml as the source template. Wait for the stack to complete and sync the 
contents from the out folder to the S3 bucket. Perform invalidation of the CloudFront 
origin.

Implante a aplicação na Nuvem AWS.