Gunakan Amazon Q Developer sebagai asisten pengkodean untuk meningkatkan produktivitas Anda - AWS Prescriptive Guidance
RingkasanPrasyarat dan batasanAlatPraktik terbaikEpikPemecahan MasalahSumber daya terkait

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 di dokumentasi Amazon Q Developer.

  • Akun AWS Pengaturan aktif dengan Pengembang Amazon Q. Untuk petunjuknya, lihat Memulai dalam dokumentasi Pengembang Amazon Q.

  • npm diinstal. Untuk petunjuk, lihat dokumentasi npm. Pola ini diuji dengan npm versi 10.8.

  • AWS Command Line Interface (AWS CLI) diinstal. Untuk instruksi, lihat AWS CLI dokumentasi.

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. Untuk titik akhir tertentu, lihat halaman titik akhir dan kuota Layanan, dan pilih tautan untuk layanan.

Alat

Praktik terbaik

Lihat Praktik pengkodean terbaik dengan Pengembang Amazon Q 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

TugasDeskripsiKeterampilan 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 (<div></div>
      );
}
Pengembang aplikasi, Pemrogram, Pengembang perangkat lunak
TugasDeskripsiKeterampilan yang dibutuhkan

Dapatkan ikhtisar langkah-langkah.

  1. Di IDE Anda, buka proyek Anda, dan pilih ikon Amazon Q untuk membuka panel obrolan.

  2. Di panel obrolan Amazon Q Developer, mintalah ikhtisar untuk membuat aplikasi satu halaman (SPA). Misalnya:

    I would like to create a single-page application involving Next.js React framework
for tic-tac-toe game. What are the steps?
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. Misalnya:

/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 defaultany. 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.

  1. Sekarang setelah Anda menyelesaikan siklus hidup pengembangan, uji kode untuk mengonfirmasi bahwa kode berfungsi seperti yang diharapkan. Untuk menjalankan aplikasi secara lokal, gunakan perintah:

    npm run dev

  2. Jika aplikasi berfungsi seperti yang diharapkan, gunakan build perintah untuk mengekspor seluruh aplikasi ke folder output sebagai persiapan untuk penyebaran:

    npm run build
Pengembang aplikasi, Pemrogram, Pengembang perangkat lunak
TugasDeskripsiKeterampilan yang dibutuhkan

Buat folder dan file untuk penyebaran.

Dalam proyek di lingkungan kerja Anda, buat folder penyebaran dan dua file di dalamnya: pushtos3.sh dancloudformation.yml:

mkdir deployment && cd deployment
touch pushtos3.sh && chmod +x pushtos3.sh
touch cloudformation.yml
Pengembang aplikasi, Pemrogram, Pengembang perangkat lunak

Hasilkan kode otomatisasi.

  1. Di panel obrolan untuk Pengembang Amazon Q, berikan prompt berikut:

    /dev Generate a Cloudformation template that creates two resources: tictactoe artifact 
bucket and CloudFront. CloudFront should be configured with this bucket as origin. 
Add cache policy appropriate for Amazon S3 and default root object as index.html. 
Ensure that origin access control is used and no public bucket is created. 
Output all the resources and  their ARNs.

  2. Tinjau dan terima kode yang dihasilkan. cloudformation.ymlFile yang Anda buat sebelumnya sekarang harus diisi dengan AWS CloudFormation skrip yang membuat sumber daya untuk file. AWS Cloud

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

  1. Konfigurasikan lingkungan kerja dengan AWS kredensil yang valid.

  2. Jalankan skrip shell untuk menyebarkan tic-tac-toe game yang berfungsi penuh ke file. AWS Cloud

Administrator AWS, AWS DevOps, arsitek Cloud, Pengembang aplikasi

Pemecahan Masalah

IsuSolusi

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