Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris. # Gunakan Amazon Q Developer sebagai asisten pengkodean untuk meningkatkan produktivitas Anda *Ram Kandaswamy, Amazon Web Services* ## Ringkasan Pola ini menggunakan tic-tac-toe game untuk menunjukkan bagaimana Anda dapat menerapkan Amazon Q Developer di berbagai tugas pengembangan. Ini menghasilkan kode untuk tic-tac-toe game sebagai aplikasi satu halaman (SPA), meningkatkan UI, dan membuat skrip untuk menyebarkan aplikasi. AWS Amazon Q Developer berfungsi sebagai asisten pengkodean untuk membantu mempercepat alur kerja pengembangan perangkat lunak dan meningkatkan produktivitas bagi pengembang dan non-pengembang. Terlepas dari keahlian teknis Anda, ini membantu Anda membuat arsitektur dan solusi desain untuk masalah bisnis, bootstrap lingkungan kerja Anda, membantu Anda menerapkan fitur baru, dan menghasilkan kasus uji untuk validasi. Ini menggunakan instruksi bahasa alami dan kemampuan AI untuk memastikan kode yang konsisten dan berkualitas tinggi dan untuk mengurangi tantangan pengkodean terlepas dari keterampilan pemrograman Anda. Keuntungan utama Amazon Q Developer adalah kemampuannya untuk membebaskan Anda dari tugas pengkodean berulang. Saat Anda menggunakan `@workspace` anotasi, Amazon Q Developer menyerap dan mengindeks semua file kode, konfigurasi, dan struktur proyek di lingkungan pengembangan terintegrasi (IDE) Anda, dan memberikan respons yang disesuaikan untuk membantu Anda fokus pada pemecahan masalah secara kreatif. Anda dapat mendedikasikan lebih banyak waktu untuk merancang solusi inovatif dan meningkatkan pengalaman pengguna. Jika Anda tidak teknis, Anda dapat menggunakan Amazon Q Developer untuk merampingkan alur kerja dan berkolaborasi secara lebih efektif dengan tim pengembangan. Fitur **kode Amazon Q Developer Explain** menawarkan instruksi dan ringkasan terperinci, sehingga Anda dapat menavigasi basis kode yang kompleks. Selain itu, Amazon Q Developer menyediakan pendekatan agnostik bahasa yang membantu pengembang tingkat junior dan menengah memperluas keahlian mereka. Anda dapat berkonsentrasi pada konsep inti dan logika bisnis alih-alih sintaks khusus bahasa. Ini mengurangi kurva belajar saat Anda beralih teknologi. ## Prasyarat dan batasan **Prasyarat** + IDE (misalnya, WebStorm atau Visual Studio Code) dengan plugin Amazon Q Developer diinstal. Untuk petunjuk, lihat [Menginstal ekstensi atau plugin Amazon Q Developer di IDE Anda](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/q-in-IDE-setup.html) di dokumentasi Amazon Q Developer. + Akun AWS Pengaturan aktif dengan Pengembang Amazon Q. Untuk petunjuknya, lihat [Memulai](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/getting-started-q-dev.html) dalam dokumentasi Pengembang Amazon Q. + **npm** diinstal. Untuk petunjuk, lihat [dokumentasi npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm). Pola ini diuji dengan npm versi 10.8. + AWS Command Line Interface (AWS CLI) diinstal. Untuk instruksi, lihat [AWS CLI dokumentasi](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html). **Batasan** + Amazon Q Developer hanya dapat melakukan satu tugas pengembangan pada satu waktu. + Beberapa Layanan AWS tidak tersedia di semua Wilayah AWS. Untuk ketersediaan Wilayah, lihat [Layanan AWS berdasarkan Wilayah](https://aws.amazon.com/about-aws/global-infrastructure/regional-product-services/). Untuk titik akhir tertentu, lihat halaman [titik akhir dan kuota Layanan](https://docs.aws.amazon.com/general/latest/gr/aws-service-information.html), dan pilih tautan untuk layanan. ## Alat + Pola ini membutuhkan IDE seperti Visual Studio Code atau WebStorm. Untuk daftar yang didukung IDEs, lihat [dokumentasi Pengembang 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) adalah alat open source yang membantu Anda berinteraksi Layanan AWS melalui perintah di shell baris perintah Anda. ## Praktik terbaik Lihat [Praktik pengkodean terbaik dengan Pengembang Amazon Q](https://docs.aws.amazon.com/prescriptive-guidance/latest/best-practices-code-generation/best-practices-coding.html) di Panduan AWS Preskriptif. Selain itu: + Saat Anda memberikan petunjuk kepada Amazon Q Developer, pastikan instruksi Anda jelas dan tidak ambigu. Tambahkan cuplikan kode dan anotasi seperti `@workspace` ke prompt untuk memberikan lebih banyak konteks untuk permintaan Anda. + Sertakan pustaka yang relevan dan impor untuk menghindari konflik atau tebakan yang salah oleh sistem. + Jika kode yang dihasilkan tidak akurat atau seperti yang diharapkan, gunakan opsi **Berikan umpan balik & regenerasi**. Coba pecahkan petunjuk menjadi instruksi yang lebih kecil. ## Epik ### Mengatur lingkungan kerja | Tugas | Deskripsi | Keterampilan yang dibutuhkan | | --- | --- | --- | | Buat proyek baru. | Untuk membuat proyek baru di lingkungan kerja Anda, jalankan perintah berikut dan terima pengaturan default untuk semua pertanyaan:
npx create-next-app@latest
| Pengembang aplikasi, Pemrogram, Pengembang perangkat lunak | | Uji aplikasi dasar. | Jalankan perintah berikut dan konfirmasikan bahwa aplikasi dasar berhasil dimuat di browser:
npm run dev
| Pengembang aplikasi, Pemrogram, Pengembang perangkat lunak | | Bersihkan kode dasar. | Arahkan ke `page.tsx` file di `src/app` folder dan hapus konten default untuk mendapatkan halaman kosong. Setelah penghapusan, file akan terlihat seperti ini:
export default function Home() {
  return (

      );
}
| Pengembang aplikasi, Pemrogram, Pengembang perangkat lunak | ### Gunakan Amazon Q Developer untuk merancang proyek tic-tac-toe game | Tugas | Deskripsi | Keterampilan yang dibutuhkan | | --- | --- | --- | | Dapatkan ikhtisar langkah-langkah. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | Pengembang aplikasi, Pemrogram, Pengembang perangkat lunak | | Hasilkan kode untuk tic-tac-toe. | Di panel obrolan, mulailah tugas pengembangan dengan menggunakan `/dev` perintah diikuti dengan deskripsi tugas. Contoh:
/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.
Pengembang Amazon Q menghasilkan kode berdasarkan instruksi Anda. | Pengembang aplikasi, Pemrogram, Pengembang perangkat lunak | | Periksa dan terima kode yang dihasilkan. | Periksa kode secara visual, dan pilih **Terima kode** untuk mengganti `page.tsx` file secara otomatis.Jika Anda mengalami masalah, pilih **Berikan umpan balik & buat ulang** dan jelaskan masalah yang Anda temui. | Pengembang aplikasi, Pemrogram, Pengembang perangkat lunak | | Perbaiki kesalahan serat. | Contoh tic-tac-toe permainan termasuk grid. Kode yang dihasilkan Amazon Q Developer mungkin menggunakan tipe default`any`. Anda dapat menambahkan keamanan tipe dengan meminta Pengembang Amazon Q sebagai berikut:
/dev Ensure proper TypeScript typing for the onSquare Click event handler 
to resolve any 'any' type issues.
| Pengembang aplikasi, Pemrogram, Pengembang perangkat lunak | | Tambahkan daya tarik visual. | Anda dapat memecah persyaratan asli menjadi fragmen yang lebih kecil. Misalnya, Anda dapat meningkatkan UI game dengan petunjuk berikut dalam tugas dev. Prompt ini meningkatkan gaya Cascading Style Sheets (CSS) dan mengekspor aplikasi untuk penerapan.
/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.
| Pengembang aplikasi, Pemrogram, Pengembang perangkat lunak | | Uji lagi. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | Pengembang aplikasi, Pemrogram, Pengembang perangkat lunak | ### Menyebarkan aplikasi ke AWS Cloud | Tugas | Deskripsi | Keterampilan yang dibutuhkan | | --- | --- | --- | | Buat folder dan file untuk penyebaran. | Dalam proyek di lingkungan kerja Anda, buat folder penyebaran dan dua file di dalamnya: `pushtos3.sh` dan`cloudformation.yml`:
mkdir deployment && cd deployment
touch pushtos3.sh && chmod +x pushtos3.sh
touch cloudformation.yml
| Pengembang aplikasi, Pemrogram, Pengembang perangkat lunak | | Hasilkan kode otomatisasi. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | Administrator AWS, AWS DevOps, Pengembang aplikasi | | Hasilkan konten skrip. | Untuk membuat skrip penyebaran, gunakan prompt berikut:
/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.
| Pengembang aplikasi, Pemrogram, Pengembang perangkat lunak | | Menyebarkan aplikasi ke. AWS Cloud | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | Administrator AWS, AWS DevOps, arsitek Cloud, Pengembang aplikasi | ## Pemecahan masalah | Isu | Solusi | | --- | --- | | Build tidak membuat aplikasi satu halaman atau mengekspornya ke folder keluaran. | Lihatlah isi `next.config.mjs` file.Jika kode memiliki konfigurasi default berikut:
const nextConfig = {};
memodifikasinya sebagai berikut:
const nextConfig = {
  output: 'export',
  distDir: 'out',
};
| ## Sumber daya terkait + [Membuat proyek React baru](https://react.dev/learn/start-a-new-react-project) (dokumentasi React) + [Ikhtisar Pengembang Amazon Q](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/what-is.html) (AWS dokumentasi) + [Praktik terbaik Pengembang Amazon Q](https://docs.aws.amazon.com/prescriptive-guidance/latest/best-practices-code-generation/introduction.html) (Panduan AWS Preskriptif) + [Menginstal, mengonfigurasi, dan menggunakan Amazon Q Developer dengan JetBrains IDEs](https://www.youtube.com/watch?v=-iQfIhTA4J0&pp=ygUSYW1hem9uIHEgZGV2ZWxvcGVy) (YouTube video) + [Menginstal Amazon Q untuk baris perintah](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-getting-started-installing.html) (AWS dokumentasi)