Menggunakan Duet AI Sepanjang Siklus Proses Pengembangan Software

1. Ringkasan

Aktivitas sehari-hari seorang developer Google Cloud biasanya melibatkan penggunaan berbagai produk dan layanan Google Cloud. Dengan produk tersebut, developer dapat mengembangkan, menguji, men-deploy, dan mengelola aplikasi di cloud. Dengan bantuan dari Duet AI, developer dapat menjadi lebih produktif saat menggunakan produk Google Cloud dengan menggunakan chat interaktif, bantuan kode, dan integrasi tersemat Duet AI.

Catatan: Sebagai teknologi yang masih dalam tahap perkembangan awal, Duet AI dapat menghasilkan output yang tampaknya dapat diterima, tetapi sebenarnya tidak benar. Sebaiknya Anda memvalidasi semua output dari Duet AI sebelum menggunakannya. Untuk mengetahui informasi selengkapnya, lihat Duet AI di Google Cloud dan responsible AI.

Lab ini menggunakan bantuan Duet AI untuk men-deploy "Cymbal Superstore" aplikasi web belanja. Kemudian, Anda akan mengembangkan dan men-deploy fitur baru serta membangun bagian depan dan backend aplikasi. Anda juga akan mendapatkan bantuan Duet AI dalam menulis pengujian untuk aplikasi dan melihat bagaimana Duet dapat diintegrasikan dengan alat Google Cloud lainnya.

Tujuan

Anda akan mempelajari cara:

• Tingkatkan kualitas aplikasi web yang ada dengan bantuan Duet AI.
• Men-deploy aplikasi ke Cloud Run.
• Minta Gemini untuk menjelaskan error dalam aplikasi dan menyediakan perbaikan.
• Kembangkan pengujian untuk aplikasi dengan bantuan Duet AI.
• Lihat log aplikasi dengan bantuan Duet AI.

Prasyarat

• Akun Google Cloud Platform dan project dengan penagihan diaktifkan
• Pengalaman Linux Dasar

2. Penyiapan

Bagian ini membahas semua hal yang perlu Anda lakukan untuk memulai lab ini.

Buat Proyek

Untuk mempermudah pembersihan, mari buat project Google Cloud baru.

• Buka https://console.cloud.google.com.
• Klik menu dropdown pemilih project
• Pilih Buat Project
• Berikan nama yang mudah diingat seperti, pengantar ke penampung

Aktifkan Duet AI di Project Google Cloud

Sekarang kita akan mengaktifkan Duet AI API di Project Google Cloud. Ikuti langkah-langkah berikut:

1. Buka dasbor pada Kunjungi https://console.cloud.google.com dan pastikan Anda telah memilih Project Google Cloud yang akan digunakan untuk lab ini. Klik ikon Duet AI yang Anda lihat di kanan atas.

2. Jendela chat Duet AI akan terbuka di sisi kanan konsol. Klik tombol Enable seperti yang ditunjukkan di bawah ini. Jika Anda tidak melihat tombol Enable dan justru melihat antarmuka Chat, mungkin Anda telah mengaktifkan Duet AI untuk project tersebut dan Anda dapat langsung melanjutkan ke langkah berikutnya.

3. Setelah diaktifkan, Anda dapat menguji Duet AI dengan mengajukan satu atau dua kueri. Beberapa contoh kueri ditampilkan, tetapi Anda dapat mencoba, misalnya, "Apa itu Cloud Run?"

Duet AI akan merespons dengan menjawab pertanyaan Anda. Anda dapat mengklik ikon _ di pojok kanan atas untuk menutup jendela chat Duet AI.

Aktifkan Duet AI di Cloud Shell IDE

Kita akan menggunakan Cloud Shell IDE untuk langkah-langkah berikutnya dalam codelab ini. Kita perlu mengaktifkan dan mengonfigurasi Duet AI di Cloud Shell IDE dan langkah-langkahnya dijelaskan di bawah ini:

1. Luncurkan Cloud Shell melalui ikon yang ditunjukkan di bawah. Mungkin perlu waktu satu atau dua menit untuk memulai instance Cloud Shell.

2. Klik tombol Editor atau Open Editor (mana pun yang tersedia) dan tunggu hingga Cloud Shell IDE muncul. Anda akan menggunakan "baru" editor lama, bukan editor lama.

3. Klik tombol Cloud Code - Sign in di status bar bawah seperti yang ditunjukkan. Otorisasi plugin seperti yang ditunjukkan. Jika Anda melihat "Cloud Code - no project" di status bar, pilih opsi tersebut, lalu pilih Project Google Cloud tertentu dari daftar project yang akan dikerjakan.

4. Klik tombol Duet AI di pojok kanan bawah seperti yang ditunjukkan, lalu pilih project Google Cloud yang tepat dengan Cloud AI Companion API yang sudah diaktifkan.

