Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés. # Uso de Amazon Q Developer como asistente de codificación para aumentar la productividad *Ram Kandaswamy, Amazon Web Services* ## Resumen Este patrón utiliza un tic-tac-toe juego para demostrar cómo puedes aplicar Amazon Q Developer en una variedad de tareas de desarrollo. Genera código para un tic-tac-toe juego como una aplicación de una sola página (SPA), mejora su interfaz de usuario y crea scripts para implementar la AWS aplicación. Amazon Q Developer funciona como un asistente de codificación para ayudar a acelerar los flujos de trabajo de desarrollo de software y mejorar la productividad para desarrolladores y para no desarrolladores. Independientemente de sus conocimientos técnicos, le permite crear arquitecturas y diseñar soluciones para problemas empresariales, a reforzar su entorno de trabajo, a implementar características nuevas y a generar casos de prueba para su validación. Utiliza instrucciones en lenguaje natural y funcionalidades de IA para garantizar un código coherente y de alta calidad y mitigar los desafíos de codificación, independientemente de sus habilidades de programación. La ventaja principal de Amazon Q Developer es su capacidad para quitarle de encima las tareas de codificación repetitivas. Cuando utiliza la anotación `@workspace`, Amazon Q Developer ingiere e indexa todos los archivos de código, las configuraciones y la estructura del proyecto en su entorno de desarrollo integrado (IDE) y proporciona respuestas personalizadas para que se centre en la resolución creativa de problemas. Puede dedicar más tiempo a diseñar soluciones innovadoras y a mejorar la experiencia del usuario. Si no tiene conocimientos técnicos, puede utilizar Amazon Q Developer para agilizar los flujos de trabajo y colaborar de manera más eficaz con el equipo de desarrollo. La característica de **explicación del código** de Amazon Q Developer ofrece instrucciones y resúmenes detallados para que pueda navegar por bases de código complejas. Además, Amazon Q Developer ofrece un enfoque independiente del lenguaje que ayuda a los desarrolladores de nivel medio y medio a ampliar sus habilidades. Puede concentrarse en los conceptos básicos y la lógica empresarial en lugar de centrarse en la sintaxis específica del lenguaje. Esto reduce la curva de aprendizaje al cambiar de tecnología. ## Requisitos previos y limitaciones **Requisitos previos ** + IDE (por ejemplo, WebStorm o Visual Studio Code) con el complemento Amazon Q Developer instalado. Para obtener instrucciones, 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) en la documentación de Amazon Q Developer. + Una Cuenta de AWS configuración activa con Amazon Q Developer. Para obtener instrucciones, consulte [Getting started](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/getting-started-q-dev.html) en la documentación de Amazon Q Developer. + **npm** instalado. Para obtener instrucciones, consulte la [documentación de npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm). Este patrón se probó con la versión 10.8 de npm. + AWS Command Line Interface (AWS CLI) instalado. Para obtener instrucciones, consulte la [documentación de AWS CLI](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html). **Limitaciones** + Amazon Q Developer solo puede hacer una tarea de desarrollo a la vez. + Algunas Servicios de AWS no están disponibles en todas Regiones de AWS. Para conocer la disponibilidad de las regiones, consulte [Servicios de AWS by Region](https://aws.amazon.com/about-aws/global-infrastructure/regional-product-services/). Para ver los puntos de conexión específicos, consulte la página [Service endpoints and quotas](https://docs.aws.amazon.com/general/latest/gr/aws-service-information.html) y elija el enlace del servicio. ## Tools (Herramientas) + Este patrón requiere un IDE como Visual Studio Code o WebStorm. Para obtener una lista de los compatibles IDEs, consulte la [documentación para desarrolladores de Amazon Q.](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) es una herramienta de código abierto que le ayuda a interactuar Servicios de AWS mediante los comandos de su shell de línea de comandos. ## Prácticas recomendadas Consulte [las prácticas recomendadas de codificación con Amazon Q Developer](https://docs.aws.amazon.com/prescriptive-guidance/latest/best-practices-code-generation/best-practices-coding.html) en la Guía AWS prescriptiva. Además: + Al enviar peticiones a Amazon Q Developer, asegúrese de que las instrucciones sean claras e inequívocas. Agregue fragmentos de código y anotaciones, por ejemplo, `@workspace` a la petición para proporcionar más contexto a las peticiones. + Incluya las bibliotecas pertinentes e impórtelas para evitar conflictos o conjeturas incorrectas por parte del sistema. + Si el código generado no es exacto o no es el esperado, utilice la opción **Enviar comentarios y regenerar**. Intente dividir las peticiones en instrucciones más pequeñas. ## Epics ### Configuración del entorno de trabajo | Tarea | Descripción | Habilidades requeridas | | --- | --- | --- | | Cree un nuevo proyecto de . | Para crear un proyecto nuevo en el entorno de trabajo, ejecute el comando siguiente y acepte la configuración predeterminada para todas las preguntas:
npx create-next-app@latest
| Desarrollador de aplicaciones, programador, desarrollador de software | | Pruebe la aplicación base. | Ejecute el comando siguiente y confirme que la aplicación base cargó de manera correcta en el navegador:
npm run dev
| Desarrollador de aplicaciones, programador, desarrollador de software | | Limpie el código base. | Vaya al archivo `page.tsx` de la carpeta `src/app` y elimine el contenido predeterminado para obtener una página en blanco. Una vez eliminado, el archivo debe tener el aspecto siguiente:
export default function Home() {
  return (

      );
}
| Desarrollador de aplicaciones, programador, desarrollador de software | ### Usa Amazon Q Developer para diseñar un proyecto de tic-tac-toe juego | Tarea | Descripción | Habilidades requeridas | | --- | --- | --- | | Obtenga información general de los pasos. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | Desarrollador de aplicaciones, programador, desarrollador de software | | Genera código para tic-tac-toe. | En el panel de chat, inicie una tarea de desarrollo mediante el comando `/dev` seguido de la descripción de la tarea. Por ejemplo:
/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.
Amazon Q Developer genera código según sus instrucciones. | Desarrollador de aplicaciones, programador, desarrollador de software | | Inspeccione y acepte el código generado. | Inspeccione visualmente el código y elija **Aceptar código** para reemplazar automáticamente el archivo `page.tsx`.Si tiene problemas, elija **Enviar comentarios y regenerar** y describa el problema que encontró. | Desarrollador de aplicaciones, programador, desarrollador de software | | Corrija los errores de linting. | El tic-tac-toe juego de ejemplo incluye una cuadrícula. El código que genera Amazon Q Developer podría utilizar el tipo predeterminado `any`. Para agregar seguridad tipográfica, haga una petición a Amazon Q Developer de la manera siguiente:
/dev Ensure proper TypeScript typing for the onSquare Click event handler 
to resolve any 'any' type issues.
| Desarrollador de aplicaciones, programador, desarrollador de software | | Agregue atractivo visual. | Puede dividir el requisito original en fragmentos más pequeños. Por ejemplo, puede mejorar la IU del juego con las peticiones siguientes en las tareas de desarrollo. Esta petición mejora los estilos de Cascading Style Sheets (CSS) y exporta la aplicación para su implementación.
/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.
| Desarrollador de aplicaciones, programador, desarrollador de software | | Vuelva a probar. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | Desarrollador de aplicaciones, programador, desarrollador de software | ### Implemente la aplicación en el Nube de AWS | Tarea | Descripción | Habilidades requeridas | | --- | --- | --- | | Cree carpetas y archivos para su implementación. | En el proyecto del entorno de trabajo, cree una carpeta de implementación con dos archivos en su interior: `pushtos3.sh` y `cloudformation.yml`
mkdir deployment && cd deployment
touch pushtos3.sh && chmod +x pushtos3.sh
touch cloudformation.yml
| Desarrollador de aplicaciones, programador, desarrollador de software | | Genere código de automatización. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | Administrador de AWS, AWS DevOps, desarrollador de aplicaciones | | Genere el contenido del script. | Para crear un script de implementación, utilice la petición siguiente:
/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.
| Desarrollador de aplicaciones, programador, desarrollador de software | | Implemente la aplicación en la Nube de AWS. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | Administrador de AWS DevOps, arquitecto de nube, desarrollador de aplicaciones | ## Resolución de problemas | Problema | Solución | | --- | --- | | La creación no crea una aplicación de una sola página ni la exporta a la carpeta de salida. | Mire el contenido del archivo `next.config.mjs`:Si el código tiene la configuración siguiente de manera predeterminada:
const nextConfig = {};
modifíquelo de la manera siguiente:
const nextConfig = {
  output: 'export',
  distDir: 'out',
};
| ## Recursos relacionados + [Creating a new React project](https://react.dev/learn/start-a-new-react-project) (documetación de React) + [Descripción general para desarrolladores de Amazon Q](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/what-is.html) (AWS documentación) + [Prácticas recomendadas para desarrolladores de Amazon Q](https://docs.aws.amazon.com/prescriptive-guidance/latest/best-practices-code-generation/introduction.html) (guía AWS prescriptiva) + [Instalación, configuración y uso de Amazon Q Developer con JetBrains IDEs](https://www.youtube.com/watch?v=-iQfIhTA4J0&pp=ygUSYW1hem9uIHEgZGV2ZWxvcGVy) (YouTube vídeo) + [Instalación de Amazon Q para la línea de comandos](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-getting-started-installing.html) (AWS documentación)