Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich. # Verwenden Sie Amazon Q Developer als Programmierassistenten, um Ihre Produktivität zu steigern *Ram Kandaswamy, Amazon Web Services* ## Zusammenfassung In diesem Muster wird anhand eines tic-tac-toe Spiels demonstriert, wie Sie Amazon Q Developer für eine Reihe von Entwicklungsaufgaben einsetzen können. Es generiert Code für ein tic-tac-toe Spiel als einseitige Anwendung (SPA), verbessert die Benutzeroberfläche und erstellt Skripts, auf AWS denen die Anwendung bereitgestellt wird. Amazon Q Developer fungiert als Programmierassistent, um Arbeitsabläufe bei der Softwareentwicklung zu beschleunigen und die Produktivität sowohl für Entwickler als auch für Nicht-Entwickler zu steigern. Unabhängig von Ihrem technischen Fachwissen hilft es Ihnen dabei, Architekturen zu erstellen und Lösungen für Geschäftsprobleme zu entwerfen, Ihre Arbeitsumgebung zu optimieren, neue Funktionen zu implementieren und Testfälle zur Validierung zu generieren. Es verwendet Anweisungen in natürlicher Sprache und KI-Funktionen, um einen konsistenten, qualitativ hochwertigen Code zu gewährleisten und Programmierprobleme zu minimieren, unabhängig von Ihren Programmierkenntnissen. Der Hauptvorteil von Amazon Q Developer ist seine Fähigkeit, Sie von sich wiederholenden Codierungsaufgaben zu befreien. Wenn Sie die `@workspace` Anmerkung verwenden, erfasst und indexiert Amazon Q Developer alle Codedateien, Konfigurationen und Projektstrukturen in Ihrer integrierten Entwicklungsumgebung (IDE) und bietet maßgeschneiderte Antworten, damit Sie sich auf die kreative Problemlösung konzentrieren können. Sie können mehr Zeit für die Entwicklung innovativer Lösungen und die Verbesserung der Benutzererfahrung aufwenden. Wenn Sie nicht technisch versiert sind, können Sie Amazon Q Developer verwenden, um Arbeitsabläufe zu optimieren und effektiver mit dem Entwicklungsteam zusammenzuarbeiten. Die Amazon Q Developer **Explain Code-Funktion** bietet detaillierte Anweisungen und Zusammenfassungen, sodass Sie sich in komplexen Codebasen zurechtfinden. Darüber hinaus bietet Amazon Q Developer einen sprachunabhängigen Ansatz, der jüngeren und mittleren Entwicklern hilft, ihre Fähigkeiten zu erweitern. Sie können sich auf Kernkonzepte und Geschäftslogik statt auf die sprachspezifische Syntax konzentrieren. Dies reduziert die Lernkurve, wenn Sie die Technologie wechseln. ## Voraussetzungen und Einschränkungen **Voraussetzungen** + IDE (zum Beispiel WebStorm oder Visual Studio Code) mit installiertem Amazon Q Developer-Plugin. Anweisungen finden Sie unter [Installation der Amazon Q Developer-Erweiterung oder des Amazon Q Developer-Plugins in Ihrer IDE](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/q-in-IDE-setup.html) in der Amazon Q Developer-Dokumentation. + Eine aktive AWS-Konto Einrichtung mit Amazon Q Developer. Anweisungen finden Sie unter [Erste Schritte](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/getting-started-q-dev.html) in der Amazon Q Developer-Dokumentation. + **npm** ist installiert. Anweisungen finden Sie in der [npm-Dokumentation](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm). Dieses Muster wurde mit npm Version 10.8 getestet. + AWS Command Line Interface (AWS CLI) installiert. Anweisungen finden Sie in der [AWS CLI Dokumentation](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html). **Einschränkungen** + Amazon Q Developer kann jeweils nur eine Entwicklungsaufgabe ausführen. + Einige AWS-Services sind nicht in allen verfügbar AWS-Regionen. Informationen zur Verfügbarkeit in den einzelnen Regionen finden Sie [AWS-Services unter Nach Regionen](https://aws.amazon.com/about-aws/global-infrastructure/regional-product-services/). Informationen zu bestimmten Endpunkten finden Sie auf der Seite [Dienstendpunkte und Kontingente](https://docs.aws.amazon.com/general/latest/gr/aws-service-information.html). Wählen Sie dort den Link für den Dienst aus. ## Tools + Für dieses Muster ist eine IDE wie Visual Studio Code oder erforderlich. WebStorm Eine Liste der unterstützten IDEs Produkte finden Sie in der [Amazon Q Developer-Dokumentation](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) ist ein Open-Source-Tool, mit dem Sie AWS-Services über Befehle in Ihrer Befehlszeilen-Shell interagieren können. ## Best Practices Weitere Informationen finden Sie unter [Bewährte Programmierpraktiken mit Amazon Q Developer](https://docs.aws.amazon.com/prescriptive-guidance/latest/best-practices-code-generation/best-practices-coding.html) in AWS Prescriptive Guidance. Darüber hinaus: + Wenn Sie Amazon Q Developer auffordern, stellen Sie sicher, dass Ihre Anweisungen klar und eindeutig sind. Fügen Sie der Aufforderung Codefragmente und Anmerkungen hinzu, `@workspace` um mehr Kontext für Ihre Eingabeaufforderungen bereitzustellen. + Fügen Sie relevante Bibliotheken hinzu und importieren Sie sie, um Konflikte oder falsche Vermutungen durch das System zu vermeiden. + Wenn der generierte Code nicht korrekt oder erwartungsgemäß ist, verwenden Sie die Option **Feedback geben und neu generieren**. Versuchen Sie, die Eingabeaufforderungen in kleinere Anweisungen aufzuteilen. ## Epen ### Richten Sie die Arbeitsumgebung ein | Aufgabe | Description | Erforderliche Fähigkeiten | | --- | --- | --- | | Erstellt ein neues Projekt. | Um ein neues Projekt in Ihrer Arbeitsumgebung zu erstellen, führen Sie den folgenden Befehl aus und akzeptieren Sie die Standardeinstellungen für alle Fragen:
npx create-next-app@latest
| App-Entwickler, Programmierer, Softwareentwickler | | Testen Sie die Basisanwendung. | Führen Sie den folgenden Befehl aus und vergewissern Sie sich, dass die Basisanwendung erfolgreich im Browser geladen wurde:
npm run dev
| App-Entwickler, Programmierer, Softwareentwickler | | Bereinigen Sie den Basiscode. | Navigieren Sie zu der `page.tsx` Datei im `src/app` Ordner und löschen Sie den Standardinhalt, um eine leere Seite zu erhalten. Nach dem Löschen sollte die Datei wie folgt aussehen:
export default function Home() {
  return (

      );
}
| App-Entwickler, Programmierer, Softwareentwickler | ### Verwenden Sie Amazon Q Developer, um ein tic-tac-toe Spieleprojekt zu entwerfen | Aufgabe | Description | Erforderliche Fähigkeiten | | --- | --- | --- | | Verschaffen Sie sich einen Überblick über die Schritte. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | App-Entwickler, Programmierer, Softwareentwickler | | Code generieren für tic-tac-toe. | Starten Sie im Chat-Panel eine Entwicklungsaufgabe, indem Sie den `/dev` Befehl gefolgt von der Beschreibung der Aufgabe verwenden. Beispiel:
/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 generiert Code auf der Grundlage Ihrer Anweisungen. | App-Entwickler, Programmierer, Softwareentwickler | | Untersuchen und akzeptieren Sie den generierten Code. | Untersuchen Sie den Code visuell und wählen Sie **Code akzeptieren**, um die `page.tsx` Datei automatisch zu ersetzen.
Wenn Sie auf Probleme stoßen, wählen Sie **Feedback geben und erneut generieren** und beschreiben Sie das aufgetretene Problem. | App-Entwickler, Programmierer, Softwareentwickler | | Korrigieren Sie Lint-Fehler. | Das tic-tac-toe Beispielspiel enthält ein Raster. Der Code, den Amazon Q Developer generiert, verwendet möglicherweise den Standardtyp`any`. Sie können Typsicherheit hinzufügen, indem Sie Amazon Q Developer wie folgt auffordern:
/dev Ensure proper TypeScript typing for the onSquare Click event handler 
to resolve any 'any' type issues.
| App-Entwickler, Programmierer, Softwareentwickler | | Fügen Sie visuellen Reiz hinzu. | Sie können die ursprüngliche Anforderung in kleinere Fragmente aufteilen. Beispielsweise kannst du die Benutzeroberfläche des Spiels mit den folgenden Eingabeaufforderungen in den Entwickleraufgaben verbessern. Diese Aufforderung verbessert die CSS-Stile (Cascading Style Sheets) und exportiert die App zur Bereitstellung.
/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.
| App-Entwickler, Programmierer, Softwareentwickler | | Testen Sie erneut. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | App-Entwickler, Programmierer, Softwareentwickler | ### Stellen Sie die Anwendung auf dem bereit AWS Cloud | Aufgabe | Description | Erforderliche Fähigkeiten | | --- | --- | --- | | Erstellen Sie Ordner und Dateien für die Bereitstellung. | Erstellen Sie im Projekt in Ihrer Arbeitsumgebung einen Bereitstellungsordner und zwei darin enthaltene Dateien: `pushtos3.sh` und`cloudformation.yml`:
mkdir deployment && cd deployment
touch pushtos3.sh && chmod +x pushtos3.sh
touch cloudformation.yml
| App-Entwickler, Programmierer, Softwareentwickler | | Generieren Sie Automatisierungscode. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | AWS-Administrator, AWS DevOps, App-Entwickler | | Generieren Sie Skriptinhalte. | Verwenden Sie die folgende Eingabeaufforderung, um ein Bereitstellungsskript zu erstellen:
/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.
| App-Entwickler, Programmierer, Softwareentwickler | | Stellen Sie die Anwendung auf dem AWS Cloud bereit. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | AWS-Administrator DevOps, AWS, Cloud-Architekt, App-Entwickler | ## Fehlerbehebung | Problem | Lösung | | --- | --- | | Der Build erstellt keine einseitige Anwendung und exportiert sie auch nicht in den Ausgabeordner. | Sehen Sie sich den Inhalt der `next.config.mjs` Datei an.
Wenn der Code die folgende Standardkonfiguration hat:
const nextConfig = {};

ändere ihn wie folgt:
const nextConfig = {
  output: 'export',
  distDir: 'out',
};
| ## Zugehörige Ressourcen + [Ein neues React-Projekt erstellen](https://react.dev/learn/start-a-new-react-project) (React-Dokumentation) + [Überblick über Amazon Q Developer](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/what-is.html) (AWS Dokumentation) + [Bewährte Methoden für Amazon Q Developer](https://docs.aws.amazon.com/prescriptive-guidance/latest/best-practices-code-generation/introduction.html) (AWS Prescriptive Guidance) + [Installation, Konfiguration und Verwendung von Amazon Q Developer mit JetBrains IDEs](https://www.youtube.com/watch?v=-iQfIhTA4J0&pp=ygUSYW1hem9uIHEgZGV2ZWxvcGVy) (YouTube Video) + [Installation von Amazon Q für die Befehlszeile](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-getting-started-installing.html) (AWS Dokumentation)