5. Setelah memilih dan memberi otorisasi project Google Cloud, pastikan Anda dapat melihatnya di pesan status Cloud Code di status bar dan Duet AI juga sudah diaktifkan di sebelah kanan status bar seperti yang ditunjukkan di bawah:

Duet AI siap digunakan.

3. Menggunakan Duet AI

Anda akan membuat aplikasi web sebagai bagian dari lab ini. Lab menunjukkan banyak tempat untuk mencoba Duet. Namun, jika ingin tahu, Anda juga dapat meluangkan waktu untuk bertanya kepada Duet di mana saja di lab.

Misalnya, Anda akan menggunakan Terraform untuk membuat dan men-deploy aplikasi dasar. Jika Anda tidak tahu apa itu Terraform, Anda dapat bertanya kepada Duet. Jika Anda ingin memahami langkah-langkahnya, Duet dapat menjelaskannya. Ingin membuka kode dan bertanya tentang baris tertentu? Cobalah Duet.

Catatan: Sebagai teknologi yang masih dalam tahap perkembangan awal, Duet AI dapat menghasilkan output yang tampaknya dapat diterima, tetapi sebenarnya tidak benar. Sebaiknya Anda memvalidasi semua output dari Duet AI sebelum menggunakannya. Untuk mengetahui informasi selengkapnya, lihat Duet AI di Google Cloud dan responsible AI.

4. Membangun app web

Lab ini menggunakan "Cymbal Superstore" aplikasi web belanja. Dalam tugas berikutnya di lab ini, Anda akan menggunakan Duet AI untuk mengembangkan dan men-deploy fitur baru dalam aplikasi ini. Sebelum dapat melihat cara Duet AI membantu Anda memahami kode yang ada, Anda memerlukan beberapa kode yang sudah ada untuk digunakan, sehingga Anda akan membangun komponen frontend dan backend aplikasi ini sekarang.

Anda akan berpindah antara Cloud Shell dan Editor Cloud Shell saat mengerjakan project ini. Cara mudah untuk melakukannya adalah dengan menggunakan tombol di bagian atas layar:

Mengonfigurasi lingkungan

Menjalankan perintah di Cloud Shell.

1. Tetapkan ID project:

gcloud config set project <Google Cloud Project ID>

2. Untuk menjalankan helper kredensial Docker, jalankan perintah berikut:

gcloud auth configure-docker

3. Jika ditanya apakah ingin melanjutkan, ketik Y.
4. Untuk mendownload "Cymbal Superstore" kode aplikasi Anda, jalankan perintah berikut dari direktori root Anda di Cloud Shell. Aplikasi tersebut akan mendapatkan kode Cymbal Superstore dari GitHub.

git clone https://github.com/GoogleCloudPlatform/cymbal-superstore

5. Anda harus mengaktifkan beberapa API agar kode ini berjalan dengan baik. Di Cloud Shell, masukkan perintah di bawah:

gcloud services enable cloudresourcemanager.googleapis.com compute.googleapis.com artifactregistry.googleapis.com serviceusage.googleapis.com run.googleapis.com bigquery.googleapis.com 

6. Ubah ke direktori Terraform dalam kode yang Anda download:

cd cymbal-superstore/terraform

5. Karena lab ini tidak menggunakan Spanner, kami akan menggunakan versi petunjuk Terraform yang tidak menginstal Spanner. Di Cloud Shell, masukkan perintah di bawah:

mv main.tf.nospanner main.tf

8. Untuk menghemat keharusan memasukkan nama dan nomor project setiap kali Anda menjalankan perintah Terraform, buat file bernama terraform.tfvars di direktori terraform ini. Tambahkan dua baris ke file ini dengan informasi di bawah ini dan simpan file tersebut. Anda dapat menemukan informasi ini di dasbor project.

project_id="Your project id"
project_number=Your project number

9. Lakukan inisialisasi Terraform dengan baris:

terraform init

10. Terakhir, deploy resource Terraform ke project Anda menggunakan perintah di bawah ini. Anda mungkin diminta untuk mengetik "yes" selama deployment ini. Proses ini mungkin memerlukan waktu hingga 10 menit, jadi Anda mungkin perlu meluangkan waktu untuk memeriksa diagram arsitektur di https://github.com/GoogleCloudPlatform/cymbal-superstore/blob/main/assets/architecture.png. Anda juga dapat melihat kode yang ada dan menggunakan Duet untuk membantu kita memahaminya.

terraform apply

Setelah perintah ini berhasil diselesaikan, Anda akan melihat output seperti berikut:

