Uso de Amazon Q Developer como asistente de codificación para aumentar la productividad

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

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 

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 (<div></div>
      );
}

Obtenga información general de los pasos.

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.

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

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.

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. 

Vuelva a probar.

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

Genere código de automatización.

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.

Implemente la aplicación en la Nube de AWS.