本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 将 Amazon Q 开发者版用作编码助手来提高工作效率
<a name="use-q-developer-as-coding-assistant-to-increase-productivity"></a>

*Ram Kandaswamy，Amazon Web Services*

## Summary
<a name="use-q-developer-as-coding-assistant-to-increase-productivity-summary"></a>

此模式使用 tic-tac-toe游戏来演示如何将 Amazon Q Developer 应用于一系列开发任务。它以单页应用程序 (SPA) 的形式为 tic-tac-toe游戏生成代码，增强其用户界面，并创建用于部署应用程序的脚本。 AWS

Amazon Q 开发者版充当一个编码助手，可帮助加速软件开发工作流，并提高开发人员和非开发人员的工作效率。无论您掌握了多少技术专业知识，它都可以帮助您创建架构、设计业务问题解决方案、引导您的工作环境、帮助您实现新功能，以及生成用于验证的测试案例。它使用自然语言指令和人工智能功能来确保代码的一致性和高质量，并缓解编码挑战，无论您的编程技能如何。

Amazon Q 开发者版的主要优势在于，它能够将您从重复的编码任务中解放出来。当您使用 `@workspace` 注释时，Amazon Q 开发者版会摄取集成式开发环境（IDE）中的所有代码文件、配置和项目结构并为它们编制索引，并提供量身定制的响应，以便帮助您专注于创造性地解决问题。您可以将更多的时间投入到设计创新的解决方案和增强用户体验上。如果并非技术人员，您可以使用 Amazon Q 开发者版来简化工作流，并且更有效地与开发团队进行协作。Amazon Q 开发者版的**解释代码**功能提供了详细的说明和摘要，让您能够浏览复杂的代码库。

此外，Amazon Q 开发者版还提供了一种与语言无关的方法，可帮助初级和中级开发人员扩展他们的技能。这样，您就可以专注于核心概念和业务逻辑，而不是特定于语言的语法。当您切换技术时，这样可以缩短您的学习曲线。

## 先决条件和限制
<a name="use-q-developer-as-coding-assistant-to-increase-productivity-prereqs"></a>

**先决条件**
+ 安装了 Amazon Q Developer 插件的 IDE（例如， WebStorm 或 Visual Studio Code）。有关说明，请参阅 Amazon Q 开发者版文档中的[在 IDE 中安装 Amazon Q 开发者版扩展程序或插件](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/q-in-IDE-setup.html)。
+ Amazon Q Developer 的有效 AWS 账户 设置。有关说明，请参阅 Amazon Q 开发者版文档中的[入门](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/getting-started-q-dev.html)。
+ 已安装 **npm**。有关说明，请参阅 [npm 文档](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)。此模式已在 npm 版本 10.8 中接受了测试。
+ AWS Command Line Interface (AWS CLI) 已安装。有关说明，请参阅 [AWS CLI 文档](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html)。

