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á. # Uso do Amazon Q Developer como um assistente de codificação para aumentar a produtividade *Ram Kandaswamy, Amazon Web Services* ## Resumo Esse padrão usa um tic-tac-toe jogo para demonstrar como você pode aplicar o Amazon Q Developer em uma variedade de tarefas de desenvolvimento. Ele gera código para um tic-tac-toe jogo como um aplicativo de página única (SPA), aprimora sua interface de usuário e cria scripts para implantar o aplicativo. AWS O Amazon Q Developer funciona como um assistente de codificação para impulsionar os fluxos de trabalho de desenvolvimento de software e aumentar a produtividade tanto de desenvolvedores quanto de usuários sem experiência em programação. Independentemente do seu conhecimento técnico, a solução auxilia na criação de arquiteturas e na elaboração de soluções para problemas empresariais, configura seu ambiente de trabalho, ajuda na implementação de novos recursos e gera casos de testes para validação. A solução usa instruções em linguagem natural e funcionalidades de IA para garantir código consistente e de alta qualidade, além de mitigar desafios relacionados à codificação, independentemente das suas habilidades de programação. A principal vantagem do Amazon Q Developer está na capacidade de poupar você de tarefas de codificação repetitivas. Quando você usa a anotação `@workspace`, o Amazon Q Developer ingere e indexa todos os arquivos de codificação, as configurações e a estrutura do projeto no seu ambiente de desenvolvimento integrado (IDE), fornecendo respostas personalizadas para apoiar sua criatividade na resolução de problemas. Você pode dedicar mais tempo a projetar soluções inovadoras e aprimorar a experiência do usuário. Caso não tenha experiência técnica, você pode recorrer ao Amazon Q Developer para otimizar fluxos de trabalho e trabalhar melhor com a equipe de desenvolvimento. O recurso **Explicar códigos** do Amazon Q Developer disponibiliza instruções detalhadas e resumos, permitindo que você navegue por bases de codificação complexas. Além disso, o Amazon Q Developer oferece uma abordagem que não depende da linguagem para ajudar desenvolvedores iniciantes e intermediários a desenvolver novas habilidades. Você pode se concentrar nos conceitos principais e na lógica de negócio, em vez de lidar com a sintaxe própria de cada linguagem. Isso reduz a curva de aprendizado ao migrar entre tecnologias. ## Pré-requisitos e limitações **Pré-requisitos ** + IDE (por exemplo, WebStorm ou Visual Studio Code) com o plug-in Amazon Q Developer instalado. Para obter instruções, consulte [Installing the Amazon Q Developer extension or plugin in your IDE](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/q-in-IDE-setup.html) na documentação do Amazon Q Developer. + Uma Conta da AWS configuração ativa com o Amazon Q Developer. Para obter instruções, consulte [Getting started](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/getting-started-q-dev.html) na documentação do Amazon Q Developer. + **npm** instalado. Para obter instruções, consulte a [documentação do npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm). Este padrão foi testado com a versão 10.8 do npm. + AWS Command Line Interface (AWS CLI) instalado. Para obter instruções, consulte a [documentação do AWS CLI](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html). **Limitações** + O Amazon Q Developer consegue executar apenas uma tarefa de desenvolvimento por vez. + Alguns Serviços da AWS não estão disponíveis em todos Regiões da AWS. Para conferir a disponibilidade de uma região, consulte [Serviços da AWS by Region](https://aws.amazon.com/about-aws/global-infrastructure/regional-product-services/). Para endpoints específicos, consulte a página [Cotas e endpoints de serviços](https://docs.aws.amazon.com/general/latest/gr/aws-service-information.html) e clique no link correspondente ao serviço desejado. ## Ferramentas + Esse padrão requer um IDE, como o Visual Studio Code ou WebStorm. Para obter uma lista dos compatíveis IDEs, consulte a [documentação do Amazon Q Developer](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/q-in-IDE.html#supported-ides-features). + [AWS Command Line Interface (AWS CLI)](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html) é uma ferramenta de código aberto que ajuda você a interagir Serviços da AWS por meio de comandos em seu shell de linha de comando. ## Práticas recomendadas Consulte [as melhores práticas de codificação com o Amazon Q Developer](https://docs.aws.amazon.com/prescriptive-guidance/latest/best-practices-code-generation/best-practices-coding.html) na orientação AWS prescritiva. Além disso: + Ao fornecer prompts ao Amazon Q Developer, certifique-se de que suas instruções sejam claras e inequívocas. Inclua trechos do código e anotações como `@workspace` no prompt para fornecer mais contexto aos prompts. + Inclua as bibliotecas relevantes e importe-as para evitar conflitos ou interpretações incorretas por parte do sistema. + Caso o código gerado não seja preciso ou não corresponda ao esperado, use a opção **Fornecer feedback e gerar novamente**. Tente dividir os prompts em instruções menores. ## Épicos ### Configuração do ambiente de trabalho | Tarefa | Description | Habilidades necessárias | | --- | --- | --- | | 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
| Desenvolvedor de aplicações, programador e desenvolvedor de software | | 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
| Desenvolvedor de aplicações, programador e desenvolvedor de software | | 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 (

      );
}
| Desenvolvedor de aplicações, programador e desenvolvedor de software | ### Use o Amazon Q Developer para criar um projeto de tic-tac-toe jogo | Tarefa | Description | Habilidades necessárias | | --- | --- | --- | | Obtenha uma visão geral das etapas. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | Desenvolvedor de aplicações, programador e desenvolvedor de software | | 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. | Desenvolvedor de aplicações, programador e desenvolvedor de software | | 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. | Desenvolvedor de aplicações, programador e desenvolvedor de software | | 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.
| Desenvolvedor de aplicações, programador e desenvolvedor de software | | 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.
| Desenvolvedor de aplicações, programador e desenvolvedor de software | | Teste novamente. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | Desenvolvedor de aplicações, programador e desenvolvedor de software | ### Implante o aplicativo no Nuvem AWS | Tarefa | Description | Habilidades necessárias | | --- | --- | --- | | 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
| Desenvolvedor de aplicações, programador e desenvolvedor de software | | Gere o código de automação. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | Administrador da AWS, AWS DevOps, desenvolvedor de aplicativos | | 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.
| Desenvolvedor de aplicações, programador e desenvolvedor de software | | Implante a aplicação na Nuvem AWS. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | Administrador da AWS, AWS DevOps, arquiteto de nuvem, desenvolvedor de aplicativos | ## Solução de problemas | Problema | Solução | | --- | --- | | A compilação não cria uma aplicação de página única nem a exporta para a pasta de saída. | Verifique o conteúdo do arquivo `next.config.mjs`.Se o código estiver com a seguinte configuração padrão:
const nextConfig = {};
modifique-o da seguinte maneira:
const nextConfig = {
  output: 'export',
  distDir: 'out',
};
| ## Recursos relacionados + [Creating a new React project](https://react.dev/learn/start-a-new-react-project) (documentação do React) + [Visão geral do Amazon Q Developer](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/what-is.html) (AWS documentação) + [Melhores práticas para desenvolvedores do Amazon Q](https://docs.aws.amazon.com/prescriptive-guidance/latest/best-practices-code-generation/introduction.html) (AWS orientação prescritiva) + [Instalando, configurando e usando o Amazon Q Developer com JetBrains IDEs](https://www.youtube.com/watch?v=-iQfIhTA4J0&pp=ygUSYW1hem9uIHEgZGV2ZWxvcGVy) (YouTube vídeo) + [Instalando o Amazon Q para a linha de comando](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-getting-started-installing.html) (AWS documentação)