Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra. # Utilisez Amazon Q Developer comme assistant de codage pour augmenter votre productivité *Ram Kandaswamy, Amazon Web Services* ## Résumé Ce modèle utilise un tic-tac-toe jeu pour montrer comment vous pouvez appliquer Amazon Q Developer à un large éventail de tâches de développement. Il génère le code d'un tic-tac-toe jeu sous la forme d'une application monopage (SPA), améliore son interface utilisateur et crée des scripts pour déployer l' AWS application. Amazon Q Developer fonctionne comme un assistant de codage pour accélérer les flux de travail de développement logiciel et améliorer la productivité des développeurs et des non-développeurs. Quelle que soit votre expertise technique, il vous aide à créer des architectures et à concevoir des solutions aux problèmes commerciaux, à démarrer votre environnement de travail, à implémenter de nouvelles fonctionnalités et à générer des cas de test à des fins de validation. Il utilise des instructions en langage naturel et des fonctionnalités d'intelligence artificielle pour garantir un code cohérent et de haute qualité et pour atténuer les difficultés de codage, quelles que soient vos compétences en programmation. Le principal avantage d'Amazon Q Developer est sa capacité à vous libérer des tâches de codage répétitives. Lorsque vous utilisez l'`@workspace`annotation, Amazon Q Developer ingère et indexe tous les fichiers de code, les configurations et la structure de projet dans votre environnement de développement intégré (IDE), et fournit des réponses personnalisées pour vous aider à vous concentrer sur la résolution créative des problèmes. Vous pouvez consacrer plus de temps à la conception de solutions innovantes et à l'amélioration de l'expérience utilisateur. Si vous n'êtes pas technicien, vous pouvez utiliser Amazon Q Developer pour rationaliser les flux de travail et collaborer plus efficacement avec l'équipe de développement. La fonctionnalité Amazon Q Developer **Explain code** propose des instructions détaillées et des résumés, afin que vous puissiez naviguer dans des bases de code complexes. En outre, Amazon Q Developer propose une approche indépendante de la langue qui aide les développeurs de niveau junior et intermédiaire à développer leurs compétences. Vous pouvez vous concentrer sur les concepts de base et la logique métier plutôt que sur la syntaxe spécifique au langage. Cela réduit la courbe d'apprentissage lorsque vous changez de technologie. ## Conditions préalables et limitations **Conditions préalables** + IDE (par exemple, WebStorm ou Visual Studio Code) avec le plug-in Amazon Q Developer installé. Pour obtenir des instructions, consultez [la section Installation de l'extension ou du plugin Amazon Q Developer dans votre IDE](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/q-in-IDE-setup.html) dans la documentation Amazon Q Developer. + Une Compte AWS configuration active avec Amazon Q Developer. Pour obtenir des instructions, consultez [Getting started](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/getting-started-q-dev.html) dans la documentation Amazon Q Developer. + **npm** installé. Pour obtenir des instructions, consultez la [documentation npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm). Ce modèle a été testé avec la version 10.8 de npm. + AWS Command Line Interface (AWS CLI) installé. Pour obtenir des instructions, consultez la [AWS CLI documentation](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html). **Limites** + Amazon Q Developer ne peut effectuer qu'une seule tâche de développement à la fois. + Certains Services AWS ne sont pas disponibles du tout Régions AWS. Pour connaître la disponibilité par région, voir [Services AWS par région](https://aws.amazon.com/about-aws/global-infrastructure/regional-product-services/). Pour des points de terminaison spécifiques, consultez la page [Points de terminaison et quotas du service](https://docs.aws.amazon.com/general/latest/gr/aws-service-information.html), puis choisissez le lien vers le service. ## Outils + Ce modèle nécessite un IDE tel que Visual Studio Code ou WebStorm. Pour obtenir la liste des produits pris en charge IDEs, consultez la [documentation 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) est un outil open source qui vous permet d'interagir Services AWS par le biais de commandes dans votre interface de ligne de commande. ## Bonnes pratiques Consultez les [meilleures pratiques de codage avec Amazon Q Developer](https://docs.aws.amazon.com/prescriptive-guidance/latest/best-practices-code-generation/best-practices-coding.html) dans les directives AWS prescriptives. En outre : + Lorsque vous envoyez des instructions à Amazon Q Developer, assurez-vous que vos instructions sont claires et sans ambiguïté. Ajoutez des extraits de code et des annotations, par exemple `@workspace` à l'invite, pour fournir plus de contexte à vos invites. + Incluez les bibliothèques pertinentes et importez-les pour éviter les conflits ou les suppositions incorrectes du système. + Si le code généré n'est pas précis ou ne correspond pas aux attentes, utilisez l'option **Fournir des commentaires et régénérer**. Essayez de diviser les instructions en instructions plus petites. ## Épopées ### Configuration de l'environnement de travail | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Crée un projet. | Pour créer un nouveau projet dans votre environnement de travail, exécutez la commande suivante et acceptez les paramètres par défaut pour toutes les questions :
npx create-next-app@latest
| Développeur d'applications, programmeur, développeur de logiciels | | Testez l'application de base. | Exécutez la commande suivante et vérifiez que l'application de base se charge correctement dans le navigateur :
npm run dev
| Développeur d'applications, programmeur, développeur de logiciels | | Nettoyez le code de base. | Accédez au `page.tsx` fichier dans le `src/app` dossier et supprimez le contenu par défaut pour obtenir une page blanche. Après suppression, le fichier doit ressembler à ceci :
export default function Home() {
  return (

      );
}
| Développeur d'applications, programmeur, développeur de logiciels | ### Utilisez Amazon Q Developer pour concevoir un projet de tic-tac-toe jeu | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Obtenez une vue d'ensemble des étapes. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | Développeur d'applications, programmeur, développeur de logiciels | | Générez du code pour tic-tac-toe. | Dans le panneau de discussion, lancez une tâche de développement à l'aide de la `/dev` commande suivie de la description de la tâche. Par exemple :
/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 génère du code en fonction de vos instructions. | Développeur d'applications, programmeur, développeur de logiciels | | Inspectez et acceptez le code généré. | Inspectez visuellement le code, puis choisissez **Accepter le code** pour remplacer automatiquement le `page.tsx` fichier.Si vous rencontrez des problèmes, choisissez **Fournir des commentaires et régénérer** et décrivez le problème que vous avez rencontré. | Développeur d'applications, programmeur, développeur de logiciels | | Corrigez les erreurs liées à la peluche. | L'exemple de tic-tac-toe jeu inclut une grille. Le code généré par Amazon Q Developer peut utiliser le type par défaut`any`. Vous pouvez ajouter la sécurité des types en demandant à Amazon Q Developer de la manière suivante :
/dev Ensure proper TypeScript typing for the onSquare Click event handler 
to resolve any 'any' type issues.
| Développeur d'applications, programmeur, développeur de logiciels | | Ajoutez un attrait visuel. | Vous pouvez diviser l'exigence initiale en fragments plus petits. Par exemple, vous pouvez améliorer l'interface utilisateur du jeu en utilisant les instructions suivantes dans les tâches de développement. Cette invite améliore les styles des feuilles de style en cascade (CSS) et exporte l'application en vue de son déploiement.
/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.
| Développeur d'applications, programmeur, développeur de logiciels | | Testez à nouveau. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | Développeur d'applications, programmeur, développeur de logiciels | ### Déployez l'application sur AWS Cloud | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Créez des dossiers et des fichiers pour le déploiement. | Dans le projet, dans votre environnement de travail, créez un dossier de déploiement et deux fichiers qu'il contient : `pushtos3.sh` et `cloudformation.yml` :
mkdir deployment && cd deployment
touch pushtos3.sh && chmod +x pushtos3.sh
touch cloudformation.yml
| Développeur d'applications, programmeur, développeur de logiciels | | Générez du code d'automatisation. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | Administrateur AWS, AWS DevOps, développeur d'applications | | Générez du contenu de script. | Pour créer un script de déploiement, utilisez l'invite suivante :
/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.
| Développeur d'applications, programmeur, développeur de logiciels | | Déployez l'application sur AWS Cloud. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | Administrateur AWS, AWS DevOps, architecte cloud, développeur d'applications | ## Résolution des problèmes | Problème | Solution | | --- | --- | | La version ne crée pas d'application d'une seule page et ne l'exporte pas vers le dossier de sortie. | Regardez le contenu du `next.config.mjs` fichier.Si le code possède la configuration par défaut suivante :
const nextConfig = {};
modifiez-le comme suit :
const nextConfig = {
  output: 'export',
  distDir: 'out',
};
| ## Ressources connexes + [Création d'un nouveau projet React](https://react.dev/learn/start-a-new-react-project) (documentation React) + [Présentation d'Amazon Q Developer](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/what-is.html) (AWS documentation) + [Bonnes pratiques pour les développeurs Amazon Q](https://docs.aws.amazon.com/prescriptive-guidance/latest/best-practices-code-generation/introduction.html) (conseils AWS prescriptifs) + [Installation, configuration et utilisation d'Amazon Q Developer avec JetBrains IDEs](https://www.youtube.com/watch?v=-iQfIhTA4J0&pp=ygUSYW1hem9uIHEgZGV2ZWxvcGVy) (YouTube vidéo) + [Installation d'Amazon Q pour la ligne de commande](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-getting-started-installing.html) (AWS documentation)