11. Perbarui frontend untuk berbicara dengan inventory_cr_endpoint backend di output Anda. Untuk melakukannya, salin nilai inventory_cr_endpoint Anda, buka cymbal-superstore/frontend/.env.production, dan ganti nilai REACT_APP_INVENTORY_URL.
12. Jalankan kembali terraform apply. Proses ini hanya memerlukan waktu satu menit karena tindakan ini akan men-deploy ulang aplikasi React frontend ke Cloud Storage menggunakan URL backend yang diperbarui.
13. Buka frontend_ip di browser. Anda akan melihat frontend Cymbal Superstore. Perubahan mungkin membutuhkan waktu beberapa menit untuk diterapkan, jadi Anda mungkin perlu memeriksanya lebih dari sekali.

14. Klik New Arrivals di sisi kiri halaman beranda Cymbal. Anda akan melihat halaman frontend rekaan dengan produk placeholder. Hal ini wajar karena Anda akan menerapkan kode Inventory API backend untuk menayangkan halaman produk baru pada tugas berikutnya di lab ini.

Jika mengalami masalah saat melihat aplikasi di browser, Anda harus memeriksa untuk memastikan Cloud Run telah di-deploy dengan benar. Untuk melakukannya:

• Buka Cloud Run dari menu utama di Cloud Console.
• Pilih layanan inventory dari daftar layanan.
• Pilih REVISI dari tab di halaman inventaris.

• Pastikan aplikasi Cloud Run di-deploy saat Anda diharapkan:

Jika belum di-deploy, Anda dapat men-deploy-nya dengan memilih EDIT & DEPLOY NEW REVISION di bagian atas halaman dan menerima nilai default.

5. Memodifikasi backend aplikasi web

Sekarang mari kita gunakan Duet AI untuk menambahkan fungsionalitas ke backend aplikasi web.

Dalam tugas ini, Anda meminta Duet AI untuk menyelesaikan kode guna menerapkan endpoint /newproducts di aplikasi. Anda akan membuat endpoint di backend untuk mengambil produk baru dari Firestore dan menguji endpoint ini sebelum men-deploy perubahan.

Mengembangkan endpoint /newproducts

1. Buka file cymbal-superstore/backend/index.ts di editor Cloud Shell.
2. Dalam file index.ts, scroll ke komentar untuk DEMO TASK START, sekitar baris 95, tempat Anda melihat sekelompok baris yang diberi komentar untuk tugas ini. Hapus semua baris yang dikomentari dan ganti dengan perintah Duet AI berikut:

// Get new products from Firestore (added < 7 days ago) and quantity > 0 (in stock)

3. Untuk meminta Duet AI membuat kode fungsi, pilih seluruh komentar, lalu klik bohlam ( ).
4. Di menu Tindakan Lainnya, pilih Buat kode.
5. Arahkan kursor ke kode yang dihasilkan, lalu di toolbar Duet AI, klik Setujui. Duet AI mengisi kode fungsi untuk endpoint /newproducts.

Catatan: Duet AI mungkin menghasilkan beberapa versi kode untuk perintah Anda. Anda dapat memilih versi tertentu dengan men-scroll daftar pada toolbar.

6. Kode yang dihasilkan akan mirip dengan contoh berikut:

app.get("/newproducts", async (req: Request, res: Response) => {
  const products = await firestore
    .collection("inventory")
    .where("timestamp", ">", new Date(Date.now() - 604800000))
    .where("quantity", ">", 0)
    .get();
  const productsArray: any[] = [];
  products.forEach((product) => {
    const p: Product = {
      id: product.id,
      name: product.data().name,
      price: product.data().price,
      quantity: product.data().quantity,
      imgfile: product.data().imgfile,
      timestamp: product.data().timestamp,
      actualdateadded: product.data().actualdateadded,
    };
    productsArray.push(p);
  });
  res.send(productsArray);
});

Banyak baris yang mungkin digarisbawahi untuk memperingatkan Anda tentang potensi masalah lisensi. Untuk lab ini, Anda dapat menerapkan Quick Fix, tetapi pada masa mendatang, periksa peringatan ini.

7. Jika kode yang dihasilkan terlihat tidak sama dengan contoh di langkah sebelumnya, Anda dapat menggantinya sekarang atau melihat bagaimana Duet dapat membantu proses debug nanti. Ada juga versi kode dengan perkiraan error dalam file scripts/solutioncode-with-bug.ts .
8. Simpan file index.ts.

Menguji dan men-debug endpoint /``newproducts

1. Di Cloud Shell, pindahkan ke direktori cymbal-superstore/backend. Masukkan perintah:

npm run start

Tindakan ini akan memulai endpoint.

2. Untuk melihat hasil endpoint, buka terminal lain menggunakan + di panel menu Cloud Shell dan jalankan perintah:

curl localhost:8000/newproducts