**限制**
+ Amazon Q 开发者版一次只能执行一项开发任务。
+ 有些 AWS 服务 并非全部可用 AWS 区域。有关区域可用性，请参阅[按区域划分的AWS 服务](https://aws.amazon.com/about-aws/global-infrastructure/regional-product-services/)。有关特定端点，请参阅[服务端点和配额](https://docs.aws.amazon.com/general/latest/gr/aws-service-information.html)页面，然后选择相应服务的链接。

## 工具
<a name="use-q-developer-as-coding-assistant-to-increase-productivity-tools"></a>
+ 这种模式需要一个 IDE，比如 Visual Studio Code 或 WebStorm。有关支持的列表 IDEs，请参阅 [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) 是一个开源工具，可帮助您 AWS 服务 通过命令行 shell 中的命令进行交互。

## 最佳实践
<a name="use-q-developer-as-coding-assistant-to-increase-productivity-best-practices"></a>

请参阅《 AWS 规范性指南》中的 [Amazon Q 开发人员的最佳编码实践](https://docs.aws.amazon.com/prescriptive-guidance/latest/best-practices-code-generation/best-practices-coding.html)。此外：
+ 当您向 Amazon Q 开发者版提供提示时，请确保您的说明清晰、明确。在提示中添加代码片段和注释，例如 `@workspace`，以便为提示提供更多上下文。
+ 包括并导入相关的库，以便避免系统遇到冲突或错误猜测。
+ 如果生成的代码不准确或者不符合预期，请使用**提供反馈并重新生成**选项。尝试将提示分解成更小的说明。

## 操作说明
<a name="use-q-developer-as-coding-assistant-to-increase-productivity-epics"></a>

### 设置工作环境
<a name="set-up-the-working-environment"></a>


| Task | 说明 | 所需技能 | 
| --- | --- | --- | 
| 创建一个新项目。 | 要在工作环境中创建一个新项目，请运行如下命令，并为所有的问题接受默认设置：<pre>npx create-next-app@latest</pre> | 应用程序开发人员、编程人员、软件开发人员 | 
| 测试基本应用程序。 | 运行如下命令，并确认已成功将基本应用程序加载到浏览器中：<pre>npm run dev </pre> | 应用程序开发人员、编程人员、软件开发人员 | 
| 清理基本代码。 | 导航到 `src/app` 文件夹中的 `page.tsx` 文件，并删除默认内容，以便获得一个空白页面。删除之后，此文件应如下所示：<pre>export default function Home() {<br />  return (<div></div><br />      );<br />}</pre> | 应用程序开发人员、编程人员、软件开发人员 | 

### 使用 Amazon Q 开发者设计 tic-tac-toe游戏项目
<a name="use-qdevlong-to-design-a-tic-tac-toe-game-project"></a>


| Task | 说明 | 所需技能 | 
| --- | --- | --- | 
| 获取有关具体步骤的概述。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | 应用程序开发人员、编程人员、软件开发人员 | 
| 为生成代码 tic-tac-toe。 | 在聊天面板中，使用 `/dev` 命令和任务说明，启动一项开发任务。例如：<pre>/dev Create a React-based single-page application  written in TypeScript for a tic-tac-toe game with the following specifications:<br />1. Design an aesthetically pleasing interface with the game grid centered vertically and <br />horizontally on the page. <br />2. Include a heading and clear instructions on how to play the game.<br />3. Implement color-coding for X and O marks to distinguish them easily. </pre>Amazon Q 开发者版会根据您的说明来生成代码。 | 应用程序开发人员、编程人员、软件开发人员 | 
| 检查并接受所生成的代码。 | 目视检查代码，然后选择**接受代码**以便自动替换 `page.tsx` 文件。如果您遇到问题，请选择**提供反馈并重新生成**，然后说明您遇到的问题。 | 应用程序开发人员、编程人员、软件开发人员 | 
| 修复 lint 错误。 | 示例 tic-tac-toe游戏包括一个网格。Amazon Q 开发者版生成的代码可能使用了默认类型 `any`。您可以按如下方式提示 Amazon Q 开发者版，以便添加类型安全：<pre>/dev Ensure proper TypeScript typing for the onSquare Click event handler <br />to resolve any 'any' type issues.</pre> | 应用程序开发人员、编程人员、软件开发人员 | 
| 提高视觉吸引力。 | 您可以将原始要求分解成更小的片段。例如，在开发任务中，您可以使用以下提示来改善游戏界面。这些提示可增强层叠样式表（CSS）样式，并导出应用程序以便进行部署。<pre>/dev Debug and fix any CSS issues to correctly display the game grid and overall layout. <br /><br />Simplify the code by removing game history functionality and related components. <br /><br />Implement static file export to an 'out' directory for easy deployment. The solution <br />should be fully functional, visually appealing, and free of typing errors or layout issues. </pre> | 应用程序开发人员、编程人员、软件开发人员 | 
| 再次进行测试。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | 应用程序开发人员、编程人员、软件开发人员 | 

### 将应用程序部署到 AWS Cloud
<a name="deploy-the-application-to-the-aws-cloud"></a>


| Task | 说明 | 所需技能 | 
| --- | --- | --- | 
| 创建用于部署的文件夹和文件。 | 在工作环境中的项目中，创建一个部署文件夹，并在其中创建两个文件：`pushtos3.sh` 和 `cloudformation.yml`：<pre>mkdir deployment && cd deployment<br />touch pushtos3.sh && chmod +x pushtos3.sh<br />touch cloudformation.yml</pre> | 应用程序开发人员、编程人员、软件开发人员 | 
| 生成自动化代码。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | AWS 管理员、AWS DevOps、应用程序开发者 | 
| 生成脚本内容。 | 要创建部署脚本，请使用如下提示：<pre>/dev Modify the pushtos3 shell script so that it can use AWS CLI commands to create a <br />CloudFormation stack named tictactoe-stack if it does not exist already, and use <br />cloudformation.yml as the source template. Wait for the stack to complete and sync the <br />contents from the out folder to the S3 bucket. Perform invalidation of the CloudFront <br />origin.</pre> | 应用程序开发人员、编程人员、软件开发人员 | 
| 将此应用程序部署到 AWS Cloud。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | AWS 管理员、AWS DevOps、云架构师、应用程序开发人员 | 

## 问题排查
<a name="use-q-developer-as-coding-assistant-to-increase-productivity-troubleshooting"></a>


| 问题 | 解决方案 | 
| --- | --- | 
| 此内部版本不会创建单页应用程序，也不会将其导出到输出文件夹。 | 查看 `next.config.mjs` 文件的内容。如果代码具有如下默认配置：<pre>const nextConfig = {};</pre>按如下所示对其进行修改：<pre>const nextConfig = {<br />  output: 'export',<br />  distDir: 'out',<br />};</pre> | 

## 相关资源
<a name="use-q-developer-as-coding-assistant-to-increase-productivity-resources"></a>
+ [创建新的 React 项目](https://react.dev/learn/start-a-new-react-project)（React 文档）
+ [Amazon Q 开发者概述](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/what-is.html)（AWS 文档）
+ [Amazon Q 开发者最佳实践](https://docs.aws.amazon.com/prescriptive-guidance/latest/best-practices-code-generation/introduction.html)（AWS 规范性指导）
+ 通过以下方式@@ [安装、配置和使用 Amazon Q Devel](https://www.youtube.com/watch?v=-iQfIhTA4J0&pp=ygUSYW1hem9uIHEgZGV2ZWxvcGVy) o YouTube p JetBrains IDEs er（视频）
+ [为命令行安装 Amazon Q](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-getting-started-installing.html)（AWS 文档）