本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。 # 使用 Amazon Q Developer 作為編碼助理，以提高您的生產力 *Ram Kandaswamy，Amazon Web Services* ## 總結 此模式使用 tic-tac-toe 遊戲，示範如何在各種開發任務中套用 Amazon Q Developer。它會產生 tic-tac-toe 遊戲的程式碼做為單頁應用程式 (SPA)，增強其 UI，並建立指令碼來部署應用程式 AWS。 Amazon Q Developer 做為編碼助理，協助加速軟體開發工作流程，並增強開發人員和非開發人員的生產力。無論您的技術專業知識為何，都可協助您為業務問題建立架構和設計解決方案、引導您的工作環境、協助您實作新功能，以及產生測試案例以進行驗證。它使用自然語言指示和 AI 功能，以確保一致的高品質程式碼，並緩解編碼挑戰，無論您的程式設計技能為何。 Amazon Q Developer 的主要優點是能夠讓您擺脫重複的編碼任務。當您使用`@workspace`註釋時，Amazon Q Developer 會擷取整合開發環境 (IDE) 中的所有程式碼檔案、組態和專案結構，並提供量身打造的回應，協助您專注於創意問題解決。您可以花更多時間設計創新解決方案並增強使用者體驗。如果您不是技術，則可以使用 Amazon Q Developer 來簡化工作流程，並與開發團隊更有效地協作。Amazon Q Developer **Explain 程式碼**功能提供詳細說明和摘要，因此您可以導覽複雜的程式碼庫。 此外，Amazon Q Developer 提供與語言無關的方法，可協助初階和中階開發人員擴展技能集。您可以專注於核心概念和商業邏輯，而不是語言特定的語法。當您切換技術時，這會減少學習曲線。 ## 先決條件和限制 **先決條件** + 安裝 Amazon Q Developer 外掛程式的 IDE （例如 WebStorm 或 Visual Studio Code)。如需說明，請參閱[《Amazon Q Developer 文件》中的在 IDE 中安裝 Amazon Q Developer 延伸模組或外掛程式](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/q-in-IDE-setup.html)。 + 使用 Amazon Q Developer 的作用中 AWS 帳戶 設定。如需說明，請參閱 Amazon Q Developer 文件中的[入門](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 Developer 一次只能執行一個開發任務。 + 有些 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)頁面，然後選擇服務的連結。 ## 工具 + 此模式需要 IDE，例如 Visual Studio Code 或 WebStorm。如需支援的 IDEs 清單，請參閱 [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) 是一種開放原始碼工具，可協助您 AWS 服務 透過命令列 shell 中的命令與 互動。 ## 最佳實務 請參閱 AWS 方案指引中的[使用 Amazon Q Developer 進行最佳編碼實務](https://docs.aws.amazon.com/prescriptive-guidance/latest/best-practices-code-generation/best-practices-coding.html)。此外： + 當您向 Amazon Q Developer 提供提示時，請確定您的指示清楚明確。新增程式碼片段和註釋，例如 `@workspace`到提示中，為您的提示提供更多內容。 + 包含相關的程式庫並進行匯入，以避免系統發生衝突或不正確的猜測。 + 如果產生的程式碼不正確或如預期，請使用**提供意見回饋和重新產生**選項。嘗試將提示分成較小的指示。 ## 史詩 ### 設定工作環境 | 任務 | Description | 所需的技能 | | --- | --- | --- | | 建立新專案。 | 若要在工作環境中建立新的專案，請執行下列命令，並接受所有問題的預設設定：
npx create-next-app@latest
| 應用程式開發人員、程式設計師、軟體開發人員 | | 測試基礎應用程式。 | 執行下列命令，並確認基礎應用程式在瀏覽器中成功載入：
npm run dev
| 應用程式開發人員、程式設計師、軟體開發人員 | | 清除基本程式碼。 | 導覽至 `src/app` 資料夾中`page.tsx`的檔案，並刪除預設內容以取得空白頁面。刪除後，檔案應如下所示：
export default function Home() {
  return (

      );
}
| 應用程式開發人員、程式設計師、軟體開發人員 | ### 使用 Amazon Q Developer 設計 tic-tac-toe 遊戲專案 | 任務 | Description | 所需的技能 | | --- | --- | --- | | 取得步驟概觀。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | 應用程式開發人員、程式設計師、軟體開發人員 | | 產生 tic-tac-toe 的程式碼。 | 在聊天面板中，使用 `/dev`命令啟動開發任務，後面接著任務的描述。例如：
/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 會根據您的指示產生程式碼。 | 應用程式開發人員、程式設計師、軟體開發人員 | | 檢查並接受產生的程式碼。 | 目測檢查程式碼，然後選擇**接受程式碼**以自動取代`page.tsx`檔案。如果您遇到問題，請選擇**提供意見回饋並重新產生**並描述您遇到的問題。 | 應用程式開發人員、程式設計師、軟體開發人員 | | 修正 lint 錯誤。 | 範例 tic-tac-toe 遊戲包含網格。Amazon Q Developer 產生的程式碼可能會使用預設類型 `any`。您可以提示 Amazon Q Developer 來新增類型安全，如下所示：
/dev Ensure proper TypeScript typing for the onSquare Click event handler 
to resolve any 'any' type issues.
| 應用程式開發人員、程式設計師、軟體開發人員 | | 新增視覺效果吸引力。 | 您可以將原始需求分成較小的片段。例如，您可以在開發任務中使用下列提示來改善遊戲 UI。此提示可增強串聯樣式表 (CSS) 樣式，並匯出應用程式以進行部署。
/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.
| 應用程式開發人員、程式設計師、軟體開發人員 | | 再次測試。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | 應用程式開發人員、程式設計師、軟體開發人員 | ### 將應用程式部署到 AWS 雲端 | 任務 | Description | 所需的技能 | | --- | --- | --- | | 建立要部署的資料夾和檔案。 | 在工作環境中的專案中，建立部署資料夾和其中的兩個檔案： `pushtos3.sh`和 `cloudformation.yml`：
mkdir deployment && cd deployment
touch pushtos3.sh && chmod +x pushtos3.sh
touch cloudformation.yml
| 應用程式開發人員、程式設計師、軟體開發人員 | | 產生自動化程式碼。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | AWS 管理員、AWS DevOps、應用程式開發人員 | | 產生指令碼內容。 | 若要建立部署指令碼，請使用下列提示：
/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.
| 應用程式開發人員、程式設計師、軟體開發人員 | | 將應用程式部署到 AWS 雲端。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | AWS 管理員、AWS DevOps、雲端架構師、應用程式開發人員 | ## 疑難排解 | 問題 | 解決方案 | | --- | --- | | 組建不會建立單頁應用程式或將其匯出至輸出資料夾。 | 查看 `next.config.mjs` 檔案的內容。如果程式碼具有下列預設組態：
const nextConfig = {};
修改如下：
const nextConfig = {
  output: 'export',
  distDir: 'out',
};
| ## 相關資源 + [建立新的 React 專案](https://react.dev/learn/start-a-new-react-project) (React 文件） + [Amazon Q Developer 概觀](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/what-is.html) (AWS 文件） + [Amazon Q Developer 最佳實務 ](https://docs.aws.amazon.com/prescriptive-guidance/latest/best-practices-code-generation/introduction.html)(AWS 方案指引） + [搭配 JetBrains IDEs 安裝、設定和使用 Amazon Q Developer ](https://www.youtube.com/watch?v=-iQfIhTA4J0&pp=ygUSYW1hem9uIHEgZGV2ZWxvcGVy)(YouTube 影片） + [為命令列安裝 Amazon Q](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-getting-started-installing.html) (AWS 文件）