Anda mungkin melihat error curl: (52) Empty reply from server di terminal baru dan pesan error panjang dengan detail 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' di terminal yang menjalankan endpoint.

3. Mari kita perbaiki error tersebut. Tapi sebelumnya, kita perlu memahami apa arti pesan {i>error<i}. Untuk melakukan ini, kita akan meminta Duet. Buka Chat Duet AI dari menu di sebelah kiri Cloud Shell Editor dan ajukan pertanyaan berikut:

I'm querying Cloud Firestore and getting this error: 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' What does it mean?

Duet akan memberi Anda beberapa opsi untuk memperbaikinya, termasuk menghapus salah satu filter ketidaksetaraan. Untuk mengatasi, hapus baris .where("quantity", ">", 0) dari index.ts sehingga hanya ada satu filter dalam kueri kita.

4. Ulangi dua langkah pertama di atas untuk memulai ulang server dan mendapatkan daftar produk. Pengujian seharusnya berhasil sekarang. Jika tidak, gunakan Duet untuk mencari tahu masalahnya (atau gunakan solusi yang telah diperbaiki di scripts/solutioncode-bug-fixed.ts untuk melanjutkan).

Men-deploy Perubahan

Untuk men-deploy aplikasi yang telah diubah, cukup jalankan kembali terraform apply dari direktori terraform di Cloud Shell. Anda kemudian dapat melihat aplikasi tersebut di alamat IP yang disediakan Terraform.

6. Ujian Menulis

Tugas penting yang sering kali tidak diprioritaskan adalah membuat tes untuk kode dalam sebuah proyek. Seperti yang mungkin Anda ketahui, Duet dapat membantu membuat pengujian ini.

Mari kita buat pengujian untuk kode newproducts yang baru saja kita buat.

1. Buka backend/index.test.ts. Gunakan chat Duet AI untuk menghasilkan pengujian bagi fungsi newproducts() dengan perintah:

Help me write an Express.js test using Jest, in typescript, for the GET /newproducts handler in index.ts. Should check if the response code is 200 and the list of new products is length 8.

Anda akan melihat perintah ini menyediakan baris import yang sudah ada dalam file. Hanya salin pengujian describe() ke dalam file pada baris yang ditunjukkan. Simpan file.

Atau, Anda dapat meningkatkan kualitas perintah dan memberi tahu Duet untuk tidak menyertakan pernyataan impor, jadi Anda seharusnya mendapatkan kode yang diperlukan saja.

2. Untuk melihat hasil pengujian, buka Cloud Shell dan ubah direktori ke folder backend, lalu jalankan perintah:

npm run test

7. Logging

Gemini dapat membantu project Anda bahkan setelah di-deploy. Di bagian ini, kita akan mempelajari log dengan bantuan Duet AI.

Kembali ke Konsol Cloud dan pastikan Duet berjalan. Tanyakan kepada Duet tempat Anda dapat menemukan log. Jangan ragu untuk mencoba perintah Anda sendiri, tetapi jika perintah tersebut tidak memberikan jawaban yang sesuai, perintah berikut dapat Anda gunakan.

How can I view the Cloud Run logs for the service called 'inventory'?

Duet AI akan menyarankan Anda untuk membuka halaman Cloud Run, memilih layanan inventaris, lalu memeriksa log layanan tersebut. Anda akan melihat yang seperti:

Pilih salah satu item dan minta Gemini untuk menjelaskannya. Anda seharusnya mendapatkan deskripsi entri dalam bahasa alami.

Anda juga dapat melihat Log Entries di Logs Explorer, yang dapat Anda buka dari opsi Logging di menu utama. Keuntungan melihat entri log dari Logs Explorer adalah opsi untuk menjelaskan entri sudah ada di dalamnya, seperti yang ditunjukkan di bawah ini:

8. Selamat!

Selamat! Anda telah berhasil menggunakan Duet AI untuk membantu memahami kode yang mungkin belum pernah Anda lihat sebelumnya. Anda telah meningkatkan kualitas kode ini, membuat pengujian untuknya, dan menggunakan Duet untuk membantu memahami entri log.

Pembersihan

Hapus Project

Untuk membersihkan, cukup hapus project.

• Di menu navigasi, pilih IAM & Admin
• Kemudian klik setelan di submenu
• Klik ikon tempat sampah dengan teks "Hapus Project"
• Ikuti petunjuk petunjuknya

Di lab ini, kita telah melihat cara:

• Tingkatkan kualitas aplikasi web yang ada dengan bantuan Duet AI.
• Men-deploy aplikasi ke Cloud Run.
• Minta Gemini untuk menjelaskan error dalam aplikasi dan menyediakan perbaikan.
• Kembangkan pengujian untuk aplikasi dengan bantuan Duet AI.
• Lihat log aplikasi dengan bantuan Duet AI.